xuxueyang
2024-09-10 7868120e5a449760f81caac6f2e3c75924964268
sub_pages/customer/coupon/coupon-self.vue
@@ -1,33 +1,39 @@
<template>
   <view class="coupon-container">
      <view class="p10">
      <view class="p10" v-if="source!=='shopping'">
         <top-tabs :tabs="tabs" :flg="flg" @change="changeTab" type="coupon">
         </top-tabs>
      </view>
      <view class="">
         <view v-for="(item,index) of list" :key="index" class="coupont-item" :class="[query.status]">
         <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
         <view v-for="(item,index) of list" :key="index" class="coupont-item" :class="[query.status]"
            @click="selectCoupon(item)">
            <view class="flex container img100">
               <view class="info-price">
                  <view class="price1">¥7.70</view>
                  <view class="price2">满¥100可用</view>
                  <view class="price1">
                     {{item.maxDiscountAmount?(`${item.maxDiscountAmount}折`):(`¥${item.couponDiscountValue}`)}}
                  </view>
                  <view class="price2">{{item.minOrderAmount?(`满¥${item.minOrderAmount}可用`):'无门槛'}}</view>
               </view>
               <view class="info flex1">
                  <view class="title">
                     七夕专属福利券
                     {{item.couponName||'-'}}
                  </view>
                  <view class="time">
                     有效期至2024-07-26 09:58:30
                     {{item.usageEndDate&&('有效期至:'+item.usageEndDate) || '长久有效'}}
                  </view>
               </view>
            </view>
            <view class="tip">
               <span class="t-red">*</span>此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用,不可与其他优惠同享、不可叠加使用
               <span
                  class="t-red">*</span>{{item.couponDescription || '此券每人限领1张。仅限用于花满芜鲜花交易平台鲜切花花款满额使用,不可与其他优惠同享、不可叠加使用'}}
            </view>
         </view>
      </view>
      <view style="min-height: 130rpx;"></view>
      <view class="bottom-button" @click="getCoupon">领取优惠券</view>
      <view style="min-height: 130rpx;" v-if="source!=='shopping'"></view>
      <view class="bottom-button" v-if="source!=='shopping'" @click="getCoupon">领取优惠券</view>
   </view>
</template>
@@ -58,18 +64,40 @@
            query: {
               status: 'unused'
            },
            list: []
            list: [],
            source: ''
         }
      },
      async onLoad() {
         this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
      async onLoad(options) {
         if (options.source) {
            this.source = options.source || ''
         }
         if (this.source === 'shopping') {
            //只展示可用的
            this.page.size = 100
            this.listApi = '/api/v2/coupon/app' + `/mine/unused/list`
         } else {
            this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
         }
         await this.$store.dispatch('sign_clear', 'coupon')
         this.getList()
      },
      onReachBottom() {
         this.getMore()
      },
      methods: {
         async selectCoupon(item) {
            if (this.source == 'shopping') {
               await this.$store.dispatch('cache_coupon_select', item)
               uni.navigateBack()
            }
         },
         changeTab(flg) {
            this.flg = '' + flg
            this.query.status = this.tabs[flg].status
            this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
            this.refreshList()
@@ -95,7 +123,7 @@
</script>
<style lang="scss" scoped>
   @import  './coupon.scss';
   @import './coupon.scss';
   .coupon-container {
@@ -109,7 +137,7 @@
         }
      }
      .bottom-button {
         width: 690rpx;
         height: 90rpx;
@@ -124,6 +152,8 @@
         color: #20613D;
         text-align: center;
         line-height: 90rpx;
         z-index: 99;
         background-color: #fbfbfb;
      }
   }
</style>