255 lines
11 KiB
Vue
255 lines
11 KiB
Vue
<template>
|
|
<view class="pad-x180">
|
|
<status-nav-slot :backgroudColor="backgroudColor">
|
|
<!-- <view slot="leftContent"><i class="icon icon-return fon40" :style="{color:newColor}"></i></view> -->
|
|
<view slot="leftContent" style="width: 30rpx;"></view>
|
|
<view slot="centerContent">
|
|
<view :style="{color:newColor}">个人中心</view>
|
|
</view>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view slot="rightContent" @tap="goSetUp"><i class="icon icon-sandian fon40" :style="{color:newColor}"></i>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view slot="rightContent" @tap="goSetUp"><i class="icon icon-sandian fon40" :style="{color:newColor}"></i>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view slot="rightContent" style="width: 30rpx;"></view>
|
|
<!-- #endif -->
|
|
</status-nav-slot>
|
|
<view class="posir"
|
|
style="background: url(/static/public/icon-my-logo.png) no-repeat;background-size: 100% auto;"
|
|
:style="{paddingTop: newHeight + 'px'}">
|
|
<!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
|
|
<view class="mar-zy40">
|
|
<view
|
|
style="background: url(../../../static/public/icon-my-head.png) no-repeat;height: 400rpx;background-size: 100% 100%;">
|
|
<view class="disjbac" style="padding: 60rpx 80rpx 60rpx 60rpx;">
|
|
<view class="disac">
|
|
<image class="flexs mar-y10" v-if="!userInfo.avatar"
|
|
src="/static/public/icon-my-headimg.png" mode="aspectFill"
|
|
style="width: 91rpx;height: 91rpx;" lazy-load></image>
|
|
<image class="flexs mar-y10" v-else src="/static/public/icon-my-headimg.png"
|
|
mode="aspectFill" style="width: 91rpx;height: 91rpx;" lazy-load></image>
|
|
|
|
<view class="disjb fc" style="height: 91rpx;">
|
|
<view class="fon34 bold">{{tel(userInfo.username)}}</view>
|
|
<view class="fon22" style="color: #717171;">未实名认证</view>
|
|
</view>
|
|
</view>
|
|
<image src="/static/public/icon-my-level.png" mode="aspectFill"
|
|
style="width: 49rpx;height: 76rpx;" lazy-load></image>
|
|
</view>
|
|
<!-- 信用分、项目数量、未评价 -->
|
|
<view class="disja pad-zy40">
|
|
<view v-for="(item,index) in headList" :key="index" class="disjcac fc">
|
|
<view style="height: 50rpx;" class="disjcac">
|
|
<image :src="item.imgsrc"
|
|
:style="{width: [49,49,46][index] + 'rpx',height: [50,50,42][index] + 'rpx'}"
|
|
mode="widthFix" lazy-load></image>
|
|
</view>
|
|
<view class="fon24 col9 mar-sx10">{{item.title}}</view>
|
|
<view class="fon36 bold">{{item.num}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 预约及时率、上门准时率、项目报修率 -->
|
|
<view class="disja mar-s20">
|
|
<view v-for="(item,index) in percentageList" :key="index" class="disjcac fc col3">
|
|
<!-- <cmd-progress type="circle" :percent="item.num" :width="60" :stroke-color="['#00a2e9','#e87c00','#0b56ec'][index]" :circleStrokeColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]" :strokeShape="'square'"></cmd-progress> -->
|
|
<arprogress :percent="item.num" :inactiveColor="['#c6e6f5','#f4dfc6','#c8d7f5'][index]"
|
|
:activeColor="['#00a2e9','#e87c00','#0b56ec'][index]" :borderWidth="7.8" :width="120"
|
|
:duration="500" bgColor="transparent"><text
|
|
:style="{color: ['#00a2e9','#e87c00','#0b56ec'][index]}">{{item.num}}%</text>
|
|
</arprogress>
|
|
<view class="fon24 mar-s20">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 六宫格 -->
|
|
<view class="disjbac fw bacf" style="margin: 30rpx -20rpx 0rpx -20rpx;">
|
|
<view @tap="chooseGridEv(index)" class="disjcac fc width50 pad-sx40"
|
|
v-for="(item,index) in gridList" :key="index"
|
|
:class="[`${(index%2!=0) ? 'bleft' : ''} ${(index < gridList.length-2) ? 'bbot' : ''}`]"
|
|
style="box-sizing: border-box;">
|
|
<image :src="item.imgsrc" mode="widthFix" lazy-load
|
|
:style="{width: [52,52,46,50,46,52][index] + 'rpx',height: [48,45,52,52,53,52][index] + 'rpx'}">
|
|
</image>
|
|
<view class="fon26 col3 mar-s20">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 退出登录 -->
|
|
<view class="my-exit-btn" @tap="logOutEv">退出登录</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部tab -->
|
|
<foot-tab :current='4'></foot-tab>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
|
|
// 进度条
|
|
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue';
|
|
// 底部组件
|
|
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
|
|
import arprogress from '@/components/ar-circle-progress/index.vue'
|
|
export default {
|
|
components: {
|
|
statusNavSlot,
|
|
cmdProgress,
|
|
'foot-tab': footTabOne,
|
|
arprogress
|
|
},
|
|
data() {
|
|
return {
|
|
newHeight: uni.getSystemInfoSync().statusBarHeight + 50,
|
|
backgroudColor: 'rgba(255,255,255,0)',
|
|
newColor: 'rgba(255,255,255,1)',
|
|
headList: [{
|
|
imgsrc: '/static/public/icon-my-creditScore.png',
|
|
title: '信用分',
|
|
num: 0
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-projectNum.png',
|
|
title: '项目数量',
|
|
num: 0
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-notEvaluated.png',
|
|
title: '未评价',
|
|
num: 0
|
|
},
|
|
],
|
|
percentageList: [{
|
|
title: '预约及时率',
|
|
num: 100
|
|
},
|
|
{
|
|
title: '上门准时率',
|
|
num: 60
|
|
},
|
|
{
|
|
title: '项目报修率',
|
|
num: 40
|
|
},
|
|
],
|
|
gridList: [{
|
|
imgsrc: '/static/public/icon-my-information.png',
|
|
title: '个人信息'
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-certificates.png',
|
|
title: '电子证件'
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-service.png',
|
|
title: '服务范围'
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-evaluate.png',
|
|
title: '我要评价'
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-account.png',
|
|
title: '我的账户'
|
|
},
|
|
{
|
|
imgsrc: '/static/public/icon-my-set.png',
|
|
title: '设置'
|
|
},
|
|
],
|
|
userInfo: {}
|
|
}
|
|
},
|
|
onShow() {
|
|
// 查询用户信息
|
|
this.checkInfo();
|
|
},
|
|
onPageScroll(e) {
|
|
let navHeight = uni.getSystemInfoSync().statusBarHeight + 50;
|
|
this.backgroudColor = `rgba(255,255,255,${e.scrollTop/navHeight})`;
|
|
if (e.scrollTop / navHeight < 0.5) {
|
|
this.newColor = `#FFFFFF`;
|
|
} else {
|
|
this.newColor = `#000000`;
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 禁止分享
|
|
this.$toolAll.tools.disableShareEv();
|
|
},
|
|
methods: {
|
|
// 退出登录
|
|
logOutEv() {
|
|
this.$requst.post('/universal/api.login/signout').then(res => {
|
|
if (res.code == 1) {
|
|
this.$toolAll.tools.showToast('退出成功');
|
|
// 清除所有缓存
|
|
uni.clearStorageSync();
|
|
// 配置全局域名
|
|
// #ifdef APP-PLUS
|
|
uni.setStorageSync('hostapi', 'http://maintain.7and5.cn');
|
|
// #endif
|
|
// #ifdef H5
|
|
uni.setStorageSync('hostapi', '/web');
|
|
// #endif
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
})
|
|
}, 1000)
|
|
}
|
|
})
|
|
},
|
|
// 手机加星号
|
|
tel(tel) {
|
|
const telNum = tel.toString();
|
|
const reg = /^(\d{3})\d{4}(\d{4})$/;
|
|
return telNum.replace(reg, '$1****$2')
|
|
},
|
|
//用户中心信息
|
|
checkInfo() {
|
|
this.$requst.get('/universal/api.user/user_center').then(res => {
|
|
if (res.code == 1 && res.data.length != 1) {
|
|
this.userInfo = res.data;
|
|
this.headList[0].num = this.userInfo.credit
|
|
this.headList[1].num = this.userInfo.project_number
|
|
this.headList[2].num = this.userInfo.evaluate
|
|
this.percentageList[0].num= this.userInfo.reserve_rate-0
|
|
this.percentageList[1].num= this.userInfo.visit_rate-0
|
|
this.percentageList[2].num= this.userInfo.repair_rate-0
|
|
}
|
|
})
|
|
},
|
|
// 六宫格选择事件
|
|
chooseGridEv(index) {
|
|
let urls = [
|
|
'/pagesB/personal-information/personal-information',
|
|
'/pagesB/electronic-certificate/electronic-certificate',
|
|
'/pagesB/service-range/service-range',
|
|
'/pages/workOrder/workOrderLlsit?status=已完成',
|
|
'/pagesB/my-account/my-account?index=0',
|
|
'/pagesB/set-up/set-up',
|
|
];
|
|
uni.navigateTo({
|
|
url: urls[index]
|
|
})
|
|
},
|
|
// 前往设置页面
|
|
goSetUp() {
|
|
uni.navigateTo({
|
|
url: '/pagesB/set-up/set-up'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f7f7f7;
|
|
}
|
|
</style>
|