jje_uniapp/orderPages/useCoupons/index.vue

<template>
  <view class="page" :style="{'height':windowHeight}">

      <view class="flex-col" v-if="countsList.length === 0">
          <view class="flex-row justify-center">
              <image class="empty" src="/static/imageIcon/empty.png" mode="widthFix"></image>
          </view>
          <view class="emptyText flex-row justify-center">
              <text>暂无内容</text>
          </view>
      </view>

      <view v-else>
        <view class="flex-row">
            <view class="flex-col justify-center" @click="noUseChange">
                <u-icon v-if="noUse" name="checkmark-circle-fill" color="#38db38" size="25" ></u-icon>
                <u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
            </view>
            <view class="noUse">
                <text>不使用优惠券</text>
            </view>
        </view>
        <view  :style="{'height':scrollViewHeight}">
            <scroll-view class="scroll " :style="{'height':scrollViewHeight}" scroll-y>
                <view  class="flex-col" :class="{'grayscale' : item.reachPrice*1 >standardPrice*1 }" v-for="(item,index) in countsList" @click="clickCoupons(item,index)" :key="index">

                    <view class="row-list flex-row justify-start">
                        <view class="h-text flex-col justify-center ">
                            <view class="money">
                                <text>{{item.discountsPrice}}</text>
                            </view>
                            <view class="desc">
                                <text>满{{item.reachPrice}}可用</text>
                            </view>
                        </view>

                        <view class="h-center-content flex-col justify-around">
                            <view class="h-value">
                                <text>{{item.name}}</text>
                            </view>
                            <!--                        <view class="title">-->
                            <!--                            使用平台：<text v-if="item.strategyType == '0'">全平台</text>-->
                            <!--                            <text v-else-if="item.strategyType == '1'">个人优惠卷</text>-->
                            <!--                        </view>-->
                            <view class="title">
                                使用次数：{{item.degree}}
                            </view>
                            <view class="title">
                                到期时间：{{item.endTime.substring(0,10)}}
                            </view>

                            <view class="title flex-row">
                                <text @click.stop="showRemark(item)">使用说明</text>
                                <u-icon v-if="item.id == showRemarkId" name="arrow-down-fill" color="" size="12"></u-icon>
                                <u-icon v-else name="play-right-fill" color="" size="12" @click.stop="showRemark(item)"></u-icon>
                            </view>
                        </view>

                        <view class="h-right-content flex-col justify-center">

                            <view class="flex-row justify-center" v-if="item.reachPrice*1 >standardPrice*1 ">
                                <view class="h-btn-img">
                                    <image class="h-btn-img" src="/static/coupon/u2110.png" mode=""></image>
                                </view>
                            </view>

                            <view class="flex-row justify-center" v-else>
                                <u-icon v-if="item.isUse " name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
                                <u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
                            </view>

                        </view>

                    </view>
                    <view v-if="showRemarkId == item.id" class="remark">
                        <text>{{item.remark}}</text>
                    </view>

                </view>
            </scroll-view>
        </view>
        <view>
            <view class="btn" @click="useCoupons">
                <text>确定</text>
            </view>
        </view>
      </view>
  </view>
</template>
 <script>
export default {
  data() {
    return {
        showRemarkId:'',
        countsList:[],
        noUse:true,
        windowHeight:'',
        scrollViewHeight:'',
        standardPrice:0,
    };
  },
  onLoad(e) {
      let sysInfo = uni.getSystemInfoSync()
      this.windowHeight =sysInfo.windowHeight +'px'
      this.scrollViewHeight =sysInfo.windowHeight -(sysInfo.windowWidth/750)*252 +'px'
      this.getMyCouponList()

      if (e.standardPrice){
          console.log('++++++++++++++', e.standardPrice)
          this.standardPrice = e.standardPrice
      }

  },
  computed: {

  },
  methods: {

      showRemark(item){
          if (this.showRemarkId == item.id ){
              this.showRemarkId = ''

          }else {
              this.showRemarkId = item.id
          }
      },

      useCoupons(){
          let  useCoupons = []
          for (const useCoupon of this.countsList) {
              if (useCoupon.isUse){
                  useCoupons.push(useCoupon)
              }
          }
          uni.$emit('getUseCoupons',useCoupons)
          uni.navigateBack({
              data:1
          })
      },

      noUseChange(){
          this.noUse = !this.noUse
          if (this.noUse){
             this.countsList.forEach(item=>{
                 item.isUse = false
             })
          }
      },
      clickCoupons(item,index){

          if (item.reachPrice*1 > this.standardPrice*1){
              return
          }

          //关闭多选开始
          this.countsList.forEach(item=>{
              item.isUse = false
          })
          //关闭多选结束

          console.log(item)
          this.noUse = false
          item.isUse = !item.isUse
          this.$set(this.countsList,index,item)

          let flag = true
          this.countsList.forEach(item=>{
             if (item.isUse){
                 flag = false
             }
          })
          this.noUse = flag

      },


      // 查询可领取的优惠劵
      getMyCouponList(){
          let that = this;
          // 用户绑定门店
          this.$api.getMyCouponList({
              type:0,
              pageNum: 1,
              pageSize: 1000,
          }).then((res)=>{
              console.log(res)
              this.countsList = res.data.rows;
          }).catch(() =>{
              uni.showToast({
                  title: "操作失败"
              })
          })
      },

  },
};
</script>
 <style lang="scss" scoped>
     @import '/common/css/common.css';
     @import './index.rpx.scss';
</style>