qjd-shell-uniapp/pagesMain/authorizeForm.vue

<template>
	<view class="container">
		<view class="authorize-head">
			<image class="authorize-image" :src="userInfo.merchantImg"></image>
			<view class="authorize-info">
				<view class="authorize-name">{{userInfo.merchantNickname}}</view>
				<view class="authorize-phone">{{userInfo.merchantPhone ? userInfo.merchantPhone : ' '}}</view>
			</view>
		</view>
		<view class="authorize-box">
			<u-checkbox-group wrap>
				<u-checkbox v-model="item.checked" v-for="(item, index) in checkList" :key="index" :name="item.roleId" shape="circle"
				 active-color="#52A63A">{{item.roleName}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="form-handle">
			<view style="margin-bottom: 10px;">
				<u-button type="success" shape="circle" :ripple="true" @click="setAuthorize" class="handle-custom">确认授权</u-button>
			</view>
			<u-button type="error" shape="circle" :ripple="true" @click="modalShow2 = true" class="handle-custom2">删除该授权用户</u-button>
		</view>
		<u-modal v-model="modalShow1" content="是否确认授予该授权用户对应权限" @confirm="setAuthorize" :async-close="true"
		 :show-cancel-button="true"></u-modal>
		<u-modal v-model="modalShow2" content="是否删除该授权用户" @confirm="deleteAuthorize" :async-close="true" :show-cancel-button="true"></u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				modalShow1: false,
				modalShow2: false,
				userInfo: {
					userId: '',
					merchantImg: '',
					merchantNickname: '',
					merchantPhone: '',
				},
				checkList: [],
			}
		},
		onLoad(options) {
			NET.request(API.getAuthorizeDetail + options.id, {}, 'GET').then(res => {
				this.userInfo = {
					userId: res.data.userId,
					merchantImg: res.data.merchantImg,
					merchantNickname: res.data.merchantNickname,
					merchantPhone: res.data.merchantPhone,
				}
				let role = res.data.roleInfos.map(stie => {
					return stie.roleId
				}).join(',')
				this.checkList = res.data.allRoleInfos.map(stie => {
					return {
						roleName: stie.roleName,
						roleId: stie.roleId,
						checked: role.indexOf(stie.roleId) != -1,
						disabled: false
					}
				})
			}).catch(error => {
				console.log(error)
				this.$refs.uTips.show({
					title: error.msg,
					type: 'warning',
				})
			})
		},
		methods: {
			//  设置授权用户权限
			setAuthorize() {
				NET.request(API.setAuthorize + this.userInfo.userId, {
					roleInfos: this.checkList.filter(site => site.checked).map(site => {
						return {
							roleName: site.roleName,
							roleId: site.roleId,
						}
					})
				}, 'POST').then(res => {
					this.modalShow1 = false
					this.$refs.uTips.show({
						title: '授权户成功',
						type: 'success',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(error => {
					this.modalShow1 = false
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  删除授权用户
			deleteAuthorize() {
				NET.request(API.deleteAuthorizeUser + this.userInfo.userId, {}, 'DELETE').then(res => {
					this.modalShow2 = false
					this.$refs.uTips.show({
						title: '删除授权用户成功',
						type: 'success',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(error => {
					this.modalShow2 = false
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		position: absolute;

		.authorize-head {
			width: 100%;
			height: 120px;
			float: left;
			background: #52A63A;
			box-sizing: border-box;
			padding: 15px;

			.authorize-image {
				width: 66px;
				height: 66px;
				float: left;
				border-radius: 50%;
				overflow: hidden;
			}

			.authorize-info {
				width: calc(100% - 82px);
				height: 66px;
				float: left;
				margin-left: 15px;

				.authorize-name {
					width: 100%;
					height: 42px;
					float: left;
					font-size: 18px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 42px;
				}

				.authorize-phone {
					width: 100%;
					height: 24px;
					float: left;
					font-size: 15px;
					font-family: PingFang SC;
					color: #666666;
					line-height: 24px;
				}
			}
		}

		.authorize-box {
			width: 100%;
			height: calc(100% - 220px);
			float: left;
			box-sizing: border-box;
			padding: 15px;
			margin-top: -25px;
			background: #FFFFFF;
			border-radius: 10px 10px 0px 0px;
			overflow-y: auto;

			/deep/.u-checkbox-group {
				float: left;
			}

			/deep/.u-checkbox {
				padding: 8px 0;
			}

			/deep/.u-checkbox__label {
				margin-left: 10px;
			}
		}

		.form-handle {
			width: 100%;
			height: 120px;
			box-sizing: border-box;
			padding: 10px 15px;
			float: left;

			.handle-custom {
				background-color: #51A539;
				margin-bottom: 15px;

				/deep/button {
					background-color: #56a83a;
				}

				/deep/.u-btn--success--disabled {
					background-color: #74bd60 !important;
				}
			}
			.handle-custom2 {
				/deep/button {
					background-color: #fa5151;
				}
			}
		}
	}
</style>