jje_uniapp/orderPages/receiveCoupons/index.vue

<template>
  <view class="page" :style="{'height':countsList.length>0?'':'100vh'}">
    <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-col" v-for="(item,index) in countsList" :key="index">
        <view class="row-list flex-row justify-start">
          <view class="h-text flex-col justify-center ">
            <view class="money">
              <text class="money" v-if="item.discountsType == 2">{{item.discount}}折</text>
              <text class="money" v-else>{{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">
              <text v-if="item.validType == 1">领取后{{ item.effectiveDays }}天内有效</text>
              <view v-else>
                <view>使用期限：{{item.startTime.substring(0,10)}}  </view>
                <view> 至 {{item.endTime.substring(0,10)}}</view>
              </view>
            </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"></u-icon>
            </view>
          </view>

          <view class="h-right-content flex-col justify-center ">
            <view class="btn" @click="gotoReceiveCoupon(item)">
              <text>立即领取</text>
            </view>
          </view>
        </view>
        <view v-if="showRemarkId == item.id" class="remark" style="text-indent:unset">
          <view>
            可用门店:
            <text>{{ item.useStoreDesc }}</text>
          </view>
          <view v-if="item.remark !=null">
            使用说明:
            <text>{{ item.remark }}</text>
          </view>
          <text v-else class="remarkText">该优惠券暂无使用说明</text>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
export default {
  data() {
    return {
      countsList: [],
      showRemarkId: '',
    };
  },
  onLoad(option) {
    this.getUserDiscountsList()
  },

  methods: {


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

      } else {
        this.showRemarkId = item.id

      }
    },


    // 领取优惠劵
    gotoReceiveCoupon(item) {
      this.$api.claimCoupon({id: item.id}).then((res) => {
        uni.showToast({
          title: "领取成功"
        })
        // 查询可领取的优惠劵
        this.getUserDiscountsList();
      })
    },

    // 查询可领取的优惠劵
    getUserDiscountsList() {
      let that = this;
      // 用户绑定门店
      this.$api.getUserDiscountsList().then((res) => {
        console.log(res.data.data)
        this.countsList = res.data.data;
      }).catch(() => {
        uni.showToast({
          title: "操作失败"
        })
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>