powerbank/page_user/daili/cjdaili.vue

<template>
	<view class="page">
		<u-navbar title="创建代理" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
        <view class="box">
        	<view class="title">
        		基本信息
        	</view>
			<view class="list">
				<view class="list_val">
					<view class="" style="padding-top:12rpx">代理级别</view> <input type="text" v-model="level" disabled="false" :placeholder="agentLevel + 1 + '级代理'" />
				</view>
				<view class="list_val">
					<view class="" style="padding-top:12rpx">代理名称</view> <input type="text" v-model="name" placeholder="请输入代理名称" />
				</view>
				<view class="list_val">
					<view class="" style="padding-top:12rpx">分成比例</view> <input type="text" v-model="ratio" placeholder="请输入分成比例  %" />
				</view>
				<view class="list_val">
					<view class="" style="padding-top:12rpx">手机号码</view> <input type="text" v-model="tel" placeholder="请输入手机号码" />
				</view>
				<view class="list_val" style="position: relative;">
					<view class="" style="padding-top:12rpx;width: 176rpx;">省市区</view> <input @click="show = true" type="text" disabled="false" v-model="sheng" :placeholder="sheng" /> 
					<u-icon	name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;" color="#808080"></u-icon>
					<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
				</view>
			</view>
			<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",
				},
				level:'',
				name:'',
				ratio:'',
				tel:'',
				sheng:'请选择省市区',
				arr:[],
				arrqx:[],
				agentLevel:''
			}
		},
		onLoad() {
			this.agentLevel = uni.getStorageSync('userdata').agentLevel
		},
		methods: {
            confirm(e){
				this.arr = []
				this.sheng = e.province.label + '/' + e.city.label + "/" + e.area.label
				this.arr.push(e.province.label)
				this.arr.push(e.city.label)
				this.arr.push(e.area.label)
			},
			change(e){
				console.log(this.list)
				
			},
			
			btncj(){
				if(this.name == '' || this.name == '请输入代理名称'){
					uni.showToast({
						title: '请输入代理名称',
						icon: 'none',
						duration: 1000
					})
				}else if(this.ratio == '' || this.ratio == '请输入分成比例  %'){
					uni.showToast({
						title: '请输入分成比例  %',
						icon: 'none',
						duration: 1000
					})
				}else if(this.tel == '' || this.tel == '请输入手机号码'){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 1000
					})
				}else if(this.sheng == '请选择省市区'){
					uni.showToast({
						title: '请选择省市区',
						icon: 'none',
						duration: 1000
					})
				}else{
					this.arrqx = []
					let 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 = {
						name:this.name,
						point:this.ratio,
						mobile:this.tel,
						area:this.arr, 
						permissions:this.arrqx
					}
					this.$u.post('/agent/agent',data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '创建成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}else if(res.msg == '请输入正确的手机号'){
							uni.showToast({
								title: '请输入正确的手机号',
								icon: 'none',
								duration: 1000
							})
						}else if(res.msg == '该手机号所绑定的用户已经是代理商，请勿重复绑定'){
							uni.showToast({
								title: '该手机号所绑定的用户已经是代理商，请勿重复绑定',
								icon: 'none',
								duration: 1000
							})
						}else if(res.msg == '分成比例不允许超过上级代理，最高：90.00'){
							uni.showToast({
								title: '分成比例不允许超过上级代理，最高：90.00',
								icon: 'none',
								duration: 1000
							})
						} else if(res.code == 500){
							uni.showToast({
								title: '分成比例必须为数字',
								icon: 'none',
								duration: 1000
							})
						}
					})
					
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	page {

	}

	.page {
		width: 750rpx;
		.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>