great_mobileui/center/center.vue

<template>
	<view class="pages">
		<!-- <view class="" :style="{height: navHeight+'px' }"></view> -->
		<!-- <view class="page-bg">
			<img class="img" :src="staticUrl+'/img/center-index-bg.png'" alt="">
		</view> -->
		<view class="box">
			<view class="home_top">
				<view class="base-info block-wrap u-flex u-row-between" @click="$u.route('/center/memberinfo',{type:'redirectTo'})" v-if="vuex_member_info.name">
					<view class="left u-flex">
						<u-avatar :src="avatar||staticUrl+'/img/avatar.png'" size="140rpx"></u-avatar>
						<view class="info">
							<view class="name ellipsis-1">{{vuex_member_info.name||vuex_member_info.nickName}}</view>
							<view class="mobile u-flex">
								<text class="mobile">{{vuex_member_info.mobile|hidePhoneNumber}}</text>
							</view>
						</view>
					</view>
					<!-- <u-icon @click="$u.route('/center/memberinfo',{type:'redirectTo'})" name="setting-fill" color="#333333" size="38rpx"></u-icon> -->
				</view>
				<view class="base-info block-wrap u-flex u-row-between" @click="goLogin" v-else>
					<view class="left u-flex">
						<u-avatar :src="staticUrl+'/img/avatar.png'" size="140rpx"></u-avatar>
						<view class="info">
							<view class="name ellipsis-1">登录/注册</view>
							<text class="mobile">登录查看更多</text>
						</view>
					</view>
					<!-- <u-icon name="setting-fill" color="#333333" size="38rpx"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="tools block-wrap">
			<!-- <view class="title">常用工具</view> -->
			<view class="tools-wrap">
				<view class="" 
					  v-for="(item,index) in tools" 
					  @click="toolsClick(item)"
					  :key="index">
					  <view class="tool-item u-flex u-row-between" v-if="!item.chat">
					  	<view class="left u-flex">
					  		<u-icon :name="item.ico" color="#333333" size="55rpx"></u-icon>
							<text class="name">{{item.name}}</text>
					  	</view>
					  	<u-icon name="arrow-right" color="#ddd" size="40rpx"></u-icon>
					  </view>
					  <view class="tool-item" v-if="item.chat==1">
					  	<button class="button-item u-flex u-row-between" type="default" open-type="contact">
							<view class="left u-flex">
								<u-icon :name="item.ico" color="#333333" size="55rpx"></u-icon>
								<text class="name">{{item.name}}</text>
							</view>
							<u-icon name="arrow-right" color="#ddd" size="40rpx"></u-icon>
						</button>
					  </view>
				</view>
			</view>
		</view>
		<tabbar :tabbarIndexProps="2" />
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				avatar:this.$commonConfig.staticUrl+'/img/avatar.png',
				memberInfo:{},
				tools:[
					{name:'观看记录',url:'/center/viewrecord',ico:this.$commonConfig.staticUrl+'/img/center-record.png',checkauth:true},
					{name:'领券中心',url:'/center/mycoupon',ico:this.$commonConfig.staticUrl+'/img/center-coupon.png',checkauth:true},
					{name:'开具发票',url:'center/invoice',ico:this.$commonConfig.staticUrl+'/img/center-ticket.png',checkauth:true},
					// {name:'客服热线',url:'',ico:this.$commonConfig.staticUrl+'/img/center-call.png',checkauth:true,phone:'13682266542'},
					{name:'在线客服',chat:'1',ico:this.$commonConfig.staticUrl+'/img/center-call.png'},
				]
			}
		},
		onShow() {	
			if(this.vuex_member_info.name){
				this.getMemberInfo();
			}
			
		},
		onLoad() {
			this.getSystemInfo();
		},
		methods: {
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					this.$u.vuex('vuex_member_info', res.data);
					const isExist = this.tools.some(item => item.name === '实名认证');
					if(!res.data.isAuth&&!isExist){
						this.tools.push({name:'实名认证',url:'center/factorauth',ico:this.$commonConfig.staticUrl+'/img/center-ticket.png',checkauth:true})
					}
					// console.log('memberInfo',this.memberInfo);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			},
			toolsClick(item){
				let that = this;
				console.log('item',item);
				
				if(item.name!=='在线客服'){
					uni.showToast({
						title:'开发中',
						icon:"none"
					})
					return
				}
				
				if ('phone' in item) {
					if(!item.phone){
						uni.showToast({
							title:'电话号码为空',
							icon:"none"
						})
						return
					}
				  uni.makePhoneCall({
				  	phoneNumber: item.phone,
					success() {
						console.log('success');
					},
					fail() {
						console.log('fail');
					}
				  });
				  return
				}
				if ('chat' in item) {
					return
				}
				console.log('item.checkauth',item.checkauth);
				if(item.checkauth){
					this.checkauth(item.url)
				}else{
					uni.$u.route(item.url);
				}
				
			},
			goLogin(){
				uni.setStorage({
					key: 'backUrl',
					data:'center/center' ,
					success: function () {
						uni.$u.route('/pages/login/login')
					}
				});
			},
			checkauth(pageUrl){
				if(this.vuex_member_info.name){
					uni.$u.route(pageUrl)
				}else{
					uni.showModal({
					  title: '提示',
					  content: '你需要登录后,才可使用此功能！',
					  success: res => {
					    if (res.confirm) {
							uni.setStorage({
								key: 'backUrl',
								data:pageUrl ,
								success: function () {
									uni.$u.route('/pages/login/login')
								}
							});
					    }
					  }
					})
				}
			}
		}
	}
</script>
<style>
page{
	background-color: #fff;
	padding-top: 0;
}
</style>
<style lang="scss" scoped>
$boxHeight:418rpx;
.box { width: 100%;height:$boxHeight; margin: auto; overflow: hidden; }
.home_top {
	position: relative; 
	width: 100%; 
	height: $boxHeight;
	.base-info{
		position: absolute;
		left: 32rpx;
		right: 32rpx;
		bottom: 90rpx;
		color: #fff;
	}
}
.home_top:after { width: 180%; height: $boxHeight; position: absolute; left: -40%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, #EE0C0C 0%, #F39D9F 100%); }
.block-wrap{
	margin: 24rpx 32rpx;
}
.title{
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	line-height: 45rpx;
	margin-bottom: 30rpx;
}
.base-info{
	margin-bottom: 10rpx;
	.info{
		margin-left: 30rpx;
		.name{
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 54rpx;
			margin-bottom: 10rpx;
		}
		.mobile{
			width: fit-content;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
		}
	}
}



.tools{
	.tools-wrap{
		
	}
	.tool-item{
		padding: 12rpx 18rpx;
		background-color: #FBFBFB;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.name{
			font-size: 32rpx;
			font-weight: 400;
			color: #363636;
			margin-left: 12rpx;
		}
	}
	.button-item{
		background-color: transparent;
		line-height: 1;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		border: 0;
		padding: 0;
		top: -2px;
		&::after{border: initial;}
	}
}
</style>