【uni-app从入门到实战】商品详情

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

在首页，点击商品列表中的商品要跳转商品详情，所以我们在 goods_list.vue 中增加 click 方法，点击商品调用 this.$emit触发父组件的goodsItemClick，同时把 goods_id 传过去

<template>
	<view class="goods_list">
		<view class="goods_item" v-for="item in goods" @click="navigator(item.goods_id)">
			......
		</view>
	</view>
</template>

<script>
	export default {
		......
		methods:{
			navigator(id){
				console.log(id)
				this.$emit('goodsItemClick',id)
			}
		}
	}
</script>
......

在首页中，goods-list 组件中注册goodsItemClick方法，触发这个方法时，调用页面中的 goGoodsDetail 方法

<goods-list @goodsItemClick='goGoodsDetail' :goods='goods'></goods-list>

//导航到商品详情
			goGoodsDetail(id){
				uni.navigateTo({
					url:'/pages/goods_detail/goods_detail?id='+id
				})
			}

需要新建 goods_detail 页面，完整代码如下：

<template>
	<view class="goods_detail">
		<swiper indicator-dots>
			<swiper-item v-for="(item,index) in swipers" :key="index">
				<image :src="item.pics_mid_url"></image>
			</swiper-item>
		</swiper>
		<view class="box1">
			<view class="price">
				<text>￥{{message.goods_price}}</text>
				<text>￥8788</text>
			</view>
			<view class="goods_name">{{message.goods_name}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view>库存：{{message.goods_number}}</view>
			<view>重量：{{message.goods_weight}}</view>
		</view>
		<view class="line"></view>
		<view class="box3">
			<view class="tit">详情介绍</view>
			<view class="content">
				<rich-text :nodes="message.goods_introduce"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				swipers:[],
				message:{}
			}
		},
		methods: {
			async getGoodsDetail(){
				const res = await this.$myRequest({
					url:'/api/public/v1/goods/detail',
					data: {
						goods_id: this.id
					}
				})
				console.log(res)
				this.swipers = res.data.message.pics
				this.message = res.data.message
			},
		},
		onLoad(options) {
			this.id = options.id
			console.log(this.id)
			this.getGoodsDetail()
		}
	}
</script>

<style lang="scss">
.goods_detail{
	swiper{
		height: 700rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.box1{
		padding: 10px;
		.price{
			font-size: 35rpx;
			color: $shop-color;
			line-height: 80rpx;
			text:nth-child(2){
				font-size: 30rpx;
				color: #ccc;
				text-decoration: line-through;
				margin-left: 20rpx;
			}
		}
		.goods_price{
			font-size: 32rpx;
			line-height: 60rpx;
		}
	}
	.line{
		width: 750rpx;
		height: 10rpx;
		background:#eee;
	}
	.box2{
		padding: 0 10px;
		font-size: 32rpx;
		line-height: 70rpx;
	}
	.box3{
		.tit{
			font-size: 32rpx;
			padding-left: 10px;
			border-bottom: 1px solid #eee;
			line-height: 70rpx;
		}
		.content{
			font-size: 28rpx;
			padding: 10px;
			line-height: 50rpx;
		}
	}
}
</style>

首先，在 onLoad 中拿到传过来的 id，然后调用获取商品详情的接口，打印看下返回数据结构如下：

商品详情页分为了三个部分，导航，商品名称，商品介绍这三部分

首先使用 swiper 组件，在其中使用 v-for 来循环 swiper-item 组件来展示商品轮播图

然后在第二部分展示商品名称等内容

最后在第三部分使用rich-text富文本显示组件来展示商品详情的介绍

最后运行程序如下：