chuangte/bike
5
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
f21fcbb22f
bike/pages/my.vue
Sliverber f21fcbb22f 11
2024-06-07 18:08:55 +08:00

366 lines
8.6 KiB
Vue
Raw Blame History

<template>
<view class="page">
<u-navbar title="个人中心" :border-bottom="false" :background="bgc" title-color='#fff' title-size='36' height='45'></u-navbar>
<view class="topbg">
<view class="topbox">
<view class="info" >
<image v-if="info.avatar!=''" :src='info.avatar' mode=""></image>
<image v-if="info.avatar==''" src="https://lxnapi.ccttiot.com/bike/img/static/uSRzzLXhnbnWLB8jMKmr" mode=""></image>
<view class="cont">
<view class="name" v-if="info.realName!=null">
{{maskedName}}
</view>
<view class="name" v-if="info.realName==null" >
未实名
</view>
<view class="phone">
{{ maskedPhoneNumber }}
</view>
</view>
</view>
</view>
<view class="btnbg">
<view class="btnbox">
<view class="btncard">
<view class="card_li" @click="topage(1)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/u3ILM6aE0MdFo3ZKiYPH" mode=""></image>
<view class="text">
押金
</view>
<view class="tip" v-if="info.balance==null">
未充值
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<view class="card_li" @click="topage(2)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/u4Y4UAai9GLSaCBMMIsv" mode=""></image>
<view class="text">
我的订单
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<view class="card_li" @click="topage(3)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/u245BAqGOvTbYYGXJcrC" mode=""></image>
<view class="text">
问题上报记录
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<view class="card_li" @click="topage(4)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/ufD1uFe0pknx00weXJaU" mode=""></image>
<view class="text">
用车指南
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<!-- <view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(5)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/uJFhEFoioikjCQqqWW3c" mode=""></image>
<view class="text">
计费规则
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view> -->
<view class="card_li" @click="topage(8)" v-if="info.role==3||info.role==2">
<view class="card_left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/unIGXFEhvTgtXVcfPH33" mode=""></image>
<view class="text">
维护入口
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<view class="card_li" @click="topage(9)" v-if="info.role==3">
<view class="card_left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/unIGXFEhvTgtXVcfPH33" mode=""></image>
<view class="text">
管理入口
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
</view>
<view class="btncard" style="margin-top: 36rpx;" v-if="false">
<view class="card_li" @click="topage(5)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/utp8xohLmuvcTiYZdGCL" mode=""></image>
<view class="text">
用户协议
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<view class="card_li" @click="topage(6)">
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/um7bn51NCkfnuQbP0toj" mode=""></image>
<view class="text">
隐私政策
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
<view class="card_li" style="border-bottom:2rpx solid #fff ;" @click="topage(7)" >
<view class="card_left">
<image src="https://api.ccttiot.com/smartmeter/img/static/uJ1TRgb6xURsKZo5GUj8" mode=""></image>
<view class="text">
关于我们
</view>
</view>
<view class="iconfont icon-xiangyou1" >
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#4C97E7",
},
info:{}
}
},
onShow() {
this.getuserInfo()
},
computed: {
maskedPhoneNumber() {
if (!this.info.phonenumber) return '';
return this.info.phonenumber.slice(0, 3) + '****' + this.info.phonenumber.slice(7);
},
maskedName() {
if (!this.info.realName) return '';
return this.info.realName.charAt(0) + '*'.repeat(this.info.realName.length - 1);
}
},
methods: {
topage(num){
if(num==0){
// uni.navigateTo({
// url:''
// })
}else if(num==1){
uni.navigateTo({
url:'/page_user/yj'
})
}else if(num==2){
uni.navigateTo({
url:'/page_user/good_list'
})
}else if(num==3){
uni.navigateTo({
url:'/page_user/qsrecord'
})
}else if(num==4){
uni.navigateTo({
url:'/page_user/yczn'
})
}
else if(num==5){
uni.navigateTo({
url:'/page_user/jfgz'
})
}else if(num==8){
uni.navigateTo({
url:'/page_fix/fix_index'
})
}else if(num=9){
uni.navigateTo({
url:'/pages_admin/admin_index'
})
}
},
getuserInfo(){
this.$u.get("/getAppInfo").then((res) => {
if (res.code == 200) {
this.$store.commit('SET_USERID', res.user.userId);
this.info=res.user
// if( res.user.role==2){
// uni.navigateTo({
// url:'/page_fix/fix_index'
// })
// }
} else {
uni.showToast({
title: '未登录，请登录后尝试',
icon: 'none',
duration: 2000
});
setTimeout(()=>{
// if()
},300)
}
});
}
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.page {
width: 750rpx;
.topbg {
width: 750rpx;
background: #fff;
height: 184rpx;
.topbox{
width: 750rpx;
background: #4C97E7;
height: 184rpx;
border-radius: 0 0 100rpx 0;
.info{
padding-top: 40rpx;
margin-left: 100rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
image{
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.cont{
margin-left: 40rpx;
width: 70%;
.name{
font-weight: 400;
font-size: 32rpx;
color: #FFFFFF;
width: 100%;
}
.phone{
margin-top: 4rpx;
width: 100%;
font-weight: 400;
font-size: 20rpx;
color: #FFFFFF;
}
}
}
}
}
.btnbg{
width: 750rpx;
background: #4C97E7;
.btnbox{
padding-top: 36rpx;
width: 750rpx;
background: #fff;
border-radius: 100rpx 0 0 0;
.btncard{
padding: 0 54rpx;
margin: 0 auto;
width: 680rpx;
// height: 438rpx;
padding: 0 56rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 34rpx 34rpx 34rpx 34rpx;
.card_li{
padding-top: 18rpx;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #D8D8D8;
padding-bottom: 26rpx;
.card_left{
// width: 100%;
display: flex;
flex-wrap: nowrap;
// align-items: center;
image{
margin-right: 28rpx;
width: 40rpx;
height: 40rpx;
}
.text{
margin-right: 24rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.tip{
display: flex;
align-items: center;
justify-content: center;
width: 80rpx;
height: 28rpx;
background: #FFEFEF;
border-radius: 17rpx 17rpx 17rpx 17rpx;
font-weight: 400;
font-size: 16rpx;
color: #FA5F5F;
}
}
.icon-xiangyou1{
font-size: 42rpx;
color: #3D3D3D;
}
}
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink