添加Renard小程序

renard-wx/pages/comment/comment.js

+var app = getApp();
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+
+Page({
+  data: {
+    comments: [],
+    allCommentList: [],
+    picCommentList: [],
+    type: 0,
+    valueId: 0,
+    showType: 0,
+    allCount: 0,
+    hasPicCount: 0,
+    allPage: 1,
+    picPage: 1,
+    size: 20
+  },
+  getCommentCount: function () {
+    let that = this;
+    util.request(api.CommentCount, { valueId: that.data.valueId, type: that.data.type}).then(function (res) {
+      if (res.errno === 0) {
+        that.setData({
+          allCount: res.data.allCount,
+          hasPicCount: res.data.hasPicCount
+        });
+      }
+    });
+  },
+  getCommentList: function(){
+    let that = this;
+    util.request(api.CommentList, { 
+      valueId: that.data.valueId, 
+      type: that.data.type,
+      size: that.data.size,
+      page: (that.data.showType == 0 ? that.data.allPage : that.data.picPage),
+      showType: that.data.showType 
+      }).then(function (res) {
+      if (res.errno === 0) {
+
+        if (that.data.showType == 0) {
+          that.setData({
+            allCommentList: that.data.allCommentList.concat(res.data.data),
+            allPage: res.data.currentPage,
+            comments: that.data.allCommentList.concat(res.data.data)
+          });
+        } else {
+          that.setData({
+            picCommentList: that.data.picCommentList.concat(res.data.data),
+            picPage: res.data.currentPage,
+            comments: that.data.picCommentList.concat(res.data.data)
+          });
+        }
+      }
+    });
+  },
+  onLoad: function (options) {
+    // 页面初始化 options为页面跳转所带来的参数
+    this.setData({
+      type: options.type,
+      valueId: options.valueId
+    });
+    this.getCommentCount();
+    this.getCommentList();
+  },
+  onReady: function () {
+    // 页面渲染完成
+
+  },
+  onShow: function () {
+    // 页面显示
+
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+
+  },
+  switchTab: function () {
+    let that = this;
+    if (that.data.showType == 0) {
+      that.setData({
+        allCommentList: [],
+        allPage: 1,
+        comments: [],
+        showType: 1
+      });
+    } else {
+      that.setData({
+        picCommentList: [],
+        picPage: 1,
+        comments: [],
+        showType: 0
+      });
+    }
+    this.getCommentList();
+  },
+  onReachBottom: function(){
+    console.log('onPullDownRefresh');
+    if ( this.data.showType == 0) {
+
+      if (this.data.allCount / this.data.size < this.data.allPage) {
+        return false;
+      }
+
+      this.setData({
+        'allPage' : this.data.allPage + 1
+      });
+    } else {
+      if (this.data.hasPicCount / this.data.size < this.data.picPage) {
+        return false;
+      }
+
+      this.setData({
+        'picPage': this.data.picPage + 1
+      });
+    }
+
+    this.getCommentList();
+  }
+})
\ No newline at end of file

renard-wx/pages/comment/comment.json

+{
+  "navigationBarTitleText": "评价"
+}
\ No newline at end of file

renard-wx/pages/comment/comment.wxml

+<view class="comments">
+    <view class="h">
+        <view class="item {{ showType == 0 ? 'active' : ''}}" bindtap="switchTab">
+            <view class="txt">全部({{allCount}})</view>
+        </view>
+        <view class="item {{ showType == 0 ? '' : 'active'}}" bindtap="switchTab">
+            <view class="txt">有图({{hasPicCount}})</view>
+        </view>
+    </view>
+  <view class="b">
+    <view class="item" wx:for="{{comments}}" wx:key="id">
+      <view class="info">
+        <view class="user">
+          <image src="{{item.userInfo.avatarUrl}}"></image>
+          <text>{{item.userInfo.nickname}}</text>
+        </view>
+        <view class="time">{{item.addTime}}</view>
+      </view>
+      <view class="comment">{{item.content}}</view>
+      <view class="imgs" wx:if="{{item.picList.length > 0}}">
+        <image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="pitem" src="{{pitem}}"></image>
+      </view>
+      <view class="spec">
+        <!-- <text class="item">白色 2件</text> -->
+      </view>
+      <!--<view class="customer-service" wx:if="{{item.commentReplyVO}}">
+        <text class="u">小选回复：</text>
+        <text class="c">{{item.commentReplyVO.replyContent}}</text>
+      </view>-->
+    </view>
+
+  </view>
+</view>
\ No newline at end of file

renard-wx/pages/comment/comment.wxss

+.comments{
+    width: 100%;
+    height: auto;
+    padding-left:30rpx;
+    background: #fff;
+    margin: 20rpx 0;
+}
+
+.comments .h{
+    position: fixed;
+    left:0;
+    top:0;
+    z-index: 1000;
+    width: 100%;
+    display: flex;   
+    background: #fff;
+    height: 84rpx;
+    border-bottom: 1px solid rgba(0,0,0,.15);
+}
+
+.comments .h .item{
+    display: inline-block;
+    height: 82rpx;
+    width: 50%;
+    padding: 0 15rpx;
+    text-align: center;
+}
+
+.comments .h .item .txt{
+    display: inline-block;
+    height: 82rpx;
+    padding: 0 20rpx;
+    line-height: 82rpx;
+    color: #333;
+    font-size: 30rpx;
+    width: 170rpx;
+}
+
+.comments .h .item.active .txt{
+    color: #ab2b2b;
+    border-bottom: 4rpx solid #ab2b2b;
+}
+
+.comments .b{
+    margin-top: 85rpx;
+    height: auto;
+    width: 720rpx;
+}
+
+.comments .b.no-h{
+    margin-top: 0;
+}
+
+.comments .item{
+    height: auto;
+    width: 720rpx;
+    overflow: hidden;
+    border-bottom: 1px solid #d9d9d9;
+    padding-bottom: 25rpx;
+}
+
+.comments .info{
+    height: 127rpx;
+    width: 100%;
+    padding: 33rpx 0 27rpx 0;
+}
+
+.comments .user{
+    float: left;
+    width: auto;
+    height: 67rpx;
+    line-height: 67rpx;
+    font-size: 0;
+}
+
+.comments .user image{
+    float: left;
+    width: 67rpx;
+    height: 67rpx;
+    margin-right: 17rpx;
+    border-radius: 50%;
+}
+
+.comments .user text{
+    display: inline-block;
+    width: auto;
+    height: 66rpx;
+    overflow: hidden;
+    font-size: 29rpx;
+    line-height: 66rpx;
+}
+
+.comments .time{
+    display: block;
+    float: right;
+    width: auto;
+    height: 67rpx;
+    line-height: 67rpx;
+    color: #7f7f7f;
+    font-size: 25rpx;
+    margin-right: 30rpx;
+}
+
+.comments .comment{
+    width: 720rpx;
+    padding-right: 30rpx;
+    line-height: 45.8rpx;
+    font-size: 29rpx;
+    margin-bottom: 16rpx;
+}
+
+.comments .imgs{
+    width: 720rpx;
+    height: 150rpx;
+    margin-bottom: 25rpx;
+}
+
+.comments .imgs .img{
+    height: 150rpx;
+    width: 150rpx;
+    margin-right: 28rpx;
+}
+
+.comments .spec{
+    width: 720rpx;
+    height: 25rpx;
+    font-size: 24rpx;
+    color: #999;
+}
+
+.comments .spec .item{
+    color: #7f7f7f;
+    font-size: 25rpx;
+}
+
+.comments .customer-service{
+    width: 690rpx;
+    height: auto;
+    overflow: hidden;
+    margin-top: 23rpx;
+    background: rgba(0,0,0,.03);
+    padding: 21rpx;
+}
+
+
+.comments .customer-service .u{
+    font-size: 24rpx;
+    color: #333;
+    line-height: 37.5rpx;
+}
+
+.comments .customer-service .c{
+    font-size: 24rpx;
+    color: #999;
+    line-height: 37.5rpx;
+}
\ No newline at end of file

renard-wx/pages/commentPost/commentPost.js

+// 上传组件 基于https://github.com/Tencent/weui-wxss/tree/master/src/example/uploader
+var app = getApp();
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+Page({
+  data: {
+    orderId: 0,
+    type: 0,
+    valueId: 0,
+    orderGoods: {},
+    content: '',
+    stars: [0, 1, 2, 3, 4],
+    star: 5,
+    starText: '十分满意',
+    hasPicture: false,
+    picUrls: [],
+    files: []
+  },
+  chooseImage: function (e) {
+    if (this.data.files.length >= 5) {
+      util.showErrorToast('只能上传五张图片')
+      return false;
+    }
+
+    var that = this;
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success: function (res) {
+        that.setData({
+          files: that.data.files.concat(res.tempFilePaths)
+        });
+        that.upload(res);
+      }
+    })
+  },
+  upload: function (res) {
+    var that = this;
+    const uploadTask = wx.uploadFile({
+      url: api.StorageUpload,
+      filePath: res.tempFilePaths[0],
+      name: 'file',
+      success: function (res) {
+        var _res = JSON.parse(res.data);
+        if (_res.errno === 0) {
+          var url = _res.data.url
+          that.data.picUrls.push(url)
+          that.setData({
+            hasPicture: true,
+            picUrls: that.data.picUrls
+          })
+        }
+      },
+      fail: function (e) {
+        wx.showModal({
+          title: '错误',
+          content: '上传失败',
+          showCancel: false
+        })
+      },
+    })
+
+    uploadTask.onProgressUpdate((res) => {
+      console.log('上传进度', res.progress)
+      console.log('已经上传的数据长度', res.totalBytesSent)
+      console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
+    })
+
+  },
+  previewImage: function (e) {
+    wx.previewImage({
+      current: e.currentTarget.id, // 当前显示图片的http链接
+      urls: this.data.files // 需要预览的图片http链接列表
+    })
+  },
+  selectRater: function (e) {
+    var star = e.currentTarget.dataset.star + 1;
+    var starText;
+    if (star == 1) {
+      starText = '很差';
+    }
+    else if (star == 2) {
+      starText = '不太满意';
+    }
+    else if (star == 3) {
+      starText = '满意';
+    }
+    else if (star == 4) {
+      starText = '比较满意';
+    }
+    else {
+      starText = '十分满意'
+    }
+    this.setData({
+      star: star,
+      starText: starText
+    })
+
+  },
+  onLoad: function (options) {
+    var that = this;
+    that.setData({
+      orderId: options.orderId,
+      type: options.type,
+      valueId: options.valueId
+    });
+    this.getOrderComment();
+  },
+  getOrderComment: function () {
+    let that = this;
+    util.request(api.OrderComment, {
+      orderId: that.data.orderId, goodsId: that.data.valueId
+    }).then(function (res) {
+      if (res.errno === 0) {
+        that.setData({
+          orderGoods: res.data,
+        });
+      }
+    });
+  },
+  onClose: function () {
+    wx.navigateBack();
+  },
+  onPost: function () {
+    let that = this;
+
+    if (!this.data.content) {
+      util.showErrorToast('请填写评论')
+      return false;
+    }
+
+    util.request(api.CommentPost, {
+      type: that.data.type,
+      valueId: that.data.valueId,
+      content: that.data.content,
+      star: that.data.star,
+      hasPicture: that.data.hasPicture,
+      picUrls: that.data.picUrls
+    }, 'POST').then(function (res) {
+      if (res.errno === 0) {
+        wx.showToast({
+          title: '评论成功',
+          complete: function () {
+            wx.navigateBack();
+          }
+        })
+      }
+    });
+  },
+  bindInputValue(event) {
+
+    let value = event.detail.value;
+
+    //判断是否超过140个字符
+    if (value && value.length > 140) {
+      return false;
+    }
+
+    this.setData({
+      content: event.detail.value,
+    })
+  },
+  onReady: function () {
+
+  },
+  onShow: function () {
+    // 页面显示
+
+  },
+  onHide: function () {
+    // 页面隐藏
+
+  },
+  onUnload: function () {
+    // 页面关闭
+
+  }
+})
\ No newline at end of file

renard-wx/pages/commentPost/commentPost.json

+{
+  "navigationBarTitleText": "评价"
+}
\ No newline at end of file

renard-wx/pages/commentPost/commentPost.wxml

+<view class="container">
+  <view class="post-comment">
+    <view class="goods">
+      <view class="img">
+        <image src="{{orderGoods.picUrl}}"></image>
+      </view>
+      <view class="info">
+        <view class="t">
+          <text class="name">{{orderGoods.goodsName}} x{{orderGoods.number}}</text>
+        </view>
+        <view class="attr">{{orderGoods.goodsSpecificationValues}}</view>
+      </view>
+    </view>
+    <view class="rater">
+      <text class="rater-title">评分</text>
+      <block wx:for="{{stars}}" wx:key="*this" wx:for-item="item">
+        <image src="/static/images/icon_collect_checked.png" bindtap="selectRater" data-star="{{item}}" wx:if="{{item < star}}"></image>
+        <image src="/static/images/icon_collect.png" bindtap="selectRater" data-star="{{item}}" wx:else></image>
+      </block>
+      <text class="rater-desc">{{starText}}</text>
+    </view>
+    <view class="input-box">
+      <textarea class="content" focus="true" bindinput="bindInputValue" maxlength="140" placeholder="留言经过筛选后，对所有人可见" />
+      <text class="count">{{140 - content.length}}</text>
+    </view>
+
+    <view class="weui-uploader">
+      <view class="weui-uploader__hd">
+        <view class="weui-uploader__title">图片上传</view>
+        <view class="weui-uploader__info">{{picUrls.length}}/{{files.length}}</view>
+      </view>
+      <view class="weui-uploader__bd">
+        <view class="weui-uploader__files" id="uploaderFiles">
+          <block wx:for="{{files}}" wx:key="*this">
+            <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
+              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
+            </view>
+            <!-- <view class="weui-uploader__file weui-uploader__file_status" bindtap="previewImage" id="{{item}}">
+              <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
+              <view class="weui-uploader__file-content">50%</view>
+            </view> -->
+          </block>
+          <view class="weui-uploader__input-box">
+            <view class="weui-uploader__input" bindtap="chooseImage"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="btns">
+      <view class="close" bindtap="onClose">取消</view>
+      <view class="post" bindtap="onPost">发表</view>
+    </view>
+  </view>
+</view>
\ No newline at end of file

renard-wx/pages/commentPost/commentPost.wxss

+page, .container {
+  height: 100%;
+  background: #f4f4f4;
+}
+
+.post-comment {
+  width: 750rpx;
+  height: auto;
+  overflow: hidden;
+  padding: 30rpx;
+  background: #fff;
+}
+
+.post-comment .goods {
+  display: flex;
+  align-items: center;
+  height: 199rpx;
+  margin-left: 31.25rpx;
+}
+
+.post-comment .goods .img {
+  height: 145.83rpx;
+  width: 145.83rpx;
+  background: #f4f4f4;
+}
+
+.post-comment .goods .img image {
+  height: 145.83rpx;
+  width: 145.83rpx;
+}
+
+.post-comment .goods .info {
+  height: 145.83rpx;
+  flex: 1;
+  padding-left: 20rpx;
+}
+
+.post-comment .goods .name {
+  margin-top: 30rpx;
+  display: block;
+  height: 44rpx;
+  line-height: 44rpx;
+  color: #333;
+  font-size: 30rpx;
+}
+
+.post-comment .goods .number {
+  display: block;
+  height: 37rpx;
+  line-height: 37rpx;
+  color: #666;
+  font-size: 25rpx;
+}
+
+.post-comment .goods .status {
+  width: 105rpx;
+  color: #b4282d;
+  font-size: 25rpx;
+}
+
+.post-comment .rater {
+  display: flex;
+  flex-direction: row;
+  height: 55rpx;
+}
+
+.post-comment .rater .rater-title {
+  font-size: 29rpx;
+  padding-right: 10rpx;
+}
+
+.post-comment .rater image {
+  padding-left: 5rpx;
+  height: 50rpx;
+  width: 50rpx;
+}
+
+.post-comment .rater .rater-desc {
+  font-size: 29rpx;
+  padding-left: 10rpx;
+}
+
+.post-comment .input-box {
+  height: 337.5rpx;
+  width: 690rpx;
+  position: relative;
+  background: #fff;
+}
+
+.post-comment .input-box .content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  background: #fff;
+  font-size: 29rpx;
+  border: 5px solid #f4f4f4;
+  height: 300rpx;
+  width: 650rpx;
+  padding: 20rpx;
+}
+
+.post-comment .input-box .count {
+  position: absolute;
+  bottom: 20rpx;
+  right: 20rpx;
+  display: block;
+  height: 30rpx;
+  width: 50rpx;
+  font-size: 29rpx;
+  color: #999;
+}
+
+.post-comment .btns {
+  height: 108rpx;
+}
+
+.post-comment .close {
+  float: left;
+  height: 108rpx;
+  line-height: 108rpx;
+  text-align: left;
+  color: #666;
+  padding: 0 30rpx;
+}
+
+.post-comment .post {
+  float: right;
+  height: 108rpx;
+  line-height: 108rpx;
+  text-align: right;
+  padding: 0 30rpx;
+}
+
+.weui-uploader {
+  margin-top: 50rpx;
+}
+
+.weui-uploader__hd {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  padding-bottom: 10px;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.weui-uploader__title {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+.weui-uploader__info {
+  color: #b2b2b2;
+}
+
+.weui-uploader__bd {
+  margin-bottom: -4px;
+  margin-right: -9px;
+  overflow: hidden;
+}
+
+.weui-uploader__file {
+  float: left;
+  margin-right: 9px;
+  margin-bottom: 9px;
+}
+
+.weui-uploader__img {
+  display: block;
+  width: 79px;
+  height: 79px;
+}
+
+.weui-uploader__file_status {
+  position: relative;
+}
+
+.weui-uploader__file_status:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.weui-uploader__file-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+
+.weui-uploader__input-box {
+  float: left;
+  position: relative;
+  margin-right: 9px;
+  margin-bottom: 9px;
+  width: 77px;
+  height: 77px;
+  border: 1px solid #d9d9d9;
+}
+
+.weui-uploader__input-box:after, .weui-uploader__input-box:before {
+  content: " ";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background-color: #d9d9d9;
+}
+
+.weui-uploader__input-box:before {
+  width: 2px;
+  height: 39.5px;
+}
+
+.weui-uploader__input-box:after {
+  width: 39.5px;
+  height: 2px;
+}
+
+.weui-uploader__input-box:active {
+  border-color: #999;
+}
+
+.weui-uploader__input-box:active:after, .weui-uploader__input-box:active:before {
+  background-color: #999;
+}
+
+.weui-uploader__input {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}

renard-wx/pages/goods/goods.js

+import Notify from '../../components/notify/index';
+var app = getApp();
+var WxParse = require('../../lib/wxParse/wxParse.js');
+var util = require('../../utils/util.js');
+var api = require('../../config/api.js');
+var user = require('../../utils/user.js');
+
+Page({
+ data: {
+  id: 0,
+  goods: {},
+  groupon: [], //该商品支持的团购规格
+  grouponLink: {}, //参与的团购
+  attribute: [],
+  issueList: [],
+  comment: [],
+  brand: {},
+  specificationList: [],
+  productList: [],
+  relatedGoods: [],
+  cartGoodsCount: 0,
+  userHasCollect: 0,
+  number: 1,
+  checkedSpecText: '规格数量选择',
+  tmpSpecText: '请选择规格数量',
+  checkedSpecPrice: 0,
+  openAttr: false,
+  noCollectImage: '/static/images/icon_collect.png',
+  hasCollectImage: '/static/images/icon_collect_checked.png',
+  collectImage: '/static/images/icon_collect.png',
+  shareImage: '',
+  isGroupon: false, //标识是否是一个参团购买
+  soldout: false
+ },
+
+ // 页面分享
+ onShareAppMessage: function() {
+  let that = this;
+  return {
+   title: that.data.goods.name,
+   desc: '唯爱与美食不可辜负',
+   path: '/pages/index/index?goodId=' + this.data.id
+  }
+ },
+
+ showShare: function() {
+  this.sharePop.togglePopup();
+ },
+
+ //从分享的团购进入
+ getGrouponInfo: function(grouponId) {
+  let that = this;
+  util.request(api.GroupOnJoin, {
+   grouponId: grouponId
+  }).then(function(res) {
+   if (res.errno === 0) {
+    that.setData({
+     grouponLink: res.data.groupon,
+     id: res.data.goods.id
+    });
+    //获取商品详情
+    that.getGoodsInfo();
+   }
+  });
+ },
+
+ // 获取商品信息
+ getGoodsInfo: function() {
+  wx.showLoading({
+   title: '加载中',
+  });
+
+  setTimeout(function() {
+   wx.hideLoading()
+  }, 2000);
+
+  let that = this;
+  util.request(api.GoodsDetail, {
+   id: that.data.id
+  }).then(function(res) {
+   if (res.errno === 0) {
+
+    let _specificationList = res.data.specificationList
+    // 如果仅仅存在一种货品，那么商品页面初始化时默认checked
+    if (_specificationList.length == 1) {
+     if (_specificationList[0].valueList.length == 1) {
+      _specificationList[0].valueList[0].checked = true
+
+      // 如果仅仅存在一种货品，那么商品价格应该和货品价格一致
+      // 这里检测一下
+      let _productPrice = res.data.productList[0].price;
+      let _goodsPrice = res.data.info.retailPrice;
+      if (_productPrice != _goodsPrice) {
+       console.error('商品数量价格和货品不一致');
+      }
+
+      that.setData({
+       checkedSpecText: _specificationList[0].valueList[0].value,
+       tmpSpecText: '已选择：' + _specificationList[0].valueList[0].value,
+      });
+     }
+    }
+
+    that.setData({
+     goods: res.data.info,
+     attribute: res.data.attribute,
+     issueList: res.data.issue,
+     comment: res.data.comment,
+     brand: res.data.brand,
+     specificationList: res.data.specificationList,
+     productList: res.data.productList,
+     userHasCollect: res.data.userHasCollect,
+     shareImage: res.data.shareImage,
+     checkedSpecPrice: res.data.info.retailPrice,
+     groupon: res.data.groupon
+    });
+
+    //如果是通过分享的团购参加团购，则团购项目应该与分享的一致并且不可更改
+    if (that.data.isGroupon) {
+     let groupons = that.data.groupon;
+     for (var i = 0; i < groupons.length; i++) {
+      if (groupons[i].id != that.data.grouponLink.rulesId) {
+       groupons.splice(i, 1);
+      }
+     }
+     groupons[0].checked = true;
+     //重设团购规格
+     that.setData({
+      groupon: groupons
+     });
+
+    }
+
+    if (res.data.userHasCollect == 1) {
+     that.setData({
+      collectImage: that.data.hasCollectImage
+     });
+    } else {
+     that.setData({
+      collectImage: that.data.noCollectImage
+     });
+    }
+
+    WxParse.wxParse('goodsDetail', 'html', res.data.info.detail, that);
+    //获取推荐商品
+    that.getGoodsRelated();
+    wx.hideLoading();
+   }
+  });
+ },
+
+ // 获取推荐商品
+ getGoodsRelated: function() {
+  let that = this;
+  util.request(api.GoodsRelated, {
+   id: that.data.id
+  }).then(function(res) {
+   if (res.errno === 0) {
+    that.setData({
+     relatedGoods: res.data.goodsList,
+    });
+   }
+  });
+ },
+
+ // 团购选择
+ clickGroupon: function(event) {
+  let that = this;
+
+  //参与团购，不可更改选择
+  if (that.data.isGroupon) {
+   return;
+  }
+
+  let specName = event.currentTarget.dataset.name;
+  let specValueId = event.currentTarget.dataset.valueId;
+
+  let _grouponList = this.data.groupon;
+  for (let i = 0; i < _grouponList.length; i++) {
+   if (_grouponList[i].id == specValueId) {
+    if (_grouponList[i].checked) {
+     _grouponList[i].checked = false;
+    } else {
+     _grouponList[i].checked = true;
+    }
+   } else {
+    _grouponList[i].checked = false;
+   }
+  }
+
+  this.setData({
+   groupon: _grouponList,
+  });
+ },
+
+ // 规格选择
+ clickSkuValue: function(event) {
+  let that = this;
+  let specName = event.currentTarget.dataset.name;
+  let specValueId = event.currentTarget.dataset.valueId;
+
+  //判断是否可以点击
+
+  //TODO 性能优化，可在wx:for中添加index，可以直接获取点击的属性名和属性值，不用循环
+  let _specificationList = this.data.specificationList;
+  for (let i = 0; i < _specificationList.length; i++) {
+   if (_specificationList[i].name === specName) {
+    for (let j = 0; j < _specificationList[i].valueList.length; j++) {
+     if (_specificationList[i].valueList[j].id == specValueId) {
+      //如果已经选中，则反选
+      if (_specificationList[i].valueList[j].checked) {
+       _specificationList[i].valueList[j].checked = false;
+      } else {
+       _specificationList[i].valueList[j].checked = true;
+      }
+     } else {
+      _specificationList[i].valueList[j].checked = false;
+     }
+    }
+   }
+  }
+  this.setData({
+   specificationList: _specificationList,
+  });
+  //重新计算spec改变后的信息
+  this.changeSpecInfo();
+
+  //重新计算哪些值不可以点击
+ },
+
+ //获取选中的团购信息
+ getCheckedGrouponValue: function() {
+  let checkedValues = {};
+  let _grouponList = this.data.groupon;
+  for (let i = 0; i < _grouponList.length; i++) {
+   if (_grouponList[i].checked) {
+    checkedValues = _grouponList[i];
+   }
+  }
+
+  return checkedValues;
+ },
+
+ //获取选中的规格信息
+ getCheckedSpecValue: function() {
+  let checkedValues = [];
+  let _specificationList = this.data.specificationList;
+  for (let i = 0; i < _specificationList.length; i++) {
+   let _checkedObj = {
+    name: _specificationList[i].name,
+    valueId: 0,
+    valueText: ''
+   };
+   for (let j = 0; j < _specificationList[i].valueList.length; j++) {
+    if (_specificationList[i].valueList[j].checked) {
+     _checkedObj.valueId = _specificationList[i].valueList[j].id;
+     _checkedObj.valueText = _specificationList[i].valueList[j].value;
+    }
+   }
+   checkedValues.push(_checkedObj);
+  }
+
+  return checkedValues;
+ },
+
+ //判断规格是否选择完整
+ isCheckedAllSpec: function() {
+  return !this.getCheckedSpecValue().some(function(v) {
+   if (v.valueId == 0) {
+    return true;
+   }
+  });
+ },
+
+ soldoutNotify: function() {
+  Notify("商品已售完");
+ },
+
+ getCheckedSpecKey: function() {
+  let checkedValue = this.getCheckedSpecValue().map(function(v) {
+   return v.valueText;
+  });
+  return checkedValue;
+ },
+
+ // 规格改变时，重新计算价格及显示信息
+ changeSpecInfo: function() {
+  let checkedNameValue = this.getCheckedSpecValue();
+
+  //设置选择的信息
+  let checkedValue = checkedNameValue.filter(function(v) {
+   if (v.valueId != 0) {
+    return true;
+   } else {
+    return false;
+   }
+  }).map(function(v) {
+   return v.valueText;
+  });
+  if (checkedValue.length > 0) {
+   this.setData({
+    tmpSpecText: checkedValue.join('　')
+   });
+  } else {
+   this.setData({
+    tmpSpecText: '请选择规格数量'
+   });
+  }
+
+  if (this.isCheckedAllSpec()) {
+   this.setData({
+    checkedSpecText: this.data.tmpSpecText
+   });
+
+   // 规格所对应的货品选择以后
+   let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
+   if (!checkedProductArray || checkedProductArray.length <= 0) {
+    this.setData({
+     soldout: true
+    });
+    this.soldoutNotify();
+    console.error('规格所对应货品不存在');
+    return;
+   }
+
+   let checkedProduct = checkedProductArray[0];
+   if (checkedProduct.number > 0) {
+    this.setData({
+     checkedSpecPrice: checkedProduct.price,
+     soldout: false
+    });
+    this.notify.hide();
+   } else {
+    this.setData({
+     checkedSpecPrice: this.data.goods.retailPrice,
+     soldout: true
+    });
+    this.soldoutNotify();
+   }
+
+  } else {
+   this.setData({
+    checkedSpecText: '规格数量选择',
+    checkedSpecPrice: this.data.goods.retailPrice,
+    soldout: false
+   });
+   this.notify.hide();
+  }
+
+ },
+
+ // 获取选中的产品（根据规格）
+ getCheckedProductItem: function(key) {
+  return this.data.productList.filter(function(v) {
+   if (v.specifications.toString() == key.toString()) {
+    return true;
+   } else {
+    return false;
+   }
+  });
+ },
+
+ onLoad: function(options) {
+  // 页面初始化 options为页面跳转所带来的参数
+  if (options.id) {
+   this.setData({
+    id: parseInt(options.id)
+   });
+   this.getGoodsInfo();
+  }
+
+  if (options.grouponId) {
+   this.setData({
+    isGroupon: true,
+   });
+   this.getGrouponInfo(options.grouponId);
+  }
+ },
+
+ onShow: function() {
+  // 页面显示
+  var that = this;
+  util.request(api.CartGoodsCount).then(function(res) {
+   if (res.errno === 0) {
+    that.setData({
+     cartGoodsCount: res.data
+    });
+   }
+  });
+ },
+
+ //添加或是取消收藏
+ addCollectOrNot: function() {
+  let that = this;
+  util.request(api.CollectAddOrDelete, {
+    type: 0,
+    valueId: this.data.id
+   }, "POST")
+   .then(function(res) {
+    let _res = res;
+    if (_res.errno == 0) {
+     if (_res.data.type == 'add') {
+      that.setData({
+       collectImage: that.data.hasCollectImage
+      });
+     } else {
+      that.setData({
+       collectImage: that.data.noCollectImage
+      });
+     }
+
+    } else {
+     wx.showToast({
+      image: '/static/images/icon_error.png',
+      title: _res.errmsg,
+      mask: true
+     });
+    }
+
+   });
+
+ },
+
+ //立即购买（先自动加入购物车）
+ addFast: function() {
+  var that = this;
+  if (this.data.openAttr == false) {
+   //打开规格选择窗口
+   this.setData({
+    openAttr: !this.data.openAttr
+   });
+  } else {
+
+   //提示选择完整规格
+   if (!this.isCheckedAllSpec()) {
+    wx.showToast({
+     image: '/static/images/icon_error.png',
+     title: '请选择完整规格'
+    });
+    return false;
+   }
+
+   //根据选中的规格，判断是否有对应的sku信息
+   let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
+   if (!checkedProductArray || checkedProductArray.length <= 0) {
+    //找不到对应的product信息，提示没有库存
+    wx.showToast({
+     image: '/static/images/icon_error.png',
+     title: '没有库存'
+    });
+    return false;
+   }
+
+   let checkedProduct = checkedProductArray[0];
+   //验证库存
+   if (checkedProduct.number <= 0) {
+    wx.showToast({
+     image: '/static/images/icon_error.png',
+     title: '没有库存'
+    });
+    return false;
+   }
+
+   //验证团购是否有效
+   let checkedGroupon = this.getCheckedGrouponValue();
+
+   //立即购买
+   util.request(api.CartFastAdd, {
+     goodsId: this.data.goods.id,
+     number: this.data.number,
+     productId: checkedProduct.id
+    }, "POST")
+    .then(function(res) {
+     if (res.errno == 0) {
+      // 如果storage中设置了cartId，则是立即购买，否则是购物车购买
+      try {
+       wx.setStorageSync('cartId', res.data);
+       wx.setStorageSync('grouponRulesId', checkedGroupon.id);
+       wx.setStorageSync('grouponLinkId', that.data.grouponLink.id);
+       wx.navigateTo({
+        url: '/pages/shopping/checkout/checkout'
+       })
+      } catch (e) {}
+
+     } else {
+      wx.showToast({
+       image: '/static/images/icon_error.png',
+       title: res.errmsg,
+       mask: true
+      });
+     }
+    });
+  }
+
+
+ },
+
+ //添加到购物车
+ addToCart: function() {
+  var that = this;
+  if (this.data.openAttr == false) {
+   //打开规格选择窗口
+   this.setData({
+    openAttr: !this.data.openAttr
+   });
+  } else {
+
+   //提示选择完整规格
+   if (!this.isCheckedAllSpec()) {
+    wx.showToast({
+     image: '/static/images/icon_error.png',
+     title: '请选择完整规格'
+    });
+    return false;
+   }
+
+   //根据选中的规格，判断是否有对应的sku信息
+   let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey());
+   if (!checkedProductArray || checkedProductArray.length <= 0) {
+    //找不到对应的product信息，提示没有库存
+    wx.showToast({
+     image: '/static/images/icon_error.png',
+     title: '没有库存'
+    });
+    return false;
+   }
+
+   let checkedProduct = checkedProductArray[0];
+   //验证库存
+   if (checkedProduct.number <= 0) {
+    wx.showToast({
+     image: '/static/images/icon_error.png',
+     title: '没有库存'
+    });
+    return false;
+   }
+
+   //添加到购物车
+   util.request(api.CartAdd, {
+     goodsId: this.data.goods.id,
+     number: this.data.number,
+     productId: checkedProduct.id
+    }, "POST")
+    .then(function(res) {
+     let _res = res;
+     if (_res.errno == 0) {
+      wx.showToast({
+       title: '添加成功'
+      });
+      that.setData({
+       openAttr: !that.data.openAttr,
+       cartGoodsCount: _res.data
+      });
+      if (that.data.userHasCollect == 1) {
+       that.setData({
+        collectImage: that.data.hasCollectImage
+       });
+      } else {
+       that.setData({
+        collectImage: that.data.noCollectImage
+       });
+      }
+     } else {
+      wx.showToast({
+       image: '/static/images/icon_error.png',
+       title: _res.errmsg,
+       mask: true
+      });
+     }
+
+    });
+  }
+
+ },
+
+ cutNumber: function() {
+  this.setData({
+   number: (this.data.number - 1 > 1) ? this.data.number - 1 : 1
+  });
+ },
+ addNumber: function() {
+  this.setData({
+   number: this.data.number + 1
+  });
+ },
+ onHide: function() {
+  // 页面隐藏
+
+ },
+ onUnload: function() {
+  // 页面关闭
+
+ },
+ switchAttrPop: function() {
+  if (this.data.openAttr == false) {
+   this.setData({
+    openAttr: !this.data.openAttr
+   });
+  }
+ },
+
+ closeAttr: function() {
+  this.setData({
+   openAttr: false,
+  });
+ },
+ openCartPage: function() {
+  wx.switchTab({
+   url: '/pages/cart/cart'
+  });
+ },
+ onReady: function() {
+  // 页面渲染完成
+  this.sharePop = this.selectComponent("#sharePop");
+  this.notify = this.selectComponent("#van-notify");
+ },
+ // 下拉刷新
+ onPullDownRefresh() {
+  wx.showNavigationBarLoading() //在标题栏中显示加载
+  this.getGoodsInfo();
+  wx.hideNavigationBarLoading() //完成停止加载
+  wx.stopPullDownRefresh() //停止下拉刷新
+ },
+ //根据已选的值，计算其它值的状态
+ setSpecValueStatus: function() {
+ },
+})
\ No newline at end of file

renard-wx/pages/goods/goods.json

+{
+ "navigationBarTitleText": "商品详情",
+ "usingComponents": {
+  "sharePop": "/components/sharePop/sharePop",
+  "goodList": "/components/goodList/goodList",
+  "van-notify": "../../components/notify/index"
+ }
+}
\ No newline at end of file

renard-wx/pages/goods/goods.wxml

+<view class="container">
+ <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+  <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
+   <image src="{{item}}" background-size="cover"></image>
+  </swiper-item>
+ </swiper>
+
+ <!-- 商品信息 -->
+ <view class="goods-info">
+  <view class="c">
+   <text class="name">{{goods.name}}</text>
+   <text class="desc">{{goods.brief}}</text>
+   <view class="price">
+    <view class="counterPrice">原价：￥{{goods.counterPrice}}</view>
+    <view class="retailPrice">现价：￥{{checkedSpecPrice}}</view>
+   </view>
+
+   <view class="brand" wx:if="{{brand.name}}">
+    <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
+     <text>{{brand.name}}</text>
+    </navigator>
+   </view>
+  </view>
+ </view>
+
+ <!-- 规格框体 -->
+ <view class="section-nav section-attr" bindtap="switchAttrPop">
+  <view class="t">{{checkedSpecText}}</view>
+  <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
+ </view>
+
+ <view class="goods-attr">
+  <view class="t">商品参数</view>
+  <view class="l">
+   <view class="item" wx:for="{{attribute}}" wx:key="name">
+    <text class="left">{{item.attribute}}</text>
+    <text class="right">{{item.value}}</text>
+   </view>
+  </view>
+ </view>
+
+ <view class="detail">
+  <import src="/lib/wxParse/wxParse.wxml" />
+  <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
+ </view>
+
+ <view class="common-problem">
+  <view class="h">
+   <view class="line"></view>
+   <text class="title">常见问题</text>
+  </view>
+  <view class="b">
+   <view class="item" wx:for="{{issueList}}" wx:key="id">
+    <view class="question-box">
+     <text class="spot"></text>
+     <text class="question">{{item.question}}</text>
+    </view>
+    <view class="answer">
+     {{item.answer}}
+    </view>
+   </view>
+  </view>
+ </view>
+
+ <!-- 大家都在看 -->
+ <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
+  <view class="h">
+   <view class="line"></view>
+   <text class="title">大家都在看</text>
+  </view>
+  <goodList goods="{{relatedGoods}}"></goodList>
+ </view>
+</view>
+
+<!-- 规格选择界面 -->
+<view class="attr-pop-box" hidden="{{!openAttr}}">
+ <view class="attr-pop">
+  <view class="close" bindtap="closeAttr">
+   <image class="icon" src="/static/images/icon_close.png"></image>
+  </view>
+  <view class="img-info">
+   <image class="img" src="{{goods.picUrl}}"></image>
+   <view class="info">
+    <view class="c">
+     <view class="p">价格：￥{{checkedSpecPrice}}</view>
+     <view class="a">{{tmpSpecText}}</view>
+    </view>
+   </view>
+  </view>
+
+  <!-- 规格列表 -->
+  <view class="spec-con">
+   <view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
+    <view class="name">{{item.name}}</view>
+    <view class="values">
+     <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">{{vitem.value}}</view>
+    </view>
+   </view>
+
+   <view class="spec-con" wx:if="{{groupon.length > 0}}">
+    <view class="spec-item">
+     <view class="name">团购立减</view>
+     <view class="values">
+      <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickGroupon" wx:for="{{groupon}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">￥-{{vitem.discount}} ({{vitem.discountMember}}人)</view>
+     </view>
+    </view>
+   </view>
+
+   <!-- 数量 -->
+   <view class="number-item">
+    <view class="name">数量</view>
+    <view class="selnum">
+     <view class="cut" bindtap="cutNumber">-</view>
+     <input value="{{number}}" class="number" disabled="true" type="number" />
+     <view class="add" bindtap="addNumber">+</view>
+    </view>
+   </view>
+
+  </view>
+ </view>
+</view>
+
+<!-- 联系客服 -->
+<view class="contact">
+ <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
+ </contact-button>
+</view>
+
+<!-- 顶部提示 -->
+<van-notify id="van-notify" />
+
+<!-- 分享框体界面 -->
+<sharePop id="sharePop" bottom="80" url="{{shareImage}}"></sharePop>
+
+<!-- 底部按钮 -->
+<view class="bottom-btn">
+ <view class="l l-collect" bindtap="showShare" wx:if="{{!isGroupon}}">
+  <image class="icon" src="../../images/goods-share.png"/>
+ </view>
+ <view class="l l-cart" wx:if="{{!isGroupon}}">
+  <view class="box">
+   <text class="cart-count">{{cartGoodsCount}}</text>
+   <image bindtap="openCartPage" class="icon" src="/static/images/ic_menu_shoping_nor.png"></image>
+  </view>
+ </view>
+ <view class="r" bindtap="addToCart" wx:if="{{!soldout}}" wx:if="{{!isGroupon}}">加入购物车</view>
+ <view class="c" bindtap="addFast" wx:if="{{!soldout}}">{{isGroupon?'参加团购':'立即购买'}}</view>
+ <view class="n" wx:if="{{soldout}}">商品已售空</view>
+</view>
\ No newline at end of file

renard-wx/pages/goods/goods.wxss

+.container {
+ margin-bottom: 100rpx;
+}
+
+.goodsimgs {
+ width: 750rpx;
+ height: 750rpx;
+}
+
+.goodsimgs image {
+ width: 750rpx;
+ height: 750rpx;
+}
+
+.service-policy {
+ width: 100%;
+ height: 96rpx;
+ /* background: #d3b676; */
+ border: 2px solid #fff;
+ /* align-items: center; */
+}
+
+.goods-info {
+ width: 750rpx;
+ /* height: 406rpx; */
+ overflow: hidden;
+ background: #fff;
+}
+
+.goods-info .c {
+ display: block;
+ width: 718.75rpx;
+ height: 100%;
+ margin-left: 31.25rpx;
+ padding: 38rpx 31.25rpx 38rpx 0;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.goods-info .c text {
+ display: block;
+ width: 687.5rpx;
+ text-align: center;
+}
+
+.goods-info .name {
+ height: 64rpx;
+ /* width: 620rpx; */
+ font-size: 41rpx;
+}
+
+.goods-info .desc {
+ height: 43rpx;
+ margin-bottom: 30rpx;
+ font-size: 24rpx;
+ line-height: 36rpx;
+ color: #999;
+}
+
+.goods-info .price {
+ height: 50rpx;
+ align-content: center;
+}
+
+.goods-info .counterPrice {
+ float: left;
+ padding-left: 120rpx;
+ text-decoration: line-through;
+ font-size: 30rpx;
+ color: #999;
+}
+
+.goods-info .retailPrice {
+ /* float: right; */
+ padding-left: 60rpx;
+ font-size: 30rpx;
+ color: #a78845;
+}
+
+.goods-info .brand {
+ margin-top: 23rpx;
+ min-height: 40rpx;
+ text-align: center;
+}
+
+.goods-info .brand text {
+ display: inline-block;
+ width: auto;
+ padding: 2px 30rpx 2px 10.5rpx;
+ line-height: 35.5rpx;
+ border: 1px solid #a78845;
+ font-size: 28rpx;
+ color: #a78845;
+ border-radius: 4px;
+ background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
+ background-size: 10.75rpx 18.75rpx;
+}
+
+.section-nav {
+ width: 750rpx;
+ height: 108rpx;
+ background: #fff;
+ margin-bottom: 20rpx;
+}
+
+.section-nav .t {
+ float: left;
+ width: 600rpx;
+ height: 108rpx;
+ line-height: 108rpx;
+ font-size: 29rpx;
+ color: #a78845;
+ margin-left: 31.25rpx;
+}
+
+.section-nav .i {
+ float: right;
+ width: 52rpx;
+ height: 52rpx;
+ margin-right: 16rpx;
+ margin-top: 28rpx;
+}
+
+.section-act .t {
+ float: left;
+ display: flex;
+ align-items: center;
+ width: 600rpx;
+ height: 108rpx;
+ overflow: hidden;
+ line-height: 108rpx;
+ font-size: 29rpx;
+ color: #999;
+ margin-left: 31.25rpx;
+}
+
+.section-act .label {
+ color: #999;
+}
+
+.section-act .tag {
+ display: flex;
+ align-items: center;
+ padding: 0 10rpx;
+ border-radius: 3px;
+ height: 37rpx;
+ width: auto;
+ color: #a78845;
+ overflow: hidden;
+ border: 1px solid #a78845;
+ font-size: 25rpx;
+ margin: 0 10rpx;
+}
+
+.section-act .text {
+ display: flex;
+ align-items: center;
+ height: 37rpx;
+ width: auto;
+ overflow: hidden;
+ color: #a78845;
+ font-size: 29rpx;
+}
+
+.comments {
+ width: 100%;
+ height: auto;
+ padding-left: 30rpx;
+ background: #fff;
+ margin: 20rpx 0;
+}
+
+.comments .h {
+ height: 102.5rpx;
+ line-height: 100.5rpx;
+ width: 718.75rpx;
+ padding-right: 16rpx;
+ border-bottom: 1px solid #d9d9d9;
+}
+
+.comments .h .t {
+ display: block;
+ float: left;
+ width: 50%;
+ font-size: 38.5rpx;
+ color: #333;
+}
+
+.comments .h .i {
+ display: block;
+ float: right;
+ width: 164rpx;
+ height: 100.5rpx;
+ line-height: 100.5rpx;
+ background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
+ background-size: 52rpx;
+}
+
+.comments .b {
+ height: auto;
+ width: 720rpx;
+}
+
+.comments .item {
+ height: auto;
+ width: 720rpx;
+ overflow: hidden;
+}
+
+.comments .info {
+ height: 127rpx;
+ width: 100%;
+ padding: 33rpx 0 27rpx 0;
+}
+
+.comments .user {
+ float: left;
+ width: auto;
+ height: 67rpx;
+ line-height: 67rpx;
+ font-size: 0;
+}
+
+.comments .user image {
+ float: left;
+ width: 67rpx;
+ height: 67rpx;
+ margin-right: 17rpx;
+ border-radius: 50%;
+}
+
+.comments .user text {
+ display: inline-block;
+ width: auto;
+ height: 66rpx;
+ overflow: hidden;
+ font-size: 29rpx;
+ line-height: 66rpx;
+}
+
+.comments .time {
+ display: block;
+ float: right;
+ width: auto;
+ height: 67rpx;
+ line-height: 67rpx;
+ color: #7f7f7f;
+ font-size: 25rpx;
+ margin-right: 30rpx;
+}
+
+.comments .content {
+ width: 720rpx;
+ padding-right: 30rpx;
+ line-height: 45.8rpx;
+ font-size: 29rpx;
+ margin-bottom: 24rpx;
+}
+
+.comments .imgs {
+ width: 720rpx;
+ height: auto;
+ margin-bottom: 25rpx;
+}
+
+.comments .imgs .img {
+ height: 150rpx;
+ width: 150rpx;
+ margin-right: 28rpx;
+}
+
+.comments .spec {
+ width: 720rpx;
+ padding-right: 30rpx;
+ line-height: 30rpx;
+ font-size: 24rpx;
+ color: #999;
+ margin-bottom: 30rpx;
+}
+
+.goods-attr {
+ width: 750rpx;
+ height: auto;
+ overflow: hidden;
+ padding: 0 31.25rpx 25rpx 31.25rpx;
+ background: #fff;
+}
+
+.goods-attr .t {
+ width: 687.5rpx;
+ height: 104rpx;
+ line-height: 104rpx;
+ font-size: 38.5rpx;
+}
+
+.goods-attr .item {
+ width: 687.5rpx;
+ height: 68rpx;
+ padding: 11rpx 20rpx;
+ margin-bottom: 11rpx;
+ background: #f7f7f7;
+ font-size: 38.5rpx;
+}
+
+.goods-attr .left {
+ float: left;
+ font-size: 25rpx;
+ width: 134rpx;
+ height: 45rpx;
+ line-height: 45rpx;
+ overflow: hidden;
+ color: #999;
+}
+
+.goods-attr .right {
+ float: left;
+ font-size: 36.5rpx;
+ margin-left: 20rpx;
+ width: 480rpx;
+ height: 45rpx;
+ line-height: 45rpx;
+ overflow: hidden;
+ color: #333;
+}
+
+.detail {
+ width: 750rpx;
+ height: auto;
+ overflow: hidden;
+}
+
+.detail image {
+ width: 750rpx;
+ display: block;
+}
+
+.common-problem {
+ width: 750rpx;
+ height: auto;
+ overflow: hidden;
+}
+
+.common-problem .h {
+ position: relative;
+ height: 145.5rpx;
+ width: 750rpx;
+ padding: 56.25rpx 0;
+ background: #fff;
+ text-align: center;
+}
+
+.common-problem .h .line {
+ display: inline-block;
+ position: absolute;
+ top: 72rpx;
+ left: 0;
+ z-index: 2;
+ height: 1px;
+ margin-left: 225rpx;
+ width: 300rpx;
+ background: #ccc;
+}
+
+.common-problem .h .title {
+ display: inline-block;
+ position: absolute;
+ top: 56.125rpx;
+ left: 0;
+ z-index: 3;
+ height: 33rpx;
+ margin-left: 285rpx;
+ width: 180rpx;
+ background: #fff;
+}
+
+.common-problem .b {
+ width: 750rpx;
+ height: auto;
+ overflow: hidden;
+ padding: 0rpx 30rpx;
+ background: #fff;
+}
+
+.common-problem .item {
+ height: auto;
+ overflow: hidden;
+ padding-bottom: 25rpx;
+}
+
+.common-problem .question-box .spot {
+ float: left;
+ display: block;
+ height: 8rpx;
+ width: 8rpx;
+ background: #b4282d;
+ border-radius: 50%;
+ margin-top: 11rpx;
+}
+
+.common-problem .question-box .question {
+ float: left;
+ line-height: 30rpx;
+ padding-left: 8rpx;
+ display: block;
+ font-size: 26rpx;
+ padding-bottom: 15rpx;
+ color: #303030;
+}
+
+.common-problem .answer {
+ line-height: 36rpx;
+ padding-left: 16rpx;
+ font-size: 26rpx;
+ color: #787878;
+}
+
+.related-goods {
+ width: 750rpx;
+ height: auto;
+ overflow: hidden;
+ padding-bottom: 120rpx;
+}
+
+.related-goods .h {
+ position: relative;
+ height: 145.5rpx;
+ width: 750rpx;
+ padding: 56.25rpx 0;
+ background: #fff;
+ text-align: center;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.related-goods .h .line {
+ display: inline-block;
+ position: absolute;
+ top: 72rpx;
+ left: 0;
+ z-index: 2;
+ height: 1px;
+ margin-left: 225rpx;
+ width: 300rpx;
+ background: #ccc;
+}
+
+.related-goods .h .title {
+ display: inline-block;
+ position: absolute;
+ top: 56.125rpx;
+ left: 0;
+ z-index: 3;
+ height: 33rpx;
+ margin-left: 285rpx;
+ width: 180rpx;
+ background: #fff;
+}
+
+.bottom-btn {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ z-index: 10;
+ width: 750rpx;
+ height: 100rpx;
+ display: flex;
+ background: #fff;
+}
+
+.bottom-btn .l {
+ float: left;
+ height: 100rpx;
+ width: 162rpx;
+ border: 1px solid #f4f4f4;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.bottom-btn .l.l-collect {
+ border-right: none;
+ border-left: none;
+ text-align: center;
+ width: 162rpx;
+}
+
+.bottom-btn .l.l-kefu {
+ position: relative;
+ height: 54rpx;
+ width: 63rpx;
+}
+
+.bottom-btn .l.l-cart .box {
+ position: relative;
+ height: 60rpx;
+ width: 60rpx;
+}
+
+.bottom-btn .l.l-cart .cart-count {
+ height: 28rpx;
+ width: 28rpx;
+ z-index: 10;
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: #a78845;
+ text-align: center;
+ font-size: 18rpx;
+ color: #fff;
+ line-height: 28rpx;
+ border-radius: 50%;
+}
+
+.bottom-btn .l.l-cart .icon {
+ position: absolute;
+ top: 10rpx;
+ left: 0;
+}
+
+.bottom-btn .l.l-kefu .kefu-count {
+ height: 28rpx;
+ width: 28rpx;
+ z-index: 10;
+ position: absolute;
+ top: 0;
+ right: 0;
+ /* background: #b4282d; */
+ text-align: center;
+ font-size: 18rpx;
+ color: #fff;
+ line-height: 28rpx;
+ border-radius: 50%;
+}
+
+.bottom-btn .l.l-kefu .icon {
+ position: absolute;
+ top: 10rpx;
+ left: 0;
+}
+
+.bottom-btn .l .icon {
+ display: block;
+ height: 44rpx;
+ width: 44rpx;
+}
+
+.bottom-btn .c {
+ border: 1px solid #a78845;
+ background: #a78845;
+ float: left;
+ height: 100rpx;
+ line-height: 96rpx;
+ flex: 1;
+ text-align: center;
+ color: #fff;
+}
+
+.bottom-btn .r {
+ border: 1px solid #d3bd8f;
+ background: #d3bd8f;
+ float: left;
+ height: 100rpx;
+ line-height: 96rpx;
+ flex: 1;
+ text-align: center;
+ color: #fff;
+}
+
+.bottom-btn .n {
+ border: 1px solid #d3bd8f;
+ background: #d3bd8f;
+ float: left;
+ height: 100rpx;
+ line-height: 96rpx;
+ flex: 1;
+ text-align: center;
+ color: #fff;
+}
+@import "../../lib/wxParse/wxParse.wxss";
+
+.attr-pop-box {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 8;
+ bottom: 0;
+ /* display: none; */
+}
+
+.attr-pop {
+ width: 100%;
+ height: auto;
+ max-height: 780rpx;
+ padding: 31.25rpx;
+ background: #fff;
+ position: fixed;
+ z-index: 9;
+ bottom: 100rpx;
+}
+
+.attr-pop .close {
+ position: absolute;
+ width: 48rpx;
+ height: 48rpx;
+ right: 31.25rpx;
+ overflow: hidden;
+ top: 31.25rpx;
+}
+
+.attr-pop .close .icon {
+ width: 48rpx;
+ height: 48rpx;
+}
+
+.attr-pop .img-info {
+ width: 687.5rpx;
+ height: 177rpx;
+ overflow: hidden;
+ margin-bottom: 41.5rpx;
+}
+
+.attr-pop .img {
+ float: left;
+ height: 177rpx;
+ width: 177rpx;
+ background: #f4f4f4;
+ margin-right: 31.25rpx;
+}
+
+.attr-pop .info {
+ float: left;
+ height: 177rpx;
+ display: flex;
+ align-items: center;
+}
+
+.attr-pop .p {
+ font-size: 33rpx;
+ color: #333;
+ height: 33rpx;
+ line-height: 33rpx;
+ margin-bottom: 10rpx;
+}
+
+.attr-pop .a {
+ font-size: 29rpx;
+ color: #333;
+ height: 40rpx;
+ line-height: 40rpx;
+}
+
+.spec-con {
+ width: 100%;
+ height: auto;
+ overflow: hidden;
+}
+
+.spec-con .name {
+ height: 32rpx;
+ margin-bottom: 22rpx;
+ font-size: 29rpx;
+ color: #333;
+}
+
+.spec-con .values {
+ height: auto;
+ margin-bottom: 31.25rpx;
+ font-size: 0;
+}
+
+.spec-con .value {
+ display: inline-block;
+ height: 62rpx;
+ padding: 0 35rpx;
+ line-height: 56rpx;
+ text-align: center;
+ margin-right: 25rpx;
+ margin-bottom: 16.5rpx;
+ border: 1px solid #333;
+ font-size: 25rpx;
+ color: #333;
+}
+
+.spec-con .value.disable {
+ border: 1px solid #ccc;
+ color: #ccc;
+}
+
+.spec-con .value.selected {
+ border: 1px solid #b4282d;
+ color: #b4282d;
+}
+
+.number-item .selnum {
+ width: 322rpx;
+ height: 71rpx;
+ border: 1px solid #ccc;
+ display: flex;
+}
+
+.number-item .cut {
+ width: 93.75rpx;
+ height: 100%;
+ text-align: center;
+ line-height: 65rpx;
+}
+
+.number-item .number {
+ flex: 1;
+ height: 100%;
+ text-align: center;
+ line-height: 68.75rpx;
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+ float: left;
+}
+
+.number-item .add {
+ width: 93.75rpx;
+ height: 100%;
+ text-align: center;
+ line-height: 65rpx;
+}
+
+.contact {
+ height: 100rpx;
+ width: 100rpx;
+ background-color: #008000;
+ border-radius: 100%;
+ position: fixed;
+ bottom: 150rpx;
+ right: 20rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9;
+ flex-direction: column;
+ /*line-height: 100rpx;
+  text-align: center;
+  padding-top: 26rpx;*/
+ font-size: 20rpx;
+ color: #008000;
+ box-sizing: border-box;
+ background: url("https://litemall.oss-cn-shenzhen.aliyuncs.com/kefu.png") no-repeat center 21rpx;
+ background-size: 55rpx auto;
+}
+
+.contact .name {
+ font-size: 32rpx;
+ max-width: 80rpx;
+ color: #fff;
+ text-align: center;
+}

renard-wx/pages/groupon/grouponDetail/grouponDetail.js

+var util = require('../../../utils/util.js');
+var api = require('../../../config/api.js');
+
+Page({
+ data: {
+  id: 0,
+  orderId: 0,
+  groupon: {},
+  linkGrouponId: 0,
+  joiners: [],
+  orderInfo: {},
+  orderGoods: [],
+  expressInfo: {},
+  flag: false,
+  handleOption: {}
+ },
+
+ onLoad: function(options) {
+  // 页面初始化 options为页面跳转所带来的参数
+  this.setData({
+   id: options.id
+  });
+  this.getOrderDetail();
+ },
+
+ // 页面分享
+ onShareAppMessage: function() {
+  let that = this;
+  return {
+   title: '邀请团购',
+   desc: '唯爱与美食不可辜负',
+   path: '/pages/index/index?grouponId=' + this.data.linkGrouponId
+  }
+ },
+
+ showShare: function() {
+  this.sharePop.togglePopup();
+ },
+
+ onPullDownRefresh() {
+  this.getOrderDetail();
+  wx.stopPullDownRefresh() //停止下拉刷新
+ },
+
+ expandDetail: function() {
+  let that = this;
+  this.setData({
+   flag: !that.data.flag
+  })
+ },
+ getOrderDetail: function() {
+  wx.showLoading({
+   title: '加载中',
+  });
+
+  setTimeout(function() {
+   wx.hideLoading()
+  }, 2000);
+
+  let that = this;
+  util.request(api.GroupOnDetail, {
+   grouponId: that.data.id
+  }).then(function(res) {
+   if (res.errno === 0) {
+    that.setData({
+     joiners: res.data.joiners,
+     groupon: res.data.groupon,
+     linkGrouponId: res.data.linkGrouponId,
+     orderId: res.data.orderInfo.id,
+     orderInfo: res.data.orderInfo,
+     orderGoods: res.data.orderGoods,
+     handleOption: res.data.orderInfo.handleOption,
+     expressInfo: res.data.expressInfo
+    });
+
+    wx.hideLoading();
+   }
+  });
+ },
+ 
+ onReady: function() {
+  // 页面渲染完成
+  this.sharePop = this.selectComponent("#sharePop");
+ },
+ onShow: function() {
+  // 页面显示
+ },
+ onHide: function() {
+  // 页面隐藏
+ },
+ onUnload: function() {
+  // 页面关闭
+ }
+});
\ No newline at end of file

renard-wx/pages/groupon/grouponDetail/grouponDetail.json

+{
+ "navigationBarTitleText": "团购详情",
+   "usingComponents": {
+    "sharePop": "/components/sharePop/sharePop"
+   }
+}
\ No newline at end of file

renard-wx/pages/groupon/grouponDetail/grouponDetail.wxml

+<view class="container">
+ <view class="order-info">
+  <view class="item-a">下单时间：{{orderInfo.addTime}}</view>
+  <view class="item-b">订单编号：{{orderInfo.orderSn}}</view>
+  <view class="item-c">
+   <view class="l">实付：
+    <text class="cost">￥{{orderInfo.actualPrice}}</text>
+   </view>
+   <view class="r">
+    <view class="btn active" bindtap="showShare">邀请参团</view>
+   </view>
+  </view>
+ </view>
+
+ <sharePop id="sharePop" url="{{groupon.shareUrl}}"></sharePop>
+
+ <view class="menu-list-pro">
+  <view class="h">
+   <view class="label">参与团购 ( {{joiners.length}}人)</view>
+   <!-- <view class="status">查看全部</view> -->
+  </view>
+  <view class="menu-list-item" wx:for-items="{{joiners}}" wx:key="id" data-id="{{item.id}}">
+   <image class="icon" src="{{item.avatar}}"></image>
+   <text class="txt">{{item.nickname}}</text>
+  </view>
+ </view>
+
+ <view class="order-goods">
+  <view class="h">
+   <view class="label">商品信息</view>
+   <view class="status">{{orderInfo.orderStatusText}}</view>
+  </view>
+  <view class="goods">
+   <view class="item" wx:for="{{orderGoods}}" wx:key="id">
+    <view class="img">
+     <image src="{{item.picUrl}}"></image>
+    </view>
+    <view class="info">
+     <view class="t">
+      <text class="name">{{item.goodsName}}</text>
+      <text class="number">x{{item.number}}</text>
+     </view>
+     <view class="attr">{{item.goodsSpecificationValues}}</view>
+     <view class="price">￥{{item.retailPrice}}</view>
+    </view>
+   </view>
+  </view>
+
+  <view class="order-bottom">
+   <view class="address">
+    <view class="t">
+     <text class="name">{{orderInfo.consignee}}</text>
+     <text class="mobile">{{orderInfo.mobile}}</text>
+    </view>
+    <view class="b">{{orderInfo.address}}</view>
+   </view>
+   <view class="total">
+    <view class="t">
+     <text class="label">商品合计：</text>
+     <text class="txt">￥{{orderInfo.goodsPrice}}</text>
+    </view>
+    <view class="t">
+     <text class="label">运费：</text>
+     <text class="txt">￥{{orderInfo.freightPrice}}</text>
+    </view>
+   </view>
+   <view class="pay-fee">
+    <text class="label">实付：</text>
+    <text class="txt">￥{{orderInfo.actualPrice}}</text>
+   </view>
+  </view>
+ </view>
+
+ <!-- 物流信息,仅收货状态下可见 -->
+ <view class="order-express" bindtap="expandDetail" wx:if="{{ handleOption.confirm }}">
+  <view class="expand">
+   <view class="title">
+    <view class="t">快递公司：{{expressInfo.shipperName}}</view>
+    <view class="b">物流单号：{{expressInfo.shipperCode}}</view>
+   </view>
+   <image class="ti" src="/static/images/address_right.png" background-size="cover"></image>
+  </view>
+
+  <!-- <view class="order-express" > -->
+  <view class="traces" wx:for="{{expressInfo.Traces}}" wx:key="item" wx:for-item="iitem" wx:if="{{ flag }}">
+   <view class="trace">
+    <view class="acceptStation">{{iitem.AcceptStation}}</view>
+    <view class="acceptTime">{{iitem.AcceptTime}}</view>
+   </view>
+  </view>
+ </view>
+ <!-- </view> -->
+</view>
\ No newline at end of file

renard-wx/pages/groupon/grouponDetail/grouponDetail.wxss

+page {
+ height: 100%;
+ width: 100%;
+ background: #f4f4f4;
+}
+
+.order-info {
+ padding-top: 25rpx;
+ background: #fff;
+ height: auto;
+ overflow: hidden;
+}
+
+.item-a {
+ padding-left: 31.25rpx;
+ height: 42.5rpx;
+ padding-bottom: 12.5rpx;
+ line-height: 30rpx;
+ font-size: 30rpx;
+ color: #666;
+}
+
+.item-b {
+ padding-left: 31.25rpx;
+ height: 29rpx;
+ line-height: 29rpx;
+ margin-top: 12.5rpx;
+ margin-bottom: 41.5rpx;
+ font-size: 30rpx;
+ color: #666;
+}
+
+.item-c {
+ margin-left: 31.25rpx;
+ border-top: 1px solid #f4f4f4;
+ height: 103rpx;
+ line-height: 103rpx;
+}
+
+.item-c .l {
+ float: left;
+}
+
+.item-c .r {
+ height: 103rpx;
+ float: right;
+ display: flex;
+ align-items: center;
+ padding-right: 16rpx;
+}
+
+.item-c .r .btn {
+ float: right;
+}
+
+.item-c .cost {
+ color: #b4282d;
+}
+
+.item-c .btn {
+ line-height: 66rpx;
+ border-radius: 5rpx;
+ text-align: center;
+ margin: 0 15rpx;
+ padding: 0 20rpx;
+ height: 66rpx;
+}
+
+.item-c .btn.active {
+ background: #a78845;
+ color: #fff;
+}
+
+.order-goods {
+ margin-top: 20rpx;
+ background: #fff;
+}
+
+.order-goods .h {
+ height: 93.75rpx;
+ line-height: 93.75rpx;
+ margin-left: 31.25rpx;
+ border-bottom: 1px solid #f4f4f4;
+ padding-right: 31.25rpx;
+}
+
+.order-goods .h .label {
+ float: left;
+ font-size: 30rpx;
+ color: #333;
+}
+
+.order-goods .h .status {
+ float: right;
+ font-size: 30rpx;
+ color: #b4282d;
+}
+
+.order-goods .item {
+ display: flex;
+ align-items: center;
+ height: 192rpx;
+ margin-left: 31.25rpx;
+ padding-right: 31.25rpx;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.order-goods .item:last-child {
+ border-bottom: none;
+}
+
+.order-goods .item .img {
+ height: 145.83rpx;
+ width: 145.83rpx;
+ background: #f4f4f4;
+}
+
+.order-goods .item .img image {
+ height: 145.83rpx;
+ width: 145.83rpx;
+}
+
+.order-goods .item .info {
+ flex: 1;
+ height: 145.83rpx;
+ margin-left: 20rpx;
+}
+
+.order-goods .item .t {
+ margin-top: 8rpx;
+ height: 33rpx;
+ line-height: 33rpx;
+ margin-bottom: 10.5rpx;
+}
+
+.order-goods .item .t .name {
+ display: block;
+ float: left;
+ height: 33rpx;
+ line-height: 33rpx;
+ color: #333;
+ font-size: 30rpx;
+}
+
+.order-goods .item .t .number {
+ display: block;
+ float: right;
+ height: 33rpx;
+ text-align: right;
+ line-height: 33rpx;
+ color: #333;
+ font-size: 30rpx;
+}
+
+.order-goods .item .attr {
+ height: 29rpx;
+ line-height: 29rpx;
+ color: #666;
+ margin-bottom: 25rpx;
+ font-size: 25rpx;
+}
+
+.order-goods .item .price {
+ display: block;
+ float: left;
+ height: 30rpx;
+ line-height: 30rpx;
+ color: #333;
+ font-size: 30rpx;
+}
+
+.order-goods .item .btn {
+ height: 50rpx;
+ line-height: 50rpx;
+ border-radius: 5rpx;
+ text-align: center;
+ display: block;
+ float: right;
+ margin: 0 15rpx;
+ padding: 0 20rpx;
+}
+
+.order-goods .item .btn.active {
+ background: #b4282d;
+ color: #fff;
+}
+
+.order-bottom {
+ margin-top: 20rpx;
+ padding-left: 31.25rpx;
+ height: auto;
+ overflow: hidden;
+ background: #fff;
+}
+
+.order-bottom .address {
+ height: 128rpx;
+ padding-top: 25rpx;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.order-bottom .address .t {
+ height: 35rpx;
+ line-height: 35rpx;
+ margin-bottom: 7.5rpx;
+}
+
+.order-bottom .address .name {
+ display: inline-block;
+ height: 35rpx;
+ width: 140rpx;
+ line-height: 35rpx;
+ font-size: 30rpx;
+}
+
+.order-bottom .address .mobile {
+ display: inline-block;
+ height: 35rpx;
+ line-height: 35rpx;
+ font-size: 30rpx;
+}
+
+.order-bottom .address .b {
+ height: 35rpx;
+ line-height: 35rpx;
+ font-size: 30rpx;
+}
+
+.order-bottom .total {
+ height: 106rpx;
+ padding-top: 20rpx;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.order-bottom .total .t {
+ height: 30rpx;
+ line-height: 30rpx;
+ margin-bottom: 7.5rpx;
+ display: flex;
+}
+
+.order-bottom .total .label {
+ width: 150rpx;
+ display: inline-block;
+ height: 35rpx;
+ line-height: 35rpx;
+ font-size: 30rpx;
+}
+
+.order-bottom .total .txt {
+ flex: 1;
+ display: inline-block;
+ height: 35rpx;
+ line-height: 35rpx;
+ font-size: 30rpx;
+}
+
+.order-bottom .pay-fee {
+ height: 81rpx;
+ line-height: 81rpx;
+}
+
+.order-bottom .pay-fee .label {
+ display: inline-block;
+ width: 140rpx;
+ color: #b4282d;
+}
+
+.order-bottom .pay-fee .txt {
+ display: inline-block;
+ width: 140rpx;
+ color: #b4282d;
+}
+
+.order-express {
+ margin-top: 20rpx;
+ width: 100%;
+ height: 100rpx;
+ background: #fff;
+}
+
+.order-express .expand {
+ /* margin-top: 20rpx; */
+ width: 100%;
+ height: 100rpx;
+ background: #fff;
+ /* border: 10rpx #a78845; */
+}
+
+.order-express .title {
+ float: left;
+ margin-bottom: 20rpx;
+ padding: 10rpx;
+}
+
+.order-express .ti {
+ float: right;
+ width: 52rpx;
+ height: 52rpx;
+ margin-right: 16rpx;
+ margin-top: 28rpx;
+}
+
+.order-express .t {
+ font-size: 29rpx;
+ margin-left: 10.25rpx;
+ color: #a78845;
+}
+
+.order-express .b {
+ font-size: 29rpx;
+ margin-left: 10.25rpx;
+ color: #a78845;
+}
+
+.order-express .traces {
+ padding: 17.5rpx;
+ background: #fff;
+ border-bottom: 1rpx solid #f1e6cdcc;
+}
+
+.order-express .trace {
+ padding-bottom: 17.5rpx;
+ padding-top: 17.5rpx;
+ background: #fff;
+}
+
+.order-express .acceptTime {
+ margin-top: 20rpx;
+ margin-right: 40rpx;
+ text-align: right;
+ font-size: 26rpx;
+}
+
+.order-express .acceptStation {
+ font-size: 26rpx;
+}
+
+.menu-list-pro {
+ margin-top: 20rpx;
+ overflow-x: scroll;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ height: 260rpx;
+ width: 100%;
+ overflow: hidden;
+ border-bottom: 1rpx #cfc9ca;
+ background-color: #fff;
+}
+
+.menu-list-pro .h {
+ height: 93.75rpx;
+ line-height: 93.75rpx;
+ margin-left: 31.25rpx;
+ border-bottom: 1px solid #f4f4f4;
+ padding-right: 31.25rpx;
+}
+
+.menu-list-pro .h .label {
+ float: left;
+ font-size: 30rpx;
+ color: #333;
+}
+
+.menu-list-pro .h .status {
+ float: right;
+ font-size: 30rpx;
+ color: #a78845;
+}
+
+.menu-list-pro  .menu-list-item {
+ display: block;
+ float: left;
+ height: 110rpx;
+ width: 80rpx;
+ margin-top: 30rpx;
+ margin-bottom: 30rpx;
+ margin-left: 40rpx;
+}
+
+.menu-list-pro .icon {
+ height: 80rpx;
+ width: 80rpx;
+ border-radius: 12rpx;
+ box-shadow: 0px 4rpx 4rpx 0px #cfc9ca;
+}
+
+.menu-list-pro .txt {
+ display: block;
+ float: left;
+ width: 80rpx;
+ margin-top: 5rpx;
+ font-size: 22rpx;
+ color: #a78845;
+}

renard-wx/pages/groupon/myGroupon/myGroupon.js

+var util = require('../../../utils/util.js');
+var api = require('../../../config/api.js');
+
+Page({
+ data: {
+  orderList: [],
+  showType: 0
+ },
+ onLoad: function(options) {
+  // 页面初始化 options为页面跳转所带来的参数
+ },
+
+ onPullDownRefresh() {
+  // wx.showNavigationBarLoading() //在标题栏中显示加载
+  this.getOrderList();
+  // wx.hideNavigationBarLoading() //完成停止加载
+  wx.stopPullDownRefresh() //停止下拉刷新
+ },
+
+ getOrderList() {
+  wx.showLoading({
+   title: '加载中',
+  });
+
+  setTimeout(function() {
+   wx.hideLoading()
+  }, 2000);
+
+  let that = this;
+  util.request(api.GroupOnMy, {
+   showType: that.data.showType
+  }).then(function(res) {
+   if (res.errno === 0) {
+    that.setData({
+     orderList: res.data.data
+    });
+    wx.hideLoading();
+   }
+  });
+ },
+ switchTab: function(event) {
+  let showType = event.currentTarget.dataset.index;
+  this.setData({
+   showType: showType
+  });
+  this.getOrderList();
+ },
+ onReady: function() {
+  // 页面渲染完成
+ },
+ onShow: function() {
+  // 页面显示
+  this.getOrderList();
+ },
+ onHide: function() {
+  // 页面隐藏
+ },
+ onUnload: function() {
+  // 页面关闭
+ }
+})
\ No newline at end of file

renard-wx/pages/groupon/myGroupon/myGroupon.json

+{
+ "navigationBarTitleText": "我的团购",
+ "usingComponents": {
+  "zan-capsule": "/components/capsule/index"
+ }
+}
\ No newline at end of file

renard-wx/pages/groupon/myGroupon/myGroupon.wxml

+<view class="container">
+ <view class="orders-switch">
+  <view class="item {{ showType == 0 ? 'active' : ''}}" bindtap="switchTab" data-index='0'>
+   <view class="txt">发起的团购</view>
+  </view>
+  <view class="item {{ showType == 1 ? 'active' : ''}}" bindtap="switchTab" data-index='1'>
+   <view class="txt">参加的团购</view>
+  </view>
+ </view>
+ <view class="no-order" wx:if="{{orderList.length <= 0}}">
+  <view class="c">
+   <image src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png" />
+   <text>尚未参加任何团购</text>
+  </view>
+ </view>
+
+ <view class="orders">
+  <navigator url="../grouponDetail/grouponDetail?id={{item.id}}" class="order" open-type="navigate" wx:for="{{orderList}}" wx:key="id">
+   <view class="h">
+    <view class="l">订单编号：{{item.orderSn}}</view>
+    <view class="r">{{item.orderStatusText}}</view>
+   </view>
+   <view class="j">
+    <view class="l">团购立减：￥{{item.rules.discount}}</view>
+    <view class="r">参与时间：{{item.groupon.addTime}}</view>
+   </view>
+   <view class="i">
+    <view class="l">团购要求：{{item.rules.discountMember}}人</view>
+    <view class="r">当前参与：{{item.joinerCount}}</view>
+   </view>
+   <view class="goods" wx:for="{{item.goodsList}}" wx:key="id" wx:for-item="gitem">
+    <view class="img">
+     <image src="{{gitem.picUrl}}"></image>
+    </view>
+    <view class="info">
+     <text class="name">{{gitem.goodsName}}</text>
+     <text class="number">共{{gitem.number}}件商品</text>
+    </view>
+    <view class="status"></view>
+   </view>
+   <view class="b">
+    <view class="l">实付：￥{{item.actualPrice}}</view>
+    <view class="capsule-tag">
+     <zan-capsule color="#a78845" leftText="状态" rightText="{{item.joinerCount>=item.rules.discountMember?'已达成':'团购中'}}" />
+    </view>
+    <view class="capsule-tag">
+     <zan-capsule color="#a78845" leftText="发起" rightText="{{item.creator}}" wx:if="{{!item.isCreator}}" />
+    </view>
+   </view>
+  </navigator>
+ </view>
+</view>
\ No newline at end of file

renard-wx/pages/groupon/myGroupon/myGroupon.wxss

+page {
+ height: 100%;
+ width: 100%;
+ background: #f4f4f4;
+}
+
+.capsule-tag {
+ float: right;
+ /* padding-right: 10rpx; */
+}
+
+.zan-capsule + .zan-capsule {
+ margin-left: 5px;
+}
+
+.orders-switch {
+ width: 100%;
+ background: #fff;
+ height: 84rpx;
+ border-bottom: 1px solid #a78845;
+}
+
+.orders-switch .item {
+ display: inline-block;
+ height: 82rpx;
+ width: 50%;
+ padding: 0 15rpx;
+ text-align: center;
+}
+
+.orders-switch .item .txt {
+ display: inline-block;
+ height: 82rpx;
+ padding: 0 20rpx;
+ line-height: 82rpx;
+ color: #333;
+ font-size: 30rpx;
+ width: 100%;
+}
+
+.orders-switch .item.active .txt {
+ color: #a78845;
+ border-bottom: 4rpx solid #a78845;
+}
+
+.no-order {
+ width: 100%;
+ height: auto;
+ margin: 0 auto;
+}
+
+.no-order .c {
+ width: 100%;
+ height: auto;
+ margin-top: 200rpx;
+}
+
+.no-order .c image {
+ margin: 0 auto;
+ display: block;
+ text-align: center;
+ width: 258rpx;
+ height: 258rpx;
+}
+
+.no-order .c text {
+ margin: 0 auto;
+ display: block;
+ width: 258rpx;
+ height: 29rpx;
+ line-height: 29rpx;
+ text-align: center;
+ font-size: 29rpx;
+ color: #999;
+}
+
+.orders {
+ height: auto;
+ width: 100%;
+ overflow: hidden;
+}
+
+.order {
+ margin-top: 20rpx;
+ background: #fff;
+}
+
+.order .h {
+ height: 83.3rpx;
+ line-height: 83.3rpx;
+ margin-left: 31.25rpx;
+ padding-right: 31.25rpx;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.order .h .l {
+ float: left;
+ color: #a78845;
+ font-size: 26rpx;
+}
+
+.order .h .r {
+ float: right;
+ color: #a78845;
+ font-size: 26rpx;
+}
+
+.order .i {
+ height: 56rpx;
+ line-height: 56rpx;
+ margin-left: 31.25rpx;
+ padding-right: 31.25rpx;
+ border-bottom: 1px solid #f4f4f4;
+}
+
+.order .i .l {
+ float: left;
+ color: #a78845;
+ font-size: 26rpx;
+}
+
+.order .i .r {
+ float: right;
+ color: #a78845;
+ font-size: 26rpx;
+}
+
+.order .j {
+ height: 56rpx;
+ line-height: 56rpx;
+ margin-left: 31.25rpx;
+ padding-right: 31.25rpx;
+}
+
+.order .j .l {
+ float: left;
+ font-size: 26rpx;
+ color: #a78845;
+}
+
+.order .j .r {
+ float: right;
+ color: #a78845;
+ font-size: 26rpx;
+}
+
+.order .goods {
+ display: flex;
+ align-items: center;
+ height: 199rpx;
+ margin-left: 31.25rpx;
+}
+
+.order .goods .img {
+ height: 145.83rpx;
+ width: 145.83rpx;
+ background: #f4f4f4;
+}
+
+.order .goods .img image {
+ height: 145.83rpx;
+ width: 145.83rpx;
+}
+
+.order .goods .info {
+ height: 145.83rpx;
+ flex: 1;
+ padding-left: 20rpx;
+}
+
+.order .goods .name {
+ margin-top: 30rpx;
+ display: block;
+ height: 44rpx;
+ line-height: 44rpx;
+ color: #333;
+ font-size: 30rpx;
+}
+
+.order .goods .number {
+ display: block;
+ height: 37rpx;
+ line-height: 37rpx;
+ color: #666;
+ font-size: 25rpx;
+}
+
+.order .goods .status {
+ width: 105rpx;
+ color: #a78845;
+ font-size: 25rpx;
+}
+
+.order .b {
+ height: 103rpx;
+ line-height: 103rpx;
+ margin-left: 31.25rpx;
+ padding-right: 31.25rpx;
+ border-top: 1px solid #f4f4f4;
+ font-size: 30rpx;
+ color: #333;
+}
+
+.order .b .l {
+ float: left;
+}
+
+.order .b .r {
+ float: right;
+}
+
+.order .b .btn {
+ margin-top: 19rpx;
+ height: 64.5rpx;
+ line-height: 64.5rpx;
+ text-align: center;
+ padding: 0 20rpx;
+ border-radius: 5rpx;
+ font-size: 28rpx;
+ color: #fff;
+ background: #a78845;
+}