hjt_erdao_WeChatApplet/pages/soldier/user/index.vue

<template>
	<view class="content main-bg">
		<view class="header">
			<image class="img" src="/static/ing7.png"></image>
			<view class="right">
				<view class="right-display">
					<view class="right-display-name font-color3 font-thirty-two">{{ form.veteransName }}</view>
					<view class="right-display-status header-long-bg font-color1">{{ change(form.veteransStatus) ? change(form.veteransStatus) : '未认证' }}</view>
				</view>
				<view class="right-name font-color3 font-twenty">{{ handle(userInfo.type) }}</view>
				<view class="right-login font-twenty font-color2" @click="outlogin">退出登录</view>
				<!-- <view class="right-position font-twenty font-color5" @click="see">查看优惠记录</view> -->
			</view>
		</view>
		<view class="sys" @click="goto('/pages/soldier/user/erweima')"><!--/pages/soldier/user/scanning-->
			<view class="icon">
				<image  src="/static/erweima.png"></image>
				<!-- <u-icon name="scan" color="#2E4F1C" size="88"></u-icon> -->
			</view>
			<view class="text font-twenty font-color3">军人唯一识别码</view>
		</view>
		<!-- <view class="relatives" v-if="userInfo.type === '2'">
			<view class="relatives-text">
				<view class="text-me font-color3 font-thirty-two">我的军属</view>
				<view 
					class="text-add header-long-bg font-color1 font-thirty-two"
					@click="goto('/pages/soldier/user/add')"
					>添加军属</view>
			</view>
			<view class="relatives-list" v-if="list.length > 0">
				<view class="list-item" v-for="item in list">
					<view class="item-left font-color3 font-twenty-four">{{ item.relationName }}</view>
					<view class="item-center">
						<view class="item-center-name font-color3 font-twenty-four">姓名: {{ item.userName }}</view>
						<view class="item-center-idCard font-color3 font-twenty-four">身份证号: {{ item.userIdcard }}</view>
					</view>
					<view class="item-right" v-if="userInfo != ''">
						<view class="right-btn1 font-twenty font-color2" @click="handleModify(item)">修改</view>
						<view class="right-btn2 font-twenty font-color5"  @click="handleDel(item.userId)">删除</view>
					</view>
				</view>
			</view>
			<view v-else style="padding-top: 100rpx;">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view> -->
		<u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"
					:border-top="borderTop"></u-tabbar>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import server from "@/api/index";
export default {
	data() {
		return {
			borderTop: false,
			inactiveColor: '#ccc',
			activeColor: '#2E4F1C',
			name: '',
			status: '已认证',
			position: '军人',
			list: [],
			form: {},
			userInfo: {},
		}
	},
	computed: {
		...mapGetters([
			'tabBarList',
			'role'
		])
	},
	onShow(){
		this.userInfo = uni.getStorageSync('userInfo');
		// this.getUserRelationListFn();
		this.getListFn()
	},
	methods:{
		handle(type){
			if(type === '2'){
				return '军人'
			}else if(type === '3'){
				return '军属'
			}
		},
		change(type){
			if(type === '1'){
				return '未认证'
			}else if(type === '2'){
				return '已认证'
			}else if(type === '3'){
				return '未通过'
			}
		},
		handleModify(item){
			uni.navigateTo({
				url: '/pages/soldier/user/add?id='+ item.userId
			})
		},
		see(){
			uni.navigateTo({
				url: '/pages/merchant/home/record'
			})
		},
		outlogin(){
			let _this = this;
			uni.showModal({
			    title: '提示',
			    content: '确定退出登录吗?',
			    success: function (res) {
			        if (res.confirm) {
						uni.removeStorage({
						    key: 'userInfo',
						    success: function (res) {
								uni.removeStorage({
									key: 'role',
								});
								uni.removeStorage({
									key: 'token',
								    success: function (res) {
										uni.reLaunch({
										    url: '/pages/index/index'
										});
								    }
								});
								// uni.reLaunch({
								//     url: '/pages/index/index'
								// });
						    }
						});
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		handleDel(id){
			let _this = this;
			uni.showModal({
			    title: '提示',
			    content: '确定删除这个军属吗?',
			    success: function (res) {
			        if (res.confirm) {
						server.getDel(id).then(res =>{
								_this.$refs.uToast.show({
									title: '删除成功!',
									type: 'default',
								});
								_this.getUserRelationListFn();
						})
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		getUserRelationListFn(){
			server.getUserRelationList({remark: this.userInfo.userId}).then(res =>{
				this.list = [];
				if(res){
					this.list = res
				}
			})
		},
		getListFn(){
			server.getMe(this.userInfo.userId,this.userInfo.type).then(res =>{
				this.form = res
			})
		},
		goto(url){
			uni.navigateTo({
				url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		height: auto;
		padding: 30rpx;
		.header{
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 30rpx;
			display: flex;
			.img{
				width: 140rpx;
				height: 145rpx;
				margin-right: 20rpx;
			}
			.right{
				position: relative;
				width: calc(100% - 140rpx);
				padding-top: 20rpx;
				.right-display{
					display: flex;
					.right-display-name{
						letter-spacing: 3rpx;
						font-weight: 600;
					}
					.right-display-status{
						height: 40rpx;
						margin-left: 20rpx;
						border-radius: 18rpx;
						padding: 0rpx 16rpx;
					}
				}
				.right-name{
					padding-top: 20rpx;
				}
				.right-login{
					position: absolute;
					top: 40rpx;
					right: 0rpx;
					width: 180rpx;
					height: 64rpx;
					border-radius: 32rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 32rpx;
					border: 1rpx solid #2E4F1C;
				}
				.right-position{
					position: absolute;
					top: 78rpx;
					right: 0rpx;
					width: 208rpx;
					height: 64rpx;
					border-radius: 32rpx;
					border: 2px solid #CC1019;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
		.sys{
			width: 100%;
			height: 218rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			.icon{
				height: 88rpx;
				text-align: center;
				image{
					width: 88rpx;
					height: 88rpx;
				}
			}
			.text{
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				letter-spacing: 2rpx;
			}
		}
		.relatives{
			width: 100%;
			height: auto;
			overflow-y: auto;
			.relatives-text{
				width: 100%;
				height: 142rpx;
				line-height: 142rpx;
				display: flex;
				justify-content: space-between;
				.text-me{
					font-weight: 600;
					letter-spacing: 3rpx;
				}
				.text-add{
					margin-top: 35rpx;
					width: 182rpx;
					height: 72rpx;
					line-height: 72rpx;
					border-radius: 36rpx;
					text-align: center;
					letter-spacing: 1rpx;
				}
			}
			.relatives-list{
				width: 100%;
				height: auto;
				overflow-y: auto;
				.list-item{
					width: 100%;
					height: 176rpx;
					border-radius: 6rpx;
					border: 1rpx solid #333333;
					margin-bottom: 30rpx;
					display: flex;
					.item-left{
						width: 93rpx;
						height: 176rpx;
						line-height: 172rpx;
						border-right: 1rpx solid #333333;
						text-align: center;
					}
					.item-center{
						width: calc(100% - 240rpx);
						height: 176rpx;
						border-right: 1rpx solid #333333;
						padding: 41rpx 30rpx;
						.item-center-idCard{
							padding-top: 20rpx;
						}
					}
					.item-right{
						width: 145rpx;
						height: 176rpx;
						margin: 0 auto;
						padding: 30rpx 25rpx;
						.right-btn1{
							width: 96rpx;
							height: 48rpx;
							border-radius: 24rpx;
							border: 1px solid #2E4F1C;
							text-align: center;
						}
						.right-btn2{
							width: 96rpx;
							height: 48rpx;
							border-radius: 24rpx;
							margin-top: 20rpx;
							border: 1px solid #CC1019;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>