EP41 我的评分和我的下载公用分类列表

文件路径： 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})
}

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

从我的页面向分类列表页面跳转的时候传递新的参数 name 和 type 。

<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"><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><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></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>

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

接收新的参数，在获取列表信息的时候根据已有参数是 id 还是 type 来区分发起不同的请求。

<template><view class="classlist"><view class="loadingLayout" v-if="!classList.length && !noData"><uni-load-more status="loading"></uni-load-more></view><view class="content"><navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classList":key="item._id"><image :src="item.smallPicurl" mode="aspectFill"></image></navigator></view><view class="loadingLayout" v-if="classList.length || noData"><uni-load-more :status="noData? 'nomre':'loading'"></uni-load-more></view></view>
</template><script setup>import {ref} from 'vue'import {apiGetCLassList,apiGetUserWallList} from '@/api/apis.js'import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'const queryParams = {pageNum: 1,pageSize: 12}const noData = ref(false)onLoad(e => {// console.log(e)let {id = null, name = null, type = null} = e;uni.setNavigationBarTitle({title: name})queryParams.classid = idqueryParams.type = typequeryParams.name = namegetClassList()})// 触底获取新数据onReachBottom(() => {if (noData.value) {return}queryParams.pageNum++getClassList()})// 定义列表参数const classList = ref([])// 发请求获取数据const getClassList = async () => {let resif (queryParams.classid) {res = await apiGetCLassList(queryParams)console.log(11)}if (queryParams.type) {res = await apiGetUserWallList(queryParams)console.log(22)}console.log(queryParams, res)classList.value = [...classList.value, ...res.data]uni.setStorageSync("storageClassList", classList.value)if (queryParams.pageSize > res.data.length) {noData.value = true}}// 分享给好友onShareAppMessage((e) => {return {title: "壁纸小程序-好友" + queryParams.name,path: "/pages/classlist/classlist?id=" + queryParams.classid + "&name=" + queryParams.name}})// 分享到朋友圈onShareTimeline(() => {return {title: "壁纸小程序-朋友圈" + queryParams.name,query: "id=" + queryParams.classid + "&name=" + queryParams.name}})// 离开页面onUnload(() => {uni.removeStorageSync("storageClassList")})
</script><style lang="scss">.classlist {.content {display: grid;grid-template-columns: repeat(3, 1fr);gap: 5px;padding: 5rpx;.item {height: 440rpx;width: 100%;image {height: 100%;width: 100%;display: block;}}}}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1551071.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Word办公自动化的一些方法

Word办公自动化的一些方法

1.Word部分内容介绍 word本身是带有格式的一种文档&#xff0c;有人说它本质是XML&#xff0c;所以一定要充分利用标记了【样式】的特性来迅速调整【格式】&#xff0c;从而专心编辑文档内容本身。 样式&#xff08;集&#xff09; 编号&#xff08;多级关联样式编号&#xff…
阅读更多...
Ubuntu下安装Zookeeper集群

Ubuntu下安装Zookeeper集群

Zookeeper集群是一个开源的分布式协调服务系统&#xff0c;它由Apache软件基金会维护&#xff0c;旨在为分布式应用提供一致性和可靠性的服务。 在Zookeeper集群中&#xff0c;服务器可以扮演三种角色——领导者&#xff08;Leader&#xff09;、跟随者&#xff08;Follower&a…
阅读更多...
去掉顶部下拉框中的护眼模式

去掉顶部下拉框中的护眼模式

文章目录 需求参考知识点功能实现问题点问题点修改文件具体修改点总结 需求 顶部下拉框中的护眼模式去掉 参考知识点 我们在博客中已经分析了QS、QQS 相关的流程&#xff0c;实践过项目需求 Android12 SystemUI QS面板新增截屏功能 Android12_SystemUI下拉框新增音量控制条…
阅读更多...
微信网页 上传图片压缩

微信网页 上传图片压缩

微信网页上传图片时的压缩问题可以通过多种方法解决。以下是一些有效的方案和相关API的使用说明。 主要解决方案 1. 使用Canvas进行自定义压缩: 对于需要适配多种设备和格式的情况，可以利用Canvas API进行图片重绘和压缩。通过获取图片信息、设置Canvas尺寸、绘制图片并…
阅读更多...
2024年9月30日历史上的今天大事件早读

2024年9月30日历史上的今天大事件早读

1626年9月30日 清太祖努尔哈赤去世 1862年9月30日 德国首任宰相俾斯麦实行“铁血政策” 1887年9月30日 黄河决口 1931年9月30日 国际联盟决议日本撤兵 1937年9月30日 平型关战役结束 1938年9月30日 慕尼黑协议签订 1938年9月30日 前中华民国国务总理唐绍仪遇刺身亡 1941…
阅读更多...
box-im

box-im

任何一个开源项目&#xff0c;都可以让自己得到提升&#xff01; 启动minio: minio.exe server C:\Program Files\Minio\minioData
阅读更多...
相亲交友系统源码中的数据安全策略

相亲交友系统源码中的数据安全策略

在数字化时代&#xff0c;人们越来越依赖于互联网来寻找生活的另一半。相亲交友系统作为连接单身男女的重要平台&#xff0c;承载着无数用户的个人信息与隐私。因此&#xff0c;数据安全成为了此类系统不可忽视的关键因素。本文将探讨相亲交友系统源码中的数据安全策略&#xf…
阅读更多...
事实与价值双阈值是算计启动的门槛

事实与价值双阈值是算计启动的门槛

在现代社会&#xff0c;个体与群体的决策过程受到多种因素的影响&#xff0c;其中事实与价值的关系尤为重要。事实作为客观存在的基础&#xff0c;价值则是主观认知的体现。两者的相互作用构成了人类行为的复杂性&#xff0c;尤其在经济学、社会学以及伦理学等领域&#xff0c;…
阅读更多...
3GPP链路级仿真-Link-Level Simulator for 5G Localization

3GPP链路级仿真-Link-Level Simulator for 5G Localization

文章目录 II. SYSTEM ARCHITECTURE AND CAPABILITIESA. System Architecture III. KEY COMPONENTSA. Transmission Models of the Positioning SignalsB. Dedicated Wireless Channel Model IV. APPLICATION CASESA. Two-Dimensional Mobile Terminal Localization仿真工作流程…
阅读更多...
合成孔径雷达海上石油泄露分割数据集，共8000对图像，sentinel和palsar传感器，共400MB

合成孔径雷达海上石油泄露分割数据集，共8000对图像，sentinel和palsar传感器，共400MB

合成孔径雷达海上石油泄露分割数据集&#xff0c;共8000对图像&#xff0c;sentinel和palsar传感器&#xff0c;共400MB 名称 合成孔径雷达&#xff08;SAR&#xff09;海上石油泄露分割数据集 规模 图像对数&#xff1a;8000对图像传感器类型&#xff1a; Sentinel-1 SAR 传…
阅读更多...
PTVS：Python开发者的Visual Studio扩展

PTVS：Python开发者的Visual Studio扩展

PTVS&#xff08;Python Tools for Visual Studio&#xff09; 是由微软开发的一款用于 Visual Studio 的 Python 开发环境。它为 Python 开发者提供了丰富的功能&#xff0c;包括智能感知、调试工具、项目管理、测试支持等&#xff0c;使得在 Windows 平台上进行 Python 开发变…
阅读更多...
光耦——为智能电网建设提供安全高效解决方案

光耦——为智能电网建设提供安全高效解决方案

在智能电网的宏伟蓝图中&#xff0c;光耦以其独特的光电转换特性&#xff0c;成为了不可或缺的技术核心。作为一种先进的光电转换器件&#xff0c;光耦在智能电网建设中发挥着举足轻重的作用。 电能计量与监测 光耦可用于智能电表等电能计量设备中&#xff0c;实现电能数据的采…
阅读更多...
数据库管理-第245期 主流国产数据库RAC架构概览（20240929）

数据库管理-第245期 主流国产数据库RAC架构概览（20240929）

数据库管理245期 2024-09-29 数据库管理-第245期 主流国产数据库RAC架构概览&#xff08;20240929&#xff09;1 DMDSC2 KingBaseES RAC3 PolarDB4 Cantian5 HaloDB DLB/Data Sharding总结 数据库管理-第245期 主流国产数据库RAC架构概览&#xff08;20240929&#xff09; 作者…
阅读更多...
流量卡领取完就下架怎么回事，这种情况还能用吗？

流量卡领取完就下架怎么回事，这种情况还能用吗？

流量卡领取完就下架怎么回事&#xff0c;这种情况还能用吗&#xff1f;可以&#xff0c;这是很正常的一种情况&#xff01; 大家可能都发现了&#xff0c;网上的流量卡虽然月租低、流量多&#xff0c;但是却有一个弊端&#xff0c;那么就是下架超级快&#xff0c;有可能上午上…
阅读更多...
（一）万字详解G1垃圾收集器 —G1的设计目标是什么？G1的分区是什么？卡表的作用和工作原理？如何解决漏标问题？

（一）万字详解G1垃圾收集器 —G1的设计目标是什么？G1的分区是什么？卡表的作用和工作原理？如何解决漏标问题？

一、G1垃圾收集器简介 G1 GC&#xff08;Garbage-First Garbage Collector&#xff09;是一款先进的垃圾收集器&#xff0c;通过 -XX:UseG1GC 参数启用。它首次亮相于JDK 6u14版本&#xff0c;并在JDK 7u4中正式发布。对于熟悉JVM的开发者而言&#xff0c;G1已是一个广为人知的…
阅读更多...
html 获取浏览器地址栏参数

html 获取浏览器地址栏参数

例如&#xff1a; http://127.0.0.2/?agent_id143 我要获取agent_id 就很麻烦得去做字符串分割 解决方案&#xff1a; // 假设当前页面URL是: http://example.com/?param1value1&param2value2// 创建一个URLSearchParams对象 const params new URLSearchParams(wi…
阅读更多...
在线毫米(mm)到像素(px)换算器

在线毫米(mm)到像素(px)换算器

具体请前往&#xff1a;在线mm转px工具--将实际长度毫米(Millimeters)单位换算为像素(Pixels)单位
阅读更多...
打造高效舒适的气膜网球馆—轻空间

打造高效舒适的气膜网球馆—轻空间

气膜网球馆&#xff0c;作为现代运动设施的创新选择&#xff0c;其成本构成涵盖多个重要方面&#xff0c;确保为运动者提供最佳体验。 一、膜材选择 膜材是气膜网球馆的核心&#xff0c;品质不同直接影响成本。高品质膜材不仅增强了耐用性&#xff0c;也能有效阻挡外界气候影响…
阅读更多...
文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于碳-绿证交易的多场景源网荷储两阶段鲁棒-博弈优化调度》

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《基于碳-绿证交易的多场景源网荷储两阶段鲁棒-博弈优化调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
万界星空科技MES系统，打造数字化转型小灯塔企业

万界星空科技MES系统，打造数字化转型小灯塔企业

小灯塔工厂是一个相对的概念&#xff0c;它可能指的是在数字化转型和智能制造方面取得一定成就&#xff0c;但尚未达到全球“灯塔工厂”标准的企业。这些企业可能已经在生产过程中运用了数字化、网络化和智能化的手段&#xff0c;提高了生产效率和质量&#xff0c;降低了制造成…
阅读更多...
最新文章

Copyright @ 2022~2023