本章主要完成商品详情页面的前端编写:主要页面为分包下的goods-detail页面
还是先来看看后端api端口的url,以及参数,返回数据样式
请求数据前面写个很多次了,不多赘述
前面轮播图也是做过了,具体的一些组件中的参数也不多介绍,直接使用,鼠标悬停上去也有翻译
根据返回结果,主要变量结构中的pics 下的 pics_big大图
渲染UI结构
为轮播图中的image图片绑定click事件处理函数
在methods中定义preview事件处理函数用于点击预览大图(用uni自带的previewImage浏览图片)
preview(i) {
uni.previewImage({
current: i,
urls: this.goods_info.pics.map(x => x.pics_big)
})
}
点击商品轮播图图片进入预览图
在与轮播图同级的view下创建商品信息的UIview
¥{{goods_info.goods_price}}
{{goods_info.goods_name}}
收藏
快递: 免运费
美化UI
.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;
}
}
在页面结构中,使用rich-text组件,将带有html标签的内容渲染为小程序的页面结构(轮播图,商品详情的同级)
修改getGoodsDetail方法,从而解决图片底部空白间隙的问题
解决.webp格式图片在ios设备无法正常显示问题
基于uni-ui提供的goodsnav组件来实现商品导航区域的效果
在data中,通过options和buttongroup两个数组,来声明商品导航组件的按钮配置对象:
data() {
return {
goods_info: {},
// 左侧按钮组的配置对象
options: [{
icon: 'shop',
text: '店铺'
}, {
icon: 'cart',
text: '购物车',
info: 2
}],
// 右侧按钮组的配置对象
buttonGroup: [{
text: '加入购物车',
backgroundColor: '#ff0000',
color: '#fff'
}, {
text: '立即购买',
backgroundColor: '#ffa200',
color: '#fff'
}]
};
},
使用uni-goods-nav商品导航组件
美化商品导航,并使他固定在底部
.goods_nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}