添加积分记录，修改位置获取

Liuyi

2024-11-19 440b4ab9d4278d3f9c13b004d2c2289f45254cbc

 pages/pointsMall/index.vue

@@ -1,10 +1,11 @@
<script setup>
   import {ref,onMounted} from 'vue'
   import headImg from '../../static/images/index/head.png'
   import pointsImg from '../../static/images/pointMall/advert/money1.svg'
   function navTo(){
      uni.navigateBack()
   }
   import { goodsGetApi,goodsSearchTypeApi } from '../../api/index.js' 
   import { BASE_URL } from '../../config/baseUrl';
   const baseUrl = ref(BASE_URL)
	
	
   const typeList = ref([
      {value:'1',name:'全部分类'},
      {value:'2',name:'零食'},
@@ -16,21 +17,47 @@
      {value:'5',name:'其他'},
   ])
   const goodsList = ref([
      {value:'1',name:'商品10号商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      {value:'1',name:'商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      {value:'1',name:'商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      {value:'1',name:'商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      {value:'1',name:'商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      {value:'1',name:'商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      {value:'1',name:'商品占位文字',goodsImage:headImg,pointsImage:pointsImg,points:'1000',stock:102},
      // {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:'全部商品'})
      })
   }
   //查询商品列表
   async function getGoodsList(categoryId){
      await goodsGetApi(categoryId).then((res) =>{
         goodsList.value = res.data
         console.log('132')
      })
   }
   function navBack(){
      uni.navigateBack()
   }
   //页面跳转
   function navTo(itemUrl){
      if(itemUrl){
         uni.navigateTo({
            url:itemUrl
         })
      }
   }
   onMounted(async() =>{
      await getGoodsTypeList()
      await getGoodsList('')
   })
	
</script>
<template>
   <view class="container">
      <view class="gradual-graph"></view>
      <view class="header">
         <view class="header-title">
            <image src="../../static/images/pointMall/back.svg" @click="navTo('/pages/index/index')"></image>
            <image src="../../static/images/pointMall/back.svg" @click="navBack('/pages/index/index')"></image>
            <text>积分商城</text>
         </view>
         <view class="header-detail">
@@ -72,12 +99,12 @@
            </view>
         </view>
         <view class="nav-box">
            <view class="nav-item">
            <view class="nav-item" @click="navTo('/pages/pointsMall/pointsGetRecord/index')">
               <text>积分明细</text>
               <image src="../../static/images/pointMall/nav1.svg"></image>
            </view>
            <view class="nav-item">
               <text>积分兑换</text>
            <view class="nav-item" @click="navTo('/pages/pointsMall/pointsExchangeRecord/index')">
               <text>兑换记录</text>
               <image src="../../static/images/pointMall/nav2.svg"></image>
            </view>
         </view>
@@ -85,22 +112,31 @@
      <view class="content">
         <view class="type-box">
            <scroll-view scroll-x="true">
               <view v-for="(item,index) in typeList" :key="index" class="type-item">
               <view v-for="(item,index) in typeList" :key="index" class="type-item" @click="getGoodsList(item.id)">
                  <text>{{item.name}}</text>
               </view>
            </scroll-view>
         </view>
         <view class="goods-box">
            <view v-for="(item,index) in goodsList" :key="index" class="goods-item">
               <image class="goods-img" :src="item.goodsImage" mode="widthFix"></image>
               <image @click="navTo(`/pages/pointsMall/pointsGoodsDetail/index?goodsId=${item.id}`)" class="goods-item-img" :src="baseUrl + '/upload' + item.imageUrl" mode="widthFix"></image>
               
               <view class="goods-item-name">
               <view class="goods-item-name" @click="navTo(`/pages/pointsMall/pointsGoodsDetail/index?goodsId=${item.id}`)">
                  <text>{{item.name}}</text>
               </view>
               
               <view class="goods-item-price" @click="navTo(`/pages/pointsMall/pointsGoodsDetail/index?goodsId=${item.id}`)">
                  <text>{{item.price}}￥</text>
               </view>
					
               <view class="goods-item-points">
                  <image :src="item.pointsImage"></image>
                  <text>{{item.points}}</text>
                  <view class="goods-item-points-left">
                     <text>{{item.useIntegral}}</text>
                     <image src="../../static/images/pointMall/advert/money1.svg"></image>
                  </view>
                  <view class="goods-item-points-right">
                     <text>兑换</text>
                  </view>
               </view>
               
               <view class="goods-item-stock">
@@ -418,8 +454,9 @@
               padding:40rpx 20rpx;
               box-sizing: border-box;
               border-radius: 20rpx;
               .goods-img{
                  width:90%;
               position: relative;
               .goods-item-img{
                  width:80%;
                  margin: 0 auto;
                  margin-bottom:50rpx;
               }
@@ -427,8 +464,19 @@
                  margin-bottom:10rpx;
                  color: #3d3d3d;
               }
               .goods-item-points{
               .goods-item-price{
                  margin-bottom:10rpx;
                  color: #d3481e;
                  font-size:30rpx;
               }
               .goods-item-points{
                  display: flex;
                  align-items: center;
                  width:100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .goods-item-points-left{
                  display: flex;
                  align-items: center;
                  image{
@@ -437,12 +485,26 @@
                  }
                  text{
                     color: #e6980f;
                        font-size:36rpx;
                     }
                  }
                  .goods-item-points-right{
                     width:110rpx;
                     height:40rpx;
                     background:linear-gradient(to right,#ffa260,#ffa260);
                     border-radius:20rpx;
                     color: #fff;
                     font-size:26rpx;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     letter-spacing:5rpx;
                  }
               }
               .goods-item-stock{
                  text{
                     color: #919191;
                     font-size:28rpx;
                     font-size:24rpx;
                  }
               }
            }