第一次上传
This commit is contained in:
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<view style="padding: 20rpx;">
|
||||
|
||||
|
||||
<!-- 当前积分区域 -->
|
||||
<view class="current-points-section">
|
||||
<text class="points-label">当前积分</text>
|
||||
<text class="points-value">2,758</text>
|
||||
</view>
|
||||
|
||||
<!-- 积分获取规则 -->
|
||||
<view class="rules-section">
|
||||
<text class="section-title">积分获取规则</text>
|
||||
<view class="rule-item">
|
||||
<view class="flex-center" style=" border-radius: 50%; padding: 20rpx; background-color: #F9FAFB; ">
|
||||
<image :src="Service.GetIconImg('/static/userFunc/intergration/shop.png')" class="service-icon"></image>
|
||||
</view>
|
||||
<view class="" style="margin-left: 20rpx;" >
|
||||
<view class="rule-title">消费获得积分</view>
|
||||
<view class="rule-desc">每消费1元得1分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rule-item">
|
||||
<view class="flex-center" style=" border-radius: 50%; padding: 20rpx; background-color: #F9FAFB; ">
|
||||
<image :src="Service.GetIconImg('/static/userFunc/intergration/share.png')" class="service-icon"></image>
|
||||
</view>
|
||||
<view class="" style="margin-left: 20rpx;" >
|
||||
<view class="rule-title">分享商品</view>
|
||||
<view class="rule-desc">每次分享得5分</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分明细 -->
|
||||
<view class="points-detail-section">
|
||||
<text class="section-title">积分明细</text>
|
||||
<view class="points-list">
|
||||
<view class="points-item" v-for="(item, index) in pointsList" :key="index">
|
||||
<text :class="['points-number', item.isPositive ? 'positive' : 'negative']">
|
||||
{{ item.isPositive ? '+' : '-' }}{{ item.points }}
|
||||
</text>
|
||||
<view class="" style="margin-left: 20rpx;" >
|
||||
<view class="points-type">{{ item.type }}</view>
|
||||
<view class="points-date">{{ item.date }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import {Service} from "@/Service/Service"
|
||||
// 积分明细数据类型
|
||||
interface PointsItem {
|
||||
id : number;
|
||||
type : string;
|
||||
points : number;
|
||||
isPositive : boolean;
|
||||
date : string;
|
||||
}
|
||||
|
||||
// 积分明细数据
|
||||
const pointsList = ref<PointsItem[]>([
|
||||
{
|
||||
id: 1,
|
||||
type: '购买商品获得积分',
|
||||
points: 100,
|
||||
isPositive: true,
|
||||
date: '2025-09-12 14:30'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: '购买商品获得积分',
|
||||
points: 5,
|
||||
isPositive: true,
|
||||
date: '2025-09-12 11:45'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: '积分抵消费金额',
|
||||
points: 20,
|
||||
isPositive: false,
|
||||
date: '2025-09-11 09:15'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: '购买商品获得积分',
|
||||
points: 200,
|
||||
isPositive: true,
|
||||
date: '2025-09-10 18:00'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
/* 当前积分区域 */
|
||||
.current-points-section {
|
||||
background-color: #ffffff;
|
||||
padding: 60rpx 0;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
font-size: 64rpx;
|
||||
color: #FF6600;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 积分获取规则 */
|
||||
.rules-section {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.rule-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rule-icon {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.rule-title {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.rule-desc {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 积分明细 */
|
||||
.points-detail-section {
|
||||
background-color: #ffffff;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.points-list {
|
||||
gap: 36rpx;
|
||||
}
|
||||
|
||||
.points-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.points-item:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.points-type {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.points-number {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 24rpx;
|
||||
min-width: 80rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.points-number.positive {
|
||||
color: #4CD964;
|
||||
}
|
||||
|
||||
.points-number.negative {
|
||||
color: #FF4D4F;
|
||||
}
|
||||
|
||||
.points-date {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user