1.优惠券规则修改 2.已使用的优惠券样式修改

陶杰

2024-10-11 ffd407012d000d1a1b9d36c01646d2cdb22675b4

 sub_pages/customer/coupon/coupon-self.vue

@@ -1,37 +1,63 @@
<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.stop="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">
                     七夕专属福利券
                  <view class="title flex">
                     {{item.couponName||'-'}}
                  <!--    <radio  :checked="cache_coupon.id===item.id"
                     v-if="source==='shopping'"
                        class="select-coupon"></radio> -->
                     <view :style="{ 'margin-right': '20rpx'}" v-if="source==='shopping'"
                          class="component-radio m-l-a" :class="[cache_coupon.id===item.id?'cur':'']">
							
                     </view>

                  </view>
                  <view class="time">
                     有效期至2024-07-26 09:58:30
                     <!-- {{item.effectiveStart&&(item.effectiveStart+' 生效,') || ''}} -->
                     {{item.effectiveEnd&&('有效期至 '+item.effectiveEnd) || '长久有效'}}
                  </view>
               </view>
               <view class="img-out">
						
               </view>
               <view class="img-used">
						
               </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>

<script>
   import {
      mapState
   } from 'vuex'
   export default {
      data() {
         return {
@@ -58,18 +84,77 @@
            query: {
               status: 'unused'
            },
            list: []
            list: [],
            source: '',
            paymoney: -1

         }
      },
      async onLoad() {
         this.listApi = '/api/v2/coupon/app' + `/mine/${this.query.status}/list`
      async onLoad(options) {
         if (options.source) {
            this.source = options.source || ''
         }
         if (options.paymoney) {
            this.paymoney = parseFloat(options.paymoney).toFixed(2)
         }
         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') {
               if (this.cache_coupon.id === item.id) {
                  await this.$message.confirm('是否取消使用此优惠券')
                  await this.$store.dispatch('cache_coupon_select', {})
                  uni.navigateBack()
                  return
               }
               console.log('paymoney',this.paymoney)
               if (this.paymoney >= 0) {
                  //判断是否可以选择使用
                  if (item.couponDiscountType === 'zero') {
                     // if (this.cache_coupon.couponDiscountValue > this.paymoney) {
                     //    this.$message.showToast('订单价格小于优惠券优惠额度')
                     //    return
                     // }
                  } else if (item.minOrderAmount && item.minOrderAmount > 0) {
                     // if (this.cache_coupon.minOrderAmount > this.paymoney) {
                     //    this.$message.showToast('订单价格')
                     //    return
                     // }
                     if (this.paymoney < item.minOrderAmount) {
                        this.$message.showToast('订单价格不满足使用条件')
                        this.$nextTick(()=>{
                           this.$forceUpdate()
                        })
                        return
                     }
                  } else {
                     // if (this.cache_coupon.couponDiscountValue > this.paymoney) {
                     //    this.$message.showToast('订单价格小于优惠券优惠额度')
                     //    return
                     // }
                  }
               }
               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()
@@ -91,11 +176,21 @@
         uni.stopPullDownRefresh()

      },
      computed: {
         ...mapState({
            cache_coupon: state => {
               return state.cache.coupon || {}
            },
            cache_goods: state => {
               return state.cache.goods || []
            },
         }),
      }
   }
</script>

<style lang="scss" scoped>
   @import  './coupon.scss';
   @import './coupon.scss';

   .coupon-container {

@@ -108,8 +203,16 @@
            display: unset;
         }
      }
		
      .coupont-item.used {
         filter: grayscale(100%);
		
         .img-used {
            display: unset;
         }
      }

 

      .bottom-button {
         width: 690rpx;
         height: 90rpx;
@@ -124,6 +227,8 @@
         color: #20613D;
         text-align: center;
         line-height: 90rpx;
         z-index: 99;
         background-color: #fbfbfb;
      }
   }
</style>