432 lines
11 KiB
Vue
432 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="个人中心" :is-back='false' :border-bottom="false" :background="bgc" title-color='#fff'
|
||
title-size='36' height='45'></u-navbar>
|
||
<view class="info">
|
||
<view class="lt">
|
||
<view class="pic">
|
||
<image :src="appimg.mineDefaultAvatar" mode="aspectFill" style="border-radius: 50%;width:112rpx;height: 112rpx;"></image>
|
||
</view>
|
||
<view class="cen">
|
||
<view class="name">
|
||
{{user.nickName == null ? '--' : maskName(user.nickName)}}
|
||
</view>
|
||
<view class="tel">
|
||
{{user.userName == null ? '--' : maskPhone(user.userName)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <u-icon name="arrow-right" color="#D8D8D8" size="28"></u-icon> -->
|
||
<view class=""></view>
|
||
</view>
|
||
<view class="zijin" @click="btntx">
|
||
<view class="top">
|
||
<view class="lt">
|
||
<view class="zh">
|
||
账户余额（元）
|
||
</view>
|
||
<view class="price">
|
||
￥{{user.balance == null ? '0.00' : (Number(user.balance) + Number(waitDivideAmount)).toFixed(2)}}
|
||
</view>
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uWybWHvfNvmi7X0hp93I" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="botlt">
|
||
可提现 ￥{{user.balance == null ? '0.00' : user.balance.toFixed(2)}}
|
||
</view>
|
||
<view class="botrt">
|
||
累计提现 ￥{{successAmount == null ? '0.00' : Number(successAmount).toFixed(2)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="caozuolist">
|
||
<view class="itemcaozuo" @click="btnskzh">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ubmOhv58UFoPpg8fyTf5" mode=""></image> 收款账户
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view>
|
||
<view class="itemcaozuo" @click="btnbangzhu">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uHbCdZb2Z034155WseVr" mode=""></image> 使用帮助
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view>
|
||
<view class="itemcaozuo" @click="btnfuwuewm">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uKy9LoyuuVQAdeL8pvm7" mode=""></image> 消息通知
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view>
|
||
<view class="itemcaozuo" @click="btnLicense">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uiYvlUjghsWmJXbVnHdc" mode=""></image> 企业认证
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view>
|
||
<!-- <view class="itemcaozuo" @click="btnLicense">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ueOFWLPU7WhWW7AYgxh7" mode=""></image> 营业执照
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
<view class="caozuolist" style="height: 130rpx;padding-top: 40rpx;" @click="btnyh">
|
||
<view class="itemcaozuo" style="margin-top: 0;">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ubmOhv58UFoPpg8fyTf5" mode=""></image> 进入用户端
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="caozuolist" style="height: 130rpx;padding-top: 40rpx;" @click="btnlogo">
|
||
<view class="itemcaozuo" style="margin-top: 0;">
|
||
<view class="lt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uId3DZ3vnrSHUfbsv2FF" mode=""></image> 退出登录
|
||
</view>
|
||
<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="fuwuewm" v-if="fuwuewm">
|
||
<image src="https://api.ccttiot.com/qrcode_for_gh_25c71c637dbc_344%20(2)-1753329225290.jpg" show-menu-by-longpress @longpress="handleLongPress" mode=""></image>
|
||
<text class="" style="width: 100%;text-align: center;margin-top: 20rpx;display: block;color: #fff;">
|
||
长按关注公众号，租车信息不错过！
|
||
</text>
|
||
<view class="" @click="fuwuewm = false">
|
||
关闭
|
||
</view>
|
||
</view>
|
||
<view class="mask" style="background-color: rgba(0, 0, 0, 0.7);" v-if="fuwuewm"></view>
|
||
<TabBar :indexs='4' style=""></TabBar>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import TabBar from '@/page_shanghu/components/tab-bar/tab-bar.vue'
|
||
export default {
|
||
components: { TabBar },
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: " ",
|
||
},
|
||
fuwuewm:false,
|
||
appimg: this.$store.state.app.imgConfig,
|
||
user:{},
|
||
waitDivideAmount:'',
|
||
successAmount:'',
|
||
licenseInfo: null, // 营业执照信息
|
||
authTypes: [] // 认证类型数组
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.$store.dispatch('jiance');
|
||
this.getinfo()
|
||
},
|
||
methods: {
|
||
// 点击企业认证
|
||
btnLicense(){
|
||
let url = '/page_shanghu/upload_license';
|
||
if(this.user.userId){
|
||
url += '?userId=' + this.user.userId;
|
||
}
|
||
uni.navigateTo({
|
||
url: url,
|
||
success: (res) => {
|
||
console.log('跳转成功:', res);
|
||
},
|
||
fail: (err) => {
|
||
console.error('跳转失败:', err);
|
||
uni.showToast({
|
||
title: '跳转失败，请稍后重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转收款账户
|
||
btnskzh(){
|
||
if(this.user.isReal == true){
|
||
uni.navigateTo({
|
||
url:'/page_user/shoukuan/index'
|
||
})
|
||
}else{
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未通过实名认证，是否前往？',
|
||
showCancel: true,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url:'/page_user/shiming'
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('取消') // 用户点击取消
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 点击进行跳转点击去提现
|
||
btntx(){
|
||
uni.navigateTo({
|
||
url:'/page_shanghu/gongzuotai/AccountDetails'
|
||
})
|
||
},
|
||
// 点击跳转到商户使用帮助
|
||
btnbangzhu(){
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/bangzhu/index'
|
||
})
|
||
},
|
||
// 获取个人信息
|
||
getinfo(){
|
||
this.$u.get("/getInfo").then((res) => {
|
||
if(res.code == 200){
|
||
this.user = res.user
|
||
this.authTypes = res.user.authTypes || []
|
||
this.waitDivideAmount = res.stat.bonus.waitDivideAmount == null ? 0 : res.stat.bonus.waitDivideAmount
|
||
this.successAmount = res.stat.withdraw.successAmount == null ? 0 : Number(res.stat.withdraw.successAmount)
|
||
}
|
||
})
|
||
},
|
||
// 名称：将名称的第二位替换为 * 展示
|
||
maskName(name) {
|
||
if (!name || typeof name !== 'string') return name
|
||
const chars = Array.from(name)
|
||
if (chars.length < 2) return name
|
||
chars[1] = '*'
|
||
return chars.join('')
|
||
},
|
||
// 手机号：将手机号的中间四位替换为 * 展示
|
||
maskPhone(phone) {
|
||
if (!phone) return phone
|
||
const str = String(phone)
|
||
if (str.length < 7) return str
|
||
return str.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||
},
|
||
// 点击回到用户页
|
||
btnyh(){
|
||
uni.reLaunch({
|
||
url:'/pages/nearbystores/index'
|
||
})
|
||
},
|
||
// 点击绑定服务号
|
||
btnfuwuewm(){
|
||
let that = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
that.$u.put(`/app/user/bindUnionId?jsCode=${res.code}`).then((res) => {
|
||
if (res.code == 200) {
|
||
that.fuwuewm = true
|
||
}else{
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
showCancel:false,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 点击退出登录
|
||
btnlogo(){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要退出登录吗？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
try {
|
||
uni.clearStorageSync() // 同步清除
|
||
console.log('所有缓存已清除')
|
||
uni.showToast({
|
||
title: '缓存已清除',
|
||
icon: 'success',
|
||
duration: 3000
|
||
})
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
} catch (e) {
|
||
console.error('清除失败:', e)
|
||
uni.showToast({
|
||
title: '清除失败',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
} else if (res.cancel) {
|
||
console.log('取消'); // 用户点击取消
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: linear-gradient( 180deg, #4886F1 0%, rgba(66,151,243,0) 100%);
|
||
}
|
||
.mask{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 9;
|
||
}
|
||
.fuwuewm{
|
||
position: fixed;
|
||
top: 30%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
image{
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
}
|
||
view{
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
background-color: #4297F3;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
line-height: 70rpx;
|
||
margin: auto;
|
||
margin-top: 50rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.caozuolist{
|
||
width: 718rpx;
|
||
height: 480rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding-top: 2rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
.itemcaozuo{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 48rpx;
|
||
margin-top: 52rpx;
|
||
.lt{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.zijin{
|
||
width: 718rpx;
|
||
height: 278rpx;
|
||
background: linear-gradient( 90deg,#2C8AF0 0%, #B6D9FF 100%);
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.bot{
|
||
width: 718rpx;
|
||
height: 70rpx;
|
||
background: linear-gradient( 90deg, rgba(205,224,255,0) 0%, #ACCBFF 34%, #CDE0FF 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
.botlt{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
width: 50%;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
border-right: 1px solid #fff;
|
||
padding-left: 36rpx;
|
||
}
|
||
.botrt{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
width: 50%;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
padding-left: 26rpx;
|
||
}
|
||
}
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.lt{
|
||
margin-top: 26rpx;
|
||
padding-left: 34rpx;
|
||
.zh{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.price{
|
||
margin-top: 30rpx;
|
||
font-size: 60rpx;
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.rt{
|
||
image{
|
||
width: 196rpx;
|
||
height: 52rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
padding: 0 30rpx;
|
||
.lt{
|
||
display: flex;
|
||
align-items: center;
|
||
.pic{
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
// background: #D8D8D8;
|
||
margin-right: 36rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.cen{
|
||
.name{
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.tel{
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |