457 lines
9.5 KiB
Vue
457 lines
9.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="header">
|
||
<view class="header-left">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u3giTY4VkWYpnGWRuFHF" class="avatar" />
|
||
<view class="userinfo">
|
||
<view class="username">
|
||
{{ formatName(AccountInfo.realName) }}
|
||
</view>
|
||
<view class="userphone">
|
||
{{ AccountInfo.phonenumber }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="header-right" @click="topage(9)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uyb0iFo50FJ0MZg3RKkV" class="code" />
|
||
</view>
|
||
</view>
|
||
<view class="balance_card">
|
||
<view class="card_title">
|
||
账户余额（元）
|
||
</view>
|
||
<view class="balance">
|
||
{{ formatAmount(AccountInfo.balance) }}
|
||
</view>
|
||
<view class="bot_box">
|
||
<view class="bot_left">
|
||
累计提现：{{ formatAmount(AccountInfo.totalWithdrawAmount) }}
|
||
</view>
|
||
<view class="bot_right" @click="topage(0)">
|
||
立即提现
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tip_block" @click="topage(8)" v-if="BalanceList.length > 0">
|
||
<view class="tip_title">
|
||
账单
|
||
</view>
|
||
<view class="tip_content" v-if="BalanceList.length > 0">
|
||
{{ typeReturn(BalanceList[0].type) }} <span v-if="BalanceList[0].type == 1">+{{ BalanceList[0].amount
|
||
}}</span>
|
||
<span v-if="BalanceList[0].type == 2">-{{ formatAmount(BalanceList[0].amount) }}</span> · {{
|
||
formatTime(BalanceList[0].createTime) }}
|
||
</view>
|
||
<view class="tip_icon">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uIqshtvxHetRGxr1nni1" />
|
||
</view>
|
||
</view>
|
||
<view class="tit">
|
||
管理与服务
|
||
</view>
|
||
<view class="content">
|
||
<view class="item" @click="topage(1)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uVEbrRDbZXvELwK73KAi" />
|
||
订单管理
|
||
</view>
|
||
<view class="item" @click="topage(2)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uVfPnj9gecPjuCQeDny8" />
|
||
车型管理
|
||
</view>
|
||
<view class="item" @click="topage(3)">
|
||
<image src=" https://lxnapi.ccttiot.com/bike/img/static/uL5oGXIh24XK3RTTkQ9E" />
|
||
收费模版
|
||
</view>
|
||
<view class="item" @click="topage(4)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uO1ju1OpuA5jjMR7bLYh" />
|
||
帮助和客服
|
||
</view>
|
||
<view class="item" @click="topage(5)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uHNMNwTRw89NhtgZUNXK" />
|
||
意见和反馈
|
||
</view>
|
||
<view class="item" v-if="AccountInfo.isAuthentication == false">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/unrltNyYYRXUutaqtuJY" />
|
||
实名认证
|
||
</view>
|
||
<view class="item" @click="topage(6)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uusjOAFIQuDM5sfVPags" />
|
||
添加设备
|
||
</view>
|
||
<!-- <view class="item">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u1SsqJYSQ8jTK9PkhFtF"/>
|
||
设置
|
||
</view> -->
|
||
<view class="item" @click="topage(7)">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u1SsqJYSQ8jTK9PkhFtF" />
|
||
用户端
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin-left: -32rpx;">
|
||
<tab-bar :indexs='2'></tab-bar>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TabBar from '@/pages_store/components/tab-bar/tab-bar.vue';
|
||
|
||
export default {
|
||
components: {
|
||
TabBar
|
||
},
|
||
data() {
|
||
return {
|
||
background: {
|
||
backgroundColor: " ",
|
||
},
|
||
BalanceList: [],
|
||
AccountInfo: {}
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getChangeBlance()
|
||
this.getAconutInfo()
|
||
},
|
||
methods: {
|
||
formatAmount(amount) {
|
||
return Number(amount).toFixed(2);
|
||
},
|
||
formatName(name) {
|
||
if (!name) return '';
|
||
// 只返回第一个字符，后面用*代替
|
||
return name.charAt(0) + '*'.repeat(name.length - 1);
|
||
},
|
||
formatTime(timestamp) {
|
||
const now = new Date().getTime();
|
||
const diff = now - new Date(timestamp).getTime();
|
||
|
||
// 转换为天数
|
||
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||
|
||
if (days === 0) {
|
||
return '今天';
|
||
} else if (days === 1) {
|
||
return '昨天';
|
||
} else if (days < 30) {
|
||
return `${days}天前`;
|
||
} else {
|
||
const date = new Date(timestamp);
|
||
return `${date.getMonth() + 1}月${date.getDate()}日`;
|
||
}
|
||
},
|
||
typeReturn(type) {
|
||
switch (type.toString()) {
|
||
case '1':
|
||
return '租赁订单';
|
||
case '2':
|
||
return '续租订单';
|
||
case '3':
|
||
return '订单退款';
|
||
case '4':
|
||
return '押金退款';
|
||
case '5':
|
||
return '提现';
|
||
case '6':
|
||
return '提现失败';
|
||
case '7':
|
||
return '车损收入';
|
||
case '8':
|
||
return '逾期收入';
|
||
case '9':
|
||
return '配送费';
|
||
case '10':
|
||
return '调度费';
|
||
default:
|
||
return '未知类型';
|
||
}
|
||
},
|
||
getAconutInfo() {
|
||
this.$u.get(`/appVerify/myAccountInfo`,).then((res) => {
|
||
if (res.code == 200) {
|
||
this.AccountInfo = res.data
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
|
||
},
|
||
getChangeBlance() {
|
||
|
||
this.$u.get(`/appVerify/myChangeBalanceList`,).then((res) => {
|
||
if (res.code == 200) {
|
||
this.BalanceList = res.data
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
topage(num) {
|
||
if (num == 0) {
|
||
uni.navigateTo({
|
||
url: '/pages_store/withdraw'
|
||
});
|
||
} else if (num == 1) {
|
||
uni.navigateTo({
|
||
url: '/pages_store/ordder/ordderList'
|
||
})
|
||
} else if (num == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages_store/Operator/CarModel'
|
||
})
|
||
} else if (num == 3) {
|
||
uni.navigateTo({
|
||
url: '/pages_store/Operator/RuleList'
|
||
})
|
||
} else if (num == 4) {
|
||
console.log('5555555');
|
||
|
||
uni.navigateTo({
|
||
url: '/page_user/HelpCenter'
|
||
})
|
||
} else if (num == 7) {
|
||
|
||
uni.redirectTo({
|
||
url: '/pages/index/index'
|
||
})
|
||
} else if (num == 8) {
|
||
|
||
uni.redirectTo({
|
||
url: '/pages_store/Operator/ChangeBalance'
|
||
})
|
||
} else if (num == 6) {
|
||
|
||
uni.redirectTo({
|
||
url: '/pages_bind/bind_sn'
|
||
})
|
||
} else if (num == 9) {
|
||
|
||
uni.navigateTo({
|
||
url: '/pages_store/Operator/SnBind'
|
||
})
|
||
} else if (num == 5) {
|
||
|
||
uni.navigateTo({
|
||
url: '/page_user/feedback'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
overflow-y: auto;
|
||
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3');
|
||
background-size: cover;
|
||
/* 背景图片等比缩放以覆盖整个容器 */
|
||
background-position: center;
|
||
/* 背景图片居中显示 */
|
||
background-repeat: no-repeat;
|
||
/* 防止背景图片重复 */
|
||
min-height: 100vh;
|
||
/* 确保页面至少有 100% 的视窗高度，避免高度不足导致无法滚动 */
|
||
|
||
}
|
||
|
||
.page {
|
||
padding-top: 200rpx;
|
||
padding-left: 32rpx;
|
||
padding-right: 32rpx;
|
||
padding-bottom: 200rpx;
|
||
|
||
.tip_block {
|
||
padding: 20rpx 38rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
width: 658rpx;
|
||
height: 82rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
.tip_icon {
|
||
margin-top: 10rpx;
|
||
margin-left: auto;
|
||
|
||
image {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
|
||
.tip_title {
|
||
font-weight: 700;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.tip_content {
|
||
margin-left: 20rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.balance_card {
|
||
padding: 34rpx 38rpx;
|
||
margin-top: 34rpx;
|
||
width: 658rpx;
|
||
height: 334rpx;
|
||
|
||
|
||
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uABwK9dONs2ZZN14gJB5');
|
||
background-size: cover;
|
||
/* 背景图片等比缩放以覆盖整个容器 */
|
||
background-position: center;
|
||
/* 背景图片居中显示 */
|
||
background-repeat: no-repeat;
|
||
|
||
/* 防止背景图片重复 */
|
||
.card_title {
|
||
font-weight: 700;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.balance {
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
font-weight: 700;
|
||
font-size: 72rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.bot_box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 56rpx;
|
||
|
||
.bot_left {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.bot_right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 182rpx;
|
||
height: 64rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #5CA8FA;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.content {
|
||
margin-top: 24rpx;
|
||
width: 688rpx;
|
||
padding: 0 42rpx;
|
||
// height: 456rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
|
||
.item:last-child {
|
||
border-bottom: 0rpx solid #D8D8D8;
|
||
}
|
||
|
||
.item {
|
||
width: 100%;
|
||
padding: 34rpx 0;
|
||
display: flex;
|
||
border-bottom: 1rpx solid #D8D8D8;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
|
||
image {
|
||
margin-top: 4rpx;
|
||
margin-right: 34rpx;
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.tit {
|
||
margin-top: 40rpx;
|
||
font-weight: 700;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.header {
|
||
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
.header-left {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.avatar {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.userinfo {
|
||
margin-left: 40rpx;
|
||
|
||
.username {
|
||
font-weight: 700;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.userphone {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.code {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|