caimei-applets-mcare/pages/user/operator/form.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="params.linkName"
						placeholder="请输入运营人员姓名"
						maxlength="6"
					/>
				</view>
				<view class="from-row">
					<input
						class="input"
						type="text"
						v-model="params.mobile"
						placeholder="请输入运营人员手机号"
						maxlength="11"
					/>
				</view>
				<button
					class="add-btn"
					:disabled="disabled"
					:class="[disabled ? 'disabled' : '']"
					@click="hanldConfirm"
				>
					确定
				</button>
			</view>
			<view class="operator-text">
				<view class="text-main">
					<view class="h1">注意事项：</view> <view>1. 添加运营人员后，运营人员会收到一条邀请码短信</view>
					<view>2.运营人员直接使用邀请码进行登录“丽格集采联盟”小程序，同时绑定微信。</view>
					<view>3.绑定后，运营人员可通过微信直接登录“丽格集采联盟”小程序。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'

export default {
	data() {
		return {
			params: {
				mobile: '',
				linkName: '',
				userId: 0,
				clubId: 0,
				configFlag: 2
			}
		}
	},
	onLoad(option) {},
	computed: {
		disabled() {
			return !(this.params.mobile && this.params.linkName)
		}
	},
	methods: {
		//提交
		async hanldConfirm() {
			if (!/(^1[0-9][0-9]{9}$)/.test(this.params.mobile)) {
				this.$util.msg('请输入正确的手机号码')
				return
			}
			const use = await this.$api.getStorage()
			this.params.userId = use.userId
			this.params.clubId = use.clubId
			this.addOperator(this.params)
		},
		async addOperator(params){
			try{
				const res = await this.UserService.PostAddOperator(params)
				this.$util.msg(res.msg, 2000, true, 'success')
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		}
	},
	onShow() {
		
	}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: $bg-color;
	border-top: 1px solid #ebebeb;
}
.operator {
	padding-top: 160rpx;
	.operator-content {
		width: 100%;
		padding: 0 75rpx;
		box-sizing: border-box;
		.operator-from {
			width: 100%;
			height: auto;
			.from-row {
				height: 40rpx;
				padding: 24rpx 0;
				background: #ffffff;
				margin-bottom: 40rpx;
				font-size: $font-size-28;
				color: $text-color;
				border-bottom: 1px solid #e1e1e1;
				.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-24;
					color: #999999;
					text-align: justify;
					margin-bottom: 10rpx;
					&.h1 {
						color: #666666;
					}
				}
			}
		}
	}
	.add-btn {
		width: 600rpx;
		height: 88rpx;
		font-size: $font-size-28;
		line-height: 88rpx;
		color: #ffffff;
		margin: 0 auto;
		text-align: center;
		background: $btn-confirm;
		border-radius: 44rpx;
		margin-top: 80rpx;
		&.disabled {
			background: #e1e1e1;
			border-radius: 44rpx;
		}
	}
	.add-btn.disabled {
		background: #f8f8f8;
		border-radius: 44rpx;
	}
}
</style>