From 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 20 十一月 2024 17:19:57 +0800
Subject: [PATCH] 添加积分商品详情，替换首页海报，调整样式，添加积分规则
---
pages/pointsMall/index.vue | 93 +++++++++++++++++++++++++++++++++++++---------
1 files changed, 74 insertions(+), 19 deletions(-)
diff --git a/pages/pointsMall/index.vue b/pages/pointsMall/index.vue
index b10ffdc..6bc541a 100644
--- a/pages/pointsMall/index.vue
+++ b/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;
--
Gitblit v1.9.3