产品详情页开发
本节完成产品详情页面的开发,首先要实现单击产品进入产品详情页面的功能,在产品列表页面使用链式跳转,代码如下。
<view class="index_hot">
<view class="index_product_main">
<view class="index_product_li" v-for="(item,i) in productList" :key="i">
<image :src="item.productImageUrl" mode="widthFix" @click="linkTo(item.productId)"></image>
<text>{{item.productName}}</text>
<text>{{item.salePrice}}</text>
</view>
</view>
</view>
html
为产品图片添加 linkTo 单击事件,并传入产品 id。
methods: { linkTo(id) { uni.navigateTo({ url: `/pages/detail/detail?id=${id}` }) } }
html
此时单击产品图片,可以进入产品详情页面,并且携带产品 id。
请求方式:get 请求。
需求分析如下。
-
在 data 属性中定义 productData,接收获取到的产品信息。
-
发送数据请求,productId 应该为产品列表中的产品 id,不能固定。
-
在 onLoad 生命周期函数中接收产品列表页传递的产品 id。
<template>
<view>
<view class="header">
<image src="/static/logo.jpg" mode=""></image>
</view>
<view class="title">
<text>{{productData.productName}}</text>
</view>
<view class="title">
<text>{{productData.salePrice}}</text>
</view>
<view class="desc">
<rich-text :nodes="productData.detail"></rich-text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//1.在data属性中定义productData,接收获取到的产品信息
productData: {}
}
},
methods: {
//2.发送数据请求,其id应该为单击产品时携带的id
getData(id) {
uni.request({
url: `http://api.mm2018.com:8095/api/goods/productDet?productId=${id}`,
method: 'GET',
success: res => {
console.log(res.data)
this.productData = res.data
}
})
}
},
onLoad(op) {
//3.onLoad周期函数的第一个参数用于接收上一个页面传递的参数
this.getData(op.id)
}
}
</script>
html
视图层渲染如下。
<template>
<view>
<view class="header">
<image src="/static/logo.jpg" mode=""></image>
</view>
<view class="title">
<text>{{productData.productName}}</text>
</view>
<view class="title">
<text>{{productData.salePrice}}</text>
</view>
<view class="desc">
<rich-text :nodes="productData.detail"></rich-text>
</view>
</view>
</template>
html