<template>
|
<view class="profile-page">
|
<view class="profile-header">
|
<image class="avatar" src="/static/images/ic_pic@2x.png" mode="aspectFill"></image>
|
<view class="profile-info">
|
<view class="profile-name">{{ displayMobile }}</view>
|
<button open-type="getPhoneNumber" @getphonenumber="getPhone" v-if="displayMobile === '绑定手机号'"></button>
|
<!-- <view class="profile-mobile">{{ displayName }}</view> -->
|
</view>
|
</view>
|
|
<view class="menu-card">
|
<view class="menu-item" v-for="item in menuList" :key="item.id" @click="handleMenu(item)">
|
<view class="menu-text">{{ item.name }}</view>
|
<image class="menu-arrow" src="/static/icon/ar_detail@2x.png" mode="aspectFit"></image>
|
<!-- #ifdef MP-WEIXIN -->
|
<button v-if="item.id === 5" class="contact-trigger" open-type="contact" @click.stop></button>
|
<!-- #endif -->
|
</view>
|
</view>
|
|
<view class="logout-btn" @click="logout" v-if="userInfo && userInfo.mobile">退出登录</view>
|
|
<!-- 自行车-确认结算 -->
|
<u-popup :show="show3" :closeOnClickOverlay="true" mode="bottom" bgColor="#fff" :round="10" @close="show3 = false">
|
<template>
|
<view class="deposit1">
|
<view class="deposit_text">
|
<text>温馨提示</text>
|
<text class="red">结算后，如果继续骑行会重新开始计费</text>
|
<text class="red">确认结算么？</text>
|
</view>
|
<view class="deposit_footer">
|
<view class="deposit_footer_item" @click="show3 = false">再等等</view>
|
<view class="deposit_footer_item c" @click="settlement1">立即结算</view>
|
</view>
|
</view>
|
</template>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
|
export default {
|
computed: {
|
...mapState(['userInfo']),
|
// displayName() {
|
// return this.userInfo.nickName || this.userInfo.nickname || this.userInfo.name || '未登录用户'
|
// },
|
displayMobile() {
|
const mobile = this.userInfo.mobile || ''
|
if (!mobile) {
|
return '绑定手机号'
|
}
|
return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
}
|
},
|
data() {
|
return {
|
show3: false,
|
isDisabled: true,
|
menuList: [
|
{ id: 1, name: '结算退押金' },
|
{ id: 2, name: '消费明细', url: '/pages/consumptionDetails/consumptionDetails' },
|
{ id: 3, name: '车辆计价规则', url: '/pages/pricingRules/pricingRules' },
|
{ id: 4, name: '抖音兑换说明' },
|
{ id: 5, name: '联系客服' },
|
{ id: 6, name: '运营中心' }
|
]
|
}
|
},
|
methods: {
|
// 获取手机号
|
getPhone(e) {
|
var that = this;
|
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
uni.login({
|
provider: 'weixin',
|
success: function(loginRes) {
|
let {
|
code
|
} = loginRes;
|
that.$u.api.wxLogin({
|
code
|
}).then(res => {
|
that.$store.commit('setToken', res.data.token)
|
that.$u.api.wxPhone({
|
encryptedData: e.detail.encryptedData,
|
iv: e.detail.iv,
|
sessionKey: res.data.sessionKey
|
}).then(result => {
|
if (result.code === 200) {
|
that.$store.commit('setUserInfo', result.data.userResponse)
|
}
|
})
|
})
|
}
|
});
|
}
|
},
|
// 结算
|
settlement1() {
|
if (this.isDisabled) {
|
this.isDisabled = false
|
this.$u.api.goodsOrderSettlement({}).then(res => {
|
if (res.code === 200) {
|
uni.showToast({ title: '结算申请提交成功，请耐心等待退款！', icon: 'none', duration: 2000 });
|
}
|
}).finally(() => {
|
this.show3 = false
|
this.isDisabled = true
|
})
|
}
|
},
|
handleMenu(item) {
|
if (item.url) {
|
uni.navigateTo({
|
url: item.url
|
})
|
return
|
}
|
// 结算退押金
|
if (item.id === 1) {
|
if (!this.userInfo.mobile) return
|
this.$u.api.home()
|
.then(res => {
|
if (res.code === 200) {
|
let info = res.data
|
|
if (info.rideStatus === 1) {
|
uni.showToast({ title: '骑行中不能结算押金', icon: 'none', duration: 2000 })
|
return
|
}
|
if (info.depositStatus === 1) {
|
this.show3 = true
|
} else if (info.depositStatus === 2) {
|
uni.showToast({ title: '结算申请提交成功，请耐心等待退款！', icon: 'none', duration: 2000 });
|
} else {
|
uni.showToast({ title: '您暂无押金，无需结算！', icon: 'none', duration: 2000 });
|
}
|
|
}
|
})
|
return
|
}
|
|
if (item.id === 4) {
|
uni.navigateTo({
|
url: '/pages/explanation/explanation'
|
})
|
return
|
}
|
|
if (item.id === 5) {
|
return
|
}
|
|
if (item.id === 6) {
|
uni.navigateTo({
|
url: this.userInfo.sysuser ? '/pagesA/pages/operation/operation' : '/pages/operationLogin/operationLogin'
|
})
|
}
|
},
|
logout() {
|
this.$u.api.accountLogout()
|
.then(res => {
|
if (res.code === 200) {
|
let user = JSON.parse(JSON.stringify(this.userInfo))
|
user.mobile = ''
|
this.$store.commit('setUserInfo', user)
|
uni.reLaunch({
|
url: '/pages/index/index'
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.deposit1 {
|
width: 100%;
|
min-height: 470rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 40rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
.deposit_text {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.red {
|
color: #FC2525 !important;
|
font-size: 30rpx !important;
|
}
|
|
text {
|
&:nth-child(1) {
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
|
&:nth-child(2) {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-top: 40rpx;
|
}
|
|
&:nth-child(3) {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
margin-top: 20rpx;
|
}
|
}
|
}
|
|
.deposit_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
|
.c {
|
background-color: #01B6AD !important;
|
color: #ffffff !important;
|
}
|
|
.deposit_footer_item {
|
flex: 1;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
border-radius: 46rpx;
|
border: 1rpx solid #01B6AD;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #01B6AD;
|
|
&:first-child {
|
margin-right: 22rpx;
|
}
|
}
|
}
|
}
|
|
.profile-page {
|
width: 100%;
|
min-height: 100vh;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #ffffff;
|
}
|
|
.profile-header {
|
display: flex;
|
align-items: center;
|
padding-top: 6rpx;
|
}
|
|
.avatar {
|
width: 92rpx;
|
height: 92rpx;
|
border-radius: 46rpx;
|
flex-shrink: 0;
|
}
|
|
.profile-info {
|
margin-left: 20rpx;
|
min-width: 0;
|
position: relative;
|
}
|
|
.profile-info button {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 999;
|
opacity: 0;
|
}
|
|
.profile-name {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #222222;
|
}
|
|
.profile-mobile {
|
margin-top: 10rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
}
|
|
.menu-card {
|
margin-top: 62rpx;
|
background: #F8F9FB;
|
border-radius: 24rpx;
|
overflow: hidden;
|
}
|
|
.menu-item {
|
height: 106rpx;
|
padding: 0 28rpx 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 2rpx solid #E5E5E5;
|
position: relative;
|
|
&:last-child {
|
border-bottom: 0;
|
}
|
}
|
|
.contact-trigger {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
opacity: 0;
|
border: 0;
|
background: transparent;
|
z-index: 2;
|
}
|
|
.contact-trigger::after {
|
border: 0;
|
}
|
|
.menu-text {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.menu-arrow {
|
width: 30rpx;
|
height: 30rpx;
|
flex-shrink: 0;
|
}
|
|
.logout-btn {
|
width: 200rpx;
|
height: 72rpx;
|
margin: 70rpx auto 0;
|
border-radius: 36rpx;
|
border: 1rpx solid #999999;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
line-height: 72rpx;
|
text-align: center;
|
box-sizing: border-box;
|
background: #ffffff;
|
}
|
</style>
|
