添加积分商品详情，替换首页海报，调整样式，添加积分规则

Liuyi

2024-11-20 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc

 pages/pointsMall/pointsGoodsDetail/index.vue

@@ -1,9 +1,10 @@
<script setup>
   import {ref,onMounted} from 'vue'
   import { goodsGetByIdApi } from '../../../api/index.js' 
   import { goodsGetByIdApi,integralConvertApi } from '../../../api/index.js' 
   import { onLoad } from '@dcloudio/uni-app'
   import { BASE_URL } from '../../../config/baseUrl.js';
   
   const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
   const baseUrl = ref(BASE_URL)
   
   const detailInfo = ref({})
@@ -12,6 +13,25 @@
         detailInfo.value = res.data
         console.log('detailInfo',detailInfo.value)
      })
   }
   //积分兑换
   async function integralConvert(){
      if(detailInfo.value.useIntegral <= Number(userInfo.value.integral)){
         await integralConvertApi({userId:userInfo.value.id,goodsId:detailInfo.value.id}).then(async(res) =>{
            if(res.code == 200){
               uni.showToast({
                  title:'兑换成功！',
                  icon:'none'
               })
               await getGoodsDetail(goodsId)
            }
         })
      }else{
         uni.showToast({
            title:'积分余额不足！',
            icon:'none'
         })
      }
   }
   let goodsId
   onLoad(async(option) =>{
@@ -23,25 +43,36 @@
   <view class="container">
      <point-navbar title='商品详情'></point-navbar>
      <view class="content">
         <view class="image">
            <image :src="baseUrl + '/upload'+ detailInfo.detailsUrl"></image>
         <view class="image-box">
            <image class="image" :src="baseUrl + '/upload'+ detailInfo.detailsUrl" mode="aspectFit"></image>
         </view>
         <view class="detail">
            <view class="detail-info">
               <view class="detail-info-text">
                  <view>【{{detailInfo.name}}】</view>
                  <view>
                     <rich-text :nodes='detailInfo.describe'></rich-text>
                     <text class="detail-info-text-title">【{{detailInfo.name}}】</text>
                     <text class="detail-info-text-decribe">商品描述性文字占位商品描述性文字占位商品描述性文字占位</text>
                  </view>
               </view>
               <text>价值{{detailInfo.price}}￥</text>
               <view class="detail-info-price">
                  <text class="detail-info-price-text">价值：</text>
                  <text class="detail-info-price-num">{{detailInfo.price}}￥</text>
               </view>
            </view>
            <view class="detail-exchange">
               <view class="detail-exchange-points">
                  <!-- <image></image> -->
                  <text>1000</text>
                  <image class="detail-exchange-points-image" src="../../../static/images/pointMall/advert/money1.svg"></image>
                  <text class="detail-exchange-points-num">{{detailInfo.useIntegral}}</text>
               </view>
               <view class="detail-exchange-points">兑换</view>
               <view class="detail-exchange-points-btn" @click="integralConvert"><text>兑&nbsp;&nbsp;换</text></view>
            </view>
            <view class="detail-stock">库存：{{detailInfo.stock}}</view>
            <view class="detail-tips">
               <view class="detail-tips-title"><text>温馨提示</text></view>
               <view class="detail-tips-content">
                  <view class="detail-tips-content-text1">1、兑换后请凭兑换码到柜台领取商品。</view>
                  <view class="detail-tips-content-text2">2、兑换后的商品不可退换、积分不可退还。</view>
               </view>
            </view>
         </view>
      </view>
@@ -56,9 +87,95 @@
   .content{
      width:100%;
      height:calc(100vh - 176rpx);
      background:linear-gradient(to bottom,#fef7da,#FFF);
      background:linear-gradient(to bottom,#fef7da,#f7f7f7);
      padding:50rpx 32rpx 100rpx;
      box-sizing: border-box;  
      box-sizing: border-box; 
      .image-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 550rpx;
         background:linear-gradient(to bottom,#FFF,#fef7da);
         border-radius:20rpx;
         // margin-bottom:30rpx;
         .image{
               height:500rpx;
         }
      }
      .detail{
         padding:20rpx;
         box-sizing: border-box;
         width: 100%;
         height: 500rpx;
         background: #FFF;
         border-radius:20rpx;
         .detail-info{
            width:100%;
            color: #434139;
            font-weight:500;
            margin-bottom:10rpx;
            .detail-info-text{
               margin-bottom:10rpx;
               .detail-info-text-decribe{
                  color: #545147;
               }
            }
            .detail-info-price{
               color:#d3481e;
            }
         }
         .detail-exchange{
            display: flex;
            justify-content: space-between;
            margin-bottom:10rpx;
            .detail-exchange-points{
               display: flex;
               align-items: center;
            }
            .detail-exchange-points-image{
               width: 50rpx;
               height: 50rpx;
            }
            .detail-exchange-points-num{
               color: #e6980f;
               font-weight:600;
               font-size:46rpx;
            }
            .detail-exchange-points-btn{
               width:180rpx;
               height:60rpx;
               background:linear-gradient(to right,#ff9249,#ffb170);
               border-radius:30rpx;
               color: #fff;
               font-size:32rpx;
               font-weight:500;
               display: flex;
               align-items: center;
               justify-content: center;
            }
         }
         .detail-stock{
            color: #919191;
            font-size:24rpx;
            margin-bottom:50rpx;
         }
         .detail-tips{
            .detail-tips-title{
               color: #434139;
               margin-bottom:30rpx;
            }
            .detail-tips-content{
               display: flex;
               flex-direction: column;
               color: #74716c;
               font-size:24rpx;
               .detail-tips-content-text1{
                  margin-bottom:10rpx;
               }
            }
         }
      }
   }
}
</style>