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">

          <view v-if="item.unavailableWeeklyTimes || item.unavailableTimeRanges">
            不可用日期:
            <view v-if="item.unavailableWeeklyTimes">{{ parseWeeklyTimes(item.unavailableWeeklyTimes) }}</view>
            <view v-if="item.unavailableTimeRanges">{{ parseTimeRanges(item.unavailableTimeRanges) }}</view>
          </view>
          <view v-if="item.delayEffectiveDays > 0">
            生效时间:
            <text>购买后{{item.delayEffectiveDays}}天生效</text>
          </view>

          <view>
            可用门店:
            <text>{{ item.useStoreDesc }}</text>
          </view>
          <view>
            适用项目:
            <text>{{ item.useServiceDesc }}</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: '',
    };
  },

  computed: {
    // 解析 unavailableWeeklyTimes，将 "3,4,5" 转换为 ["星期二", "星期三", "星期四"]
    parseWeeklyTimes() {
      return function(times) {
        if (!times) return '';
        const arr = times.split(',');
        const weekMap = {
          '1': '星期日',
          '2': '星期一',
          '3': '星期二',
          '4': '星期三',
          '5': '星期四',
          '6': '星期五',
          '7': '星期六'
        };
        return arr.map(item => weekMap[item]).join('、');
      };
    },
    // 解析 unavailableTimeRanges，将 JSON 字符串转换为可读格式
    parseTimeRanges() {
      return function(ranges) {
        if (!ranges) return '';
        try {
          const arr = JSON.parse(ranges);
          return arr.map(item => {
            const begin = item.beginTime?.split?.(' ')?.[0] || '';
            const end = item.endTime?.split?.(' ')?.[0] || '';
            return begin && end ? `${begin} - ${end}` : '';
          }).filter(Boolean).join('；');
        } catch (e) {
          return '';
        }
      };
    }
  },

  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>