6.配置页面 - 商品详情页
(1).创建goodsdetail分支
git checkout -b goodsdetail
设置编译模式:
(2).获取商品详情数据
1.在 data 中定义商品详情的数据节点：
<script> export default { data() { return { goods_info: {⭐ } }; }, // 获取参数⭐⭐ onLoad(options) { console.log(options) const goods_id = options.goods_id this.getGoodsDetail(goods_id) }, // 通过参数进行查询数据⭐⭐⭐ methods: { async getGoodsDetail(goods_id) { const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id: goods_id }) if (res.meta.status === 200) { this.goods_info = res.message } else { return uni.$showMsg() } } } } </script>
(3).渲染商品详情页的UI结构
- 渲染轮播图的UI结构
<style lang="scss"> swiper { height: 750rpx; image { width: 100%; height: 100%; } } </style>
<template> <view> <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"> <swiper-item v-for="(item,index) in goods_info.pics" :key="index"> <image :src="item.pics_big" mode=""></image> </swiper-item> </swiper> </view> </template>
- 实现轮播图预览效果
map进行遍历数组会获取到遍历数组的item项，我们通过回调函数获取item项的某一个属性，并返回一个新的数组
<image :src="item.pics_big" @click="preview(index)"></image> // 大图预览的操作 preview(index) { const newArr = this.goods_info.pics.map(item => item.pics_big) uni.previewImage({ current: index, // 指定图片的索引 urls: newArr // 存放新的URL数组 }) }
- 渲染商品信息区域
<!-- 商品信息区域 --> <view class="goods-info-box"> <!-- 商品价格 --> <view class="price"> ￥{{goods_info.goods_price}} </view> <!-- 商品的信息 --> <view class="goods-info-body"> <!-- 商品的名字 --> <view class="goods-name"> {{goods_info.goods_name}} </view> <!-- 收藏 --> <view class="favi"> <uni-icons type="star" size="18"></uni-icons> <text>收藏</text> </view> </view> <!-- 运费 --> <view class="yf"> 快递 : 免运费 </view> </view>
- 美化商品信息区域的样式：
/ 商品描述信息的样式 .goods-info-box { padding: 10PX; padding-right: 0; // 价格 .price { color: #C00000; font-size: 18px; margin: 10px 0; } // 中间文字 .goods-info-body { display: flex; justify-content: space-between; .goods-name { font-size: 13px; margin-right: 10px; } .favi { width: 120px; font-size: 12px; // 横向布局 display: flex; // 垂直布局 flex-direction: column; // 垂直居中 align-items: center; // 横向居中 justify-content: center; border-left: 1px solid #efefef; color: gray; } } .yf { font-size: 12px; color: gray; margin: 10px 0; } }
- 渲染商品详情信息
1.在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：
因为后端传递过来的是: html所以用富文本解析
<!-- 商品详情 --> <rich-text :nodes="goods_info.goods_introduce"></rich-text>
2.修改 getGoodsDetail 方法，从而解决图片底部 空白间隙 的问题：
利用正则表达式进行替换的操作
// 是哟个字符串的replace()方法，为img标签添加行内的style样式，从而解决图片独步空白间隙的问题 // /<img /是指别替换的文本 g 表示全局替换 后面是被替换的文本 res.message.goods_introduce = res.message.goods_introduce.replace(/<img/g, '<img style="display:block"')
3.解决 .webp 格式图片在 ios 设备上无法正常显示的问题：
