powerbank/page_user/listshu/quanxian.vue

<template>
	<view class="page">
		<u-navbar title="权限操作" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='58'></u-navbar>
		<view class="box">
			<view class="title">
				权限操作
			</view>
			<!-- 代理权限 -->
			<view class="swlist">
				<view class="swlist_val" v-for="(item,index) in list" :key="index">
					<view class="lt">
						<view class="one">
							{{item.name}}
						</view>
						<view class="two">
							{{item.tit}}
						</view>
					</view>
					<view class="rt">
						<u-switch v-model="item.checked" @change="change" active-color="#19CD82 " size="36"
							inactive-color="#eee"></u-switch>
					</view>
				</view>
			</view>

			<view class="baocun" @click="btncj">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '允许登录',
						tit: '代理登录系统',
						checked: false
					},
					{
						name: '允许提现',
						tit: '代理钱包余额提现',
						checked: false
					},
					{
						name: '展示分成比例',
						tit: '是否展示分成比例',
						checked: false
					},
					{
						name: '代理操作',
						tit: '是否展示操作代理',
						checked: false
					},
					{
						name: '设备显示',
						tit: '是否允许设备显示',
						checked: false
					},
					{
						name: '设备操作',
						tit: '是否展示设备操作',
						checked: false
					},
					{
						name: '店铺操作',
						tit: '是否展示店铺操作',
						checked: false
					},
					{
						name: '订单管理',
						tit: '是否允许查看订单',
						checked: false
					}
				],
				show: false,
				bgc: {
					backgroundColor: " #25CE88",
				},
				listobj: {},
				arrqx:[]
			}
		},
		onLoad(option) {
			this.listobj = JSON.parse(option.obj)
			console.log(this.listobj.permissions);
			this.listobj.permissions.forEach((item) => {
				if (item == 'agent:login') {
					this.list[0].checked = true
				} else if (item == 'agent:withdraw') {
					this.list[1].checked = true
				} else if (item == 'agent:point:show') {
					this.list[2].checked = true
				} else if (item == 'agent:operation') {
					this.list[3].checked = true
				} else if (item == 'agent:device:show') {
					this.list[4].checked = true
				} else if (item == 'agent:device:operation') {
					this.list[5].checked = true
				} else if (item == 'agent:store:operation') {
					this.list[6].checked = true
				} else if (item == 'agent:order:manage') {
					this.list[7].checked = true
				}
			})
		},
		methods: {
			change(e) {
				console.log(e);
			},

			btncj() {
				this.arrqx = []
				const mapping = {
					'允许登录': 'agent:login',
					'允许提现': 'agent:withdraw',
					'展示分成比例': 'agent:point:show',
					'代理操作': 'agent:operation',
					'设备显示': 'agent:device:show',
					'设备操作': 'agent:device:operation',
					'店铺操作': 'agent:store:operation',
					'订单管理': 'agent:order:manage'
				};
				this.list.forEach((item) => {
					if (item.checked && mapping.hasOwnProperty(item.name)) {
						this.arrqx.push(mapping[item.name]);
					}
				})

				let data = {
					agentId:this.listobj.agentId,
					permissions: this.arrqx  
				}
				this.$u.put('/agent/agent', data).then(res => {
                      if(res.code == 200){
						  uni.showToast({
						  	title: '修改成功',
						  	icon: 'none',
						  	duration: 1000
						  })
						  setTimeout(()=>{
							 uni.navigateBack({
								delta: 2
							 }) 
						  },1500)
					  }
				})

			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 40rpx;
	}
	page {
		// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;

		// position: fixed;
		// top: 0;
		// left: 0;
		.box {
			width: 750rpx;
			height: 100%;
			overflow-y: scroll;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 32rpx 36rpx;
			box-sizing: border-box;
			padding-bottom: 100rpx;

			.baocun {
				width: 584rpx;
				height: 90rpx;
				margin: auto;
				background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				margin-top: 62rpx;
				margin-bottom: 78rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 90rpx;
			}

			.swlist {
				margin-top: 34rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.swlist_val {
					display: flex;
					justify-content: space-between;
					width: 324rpx;
					height: 144rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding-top: 28rpx;
					padding-left: 38rpx;
					box-sizing: border-box;
					margin-top: 18rpx;
				}

				.lt {
					.one {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.two {
						font-size: 24rpx;
						color: #808080;
						margin-top: 12rpx;
					}
				}

				.rt {
					margin-top: 24rpx;
					padding-right: 12rpx;
				}
			}

			.title {
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.list {
				width: 680rpx;
				height: 578rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 46rpx 36rpx;
				box-sizing: border-box;
				margin-top: 34rpx;
				margin-bottom: 47rpx;

				.list_val {
					display: flex;
					font-size: 32rpx;
					color: #3D3D3D;
					justify-content: space-between;
					margin-bottom: 32rpx;

					input {
						width: 430rpx;
						height: 70rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						padding-left: 32rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						color: #808080;
					}
				}
			}
		}
	}
</style>