jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

积分兑换

dev_des
1054425342@qq.com 1 month ago
parent
5a8a05811b
commit
1c97afb5c0
5 changed files with 456 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      App.vue
  2. 47
      components/DynamicIsland.vue
  3. 52
      components/nmr-icon/nmr-icon.vue
  4. 22
      static/css/icon.scss
  5. 294
      subPackages/points/index.vue

1
App.vue
View File

@ -353,6 +353,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/static/css/icon.scss";
@font-face { @font-face {
font-family: "Futura"; font-family: "Futura";
src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc); src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc);

47
components/DynamicIsland.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<!-- 灵动岛占位区域 - 始终存在但控制可见性 --> <!-- 灵动岛占位区域 - 始终存在但控制可见性 -->
<view class="dynamic-island-placeholder" :class="{ visible: isScrolled }" <view class="dynamic-island-placeholder" :class="{ visible: isScrolled }" :style="{ height: 216 + 'rpx' }">
:style="{ height: 216 + 'rpx' }">
<view class="dynamic-island" :class="{ <view class="dynamic-island" :class="{
compact: actualCompactState, compact: actualCompactState,
fixed: isFixed, fixed: isFixed,
@ -18,13 +17,10 @@
<image class="avatar" <image class="avatar"
src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png" src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png"
mode="aspectFill"></image> mode="aspectFill"></image>
<view <view class="ai-label">智能体</view>
class="ai-label"
>智能体</view
>
</view> </view>
<view class="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;"> <view class=""
style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
<view class="profile-info"> <view class="profile-info">
<text class="profile-title">数字领航员</text> <text class="profile-title">数字领航员</text>
<text class="profile-name">EVITA</text> <text class="profile-name">EVITA</text>
@ -48,10 +44,12 @@
<view class="" style="font-size: 24rpx;font-weight: bold;color: #000000;"> <view class="" style="font-size: 24rpx;font-weight: bold;color: #000000;">
查看您的交响数据文化资产行 查看您的交响数据文化资产行
</view> </view>
<view class="" style="display: flex;align-items: flex-end;justify-content: space-between;"> <view class=""
style="display: flex;align-items: flex-end;justify-content: space-between;">
<view class="" @click="toOrder"> <view class="" @click="toOrder">
<view class="stats-info"> <view class="stats-info">
<text class="stats-number">{{userInfo&&userInfo.unUseOrderQuantity||0}}</text> <text
class="stats-number">{{userInfo&&userInfo.unUseOrderQuantity||0}}</text>
<text class="stats-unit">个</text> <text class="stats-unit">个</text>
</view> </view>
<view class="stats-label">交响权益行</view> <view class="stats-label">交响权益行</view>
@ -64,10 +62,10 @@
<view class="stats-label">交响资产行</view> <view class="stats-label">交响资产行</view>
</div> </div>
<view class="middle-section"> <view class="middle-section">
<view class="time-reward-container"> <view class="time-reward-container" @click="toPoint">
<text class="time-reward-title" style="margin-bottom: 5rpx;">时间奖励</text> <text class="time-reward-title" style="margin-bottom: 5rpx;">时间奖励</text>
<view class="time-reward-stats"> <view class="time-reward-stats">
<text class="time-reward-number">0</text> <text class="time-reward-number">{{ userInfo && userInfo.token ? userInfo.hourValue||0:0}}</text>
<text class="time-reward-unit">点</text> <text class="time-reward-unit">点</text>
</view> </view>
<text class="time-reward-label" style="font-weight: bold;">交响时间行</text> <text class="time-reward-label" style="font-weight: bold;">交响时间行</text>
@ -86,10 +84,12 @@
<view class="bottom-section"> <view class="bottom-section">
<view class="" style="flex:1;"> <view class="" style="flex:1;">
<view class="" style="display: flex;"> <view class="" style="display: flex;">
<view class="time-reward-container" style="width: 200rpx;"> <view class="time-reward-container" style="width: 200rpx;" @click="toPoint">
<text class="time-reward-title">时间奖励</text> <text class="time-reward-title">时间奖励</text>
<view class="time-reward-stats"> <view class="time-reward-stats">
<text class="time-reward-number">0</text> <text class="time-reward-number">{{
userInfo && userInfo.token ? userInfo.hourValue||0:0
}}</text>
<text class="time-reward-unit">点</text> <text class="time-reward-unit">点</text>
</view> </view>
<text class="time-reward-label" <text class="time-reward-label"
@ -101,9 +101,9 @@
userInfo && userInfo.token ? userInfo.nickname : "用户" userInfo && userInfo.token ? userInfo.nickname : "用户"
}} }}
</view> </view>
<view class="time-reward-label" <view class="time-reward-label" @click="toPoint"
style="margin-top: 15rpx;font-weight: bold;font-size: 26rpx;"> style="margin-top: 15rpx;font-weight: bold;font-size: 26rpx;">
积分:0<text 积分:{{totalPoints||0}}<text
style="color: #999999;font-size: 22rpx;margin-left: 10rpx;">积分获取规则</text> style="color: #999999;font-size: 22rpx;margin-left: 10rpx;">积分获取规则</text>
</view> </view>
</view> </view>
@ -129,8 +129,7 @@
</view> </view>
</view> </view>
</view> </view>
<image class="avatar" <image class="avatar" @click="toWebView"
@click="toWebView"
src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png" src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png"
mode="aspectFill"></image> mode="aspectFill"></image>
</view> </view>
@ -196,6 +195,7 @@
currentAvatar: "https://picsum.photos/80/80", currentAvatar: "https://picsum.photos/80/80",
currentAction: "激活你的Agent", currentAction: "激活你的Agent",
userInfo: {}, userInfo: {},
totalPoints: 0
}; };
}, },
computed: { computed: {
@ -321,6 +321,11 @@
} }
return "用户"; return "用户";
}, },
toPoint() {
uni.navigateTo({
url: '/subPackages/points/index'
})
},
getStatNumber(type) { getStatNumber(type) {
// 从副标题中解析统计数据 // 从副标题中解析统计数据
if (this.subtitle) { if (this.subtitle) {
@ -356,6 +361,11 @@
if (this.userInfo && this.userInfo.nickname) { if (this.userInfo && this.userInfo.nickname) {
this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`; this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`;
} }
this.Post({}, '/framework/points/getLastBalance', 'DES').then(res => {
if (res.code === 200) {
this.totalPoints = res.data.balance || 0;
}
})
} catch (e) { } catch (e) {
console.warn("获取用户信息失败:", e); console.warn("获取用户信息失败:", e);
this.userInfo = {}; this.userInfo = {};
@ -802,6 +812,7 @@
margin-right: 10rpx; margin-right: 10rpx;
} }
} }
.ai-label { .ai-label {
border: 1rpx solid; border: 1rpx solid;
padding: 0rpx 15rpx; padding: 0rpx 15rpx;

52
components/nmr-icon/nmr-icon.vue
View File

@ -0,0 +1,52 @@
<template>
<text :class="[type,'iconfont-' + name,{'nmr-linear':islinear}]" :style="{'background-image':islinear?linearStyle:'',color: color,'line-height':size + 'rpx', 'font-size': size + 'rpx' }"
@click="_onClick" />
</template>
<script>
// 组件使用方法
// <nmr-icon name="renwu" size="30" color="#ff0000"></nmr-icon>
export default {
name: 'UniIcon',
props: {
type: {
type: String,
default: 'des'
},
islinear: {//是否渐变图标
type: Boolean,
default: false,
},
linearStyle: {//渐变样式
type: String,
default: 'linear-gradient(180deg, #64BDE7 0%, #A7D9F3 100%)'
},
name: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 32
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style>
.nmr-linear{
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
background-image: linear-gradient(180deg, #64BDE7 0%, #A7D9F3 100%);
}
</style>

22
static/css/icon.scss
View File

@ -0,0 +1,22 @@
@font-face {
font-family: "des"; /* Project id 5022607 */
src: url('//at.alicdn.com/t/c/font_5022607_r74iwur9ql.woff2?t=1757989865177') format('woff2'),
url('//at.alicdn.com/t/c/font_5022607_r74iwur9ql.woff?t=1757989865177') format('woff'),
url('//at.alicdn.com/t/c/font_5022607_r74iwur9ql.ttf?t=1757989865177') format('truetype');
}
.des {
font-family: "des" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont-jifen:before {
content: "\e614";
}
.iconfont-jifenduihuan:before {
content: "\e60b";
}

294
subPackages/points/index.vue
View File

@ -6,6 +6,12 @@
<text class="points-number">{{ totalPoints }}</text> <text class="points-number">{{ totalPoints }}</text>
<text class="points-label">当前积分</text> <text class="points-label">当前积分</text>
</view> </view>
<!-- 时间奖励值 -->
<view class="time-reward" @click="showExchangeModal">
<view class="reward-icon">
<nmr-icon name="jifenduihuan" style="margin-right: 10rpx;margin-top: 5rpx;" size="40" color="white"></nmr-icon>兑换时间奖励
</view>
</view>
</view> </view>
<!-- 筛选选项 --> <!-- 筛选选项 -->
@ -27,7 +33,7 @@
<view class="record-item" v-for="(item, index) in pointsList" :key="index"> <view class="record-item" v-for="(item, index) in pointsList" :key="index">
<view class="record-left"> <view class="record-left">
<view class="record-icon" :class="item.fromType === 'in' ? 'income' : 'expense'"> <view class="record-icon" :class="item.fromType === 'in' ? 'income' : 'expense'">
<uni-icons type="vip" size="30" style="color: white;"></uni-icons> <nmr-icon name="jifen" size="60" color="#333"></nmr-icon>
</view> </view>
<view class="record-info"> <view class="record-info">
<view class="record-title">{{ item.dictName }}</view> <view class="record-title">{{ item.dictName }}</view>
@ -63,6 +69,50 @@
<text class="empty-text">暂无积分记录</text> <text class="empty-text">暂无积分记录</text>
</view> </view>
</scroll-view> </scroll-view>
<!-- 兑换弹窗 -->
<uni-popup ref="exchangePopup" type="center" :mask-click="false">
<view class="exchange-modal">
<view class="modal-header">
<text class="modal-title">时间奖励兑换</text>
<view class="close-btn" @click="closeExchangeModal">
<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
</view>
</view>
<view class="modal-content">
<view class="current-reward">
<text class="reward-label">当前时间奖励值：</text>
<text class="reward-value">{{ userInfo&&userInfo.hourValue||0 }}</text>
</view>
<view class="exchange-form">
<view class="form-item">
<text class="form-label">兑换数量：</text>
<input
class="form-input"
v-model="exchangeAmount"
type="number"
placeholder="请输入兑换数量"
/>
</view>
</view>
<view class="exchange-rules">
<text class="rules-title">兑换规则：</text>
<view class="rules-list">
<text class="rule-item">• 1个时间奖励值 = {{pointInfo.points||0}}积分</text>
</view>
</view>
</view>
<view class="modal-footer">
<button class="cancel-btn" @click="closeExchangeModal">取消</button>
<button class="confirm-btn" @click="confirmExchange" >确认兑换</button>
</view>
</view>
</uni-popup>
</view> </view>
</template> </template>
@ -78,15 +128,28 @@
hasMore: true, hasMore: true,
loading: false, loading: false,
refreshing: false, refreshing: false,
userInfo: null,
timeReward: 0,
exchangeAmount: '',
exchangeResult: 0,
pointInfo:null
}; };
}, },
onLoad() { onLoad() {
this.getUserInfo();
this.loadPointsData(); this.loadPointsData();
this.getTotalPoints(); this.getTotalPoints();
}, },
methods: { methods: {
getUserInfo() {
this.Post({}, "/framework/user/getInfo", "DES").then((res) => {
this.userInfo = res.data;
});
},
// 返回上一页 // 返回上一页
goBack() { goBack() {
uni.navigateBack(); uni.navigateBack();
@ -112,7 +175,8 @@
try { try {
this.Post({}, '/framework/points/getLastBalance', 'DES').then(res =>{ this.Post({}, '/framework/points/getLastBalance', 'DES').then(res =>{
if (res.code === 200) { if (res.code === 200) {
this.totalPoints = res.data || 0; this.pointInfo = res.data
this.totalPoints = res.data.balance || 0;
} }
}) })
@ -192,6 +256,59 @@
// 显示兑换弹窗
showExchangeModal() {
this.$refs.exchangePopup.open();
},
// 关闭兑换弹窗
closeExchangeModal() {
this.$refs.exchangePopup.close();
this.exchangeAmount = '';
this.exchangeResult = 0;
},
async confirmExchange() {
if(parseInt(this.exchangeAmount)>this.userInfo.hourValue){
uni.showToast({
title:'兑换值大于可用值',
icon:'none'
})
return
}
try {
const params = {
amount: parseInt(this.exchangeAmount)
};
this.Post(params, '/framework/timeReward/exchange', 'DES').then(res => {
if (res.code === 200) {
uni.showToast({
title: '兑换成功',
icon: 'success'
});
// 刷新数据
this.getTotalPoints();
this.resetData();
this.loadPointsData();
this.closeExchangeModal();
} else {
uni.showToast({
title: res.msg || '兑换失败',
icon: 'none'
});
}
});
} catch (error) {
console.error('兑换失败:', error);
uni.showToast({
title: '网络错误，请重试',
icon: 'none'
});
}
},
// 格式化时间 // 格式化时间
formatTime(timestamp) { formatTime(timestamp) {
const date = new Date(timestamp); const date = new Date(timestamp);
@ -270,6 +387,7 @@
background: linear-gradient(135deg, #77f3f9 0%, #764ba2 100%); background: linear-gradient(135deg, #77f3f9 0%, #764ba2 100%);
padding: 60rpx 32rpx; padding: 60rpx 32rpx;
text-align: center; text-align: center;
position: relative;
} }
.total-points { .total-points {
@ -290,6 +408,27 @@
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
/* 时间奖励值 */
.time-reward {
position: absolute;
top: 30rpx;
right: 32rpx;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 30rpx;
padding: 6rpx 10rpx;
border: 1rpx solid rgba(255, 255, 255, 0.3);
}
.reward-icon {
margin-right: 8rpx;
font-size: 26rpx;
display: flex;
align-items: center;
color: white;
}
/* 筛选标签 */ /* 筛选标签 */
.filter-tabs { .filter-tabs {
display: flex; display: flex;
@ -449,4 +588,155 @@
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #999;
} }
/* 兑换弹窗样式 */
.exchange-modal {
width: 600rpx;
background: #fff;
border-radius: 20rpx;
overflow: hidden;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 40rpx 20rpx;
border-bottom: 1rpx solid #f0f0f0;
}
.modal-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
.close-btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
padding: 40rpx;
}
.current-reward {
display: flex;
align-items: center;
margin-bottom: 40rpx;
padding: 20rpx;
background: #f8f9fa;
border-radius: 12rpx;
}
.reward-label {
font-size: 28rpx;
color: #666;
}
.reward-value {
font-size: 32rpx;
font-weight: 600;
color: #77f3f9;
margin-left: 10rpx;
}
.exchange-form {
margin-bottom: 40rpx;
}
.form-item {
margin-bottom: 20rpx;
}
.form-label {
font-size: 28rpx;
color: #333;
margin-bottom: 12rpx;
display: block;
}
.form-input {
width: 100%;
height: 80rpx;
border: 1rpx solid #ddd;
border-radius: 8rpx;
padding: 0 20rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.exchange-result {
padding: 20rpx;
background: #e8f5e8;
border-radius: 8rpx;
margin-top: 20rpx;
}
.result-text {
font-size: 28rpx;
color: #52c41a;
font-weight: 500;
}
.exchange-rules {
padding: 20rpx;
background: #f8f9fa;
border-radius: 12rpx;
}
.rules-title {
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 16rpx;
display: block;
}
.rules-list {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.rule-item {
font-size: 24rpx;
color: #666;
line-height: 1.5;
}
.modal-footer {
display: flex;
gap: 20rpx;
padding: 20rpx 40rpx 40rpx;
}
.cancel-btn, .confirm-btn {
flex: 1;
height: 80rpx;
border-radius: 8rpx;
font-size: 28rpx;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.cancel-btn {
background: #f5f5f5;
color: #666;
}
.confirm-btn {
background: #77f3f9;
color: #fff;
}
.confirm-btn:disabled {
background: #ccc;
color: #999;
}
</style> </style>
Write Preview
Loading…
Cancel
Save