531 lines
14 KiB
Vue
531 lines
14 KiB
Vue
<template>
|
|
<view class="main">
|
|
<!-- 顶部用户积分信息卡片 -->
|
|
<view class="pointsHeader">
|
|
<view class="headerContent">
|
|
<view class="pointsInfo">
|
|
<view class="pointsLabel">我的ETC积分</view>
|
|
<view class="pointsValue">{{ userPoints || 0 }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分兑换计算器 -->
|
|
<view class="exchangeBox">
|
|
<view class="boxTitle">积分兑换</view>
|
|
|
|
<view class="exchangeContent">
|
|
<!-- ETC积分输入 -->
|
|
<view class="inputBox">
|
|
<view class="inputLabel">ETC积分</view>
|
|
<input class="inputField" type="digit" v-model="etcPoints" placeholder="请输入兑换积分"
|
|
@input="handleCalculate" />
|
|
</view>
|
|
|
|
<!-- 兑换比例显示 -->
|
|
<view class="exchangeRate">
|
|
<view class="rateText">兑换比例 {{ exchangeRate }}:1</view>
|
|
</view>
|
|
|
|
<!-- 平台积分显示 -->
|
|
<view class="resultBox">
|
|
<view class="resultLabel">平台积分</view>
|
|
<view class="resultValue">{{ platformPoints }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 兑换按钮 -->
|
|
<view class="exchangeBtn" @click="handleExchange">
|
|
立即兑换
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 兑换规则 -->
|
|
<view class="rulesBox">
|
|
<view class="boxTitle">
|
|
<text>兑换规则</text>
|
|
</view>
|
|
|
|
<view class="rulesList">
|
|
<view class="ruleItem" v-for="(rule, index) in rules" :key="index">
|
|
<view class="ruleDot"></view>
|
|
<text class="ruleText">{{ rule }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 积分商品列表 -->
|
|
<view class="productsBox">
|
|
<view class="boxTitle">
|
|
<text>积分商品</text>
|
|
<view class="moreBtn" @click="handleGoProductList">
|
|
<text class="moreText">查看更多</text>
|
|
<image class="moreIcon" src="https://eshangtech.com/caiyunyiImg/moreIcon.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="productsList">
|
|
<view class="productItem" v-for="(product, index) in productList" :key="index"
|
|
@click="handleGoProductDetail(product)">
|
|
<image class="productImg" :src="product.image" mode="aspectFill" />
|
|
<view class="productInfo">
|
|
<view class="productName">{{ product.name }}</view>
|
|
<view class="productPoints">
|
|
<text class="pointsNum">{{ product.points }}</text>
|
|
<text class="pointsUnit">积分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
userPoints: 0, // 用户当前ETC积分
|
|
etcPoints: '', // 用户输入的ETC积分
|
|
platformPoints: 0, // 计算后的平台积分
|
|
exchangeRate: 20, // 兑换比例 10:1
|
|
|
|
// 兑换规则
|
|
rules: [
|
|
'1个ETC积分可兑换0.1个平台积分',
|
|
'单次最低兑换100 ETC积分',
|
|
'兑换后的积分将在24小时内到账',
|
|
'兑换的积分可用于商城购物抵扣',
|
|
'兑换后不可撤销,请谨慎操作',
|
|
'积分有效期为兑换后12个月'
|
|
],
|
|
|
|
// 积分商品列表(示例数据)
|
|
productList: [
|
|
{
|
|
id: 1,
|
|
name: '10元优惠券',
|
|
points: 100,
|
|
image: 'https://eshangtech.com/caiyunyiImg/product1.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '20元优惠券',
|
|
points: 200,
|
|
image: 'https://eshangtech.com/caiyunyiImg/product2.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '50元优惠券',
|
|
points: 500,
|
|
image: 'https://eshangtech.com/caiyunyiImg/product3.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '100元优惠券',
|
|
points: 1000,
|
|
image: 'https://eshangtech.com/caiyunyiImg/product4.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
|
|
onLoad() {
|
|
this.getUserPoints();
|
|
},
|
|
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
// 获取用户积分
|
|
async getUserPoints() {
|
|
const req = {
|
|
mobile: this.user.MEMBERSHIP_MOBILEPHONE,
|
|
outUserId: this.user.MEMBERSHIP_ID,
|
|
type: "encryption"
|
|
}
|
|
const data = await this.$api.$post('/MemberApi/ThirdInterface/GetYTSLMemberPoint', req)
|
|
console.log('datadatadatadata321', data);
|
|
if (data.Result_Code === 100) {
|
|
let res = data.Result_Data
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: data.Result_Desc,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
|
|
// 计算兑换积分
|
|
handleCalculate(e) {
|
|
const value = e.detail.value;
|
|
if (value && !isNaN(value)) {
|
|
// 按照兑换比例计算平台积分
|
|
this.platformPoints = Math.floor(Number(value) / this.exchangeRate);
|
|
} else {
|
|
this.platformPoints = 0;
|
|
}
|
|
},
|
|
|
|
// 执行兑换
|
|
handleExchange() {
|
|
if (!this.etcPoints || this.etcPoints <= 0) { uni.showToast({ title: '请输入兑换积分', icon: 'none' }); return; } if
|
|
(Number(this.etcPoints) > this.userPoints) {
|
|
uni.showToast({
|
|
title: 'ETC积分不足',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.showModal({
|
|
title: '确认兑换',
|
|
content: `确定使用${this.etcPoints}个ETC积分兑换${this.platformPoints}个平台积分吗?`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.doExchange();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 调用兑换接口
|
|
async doExchange() {
|
|
uni.showLoading({ title: '兑换中...' });
|
|
|
|
const req = {
|
|
orderno: "",
|
|
outUserId: this.user.MEMBERSHIP_ID,
|
|
changePoint: this.platformPoints,
|
|
memo: "积分兑换",
|
|
type: "encryption"
|
|
}
|
|
const data = await this.$api.$post('/MemberApi/ThirdInterface/ChangeYTSLMemberPoint', req)
|
|
console.log('datadatadatadata321', data);
|
|
|
|
},
|
|
|
|
// 跳转到商品详情
|
|
handleGoProductDetail(product) {
|
|
uni.showToast({
|
|
title: `查看${product.name}详情`,
|
|
icon: 'none'
|
|
});
|
|
// TODO: 跳转到商品详情页
|
|
// uni.navigateTo({
|
|
// url: `/pages/productDetail/index?id=${product.id}`
|
|
// });
|
|
},
|
|
|
|
// 查看更多商品
|
|
handleGoProductList() {
|
|
uni.showToast({
|
|
title: '查看更多商品',
|
|
icon: 'none'
|
|
});
|
|
// TODO: 跳转到商品列表页
|
|
// uni.navigateTo({
|
|
// url: '/pages/productList/index'
|
|
// });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background: #F7F8FA;
|
|
padding-bottom: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 顶部积分卡片 */
|
|
.pointsHeader {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
|
|
padding: 60rpx 32rpx 80rpx;
|
|
box-sizing: border-box;
|
|
|
|
.headerContent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.pointsInfo {
|
|
.pointsLabel {
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.pointsValue {
|
|
font-size: 72rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.headerIcon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 积分兑换计算器 */
|
|
.exchangeBox {
|
|
width: calc(100% - 64rpx);
|
|
margin: -40rpx 32rpx 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
padding: 40rpx 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.boxTitle {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.exchangeContent {
|
|
.inputBox {
|
|
margin-bottom: 32rpx;
|
|
|
|
.inputLabel {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.inputField {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #F7F8FA;
|
|
border-radius: 12rpx;
|
|
padding: 0 24rpx;
|
|
font-size: 32rpx;
|
|
color: #222222;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.exchangeRate {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin-bottom: 32rpx;
|
|
|
|
.exchangeIcon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.rateText {
|
|
font-size: 28rpx;
|
|
color: #667EEA;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.resultBox {
|
|
.resultLabel {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.resultValue {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #F7F8FA;
|
|
border-radius: 12rpx;
|
|
padding: 0 24rpx;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #667EEA;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
.exchangeBtn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
margin-top: 40rpx;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 兑换规则 */
|
|
.rulesBox {
|
|
width: calc(100% - 64rpx);
|
|
margin: 0 32rpx 24rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
.boxTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
margin-bottom: 24rpx;
|
|
|
|
.titleIcon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
.rulesList {
|
|
.ruleItem {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ruleDot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #667EEA;
|
|
border-radius: 50%;
|
|
margin-top: 12rpx;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ruleText {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 积分商品列表 */
|
|
.productsBox {
|
|
width: calc(100% - 64rpx);
|
|
margin: 0 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
|
|
|
|
.boxTitle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #222222;
|
|
margin-bottom: 24rpx;
|
|
|
|
.moreBtn {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.moreText {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
font-weight: 400;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.moreIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.productsList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.productItem {
|
|
width: calc((100% - 24rpx) / 2);
|
|
background: #F7F8FA;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 24rpx;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.productImg {
|
|
width: 100%;
|
|
height: 240rpx;
|
|
background: #E5E5E5;
|
|
}
|
|
|
|
.productInfo {
|
|
padding: 20rpx;
|
|
|
|
.productName {
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
margin-bottom: 12rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.productPoints {
|
|
.pointsNum {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #667EEA;
|
|
}
|
|
|
|
.pointsUnit {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |