uni-app x开发商城系统，商品列表点击跳转至商品详情页

一、概述

上一篇文章，已经实现了资讯详情页面数据渲染

接下来实现，商品列表点击跳转至商品详情页。

点击首页推荐商品，以及网上超市的商品，都可以显示id

效果如下：

 

 

二、商品列表组件传递id

修改components/goods-list/goods-list.uvue文件，

子组件触发（emit） 一个自定义事件 (goodsItemClick)，传递id

完整代码如下：

<template><view><view class="goods_list"><view class="goods_item" v-for="item in goods" :key="item.id" @click="navigator(item.id)"><image :src=" item.img_url" mode=""></image><view class="price"><text>¥{{item.sell_price}}</text><text>¥{{item.market_price}}</text></view><view class="name">{{item.title}}</view></view></view></view>
</template><script>export default {props: ['goods'],data() {return {}},methods: {//点击商品 传入id 调用index和goods中跳转的事件方法。实现复用navigator(id) {console.log("跳转商品详情页id", id);this.$emit('goodsItemClick', id)}}}
</script><style lang="scss">.goods_list {padding: 0 15rpx;display: flex;flex-direction: row; //横向排列flex-wrap: wrap;justify-content: space-between;.goods_item {background: #fff;width: 355rpx;margin: 10rpx 0;padding: 15rpx;box-sizing: border-box;image {width: 80%;height: 150px;display: block;margin: auto; //图片居中
            }.price {display: flex;flex-direction: row;color: $shop-color;font-size: 36rpx;// margin-top: 15rpx;margin: 20rpx 0 5rpx 0;text:nth-child(2) {color: #ccc;font-size: 28rpx;margin-top: 5rpx;margin-left: 17rpx;text-decoration-line: line-through;}}.name {font-size: 38rpx;line-height: 50rpx;padding-bottom: 15rpx;padding-top: 10rpx;}}}
</style>

三、首页，商品列表监听自定义事件

 修改 pages/index/index.uvue，父组件：监听（listen） 这个事件，并绑定一个处理函数 (goGoodsDetail)

 完整代码如下：

<template><view class="home"><!-- 轮播区域 --><up-swiper :list="swiper" keyName="img" indicator indicatorMode="dot" circular></up-swiper><!-- 导航区域 --><view class="nav"><view class="nav_item" v-for="(item,index) in navs" :key="index" @click="nav_item_click(item.path)"><view :class="item.icon"></view><text>{{item.title}}</text></view></view><!-- 推荐商品 --><view class="hot_goods"><view class="tit">推荐商品</view><GoodsList :goods="goods" @goodsItemClick="goGoodsDetail"></GoodsList></view></view>
</template><script>import GoodsList from '../../components/goods-list/goods-list.uvue'export default {components: {GoodsList: GoodsList},data() {return {title: 'Hello',swiper: [],goods: [],navs: [{icon: 'iconfont icon-ziyuan',title: '网上超市',path: '/pages/goods/goods'},{icon: 'iconfont icon-guanyuwomen',title: '联系我们',path: '/pages/contact/contact'},{icon: 'iconfont icon-tupian',title: '社区图片',path: '/pages/pics/pics'},{icon: 'iconfont icon-shipin',title: '直播中心',path: '/pages/videos/videos'}]}},onLoad() {this.get_swiper()this.get_goods()},methods: {// 获取轮播图的数据
            async get_swiper() {try {const res = await this.$http.get('/api/getlunbo', {})// console.log("res", res)this.swiper = res.message} catch (err : any) {uni.showToast({title: '获取轮播图失败' + err.statusCode,});}},// 获取热门商品列表数据
            async get_goods() {try {const res = await this.$http.get('/api/getgoods?pageindex=1', {})// console.log("res", res)this.goods = res.message} catch (err : any) {uni.showToast({title: '获取热门商品列表失败' + err.statusCode,});}},// 导航点击的处理函数
            nav_item_click(path) {console.log("path", path)uni.navigateTo({url: path})},//跳转到商品详情页goGoodsDetail(id) {uni.navigateTo({url: '/pages/goods/goods-detail?id=' + id})}}}
</script><style lang="scss">.home {swiper {width: 750rpx;height: 380rpx;image: {height: 100%;width: 100%;}}.nav {display: flex;flex-direction: row; //横向排列justify-content: space-around; //平均分布在一行
.nav_item {text-align: center;view {width: 120rpx;height: 120rpx;background: $shop-color;border-radius: 60rpx;margin: 10px auto;line-height: 120rpx;color: white;font-size: 50rpx;text-align: center;}.icon-tupian {font-size: 45rpx;}text {font-size: 30rpx;}}}.hot_goods {background: #eee;overflow: hidden;margin-top: 10px;.tit {height: 50px;line-height: 50px;color: $shop-color;text-align: center;letter-spacing: 20px;background: #fff;margin: 7rpx 0;}}}
</style>

 

修改 pages/googs/googs.uvue，父组件：监听（listen） 这个事件，并绑定一个处理函数 (goGoodsDetail)

 完整代码如下：

 

<template><view class="goods_list"><GoodsList :goods="goods" @goodsItemClick="goGoodsDetail"></GoodsList><view class="is_over" v-if="flag">---我是有底线的---</view></view>
</template><script>import GoodsList from '../../components/goods-list/goods-list.uvue'export default {components: {GoodsList: GoodsList},data() {return {goods: [],pageindex: 1,flag: false}},onLoad() {this.get_goods()},methods: {// 获取商品列表数据
            async get_goods(callBack) {try {const res = await this.$http.get('/api/getgoods?pageindex=' + this.pageindex, {})// console.log("res", res)// this.goods = res.messagethis.goods = [...this.goods, ...res.message]// callBack && callBack()if (callBack) {callBack();}} catch (err : any) {uni.showToast({title: '获取商品列表失败' + err.statusCode,});}},//跳转到商品详情页 和index页一样goGoodsDetail(id) {uni.navigateTo({url: '/pages/goods/goods-detail?id=' + id})}},onReachBottom() {// 判断最后一页if (this.goods.length < this.pageindex * 10) {this.flag = true// uni.showToast({//     title: '到底啦，没有更多内容啦'// });return false} else {// 获取下一页数据this.pageindex++this.get_goods()}},onPullDownRefresh() {console.log("下拉刷新了")this.pageindex = 1this.goods = []this.flag = falsesetTimeout(() => {this.get_goods(() => {uni.stopPullDownRefresh()})}, 1000)}}
</script><style lang="scss">.goods_list {background: #eee;}.is_over {width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 28rpx;}
</style>

四、商品详情页

新增文件 pages/googs/goods-detail.uvue，显示传递id

 完整代码如下：

<template><view>商品详情{{id}}</view>
</template><script>export default {data() {return {//接收的idid: 0}},onLoad(value) {this.id = value.id;console.log("onload拿到商品id", this.id);},methods: {}}
</script><style></style>

 

修改项目根目录 pages.json，增加路由

{"path": "pages/goods/goods","style": {"navigationBarTitleText": "商品列表","enablePullDownRefresh": true}
},

 

编译代码

点击首页推荐商品，以及网上超市的商品，都可以显示id

效果如下：