market-app-ui/pages/personal/personal.vue

<template>
	<view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<!--头部-->
		<view class="my_top">
			<image src="../../static/images/top-bg.png" class="bg"></image>
		</view>
		<view class="list animated fadeInDown">
			<!--只有外籍商户和收购商才需要手动认证-->
			<view class="message _error" @click="go('/pages/authentication/index')" v-if="user.userType == 5 && user.auth == 0">
				<text class="icon">&#xe64e;</text>
				<text>你还未认证，请先认证</text>
				<text class="icon" style="float: right">&#xe8f2;</text>
			</view>
			<view class="message _error" @click="go('/pages/authentication/purchaser/index')" v-if="user.userType == 3 && user.auth == 0">
				<text class="icon">&#xe64e;</text>
				<text>你还未认证，请先认证</text>
				<text class="icon" style="float: right">&#xe8f2;</text>
			</view>
			<!--用户信息-->
			<view class="user">
				<image src="../../static/icon/user.png" mode="widthFix" class="head"></image>
				<view class="con">
					<view class="nickName omit">{{ user.phone }}</view>
					<view class="tag" v-if="user.userType == 1">普通边民</view>
					<view class="tag" v-if="user.userType == 2">互市组长</view>
					<view class="tag" v-if="user.userType == 3">收购商</view>
					<view class="tag" v-if="user.userType == 4">司机</view>
					<view class="tag" v-if="user.userType == 5">外籍商户</view>
				</view>
				<text class="icon edit" @click="go('/pages/personal/my')">&#xe645;</text>
				<view class="clear"></view>
			</view>
			<!--边民菜单-->
			<view class="menu" v-if="user.userType == 1">
				<view class="msn" @click="go('/pages/market/one/leader/order')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #f0dcfc; color: #b064d8">&#xe628;</view>
							<view class="tit">我的订单</view>
						</view>
					</view>
				</view>
			</view>
			<!--组长菜单-->
			<view class="menu" v-if="user.userType == 2">
				<view class="msn" @click="go('/pages/market/one/leader/cart')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #fff6e0; color: #f1ba41">&#xe604;</view>
							<view class="tit">购物车</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/market/one/leader/order')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #f0dcfc; color: #b064d8">&#xe628;</view>
							<view class="tit">一级订单</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/market/two/leader/order')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #f0dcfc; color: #b064d8">&#xe628;</view>
							<view class="tit">二级订单</view>
						</view>
					</view>
				</view>
			</view>
			<!--收购商-->
			<view class="menu" v-if="user.userType == 3">
				<view class="msn" @click="go('/pages/market/two/purchaser/buy/list')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #e1f6e9; color: #47cf74">&#xe634;</view>
							<view class="tit">采购需求</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/market/two/purchaser/address/list')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #fff6e0; color: #f1ba41">&#xe623;</view>
							<view class="tit">地址管理</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/market/two/purchaser/order/list')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #f0dcfc; color: #b064d8">&#xe628;</view>
							<view class="tit">我的订单</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/authentication/purchaser/info')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #E0FFFF; color: #00BFFF">&#xe660;</view>
							<view class="tit">我的认证</view>
						</view>
					</view>
				</view>
			</view>
			<!--外籍商户-->
			<view class="menu" v-if="user.userType == 5">
				<view class="msn" @click="go('/pages/market/one/merchant/goods/list')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #e1f6e9; color: #47cf74">&#xe634;</view>
							<view class="tit">商品管理</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/market/one/merchant/order/list')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #f0dcfc; color: #b064d8">&#xe628;</view>
							<view class="tit">我的订单</view>
						</view>
					</view>
				</view>
				<view class="msn" @click="go('/pages/authentication/index')">
					<view class="out">
						<view class="int">
							<view class="icon ioc" style="background-color: #E0FFFF; color: #00BFFF">&#xe660;</view>
							<view class="tit">我的认证</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cmd">
				<view class="s_item" @click="show = true">
					<text class="icon ic">&#xe8bb;</text>
					<text class="title">常见问题</text>
					<text class="icon arrow">&#xe8f2;</text>
				</view>
				<view class="s_item" @click="go('/pages/login/userAgreement?id=1')">
					<text class="icon ic">&#xe662;</text>
					<text class="title">用户协议</text>
					<text class="icon arrow">&#xe8f2;</text>
				</view>
				<view class="s_item" @click="go('/pages/login/userAgreement?id=2')">
					<text class="icon ic">&#xe643;</text>
					<text class="title">隐私协议</text>
					<text class="icon arrow">&#xe8f2;</text>
				</view>
				<view class="s_item" @click="go('/pages/personal/setting')">
					<text class="icon ic">&#xe817;</text>
					<text class="title">设置</text>
					<text class="icon arrow">&#xe8f2;</text>
				</view>
			</view>
			<button class="btn exit" @click="exitLogin()">退出登录</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {}
		};
	},
	onShow() {
		this.user = this.getUser();
	},
	methods: {
		order() {
			if (!this.hasAuth()) {
				uni.navigateTo({ url: '/pages/authentication/index' });
				return;
			}
			//组长
			if (this.user.userType == 2) {
				uni.navigateTo({ url: 'user' });
			}
			//外籍商户
			if (this.user.userType == 5) {
				uni.navigateTo({ url: '/pages/market/one/merchant/order/list' });
			}
			//收购商
			if (this.user.userType == 3) {
				uni.navigateTo({ url: '/pages/market/two/purchaser/order/list' });
			}
		},
		go(url) {
			if (!this.hasAuth() && this.user.userType == 5) {
				uni.navigateTo({ url: '/pages/authentication/index' });
				return;
			}
			if(!this.hasAuth() &&  this.user.userType == 3) {
				uni.navigateTo({ url: '/pages/authentication/purchaser/index' });
				return;
			}
			uni.navigateTo({ url: url });
		},
		exitLogin() {
			let param = {
				appUserId: this.getUser().id
			};
			uni.showModal({
				title: '提示',
				content: '确定注销登录?',
				success: res => {
					if (res.confirm) {
						this.http.request({
							url: '/sp-admin/app/AppUser/logout',
							data: param,
							success: res => {
								uni.removeStorageSync('token');
								uni.removeStorageSync('info');
								uni.removeStorageSync('menu');
								uni.redirectTo({ url: '/pages/login/login' });
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.my_top {
	position: relative;
	overflow: hidden;
	image {
		width: 100%;
	}
}
.list {
	position: relative;
	padding: 0px 20px 10px 20px;
	margin-top: -196px;
	.user {
		background-color: white;
		padding: 20px;
		border-radius: 8px;
		color: $font-c;
		.head {
			float: left;
			width: 55px;
			height: 55px;
		}
		.con {
			float: left;
			padding-left: 15px;
			width: 60%;
			.nickName {
				font-size: 17px;
				font-weight: bold;
			}
			.tag {
				background-color: #6799ad;
				color: white;
				float: left;
				font-size: 13px;
				padding: 2px 6px;
				border-radius: 5px;
				margin-top: 6px;
			}
		}
		.edit {
			float: right;
			font-size: 20px;
			margin-top: 17px;
		}
	}
}
.exit {
	margin-top: 20px;
	background-color: white;
	color: #f44336;
}
</style>