CommunityApp/pagesM/pages/coupon_select.vue

<template>
<view class="dt-page">
  <view class="container">
    <view class="notUseTopFix"></view>
    <view @tap="tapNotUse" class="notUse">
      <text>不使用优惠券</text>
      <DtCheck :check="notUse" />
    </view>

    <view class="voucher" v-for="(item, idx) in dataList" :key="idx">
      <view class="dt-voucher" @tap="tapChoose(item,idx)">
        <!-- border -->
        <image class="bg-top-border" src="http://139.9.103.171:1888/img/image/flowerborder.png" mode="widthFix"></image>

        <view class="mn-wrap">
          <view class="left">
            <block v-if="item.voucher_type == 1">
              <view class="worth">6.8<text class="suffix">折</text></view>
              <view class="type-name">折扣券</view>
            </block>
            <block v-else>
              <view class="worth"><text class="prefix">￥</text>{{item.couponDiscount}}</view>
              <view class="type-name">抵价券</view>
            </block>
          </view>
          <view class="mid">
            <view class="apply-to-name fn-text-row-two">{{item.name}}</view>
            <view v-if="item.minimumPrice>0" class="apply-condition">满 {{item.minimumPrice}} 元可使用</view>
          </view>
          <view class="right">
            <DtCheck :check="item.isSelected" />
          </view>
        </view>
        <view class="ft-wrap">
          <view class="ft" @tap.stop="tapVisible(idx)">
            <view class="des">
              <text>详细信息</text>
              <image class="arrow-up" :class="{ 'active':!item.isShowDetail }" src="http://139.9.103.171:1888/img/image/arrow_up.png" mode="widthFix"></image>
            </view>
            <view class="date">{{ item.beginDate| dateFormat('yyyy-MM-dd') }} 至 {{ item.endDate| dateFormat('yyyy-MM-dd') }}</view>
          </view>
        </view>
        <view v-if="item.isShowDetail" class="ext-wrap"><text v-if="item.minimumPrice>0">满{{item.minimumPrice}}元可使用；</text>不可叠加使用</view>
      </view>
    </view>
  </view>
  <FootToolbar bgColor="#fff">
    <view slot="main" class="btn-voucher-wrap">
      <button @tap="tapBack" class="dt-btn-submit btn-voucher">确认</button>
    </view>
  </FootToolbar>
</view>
</template>

<script>
import DtCheck from '../comps/dt_check.vue'
import FootToolbar from '../comps/foot_toolbar.vue'
export default {
  components: {
    DtCheck,
    FootToolbar
  },
  data() {
    return {
      dataList: [],
      selectStoreCouponIndex: -1,
      isSelectProduct: false,
      notUse: false,
      member_id: 0,
      // chooseCodes:[]
    };
  },
  methods: {
    tapBack() {
      let lastPage = this.$util.getPageCtx(1).$vm
      
      let list = this.dataList.slice(0)
      let selectCodes = []
      list.forEach(item => {
        if(item.isSelected){
          selectCodes.push(item.code)
        }
      });
      lastPage.isCalculate = true
      lastPage.selectCodes = selectCodes
      uni.navigateBack()
    },
    tapChoose(item, idx) {
      this.notUse = false
      let list = this.dataList.slice(0)
      // 一个订单中的商品，最多只能选择一张优惠券 + 参与一个店铺优惠
      if (item.isStoreCoupon) {// 店铺优惠券，一个订单只能选择一张
        //点中了店铺优惠券
        if (this.selectStoreCouponIndex === -1) {
          //从未选过店铺优惠券
          this.selectStoreCouponIndex = idx
          item.isSelected = true
        } else {
          if (this.selectStoreCouponIndex === idx) {
            item.isSelected = !item.isSelected
            if (item.isSelected === false) {
              this.selectStoreCouponIndex = -1
            }
          } else {
            list[this.selectStoreCouponIndex].isSelected = false
            item.isSelected = true
            this.selectStoreCouponIndex = idx
          }
        }
      } else {// 商品优惠券，只与单个商品有关，订单中一个商品只能选择一种优惠券
        //点中了商品优惠券
        if (this.isSelectProduct === false) {
          //从未选过商品优惠券
          this.isSelectProduct = true
          item.isSelected = true
        } else {
          // 把当前选中的 productIds 与其他选中的 productIds 比较 有交集的不能选中
          if (item.isSelected === false) {
            // 随时可以选中
            list.map((a,aidx) => {
              // 对比除自己只外的
              if (aidx !== idx) {
                if (
                  item['productIdsArr'] !== undefined &&
                  a['productIdsArr'] !== undefined
                ) {
                  if (item.productIdsArr.length > 0 && a.productIdsArr.length > 0) {
                    let intersection = item.productIdsArr.filter((v) => {
                      return a.isSelected && a.productIdsArr.indexOf(v) !== -1
                    })
                    if (intersection.length > 0) {
                      a.isSelected = false
                    }
                  }
                }
              }
              return a
            })
            item.isSelected = true
            this.isSelectProduct = true
          } else {
            //随时可以取消选中
            item.isSelected = false
          }
        }
      }
      list[idx] = item
      // this.chooseCodes.push({...item})
      this.dataList = list
    },
    //不用优惠券
    tapNotUse() {
      this.notUse = !this.notUse
      if (this.notUse) {
        let list = this.dataList.slice(0)
        list.map((item) => {
          item.isSelected = false
          return item
        })
        this.selectStoreCouponIndex = -1
        this.isSelectProduct = false
        this.dataList = list
      }
    },
    //查看详情
    tapVisible(idx) {
      let dataList = this.dataList.slice(0)
      dataList[idx].isShowDetail = !dataList[idx].isShowDetail
      this.dataList = dataList
    },
    queryDataList() {
      let lastPage = this.$util.getPageCtx(1).$vm
      let lastList = lastPage.couponCodes.slice(0)
      // this.chooseCodes = lastPage.selectCodes.slice(0)
      // 数据预处理
      let list = []
      lastList.forEach((lastItem, lastIdx) => {
        let item = Object.assign({},lastItem)
        if (item.isStoreCoupon && item.isSelected) {
          //选中店铺优惠券的下标
          this.selectStoreCouponIndex = lastIdx
        } else if (!item.isStoreCoupon && item.isSelected) {
          //是否有选中了产品优惠券
          this.isSelectProduct = true
        }
        if (item.productIds !== undefined && item.productIds.length > 0) {
          item.productIdsArr = item.productIds.split(',')
        }
        list.push(item)
      })
      this.dataList = list
    },
    onLoadPage(options) {
	  wx.hideShareMenu();
      this.queryDataList()
    }
  },
};
</script>

<style lang="scss" scoped>
.dt-page {
  min-height: 100vh;
  background-color: #f2f2f2;
}

.container {
  padding-left: 30upx;
  padding-right: 30upx;
  color: rgb(51, 51, 51);
  font-size: 28upx;
  /* margin-bottom: 140upx; */
}

.notUseTopFix {
  width: 100%;
  height: 30upx;
}

.notUse {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 24upx 30upx;
  border-radius: 10upx;

  .select-icon {
    width: 40upx;
    height: 40upx;
  }
}

.voucher {
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 10upx;
  margin: 30upx 0;
  font-size: 22upx;
  color: rgb(153, 153, 153);
  position: relative;
}

.fn-text-row-two {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.dt-voucher {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 690upx;
  // min-height:220upx;
  box-sizing: border-box;
  border-radius: 10upx;
  font-size: 28upx;
  background-color: #fff;

  .dis-able {
    color: #999 !important;
  }

  .unreceive {
    position: absolute;
    top: 0;
    left: 0;
    width: 90upx;
    height: 90upx;
  }

  .outdate,
  .used {
    position: absolute;
    top: 0;
    right: 0;
    width: 165upx;
    height: 86upx;
  }

  .bg-top-border {
    width: 100%;
    height: 15upx;
  }

  .mn-wrap {
    display: flex;
    width: 100%;
    height: 154upx;
    margin: 0 30upx;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 136upx;
      font-size: 22upx;
      color: #ff7171;

      .worth {
        font-size: 60upx;
        line-height: 1;

        .prefix {
          font-size: 30upx;
        }

        .suffix {
          font-size: 24upx;
        }
      }

      .type-name {
        text-align: center;
      }
    }

    .mid {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 30upx;

      .apply-to-name {
        max-height: 61upx;
        font-size: 26upx;
        line-height: 1.2;
        color: #333;
      }

      .apply-condition {
        padding-top: 20upx;
        color: #666666;
        font-size: 22upx;
      }
    }

    .right {
      display: flex;
      align-items: center;
    }

    .get-btn {
      margin: 47upx 0;
      width: 160upx;
      height: 60upx;
      line-height: 60upx;
      border-radius: 6upx;
      font-size: 28upx;
      font-weight: 400;
      padding: 0;
      background-color: #ff7171;
      color: #fff;
    }
  }

  .ft-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 30upx;
    color: #666;

    .ft {
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50upx;
      line-height: 50upx;
      font-size: 20upx;

      .des {
        .arrow-up {
          margin-left: 10upx;
          width: 18upx;
          height: 9upx;
        }

        .arrow-up.active {
          transform: rotate(180deg);
        }
      }
    }

    .ft:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1upx;
      border-top: 1upx dashed #cccccc;
      content: "";
    }
  }

  .ft-wrap:before,
  .ft-wrap:after {
    position: absolute;
    top: -14upx;
    width: 28upx;
    height: 28upx;
    border-radius: 50%;
    background-color: #f2f2f2;
    content: "";
  }

  .ft-wrap:before {
    left: -44upx;
  }

  .ft-wrap:after {
    right: -44upx;
  }

  .ext-wrap {
    padding: 0 30upx 20upx;
    width: 100%;
    color: #999;
    font-size: 20upx;
  }
}

.btn-voucher-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 110upx;
  background-color: #fff;

  .btn-voucher {
    width: 690upx;
    height: 80upx;
    line-height: 80upx;
    color: #fff;
    background-color: $dt-color-primary;
    font-size: 30upx;
  }
}
</style>