微信小程序商城项目实战(第四篇:商品详情页)

实现商品详情页

json里边设置一下页面标题"navigationBarTitleText": "商品详情"

界面组成

上方由一个轮播图展示，
中间为商品信息，后台会返回图文详情富文本，前台只需赋值
下方固定一个工具栏

• 客服
• 分享
• 购物车
• 添加购物车
• 立即购买

界面编写

分享是将一个按钮隐藏且将其定位在分享处,客服也是一样的
加入购物车:如果已经加入则提示已经加入…

<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=" 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);
    },
})

效果图

刚进来时…

点击图片预览:

点击分享

成功实现~