138 lines
5.8 KiB
Vue
138 lines
5.8 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="centerContent"><view :style="{color:newColor}">个人中心</view></view>
|
|
<view slot="rightContent"><i class="icon icon-sandian fon40" :style="{color:newColor}"></i></view>
|
|
</status-nav-slot>
|
|
<view class="posir" style="background: url(/static/public/icon-my-logo.png) no-repeat;background-size: 100% auto;">
|
|
<!-- <image src="/static/public/icon-my-logo.png" class="width100" mode="widthFix" lazy-load></image> -->
|
|
<view class="mar-zy40" style="padding-top: 50px;">
|
|
<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" 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">156****0510</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="['rgba(0, 162, 233, 0.2)','rgba(232, 124, 0, 0.2)','rgba(11, 86, 236, 0.2)'][index]" :strokeShape="'square'"></cmd-progress>
|
|
<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">退出登录</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';
|
|
export default {
|
|
components:{statusNavSlot,cmdProgress,'foot-tab' :footTabOne},
|
|
data() {
|
|
return {
|
|
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:89},
|
|
{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:'设置'},
|
|
]
|
|
}
|
|
},
|
|
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: {
|
|
checkInfo(){
|
|
this.$requst.post('/api/user/info').then(res=>{
|
|
// console.log('用户信息：',res);
|
|
if(res.code==0 && res.data.length!=0) {
|
|
this.userInfo = res.data;
|
|
this.orderStatus[0].num = this.userInfo.order_count.waiting;//待付款
|
|
this.orderStatus[1].num = this.userInfo.order_count.paid;//待发货
|
|
this.orderStatus[2].num = this.userInfo.order_count.shipped;//待收货
|
|
}
|
|
})
|
|
},
|
|
// 六宫格选择事件
|
|
chooseGridEv(index){
|
|
let urls = [
|
|
'/pagesB/personal-information/personal-information',
|
|
'/pagesB/electronic-certificate/electronic-certificate',
|
|
'/pagesB/service-range/service-range',
|
|
'/pagesB/i-want-evaluate/i-want-evaluate',
|
|
'/pagesB/my-account/my-account',
|
|
'/pagesB/set-up/set-up',
|
|
];
|
|
uni.navigateTo({
|
|
url:urls[index]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {background-color: #f7f7f7;}
|
|
</style>
|