xuxueyang
2024-09-26 05bd41aab8c9dba2cf7afcd78493415761f11d9d
sub_pages/customer/coupon/good-all.vue
@@ -1,24 +1,26 @@
<template>
   <view class="good-list-container">
      <view class="top-bg img100 relative" :style="{'padding-top':(StatusBar)+'px','line-height':CustomBar+'rpx' }">
         <image class="component-bg" src="../../../static/images/customer/coupon/good-top-bg.png"
         <!-- ../../../static/images/customer/coupon/good-top-bg.png -->
         <image class="component-bg"
            src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a9/a9731b0037924324a3d3318dfa7d10c5LZk6JsSC33ua754767bf8c714154f06bbd5b4d905174.png"
            mode="scaleToFill" />
         <view class="title">
            <uni-icons class="icon" type="left" size="24"></uni-icons>
            <uni-icons class="icon" type="left" size="24" @click="backpage()"></uni-icons>
            积分兑换
         </view>
         <view class="flex point-info">
            <view class="point-record m-r-a">
               <view class="text-center title">我的积分</view>
               <view class="flex">
               <view class="flex" @click="goto('/sub_pages/customer/coupon/point-history',true)">
                  <image src="../../../static/images/customer/coupon/icon-point.png" class="point-icon">
                  </image>
                  1552
                  {{self_point}}
                  <uni-icons class="icon" type="right" size="32"></uni-icons>
               </view>
            </view>
            <view class="m-l-a m-r-0 rule">
            <view class="m-l-a m-r-0 rule" @click="goto('/pages/help/content?id=积分规则',false)">
               <view class="flex w-fit m-l-a m-r-15">
                  <view class="m-r-10">规则</view>
                  <image src="../../../static/images/customer/coupon/icon-rule.png" class="rule-icon">
@@ -46,15 +48,19 @@
         <view class="good-container p15 flex">
            <view v-for="(item,index) of list" :key="index" class="good-item" @click="toDetail(item)">
               <image class="cover" :src="item.cover" :lazy-load="true" mode="scaleToFill">
               <image class="cover" :src="item.cover" :lazy-load="true" mode="scaleToFill"
                  :class="[item.stock===0?'component-stock-zero':'']">
               </image>
               <view class="title">
                  {{item.name}}
               </view>
               <view class="flex score-info">
                  <view><span class="score">{{item.point||'-'}}</span>积分</view>
                  <view class="button m-l-a m-r-0" @click.stop="exchange('good',item)">兑换</view>
                  <view>
                     <view><span class="score">{{item.point||'-'}}</span> 积分</view>
                     <view class="desc-gray">库存:<span class="">{{item.stock||'0'}}</span></view>
                  </view>
                  <view class="button m-l-a m-r-0 m-t-20" @click.stop="exchange('good',item)">兑换</view>
               </view>
            </view>
         </view>
@@ -76,14 +82,18 @@
                     {{item.couponName||'-'}}
                  </view>
                  <view class="time">
                     领取后{{item.usageTimeNum||''}}{{item.usageTimeTypeName||''}}有效
                     {{item.getStartDate||'领取后'}}{{item.getEndDate&&(' 至 ' + item.getEndDate )||''}}有效
                  </view>
                  <view class="flex">
                     <view class="t-red">
                        {{item.point||'0'}}积分
                     </view>
                     <view class="button m-l-a m-r-0" @click="exchange('coupon',item)">
                        兑换
                     <view class="m-l-10 desc-gray">
                        库存:{{item.couponAmount||'0'}}
                     </view>
                     <view class="button m-l-a m-r-15" :class="[item.couponAmount===0?'over':'']"
                        @click="exchange('coupon',item)">
                        {{item.couponAmount===0?'已售磬':'兑换'}}
                     </view>
                  </view>
               </view>
@@ -97,13 +107,32 @@
<script>
   export default {
      computed: {
         self_point() {
            if (this.currentInfo.currentPoint) {
               if (this.currentInfo.currentPoint >= 10000) {
                  return (this.currentInfo.currentPoint / 10000 + '万')
               } else {
                  return this.currentInfo.currentPoint
               }
            }
            return 0
         }
      },
      methods: {
         changeTab(flg) {
            this.flg = '' + flg
            this.listApi = this.tabs[flg].api
            this.list = []
            this.refreshList()
         },
         async exchange(type, item) {
            if (item.stock === 0 || item.couponAmount === 0) {
               this.$message.showToast('库存为0,无法兑换')
               return
            }
            var api = ''
            if (type == 'good') {
               api = '/api/customer/point/goods/exchange'
@@ -120,11 +149,22 @@
               data: {
                  couponId: item.id,
                  goodsId: item.id, //兼容2个
                  num: 1
               }
            })
            this.$message.hideLoading()
            if (code == 0) {
               this.$message.showToast('兑换成功')
               //刷新积分
               this.$store.dispatch('getCurrentInfo');
               await this.$message.showToast('兑换成功')
               if (type == 'good') {
                  item.stock -= 1
                  this.$forceUpdate()
               }
               if (type == 'coupon') {
                  item.couponAmount -= 1
                  this.$forceUpdate()
               }
            }
         },
         toDetail(item) {
@@ -132,9 +172,9 @@
               url: '/sub_pages/customer/coupon/good-detail?id=' + item.id
            })
         },
         changeScore(item){
            this.query.pointLower = item.min || undefined
            this.query.pointUpper = item.max || undefined
         changeScore(item) {
            this.query.pointLower = item.min || 0
            this.query.pointUpper = item.max || 990000
            this.refreshList()
         }
      },
@@ -151,13 +191,14 @@
               },
               {
                  name: '优惠券',
                  api: '/api/v2/coupon/app/activy/list',
                  // api: '/api/v2/coupon/app/activy/list',
                  api: '/api/v2/coupon/point/active/list',
               },
            ],
            query: {
               pointLower: 1001,
               pointUpper: 3000
               pointLower: 0,
               pointUpper: 1000
            },
            scores: [{
                  min: 0,
@@ -184,6 +225,14 @@
      },
      onLoad() {
         this.listApi = '/api/customer/point/goods/list'
         this.getList()
      },
      async onPullDownRefresh() {
         //刷新积分和刷新商品
         this.$store.dispatch('getCurrentInfo');
         // this.list = []
         await this.refreshList()
         uni.stopPullDownRefresh()
      },
      onReachBottom() {
@@ -193,6 +242,8 @@
</script>
<style lang="scss" scoped>
   @import './coupon.scss';
   .good-list-container {
      .good-container {
         .good-item {
@@ -208,13 +259,12 @@
            }
            .title {
               padding-top: 18rpx;
               padding-bottom: 18rpx;
               padding: 18rpx 18rpx 0rpx 18rpx;
               font-weight: 600;
               font-size: 32rpx;
               color: #000000;
               line-height: 44rpx;
               text-align: center;
               text-align: left;
            }
            .score-info {
@@ -223,6 +273,7 @@
               font-weight: 400;
               font-size: 24rpx;
               color: #44775A;
               padding: 18rpx;
               padding-bottom: 28rpx;
               .score {
@@ -240,6 +291,13 @@
               font-weight: 400;
               font-size: 24rpx;
               color: #44775A;
               text-align: center;
               line-height: 46rpx;
            }
            .button.over {
               color: #747374;
               border: 2rpx solid #747374;
            }
         }
@@ -256,8 +314,10 @@
      .query-scores {
         overflow-x: scroll;
         width: max-content;
         // width: max-content;
         .item {
            min-width: fit-content;
            padding-left: 16rpx;
            padding-right: 16rpx;
            text-align: center;
@@ -268,7 +328,7 @@
            height: 50rpx;
            border-radius: 26rpx;
            // width: fit-content;
         }
         .item.active {
@@ -345,7 +405,7 @@
            .icon {
               position: absolute;
               left: 20rpx;
               left: 0rpx;
               z-index: 1;
            }
         }