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

Liuyi

2024-11-20 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc

 pages/pointsMall/index.vue

@@ -1,39 +1,69 @@
<script setup>
   import {ref,onMounted} from 'vue'
   import headImg from '../../static/images/index/head.png'
   import { goodsGetApi,goodsSearchTypeApi } from '../../api/index.js' 
   import { goodsGetApi,goodsSearchTypeApi,integralConvertApi,getUserInfo } from '../../api/index.js' 
   import { BASE_URL } from '../../config/baseUrl';
   const baseUrl = ref(BASE_URL)
   import { onShow } from '@dcloudio/uni-app'
   
   const baseUrl = ref(BASE_URL)
   const userInfo = ref(JSON.parse(uni.getStorageSync('userInfo')))
   
   const typeList = ref([
      {value:'1',name:'全部分类'},
      {value:'2',name:'零食'},
      {value:'3',name:'电子设备'},
      {value:'4',name:'洗护用品'},
      {value:'5',name:'其他'},
      {value:'5',name:'其他'},
      {value:'5',name:'其他'},
      {value:'5',name:'其他'},
      // {value:'1',name:'全部分类',active:1},
      // {value:'2',name:'零食',active:0},
      // {value:'3',name:'电子设备',active:0},
      // {value:'4',name:'洗护用品',active:0},
      // {value:'5',name:'其他',active:0},
      // {value:'5',name:'其他',active:0},
      // {value:'5',name:'其他',active:0},
      // {value:'5',name:'其他',active:0},
   ])
   const goodsList = ref([
      // {id:'1',imageUrl:'',name:'商品名称',price:'50.00',useIntegral:'1000',stock:102},
		
   ])
   
   //查询商品类型
   async function getGoodsTypeList(){
      await goodsSearchTypeApi({limit:100,page:1}).then((res) =>{
         typeList.value = res.data.list
         typeList.value.unshift({id:'',name:'全部商品'})
         typeList.value.unshift({id:'',name:'全部商品',active:1})
      })
   }
   //查询商品列表
   async function getGoodsList(categoryId){
      await goodsGetApi(categoryId).then((res) =>{
         goodsList.value = res.data
         console.log('132')
         console.log('获取商品列表')
      })
   }
   //选中商品类型
   async function changeType(typeId,active,e){
      typeList.value.forEach((item,index) =>{
         if(index == e){
            item.active = 1
         }else{
            item.active = 0
         }
      })
      await getGoodsList(typeId)
   }
   //积分兑换
   async function integralConvert(goodsId,goodsIntegral){
      if(goodsIntegral <= Number(userInfo.value.integral)){
         await integralConvertApi({userId:userInfo.value.id,goodsId:goodsId}).then((res) =>{
            if(res.code == 200){
               uni.showToast({
                  title:'兑换成功！',
                  icon:'none'
               })
            }
         })
      }else{
         uni.showToast({
            title:'积分余额不足！',
            icon:'none'
         })
      }
   }
   function navBack(){
      uni.navigateBack()
@@ -46,9 +76,32 @@
         })
      }
   }
   //更新用户积分信息
   async function updateUserInfo(){
      await getUserInfo().then((res) =>{
         if(res.code == 200){
            userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
            userInfo.value.integral = res.data.userInfo.integral
            uni.setStorageSync('userInfo',JSON.stringify(userInfo.value))
         }
      })
   }
   onMounted(async() =>{
      await getGoodsTypeList()
      await getGoodsList('')
      console.log('onMounted')
   })
   onShow(async() =>{
      await getGoodsList('')
      typeList.value.forEach((item,index) =>{
         if(index == 0){
            item.active = 1
         }else{
            item.active = 0
         }
      })
      await updateUserInfo()
      console.log('onShow')
   })
   
</script>
@@ -66,17 +119,17 @@
                  <image src="../../static/images/pointMall/points.svg"></image>
               </view>
               <view class="info">
                  <text class="info-name">测试用户123123132</text>
                  <text class="info-name">{{userInfo.userName}}</text>
                  <view class="info-points">
                     <text class="text1">我的积分:</text>
                     <text class="text2">1000</text>
                     <text class="text2">{{userInfo.integral}}</text>
                     <view class="points-icon">
                        <image src="../../static/images/pointMall/points-icon.svg"></image>
                     </view>
                  </view>
               </view>
            </view>
            <view class="header-right">
            <view class="header-right" @click="navTo('/pages/pointsMall/pointsrule/index')">
               积分规则
            </view>
         </view>
@@ -100,7 +153,7 @@
         </view>
         <view class="nav-box">
            <view class="nav-item" @click="navTo('/pages/pointsMall/pointsGetRecord/index')">
               <text>积分明细</text>
               <text>积分获取明细</text>
               <image src="../../static/images/pointMall/nav1.svg"></image>
            </view>
            <view class="nav-item" @click="navTo('/pages/pointsMall/pointsExchangeRecord/index')">
@@ -112,7 +165,7 @@
      <view class="content">
         <view class="type-box">
            <scroll-view scroll-x="true">
               <view v-for="(item,index) in typeList" :key="index" class="type-item" @click="getGoodsList(item.id)">
               <view v-for="(item,index) in typeList" :key="index" class="type-item" :style="{color:item.active == 1 ? '#f09042' : '#919191'}"  @click="changeType(item.id,item.active,index)">
                  <text>{{item.name}}</text>
               </view>
            </scroll-view>
@@ -134,7 +187,7 @@
                     <text>{{item.useIntegral}}</text>
                     <image src="../../static/images/pointMall/advert/money1.svg"></image>
                  </view>
                  <view class="goods-item-points-right">
                  <view class="goods-item-points-right" @click="integralConvert(item.id,item.useIntegral)">
                     <text>兑换</text>
                  </view>
               </view>
@@ -222,6 +275,7 @@
                  justify-content:space-evenly;
                  padding-top:10rpx;
                  box-sizing: border-box;
                  width:350rpx;
                  .info-name{
                     color: #58574e;
                  }
@@ -455,6 +509,7 @@
               box-sizing: border-box;
               border-radius: 20rpx;
               position: relative;
               background:linear-gradient(#fff,#e8e8e8);
               .goods-item-img{
                  width:80%;
                  margin: 0 auto;