1.部分图片替换

陶杰

2024-10-16 ef240131386f3f37cd3d0b232b4d237fb73d1132

 sub_pages/customer/coupon/good-all.vue

@@ -1,30 +1,35 @@
<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" @click="backpage"></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">
                  <image src="../../../static/images/customer/coupon/icon-point.png" class="point-icon">
               <view class="flex" @click="goto('/sub_pages/customer/coupon/point-history',true)">
                  <image src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/82/82d4e36b7d124dab843427c36454da93icon-point.png" class="point-icon">
                  </image>
                  {{currentInfo.currentPoint || 0}}
                  {{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">
                  <image src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/da/da4bfa0af86345a9ab3ce383b7fac830icon-rule.png" class="rule-icon">
                  </image>
               </view>
               <image class="good-point-icon" src="../../../static/images/customer/coupon/good-point-icon.png"
               <!-- src="../../../static/images/customer/coupon/good-point-icon.png" -->
               <image class="good-point-icon"
               src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/db/db114326a52e4f6d92f1d6769748e8e6yHXbwXV7T1A38e325506998c85122d1e6a0a1328f7b0.png"
					 
                  mode="scaleToFill" />
            </view>
         </view>
@@ -46,15 +51,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 +85,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 +110,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,12 +152,22 @@
               data: {
                  couponId: item.id,
                  goodsId: item.id, //兼容2个
                  num:1
                  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) {
@@ -133,7 +175,7 @@
               url: '/sub_pages/customer/coupon/good-detail?id=' + item.id
            })
         },
         changeScore(item){
         changeScore(item) {
            this.query.pointLower = item.min || 0
            this.query.pointUpper = item.max || 990000
            this.refreshList()
@@ -152,7 +194,8 @@
               },
               {
                  name: '优惠券',
                  api: '/api/v2/coupon/app/activy/list',
                  // api: '/api/v2/coupon/app/activy/list',
                  api: '/api/v2/coupon/point/active/list',

               },
            ],
@@ -185,6 +228,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() {
@@ -194,6 +245,8 @@
</script>

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

   .good-list-container {
      .good-container {
         .good-item {
@@ -209,7 +262,7 @@
            }

            .title {
               padding:18rpx 18rpx 0rpx 18rpx;
               padding: 18rpx 18rpx 0rpx 18rpx;
               font-weight: 600;
               font-size: 32rpx;
               color: #000000;
@@ -223,7 +276,7 @@
               font-weight: 400;
               font-size: 24rpx;
               color: #44775A;
               padding:18rpx;
               padding: 18rpx;
               padding-bottom: 28rpx;

               .score {
@@ -244,6 +297,11 @@
               text-align: center;
               line-height: 46rpx;
            }

            .button.over {
               color: #747374;
               border: 2rpx solid #747374;
            }
         }

         .good-item:nth-child(2n+1) {
@@ -259,6 +317,7 @@

      .query-scores {
         overflow-x: scroll;

         // width: max-content;
         .item {
            min-width: fit-content;
@@ -272,7 +331,7 @@
            height: 50rpx;
            border-radius: 26rpx;
            // width: fit-content;
				

         }

         .item.active {