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.message
                    this.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 = 1
            this.goods = []
            this.flag = false
            setTimeout(() => {
                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 {
                //接收的id
                id: 0
            }
        },
        onLoad(value) {
            this.id = value.id;
            console.log("onload拿到商品id", this.id);
        },
        methods: {

        }
    }
</script>

<style>

</style>

 

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

{
    // 商品详情页
    "path": "pages/goods/goods-detail",
    "style": {
        "enablePullDownRefresh": false
    }
},

 

编译代码

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

效果如下：