20230831

mall4m/pages/prod/prod.js

+// pages/prod/prod.js
+const app = getApp()
+var http = require('../../utils/http.js');
+var config = require('../../utils/config.js');
+var util = require('../../utils/util.js');
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    shopId: 1,
+    picDomain: config.picDomain,
+    indicatorDots: true,
+    indicatorColor: '#f2f2f2',
+    indicatorActiveColor: '#eb2444',
+    autoplay: true,
+    interval: 3000,
+    duration: 1000,
+    prodNum: 1,
+    totalCartNum: 0,
+    pic: "",
+    imgs: '',
+    prodName: '',
+    price: 0,
+    content: '',
+    prodId: 0,
+    brief: '',
+    skuId: 0,
+    popupShow: false,
+    // 是否获取过用户领取过的优惠券id
+    loadCouponIds: false,
+    skuShow: false,
+    commentShow: false,
+    couponList: [],
+    skuList: [],
+    skuGroup: {},
+    findSku: true,
+    defaultSku: undefined,
+    selectedProp: [],
+    selectedPropObj: {},
+    propKeys: [],
+    allProperties: [],
+    prodCommData: {},
+    prodCommPage: {
+      current: 0,
+      pages: 0,
+      records: []
+    },
+    littleCommPage: [],
+    evaluate: -1,
+    isCollection: false
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    this.setData({
+      prodId: options.prodid,
+    });
+
+    // 加载商品信息
+    this.getProdInfo();
+    // 加载评论数据
+    this.getProdCommData();
+    // 加载评论项
+    this.getLittleProdComm();
+    // 查看用户是否关注
+    this.getCollection();
+  },
+
+  /**
+   * 获取是否关注信息
+   */
+  getCollection() {
+    wx.showLoading();
+    var params = {
+      url: "/p/user/collection/isCollection",
+      method: "GET",
+      data: {
+        prodId: this.data.prodId
+      },
+      callBack: (res) => {
+        this.setData({
+          isCollection: res
+        })
+        wx.hideLoading();
+      }
+    };
+    http.request(params);
+  },
+
+  /**
+   * 添加或者取消收藏商品 
+   */
+  addOrCannelCollection() {
+    wx.showLoading();
+
+    var params = {
+      url: "/p/user/collection/addOrCancel",
+      method: "POST",
+      data: this.data.prodId,
+      callBack: (res) => {
+        this.setData({
+          isCollection: !this.data.isCollection
+        })
+        wx.hideLoading();
+      }
+    };
+    http.request(params);
+  },
+
+  // 获取商品信息
+  getProdInfo() {
+    wx.showLoading();
+    var params = {
+      url: "/prod/prodInfo",
+      method: "GET",
+      data: {
+        prodId: this.data.prodId,
+        // userType: 0
+      },
+      callBack: (res) => {
+        //console.log(res);
+        var imgStrs = res.imgs;
+        var imgs = imgStrs.split(",");
+        var content = util.formatHtml(res.content);
+        this.setData({
+          imgs: imgs,
+          content: content,
+          price: res.price,
+          prodName: res.prodName,
+          prodId: res.prodId,
+          brief: res.brief,
+          // skuId: res.skuId
+          skuList: res.skuList,
+          pic: res.pic
+        });
+        // 获取优惠券
+        //this.getCouponList();
+        // 组装sku
+        this.groupSkuProp();
+
+        wx.hideLoading();
+      }
+    };
+    http.request(params);
+  },
+  getProdCommData() {
+    http.request({
+      url: "/prodComm/prodCommData",
+      method: "GET",
+      data: {
+        prodId: this.data.prodId,
+      },
+      callBack: (res) => {
+        this.setData({
+          prodCommData: res
+        })
+      }
+    })
+  },
+  // 获取部分评论
+  getLittleProdComm() {
+    if (this.data.prodCommPage.records.length) {
+      return;
+    }
+    this.getProdCommPage();
+  },
+  getMoreCommPage(e) {
+    this.getProdCommPage();
+  },
+  // 获取分页获取评论
+  getProdCommPage(e) {
+    if (e) {
+      if (e.currentTarget.dataset.evaluate === this.data.evaluate) {
+        return;
+      }
+      this.setData({
+        prodCommPage: {
+          current: 0,
+          pages: 0,
+          records: []
+        },
+        evaluate: e.currentTarget.dataset.evaluate
+      })
+    }
+    http.request({
+      url: "/prodComm/prodCommPageByProd",
+      method: "GET",
+      data: {
+        prodId: this.data.prodId,
+        size: 10,
+        current: this.data.prodCommPage.current + 1,
+        evaluate: this.data.evaluate
+      },
+      callBack: (res) => {
+        res.records.forEach(item => {
+          if (item.pics) {
+            item.pics = item.pics.split(',')
+          }
+        })
+        let records = this.data.prodCommPage.records
+        records = records.concat(res.records)
+        this.setData({
+          prodCommPage: {
+            current: res.current,
+            pages: res.pages,
+            records: records
+          }
+        })
+        // 如果商品详情中没有评论的数据，截取两条到商品详情页商品详情
+        if (!this.data.littleCommPage.length) {
+          this.setData({
+            littleCommPage: records.slice(0, 2)
+          })
+        }
+      }
+    })
+  },
+  getCouponList() {
+    http.request({
+      url: "/coupon/listByProdId",
+      method: "GET",
+      data: {
+        prodId: this.data.prodId,
+        shopId: this.data.shopId,
+      },
+      callBack: (res) => {
+        this.setData({
+          couponList: res
+        })
+      }
+    })
+  },
+
+  /**
+   * 根据skuList进行数据组装
+   */
+  groupSkuProp: function() {
+    var skuList = this.data.skuList;
+
+    //当后台返回只有一个SKU时，且SKU属性值为空时，即该商品没有规格选项，该SKU直接作为默认选中SKU
+    if (skuList.length == 1 && skuList[0].properties == "") {
+      this.setData({
+        defaultSku: skuList[0]
+      });
+      return;
+    }
+
+    var skuGroup = {};//所有的规格名(包含规格名下的规格值集合）对象，如 {"颜色"：["金色","银色"],"内存"：["64G","256G"]}
+    var allProperties = [];//所有SKU的属性值集合，如 ["颜色:金色;内存:64GB","颜色:银色;内存:64GB"]
+    var propKeys = [];//所有的规格名集合，如 ["颜色","内存"]
+
+    for (var i = 0; i < skuList.length; i++) {
+
+      //找到和商品价格一样的那个SKU，作为默认选中的SKU
+      var defaultSku = this.data.defaultSku;
+      var isDefault = false;
+      if (!defaultSku && skuList[i].price == this.data.price) { 
+        defaultSku = skuList[i];
+        isDefault = true;
+        this.setData({
+          defaultSku: defaultSku
+        });
+      }
+
+      var properties = skuList[i].properties; //如：版本:公开版;颜色:金色;内存:64GB
+      allProperties.push(properties);
+      var propList = properties.split(";"); // 如：["版本:公开版","颜色:金色","内存:64GB"]
+
+      var selectedPropObj = this.data.selectedPropObj;
+      for (var j = 0; j < propList.length; j++) {
+
+        var propval = propList[j].split(":"); //如 ["版本","公开版"]
+        var props = skuGroup[propval[0]]; //先取出 规格名 对应的规格值数组
+
+        //如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
+        if (isDefault) {
+          propKeys.push(propval[0]);
+          selectedPropObj[propval[0]] = propval[1];
+        }
+
+        if (props == undefined) {
+          props = []; //假设还没有版本，新建个新的空数组
+          props.push(propval[1]); //把 "公开版" 放进空数组
+        } else {
+          if (!this.array_contain(props, propval[1])) { //如果数组里面没有"公开版"
+            props.push(propval[1]); //把 "公开版" 放进数组
+          }
+        }
+        skuGroup[propval[0]] = props; //最后把数据 放回版本对应的值
+      }
+      this.setData({
+        selectedPropObj: selectedPropObj,
+        propKeys: propKeys
+      });
+    }
+    this.parseSelectedObjToVals();
+    this.setData({
+      skuGroup: skuGroup,
+      allProperties: allProperties
+    });
+  },
+
+  //将已选的 {key:val,key2:val2}转换成 [val,val2]
+  parseSelectedObjToVals: function() {
+    var selectedPropObj = this.data.selectedPropObj;
+    var selectedProperties = "";
+    var selectedProp = [];
+    for (var key in selectedPropObj) {
+      selectedProp.push(selectedPropObj[key]);
+      selectedProperties += key + ":" + selectedPropObj[key] + ";";
+    }
+    selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1);
+    this.setData({
+      selectedProp: selectedProp
+    });
+
+    var findSku = false;
+    for (var i = 0; i < this.data.skuList.length; i++) {
+      if (this.data.skuList[i].properties == selectedProperties) {
+        findSku = true;
+        this.setData({
+          defaultSku: this.data.skuList[i],
+        });
+        break;
+      }
+    }
+    this.setData({
+      findSku: findSku
+    });
+  },
+
+  //点击选择规格
+  toChooseItem: function(e) {
+    var val = e.currentTarget.dataset.val;
+    var key = e.currentTarget.dataset.key;
+    var selectedPropObj = this.data.selectedPropObj;
+    selectedPropObj[key] = val;
+    this.setData({
+      selectedPropObj: selectedPropObj
+    });
+    this.parseSelectedObjToVals();
+  },
+
+  //判断数组是否包含某对象
+  array_contain: function(array, obj) {
+    for (var i = 0; i < array.length; i++) {
+      if (array[i] == obj) //如果要求数据类型也一致，这里可使用恒等号===
+        return true;
+    }
+    return false;
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {
+    this.setData({
+      totalCartNum: app.globalData.totalCartCount
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function() {
+
+  },
+
+  /**
+   * 跳转到首页
+   */
+  toHomePage: function() {
+    wx.switchTab({
+      url: '/pages/index/index',
+    })
+  },
+
+  /**
+   * 跳转到购物车
+   */
+  toCartPage: function() {
+    wx.switchTab({
+      url: '/pages/basket/basket',
+    })
+  },
+
+  /**
+   * 加入购物车
+   */
+  addToCart: function(event) {
+    if (!this.data.findSku) {
+      return;
+    }
+    var ths = this;
+    wx.showLoading({
+      mask: true
+    });
+    var params = {
+      url: "/p/shopCart/changeItem",
+      method: "POST",
+      data: {
+        basketId: 0,
+        count: this.data.prodNum,
+        prodId: this.data.prodId,
+        shopId: this.data.shopId,
+        skuId: this.data.defaultSku.skuId
+      },
+      callBack: function(res) {
+        //console.log(res);
+        ths.setData({
+          totalCartNum: ths.data.totalCartNum + ths.data.prodNum
+        });
+        wx.hideLoading();
+        wx.showToast({
+          title: "加入购物车成功",
+          icon: "none"
+        })
+      }
+    };
+    http.request(params);
+  },
+
+  /**
+   * 立即购买
+   */
+  buyNow: function() {
+    if (!this.data.findSku) {
+      return;
+    }
+    wx.setStorageSync("orderItem", JSON.stringify({
+      prodId: this.data.prodId,
+      skuId: this.data.defaultSku.skuId,
+      prodCount: this.data.prodNum,
+      shopId: this.data.shopId
+    }));
+    wx.navigateTo({
+      url: '/pages/submit-order/submit-order?orderEntry=1',
+    })
+
+  },
+
+  /**
+   * 减数量
+   */
+  onCountMinus: function() {
+    var prodNum = this.data.prodNum;
+    if (prodNum > 1) {
+      this.setData({
+        prodNum: prodNum - 1
+      });
+    }
+  },
+
+  /**
+   * 加数量
+   */
+  onCountPlus: function() {
+    var prodNum = this.data.prodNum;
+    if (prodNum < 1000) {
+      this.setData({
+        prodNum: prodNum + 1
+      });
+    }
+  },
+
+  /**
+   * 分享设置
+   */
+  onShareAppMessage: function(res) {
+    return {
+      title: this.data.prodName,
+      path: '/pages/prod/prod?prodid=' + this.data.prodid
+    }
+  },
+
+  showPopup: function() {
+    if (this.data.loadCouponIds) {
+      this.setData({
+        popupShow: true
+      });
+      return;
+    }
+    http.request({
+      url: "/p/myCoupon/listCouponIds",
+      method: "GET",
+      data: {},
+      callBack: (couponIds) => {
+        var couponList = this.data.couponList;
+        console.log(couponList)
+
+        couponList.forEach(coupon => {
+          if (couponIds && couponIds.length) {
+            // 领取该优惠券数量
+            var couponLimit = 0;
+            couponIds.forEach(couponId => {
+              if (couponId == coupon.couponId) {
+                couponLimit++;
+              }
+            });
+            // 小于用户领取优惠券上限，可以领取优惠券
+            if (couponLimit < coupon.limitNum) {
+              coupon.canReceive = true;
+            } else {
+              coupon.canReceive = false;
+            }
+          } else {
+            coupon.canReceive = true;
+          }
+        });
+        this.setData({
+          couponList: couponList,
+          popupShow: true,
+          loadCouponIds: true
+        })
+      }
+    })
+  },
+  showSku: function() {
+    this.setData({
+      skuShow: true
+    });
+  },
+  showComment: function() {
+    this.setData({
+      commentShow: true
+    });
+  },
+
+  closePopup: function() {
+    this.setData({
+      popupShow: false,
+      skuShow: false,
+      commentShow: false
+    });
+  },
+
+
+
+})
\ No newline at end of file

mall4m/pages/prod/prod.json

+{
+  "usingComponents":{
+   "coupon": "/components/coupon/coupon",
+   "van-rate": "/vant/rate/index"
+  },
+  "navigationBarTitleText": "商品详情"
+}
\ No newline at end of file

mall4m/pages/prod/prod.wxml

+<!-- 商品详情 -->
+<view class="container">
+  <!-- 轮播图 -->
+  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}}">
+    <block wx:for="{{imgs}}" wx:key='*this'>
+      <swiper-item>
+        <image src='{{item}}'></image>
+      </swiper-item>
+    </block>
+  </swiper>
+  <!-- end  轮播图 -->
+  <!-- 商品信息 -->
+  <!-- <block wx:for="{{imgs}}" wx:key=''> -->
+  <view class='prod-info'>
+    <view class="tit-wrap">
+      <view class="prod-tit">{{prodName}}</view>
+      <view class="col" bindtap='addOrCannelCollection'>
+        <image wx-if="{{!isCollection}}" src="../../images/icon/prod-col.png"></image>
+        <image wx-if="{{isCollection}}" src="../../images/icon/prod-col-red.png"></image>
+        收藏
+      </view>
+    </view>
+    <view class="sales-p">{{brief}}</view>
+    <view class="prod-price">
+      <text class="price">￥<text class="price-num">{{wxs.parsePrice(defaultSku.price)[0]}}</text>.{{wxs.parsePrice(defaultSku.price)[1]}}</text>
+      <text class="sales"></text>
+    </view>
+    <!-- <button class="share-icon" open-type="share">
+        <image src='../../images/icon/share.png'></image>
+        <view class="share-text">分享</view>
+      </button> -->
+  </view>
+  <!-- </block> -->
+  <!-- end 商品信息 -->
+  <!-- 领券 -->
+  <!-- <view class="coupon" bindtap='showPopup' wx:if="{{couponList.length}}">
+    <view class="coupon-tit">领券</view>
+    <view class="coupon-con">
+      <text class="item" wx:for="{{couponList}}" wx:key="item.couponId">满{{item.cashCondition}}<block wx:if="{{item.couponType == 1}}">减{{item.reduceAmount}}</block><block wx:if="{{item.couponType == 2}}">打{{item.couponDiscount}}折</block></text>
+    </view>
+    <view class="num">共{{couponList.length}}张</view>
+    <view class="more">...</view>
+  </view> -->
+  <!-- 已选规格 -->
+  <view class="sku" bindtap='showSku'>
+    <view class="sku-tit">已选</view>
+    <view class="sku-con">{{selectedProp.length>0?selectedProp+'，':selectedProp}}{{prodNum}}件</view>
+    <view class="more">...</view>
+  </view>
+  <!-- 评价 -->
+  <view class='cmt-wrap'>
+    <view class="cmt-tit" bindtap='showComment'>
+      <view class="cmt-t">
+        评价
+        <text class="cmt-good">好评{{prodCommData.positiveRating}}%</text>
+      </view>
+      <view class="cmt-count">
+        共{{prodCommData.number}}条
+        <text class="cmt-more"></text>
+      </view>
+    </view>
+    <view class="cmt-cont">
+      <view class="cmt-tag" bindtap='showComment'>
+        <text>全部({{prodCommData.number}})</text>
+        <text>好评({{prodCommData.praiseNumber}})</text>
+        <text>中评({{prodCommData.secondaryNumber}})</text>
+        <text>差评({{prodCommData.negativeNumber}})</text>
+        <text>有图({{prodCommData.picNumber}})</text>
+      </view>
+      <view class="cmt-items">
+        <view class="cmt-item" wx:for="{{littleCommPage}}" wx:key="prodCommId">
+          <view class="cmt-user">
+            <text class="date">{{item.recTime}}</text>
+            <view class="cmt-user-info">
+              <image class="user-img" src="{{item.pic}}"></image>
+              <view class="nickname">{{item.nickName}}</view>
+              <van-rate readonly value="{{ item.score }}" bind:change="onChange" color="#f44" />
+            </view>
+          </view>
+          <view class="cmt-cnt">{{item.content}}</view>
+          <scroll-view class="cmt-attr" scroll-x="true" wx:if="{{item.pics.length}}">
+            <image src="{{commPic}}" wx:for='{{item.pics}}' wx:for-item="commPic" wx:key='*this'></image>
+          </scroll-view>
+        </view>
+      </view>
+      <view class="cmt-more-v" wx:if="{{prodCommPage.records.length > 2}}">
+        <text bindtap='showComment'>查看全部评价</text>
+      </view>
+    </view>
+  </view>
+  <!-- 商品详情 -->
+  <view class="prod-detail">
+    <view>
+      <rich-text nodes="{{content}}"></rich-text>
+      <!-- <image src="//img14.360buyimg.com/cms/jfs/t1/25195/1/9487/388554/5c7f80a5E8b8f8f0c/46818404849d6ec6.jpg!q70.dpg" mode="widthFix"></image> -->
+    </view>
+  </view>
+  <!-- end 商品详情 -->
+  <!-- 底部按钮 -->
+  <view class="cart-footer {{findSku?'':'gray'}}">
+    <view class="btn icon" bindtap='toHomePage'>
+      <image src="../../images/tabbar/homepage.png"></image>
+      首页
+    </view>
+    <view class="btn icon" bindtap='toCartPage'>
+      <image src="../../images/tabbar/basket.png"></image>
+      购物车
+      <view class='badge badge-1' wx:if="{{totalCartNum>0}}">{{totalCartNum}}</view>
+    </view>
+    <view class="btn cart" bindtap='showSku'>
+      <text>加入购物车</text>
+    </view>
+    <view class="btn buy" bindtap='buyNow'>
+      <text>立即购买</text>
+    </view>
+  </view>
+
+  <!-- end 底部按钮 -->
+
+  <!-- 优惠券 -->
+  <!-- <view class="popup-hide" wx:if="{{popupShow}}">
+    <view class="popup-box">
+      <view class="popup-tit">
+        <text>优惠券</text>
+        <text class="close" bindtap='closePopup'></text>
+      </view>
+      <view class='popup-cnt'>
+        <block wx:for="{{couponList}}" wx:key='couponId'>
+          <coupon showTimeType="{{1}}" canUse="{{true}}" item="{{item}}"></coupon>
+        </block>
+      </view>
+    </view>
+  </view> -->
+  <!-- 规格弹窗 -->
+  <view class="pup-sku" wx:if="{{skuShow}}">
+    <view class="pup-sku-main">
+      <view class='pup-sku-header'>
+        <image class="pup-sku-img" src="{{defaultSku.pic?defaultSku.pic:pic}}"></image>
+        <view class="pup-sku-price" wx-if="{{findSku}}">
+          ￥
+          <text class="pup-sku-price-int">{{wxs.parsePrice(defaultSku.price)[0]}}</text> .{{wxs.parsePrice(defaultSku.price)[1]}}
+        </view>
+        <view class="pup-sku-price" wx-if="{{!findSku}}">无货</view>
+        <view class='pup-sku-prop'>
+          <text>已选</text> {{selectedProp.length>0?selectedProp+'，':selectedProp}}{{prodNum}}件
+        </view>
+        <view class='close' bindtap='closePopup'></view>
+      </view>
+      <view class='pup-sku-body'>
+        <view class="pup-sku-area">
+          <block wx:for="{{skuGroup}}" wx:for-index="key" wx:for-item="value" wx:key='*this'>
+            <view class='sku-kind'>{{key}}</view>
+            <view class='sku-choose'>
+              <block wx:for="{{value}}" wx:key='*this'>
+                <text class="sku-choose-item {{wxs.array_contain(selectedProp,item)?'active':''}} {{['dashed',''][wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)]}}" bindtap='toChooseItem'
+                  data-key="{{key}}" data-val="{{item}}">{{item}}</text>
+              </block>
+            </view>
+          </block>
+        </view>
+        <view class="pup-sku-count">
+          <view class="num-wrap">
+            <view class="minus" bindtap='onCountMinus'>
+              <text class="row"></text>
+            </view>
+            <view class="text-wrap">
+              <input type="number" value="{{prodNum}}" disabled />
+            </view>
+            <view class="plus" bindtap='onCountPlus'>
+              <text class="row"></text>
+              <text class="col"></text>
+            </view>
+          </view>
+          <view class="count-name">数量</view>
+        </view>
+      </view>
+      <view class='pup-sku-footer {{findSku?"":"gray"}}'>
+        <view class="btn cart" bindtap='addToCart'>加入购物车</view>
+        <view class="btn buy" bindtap='buyNow'>立即购买</view>
+      </view>
+    </view>
+  </view>
+  <!-- 评价弹窗 -->
+  <view class="cmt-popup" wx:if="{{commentShow}}">
+    <view class="cmt-tit">
+      <view class="cmt-t">
+        商品评价
+        <text class="cmt-good">好评度{{prodCommData.positiveRating}}%</text>
+      </view>
+      <text class="close" bindtap='closePopup'></text>
+    </view>
+    <view class="cmt-cont">
+      <view class="cmt-tag">
+        <text bindtap='getProdCommPage' data-evaluate="-1" class="{{evaluate==-1?'selected':''}}">全部({{prodCommData.number}})</text>
+        <text bindtap='getProdCommPage' data-evaluate="0" class="{{evaluate==0?'selected':''}}">好评({{prodCommData.praiseNumber}})</text>
+        <text bindtap='getProdCommPage' data-evaluate="1" class="{{evaluate==1?'selected':''}}">中评({{prodCommData.secondaryNumber}})</text>
+        <text bindtap='getProdCommPage' data-evaluate="2" class="{{evaluate==2?'selected':''}}">差评({{prodCommData.negativeNumber}})</text>
+        <text bindtap='getProdCommPage' data-evaluate="3" class="{{evaluate==3?'selected':''}}">有图({{prodCommData.picNumber}})</text>
+      </view>
+      <view class="cmt-items">
+        <view class="cmt-item" wx:for="{{prodCommPage.records}}" wx:key="prodCommId">
+          <view class="cmt-user">
+            <text class="date">{{item.recTime}}</text>
+            <view class="cmt-user-info">
+              <image class="user-img" src="{{item.pic}}"></image>
+              <view class="nickname">{{item.nickName}}</view>
+              <van-rate readonly value="{{ item.score }}" bind:change="onChange" color="#f44" />
+            </view>
+          </view>
+          <view class="cmt-cnt">{{item.content}}</view>
+          <scroll-view class="cmt-attr" scroll-x="true" wx:if="{{item.pics.length}}">
+            <image src="{{commPic}}" wx:for='{{item.pics}}' wx:for-item="commPic" wx:key='*this'></image>
+          </scroll-view>
+          <view class="cmt-reply" wx:if="{{item.replyContent}}">
+            <text class='reply-tit'>店铺回复：</text> {{item.replyContent}}
+          </view>
+        </view>
+      </view>
+      <view class="load-more" wx:if='{{prodCommPage.pages > prodCommPage.current}}'>
+        <text bindtap='getMoreCommPage'>点击加载更多</text>
+      </view>
+    </view>
+  </view>
+</view>
+<wxs module="wxs" src="../../wxs/number.wxs" />
\ No newline at end of file

mall4m/pages/prod/prod.wxss

+page {
+  background: #f4f4f4;
+  height: 100%;
+}
+
+.container {
+  height: auto;
+  padding-bottom: 150rpx;
+}
+
+swiper {
+  height: 750rpx;
+  width: 100%;
+  border-bottom: 2rpx solid #f8f8f8;
+}
+
+swiper image {
+  height: 750rpx;
+  width: 100%;
+}
+
+/** 商品信息 */
+
+.prod-info {
+  padding: 30rpx 30rpx 0 30rpx;
+  position: relative;
+  background: #fff;
+}
+
+.tit-wrap {
+  position: relative;
+  line-height: 40rpx;
+  padding-right: 104rpx;
+}
+
+.prod-tit {
+  font-size: 32rpx;
+  color: #333;
+  padding-right: 20rpx;
+}
+
+.tit-wrap .col {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 80rpx;
+  color: #666;
+  font-size: 20rpx;
+  padding-left: 20rpx;
+  text-align: center;
+}
+
+.tit-wrap .col image {
+  display: block;
+  margin: auto;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.tit-wrap .col::after {
+  content: "";
+  display: block;
+  width: 1px;
+  height: auto;
+  background: #f1f1f1;
+  position: absolute;
+  top: 0;
+  bottom: 5px;
+  left: 0;
+}
+
+.sales-p {
+  background: #fff;
+  line-height: 40rpx;
+  color: #999;
+  font-size: 24rpx;
+  margin-top: 6rpx;
+  margin-right: 104rpx;
+}
+
+.prod-price {
+  font-size: 30rpx;
+  height: 100rpx;
+  line-height: 100rpx;
+}
+
+.price {
+  color: #eb2444;
+  font-size: 24rpx;
+  font-weight: 600;
+  margin-right: 50rpx;
+}
+
+.price-num {
+  font-size: 46rpx;
+  font-weight: 400;
+}
+
+.sales {
+  color: #999;
+}
+
+.share-icon {
+  position: absolute;
+  right: 50rpx;
+  top: 50rpx;
+  background: none;
+  line-height: 40rpx;
+  border: none;
+  outline: none;
+  box-shadow: 0;
+  padding: 0;
+}
+
+.share-icon::after {
+  border: none;
+}
+
+.share-icon image {
+  width: 60rpx;
+  height: 60rpx;
+}
+
+.share-text {
+  font-size: 26rpx;
+  color: #999;
+  line-height: 30rpx;
+}
+
+/** end 商品信息 */
+
+/**优惠券*/
+
+.coupon {
+  padding: 28rpx 100rpx 14rpx 100rpx;
+  background: #fff;
+  position: relative;
+  margin-top: 20rpx;
+}
+
+.coupon .coupon-tit {
+  position: absolute;
+  display: inline-block;
+  width: 60rpx;
+  left: 20rpx;
+  font-size: 22rpx;
+  top: 28rpx;
+  line-height: 36rpx;
+  color: #999;
+}
+
+.coupon-con .item {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  padding: 0 18rpx;
+  background: #eb2444;
+  height: 36rpx;
+  line-height: 36rpx;
+  color: #fff;
+  font-size: 22rpx;
+  margin: 0 16rpx 16rpx 0;
+  font-family: arial;
+}
+
+.coupon-con .item:before, .coupon-con .item:after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  top: 0;
+  border: 18rpx solid transparent;
+}
+
+.coupon-con .item:before {
+  left: 0;
+  border-left: 4rpx solid #fff;
+}
+
+.coupon-con .item:after {
+  right: 0;
+  border-right: 4rpx solid #fff;
+}
+
+.coupon .num {
+  position: absolute;
+  right: 80rpx;
+  width: 80rpx;
+  top: 28rpx;
+  text-align: right;
+  font-size: 24rpx;
+  color: #999;
+  line-height: 36rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: arial;
+}
+
+.more {
+  position: absolute;
+  right: 20rpx;
+  width: 60rpx;
+  top: 10rpx;
+  text-align: right;
+  font-size: 40rpx;
+  color: #999;
+  letter-spacing: 1px;
+}
+
+/* 已选 */
+
+.sku {
+  padding: 20rpx;
+  background: #fff;
+  margin-top: 20rpx;
+  position: relative;
+  line-height: 48rpx;
+}
+
+.sku-tit {
+  position: absolute;
+  display: inline-block;
+  width: 60rpx;
+  left: 20rpx;
+  font-size: 22rpx;
+  top: 20rpx;
+  color: #999;
+}
+
+.sku-con {
+  margin: 0 80rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 28rpx;
+  font-weight: bold;
+}
+
+/** 评价*/
+
+.cmt-wrap {
+  background: #fff;
+  margin-top: 20rpx;
+  position: relative;
+  line-height: 48rpx;
+}
+
+.cmt-tit {
+  font-size: 32rpx;
+  position: relative;
+  border-bottom: 1px solid #ddd;
+  padding: 20rpx;
+}
+
+.cmt-t {
+  width: 300rpx;
+}
+
+.cmt-good {
+  color: #eb2444;
+  font-size: 24rpx;
+}
+
+.cmt-count {
+  position: absolute;
+  right: 20rpx;
+  top: 20rpx;
+  font-size: 24rpx;
+  color: #666;
+}
+
+.cmt-more {
+  width: 20rpx;
+  height: 20rpx;
+  border-top: 2rpx solid #999;
+  border-right: 2rpx solid #999;
+  transform: rotate(45deg);
+  margin-left: 10rpx;
+  display: inline-block;
+}
+
+.cmt-cont {
+  padding: 0 20rpx;
+}
+
+.cmt-tag {
+  position: relative;
+  padding: 14px 3px 0 0;
+  margin: 0;
+}
+
+.cmt-tag text {
+  margin: 0 10px 10px 0;
+  background: #fdf0f0;
+  display: inline-block;
+  padding: 0 10px;
+  height: 25px;
+  border-radius: 3px;
+  line-height: 25px;
+  font-size: 12px;
+  font-family: -apple-system, Helvetica, sans-serif;
+  color: #666;
+}
+
+.cmt-tag text.selected {
+  color: #fff;
+  background: #e93b3d;
+}
+
+.cmt-item {
+  position: relative;
+  padding: 10px 0;
+}
+
+.cmt-item::after {
+  content: "";
+  height: 0;
+  display: block;
+  border-bottom: 1px solid #ddd;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  right: -10px;
+  border-bottom-color: #e5e5e5;
+}
+
+.cmt-user {
+  line-height: 25px;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.cmt-user-info {
+  display: flex;
+  align-items: center;
+  width: 400rpx;
+}
+
+.cmt-user .user-img {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.cmt-user .nickname {
+  margin-left: 10px;
+  display: inline-block;
+  color: #333;
+  max-width: 8.2em;
+  height: 25px;
+  line-height: 27px;
+}
+
+.cmt-user .stars {
+  display: flex;
+  margin-left: 3px;
+}
+
+.cmt-user .stars image {
+  width: 35rpx;
+  height: 35rpx;
+}
+
+.cmt-user .date {
+  float: right;
+  color: #999;
+  margin-left: -60px;
+}
+
+.cmt-cnt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  position: relative;
+  line-height: 1.5;
+  font-size: 14px;
+  margin: 5px 0;
+  word-break: break-all;
+  max-height: 126px;
+}
+
+.cmt-attr {
+  height: 85px;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.cmt-attr .img-wrap {
+  width: 85px;
+  height: 85px;
+  display: inline-block;
+}
+
+.cmt-attr image {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  border-radius: 2px;
+  background: #f3f3f3;
+}
+
+.cmt-more-v {
+  text-align: center;
+  background-color: #fff;
+  font-size: 12px;
+}
+
+.cmt-more-v text {
+  height: 25px;
+  line-height: 25px;
+  font-size: 12px;
+  text-align: center;
+  color: #333;
+  padding: 0px 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 40px;
+  display: inline-block;
+}
+
+/** 评价弹窗 */
+
+.cmt-popup {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 998;
+  background-color: #fff;
+  padding-bottom: 98rpx;
+}
+
+.cmt-popup .cmt-cont {
+  height: calc(100% - 80rpx);
+  overflow: auto;
+}
+
+.cmt-popup .cmt-cnt {
+  -webkit-line-clamp: 20;
+  max-height: 500px;
+}
+
+.cmt-reply {
+  font-size: 14px;
+  border-top: 1px dashed #ddd;
+  padding: 5px 0;
+}
+
+.cmt-reply .reply-tit {
+  color: #eb2444;
+}
+
+.cmt-popup .load-more {
+  font-size: 14px;
+  padding: 20px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.cmt-popup .load-more text {
+  border: 1px solid #ddd;
+  padding: 5px 10px;
+  border-radius: 10px;
+  color: #666;
+}
+
+/** 商品详情 */
+
+.prod-detail {
+  background: #fff;
+  margin-top: 20rpx;
+  position: relative;
+  line-height: 48rpx;
+}
+
+.det-tit {
+  width: 300rpx;
+}
+
+.detail-tit {
+  font-size: 32rpx;
+  position: relative;
+  border-bottom: 1px solid #ddd;
+  padding: 20rpx;
+}
+
+.prod-detail image {
+  width: 750rpx !important;
+  display: block;
+}
+
+rich-text image {
+  width: 100% !important;
+}
+
+img {
+  width: 100% !important;
+  display: block;
+}
+
+/** end 商品详情 */
+
+/** 底部按钮 */
+
+.cart-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row nowrap;
+  height: 98rpx;
+  z-index: 999;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.cart-footer .btn {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  width: 0;
+  background-color: #fff;
+  font-size: 28rpx;
+  flex-flow: column;
+}
+
+.cart-footer .btn.icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 125rpx;
+  font-size: 20rpx;
+  color: #666;
+}
+
+.cart-footer .btn.icon image {
+  width: 50rpx;
+  height: 50rpx;
+}
+
+.cart-footer .btn.cart {
+  background: #584e61;
+  color: #fff;
+}
+
+.cart-footer .btn.buy {
+  background: #eb2444;
+  color: #fff;
+}
+
+.cart-footer.gray .btn.cart, .cart-footer.gray .btn.buy{
+  background: #ddd;
+}
+
+.cart-footer .btn .badge {
+  position: absolute;
+  top: 20rpx;
+  left: 62rpx;
+  display: inline-block;
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 14rpx;
+  background-color: #eb2444;
+  text-align: center;
+  line-height: 28rpx;
+  font-size: 18rpx;
+  color: #fff;
+}
+
+.cart-footer .btn .badge-1 {
+  width: 36rpx;
+}
+
+.cart-footer .btn .badge-2 {
+  width: 48rpx;
+  left: 52rpx;
+}
+
+/** end  底部按钮 */
+
+/** 优惠券弹窗 **/
+
+.popup-hide {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.popup-box {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  min-height: 375px;
+  max-height: 475px;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.popup-tit {
+  position: relative;
+  height: 46px;
+  line-height: 46px;
+  padding-left: 10px;
+  font-size: 16px;
+  color: #333;
+  background-color: #f7f7f7;
+}
+
+.close {
+  color: #aaa;
+  border-radius: 12px;
+  line-height: 20px;
+  text-align: center;
+  height: 20px;
+  width: 20px;
+  font-size: 18px;
+  padding: 1px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+}
+
+.close::before {
+  content: "\2716";
+}
+
+.popup-cnt {
+  max-height: 429px;
+  overflow: auto;
+  padding: 0 10px;
+}
+
+/** 规格弹窗**/
+
+.pup-sku {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.pup-sku-main {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  min-height: 375px;
+  max-height: 475px;
+  background-color: #fff;
+}
+
+.pup-sku-header {
+  position: relative;
+  line-height: 46px;
+  padding-left: 10px;
+  font-size: 16px;
+  color: #333;
+  height: 70px;
+  padding: 0 0 10px 110px;
+  background-color: #fff;
+}
+
+.pup-sku-img {
+  position: absolute;
+  left: 10px;
+  top: -20px;
+  border-radius: 2px;
+  width: 90px;
+  height: 90px;
+  border: 0 none;
+  vertical-align: top;
+}
+
+.pup-sku-price {
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+  color: #e4393c;
+  font-size: 10px;
+}
+
+.pup-sku-price-int {
+  font-size: 16px;
+}
+
+.pup-sku-prop {
+  word-break: break-all;
+  font-size: 12px;
+  color: #333;
+  line-height: 1.4em;
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.pup-sku-prop text {
+  color: #999;
+  margin-right: 5px;
+}
+
+.pup-sku-body {
+  box-sizing: border-box;
+  max-height: 379px;
+  padding-bottom: 100px;
+  overflow: auto;
+}
+
+.pup-sku-area .sku-kind {
+  font-size: 12px;
+  color: #999;
+  margin: 0 10px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.pup-sku-area .sku-choose {
+  overflow: hidden;
+  margin-bottom: 3px;
+}
+
+.sku-choose-item {
+  display: inline-block;
+  padding: 0 10px;
+  min-width: 20px;
+  max-width: 270px;
+  overflow: hidden;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  color: #333;
+  background-color: #f7f7f7;
+  font-size: 14px;
+  border:1px solid #aaa;
+}
+
+.sku-choose-item.active {
+  background-color: #eb2444;
+  border:1px solid #eb2444 !important;
+  color: #fff;
+}
+
+
+.sku-choose-item.dashed {
+  border:1px dashed #aaa;
+}
+
+.pup-sku-count {
+  padding: 0 10px 13px;
+  font-size: 12px;
+}
+
+.pup-sku-count .count-name {
+  color: #999;
+  height: 31px;
+  line-height: 31px;
+  width: 100rpx;
+}
+
+.pup-sku-count .num-wrap {
+  position: relative;
+  z-index: 0;
+  width: 110px;
+  float: right;
+  vertical-align: middle;
+  display: flex;
+}
+
+.num-wrap .minus, .num-wrap .plus {
+  position: relative;
+  max-width: 30px;
+  min-width: 30px;
+  height: 30px;
+  line-height: 30px;
+  background: #f7f7f7;
+  text-align: center;
+}
+
+.num-wrap .minus {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.num-wrap .plus {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.num-wrap .row {
+  border-radius: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -7px;
+  margin-top: -1px;
+  width: 14px;
+  height: 2px;
+  background-color: #ccc;
+}
+
+.num-wrap .col {
+  border-radius: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -1px;
+  margin-top: -7px;
+  width: 2px;
+  height: 14px;
+  background-color: #999;
+}
+
+.pup-sku-count .text-wrap {
+  position: relative;
+  width: 45px;
+  z-index: 0;
+  margin: 0 1px;
+}
+
+.pup-sku-count .text-wrap input {
+  height: 30px;
+  width: 100%;
+  color: #333;
+  background: #fff;
+  font-size: 12px;
+  text-align: center;
+  border: none;
+  background: #f7f7f7;
+}
+
+.pup-sku-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row nowrap;
+  height: 98rpx;
+  z-index: 999;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.pup-sku-footer .btn {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+  width: 0;
+  background-color: #fff;
+  font-size: 28rpx;
+  flex-flow: column;
+}
+
+.pup-sku-footer .btn.cart {
+  background: #584e61;
+  color: #fff;
+}
+
+.pup-sku-footer .btn.buy {
+  background: #eb2444;
+  color: #fff;
+}
+
+.pup-sku-footer.gray .btn.cart, .pup-sku-footer.gray .btn.buy{
+  background: #ddd;
+}
+

mall4m/pages/recent-news/recent-news.js

+// pages/recent-news/recent-news.js
+var http = require("../../utils/http.js");
+var config = require("../../utils/config.js");
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    news:[],
+  },
+
+
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    var ths = this;
+    //加载公告
+    var params = {
+      url: "/shop/notice/noticeList",
+      method: "GET",
+      data: {},
+      callBack: function (res) {
+        // console.log(res);
+        ths.setData({
+          news: res.records,
+        });
+      }
+    };
+    http.request(params);
+  },
+
+  // 跳转公告详情页
+  toNewsDetail:function(e){
+    console.log(e)
+    var id = e.currentTarget.dataset.id
+    // console.log(id)
+    wx.navigateTo({
+      url: '/pages/news-detail/news-detail?id='+e.currentTarget.dataset.id,
+    })
+    // console.log(id)
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

mall4m/pages/recent-news/recent-news.json

+{
+  "backgroundTextStyle": "light",
+  "navigationBarTitleText": "最新公告",
+  "navigationBarTextStyle": "black",
+  "navigationBarBackgroundColor": "#fafafa"
+}
\ No newline at end of file

mall4m/pages/recent-news/recent-news.wxml

+<!--pages/recent-news/recent-news.wxml-->
+<view class='container'>
+  <view class='recent-news'>
+  <block wx:for='{{news}}' wx:key=''>
+    <view class='news-item' bindtap='toNewsDetail' data-id="{{item.id}}">
+      <view class='news-item-title'>{{item.title}}</view>
+      <view class='news-item-date'>
+        {{item.publishTime}}
+      </view>
+    </view>
+   </block>
+  </view>
+</view>

mall4m/pages/recent-news/recent-news.wxss

+/* pages/recent-news/recent-news.wxss */
+
+.recent-news {
+  background: #fff;
+}
+
+.recent-news .news-item {
+  padding: 20rpx 20rpx 0 20rpx;
+  position: relative;
+}
+
+.recent-news .news-item::after {
+  content: " ";
+  width: 100%;
+  height: 2rpx;
+  background-color: #e1e1e1;
+  left: 20rpx;
+  display: block;
+  position: absolute;
+}
+
+.recent-news .news-item .news-item-title {
+  font-size: 28rpx;
+  text-align: left;
+}
+
+.recent-news .news-item .news-item-date {
+  font-size: 24rpx;
+  color: #999;
+  text-align: right;
+  margin-top: 10rpx;
+  margin-bottom: 20rpx;
+}

mall4m/pages/search-page/search-page.js

+// pages/search-page/search-page.js
+
+var http = require('../../utils/http.js');
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    hotSearchList: [],
+    prodName:"",
+    recentSearch: [],
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    var ths = this;
+    //热门搜索
+    var params = {
+      url: "/search/hotSearchByShopId",
+      method: "GET",
+      data: {
+        number:10,
+        shopId:1,
+        sort:1,
+      },
+   
+      callBack: function (res) {
+        ths.setData({
+        hotSearchList:res,
+        });
+      },
+    };
+    http.request(params);
+
+    // 获取历史搜索
+    this.getRecentSearch();
+  },
+
+
+
+  /**
+    * 获取历史搜索
+    */
+  getRecentSearch: function () {
+    let recentSearch = wx.getStorageSync('recentSearch');
+    this.setData({ 
+      recentSearch
+    });
+  },
+
+    /**
+     * 搜索提交
+     */
+  toSearchProdPage: function () {
+
+      if (this.data.prodName.trim()) {
+      // 记录最近搜索
+        let recentSearch = wx.getStorageSync('recentSearch') || [];
+        recentSearch = recentSearch.filter(item => item !== this.data.prodName)
+        recentSearch.unshift(this.data.prodName);
+        if (recentSearch.length>10){
+          recentSearch.pop();
+        }
+        wx.setStorageSync('recentSearch', recentSearch);
+
+      // 跳转到商品列表页
+      wx.navigateTo({
+        url: '/pages/search-prod-show/search-prod-show?prodName=' + this.data.prodName,
+      })
+    }
+  },
+
+    /**
+     * 清空搜索历史
+     */
+    clearSearch: function () {
+    wx.removeStorageSync('recentSearch');
+    this.getRecentSearch();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+ // 返回首页
+  goBackIndex:function(){
+    wx.navigateBack({
+      // url: '/pages/search-page/search-page',
+    })
+  },
+
+
+
+//输入商品名获取数据 || 绑定输入值
+  getSearchContent:function(e){
+    this.setData({
+      prodName: e.detail.value
+    })
+    // this.data.prodName=e.detail.value
+  },
+
+  //点击搜素历史
+  onHistSearch:function(e){
+    var name = e.currentTarget.dataset.name;
+    this.setData({
+      prodName: name
+    });
+    this.toSearchProdPage();
+  }
+})
\ No newline at end of file

mall4m/pages/search-page/search-page.json

+{
+  "backgroundTextStyle": "light",
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTitleText": "搜索",
+  "navigationBarTextStyle": "black"
+}
\ No newline at end of file

mall4m/pages/search-page/search-page.wxml

+<!--pages/search-page/search-page.wxml-->
+<view class='container'>
+
+  <!-- 搜索框 -->
+  <view class='search-bar'>
+    <view class='search-box'>
+      <input placeholder="输入关键字搜索" class='sear-input'confirm-type='search' bindconfirm='toSearchProdPage' bindinput='getSearchContent' value='{{prodName}}'></input>
+      <image src='../../images/icon/search.png' class='search-img'></image>
+    </view>
+    <text class='search-hint' bindtap='goBackIndex'>取消</text>
+  </view>
+
+  <view class='search-display'>
+    <!-- 热门搜索 -->
+    <view class='hot-search'>
+      <view class='title-text'>
+        热门搜索
+      </view>
+      <view class='hot-search-tags'>
+       <block wx:for='{{hotSearchList}}' wx:key=''>
+        <text class='tags' bindtap='onHistSearch' data-name="{{item.content}}" >{{item.title}}</text>
+        </block> 
+      </view>
+    
+    </view>
+
+    <!-- 搜索历史 -->
+    <view class='history-search'>
+      <view class='title-text history-line'>
+        搜索历史
+        <view class='clear-history'>
+          <image src='../../images/icon/clear-his.png' bindtap='clearSearch'></image>
+        </view>
+      </view>
+      <block wx:for="{{recentSearch}}" wx:key='{{item}}'>
+        <view class='his-search-tags'>
+          <text class='tags' bindtap='onHistSearch' data-name="{{item}}">{{item}}</text>
+        </view>
+      </block>
+    </view>
+  </view>
+</view>
\ No newline at end of file

mall4m/pages/search-page/search-page.wxss

+/* pages/search-page/search-page.wxss */
+
+/* 搜索栏 */
+
+.search-bar {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: #777;
+  background: #fff;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
+  z-index: 3;
+}
+
+.search-bar .search-box {
+  position: relative;
+  height: 60rpx;
+  background: #f7f7f7;
+  z-index: 999;
+  width: 80%;
+  margin-left: 70rpx;
+  border-radius: 50rpx;
+  margin: 20rpx 0 20rpx 20rpx;
+}
+
+.sear-input {
+  height: 60rpx;
+  border-radius: 50rpx;
+  border: 0;
+  margin: 0 30rpx 0 64rpx;
+  line-height: 48rpx;
+  vertical-align: top;
+  background: #f7f7f7;
+  font-size: 28rpx;
+}
+
+.search-bar .search-hint {
+  font-size: 28rpx;
+  position: absolute;
+  right: 30rpx;
+  top: 31rpx;
+  color: #eb2444;
+}
+
+.search-bar .search-box .search-img {
+  width: 32rpx;
+  height: 32rpx;
+  position: absolute;
+  left: 20rpx;
+  top: 14rpx;
+  display: block;
+}
+
+/* 热门搜索&搜索历史 */
+
+.search-display {
+  background: #fff;
+  padding: 20rpx;
+  margin-top: 100rpx;
+}
+
+.search-display .title-text {
+  padding: 30rpx 0;
+  font-size: 30rpx;
+  color: #666;
+}
+
+.hot-search .hot-search-tags {
+  overflow: hidden;
+  font-size: 26rpx;
+  text-align: center;
+  padding-bottom: 30rpx;
+}
+
+.hot-search .hot-search-tags .tags {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  float: left;
+  border-radius: 50rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #f2f2f2;
+  box-sizing: border-box;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  padding: 10rpx 30rpx;
+}
+
+/* 搜索历史 */
+
+.history-search .title-text.history-line {
+  position: relative;
+  border-top: 2rpx solid #e1e1e1;
+}
+
+.history-search .his-search-tags {
+  overflow: hidden;
+  font-size: 26rpx;
+  text-align: center;
+  display: inline-block;
+}
+
+.history-search .his-search-tags .tags {
+  max-width: 300rpx;
+  overflow: hidden;
+  float: left;
+  border-radius: 50rpx;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background-color: #f2f2f2;
+  box-sizing: border-box;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  padding: 10rpx 30rpx;
+}
+
+.clear-history image {
+  width: 32rpx;
+  height: 32rpx;
+  position: absolute;
+  right: 10rpx;
+  top: 30rpx;
+}

mall4m/pages/search-prod-show/search-prod-show.js

+// pages/search-prod-show/search-prod-show.js
+
+var http = require('../../utils/http.js');
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    sts: 0,
+    showType:2,
+    searchProdList:[],
+    prodName:"",
+  },
+
+  changeShowType:function(){
+    var showType = this.data.showType;
+    if (showType==1){
+      showType=2;
+    }else{
+      showType = 1;
+    }
+    this.setData({
+      showType: showType
+    });
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({
+      prodName: options.prodName
+    });
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  //输入商品获取数据
+  getSearchContent: function (e) {
+    this.setData({
+      prodName: e.detail.value
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    this.toLoadData();
+  },
+
+//请求商品接口
+  toLoadData:function(){
+    var ths = this;
+    //热门搜索
+    var params = {
+      url: "/search/searchProdPage",
+      method: "GET",
+      data: {
+        current: 1,
+        prodName: this.data.prodName,
+        size: 10,
+        sort: this.data.sts
+      },
+      callBack: function (res) {
+        ths.setData({
+          searchProdList: res.records,
+        });
+      },
+    };
+    http.request(params);
+  },
+
+//当前搜索页二次搜索商品
+  toSearchConfirm:function(){
+    this.toLoadData();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+    /**
+   * 状态点击事件
+   */
+  onStsTap: function(e) {
+    var sts = e.currentTarget.dataset.sts;
+    this.setData({
+      sts: sts
+    });
+    this.toLoadData();
+  },
+
+  toProdPage: function (e) {
+    var prodid = e.currentTarget.dataset.prodid;
+    wx.navigateTo({
+      url: '/pages/prod/prod?prodid=' + prodid,
+    })
+  },
+})
\ No newline at end of file

mall4m/pages/search-prod-show/search-prod-show.json

+{
+  "backgroundTextStyle": "light",
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTitleText": "搜索结果",
+  "navigationBarTextStyle": "black",
+  "usingComponents":{
+    "prod":"/components/production/production"
+  }
+}
\ No newline at end of file

mall4m/pages/search-prod-show/search-prod-show.wxml

+<!--pages/search-prod-show/search-prod-show.wxml-->
+<view class='container'>
+
+  <!-- 搜索框 -->
+  <view class='fixed-box'>
+    <view class='search-bar'>
+      <view class='search-box'>
+        <input class='sear-input' value="{{prodName}}" bindinput='getSearchContent' confirm-type='search' bindconfirm='toSearchConfirm'></input>
+        <image src='../../images/icon/search.png' class='search-img'></image>
+      </view>
+      <view class='search-list-img' bindtap='changeShowType'>
+        <image wx:if="{{showType==1}}" src='../../images/icon/search-col.png'></image>
+        <image wx:if="{{showType==2}}" src='../../images/icon/search-col2.png'></image>
+      </view>
+    </view>
+    <view class='tabs'>
+      <text class="tab-item complete {{sts==0?'on':''}}" bindtap='onStsTap' data-sts="0">综合</text>
+      <text class="tab-item {{sts==1?'on':''}}" bindtap='onStsTap' data-sts="1">销量</text>
+      <text class="tab-item {{sts==2?'on':''}}" bindtap='onStsTap' data-sts="2">价格</text>
+    </view>
+  </view>
+
+  <!-- 商品列表 -->
+  <view class='prod-list'>
+    <!-- 横向列表 -->
+    <view class='prod-show' wx:if="{{showType==1}}">
+      <view class='hotsale-item-cont'>
+        <block wx:for="{{searchProdList}}">
+          <prod item="{{item}}" sts="6"></prod>
+        </block>
+      </view>
+    </view>
+
+    <!-- 纵向列表 -->
+    <view class='cont-item' wx:if="{{showType==2}}">
+      <block wx:for='{{searchProdList}}' wx:key=''>
+        <view class='show-item' bindtap='toProdPage' data-prodid="{{item.prodId}}">
+          <view class='more-prod-pic'>
+            <image src='{{item.pic}}' class='more-pic'></image>
+          </view>
+          <view class='prod-text-right'>
+            <view class='prod-text more'>{{item.prodName}}</view>
+            <view class='cate-prod-info'>{{item.praiseNumber}}评价 {{item.positiveRating}}%好评</view>
+            <view class='prod-price more'>
+              <text class='symbol'>￥</text>
+              <text class='big-num'>{{wxs.parsePrice(item.price)[0]}}</text>
+              <text class='small-num'>.{{wxs.parsePrice(item.price)[1]}}</text>
+            </view>
+          </view>
+        </view>
+      </block>
+    </view>
+  </view>
+
+</view>
+<wxs module="wxs" src="../../wxs/number.wxs" />
\ No newline at end of file

mall4m/pages/search-prod-show/search-prod-show.wxss

+/* pages/search-prod-show/search-prod-show.wxss */
+
+page {
+  background: #f4f4f4;
+}
+
+/* 搜索栏 */
+
+.fixed-box {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 999;
+  background: #fff;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  color: #777;
+  background: #fff;
+  z-index: 3;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+
+.search-bar .search-box {
+  position: relative;
+  height: 60rpx;
+  background: #f7f7f7;
+  z-index: 999;
+  width: 80%;
+  border-radius: 50rpx;
+  margin-right: 30rpx;
+  flex: 1;
+}
+
+.sear-input {
+  height: 60rpx;
+  border-radius: 50rpx;
+  border: 0;
+  margin: 0 30rpx 0 64rpx;
+  line-height: 48rpx;
+  vertical-align: top;
+  background: #f7f7f7;
+  font-size: 28rpx;
+}
+
+.search-bar .search-hint {
+  font-size: 28rpx;
+  position: absolute;
+  right: 30rpx;
+  top: 31rpx;
+  color: #eb2444;
+}
+
+.search-bar .search-box .search-img {
+  width: 32rpx;
+  height: 32rpx;
+  position: absolute;
+  left: 20rpx;
+  top: 14rpx;
+  display: block;
+}
+
+.search-bar .search-list-img {
+  width: 40rpx;
+  height: 40rpx;
+  font-size: 0;
+}
+
+.search-bar .search-list-img image {
+  width: 100%;
+  height: 100%;
+}
+
+.fixed-box .tabs {
+  width: 100%;
+  height: 80rpx;
+  line-height: 80rpx;
+  padding: 10rpx 0;
+  z-index: 999;
+  background: #fff;
+}
+
+.fixed-box .tabs::after {
+  content: '';
+  background-color: #e1e1e1;
+  left: 0;
+  height: 1px;
+  transform-origin: 50% 100% 0;
+  bottom: 0;
+  position: absolute;
+  display: block;
+  width: 100%;
+}
+
+.fixed-box .tabs .tab-item {
+  display: inline-block;
+  width: 33.33%;
+  text-align: center;
+  font-size: 28rpx;
+}
+
+.fixed-box .tabs .tab-item.on {
+  color: #eb2444;
+}
+
+/* 横向列表 */
+
+.prod-show {
+  background: #fff;
+  margin-top: 160rpx;
+}
+
+.prod-show .prod-items {
+  width: 375rpx;
+  float: left;
+  background: #fff;
+  padding-bottom: 20rpx;
+  box-sizing: border-box;
+}
+
+/* 纵向列表 */
+
+.prod-list .cont-item {
+  padding: 0 20rpx 20rpx 20rpx;
+  margin-top: 180rpx;
+}
+
+.prod-list .cont-item .show-item .more-prod-pic {
+  text-align: center;
+  width: 170rpx;
+  height: 170rpx;
+  font-size: 0;
+}
+
+.prod-list .cont-item .show-item .more-prod-pic .more-pic {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.prod-list .cont-item .show-item {
+  position: relative;
+  display: flex;
+  justify-content: start;
+  padding: 20rpx;
+  border-radius: 20rpx;
+  background: #fff;
+  margin-bottom: 20rpx;
+  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
+}
+
+.prod-list .cont-item .show-item .prod-text-right {
+  margin-left: 20rpx;
+  width: 75%;
+}
+
+.prod-list .cont-item .show-item .prod-text-right .cate-prod-info {
+  font-size: 22rpx;
+  color: #999;
+  margin: 10rpx 0 20rpx 0;
+}
+
+.prod-list .cont-item .show-item .prod-text-right .go-to-buy {
+  font-size: 26rpx;
+  background: #eb2444;
+  color: #fff;
+  border-radius: 50rpx;
+  width: 150rpx;
+  text-align: center;
+  padding: 8rpx 3rpx;
+  position: absolute;
+  right: 20rpx;
+  bottom: 20rpx;
+}
+
+.prod-list .cont-item .show-item .prod-text-right .prod-text.more {
+  margin: 0;
+  height: 78rpx;
+  font-size: 28rpx;
+  display: -webkit-box;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  color: #000;
+}
+
+.prod-list .cont-item .show-item .prod-text-right .prod-price.more {
+  font-size: 28rpx;
+  color: #eb2444;
+  font-family: arial;
+}

mall4m/pages/submit-order/submit-order.js

+// pages/submit-order/submit-order.js
+var http = require("../../utils/http.js");
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    popupShow: false,
+    couponSts: 1,
+    couponList: [],
+    // 订单入口 0购物车 1立即购买
+    orderEntry: "0",
+    userAddr: null,
+    orderItems: [],
+    coupon: {
+      totalLength: 0,
+      canUseCoupons: [],
+      noCanUseCoupons: []
+    },
+    actualTotal: 0,
+    total: 0,
+    totalCount: 0,
+    transfee: 0,
+    reduceAmount: 0,
+    remark: "",
+    couponIds: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    this.setData({
+      orderEntry: options.orderEntry,
+    });
+  },
+
+  //加载订单数据
+  loadOrderData: function() {
+    var addrId = 0;
+    if (this.data.userAddr != null) {
+      addrId = this.data.userAddr.addrId;
+    }
+    wx.showLoading({
+      mask: true
+    });
+    var params = {
+      url: "/p/order/confirm",
+      method: "POST",
+      data: {
+        addrId: addrId,
+        orderItem: this.data.orderEntry === "1" ? JSON.parse(wx.getStorageSync("orderItem")) : undefined,
+        basketIds: this.data.orderEntry === "0" ? JSON.parse(wx.getStorageSync("basketIds")) : undefined,
+        couponIds: this.data.couponIds,
+        userChangeCoupon: 1
+      },
+      callBack: res => {
+        wx.hideLoading();
+        let orderItems = [];
+
+        res.shopCartOrders[0].shopCartItemDiscounts.forEach(itemDiscount => {
+          orderItems = orderItems.concat(itemDiscount.shopCartItems)
+        })
+        if (res.shopCartOrders[0].coupons) {
+          let canUseCoupons = []
+          let unCanUseCoupons = []
+          res.shopCartOrders[0].coupons.forEach(coupon => {
+            if (coupon.canUse) {
+              canUseCoupons.push(coupon)
+            } else {
+              unCanUseCoupons.push(coupon)
+            }
+          })
+          this.setData({
+            coupons: {
+              totalLength: res.shopCartOrders[0].coupons.length,
+              canUseCoupons: canUseCoupons,
+              unCanUseCoupons: unCanUseCoupons
+            }
+          })
+        }
+
+        this.setData({
+          orderItems: orderItems,
+          actualTotal: res.actualTotal,
+          total: res.total,
+          totalCount: res.totalCount,
+          userAddr: res.userAddr,
+          transfee: res.shopCartOrders[0].transfee,
+          shopReduce: res.shopCartOrders[0].shopReduce,
+        });
+      },
+      errCallBack: res => {
+        wx.hideLoading();
+        this.chooseCouponErrHandle(res)
+      }
+    };
+    http.request(params);
+
+  },
+
+  /**
+   * 优惠券选择出错处理方法
+   */
+  chooseCouponErrHandle(res) {
+    // 优惠券不能共用处理方法
+    if (res.statusCode == 601) {
+      wx.showToast({
+        title: res.data,
+        icon: "none",
+        duration: 3000,
+        success: res => {
+          this.setData({
+            couponIds: []
+          })
+        }
+      })
+      setTimeout(() => {
+        this.loadOrderData();
+      }, 2500)
+    }
+  },
+
+  onRemarksInput: function (e) {
+    this.setData({
+      remarks: e.detail.value
+    });
+  },
+
+  /**
+   * 提交订单
+   */
+  toPay: function() {
+    if (!this.data.userAddr) {
+      wx.showToast({
+        title: '请选择地址',
+        icon: "none"
+      })
+      return;
+    }
+
+    this.submitOrder();
+  },
+
+
+  submitOrder: function() {
+    wx.showLoading({
+      mask: true
+    });
+    var params = {
+      url: "/p/order/submit",
+      method: "POST",
+      data: {
+        orderShopParam: [{
+          remarks: this.data.remark,
+          shopId: 1
+        }]
+      },
+      callBack: res => {
+        wx.hideLoading();
+        this.calWeixinPay(res.orderNumbers);
+      }
+    };
+    http.request(params);
+  },
+
+  /**
+   * 唤起微信支付
+   */
+  calWeixinPay: function(orderNumbers) {
+    wx.showLoading({
+      mask: true
+    });
+    var params = {
+      url: "/p/order/pay",
+      method: "POST",
+      data: {
+        payType: 1,
+        orderNumbers: orderNumbers
+      },
+      callBack: function(res) {
+        wx.hideLoading();
+        wx.requestPayment({
+          timeStamp: res.timeStamp,
+          nonceStr: res.nonceStr,
+          package: res.packageValue,
+          signType: res.signType,
+          paySign: res.paySign,
+          success: e => {
+            // console.log("支付成功");
+            wx.navigateTo({
+              url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + orderNumbers + "&orderType=" + this.data.orderType,
+            })
+          },
+          fail: err => {
+            wx.navigateTo({
+              url: '/pages/pay-result/pay-result?sts=0&orderNumbers=' + orderNumbers + "&orderType=" + this.data.orderType,
+            })
+          }
+        })
+
+      }
+    };
+    http.request(params);
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {
+    var pages = getCurrentPages();
+    var currPage = pages[pages.length - 1];
+    if (currPage.data.selAddress == "yes") {
+      this.setData({ //将携带的参数赋值
+        userAddr: currPage.data.item
+      });
+    }
+    //获取订单数据
+    this.loadOrderData();
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function() {
+
+  },
+
+  changeCouponSts: function(e) {
+    this.setData({
+      couponSts: e.currentTarget.dataset.sts
+    });
+  },
+
+  showCouponPopup: function() {
+    this.setData({
+      popupShow: true
+    });
+  },
+
+  closePopup: function() {
+    this.setData({
+      popupShow: false
+    });
+  },
+
+  /**
+   * 去地址页面
+   */
+  toAddrListPage: function() {
+    wx.navigateTo({
+      url: '/pages/delivery-address/delivery-address?order=0',
+    })
+  },
+  /**
+   * 确定选择好的优惠券
+   */
+  choosedCoupon: function() {
+    this.loadOrderData();
+    this.setData({
+      popupShow: false
+    });
+  },
+
+  /**
+   * 优惠券子组件发过来
+   */
+  checkCoupon: function(e) {
+    var ths = this;
+    let index = ths.data.couponIds.indexOf(e.detail.couponId);
+    if (index === -1) {
+      ths.data.couponIds.push(e.detail.couponId)
+    } else {
+      ths.data.couponIds.splice(index, 1)
+    }
+  }
+})
\ No newline at end of file

mall4m/pages/submit-order/submit-order.json

+{
+
+  "usingComponents": {
+    "coupon":"/components/coupon/coupon"
+  },
+  "backgroundTextStyle": "light",
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTitleText": "提交订单",
+  "navigationBarTextStyle": "black"
+
+}
\ No newline at end of file

mall4m/pages/submit-order/submit-order.wxml

+<!--pages/submit-order/submit-order.wxml-->
+<view class='container'>
+  <view class='submit-order'>
+    <!-- 收货地址 -->
+    <view class='delivery-addr ' bindtap='toAddrListPage'>
+      <view class='addr-bg ' wx:if="{{!userAddr}}">
+        <view class='add-addr'>
+          <view class='plus-sign-img'>
+            <image src='../../images/icon/plus-sign.png'></image>
+          </view>
+          <text>新增收货地址</text>
+        </view>
+        <view class='arrow empty'></view>
+      </view>
+      <view class='addr-bg whole' wx:if="{{userAddr}}">
+        <view class='addr-icon'>
+          <image src='../../images/icon/addr.png'></image>
+        </view>
+        <view class='user-info'>
+          <text class='item'>{{userAddr.receiver}}</text>
+          <text class='item'>{{userAddr.mobile}}</text>
+        </view>
+        <view class='addr'>{{userAddr.province}}{{userAddr.city}}{{userAddr.area}}{{userAddr.addr}}</view>
+        <view class='arrow'></view>
+      </view>
+    </view>
+
+    <!-- 商品详情 -->
+    <view class='prod-item'>
+      <block wx:for="{{orderItems}}" wx:key=''>
+        <view class='item-cont' bindtap='toOrderDetailPage' data-ordernum="{{item.primaryOrderNo}}">
+          <view class='prod-pic'>
+            <image src='{{item.pic}}'></image>
+          </view>
+          <view class='prod-info'>
+            <view class='prodname'>
+              {{item.prodName}}
+            </view>
+            <view class='prod-info-cont'>{{item.skuName}}</view>
+            <view class='price-nums'>
+              <text class='prodprice'><text class='symbol'>￥</text>
+              <text class='big-num'>{{wxs.parsePrice(item.price)[0]}}</text>
+              <text class='small-num'>.{{wxs.parsePrice(item.price)[1]}}</text></text>
+              <text class="prodcount">x{{item.prodCount}}</text>
+            </view>
+          </view>
+        </view>
+      </block>
+      <!-- <view class='item-cont' bindtap='toOrderDetailPage' data-ordernum="{{item.primaryOrderNo}}">
+        <view class='prod-pic'>
+          <image src='../../images/prod/pic09.jpg'></image>
+        </view>
+        <view class='prod-info'>
+          <view class='prodname'>
+            THE BEAST/野兽派 易烊千玺同款
+          </view>
+          <view class='prod-info-cont'>经典杯型升级，杯型更细长优雅</view>
+          <view class='price-nums'>
+            <text class='prodprice'><text class='symbol'>￥</text>
+            <text class='big-num'>{{wxs.parsePrice(40.00)[0]}}</text>
+            <text class='small-num'>.{{wxs.parsePrice(40.00)[1]}}</text></text>
+            <text class="prodcount">x1</text>
+          </view>
+        </view>
+      </view> -->
+
+      <view class='total-num'>
+        <text class="prodcount">共{{totalCount}}件商品</text>
+        <view class='prodprice'>合计：
+          <text class='symbol'>￥</text>
+          <text class='big-num'>{{wxs.parsePrice(total)[0]}}</text>
+          <text class='small-num'>.{{wxs.parsePrice(total)[1]}}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 订单详情 -->
+    <view class='order-msg'>
+      <view class='msg-item'>
+        <view class='item coupon' bindtap='showCouponPopup'>
+          <text class='item-tit'>优惠券：</text>
+          <text class='item-txt' wx:if="{{!coupons.canUseCoupons}}">暂无可用</text>
+          <text class='coupon-btn'>{{coupons.totalLength? coupons.totalLength: 0}}张</text>
+          <text class='arrow'></text>
+        </view>
+        <view class='item'>
+          <text>买家留言：</text>
+          <input value='{{remarks}}' placeholder='给卖家留言' bindinput="onRemarksInput"></input>
+        </view>
+      </view>
+
+    </view>
+
+    <view class='order-msg'>
+      <view class='msg-item'>
+        <view class='item'>
+          <view class='item-tit'>订单总额：</view>
+          <view class='item-txt price'>
+            <text class='symbol'>￥</text>
+            <text class='big-num'>{{wxs.parsePrice(total)[0]}}</text>
+            <text class='small-num'>.{{wxs.parsePrice(total)[1]}}</text>
+          </view>
+        </view>
+        <view class='item'>
+          <view class='item-tit'>运费：</view>
+          <view class='item-txt price'>
+            <text class='symbol'>￥</text>
+            <text class='big-num'>{{wxs.parsePrice(transfee)[0]}}</text>
+            <text class='small-num'>.{{wxs.parsePrice(transfee)[1]}}</text>
+          </view>
+        </view>
+        <view class='item'>
+          <view class='item-tit'>优惠金额：</view>
+          <view class='item-txt price'>
+            <text class='symbol'>-￥</text>
+            <text class='big-num'>{{wxs.parsePrice(shopReduce)[0]}}</text>
+            <text class='small-num'>.{{wxs.parsePrice(shopReduce)[1]}}</text>
+          </view>
+        </view>
+        <view class='item payment'>
+          <view class='item-txt price'>
+            小计：
+            <text class='symbol'>￥</text>
+            <text class='big-num'>{{wxs.parsePrice(actualTotal)[0]}}</text>
+            <text class='small-num'>.{{wxs.parsePrice(actualTotal)[1]}}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+
+  <!-- 底部栏 -->
+  <view class='submit-order-footer'>
+    <view class='sub-order'>
+      <view class='item-txt'>
+        合计：
+        <view class='price'>
+          <text class='symbol'>￥</text>
+          <text class='big-num'>{{wxs.parsePrice(actualTotal)[0]}}</text>
+          <text class='small-num'>.{{wxs.parsePrice(actualTotal)[1]}}</text>
+        </view>
+      </view>
+    </view>
+    <view class='footer-box' bindtap='toPay'>
+      提交订单
+    </view>
+  </view>
+</view>
+
+<!-- 选择优惠券弹窗 -->
+<view class="popup-hide" wx:if="{{popupShow}}">
+  <view class="popup-box">
+    <view class="popup-tit">
+      <text>优惠券</text>
+      <text class="close" bindtap='closePopup'></text>
+    </view>
+    <view class="coupon-tabs">
+      <view class="coupon-tab {{couponSts==1?'on':''}}" bindtap='changeCouponSts' data-sts='1'>可用优惠券({{coupons.canUseCoupons.length?coupons.canUseCoupons.length:0}})</view>
+      <view class="coupon-tab {{couponSts==2?'on':''}}" bindtap='changeCouponSts' data-sts='2'>不可用优惠券({{coupons.unCanUseCoupons.length?coupons.unCanUseCoupons.length:0}})</view>
+    </view>
+    <view class='popup-cnt'>
+      <block wx:for="{{coupons.canUseCoupons}}" wx:if="{{couponSts == 1}}" wx:key="couponId">
+        <coupon item="{{item}}" order="{{true}}" bind:checkCoupon="checkCoupon" canUse="{{true}}"></coupon>
+      </block>
+      <block wx:for="{{coupons.unCanUseCoupons}}" wx:if="{{couponSts == 2}}" wx:key="couponId">
+        <coupon item="{{item}}" order="{{true}}" canUse="{{false}}"></coupon>
+      </block>
+      <view class="botm-empty"></view>
+    </view>
+    <view class="coupon-ok" wx:if="{{couponSts==1}}">
+      <text bindtap='choosedCoupon'>确定</text>
+    </view>
+  </view>
+</view>
+
+<wxs module="wxs" src="../../wxs/number.wxs" />
\ No newline at end of file

mall4m/pages/submit-order/submit-order.wxss

+/* pages/submit-order/submit-order.wxss */
+
+page {
+  background: #f4f4f4;
+}
+
+/* 收货地址 */
+
+.submit-order {
+  margin-bottom: 100rpx;
+}
+
+.submit-order .delivery-addr {
+  position: relative;
+  background: #fff;
+}
+
+.delivery-addr .addr-bg .add-addr .plus-sign {
+  color: #eb2444;
+  border: 2rpx solid #eb2444;
+  padding: 0rpx 6rpx;
+  margin-right: 10rpx;
+}
+
+.delivery-addr .addr-bg {
+  padding: 0 30rpx;
+}
+
+.delivery-addr .addr-bg.whole {
+  padding: 0 39rpx 0 77rpx;
+}
+
+.delivery-addr .addr-bg .add-addr {
+  font-size: 28rpx;
+  color: #666;
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+}
+
+.submit-order .delivery-addr .addr-icon {
+  width: 32rpx;
+  height: 32rpx;
+  display: block;
+  position: absolute;
+  left: 30rpx;
+  top: 24rpx;
+}
+
+.submit-order .delivery-addr .addr-icon image {
+  width: 100%;
+  height: 100%;
+}
+
+.submit-order .delivery-addr .user-info {
+  padding-top: 20rpx;
+  line-height: 48rpx;
+  word-wrap: break-word;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.submit-order .delivery-addr .user-info .item {
+  font-size: 30rpx;
+  margin-right: 30rpx;
+  vertical-align: top;
+  display: inline-block;
+}
+
+.submit-order .delivery-addr .addr {
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: #999;
+  width: 90%;
+  padding-bottom: 20rpx;
+  margin-top: 15rpx;
+}
+
+.submit-order .delivery-addr .arrow {
+  width: 15rpx;
+  height: 15rpx;
+  border-top: 2rpx solid #777;
+  border-right: 2rpx solid #777;
+  transform: rotate(45deg);
+  position: absolute;
+  right: 30rpx;
+  top: 60rpx;
+}
+
+.submit-order .delivery-addr .arrow.empty {
+  top: 39rpx;
+}
+
+.addr-bg .add-addr .plus-sign-img {
+  width: 32rpx;
+  height: 32rpx;
+  font-size: 0;
+  margin-right: 10rpx;
+}
+
+.addr-bg .add-addr .plus-sign-img image {
+  width: 100%;
+  height: 100%;
+}
+
+/* 商品列表 */
+
+.prod-item {
+  background-color: #fff;
+  margin-top: 15rpx;
+  font-size: 28rpx;
+}
+
+.prod-item .item-cont .prod-pic image {
+  width: 180rpx;
+  height: 180rpx;
+}
+
+.prod-item .order-num {
+  padding: 20rpx 30rpx;
+  display: flex;
+  justify-content: space-between;
+  font-size: 28rpx;
+}
+
+.order-state {
+  display: flex;
+  align-items: center;
+}
+
+.prod-item .item-cont {
+  display: flex;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 2rpx solid #f1f1f1;
+}
+
+.prod-item .order-num .clear-btn {
+  width: 32rpx;
+  height: 32rpx;
+  font-size: 0;
+  vertical-align: top;
+  margin-top: 6rpx;
+  margin-left: 42rpx;
+  position: relative;
+}
+
+.prod-item .order-num .clear-btn::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: -10px;
+  top: 1px;
+  width: 1px;
+  height: 12px;
+  background: #ddd;
+}
+
+.prod-item .order-num .clear-btn .clear-list-btn {
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.prod-item .item-cont .prod-pic {
+  font-size: 0;
+  display: block;
+  width: 160rpx;
+  height: 160rpx;
+  overflow: hidden;
+  background: #fff;
+  margin-right: 16rpx;
+}
+
+.prod-item .item-cont .prod-pic image {
+  width: 100%;
+  height: 100%;
+}
+
+.prod-item .item-cont .prod-info {
+  margin-left: 10rpx;
+  font-size: 28rpx;
+  width: 100%;
+  position: relative;
+  height: 160rpx;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  flex: 1;
+}
+
+.prod-item .item-cont .prod-info .prodname {
+  font-size: 28rpx;
+  line-height: 40rpx;
+  max-height: 86rpx;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.prod-item .item-cont .prod-info .prod-info-cont {
+  color: #999;
+  line-height: 40rpx;
+  margin-top: 10rpx;
+  font-size: 22rpx;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.prod-item  .total-num {
+  text-align: right;
+  padding: 20rpx 30rpx;
+  font-size: 28rpx;
+}
+
+.prod-item .price-nums .prodprice {
+  position: absolute;
+  bottom: 0;
+}
+
+.prod-item  .price-nums .prodcount {
+  position: absolute;
+  bottom: 5rpx;
+  right: 0;
+  color: #999;
+  font-family: verdana;
+}
+
+.prod-item .total-num .prodprice {
+  display: inline-block;
+  color: #333;
+}
+
+.prod-item .total-num .prodcount {
+  margin-right: 20rpx;
+}
+
+/* 
+订单信息 */
+
+.order-msg {
+  background: #fff;
+  margin-top: 15rpx;
+  padding: 0 30rpx;
+  font-size: 28rpx;
+}
+
+.order-msg .msg-item {
+  border-top: 2rpx solid #f1f1f1;
+}
+
+.order-msg .msg-item:first-child {
+  border: 0;
+}
+
+.order-msg .msg-item .item {
+  position: relative;
+  display: flex;
+  padding: 16rpx 0;
+  align-items: center;
+}
+
+.order-msg .msg-item .item.payment {
+  border-top: 2rpx solid #f1f1f1;
+  color: #eb2444;
+}
+
+.order-msg .msg-item .item .item-tit {
+  line-height: 48rpx;
+}
+
+.order-msg .msg-item .item .item-txt {
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  flex: 1;
+  font-family: arial;
+  max-height: 48rpx;
+  overflow: hidden;
+  line-height: 48rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  word-break: break-all;
+}
+
+.order-msg .msg-item .item.coupon {
+  border-bottom: 2rpx solid #e1e1e1;
+}
+
+.order-msg .msg-item .item input {
+  flex: 1;
+}
+
+.order-msg .msg-item .item  .coupon-btn {
+  display: block;
+  margin: 0 30rpx;
+  line-height: 28rpx;
+  color: #999;
+}
+
+.order-msg .msg-item .item .item-txt.price {
+  text-align: right;
+}
+
+.order-msg .msg-item .item .arrow {
+  width: 15rpx;
+  height: 15rpx;
+  border-top: 2rpx solid #999;
+  border-right: 2rpx solid #999;
+  transform: rotate(45deg);
+  position: absolute;
+  right: 0rpx;
+}
+
+/* 底部栏 */
+
+.submit-order-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  max-width: 750rpx;
+  background: #fff;
+  margin: auto;
+  display: -webkit-flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 26rpx;
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.submit-order-footer .sub-order {
+  flex: 1;
+  margin: 0 30rpx;
+  line-height: 100rpx;
+  display: block;
+  text-align: left;
+  font-size: 28rpx;
+}
+
+.submit-order-footer .footer-box {
+  padding: 0 10rpx;
+  width: 200rpx;
+  background: #eb2444;
+  text-align: center;
+  line-height: 100rpx;
+  color: #fff;
+}
+
+.submit-order-footer .sub-order .item-txt .price {
+  display: inline;
+  color: #eb2444;
+  font-size: 28rpx;
+}
+
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+
+/** 优惠券弹窗 **/
+
+.popup-hide {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.popup-box {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 80%;
+  overflow: hidden;
+  background-color: #fff;
+}
+
+.popup-tit {
+  position: relative;
+  height: 46px;
+  line-height: 46px;
+  padding-left: 10px;
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+}
+
+.close {
+  color: #aaa;
+  border-radius: 12px;
+  line-height: 20px;
+  text-align: center;
+  height: 20px;
+  width: 20px;
+  font-size: 18px;
+  padding: 1px;
+  top: 10px;
+  right: 10px;
+  position: absolute;
+}
+
+.close::before {
+  content: "\2716";
+}
+
+.coupon-tabs {
+  display: flex;
+  font-size: 14px;
+  justify-content: space-around;
+  border-bottom: 1px solid #f2f2f2;
+}
+
+.coupon-tab {
+  padding: 10px 0;
+}
+
+.coupon-tab.on {
+  border-bottom: 2px solid #eb2444;
+  font-weight: 600;
+}
+
+.popup-cnt {
+  height: calc(100% - 88px);
+  overflow: auto;
+  padding: 0 10px;
+  background: #f4f4f4;
+}
+
+.coupon-ok {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  line-height: 50px;
+  font-size: 14px;
+  text-align: center;
+  box-shadow: 0px -1px 1px #ddd;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.coupon-ok text {
+  border-radius: 20px;
+  display: inline-block;
+  height: 20px;
+  line-height: 20px;
+  width: 450rpx;
+  padding: 7px;
+  background: -o-linear-gradient(right, #f45c43, #eb2444);
+  background: linear-gradient(right, #f45c43, #eb2444);
+  background: -webkit-linear-gradient(right, #f45c43, #eb2444);
+  color: #fff;
+  box-shadow: -1px 3px 3px #aaa;
+}
+
+.botm-empty {
+  height: 60px;
+}
+
+/*checkbox 选项框大小  */
+
+checkbox .wx-checkbox-input {
+  border-radius: 50%;
+  width: 35rpx;
+  height: 35rpx;
+}
+
+/*checkbox选中后样式  */
+
+checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+  background: #eb2444;
+  border-color: #eb2444;
+}
+
+/*checkbox选中后图标样式  */
+
+checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
+  text-align: center;
+  font-size: 22rpx;
+  color: #fff;
+  background: transparent;
+  transform: translate(-50%, -50%) scale(1);
+  -webkit-transform: translate(-50%, -50%) scale(1);
+}