template-project/pages/tabbar/my/my.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" 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="['#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:'设置'},
				]
			}
		},
		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)
					}
				})
			},
			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',
					'/pagesA/picture-cut/picture-cut',
					'/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]
				})
			},
			// 前往设置页面
			goSetUp(){
				uni.navigateTo({
					url:'/pagesB/set-up/set-up'
				})
			}
		}
	}
</script>

<style>
page {background-color: #f7f7f7;}
</style>