<script setup>
|
import {ref,onMounted} from 'vue'
|
import headImg from '../../static/images/index/head.png'
|
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:'零食'},
|
{value:'3',name:'电子设备'},
|
{value:'4',name:'洗护用品'},
|
{value:'5',name:'其他'},
|
{value:'5',name:'其他'},
|
{value:'5',name:'其他'},
|
{value:'5',name:'其他'},
|
])
|
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:'全部商品'})
|
})
|
}
|
//查询商品列表
|
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="navBack('/pages/index/index')"></image>
|
<text>积分商城</text>
|
</view>
|
<view class="header-detail">
|
<view class="header-left">
|
<view class="img">
|
<image src="../../static/images/pointMall/points.svg"></image>
|
</view>
|
<view class="info">
|
<text class="info-name">测试用户123123132</text>
|
<view class="info-points">
|
<text class="text1">我的积分:</text>
|
<text class="text2">1000</text>
|
<view class="points-icon">
|
<image src="../../static/images/pointMall/points-icon.svg"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="header-right">
|
积分规则
|
</view>
|
</view>
|
</view>
|
<view class="nav">
|
<view class="advert">
|
<view class="left-img">
|
<image class="img1" src="../../static/images/pointMall/advert/gift1.svg"></image>
|
<image class="img2" src="../../static/images/pointMall/advert/gift2.svg"></image>
|
<image class="img3" src="../../static/images/pointMall/advert/bag.svg"></image>
|
</view>
|
<view class="title">
|
<view>商品换购专区</view>
|
<view>积分购物</view>
|
</view>
|
<view class="right-img">
|
<view class="right-text">Go</view>
|
<image class="icon1" src="../../static/images/pointMall/advert/money.svg"></image>
|
<image class="icon2" src="../../static/images/pointMall/advert/money1.svg"></image>
|
</view>
|
</view>
|
<view class="nav-box">
|
<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" @click="navTo('/pages/pointsMall/pointsExchangeRecord/index')">
|
<text>兑换记录</text>
|
<image src="../../static/images/pointMall/nav2.svg"></image>
|
</view>
|
</view>
|
</view>
|
<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)">
|
<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 @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" @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">
|
<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">
|
<text>库存：</text>
|
<text>{{item.stock}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss" scoped>
|
.container{
|
position:relative;
|
.gradual-graph{
|
position:absolute;
|
right:-200rpx;
|
top:0;
|
width:400rpx;
|
height:500rpx;
|
border-radius:50%;
|
background: radial-gradient(closest-side,#fbd1a2 0%,#fef7da 100%);
|
z-index:1
|
}
|
.header{
|
width:100%;
|
height:350rpx;
|
background:#fef7da;
|
padding:100rpx 32rpx 0;
|
box-sizing: border-box;
|
z-index:-1;
|
.header-title{
|
display: flex;
|
align-items: center;
|
height:100rpx;
|
position: relative;
|
align-items: center;
|
image{
|
width:40rpx;
|
height:40rpx;
|
}
|
text{
|
position: absolute;
|
left:calc(50% - 100rpx);
|
width:200rpx;
|
text-align: center;
|
// background: #fbd1a2;
|
line-height:100rpx;
|
height: 100%;
|
color: #e5b25f;
|
font-weight:600;
|
font-size:36rpx;
|
}
|
}
|
.header-detail{
|
width:100%;
|
height:150rpx;
|
display:flex;
|
align-items:flex-end;
|
justify-content: space-between;
|
.header-left{
|
display: flex;
|
align-items: center;
|
.img{
|
background: #f3f8fa;
|
border-radius:50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width:110rpx;
|
height:110rpx;
|
image{
|
width:96rpx;
|
height:96rpx;
|
}
|
}
|
.info{
|
display: flex;
|
flex-direction: column;
|
margin-left:20rpx;
|
height:110rpx;
|
justify-content:space-evenly;
|
padding-top:10rpx;
|
box-sizing: border-box;
|
.info-name{
|
color: #58574e;
|
}
|
.info-points{
|
height:100%;
|
display: flex;
|
align-items: center;
|
.text1{
|
color: #747367;
|
margin-right:10rpx;
|
}
|
.text2{
|
color: #f3a62a;
|
font-size:36rpx;
|
font-weight:600;
|
font-family: Helvetica, Tahoma, Arial;
|
}
|
.points-icon{
|
height:100%;
|
padding-top:16rpx;
|
padding-left:4rpx;
|
box-sizing: border-box;
|
image{
|
width:40rpx;
|
height:40rpx;
|
transform:rotate(-45deg);
|
}
|
}
|
}
|
}
|
}
|
.header-right{
|
width:160rpx;
|
height:55rpx;
|
background:#fffef0;
|
text-align:center;
|
line-height:55rpx;
|
border-radius:10rpx;
|
font-size:30rpx;
|
color: #827964;
|
letter-spacing:1rpx;
|
z-index:2;
|
}
|
}
|
|
}
|
.nav{
|
width:100%;
|
height:360rpx;
|
background:linear-gradient(#fef7da 0%,#fef7da 50%,#f3f8fa 100%);
|
border-bottom:6rpx solid #f3f8fa;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
flex-direction: column;
|
// background: #b6c7f5;
|
.advert{
|
position: relative;
|
width:600rpx;
|
height:140rpx;
|
background:linear-gradient(140deg,#ffd49b 0%,#ffb682 30%,#ffd4a4 50%,#ff9172 80%,#ffb186 85%,#ff8e70 95%,#ffa181 100%);
|
border-radius:10rpx;
|
z-index:2;
|
.left-img{
|
.img1{
|
position: absolute;
|
top:10rpx;
|
left:-40rpx;
|
width:120rpx;
|
height:120rpx;
|
transform: rotate(-20deg);
|
}
|
.img2{
|
position: absolute;
|
left:50rpx;
|
top:55rpx;
|
left:-10rpx;
|
width:96rpx;
|
height:96rpx;
|
}
|
.img3{
|
position: absolute;
|
left:40rpx;
|
top:60rpx;
|
width:96rpx;
|
height:96rpx;
|
transform: rotate(10deg);
|
}
|
}
|
.title{
|
width:300rpx;
|
height:110rpx;
|
text-align: center;
|
display:flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content:space-between;
|
position:absolute;
|
top:10rpx;
|
left:150rpx;
|
// background: #f3f8fa;
|
view:first-child{
|
color:#fff;
|
font-size:46rpx;
|
font-weight:800;
|
text-shadow:3rpx 3rpx 3rpx #fa7062;
|
|
}
|
view:last-child{
|
width:180rpx;
|
height:44rpx;
|
background: linear-gradient(#ffd259,#ffa824);
|
border-radius:30rpx;
|
color: #fff;
|
font-size: 26rpx;
|
letter-spacing:3rpx;
|
line-height:44rpx;
|
}
|
}
|
.right-img{
|
box-shadow:0 0 2rpx #ff9262;
|
.right-text{
|
position:absolute;
|
top:10rpx;
|
right:-30rpx;
|
width:110rpx;
|
height:110rpx;
|
border-radius:50%;
|
background:radial-gradient(circle at 30%,#ffcc57,#ffb203);
|
text-align: center;
|
line-height: 110rpx;
|
color:#fff;
|
font-weight:700;
|
font-size:56rpx;
|
letter-spacing:1rpx;
|
text-shadow:4rpx 3rpx 2rpx #e6980f;
|
font-family:Arial, Helvetica, sans-serif;
|
}
|
.icon1{
|
position: absolute;
|
right:111rpx;
|
top:62rpx;
|
width:56rpx;
|
height:56rpx;
|
}
|
.icon2{
|
position: absolute;
|
right:80rpx;
|
top:20rpx;
|
width:32rpx;
|
height:32rpx;
|
}
|
}
|
}
|
.nav-box{
|
height:130rpx;
|
width:100%;
|
// background: #b6c7f5;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding:0 32rpx;
|
box-sizing: border-box;
|
.nav-item{
|
width:46%;
|
height:120rpx;
|
background:linear-gradient(to right,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(251,209,162,0.2));
|
border-radius:25rpx;
|
border:1rpx solid rgba(251,209,162,0.4);
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
text{
|
font-size:28rpx;
|
color: #9f9d9e;
|
}
|
image{
|
width:80rpx;
|
height:80rpx;
|
}
|
}
|
}
|
}
|
.content{
|
width:100%;
|
height:calc(100vh - 720rpx);
|
background: #f4f4f4;
|
padding: 0 32rpx;
|
box-sizing: border-box;
|
.type-box{
|
width:100%;
|
height:110rpx;
|
display: flex;
|
overflow:hidden;
|
white-space:nowrap;
|
flex-wrap: nowrap;
|
align-items: center;
|
.type-item{
|
display:inline-block;
|
height:70rpx;
|
background:rgba(255,255,255);
|
margin-right:20rpx;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
box-shadow: 0 0 6rpx 2rpx #e8e8e8 inset;
|
border-radius:16rpx;
|
color: #919191;
|
text{
|
line-height:70rpx;
|
}
|
}
|
}
|
.goods-box{
|
height:calc(100% - 110rpx);
|
overflow:scroll;
|
// background: #d0f6fa;
|
box-sizing: border-box;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.goods-item{
|
display: inline-block;
|
width:48%;
|
max-height:800rpx;
|
background: #fff;
|
overflow:hidden;
|
margin-bottom:20rpx;
|
display: flex;
|
flex-direction: column;
|
padding:40rpx 20rpx;
|
box-sizing: border-box;
|
border-radius: 20rpx;
|
position: relative;
|
.goods-item-img{
|
width:80%;
|
margin: 0 auto;
|
margin-bottom:50rpx;
|
}
|
.goods-item-name{
|
margin-bottom:10rpx;
|
color: #3d3d3d;
|
}
|
.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{
|
width:44rpx;
|
height: 44rpx;
|
}
|
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:24rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
