You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
6.2 KiB
277 lines
6.2 KiB
<template>
|
|
<view class="bg">
|
|
<view class="score-card">
|
|
|
|
<view>积分余额</view>
|
|
<view class="score-num">
|
|
<text style="padding-right: 6rpx;">{{totalScore}}</text>
|
|
<image class="point-image" src="https://static.ticket.sz-trip.com/uploads/20250917/9969ed1c37123ae8b29533a9981d2a6f.png"></image>
|
|
</view>
|
|
<view class="refresh-btn" @click="getScore()">
|
|
<image src="https://static.ticket.sz-trip.com/uploads/20250922/718a9f118e60af19c927d72335615121.png"></image>
|
|
刷新
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 选项卡区域 -->
|
|
<view class="tab-bar">
|
|
<view :class="['tab-item',activeType==0]" @click="changeType(0)">积分收支明细</view>
|
|
<view :class="['tab-item',activeType==1]" @click="changeType(1)">积分使用记录</view>
|
|
</view>
|
|
|
|
<!-- 积分列表区域 -->
|
|
<view class="score-list" v-if="activeType==0">
|
|
<view class="list-item" v-for="(item, index) in record" :key="index" @click="goOrder(item)">
|
|
<image v-if="item.type=='score_pay'" class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/1288379124c94892f6ac7a461337da46.png" mode="aspectFit"></image>
|
|
<image v-else-if="item.type=='score_refund'" class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/191fb92720719ec2ce03256389480188.png" mode="aspectFit"></image>
|
|
<image v-else class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/0f95e2a13d6e6d947b9c8721f9d01017.png" mode="aspectFit"></image>
|
|
|
|
<view class="item-left flex-between" >
|
|
<view class="item-info">
|
|
<text class="item-name">{{ item.memo }}</text>
|
|
<text class="item-time" v-if="item.order">订单编号：{{ item.order.order_id }}</text>
|
|
<text class="item-time">{{ item.createtime }}</text>
|
|
</view>
|
|
<text class="item-score" :class="item.wallet > 0 ? 'plus' : 'minus'">{{ item.wallet > 0 ? '+' + item.wallet : item.wallet }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="score-list" v-if="activeType==1" >
|
|
<view class="list-item" v-for="(item, index) in useRecord" :key="index" @click="goOrder(item)">
|
|
<!-- 积分下单 -->
|
|
<image class="item-icon" src="https://static.ticket.sz-trip.com/uploads/20250922/1288379124c94892f6ac7a461337da46.png" mode="aspectFit"></image>
|
|
<view class="item-left flex-between" >
|
|
<view class="item-info">
|
|
<text class="item-name">{{ item.memo }}</text>
|
|
<text class="item-time" v-if="item.order">订单编号：{{ item.order.order_id }}</text>
|
|
<text class="item-time">{{ item.createtime }}</text>
|
|
</view>
|
|
<text class="item-score" :class="item.wallet > 0 ? 'plus' : 'minus'">{{ item.wallet > 0 ? '+' + item.wallet : item.wallet }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeType: 0,
|
|
totalScore: 0,
|
|
typeIndex: 0,
|
|
record: [],
|
|
useRecord: [],
|
|
finish: false,
|
|
page: 1,
|
|
}
|
|
},
|
|
onReady () {
|
|
this.getScore()
|
|
this.getScoreRecord(true)
|
|
},
|
|
methods: {
|
|
// 获取积分明细 取总积分
|
|
getScore() {
|
|
this.Post({},"/api/uservice/user/getMyInfo").then(res=>{
|
|
this.totalScore = res.data.score
|
|
})
|
|
},
|
|
getScoreRecord () {
|
|
this.Post({page:this.page},"/api/uservice/user/getScoreChangeLog").then(res=>{
|
|
let wallet_logs = res.data.wallet_logs.data;
|
|
let expend_logs = res.data.expend_logs.data;
|
|
wallet_logs.forEach(v=>{
|
|
if (v.ext) {v.order = JSON.parse(v.ext)}
|
|
})
|
|
expend_logs.forEach(v=>{
|
|
if (v.ext) {v.order = JSON.parse(v.ext)}
|
|
})
|
|
this.record = [...this.record,...wallet_logs];
|
|
this.useRecord = [...this.useRecord,...expend_logs]
|
|
this.page++
|
|
|
|
})
|
|
},
|
|
|
|
|
|
|
|
changeType (index) {
|
|
if (index == this.activeType) {
|
|
return
|
|
}
|
|
this.activeType = index;
|
|
|
|
},
|
|
|
|
goOrder (item) {
|
|
if (item.order) {
|
|
uni.navigateTo({ url: `/subPackages/order/orderDetail?id=${item.order.order_id}` });
|
|
}
|
|
},
|
|
|
|
|
|
|
|
},
|
|
onReachBottom() {
|
|
setTimeout(() => {
|
|
this.getScoreRecord()
|
|
},1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.bg{
|
|
width: 750rpx;
|
|
min-height: 100vh;
|
|
background: #FFFFFF;
|
|
}
|
|
.point-image{
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.score-card {
|
|
width: 750rpx;
|
|
height: 200rpx;
|
|
background: linear-gradient(-90deg, #FCE2C1, #F0BD90);
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #6E3D1D;
|
|
padding: 26rpx;
|
|
position: relative;
|
|
.score-num {
|
|
font-weight: 500;
|
|
font-size: 53rpx;
|
|
color: #000000;
|
|
margin-top: 34rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.refresh-btn {
|
|
width: 134rpx;
|
|
height: 40rpx;
|
|
background: #F8D6B1;
|
|
border-radius: 20rpx 0rpx 0rpx 20rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #6E3D1D;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 23rpx 0 20rpx;
|
|
position: absolute;
|
|
top: 26rpx;
|
|
right: 0;
|
|
image{
|
|
width: 26.67rpx;
|
|
height: 26.67rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-bar {
|
|
display: flex;
|
|
border-bottom: 2rpx solid #D8D8D8;
|
|
height: 109rpx;
|
|
line-height: 109rpx;
|
|
font-weight: 500;
|
|
font-size: 31rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
&.true {
|
|
font-weight: bold;
|
|
}
|
|
&.true::after{
|
|
content: "1";
|
|
width: 67rpx;
|
|
height: 7rpx;
|
|
background: #FB2A54;
|
|
border-radius: 3rpx;
|
|
bottom: 19rpx;
|
|
left: calc(50% - 34rpx);
|
|
position: absolute;
|
|
font-size: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.score-list {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
padding-left: 26rpx;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
width: 100rpx;
|
|
border-bottom: 2rpx solid #f5f5f5;
|
|
padding: 33rpx 30rpx 33rpx 0;
|
|
}
|
|
|
|
.item-icon {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
margin-right: 26rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.item-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.item-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-top: 5rpx;
|
|
}
|
|
|
|
.item-score {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.plus {
|
|
color: #FB2A54;
|
|
}
|
|
|
|
.minus {
|
|
color: #000000;;
|
|
}
|
|
</style>
|