bigDataApp/pages/fourMoodBase/index/useroperation.vue

<template>
	<view class="">
		<view style="position: fixed;z-index: 100;">
			<uni-nav-bar left-icon="back" left-text="返回" @clickLeft="clickLeft" title="用户详情"></uni-nav-bar>
		</view>
		<view class="useroperations">
			<u-form :model="user_meg" ref="uForm" class="uForm">
				<view class="uFormbg">
					<u-form-item label="姓名" left-icon="account" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
					 prop="name">
						<u-input v-model="user_meg.username" :clearable="clearable" input-align="right" disabled />
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="电话" left-icon="phone" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
					 prop="intro">
						<u-input v-model="user_meg.mobile" :clearable="clearable" input-align="right" :disabled="alterTF" :class="{'uuinput':alterTF==false}" 
						@blur="bluechange(user_meg.mobile)"/>
					</u-form-item>
					<p class="tishi" v-if="tishitf">手机格式错误</p>
				</view>
				<view class="uFormbg">
					<u-form-item label="主题" left-icon="calendar" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
					 prop="passwold">
						<u-input v-model="theme_items" :clearable="clearable" input-align="right" :disabled="alterTF"
						 :class="{'uuinput':alterTF==false}" type="selete" @click="theme_show = !alterTF" />
						<u-action-sheet :list="theme" v-model="theme_show" @click="themes" scroll-y="true"></u-action-sheet>
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="用户类型" left-icon="grid" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
						<u-input v-model="users_type[user_meg.user_type-1].text" :clearable="clearable" input-align="right" disabled />
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="用户角色" left-icon="account-fill" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
						<u-input v-model="user_meg.role_name" :clearable="clearable" input-align="right" placeholder="请选择主题" :disabled="alterTF"
						 :class="{'uuinput':alterTF==false}" @click="users_type_show = !alterTF" />
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="是否可用" left-icon="order" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
						<u-input v-model="tf" :clearable="clearable" input-align="right" disabled />
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="创建时间" left-icon="clock" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
						<u-input :clearable="clearable" input-align="right" disabled :value="user_meg.addtime|timeFormat()" />
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="operation_group">
			<view class="group_one" v-if="btnTF">
				<view class="group_one_top">
					<button type="default" @click="recharge">充值</button>
					<button type="default" @click="compile">编辑</button>
					<button type="default" @click="forbidden" v-if="forbiddenTF" style="background-color: red;">禁用</button>
					<button type="default" @click="forbidden" v-else>可用</button>
					<button type="default" @click="changePassword">修改密码</button>
				</view>
				<view class="group_one_bot">
					<button type="default" @click="assignment">分配设备</button>
				</view>
			</view>
			<view class="group_two" v-else>
				<button type="default" @click="modification" :disabled="tijiaotf">确定</button>
			</view>
		</view>
		<u-popup v-model="users_type_show" mode="bottom" length="40%" class="pop-up">
			<scroll-view scroll-y="true" class="sheet">
				<view class="sheet-text" v-for="(item,index) in roles" :key="index">
					<p @click="typesofroles(index)">{{item.text}}</p>
				</view>
			</scroll-view>
			<button @click="users_type_show = false">取消</button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_meg: {},
				lefticonstyle: {
					'color': "#57C878"
				},
				borderbottom: false,
				clearable: false,
				tf: "",
				usersofrole_show: true,
				btnTF: true,
				users_type: [{
					text: '超级管理员'
				}, {
					text: '经销商'
				}, {
					text: '农林政府单位'
				}, {
					text: '普通用户'
				}],
				users_type_show: false,
				forbiddenTF: null,
				alterTF: true,
				theme: [],
				theme_show: false,
				theme_items:'--',
				roles: [],
				roles_id:null,
				tishitf:false,
				tijiaotf:false
			}
		},
		methods: {
			async getForbidden() {//获取用户的使用状态
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.users_statu_updata',
					data: {
						uid: this.user_meg.uid,
						state: this.user_meg.state == '1' ? 4 : 1 //1是正常  4是禁用
					}
				})
				console.log(res)
				if (this.user_meg.state == "1" && res == true) {
					this.user_meg.state = '4'
					console.log(this.user_meg.state)
				} else {
					this.user_meg.state = '1'
					console.log(this.user_meg.state)
				}

				if (this.user_meg.state == '1') {
					this.tf = "正常"
					this.forbiddenTF = true
				} else if (this.user_meg.state == '4') {
					this.tf = "禁止使用"
					this.forbiddenTF = false
				}
			},
			async getGroup() {//获取用户的主题信息
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.warning_record.rolemanage_view'
				})
				for (var i = 0; i < res.data.length; i++) {
					let obj ={}
					obj.text = res.data[i].role_describe
					obj.id=res.data[i].id
					this.theme.push(obj)
					if(this.user_meg.user_group_id==res.data[i].id){//根据主题id更改主题
						this.theme_items=res.data[i].role_describe
					}
				}
			},
			async getThemes() {//获取用户角色
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.perms.role_list'
				})
				for (var i = 0; i < res.length; i++) {
					let obj ={}
					obj.text = res[i].role_name
					obj.id=res[i].role_id
					this.roles.push(obj)
				}
			},
			compile() {//编辑按钮
				this.btnTF = !this.btnTF
				this.alterTF = false
			},
			forbidden() {//禁用按钮
				this.getForbidden()
			},
			themes(index) {//主题下拉框
				this.theme_items = this.theme[index].text;
				this.user_meg.user_group_id_index = this.theme[index].id;
			},
			async getModification() {//修改用户
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.users_info_updata',
					data: {
						uid: this.user_meg.uid,
						mobile: this.user_meg.mobile,
						user_group_id:this.user_meg.user_group_id_index || '',
						user_type: this.user_meg.user_type,
						role_id:this.roles_id || this.user_meg.role_id 
					},
				})
			},
			modification() {//修改用户确认按钮
				this.getModification()
				this.btnTF = true
				this.alterTF = true
			},
			typesofroles(idnex){//主题下拉框选项按钮
				this.user_meg.role_name = this.roles[idnex].text
				this.users_type_show = false
				this.roles_id=this.roles[idnex].id
			},
			bluechange(str){//手机号框失去焦点时检测手机号
				let regexp=/^1[23456789]\d{9}$/
				this.tishitf=!regexp.test(str)
				if(regexp.test(str)){
					this.tijiaotf=!regexp.test(str)
				}else{
					this.tijiaotf=regexp.test(str)
				}
				
			},
			clickLeft(){//返回上一页按钮
				uni.navigateTo({
				    url: './index'
				});
			},
			changePassword(){//修改密码
				uni.navigateTo({
				    url: './changepasswold?item='+JSON.stringify(this.user_meg)
				});
			},
			assignment(){//分配设备
				uni.navigateTo({
				    url: './assignment?item='+JSON.stringify(this.user_meg)
				});
			},
			async getRecharge() {//修改用户
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.user_add_package_time',
					data: {
						uid: this.user_meg.uid,
						user_test:1
					},
				})
			},
			recharge(){//充值按钮
				uni.showModal({
				    title: '提示',
				    content: '是否向该用户充值一年费用?',
				    success: function (res) {
				        if (res.confirm) {
							this.getRecharge()
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		},
		onLoad(option) {
			this.user_meg = JSON.parse(option.item)
			console.log(this.user_meg)
			if (this.user_meg.state == '1') {
				this.tf = "正常"
				this.forbiddenTF = true
			} else if (this.user_meg.state == '4') {
				this.tf = "禁止使用"
				this.forbiddenTF = false
			}
			this.getGroup()
			this.getThemes()
		}
	}
</script>

<style lang="scss">
	.useroperations {
		width: 100%;
		display: flex;
		justify-content: center;

		.uForm {
			margin-top: 88rpx;
			width: 95%;

			.uFormbg {
				width: 100%;
				background-color: #f3f3f3;
				margin-top: 20rpx;
			}
			.tishi{
				text-align: center;
				font-size: 24rpx;
				color: red;
			}
			.u-form-item {
				width: 95%;
				height: 80rpx;
				margin: 0 auto;
				padding: 5rpx 0;
			}

			.uuinput {
				background-color: white;
			}
		}
	}

	.operation_group {
		.group_one {
			.group_one_top {
				width: 90%;
				margin: 20rpx auto;
				display: flex;
				justify-content: space-around;

				button {
					width: 23%;
					height: 60rpx;
					line-height: 60rpx;
					background-color: $uni-color-success;
					color: white;
					font-size: 24rpx;
				}
			}

			.group_one_bot {
				width: 90%;
				margin: 20rpx auto;

				button {
					height: 60rpx;
					line-height: 60rpx;
					background-color: $uni-color-success;
					color: white;
					font-size: 30rpx;
				}
			}
		}

		.group_two {
			width: 90%;
			margin: 20rpx auto;

			button {
				background-color: $uni-color-success;
				color: white;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}

	}
	.pop-up {
		.sheet {
			background-color: white;
			height: 400rpx;
			overflow: hidden;
	
			.sheet-text {
				height: 80rpx;
	
				p {
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					color: black;
					font-size: 16px;
				}
			}
	
		}
	
		button {
			color: black;
			position: absolute;
			bottom: 0;
			width: 100%;
			font-size: 16px;
			height: 80rpx;
		}
	}
</style>