jje_uniapp/orderPages/useCoupons/index.vue

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

        <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="row-list flex-row justify-start" v-for="(it,i) in 10" @click="useCoupons(i)">
                    <view class="h-text flex-col justify-center ">
                        <view class="money">
                            <text>￥{{item.discountsPrice || '100'}}</text>
                        </view>
                        <view class="desc">
                            <text>{{item.name || '优惠券名字'}}</text>
                        </view>
                    </view>

                    <view class="h-center-content flex-col ">
                        <view class="h-value">
                            <text>门店通用</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>

                    <view class="h-right-content flex-col justify-center ">
                            <u-icon v-if="index == i " 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>
            </scroll-view>
        </view>
        <view>
            <view class="btn">
                <text>确定</text>
            </view>
        </view>


  </view>
</template>
 <script>
export default {
  data() {
    return {
        index:-1,
        noUse:true,
        windowHeight:'',
        scrollViewHeight:''
    };
  },
  onLoad(option) {
      let sysInfo = uni.getSystemInfoSync()
      this.windowHeight =sysInfo.windowHeight +'px'
      this.scrollViewHeight =sysInfo.windowHeight -(sysInfo.windowWidth/750)*252 +'px'
  },
  computed: {

  },
  methods: {
      noUseChange(){
          this.noUse = !this.noUse
          if (this.noUse){
              this.index = -1
          }
      },
      useCoupons(i){
          this.noUse = false
          this.index = i
      }

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