当前位置： 首页 > news >正文

EP42 公告详情页

news 2025/8/3 4:29:29

文件路径： 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>
http://www.lryc.cn/news/450523.html

相关文章：

  • 游戏找不到xinput1_3.dll的原因及解决方法
  • 防反接电路设计
  • SpringMVC源码-AbstractHandlerMethodMapping处理器映射器将@Controller修饰类方法存储到处理器映射器
  • 毕业设计选题：基于ssm+vue+uniapp的购物系统小程序
  • 【动态规划-最长公共子序列（LCS）】力扣583. 两个字符串的删除操作
  • 【分布式微服务云原生】8分钟探索RPC：远程过程调用的奥秘与技术实现
  • Linux操作系统中Redis
  • 每日论文5—06TCAS2锁相环电流匹配的gain-boosting电荷泵
  • 接口隔离原则（学习笔记）
  • 基于ESP8266—AT指令连接阿里云+MQTT透传数据（1）
  • 强化学习-python案例
  • Element UI教程：如何将Radio单选框的圆框改为方框
  • vue3结合 vue-router和keepalive实现路由跳转保持滚动位置不改变（超级简易清晰）
  • PostgreSQL 字段使用pglz压缩测试
  • 基于大数据的学生体质健康信息系统
  • 【STM32】 TCP/IP通信协议（1）--LwIP介绍
  • 828华为云征文｜部署音乐流媒体服务器 mStream
  • 【动态规划-最长公共子序列（LCS）】力扣712. 两个字符串的最小ASCII删除和
  • override
  • 万象奥科工业平板上线，邀您体验与众不同！
  • java将word转pdf
  • Golang | Leetcode Golang题解之第449题序列化和反序列化二叉搜索树
  • 基于SpringBoot+Vue+MySQL的美食信息推荐系统
  • spring boot jar 分离自动部署脚本
  • PGMP-03战略一致性
  • 华为OD机试真题---智能成绩表
  • 828华为云征文 | 华为云Flexus云服务器X实例搭建企业内部VPN私有隧道，以实现安全远程办公
  • Hadoop集群的高可用（HA）：NameNode和resourcemanager高可用的搭建
  • 支付宝沙箱环境 支付
  • 获取unity中prefab的中文文本内容以及和prefab有关的问题