From 440b4ab9d4278d3f9c13b004d2c2289f45254cbc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期二, 19 十一月 2024 17:29:06 +0800
Subject: [PATCH] 添加积分记录，修改位置获取
---
pages/pointsMall/index.vue | 120 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 91 insertions(+), 29 deletions(-)
diff --git a/pages/pointsMall/index.vue b/pages/pointsMall/index.vue
index ce8c64f..b10ffdc 100644
--- a/pages/pointsMall/index.vue
+++ b/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,22 +464,47 @@
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;
- image{
- width:44rpx;
- height: 44rpx;
+ width:100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .goods-item-points-left{
+ display: flex;
+ align-items: center;
+ image{
+ width:44rpx;
+ height: 44rpx;
+ }
+ text{
+ color: #e6980f;
+ font-size:36rpx;
+ }
}
- text{
- color: #e6980f;
+ .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;
}
}
}
--
Gitblit v1.9.3