产品详情页开发

本节完成产品详情页面的开发,首先要实现单击产品进入产品详情页面的功能,在产品列表页面使用链式跳转,代码如下。

<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