flying-monkey/pages/tabbar/my/my.vue

286 lines
12 KiB
Vue
Raw Normal View History

<template>
2022-03-31 09:58:34 +00:00
<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>
2022-05-13 09:39:50 +00:00
<view class="posir my-content-box"
2022-03-31 09:58:34 +00:00
:style="{paddingTop: newHeight + 'px'}">
<!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
<view class="mar-zy40">
2022-05-13 09:39:50 +00:00
<view class="my-head-box">
2022-03-31 09:58:34 +00:00
<view class="disjbac" style="padding: 60rpx 80rpx 60rpx 60rpx;">
<view class="disac">
2022-04-01 02:57:34 +00:00
<!-- 用户头像 -->
2022-04-13 12:36:32 +00:00
<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>
2022-03-31 09:58:34 +00:00
<view class="disjb fc" style="height: 91rpx;">
2022-04-01 02:57:34 +00:00
<!-- 用户手机号 -->
2022-03-31 09:58:34 +00:00
<view class="fon34 bold">{{tel(userInfo.username)}}</view>
2022-04-01 02:57:34 +00:00
<!-- 是否实名认证 -->
2022-04-13 12:36:32 +00:00
<view class="fon22" style="color: #717171;">{{ifAuthentication ? '已认证' : '未实名认证'}}</view>
2022-03-31 09:58:34 +00:00
</view>
</view>
2022-04-01 02:57:34 +00:00
<!-- 等级图标 -->
2022-04-13 12:36:32 +00:00
<image v-if="ifAuthentication" src="/static/public/icon-my-level.png" mode="aspectFill"
2022-03-31 09:58:34 +00:00
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>
2022-03-31 09:58:34 +00:00
</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;">
2022-05-13 09:39:50 +00:00
<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>
2022-03-31 09:58:34 +00:00
<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>
2022-03-31 09:58:34 +00:00
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'
2022-04-08 10:43:32 +00:00
import { uploadImg } from '@/jsFile/public-api.js';
2022-03-31 09:58:34 +00:00
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
2022-03-31 09:58:34 +00:00
},
{
title: '上门准时率',
num: 0
2022-03-31 09:58:34 +00:00
},
{
title: '项目报修率',
num: 0
2022-03-31 09:58:34 +00:00
},
],
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: '设置'
},
],
2022-04-13 12:36:32 +00:00
userInfo: {},
ifAuthentication:0,//是否认证
2022-05-13 09:39:50 +00:00
userHeadImg:'',//用户头像
2022-03-31 09:58:34 +00:00
}
},
onShow() {
2022-04-13 12:36:32 +00:00
if(this.userHeadImg=='') {
// 查询用户信息
this.checkInfo();
}
2022-03-31 09:58:34 +00:00
},
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: {
2022-04-01 02:57:34 +00:00
// 更换头像
replaceImg(){
uni.chooseImage({
count: 1,
sourceType:['album','camera'],
success: (res) => {
2022-04-13 12:36:32 +00:00
this.userHeadImg = res.tempFilePaths[0];
2022-05-13 09:39:50 +00:00
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);
}
2022-04-01 02:57:34 +00:00
})
},
2022-03-31 09:58:34 +00:00
// 退出登录
logOutEv() {
2022-05-13 09:39:50 +00:00
this.$toolAll.tools.showToast('退出成功');
// 清除所有缓存
uni.clearStorageSync();
setTimeout(() => {
uni.reLaunch({
url: '/pages/login/login'
})
}, 1000)
this.$requst.post('/universal/api.login/signout').then(res => {})
2022-03-31 09:58:34 +00:00
},
// 手机加星号
2022-04-01 06:39:00 +00:00
tel(tel="0000000000") {
const telNum = tel.toString();
2022-03-31 09:58:34 +00:00
const reg = /^(\d{3})\d{4}(\d{4})$/;
2022-04-01 06:39:00 +00:00
return telNum.replace(reg, '$1****$2')
2022-03-31 09:58:34 +00:00
},
//用户中心信息
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已认证
2022-03-31 09:58:34 +00:00
}
})
},
// 六宫格选择事件
chooseGridEv(index) {
let urls = [
'/pagesB/personal-information/personal-information',
'/pagesB/electronic-certificate/electronic-certificate',
'/pagesB/service-range/service-range',
2022-07-25 10:26:45 +00:00
'/pagesA/workOrder/workOrderLlsit?is_evaluate=1',
2022-03-31 09:58:34 +00:00
'/pagesB/my-account/my-account?index=0',
'/pagesB/set-up/set-up',
];
2022-07-25 10:26:45 +00:00
if(index==3){
if(uni.getStorageSync('type_id')==1 || uni.getStorageSync('type_id')==2){
uni.navigateTo({
url: urls[index]
})
} else {
this.$toolAll.tools.showToast('暂无权限');
}
} else {
uni.navigateTo({
url: urls[index]
})
}
2022-03-31 09:58:34 +00:00
},
2022-07-25 10:26:45 +00:00
// 去设置页面事件
goSetUp(){
uni.navigateTo({
url: '/pagesB/set-up/set-up'
})
}
2022-03-31 09:58:34 +00:00
}
}
</script>
<style>
2022-03-31 09:58:34 +00:00
page {
background-color: #f7f7f7;
}
2022-05-13 09:39:50 +00:00
.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>