276 lines
12 KiB
Vue
276 lines
12 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 my-content-box"
|
||
:style="{paddingTop: newHeight + 'px'}">
|
||
<!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
|
||
<view class="mar-zy40">
|
||
<view class="my-head-box">
|
||
<view class="disjbac" style="padding: 60rpx 80rpx 60rpx 60rpx;">
|
||
<view class="disac">
|
||
<!-- 用户头像 -->
|
||
<image class="flexs mar-y10 radius_100" @tap="replaceImg" :src="userHeadImg || '/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;">{{ifAuthentication ? '已认证' : '未实名认证'}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 等级图标 -->
|
||
<image v-if="ifAuthentication" 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;">
|
||
<view class="" style="height: 53rpx;">
|
||
<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>
|
||
<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'
|
||
import { uploadImg } from '@/jsFile/public-api.js';
|
||
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: 0
|
||
},
|
||
{
|
||
title: '上门准时率',
|
||
num: 0
|
||
},
|
||
{
|
||
title: '项目报修率',
|
||
num: 0
|
||
},
|
||
],
|
||
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: {},
|
||
ifAuthentication:0,//是否认证
|
||
userHeadImg:'',//用户头像
|
||
}
|
||
},
|
||
onShow() {
|
||
if(this.userHeadImg=='') {
|
||
// 查询用户信息
|
||
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: {
|
||
// 更换头像
|
||
replaceImg(){
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sourceType:['album','camera'],
|
||
success: (res) => {
|
||
this.userHeadImg = res.tempFilePaths[0];
|
||
uploadImg({path:this.userHeadImg}).then(res=>{
|
||
if(res.code) {
|
||
this.$toolAll.tools.showToast('修改成功');
|
||
// this.temporaryImg[index] = res.data.id;
|
||
this.$requst.post('/universal/api.user/avatar',{avatar:res.data.id}).then(res=>{
|
||
if(res.code) {
|
||
// 查询用户信息
|
||
this.checkInfo();
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},fail:(err)=> {
|
||
this.$toolAll.tools.checkQx(err.code);
|
||
}
|
||
})
|
||
},
|
||
// 退出登录
|
||
logOutEv() {
|
||
this.$toolAll.tools.showToast('退出成功');
|
||
// 清除所有缓存
|
||
uni.clearStorageSync();
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
}, 1000)
|
||
this.$requst.post('/universal/api.login/signout').then(res => {})
|
||
},
|
||
// 手机加星号
|
||
tel(tel="0000000000") {
|
||
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*1//预约及时率
|
||
this.percentageList[1].num= this.userInfo.visit_rate*1//上面准时率
|
||
this.percentageList[2].num= this.userInfo.repair_rate*1//项目报修率
|
||
this.userHeadImg = this.userInfo.avatar;//用户头像
|
||
this.ifAuthentication = this.userInfo.is_check;//是否实名认证0：未认证 1：已认证
|
||
}
|
||
})
|
||
},
|
||
// 六宫格选择事件
|
||
chooseGridEv(index) {
|
||
let urls = [
|
||
'/pagesB/personal-information/personal-information',
|
||
'/pagesB/electronic-certificate/electronic-certificate',
|
||
'/pagesB/service-range/service-range',
|
||
'/pagesA/workOrder/workOrderLlsit?status=已完成&statusId=8',
|
||
'/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;
|
||
}
|
||
.my-content-box{background: url(/static/public/icon-my-logo.png) no-repeat;background-size: 100% auto;}
|
||
.my-head-box{background: url(/static/public/icon-my-head.png) no-repeat;height: 400rpx;background-size: 100% 100%;}
|
||
</style>
|