实现商品详情页
json里边设置一下页面标题
"navigationBarTitleText": "商品详情"
界面组成
上方由一个轮播图展示，
中间为商品信息，后台会返回图文详情富文本，前台只需赋值
下方固定一个工具栏
- 客服
- 分享
- 购物车
- 添加购物车
- 立即购买
界面编写
分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的
加入购物车:如果已经加入则提示已经加入…
<!--pages/goods_detail/goods_detail.wxml-->
<view>
<view class="index_swiper">
<swiper indicator-dots autoplay circular>
<swiper-item wx:for="{
{detailList.pics}}" wx:key="*this">
<navigator bindtap="preview" data-src="{
{item.pics_mid}}">
<image src="{
{item.pics_mid}}" mode="widthFix" />
</navigator>
</swiper-item>
</swiper>
<view class="context">
<view class="price">￥{
{detailList.goods_price}}</view>
<view class="title">
<view class="title_name">{
{detailList.goods_name}}</view>
<view class="_xian"></view>
<view class="like" bindtap="shoucang" ><view class="iconfont icon-shoucang" style="color: {
{
color}};"></view>收藏</view>
</view>
</view>
<view class="line"></view>
<view>
<rich-text nodes="<h1 style='color:red;margin-left:7px;'>图文详情</h1>"></rich-text>
<view class="line"></view>
<rich-text nodes="{
{detailList.goods_introduce}}"></rich-text>
</view>
<view class="btm_tool">
<view class="tool_item">
<view class="iconfont icon-kefu"></view>
<view>客服</view>
</view>
<view class="tool_item">
<view class="iconfont icon-fenxiang"></view>
<view>分享</view>
</view>
<navigator url="/pages/cart/cart" open-type="switchTab" class="tool_item">
<view class="iconfont icon-gouwuche"></view>
<view>购物车</view>
</navigator>
<view class="tool_item btn_cart" bindtap="addcart">
加入购物车
</view>
<view class="tool_item btn_buy" bindtap="over">
立即购买
</view>
</view>
</view>
<!--分享-->
<button open-type="share" style="position: fixed;bottom: 0;width: 2vw; height:5vh;left: 120rpx;background-color: transparent;border:none"></button>
<!--客服-->
<button open-type="contact" size="mini" style="position: fixed;; bottom: 0; background-color: transparent;border:none "></button>
</view>
样式编写
swiper{
height: 65vw;
text-align: center;
}
image{
width: 60%;
}
.context{
font-size: 30rpx;
}
.context .price{
font-size: 40rpx;
color: var(--themeColor);
}
.context .title{
display: flex;
}
.context .title .title_name{
line-height: 50rpx;
flex: 2;
}
.context .title ._xian{
margin-right: 20rpx;
height: 80rpx;
width: 10rpx;
background-color: #666666;
}
.context .title .like{
text-align: center;
}
.line{
margin-top: 14rpx;
width: 100%;
height: 10rpx;
background-color: #666666;
}
.goods_info .goods_info_title {
color: #af64ed;
padding: 20rpx;
font-size: 32rpx;
}
.btm_tool {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 90rpx;
background-color: white;
display: flex;
}
.btm_tool .tool_item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btm_tool .btn_cart {
flex: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: darkkhaki;
color: #ffffff;
font-size: 30rpx;
font-weight: 600;
}
.btm_tool .btn_buy {
flex: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: red;
color: #ffffff;
font-size: 30rpx;
font-weight: 600;
}
JS方法编写
data属性:
- color：收藏的图标颜色
- detailList:商品信息数据
- id:商品id
- over:购买
方法:
- shoucang:用于收藏商品,收藏过的会提示
- getdetail:获取商品详情信息并且赋值给List，还会向本地添加浏览记录
- addcart：添加至购物车
- wx.previewImage :图片预览
import {
request} from '../../utils/request'
Page({
/**
* 页面的初始数据
*/
data: {
detailList:{
},
color:'black',
id:{
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
id:options
})
},
async getdetail(options){
let ret=await request('goods/detail',options);
this.setData({
detailList:ret.data.message
})
let newarr=[];
newarr=this.data.detailList;
newarr.checked=false; //定义是否被选中,为购物车铺路
console.log(newarr);
this.setData({
detailList:newarr
})
let userinfo=wx.getStorageSync("userinfo");
if(userinfo!=''){
let shoucang=wx.getStorageSync('shoucang') || [];
if(shoucang!='[]'){
let index=shoucang.findIndex((item)=>{
return item.goods_id==this.data.detailList.goods_id;
})
console.log(index);
if(index!=-1){
this.setData({
color:'orange'
})
}
}
//历史记录
let hostry=wx.getStorageSync('hostry') || [];
console.log(hostry);
if(hostry.length==0){
var hoarr=[];
hoarr.push(this.data.detailList);
wx.setStorageSync('hostry',hoarr);
}else{
let index=hostry.findIndex((item)=>{
return item.goods_id==this.data.detailList.goods_id;
})
if(index!=-1){
hostry.splice(index,1);//消除重复
}
hostry.push(this.data.detailList);
wx.setStorageSync('hostry',hostry);
}
}
console.log(this.data.detailList.goods_price);
},
shoucang(e){
let userinfo=wx.getStorageSync("userinfo");
if(userinfo==''){
wx.showToast({
title: '请先登录...',
icon: 'error',
duration: 1000//持续的时间
})
}else{
let shoucang=wx.getStorageSync('shoucang') || [];
let index=shoucang.findIndex((item)=>{
return item.goods_id==this.data.detailList.goods_id;
})
console.log(index);
if(index==-1){
if(shoucang.length!=0){
shoucang.push(this.data.detailList);
wx.setStorageSync('shoucang', shoucang);
}else{
var scarr=[];
scarr.push(this.data.detailList);
wx.setStorageSync('shoucang',scarr);
}
wx.showToast({
title: '收藏成功',
icon: 'success',
duration: 1000//持续的时间
})
this.setData({
color:'orange'
})
}else{
shoucang.splice(index,1);//取消收藏进行删除
wx.setStorageSync('shoucang', shoucang);
wx.showToast({
title: '取消收藏成功',
icon: 'success',
duration: 1000//持续的时间
})
this.setData({
color:'black'
})
}
}
},
addcart(){
let userinfo=wx.getStorageSync("userinfo");
if(userinfo==''){
wx.showToast({
title: '请先登录...',
icon: 'error',
duration: 1000//持续的时间
})
}else{
let cart=wx.getStorageSync('cart') || [];
let index=cart.findIndex((item)=>{
return item.goods_id==this.data.detailList.goods_id;
})
if(index==-1){
if(cart.length!=0){
cart.push(this.data.detailList);
wx.setStorageSync('cart', cart);
}else{
var scarr=[];
scarr.push(this.data.detailList);
wx.setStorageSync('cart',scarr);
}
wx.showToast({
title: '添加成功',
icon: 'success',
duration: 1000//持续的时间
})
wx.switchTab({
url: '/pages/cart/cart',
})
}else{
wx.showToast({
title: '不可重复添加',
icon: 'error',
duration: 1000//持续的时间
})
}
}
},
/*图片预览 */
preview(e){
let src=e.currentTarget.dataset.src;
let bigsrc=this.data.detailList.pics.map((item)=>{
return item.pics_big_url;
})
wx.previewImage({
current:src, //原图片路径
urls:bigsrc, //图片放大路径
})
},
//购买
over(e){
var sz=[];
var orderCode=0;
// 6位随机数(加在时间戳后面)
for (var i = 0; i < 6; i++)
{
orderCode += Math.floor(Math.random() * 10);
}
// 时间戳(用来生成订单号)
orderCode = 'D' + new Date().getTime() + orderCode;
// 打印
console.log(orderCode)// D1601545805958923658
console.log(this.data.detailList,'对应数量:'+1,'总价钱:'+this.data.detailList.goods_price,'总数量:'+1);
let good={
goods:this.data.detailList,
shu:1,
sum:this.data.detailList.goods_price,
num:1,
orderid:orderCode
}
sz.push(good);
wx.setStorageSync('payList', sz);
wx.showToast({
title: '正在生成订单',
icon:"loading",
duration: 800//持续的时间
})
wx.navigateTo({
url: '/pages/pay/pay',
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getdetail(this.data.id);
},
})
效果图
刚进来时…
点击图片预览:
点击分享
成功实现~