|
|
|
@ -6,6 +6,12 @@ |
|
|
|
<text class="points-number">{{ totalPoints }}</text> |
|
|
|
<text class="points-label">当前积分</text> |
|
|
|
</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> |
|
|
|
|
|
|
|
<!-- 筛选选项 --> |
|
|
|
@ -27,7 +33,7 @@ |
|
|
|
<view class="record-item" v-for="(item, index) in pointsList" :key="index"> |
|
|
|
<view class="record-left"> |
|
|
|
<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 class="record-info"> |
|
|
|
<view class="record-title">{{ item.dictName }}</view> |
|
|
|
@ -63,6 +69,50 @@ |
|
|
|
<text class="empty-text">暂无积分记录</text> |
|
|
|
</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> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -78,15 +128,28 @@ |
|
|
|
hasMore: true, |
|
|
|
loading: false, |
|
|
|
refreshing: false, |
|
|
|
userInfo: null, |
|
|
|
timeReward: 0, |
|
|
|
exchangeAmount: '', |
|
|
|
exchangeResult: 0, |
|
|
|
pointInfo:null |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onLoad() { |
|
|
|
this.getUserInfo(); |
|
|
|
this.loadPointsData(); |
|
|
|
this.getTotalPoints(); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
getUserInfo() { |
|
|
|
this.Post({}, "/framework/user/getInfo", "DES").then((res) => { |
|
|
|
this.userInfo = res.data; |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 返回上一页 |
|
|
|
goBack() { |
|
|
|
uni.navigateBack(); |
|
|
|
@ -112,7 +175,8 @@ |
|
|
|
try { |
|
|
|
this.Post({}, '/framework/points/getLastBalance', 'DES').then(res =>{ |
|
|
|
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) { |
|
|
|
const date = new Date(timestamp); |
|
|
|
@ -270,6 +387,7 @@ |
|
|
|
background: linear-gradient(135deg, #77f3f9 0%, #764ba2 100%); |
|
|
|
padding: 60rpx 32rpx; |
|
|
|
text-align: center; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.total-points { |
|
|
|
@ -290,6 +408,27 @@ |
|
|
|
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 { |
|
|
|
display: flex; |
|
|
|
@ -449,4 +588,155 @@ |
|
|
|
font-size: 28rpx; |
|
|
|
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> |
1054425342@qq.com
1 month ago