materialAppletApp/pages/User/user.vue

<template>
	<view class="page-fill">
		<view class="headimg"></view>
		<view class="header">
			<view v-if="weixinUp" class="face3">
				<image :src="avatarUrl" class="face2"></image>
			</view>
			<view v-if="weixinDown">
				<image src="../../static/img/userimg.png" class="face"></image>
			</view>
			<view class="info-wapper">
				<view class="nickname">
					{{name}}
				</view>
			</view>
			<view class="tuichu">
				<button @tap="bindLogout" class="settings">
					<p class="p3">{{$t('user.bindLogout')}}</p>
				</button>
			</view>
		</view>
		<view class="">
			<uni-list>
				<view v-if="level>0">
					<uni-list-item title="修改登录名/密码" @click="updataPassword()" />
				</view>
				<view v-if="level>1">
					<uni-list-item title="添加新编码" @click="addCode()" />
				</view>
				<view v-if="level>2">
					<uni-list-item title="删除编码" @click="delCode()" />
				</view>
				<view v-if="level>2">
					<uni-list-item title="添加用户" @click="addUser()" />
				</view>
				<view v-if="level>2">
					<uni-list-item title="修改用户权限" @click="updateUser()" />
				</view>
				<view v-if="level>2">
					<uni-list-item title="删除用户" @click="deleteUser()" />
				</view>
			</uni-list>
		</view>
		<!-- <view class="xiugai2">
			<button type="primary" @click="trant()" class="xiugai2">
				<p class="xiugai3">解除微信绑定</p>
			</button>
		</view> -->
	</view>

</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			uniList,
			uniListItem,
		},
		data() {
			return {
				name: '',
				level:0,
				ifForeign: false,
				listName: [],
				value: null,
				id: null,
				parm: {
					name: null,
					id: null
				},
				showOrNo: null,
				avatarUrl: null,
				weixinUp: false,
				weixinDown: true
			};
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 800);
		},
		onShow() {
			var token = uni.getStorageSync("token");
			if (token.length>1) {
				var name = uni.getStorageSync("name");
				this.name = name;
				var listName = uni.getStorageSync("listName");
				this.listName = listName;
				var level = uni.getStorageSync("level");
				this.level = level;
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

			if (listName != '' && listName != null) {
				var adminId = listName[0].adminId;
				if (adminId != '1' && adminId != null) {
					this.show = true;
				}
			}
			var newparm = uni.getStorageSync("newparm");
			if (newparm.toString().length > 1) {
				if (newparm.avatarUrl.length > 1) {
					this.avatarUrl = newparm.avatarUrl;
					this.weixinUp = true;
					this.weixinDown = false;
				}
			}

		},
		onLoad() {

		},
		methods: {
			addCode(){
				uni.navigateTo({
					url: 'addCode',
				});
			},
			delCode(){
				uni.navigateTo({
					url: 'delCode',
				});
			},
			deleteUser(){
				uni.setStorageSync("flag","delete");
				uni.navigateTo({
					url: 'userList',
				});
			},
			updateUser(){
				uni.setStorageSync("flag","update");
				uni.navigateTo({
					url: 'userList',
				});
			},
			addUser(){
				uni.setStorageSync("flag","add");
				uni.navigateTo({
					url: 'userInfo',
				});
			},
			updataPassword() {
				uni.navigateTo({
					url: 'updataPassword',
				});
			},
			bindLogout() {
				//清楚缓存
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/Login/Login',
				});
			},
			setStyle() {
				this.showOrNo = "block";
			},
			setStyle2() {
				this.showOrNo = "none";
			},
		}
	}
</script>

<style>
	.page-fill {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		padding-bottom: 100upx;
	}

	.headimg {
		height: 120upx;
		background: #206DC3;
		width: 750upx;
	}

	.header {
		height: 160upx;
		width: 690upx;
		background: #FFFFFF;
		margin: auto;
		padding-top: 50upx;
		box-shadow: 0upx -1upx 20upx #D3D3D3;
		border-radius: 15upx;
		transform: translateY(-90upx);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.face {
		width: 116upx;
		height: 116upx;
		padding-left: 30upx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.face2 {
		width: 120upx;
		height: 120upx;
		padding-right: 0upx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.face3 {
		width: 120upx;
		height: 120upx;
		padding-left: 30upx;
		padding-right: 0upx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.info-wapper {
		width: 50%;
		margin-left: 30upx;
		display: flex;
		flex-direction: column;
	}

	.nickname {
		color: #363D44;
		font-size: 16px;
		font-weight: 600;
		padding: 30upx 0upx 0upx 0upx;
		font-family: "PingFang-SC-Bold";
	}

	.set-wapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 15%;
	}

	.tuichu {
		width: 100upx;
		height: 64upx;
		padding-top: 30upx;
		text-align: center;
		margin: 0 auto;
	}

	.settings {
		width: 100upx;
		height: 64upx;
		border-radius: 10upx;
		background: #D6101F;
		text-align: center;
		margin: 0 auto;
	}

	.p3 {
		/* #ifdef H5 */
		top: -13%;
		/* #endif */
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		width: 100upx;
		height: 64upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.centerY {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.button2 {
		padding-right: 60upx;
		padding-top: 2upx;
	}

	.button {
		width: 80upx;
		height: 60upx;
		border-radius: 10upx;
	}

	.p {
		/* #ifdef H5 */
		top: -13%;
		/* #endif */
		width: 80upx;
		height: 60upx;
		font-size: 30upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */

		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.xiugai2 {
		width: 100%;
		height: 80upx;
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 50upx;
		color: #363D44;
		position: fixed;
		bottom: 0;
	}

	.xiugai3 {
		height: 80upx;
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 40upx;
		color: #363D44;
	}

	.body {
		background-color: #FFFFFF;
		padding: 10upx 10upx 10upx 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
</style>