spark-sale/pagesEnroll/enrolledForm.vue

<template>
	<view class="content">
		<u-form :model="form" ref="form" label-width="140">
			<u-form-item label="学生照片" prop="imageFileId" required label-position="top">
				<u-upload :max-count="1" :action="uploadUrl" :header="uploadHeader" @on-success="uploadSuccess" @on-error="uploadError"
				 @on-remove="uploadRemove"></u-upload>
			</u-form-item>
			<u-form-item label="接收人" prop="coachName" required>
				<u-input v-model="form.coachName" placeholder="请输入接收人" disabled />
			</u-form-item>
			<u-form-item label="家长姓名" prop="parentsName" required>
				<u-input v-model="form.parentsName" placeholder="请输入家长姓名" />
			</u-form-item>
			<u-form-item label="学员姓名" prop="studentName" required>
				<u-input v-model="form.studentName" placeholder="请输入学员姓名" />
			</u-form-item>
			<u-form-item label="学员性别" prop="sex" required right-icon="arrow-right" @click.native="sexShow = true">
				<text>{{form.sex}}</text>
			</u-form-item>
			<u-form-item label="学员年龄" prop="age" required>
				<u-input v-model="form.age" type="number" placeholder="请输入学员年龄" />
			</u-form-item>
			<u-form-item label="学生生日" prop="birthday" required right-icon="arrow-right" @click.native="birthdayShow = true">
				<text>{{form.birthday}}</text>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone" required>
				<u-input v-model="form.phone" type="number" placeholder="请输入手机号码" />
			</u-form-item>
			<u-form-item label="报名班级" prop="className" required right-icon="arrow-right" @click.native="classShow = true">
				<text>{{form.className}}</text>
			</u-form-item>
			<u-form-item label="课时数" prop="courseNumber" required>
				<u-input v-model="form.courseNumber" type="number" placeholder="请输入课时数" @blur="setSumPrice()" />
			</u-form-item>
			<u-form-item label="课时单价" prop="coursePrice" required>
				<u-input v-model="form.coursePrice" type="number" placeholder="请输入课时单价" @blur="setSumPrice()" />
			</u-form-item>
			<u-form-item label="课时总价" prop="sumPrice" required>
				<u-input v-model="form.sumPrice" type="number" placeholder="请输入课时总价" />
			</u-form-item>
			<u-form-item label="订单号" prop="orderNo" required>
				<u-input v-model="form.orderNo" placeholder="请输入订单号" />
			</u-form-item>
			<u-form-item label="赠课数量">
				<u-input v-model="form.lessonsGiveNumber" type="number" placeholder="请输入赠课数量" />
			</u-form-item>
			<u-form-item label="赠品" label-position="top"></u-form-item>
			<u-form-item :label="item.name" v-for="(item, index1) in giftList" :key="index1">
				<u-radio-group v-model="item.value" v-if="item.type == 1">
					<u-radio v-for="(site, index2) in item.itemList" :key="index2" :name="site.id">
						{{site.name}}
					</u-radio>
				</u-radio-group>
				<u-checkbox-group v-model="item.value" v-else>
					<u-checkbox v-model="site.checked" v-for="(site, index2) in item.itemList" :key="index2" :name="site.id">
						{{site.name}}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
			<u-form-item label="销售员" prop="saleName" required right-icon="arrow-right" @click.native="saleShow = true">
				<text>{{form.saleName}}</text>
			</u-form-item>
			<u-form-item label="谈单人" prop="talkerName" required right-icon="arrow-right" @click.native="talkerShow = true">
				<text>{{form.talkerName}}</text>
			</u-form-item>
			<u-form-item label="支付方式" prop="payTypeName" required right-icon="arrow-right" @click.native="payTypeShow = true">
				<text>{{form.payTypeName}}</text>
			</u-form-item>
			<u-form-item label="备注">
				<u-input v-model="form.remark" type="textarea" placeholder="请输入备注" auto-height :height="100" />
			</u-form-item>
		</u-form>
		<u-action-sheet :list="sexList" v-model="sexShow" @click="setSex"></u-action-sheet>
		<u-picker v-model="birthdayShow" mode="time" :params="birthdayParams" @confirm="setBirthday"></u-picker>
		<u-picker mode="selector" v-model="classShow" :range="classList" range-key="name" @confirm="setClass"></u-picker>
		<u-picker mode="selector" v-model="saleShow" :range="saleList" range-key="name" @confirm="setSale"></u-picker>
		<u-picker mode="selector" v-model="talkerShow" :range="talkerList" range-key="name" @confirm="setTalker"></u-picker>
		<u-picker mode="selector" v-model="payTypeShow" :range="payTypeList" range-key="name" @confirm="setPayType"></u-picker>
		<view class="handle-fix-box">
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitForm()">提交</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'customStyle',
			])
		},
		data() {
			return {
				uploadUrl: API.uploadFile,
				uploadHeader: {
					Authorization: uni.getStorageSync('token')
				},
				form: {
					imageFileId: '',
					coachName: '',
					parentsName: '',
					studentName: '',
					sex: '',
					age: '',
					birthday: '',
					phone: '',
					classId: '',
					className: '',
					courseNumber: '',
					coursePrice: '',
					sumPrice: '',
					orderNo: '',
					lessonsGiveNumber: '',
					giftId: [],
					saleId: '',
					saleName: '',
					talkerId: '',
					talkerName: '',
					payTypeId: '',
					payTypeName: '',
					remark: '',
				},
				rules: {
					coachName: [{
						required: true,
						message: '请输入接收人',
						trigger: 'change'
					}],
					parentsName: [{
						required: true,
						message: '请输入家长姓名',
						trigger: 'change'
					}],
					studentName: [{
						required: true,
						message: '请输入学员姓名',
						trigger: 'change'
					}],
					sex: [{
						required: true,
						message: '请选择学员性别',
						trigger: 'change'
					}],
					age: [{
						required: true,
						message: '请输入学员年龄',
						trigger: 'change'
					}],
					birthday: [{
						required: true,
						message: '请选择学生生日',
						trigger: 'change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'change'
						},
						{
							pattern: /^1[0-9]{10}$/g,
							transform(value) {
								return String(value);
							},
							message: '请输入正确格式的手机号码'
						},
					],
					className: [{
						required: true,
						message: '请选择报名班级',
						trigger: 'change'
					}],
					courseNumber: [{
						required: true,
						message: '请输入课时数',
						trigger: 'change'
					}],
					coursePrice: [{
						required: true,
						message: '请输入课时单价',
						trigger: 'change'
					}],
					sumPrice: [{
						required: true,
						message: '请输入课时总价',
						trigger: 'change'
					}],
					orderNo: [{
						required: true,
						message: '请输入订单号',
						trigger: 'change'
					}],
					saleName: [{
						required: true,
						message: '请选择销售员',
						trigger: 'change'
					}],
					talkerName: [{
						required: true,
						message: '请选择谈单人',
						trigger: 'change'
					}],
					payTypeName: [{
						required: true,
						message: '请选择支付方式',
						trigger: 'change'
					}],
				},
				sexShow: false,
				sexList: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				birthdayShow: false,
				birthdayParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				classShow: false,
				classList: [],
				giftList: [],
				saleShow: false,
				saleList: [],
				talkerShow: false,
				talkerList: [],
				payTypeShow: false,
				payTypeList: [],
			}
		},
		onLoad() {},
		onReady() {
			this.form.coachName = uni.getStorageSync('userData').nickName
			this.$refs.form.setRules(this.rules);
			NET.request(API.getClassList, {
				page: 1,
				size: 1000,
			}, 'POST').then(res => {
				this.classList = res.data.row
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			NET.request(API.getGiftList, {}, 'POST').then(res => {
				res.data.forEach(item => {
					if (item == 1) {
						item.value = ''
					} else {
						item.itemList.forEach(site => {
							site.checked = false
						})
					}
				})
				this.giftList = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			NET.request(API.getSaleList, {
				page: 1,
				size: 1000,
			}, 'POST').then(res => {
				this.saleList = res.data.row
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			NET.request(API.getTalkerList, {
				page: 1,
				size: 1000,
			}, 'POST').then(res => {
				this.talkerList = res.data.row
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			NET.request(API.getPayTypeList, {}, 'POST').then(res => {
				this.payTypeList = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
		},
		methods: {
			//  文件上传成功回调
			uploadSuccess(res, index, lists, name) {
				this.form.imageFileId = res.data.id
				this.$refs.uTips.show({
					title: '文件上传成功',
					type: 'success',
				})
				return true
			},
			//  文件上传失败回调
			uploadError(res, index, lists, name) {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			},
			//  移除文件回调
			uploadRemove(index, lists, name) {
				this.form.imageFileId = ''
			},
			//  设置性别
			setSex(index) {
				this.form.sex = this.sexList[index].text
			},
			//  设置生日
			setBirthday(object) {
				this.form.birthday = object.year + '-' + object.month + '-' + object.day
			},
			//  设置报名班级
			setClass(object) {
				this.form.classId = this.classList[object[0]].id
				this.form.className = this.classList[object[0]].name
			},
			//  设置销售员
			setSale(object) {
				this.form.saleId = this.saleList[object[0]].id
				this.form.saleName = this.saleList[object[0]].name
			},
			//  设置谈单人
			setTalker(object) {
				this.form.talkerId = this.talkerList[object[0]].id
				this.form.talkerName = this.talkerList[object[0]].name
			},
			//  设置支付方式
			setPayType(object) {
				this.form.payTypeId = this.payTypeList[object[0]].id
				this.form.payTypeName = this.payTypeList[object[0]].name
			},
			//  设置总价
			setSumPrice() {
				if (this.form.courseNumber && this.form.coursePrice) {
					this.form.sumPrice = JSON.stringify(this.form.courseNumber * this.form.coursePrice)
				}
			},
			//  提交表单
			submitForm() {
				this.$refs.form.validate(valid => {
					if (valid) {
						let giftId = []
						this.giftList.forEach(item => {
							if (item.type == 1 && item.value) {
								giftId.push(item.value)
							} else if (item.type == 0) {
								giftId = giftId.concat(item.itemList.filter(site => site.checked).map(site => {
									return site.id
								}))
							}
						})
						NET.request(API.submitEnrolledForm, {
							...this.form,
							giftId: giftId
						}, 'POST').then(res => {
							this.$refs.uTips.show({
								title: '提交成功',
								type: 'success',
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}).catch(error => {
							this.$refs.uTips.show({
								title: error.message,
								type: 'warning',
							})
						})
					}
				});
			},
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		padding: 0 15px 60px 15px;
		box-sizing: border-box;
	}
</style>