新增页面
This commit is contained in:
58
pages/wikipedia/detail.vue
Normal file
58
pages/wikipedia/detail.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
||||
// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
||||
import { onLoad } from "@dcloudio/uni-app"
|
||||
// import mySwiper from "@/components/mySwiper.vue"
|
||||
import {ref,onMounted,nextTick} from "vue"
|
||||
import {useStore} from '@/store/index.js'
|
||||
import api from "@/api/index.js"
|
||||
onLoad((e) => {
|
||||
console.log(e)
|
||||
a_info.value = JSON.parse(decodeURIComponent(e.info))
|
||||
if(!e.id) {
|
||||
uni.showToast({
|
||||
icon:"error",
|
||||
title:"错误",
|
||||
duration:2000
|
||||
})
|
||||
a_info.value = null
|
||||
return
|
||||
}
|
||||
getDetail(e.id)
|
||||
})
|
||||
// 变量
|
||||
// const content = ref(null)
|
||||
const a_info = ref(null)
|
||||
// 函数
|
||||
async function getDetail(id) {
|
||||
const res = await api.getArticleDetail({id})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<view class="detailBox">
|
||||
<view class="title">
|
||||
{{a_info?.title}}
|
||||
</view>
|
||||
<view class="more-info small-text">2023-10-5</view>
|
||||
<view class="d-content" v-html="a_info?.content"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.detailBox{
|
||||
.more-info{
|
||||
text-align: right;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
font-weight: 900;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
padding: 40rpx;
|
||||
.d-content{
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,118 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
|
||||
// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
||||
import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
||||
// import mySwiper from "@/components/mySwiper.vue"
|
||||
import {ref,onMounted,nextTick} from "vue"
|
||||
import {useStore} from '@/store/index.js'
|
||||
import api from "@/api/index"
|
||||
// 生命周期
|
||||
onLoad(() => {
|
||||
getList()
|
||||
})
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(()=>{
|
||||
init()
|
||||
getList()
|
||||
// setTimeout(function () {
|
||||
// uni.stopPullDownRefresh();
|
||||
// }, 1000);
|
||||
})
|
||||
// 上拉触底
|
||||
onReachBottom(()=>{
|
||||
queryParams.value.page ++
|
||||
getList()
|
||||
})
|
||||
// 变量
|
||||
const queryParams = ref({
|
||||
page:1,
|
||||
pageSize:10
|
||||
})
|
||||
const list = ref([
|
||||
{
|
||||
id:1,
|
||||
cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
|
||||
title:'金秋相逢 共叙合作',
|
||||
reading_num:100,
|
||||
content:`
|
||||
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
||||
春发其华，秋收其实。
|
||||
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
||||
`
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
|
||||
title:'金秋相逢 共叙合作',
|
||||
reading_num:100,
|
||||
content:`
|
||||
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
||||
春发其华，秋收其实。
|
||||
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
||||
`
|
||||
}
|
||||
])
|
||||
// 方法
|
||||
function init() {
|
||||
queryParams.page = 1
|
||||
queryParams.pageSize = 10
|
||||
}
|
||||
async function getList(){
|
||||
const res = await api.getArticleList(queryParams.value)
|
||||
}
|
||||
function toDetail(item) {
|
||||
let info = encodeURIComponent(JSON.stringify(item))
|
||||
// console.log(info)
|
||||
uni.navigateTo({
|
||||
url:"./detail?info="+info+"&id="+item.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<template>
|
||||
<view class="articleBox page-box">
|
||||
<view class="userInfoBox">
|
||||
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
|
||||
<view class="lb-left">
|
||||
<image :src="item.cover_img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="lb-right">
|
||||
<view class="lb-title">{{item.title}}</view>
|
||||
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.articleBox{
|
||||
.list-box{
|
||||
.lb-card{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 2rpx solid #eaeaea;
|
||||
.lb-left{
|
||||
image{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
.lb-right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.lb-title{
|
||||
font-weight: 900;
|
||||
font-size:32rpx ;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user