294 lines
6.7 KiB
Vue
294 lines
6.7 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="header-area">
|
|
<view class="status-bar"></view>
|
|
<uni-nav-bar title="我的积分" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false"
|
|
color="#ffffff" :iconStyle="{ color: '#ffffff' }">
|
|
</uni-nav-bar>
|
|
<view class="points-display">
|
|
<text class="points-num">{{ totalPoints }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 三个功能入口 -->
|
|
<view class="entry-card">
|
|
<view class="entry-item" v-for="(item, index) in entryList" :key="index" @click="goPage(item)">
|
|
<image :src="item.icon" class="entry-icon" mode="aspectFit" />
|
|
<text class="entry-text">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 虚拟兑换 -->
|
|
<view class="virtual-exchange">
|
|
<text class="virtual-title">虚拟兑换</text>
|
|
</view>
|
|
<view class="section-header">
|
|
<view class="section-line"></view>
|
|
<text class="section-title">热门虚拟权益服务</text>
|
|
<view class="section-line"></view>
|
|
</view>
|
|
|
|
<!-- 人气兑换商品区域 -->
|
|
<view class="goods-card">
|
|
<uni-section title="人气兑换" type="line"></uni-section>
|
|
<view class="goods-grid">
|
|
<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
|
|
<image :src="item.image" class="goods-img" mode="aspectFill" />
|
|
<text class="goods-name">{{ item.name }}</text>
|
|
<text class="goods-desc">{{ item.desc }}</text>
|
|
<text class="goods-points">{{ item.points }}分</text>
|
|
</view>
|
|
</view>
|
|
<view class="goods-more" @click="goMore">
|
|
<text class="more-text">更多积分兑换</text>
|
|
<text class="more-arrow">></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { getPointsBalance } from '/pageSubPack/api/apiSub.js'
|
|
|
|
const totalPoints = ref(780)
|
|
|
|
const entryList = ref([{
|
|
title: '积分商城',
|
|
icon: 'https://wuye.ckdzkj.com/images/propertyImgs/pointsMall.png',
|
|
url: '/pageSubPack/my/myPointsMall'
|
|
}, {
|
|
title: '积分明细',
|
|
icon: 'https://wuye.ckdzkj.com/images/propertyImgs/pointsRecord.png',
|
|
url: '/pageSubPack/my/myPointsRecord'
|
|
}, {
|
|
title: '积分订单',
|
|
icon: 'https://wuye.ckdzkj.com/images/propertyImgs/pointsOrder.png',
|
|
url: '/pageSubPack/my/myPointsOrder'
|
|
}])
|
|
|
|
const goodsList = ref([
|
|
{ id: 1, name: '植物精油', desc: '温和无刺激 下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/4CAF50/FFF?text=植物' },
|
|
{ id: 2, name: '肯德基香辣劲脆鸡腿堡电子', desc: '下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/FF5722/FFF?text=KFC' },
|
|
{ id: 3, name: '植物精油', desc: '温和无刺激 下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/4CAF50/FFF?text=植物' },
|
|
{ id: 4, name: '肯德基香辣劲脆鸡腿堡电子', desc: '下单即赠试用装', points: 4000, image: 'https://via.placeholder.com/200x200/FF5722/FFF?text=KFC' },
|
|
{ id: 5, name: '植物精油', desc: '温和无刺激 下单即赠试用装', points: 6000, image: 'https://via.placeholder.com/200x200/4CAF50/FFF?text=植物' },
|
|
{ id: 6, name: '肯德基香辣劲脆鸡腿堡电子', desc: '下单即赠试用装', points: 4000, image: 'https://via.placeholder.com/200x200/FF5722/FFF?text=KFC' }
|
|
])
|
|
|
|
const getBalance = async () => {
|
|
try {
|
|
const res = await getPointsBalance()
|
|
if (res.code === 200 && res.data) {
|
|
totalPoints.value = res.data.balance || res.data.points || 0
|
|
}
|
|
} catch (err) {
|
|
console.error('获取积分余额失败：', err)
|
|
}
|
|
}
|
|
|
|
const goPage = (item) => {
|
|
uni.navigateTo({
|
|
url: item.url
|
|
})
|
|
}
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({ delta: 1 })
|
|
}
|
|
|
|
const goMore = () => {
|
|
uni.navigateTo({
|
|
url: '/pageSubPack/my/myPointsMall'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getBalance()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ===== 顶部蓝色区域 ===== */
|
|
.header-area {
|
|
background: #2E59FD;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.status-bar {
|
|
width: 100vw;
|
|
height: 46px;
|
|
}
|
|
|
|
.points-display {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 30rpx 0 20rpx;
|
|
}
|
|
|
|
.points-num {
|
|
font-size: 64rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1.1;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
/* ===== 三个功能入口 ===== */
|
|
.entry-card {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin: -30rpx 30rpx 0;
|
|
padding: 36rpx 0;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
position: relative;
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.entry-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.entry-icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.entry-text {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== 虚拟兑换 ===== */
|
|
.virtual-exchange {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 40rpx 0 30rpx;
|
|
}
|
|
|
|
.virtual-title {
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ===== 热门虚拟权益服务（横线 + 文字 + 横线） ===== */
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 110rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.section-line {
|
|
flex: 1;
|
|
height: 1rpx;
|
|
background: #cccccc;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
margin: 0 24rpx;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ===== 人气兑换商品卡片 ===== */
|
|
.goods-card {
|
|
background: #ffffff;
|
|
border-radius: 32rpx;
|
|
margin: 0 30rpx;
|
|
padding: 20rpx 20rpx 30rpx;
|
|
}
|
|
|
|
.goods-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 -10rpx;
|
|
}
|
|
|
|
.goods-item {
|
|
width: calc(33.33% - 20rpx);
|
|
margin: 0 10rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.goods-img {
|
|
width: 210rpx;
|
|
height: 210rpx;
|
|
border-radius: 16rpx;
|
|
background: #f0f0f0;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
line-height: 1.3;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.goods-desc {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
text-align: left;
|
|
line-height: 1.3;
|
|
margin-top: 6rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.goods-points {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #FF8F40;
|
|
margin-top: 8rpx;
|
|
text-align: left;
|
|
}
|
|
|
|
/* ===== 更多积分兑换 ===== */
|
|
.goods-more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30rpx 0 10rpx;
|
|
border-top: 1rpx solid #eee;
|
|
}
|
|
|
|
.more-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
</style>
|