caimei-applets-caimei/pages/user/operator/addoperator.vue

<template>
	<view class="container operator clearfix">
		<view class="operator-content">
			<view class="operator-from">
				<view class="from-row">
					<input class="input" type="text" v-model="linkman" placeholder="请输入运营人员姓名" maxlength="6"/>
				</view>
				<view class="from-row">
					<input class="input" type="text" v-model="clubMobile" placeholder="请输入运营人员手机号" maxlength="11"/>
				</view>
				<button class="add-btn" @click="confirm">{{buttonText}}</button>
			</view>
			<view class="operator-text">
				<view class="title" @click="this.$api.navigateTo('/pages/user/operator/bindstep')">
					<text class="iconfont icon-gantanhao-yuankuang"></text>
					<text class="text-m">运营人员绑定步骤</text>
					<text class="text-s">（点击查看图片引导）</text>
				</view>
				<view class="text-main">
					<view>1. 添加运营人员后，运营人员会收到一条邀请码短信</view>
					<view>2.运营人员在微信搜索“采美采购商城”小程序，在登录页使用邀请码授权绑定微信或关注“采美365网”公众号，在聊天框中输入“绑定运营人员”并发送，点击自动回复的链接，然后输入邀请码绑定微信</view>
					<view>3. 绑定微信后，运营人员可通过微信授权直接登录采美365网</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
	import authorize from '@/common/config/authorize.js'	
	export default {
		data() {
			return {
				buttonText:'确定',
				addType:1,				//记录添加地址的类型
				linkman:'',
				clubMobile:'',
				isConfirm:true,
				isShowInput:false,
				switchDefault:false,
				params:{}				//参数
			}
		},
		onLoad(option){
			// console.log(option.data)
			let title = '添加新地址'
			if(option.type==='edit'){
				title = '编辑收货地址'
				this.isConfirm = false;
				this.addType = 2;				
				this.addressData = JSON.parse(option.data)
				this.addressData.address = `${this.addressData.province}-${this.addressData.city}-${this.addressData.town}`
				this.addressData.userOrganizeID = this.userOrganizeID;
				this.addressData.defaultFlag = this.addressData.defaultFlag;
				if(this.addressData.defaultFlag == 1){
					this.switchDefault = true
				}else{
					this.switchDefault = false
				}
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {			
			//提交
			confirm(){
				let data = this.addressData;
				if(this.linkman== ''){
					this.$util.msg('请输入运营人员姓名');
					return;
				}
				if(this.clubMobile == ''){
					this.$util.msg('请输入运营人员手机号');
					return;
				}
				if(!/(^1[0-9][0-9]{9}$)/.test(this.clubMobile)){
					this.$util.msg('请输入正确的手机号码');
					return;
				}
				if(this.addType ==1){
					this.params ={
							userID:data.userID  ,//用户id ,只在新增收货地址时传
							shouHuoRen:data.shouHuoRen ,//收货人
							townID:data.townID,//区ID
							addressDetail:data.addressDetail,//地址
							mobile:data.mobile,//手机
							userOrganizeID:this.userOrganizeID,//组织ID
							defaultFlag:data.defaultFlag//是否默认收货地址(0 不是默认,1 默认)
						}
					this.postAddressData(this.params)	
				}else{
					this.params =  this.addressData;
					this.postAddressData(this.params)
				}
			},
			postAddressData(res){
				let self = this;
				self.btnText(true)
				authorize.getCode('weixin').then(wechatcode =>{
					self.$api.post('/personal/save?code='+`${wechatcode}`,JSON.stringify(res),
						response => {
							if(response.code==1){
								self.$util.msg(response.msg,3000);
								self.btnText(false)
								uni.navigateBack();
							}else{
								self.$util.msg(response.msg,3000);
								setTimeout(function(){
									uni.switchTab({
										url:'/pages/tabBar/home/home'
									})
								},1000)
							}
						}
					)
				})	
			},
			btnText(flg){
				if(flg){
					this.isConfirm = true;
					this.buttonText = '保存中...'
				}else{
					this.isConfirm = false;
					this.buttonText = '保存'
				}
			},
			onShouHuoRen(e){
			   this.addressData.shouHuoRen = e.detail.value;
			   // console.log(this.addressData.shouHuoRen)
			   this.initInput();
			},
			onMobile(e){
			   this.addressData.mobile = e.detail.value;
			   // console.log(this.addressData.mobile)
			   this.initInput();
			},
			onTextareaInput(e){
			   this.addressData.addressDetail = e.detail.value;
			   // console.log(this.addressData.addressDetail)
			   this.initInput();
			},
			initInput(){
				if(this.addressData.shouHuoRen !== "" && this.addressData.mobile !=="" && this.addressData.addressDetail !==""){
					this.isConfirm =false;
				}else{
					this.isConfirm =true;
				}
			}
		},
		onShow() {
			this.$api.getStorage().then((resolve) =>{
				this.addressData.userID = resolve.userID
			})
		}
	}
</script>

<style lang="scss">
	page{
		height: auto;
		background: $bg-color;
		border-top: 1px solid #EBEBEB;
	}
	.operator{
		padding-top: 160rpx;
		.operator-content{
			width: 702rpx;
			padding:0 24rpx;
			.operator-from{
				width: 100%;
				height: auto;
				.from-row{
					width: 100%;
					height: 40rpx;
					padding: 24rpx;
					background: #F7F7F7;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					font-size: $font-size-28;
					color: $text-color;
					.input{
						width: 100%;
						height: 100%;
						text-align: left;
					}
				}
			}
			.operator-text{
				width: 100%;
				height: auto;
				margin-top: 50rpx;
				line-height: 40rpx;
				.title{
					margin-bottom: 50rpx;
					.icon-gantanhao-yuankuang{
						font-size: $font-size-32;
						color: #166CE1;
						margin-right: 10rpx;
					}
					.text-m{
						font-size: $font-size-30;
						color: #166CE1;
					}
					.text-s{
						font-size: $font-size-24;
						color: #999999;
					}
				}
				.text-main{
					width: 100%;
					height: auto;
					view{
						line-height: 40rpx;
						font-size: $font-size-28;
						color: $text-color;
						text-align: justify;
						margin-bottom: 10rpx;
					}
				}
			}
			
		}
		.add-btn{
			width: 702rpx;
			height: 88rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #FFFFFF;
			margin: 0 auto;
			text-align: center;
			background: $btn-confirm;
			border-radius: 14rpx;
			margin-top: 80rpx;
		}
		.add-btn.disabled{
			background: #F8F8F8;
			border-radius: 14rpx;
		}
	}
</style>