front-end/mobile-code/src/admin/member/add.vue

<template>
	<div class="app-content">
		<form @submit="formSubmit">
			<div class="module-com input-line-wrap">
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">手机号</div>
					<input v-model="form.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">确认手机号</div>
					<input v-model="form.confirmMobile" placeholder-class="phcolor" class="tui-input" name="confirmMobile" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">余额</div>
					<input v-model="form.balance" placeholder-class="phcolor" class="tui-input" name="balance" placeholder="请输入" maxlength="50" type="number" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :arrow="true">
					<div class="tui-title required">会员级别</div>
					<picker mode="selector" :value="form.memberLevel" :range="levelData.list" range-key="level" @change="changeLevelFn" class="tui-input">
						<input v-model="form.memberLevel" name="memberLevel" type="text" hidden />
						<div v-if="form.memberLevel">{{ levelSelData.level }}</div>
						<div class="tui-placeholder" v-else>请选择</div>
					</picker>
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title">姓名</div>
					<input v-model="form.realName" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入（选填）" maxlength="50" type="text" />
				</tui-list-cell>
				<tui-list-cell class="line-cell" :hover="false">
					<div class="tui-title required">确认密码</div>
					<input v-model="form.confirmPassword" placeholder-class="phcolor" class="tui-input" name="confirmPassword" placeholder="请输入确认密码" maxlength="50" type="password" />
				</tui-list-cell>
				<div class="prompt-text">添加后，申请会员时自动根据手机号识别客户，成长值、等级和余 额会自动同步。</div>
				<div class="btn-wrap">
					<button class="admin-button-com blue big" formType="submit">确认</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import TuiListCell from '@/components/plugin/list-cell'
const form = require('@/utils/formValidation.js')
// api
import { getLevel } from '@/utils/config'
import { add } from '@/api/member'
export default {
	name: 'member-add',
	components: {
		TuiListCell
	},
	data() {
		return {
			form: {
				mobile: '',
				confirmMobile: '',
				balance: 0,
				memberLevel: '',
				realName: '',
				confirmPassword: ''
			},
			levelSelData: {}
		}
	},
	computed: {
		...mapGetters({ levelData: 'getLevel' })
	},
	onLoad() {
		getLevel()
	},
	methods: {
		confirmFn() {
			add(this.form).then(res => {
				this.$msg('添加成功！')
				setTimeout(() => {
					this.$util.pageTo(1)
				}, 1000)
			})
		},
		changeLevelFn(e) {
			this.levelSelData = this.levelData.list[e.detail.value]
			this.form.memberLevel = this.levelSelData.level
		},
		// 表单验证
		formSubmit(e) {
			// 表单规则
			let rules = [
				{
					name: 'mobile',
					rule: ['required'],
					msg: ['请输入手机号']
				},
				{
					name: 'confirmMobile',
					rule: ['required'],
					msg: ['请输入手机号']
				},
				{
					name: 'balance',
					rule: ['required'],
					msg: ['请输入余额']
				},
				{
					name: 'memberLevel',
					rule: ['required'],
					msg: ['请选择会员级别']
				},
				{
					name: 'confirmPassword',
					rule: ['required'],
					msg: ['请输入密码']
				}
			]
			// 进行表单检查
			let formData = e.detail.value
			let checkRes = form.validation(formData, rules)
			// 验证通过!
			if (!checkRes) {
				this.confirmFn()
			} else {
				this.$msg(checkRes)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
</style>