EP42 公告详情页

文件路径： E:/homework/uniappv3tswallpaper/api/apis.js

先添加相应的api。

import {request
} from "@/utils/requset.js"export function apiGetBanner() {return request({url: "/homeBanner"})
}
export function apiGetDayRandom() {return request({url: "/randomWall"})
}export function apiGetRequest(data = {}) {return request({url: '/wallNewsList',data})
}export function apiGetClassify(data = {}) {return request({url: '/classify',data})
}export function apiGetCLassList(data = {}) {return request({url: '/wallList',data})
}export function apiGetSetupScore(data = {}) {return request({url: '/setupScore',data})
}export function apiWriteDownload(data = {}) {return request({url: '/downloadWall',data})
}export function apiGetDetailWall(data = {}) {return request({url: '/detailWall',data})
}export function apiGetUserInfo(data = {}) {return request({url: '/userInfo',data})
}export function apiGetUserWallList(data = {}) {return request({url: '/userWallList',data})
}export function apiGetWallNewsList(data = {}) {return request({url: '/wallNewsDetail',data})
}

文件路径： E:/homework/uniappv3tswallpaper/pages/index/index.vue

index 页面跳转的时候传递参数。

<template><view class="homeLayout pageBg"><custom-nav-bar title="推荐"></custom-nav-bar><view class="banner"><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"indicator-color="rgba(255,255,255,0.5)" indicator-active-color="rgba(255,255,255,1)"><swiper-item v-for="item in bannerList" :key="item._id"><image :src="item.picurl" mode="scaleToFill"></image></swiper-item></swiper></view><view class="notice"><view class="left"><uni-icons type="sound-filled" size="20"></uni-icons><text class="text">公告</text></view><view class="center"><swiper :autoplay="true" :interval="3000" :duration="1000" circular vertical><swiper-item v-for="item in noticeList" :key="item._id"><navigator :url="'/pages/notice/detail?id=' + item._id">{{item.title}}</navigator></swiper-item></swiper></view><view class="right"><uni-icons type="forward" size="16" color="#333"></uni-icons></view></view><view class="select"><common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar"></uni-icons><view class="text"><uni-dateformat :date="Date.now()" format="dd号" /></view></view></template></common-title><view class="content"><scroll-view scroll-x="true"><view class="box" v-for="item in randomList" :key="item._id" @click="goPreview(item._id)"><image :src="item.smallPicurl" mode="aspectFill"></image></view></scroll-view></view></view><view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="">More+</navigator></template></common-title><view class="content"><theme-item v-for="item in classifyList" :key="item._id" :items="item"></theme-item><theme-item :isMore="true"></theme-item></view></view></view>
</template><script setup>import {ref} from 'vue';import {apiGetBanner,apiGetDayRandom,apiGetRequest,apiGetClassify} from "@/api/apis.js"import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"const bannerList = ref([]);const randomList = ref([])const noticeList = ref([])const classifyList = ref([])const getBanner = async () => {let res = await apiGetBanner()bannerList.value = res.data};const getDayRandom = async () => {let res = await apiGetDayRandom()randomList.value = res.data};const getNotice = async () => {let res = await apiGetRequest({select: true})noticeList.value = res.data}const getClassify = async () => {let res = await apiGetClassify({select: true})classifyList.value = res.data}// 点击跳转到壁纸预览页面const goPreview = (id) => {uni.setStorageSync("storageClassList", randomList.value);uni.navigateTo({url: '/pages/preview/preview?id=' + id})};// 分享给好友onShareAppMessage((e) => {return {title: "壁纸小程序好友",path: "/pages/classify/classify"}})// 分享到朋友圈onShareTimeline(() => {return {title: "壁纸小程序朋友圈"}})getBanner()getDayRandom()getNotice()getClassify()
</script><style lang="scss">.homeLayout {.banner {width: 750rpx;padding: 30rpx 0;swiper {width: 100%;height: 340rpx;&-item {width: 100%;height: 100%;padding: 0 30rpx;image {width: 100%;height: 100%;border-radius: 10rpx;}}}}.notice {margin: 0 30rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;background: gray;border-radius: 80rpx;height: 80rpx;line-height: 80rpx;.left {width: 140rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;:deep() {.uni-icons {color: $brand-theme-color !important;}}.text {color: $brand-theme-color;font-weight: 600;font-size: 28rpx;}}.center {flex: 1;height: 100%;swiper {height: 100%;&-item {// 以下三条是实现 文字长度超过显示宽度时展示省略号 的关键操作overflow: hidden;white-space: nowrap;text-overflow: ellipsis;// 以上三条height: 100%;color: $text-font-color-3;font-size: 30rpx;// flex布局与 text-overflow: ellipsis;属性 冲突// display: flex;// flex-direction: row;// flex-wrap: nowrap;// align-content: center;// align-items: center;// justify-content: flex-start;align-content: end;align-items: end;}}}.right {width: 70rpx;display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: center;}}.select {padding: 50rpx 30rpx 0 30rpx;scroll-view {white-space: nowrap;.box {display: inline-block;width: 200rpx;height: 430rpx;margin-right: 15rpx;image {height: 100%;width: 100%;}}:last-child {margin-right: 0;border-radius: 10rpx;}}.date {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;color: $brand-theme-color;:deep() {.uni-icons {color: $brand-theme-color !important;}}}}.theme {padding: 50rpx 30rpx;.content {display: grid;gap: 15rpx;grid-template-columns: repeat(3, 1fr);}}}
</style>

文件路径： E:/homework/uniappv3tswallpaper/pages/notice/detail.vue

详情页接收参数，传递参数发送请求，渲染。

<template><view class="noticeLayout"><view class="title"><view class="tag" v-if="wallNewsList.select"><uni-tag inverted text="置顶" type="error"></uni-tag></view><view class="font">{{wallNewsList.title}}</view></view><view class="info"><view class="item">{{wallNewsList.author}}</view><view class="item"><uni-dateformat :date="wallNewsList.publish_date" format="yyyy-MM-dd hh:mm:ss" /></view></view><view class="content"><!-- <rich-text :nodes="wallNewsList.content"></rich-text> --><mp-html :content="wallNewsList.content" /></view><view class="count">阅读 {{wallNewsList.view_count}}</view></view>
</template><script setup>import {ref} from "vue";import {apiGetWallNewsList} from "../../api/apis.js"import {onLoad} from "@dcloudio/uni-app"const wallNewsList = ref({})let noticeIdonLoad((e) => {noticeId = e.idgetWallNewsList()})const getWallNewsList = () => {apiGetWallNewsList({id: noticeId}).then((res) => {wallNewsList.value = res.dataconsole.log(wallNewsList.value)})}
</script><style lang="scss" scoped></style>

文件路径： E:/homework/uniappv3tswallpaper/pages/user/user.vue

用户页面的两个功能，跳转后公用公告详情页。这里写定id。

<template><view class="userLayout pageBg" v-if="userInfo"><view class="" :style="{height:getNavBarHeight() + 'px'}"> </view><view class="userInfo"><view class="avatar"><image src="../../common/images/preview1.jpg" mode="aspectFill"></image></view><view class="ip">{{userInfo.IP}}</view><view class="from">{{userInfo.address.city || userInfo.address.province || userInfo.address.country}}</view></view><view class="section"><view class="list"><navigator url="/pages/classlist/classlist?name=我的下载&type=download"><view class="row"><view class="left"><uni-icons type="download-filled" size="20" color="#28b389"></uni-icons><view class="text">我的下载</view></view><view class="right"><view class="text">{{userInfo.downloadSize}}</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></navigator><navigator url="/pages/classlist/classlist?name=我的评分&type=score"><view class="row"><view class="left"><uni-icons type="star-filled" size="20" color="#28b389"></uni-icons><view class="text">我的评分</view></view><view class="right"><view class="text">{{userInfo.scoreSize}}</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></navigator><view class="row"><view class="left"><uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons><view class="text">联系客服</view></view><view class="right"><view class="text"></view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view><!-- #ifdef MP --><button open-type="contact">联系客服</button><!-- #endif --><!-- #ifndef MP --><button @click="clickContact">打电话</button><!-- #endif --></view></view></view><view class="section"><view class="list"><navigator url="/pages/notice/detail?id=65361e318b0da4ca084e3ce0"><view class="row"><view class="left"><uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons><view class="text">订阅更新</view></view><view class="right"><view class="text"></view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></navigator><navigator url="/pages/notice/detail?id=6536358ce0ec19c8d67fbe82"><view class="row"><view class="left"><uni-icons type="flag-filled" size="20" color="#28b389"></uni-icons><view class="text">常见问题</view></view><view class="right"><view class="text"></view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></navigator></view></view></view><view class="loadingLayout" v-else><view class="" :style="{height:getNavBarHeight() + 'px'}"> </view><uni-load-more status="loading"></uni-load-more></view>
</template><script setup>import {getNavBarHeight} from "@/utils/system.js"import {apiGetUserInfo} from "@/api/apis.js"import {ref} from "vue";const userInfo = ref(null)const clickContact = () => {uni.makePhoneCall({phoneNumber: '114' //仅为示例});}const getUerInfo = () => {apiGetUserInfo().then(res => {userInfo.value = res.data// console.log(userInfo.value)})}getUerInfo()
</script><style lang="scss" scoped>.userLayout {.userInfo {display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;padding: 50rpx 0;.avatar {height: 160rpx;width: 160rpx;border-radius: 50%;overflow: hidden;image {height: 100%;width: 100%;}}.ip {font-size: 44rpx;color: #333;padding: 20rpx 0 5rpx;}.from {font-size: 28rpx;color: #aaa;}}}.section {width: 690rpx;margin: 50rpx auto;border: 1rpx solid #eee;border-radius: 10rpx;border-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);.list {.row {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;justify-content: space-between;align-items: center;padding: 0 30rpx;height: 100rpx;border-bottom: 1px solid #eee;position: relative;background: white;:last-child {border-bottom: 0;}.left {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;.text {padding-left: 20rpx;color: #666}}.right {display: flex;flex-direction: row;flex-wrap: nowrap;align-content: center;align-items: center;.text {padding-left: 20rpx;color: #666}}button {position: absolute;top: 0%;left: 0%;height: 100%;width: 100%;opacity: 0}}}}
</style>