<template> <view class="page"> <view class="fixed"> <u-navbar title="个人中心" :border-bottom="false" :background="background" title-color='#fff' title-size='36' back-icon-color='#fff' height='45'></u-navbar> </view> <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uJVTiExwVDJJzYywmoLc" mode="" v-if="deptId==101"></image> <image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uvRt04OhPwHf2MRkU6mk" mode="" v-if="deptId==100"></image> <view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view> <view class="statusBars" :style="{ height:navBarHeight+'px' }"></view> <view class="topbg"> <view class="topbox"> <view class="info"> <image v-if="info.avatar!=''" :src='info.avatar' mode=""></image> <image v-if="info.avatar==''&&deptId==100" src="https://lxnapi.ccttiot.com/bike/img/static/uSRzzLXhnbnWLB8jMKmr" mode=""></image> <image v-if="info.avatar==''&&deptId==101" src=" https://lxnapi.ccttiot.com/bike/img/static/uP9vN4Vht0B2bd10Sy60" 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" v-if="false"> <view class="btnbox"> <view class="btncard"> <view class="card_li" @click="topage(1)" v-if="areaInfo.deposit!=0"> <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(10)"> <view class="card_left"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uk7i80QWz02cAfbbC518" 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||info.role==9"> <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 class="tocont"> <view class="cont_li" @click="topage(1)" v-if="areaInfo.deposit!=0"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uYfTj4a3NkSNY0AqYHFc" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uixPe8LlgKO7aUauIPVG" mode="" v-else style="width:59.46rpx;height: 49.87rpx;"></image> <view class="txt"> 押金 </view> </view> <view class="cont_li" @click="topage(11)"> <image src="https://lxnapi.ccttiot.com/bike/img/static/unrltNyYYRXUutaqtuJY" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/ujxTS92ZiZolG2CimtTF" mode="" v-else style="width:69.05rpx;height: 44.12rpx;"></image> <view class="txt"> 实名认证 </view> </view> <view class="cont_li" @click="topage(4)"> <image src="https://lxnapi.ccttiot.com/bike/img/static/ucR0pDCg1vDshatphlUb" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uRRKE06XlWBjxhjBuGbE" mode="" v-else style="width:47.95rpx;height: 49.87rpx;"></image> <view class="txt"> 用车指南 </view> </view> <view class="cont_li" @click="topage(10)"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uLHRXFuIPhMy0EDgPdVr" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uUsAb1dSN92FkJmlT40Q" mode="" v-else style="width: 30.69rpx;height: 44.12rpx;"></image> <view class="txt"> 客服服务 </view> </view> </view> <view class="vip_box" v-if="info.vipType==0&&false"> <view class="txt1">月卡会员</view> <view class="txt2" v-if="CarkTypeList[0].retailPrice"> 仅需¥{{CarkTypeList[0].retailPrice }},可享30天免费骑行权益 </view> </view> <view class="vip_box1" v-if="info.vipType==1&&false"> <view class="txt1">月卡会员</view> <view class="txt2"> 月卡会员{{ daysUntilExpiration }}天后到期</view> <view class="btn"> 立即续费 </view> </view> <view class="fee_box" v-if="false"> <view class="auto_box"> <view class="auto_li" v-for="(item,index) in CouponList" :key="index" @click="tobuy()"> <view class="txt1"> {{item.name}} </view> <view class="txt1"> {{item.retailPrice}}元 </view> <view class="txt2" v-if="item.desc"> {{item.desc}} <!-- 每单最高抵3元 --> </view> <view class="buy_btn"> 购买 </view> </view> </view> </view> <view class="type_cont"> <view class="type_li" @click="topage(2)"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uG1iB3C69uNIr9Zx7qH6" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uDMXuZiiktkF0EWBrZv3" mode="" v-else style="width: 49.87rpx;height: 44.12rpx;"></image> 我的订单 <view class="iconfont icon-xiangyou1"></view> </view> <view class="type_li" style="margin-top: 70rpx;" @click="topage(3)"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uqsALXg6QXh9Yf6wIddS" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uhy9Mp5SoiTQoogpCI3T" mode="" v-else style="width: 59.46rpx;height: 47.95rpx;"></image> 问题上报 <view class="iconfont icon-xiangyou1"></view> </view> <view class="type_li" style="margin-top: 70rpx;" @click="topage(10)"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uuVBPGs95GoM8RZ1FfVx" mode="" v-if="deptId==100"> </image> <image src="https://lxnapi.ccttiot.com/bike/img/static/uN9B5Nu05ynxDQkaO9jE" mode="" v-else style="width: 53.71rpx;height: 47.95rpx;"></image> 帮助中心 <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="type_cont" v-if="info.role==3||info.role==2||info.role==9"> <view class="type_li" @click="topage(8)" v-if="info.role==3||info.role==2||info.role==9"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uyA3Cjjryy4Z9fCjs15Z" mode=""></image> 运维人员 <view class="iconfont icon-xiangyou1"></view> </view> <view class="type_li" style="margin-top: 70rpx;" @click="topage(9)" v-if="info.role==3||info.role==9"> <image src="https://lxnapi.ccttiot.com/bike/img/static/uC0nQVG6EK7OCYefw1Ws" mode=""></image> 管理人员 <view class="iconfont icon-xiangyou1"></view> </view> </view> <view class="btns" @click="layout"> 退出登录 </view> <u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm"></u-select> </view> </template> <script> import { info } from 'autoprefixer'; export default { data() { return { background: { backgroundColor: 'transparent' }, backcolor: { color: '#ffffff' }, info: {}, totype: 0, list: [], show: false, deptId: 0, statusBarHeight: 0, navBarHeight: 0, areaInfo: {}, CouponList: [], CarkTypeList: [], daysUntilExpiration: 0 // 剩余天数 } }, onLoad() { //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; // #ifdef MP-WEIXIN // 获取微信胶囊的位置信息 width,height,top,right,left,bottom const custom = wx.getMenuButtonBoundingClientRect() // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2 this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2 // #endif }, onShow() { this.deptId = uni.getStorageSync('deptId'); this.getuserInfo() this.getarea() }, 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: { calculateDaysUntilExpiration() { const currentDate = new Date(); const expirationDate = new Date(this.userinfo.expirationTime); // 计算时间差(毫秒) const timeDifference = expirationDate - currentDate; // 将毫秒转换为天 this.daysUntilExpiration = Math.ceil(timeDifference / (1000 * 60 * 60 * 24)); }, tobuy() { uni.navigateTo({ url: '/page_vip/buyCard' }) }, getarea() { let id = uni.getStorageSync('areaId'); this.$u.get("/app/area/" + id).then((res) => { if (res.code == 200) { this.areaInfo = res.data } else { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); } }); }, getCouponList() { let data = { type: '3,4' } this.$u.get("/app/couponList", data).then((res) => { if (res.code == 200) { this.CouponList = res.data } else { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); } }); }, getCarkType() { let data = { type: '1' } this.$u.get("/app/couponList", data).then((res) => { if (res.code == 200) { this.CarkTypeList = res.data } else { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); } }); }, layout() { this.$u.post('/logout').then((res) => { if (res.code == 200) { // 获取所有缓存键 const keys = uni.getStorageInfoSync().keys; // 指定要保留的缓存键 const preserveKey = 'deptId'; // 替换为你想要保留的缓存键 // 遍历所有缓存键并删除除指定键以外的所有键 keys.forEach(key => { if (key !== preserveKey) { uni.removeStorageSync(key); } }); // 进行重定向 uni.redirectTo({ url: '/pages/index/index' }); } }).catch(error => { console.error("Error fetching area data:", error); }); }, topage(num) { if (num == 0) { // uni.navigateTo({ // url:'' // }) } else if (num == 1) { uni.navigateTo({ url: '/page_user/yj?showList=true' }) } 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) { this.totype = 1 if (this.list.length < 2) { uni.setStorageSync('adminAreaid', this.list[0].value); uni.navigateTo({ url: '/page_fix/fix_index' }) } else { this.show = true } } else if (num == 9) { this.totype = 2 if (this.list.length < 2) { uni.setStorageSync('adminAreaid', this.list[0].value); uni.navigateTo({ url: '/pages_admin/admin_index' }) } else { this.show = true } } else if (num == 10) { uni.navigateTo({ url: '/page_user/khfw/khfw' }) } else if (num == 11) { if (info.idCard == '') { uni.navigateTo({ url: '/page_user/idcard_test' }) } else { uni.showToast({ title: '实名授权已完成', icon: 'none', duration: 2000 }); } } }, confirm(e) { // console.log(e); uni.setStorageSync('adminAreaid', e[0].value); if (this.totype == 2) { uni.navigateTo({ url: '/pages_admin/admin_index' }) } else { uni.navigateTo({ url: '/page_fix/fix_index' }) } }, getareaList() { this.$u.get('/appVerify/getAreaList').then((res) => { if (res.code == 200) { this.list = res.data.map(item => ({ value: item.areaId, label: item.areaName })); } }).catch(error => { console.error("Error fetching area data:", error); }); }, getuserInfo() { uni.showLoading({ title: '加载中' }) this.$u.get("/getAppInfo").then((res) => { if (res.code == 200) { uni.hideLoading() this.getCouponList() this.getCarkType() this.$store.commit('SET_USERID', res.user.userId); this.info = res.user // this.calculateDaysUntilExpiration() if (info.role != 1) { this.getareaList() } // if( res.user.role==2){ // uni.navigateTo({ // url:'/page_fix/fix_index' // }) // } } else { uni.redirectTo({ url: '/pages/login/login' }); // let areaId = uni.getStorageSync('areaId'); // if (areaId) { // let areaId = uni.getStorageSync('areaId'); // if (areaId) { // let that = this; // wx.login({ // success(res) { // if (res.code) { // console.log('登录111', res); // let data = { // wxOpenId: res.code, // }; // let areaId = uni.getStorageSync('areaId'); // // 显示带有确定和取消按钮的弹窗 // uni.showModal({ // title: '确认登录', // content: '是否使用当前微信账户进行登录?', // success(modalRes) { // if (modalRes.confirm) { // console.log('用户点击确定'); // // 用户点击确定,继续执行登录操作 // that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId) // .then(res => { // uni.hideLoading(); // if (res.code == 200) { // uni.setStorageSync('token', res.token); // that.getuserInfo(); // } else if (res.code == 501) { // uni.showToast({ // title: res.msg, // icon: 'none', // duration: 2000 // }); // } else { // uni.redirectTo({ // url: '/pages/login/login' // }); // } // }); // } else if (modalRes.cancel) { // console.log('用户点击取消'); // uni.redirectTo({ // url: '/pages/login/login' // }); // // 用户点击取消,可以进行其他操作或提示 // } // } // }); // } // } // }); // } // } else { // uni.showToast({ // title: '请授权位置信息后再尝试', // icon: 'none', // duration: 4000 // }); // } } }); } } } </script> <style lang="scss"> /deep/ .uni-navbar { background: transparent !important; // 使用 !important 确保覆盖原样式 } page { background-color: #F4F4F4; } .page { width: 750rpx; .fee_box { margin-top: 18rpx; position: relative; margin-left: 38rpx; width: 680rpx; height: 288rpx; background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ugciMYClSGgJxP8HYoRU'); background-size: cover; background-position: center; background-repeat: no-repeat; .auto_box::-webkit-scrollbar { display: none; } .auto_box { padding-left: 24rpx; display: flex; overflow-x: auto; /* 允许横向滚动 */ flex-wrap: nowrap; /* 禁止换行,保持所有元素在一行 */ position: absolute; top: 90rpx; width: 100%; /* 根据需要调整宽度 */ height: auto; /* 根据内容自动调整高度 */ .auto_li { position: relative; padding: 24rpx 28rpx; margin-right: 22rpx; width: 408rpx; height: 176rpx; flex-shrink: 0; /* 防止子元素被压缩 */ background-image: url('https://lxnapi.ccttiot.com/bike/img/static/ui88NWy9R1j2zFGojdHU'); background-size: cover; background-position: center; .txt1 { width: 100%; font-weight: 600; font-size: 32rpx; color: #495E74; } .txt2 { font-weight: 400; font-size: 24rpx; color: #495E74; } .buy_btn { position: absolute; right: 26rpx; bottom: 38rpx; display: flex; align-items: center; justify-content: center; width: 132rpx; height: 50rpx; background: #495E74; border-radius: 25rpx 25rpx 25rpx 25rpx; font-weight: 500; font-size: 28rpx; color: #FFF3DB; } } } } .vip_box1 { position: relative; margin-left: 38rpx; width: 680rpx; height: 158rpx; background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiaiNkMy7221n3bk2ta0'); background-size: cover; /* 背景图片等比缩放以覆盖整个容器 */ background-position: center; /* 背景图片居中显示 */ background-repeat: no-repeat; .txt1 { top: 20rpx; left: 171rpx; position: absolute; font-weight: 500; font-size: 39rpx; color: #B07C1E; } .txt2 { position: absolute; left: 171rpx; bottom: 20rpx; font-weight: 400; font-size: 25rpx; color: #B07C1E; } .btn { display: flex; align-items: center; justify-content: center; position: absolute; top: 18rpx; right: 23rpx; width: 150rpx; height: 43rpx; border-radius: 31rpx 31rpx 31rpx 31rpx; border: 1rpx solid #B07C1E; font-weight: 400; font-size: 25rpx; color: #B07C1E; } } .vip_box { position: relative; margin-left: 38rpx; width: 680rpx; height: 158rpx; background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uw6bYgjn1bS1ayNm6VI9'); background-size: cover; /* 背景图片等比缩放以覆盖整个容器 */ background-position: center; /* 背景图片居中显示 */ background-repeat: no-repeat; .txt1 { top: 20rpx; left: 100rpx; position: absolute; font-weight: 500; font-size: 44rpx; color: #FFE09E; } .txt2 { position: absolute; right: 74rpx; bottom: 10rpx; font-weight: 400; font-size: 24rpx; color: #FFE09E; } } .btns { display: flex; align-items: center; justify-content: center; width: 680rpx; height: 90rpx; background: #64B6A7; color: #fff; font-size: 36rpx; border-radius: 20rpx; margin: 40rpx auto; } .fixed { z-index: 999; position: fixed; top: 0; } .backimg { position: fixed; width: 750rpx; height: 564rpx; z-index: -1; } .topbg { width: 750rpx; // background: #fff; height: 184rpx; .topbox { width: 750rpx; // background: #fff; 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%; text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); } .phone { margin-top: 4rpx; width: 100%; font-weight: 400; font-size: 20rpx; color: #FFFFFF; text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); } } } } } .type_cont { width: 680rpx; padding: 58rpx 54rpx; // height: 608rpx; background: #FFFFFF; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: 0 auto; margin-top: 30rpx; .type_li { width: 100%; display: flex; align-items: center; flex-wrap: nowrap; font-weight: 400; font-size: 32rpx; color: #2F3240; image { width: 44rpx; height: 44rpx; margin-right: 20rpx; } .icon-xiangyou1 { margin-left: auto; color: #2F3240; font-size: 36rpx; } } } .tocont { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-around; margin: 0 auto; margin-top: 100rpx; width: 680rpx; height: 176rpx; background: #fff; border-radius: 20rpx 20rpx 20rpx 20rpx; .cont_li { width: 112rpx; display: flex; flex-wrap: wrap; justify-content: center; image { margin-top: 10rpx; width: 44rpx; height: 44rpx; } .txt { width: 112rpx; text-align: center; font-weight: 400; font-size: 28rpx; color: #2F3240; } } } .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>