spark-sale/pagesEnroll/enrolledForm.vue

<template>
	<view class="content">
		<u-form :model="form" ref="form" label-width="140">
			<!-- <u-form-item label="支付方式" prop="payTypeName" required right-icon="arrow-right" @click.native="payTypeShow = true"> -->
			<u-form-item label="支付方式" prop="payTypeName" required>
<!-- 				<text>{{form.payTypeName}}</text> -->
				<u-checkbox-group>
					<u-checkbox v-model="item.checked" v-for="(item, index) in payTypeList" :key="index" :name="item.name" @change="checkboxChange">
						{{ item.name }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
<!-- 			<u-form-item v-if="payTypeReasonShow" label="备注" prop="payTypeReason" required>
				<u-input v-model="form.payTypeReason" placeholder="请输入支付备注" />
			</u-form-item> -->
			<u-form-item label="订单号" prop="orderNo" required>
				<view style="display: flex;">
					<u-input v-model="form.orderNo" placeholder="请选择订单号" style="flex: 1;" @blur="handleInputBlur"  />
					<u-icon name="scan" size="60" style="margin-left: 5px;" @click="scanQRCode"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="会员卡" prop="cardName" required right-icon="arrow-right" @click.native="selectCard">
				<text>{{form.cardName}}</text>
			</u-form-item>
			<u-form-item label="优惠券" prop="content" required>
				<text>{{form.content}}</text>
			</u-form-item>
		<!-- 	<u-form-item label="有效期" prop="time" required right-icon="arrow-right" @click.native="timeShow = true" v-if="payTypeCode == 1">
				<text>{{form.time}}</text>
			</u-form-item> -->
			<u-form-item label="支付凭证" prop="payFileId" required label-position="top">
				<u-upload :max-count="1" :action="uploadUrl" :header="uploadHeader" @on-success="uploadSuccess" @on-error="uploadError"
				 @on-remove="uploadRemove" :file-list="payFileList" index="2"></u-upload>
			</u-form-item>
			<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" :file-list="fileList" index="1"></u-upload>
			</u-form-item>
<!-- 			<u-form-item label="上传合同" prop="contractFileId" required label-position="top" v-if="payTypeCode == 1">
				<u-upload :max-count="1" :action="uploadUrl" :header="uploadHeader" @on-success="uploadSuccess" @on-error="uploadError"
				 @on-remove="uploadRemove" index="2"></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">
				<u-input v-model="form.parentsName" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="学员姓名" prop="studentName">
				<u-input v-model="form.studentName" placeholder=" " disabled />
			</u-form-item>
			<!-- <u-form-item label="学员性别" prop="sex" right-icon="arrow-right" @click.native="sexShow = true"> -->
			<u-form-item label="学员性别" prop="sex" placeholder=" " disabled>
				<!-- <text>{{form.sex}}</text> -->
				<u-input v-model="form.sex" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="学员年龄" prop="age">
				<u-input v-model="form.age" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="学生生日" prop="birthday" >
				<u-input v-model="form.birthday" placeholder=" " disabled @click="birthdayShow = true"/>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone">
				<u-input v-model="form.phone" placeholder=" " disabled />
			</u-form-item>
			<!--<u-form-item label="报名场馆" prop="venueName" required right-icon="arrow-right" @click.native="venueShow = true">-->
			<u-form-item label="报名场馆" prop="venueName" required right-icon="arrow-right">
				<text>{{form.venueName}}</text>
			</u-form-item>
			<u-form-item label="报名班级" prop="className" required right-icon="arrow-right" @click.native="selectClass">
				<text>{{form.className}}</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="备注" :required="payTypeReasonShow">
				<u-input v-model="form.remark" placeholder="请输入备注" />
			</u-form-item>
		</u-form>
		<!-- 性别 -->
		<u-action-sheet :list="sexList" v-model="sexShow" @click="setSex"></u-action-sheet>
		<!-- 有效期 -- >
		<u-picker v-model="timeShow" mode="time" :params="timeParams" @confirm="setTime"></u-picker>
		<!-- 学生生日 -->
		<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="cardShow" :range="cardList" range-key="cardNameTypeName" @confirm="setCard"></u-picker>
		<!-- 场馆 -->
		<u-picker mode="selector" v-model="venueShow" :range="venueList" range-key="name" @confirm="setVenue"></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')
				},
				// payTypeCode: '',
				// 支付凭证
				payFileList: [],
				// 学生照片
				fileList: [],
				// 多选支付备注显示
				payTypeReasonShow: false,
				form: {
					saleIsMeFlag:true,
					isSignUp:0,
					// 选中的支付方式
					payTypeId: [],
					// 备注
					// payTypeReason: '',
					// 订单
					orderNo: '',
					// 支付凭证
					payFileId: '',
					// 会员卡
					cardId: '',
					cardName: '',
					// 优惠券
					discountCouponId: '',
					content: '',
					// 学生照片
					imageFileId: '',
					// 接收人
					coachName: '',
					// 家长姓名
					parentsName: '',
					// 学生姓名
					studentId: '',
					studentName: '',
					// 学生性别
					sex: '',
					// 学生年龄
					age: '',
					// 学生生日
					birthday: '',
					// 手机号码
					phone: '',
					// 场馆
					venueId: '',
					venueName: '',
					// 班级
					classId: '',
					className: '',
					// 谈单人
					talkerId: '',
					talkerName: '',
					// 备注
					remark: '',
					// contractFileId: '',
					// time: '',
					// courseNumber: '',
					// coursePrice: '',
					// sumPrice: '',
					// orderNo: '',
					// lessonsGiveNumber: '',
					// giftId: [],
					// saleId: '',
					// saleName: '',
				},
				sexShow: false,
				sexList: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				birthdayShow: false,
				birthdayParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				cardShow: false,
				cardList: [],
				classShow: false,
				classList: [],
				giftList: [],
				saleShow: false,
				saleList: [],
				venueShow: false,
				venueList: [],
				talkerShow: false,
				talkerList: [],
				payTypeShow: false,
				// payTypeList: [],
				payTypeList: [
					{
						name: '小程序支付',
						checked: false,
						id: 1
					},
					{
						name: '拉卡拉支付',
						checked: false,
						id: 2
					},
					{
						name: '现金支付',
						checked: false,
						id: 3
					},
					{
						name: '刷卡',
						checked: false,
						id: 4
					}
				]
			}
		},
		onShow() {
			if (uni.getStorageSync("defaultClass")) {
				this.form.classId = uni.getStorageSync("defaultClass").classId
				this.form.className = uni.getStorageSync("defaultClass").className
			}
			this.form.talkerId = uni.getStorageSync('userData').userId
			this.form.talkerName = uni.getStorageSync('userData').nickName
		},
		onReady() {
			this.form.coachName = uni.getStorageSync('userData').nickName
			this.getAllVenueData()
		},
		watch: {
			'form.payTypeId' (newData,oldData) {
				this.payTypeReasonShow = newData.length > 1 ? true : false
			}
		},
		methods: {
			//  多选框选择
			checkboxChange(e) {
				const id = this.payTypeList.find( item => item.name == e.name).id
				if(e.value) {
					this.form.payTypeId.push(id)
				} else {
					const itemIndex = this.form.payTypeId.findIndex( item => item == id )
					this.form.payTypeId.splice(itemIndex, 1)
				}
			},
			handleInputBlur(e) {
				this.getQrCodeData(e)
			},
			//  扫码二维码
			scanQRCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						this.getQrCodeData(res.result)
					}
				});
			},
			//  获取订单信息
			getQrCodeData(orderNo) {
				NET.request(API.getQrCodeInfo, {
					orderNo
				}, 'POST').then(res => {
					if(res.data.payState==1){
						this.$refs.uTips.show({
							title: "订单未完成支付",
							type: 'warning',
						})
						return false
					}
					this.form.parentsName = res.data.parentsName
					this.form.studentId = res.data.studentId
					this.form.studentName = res.data.studentName
					this.form.sex = res.data.sex
					this.form.age = res.data.age
					this.form.birthday = res.data.birthday
					this.form.phone = res.data.phone
					this.cardList = res.data.cards
					this.form.venueId = res.data.venueId
					this.form.venueName = res.data.venueName
					if(this.cardList.length) {
						this.form.cardId = this.cardList[0].id
						this.form.cardName = this.cardList[0].cardNameTypeName
					}
					if (res.data.imageFileId) {
						this.form.imageFileId = res.data.imageFileId
						this.fileList = [{
							url: res.data.imageFileUrl
						}]
					}
					if(res.data.couponList.length) {
						this.form.discountCouponId = res.data.couponList[0].id
						this.form.content = res.data.couponList[0].content
					} else {
							this.form.content = '无可用优惠券'
					}
					this.form.orderNo = res.data.orderNo
				}).catch(error => {
					this.$refs.uTips.show({
						title: "订单无效",
						type: 'warning',
					})
				})
			},
			//  文件上传成功回调
			uploadSuccess(res, index, lists, name) {
				if (name == 1) {
					this.form.imageFileId = res.data.id
				} else if (name == 2) {
					this.form.payFileId = 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) {
				if (name == 1) {
					this.form.imageFileId = ''
				} else if (name == 2) {
					this.form.contractFileId = ''
				}
			},
			// 会员卡
			selectCard() {
				if(!this.form.orderNo) {
					this.$refs.uTips.show({
						title: '请先选择订单',
						type: 'warning',
					})
					return false
				}
				this.cardShow = true
			},
			//  设置性别
			setSex(index) {
				this.form.sex = this.sexList[index].text
			},
			//  设置生日
			setBirthday(object) {
				this.form.birthday = object.year + '-' + object.month + '-' + object.day
			},
			// 获取所有场馆
			getAllVenueData() {
				NET.request(API.getVenueListInfo, {
						...uni.getStorageSync('locationData'),
				}, 'POST').then(res => {
					this.venueList = res.data
				}).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',
					})
				})
			},
			//  设置场馆
			setVenue(object) {
				this.form.classId = ''
				this.form.className = ''
				this.form.venueId = this.venueList[object[0]].id
				this.form.venueName = this.venueList[object[0]].name
			},
			//  设置卡片
			setCard(object) {
				this.form.cardId = this.cardList[object[0]].id
				this.form.cardName = this.cardList[object[0]].cardNameTypeName
			},
			//  跳转班级列表
			selectClass() {
				if(!this.form.venueId) {
					this.$refs.uTips.show({
						title: '请先选择场馆',
						type: 'warning',
					})
					return
				}
				uni.navigateTo({
					url: `/pagesEnroll/classList?venueId=${this.form.venueId}`
				});
			},
			//  设置报名班级
			setClass(object) {
				this.form.classId = this.classList[object[0]].id
				this.form.className = this.classList[object[0]].name
			},
		
			//  设置谈单人
			setTalker(object) {
				this.form.talkerId = this.talkerList[object[0]].id
				this.form.talkerName = this.talkerList[object[0]].name
			},
			//  提交表单
			submitForm() {
				console.log(this.form);
				let message = ''
				if(this.form.payTypeId.length == 0) {
					message = '请选择支付方式'
				} else if (!this.form.orderNo) {
					message = '请选择订单号'
				} else if (!this.form.cardId) {
					message = '请选择会员卡'
				} else if (!this.form.payFileId) {
					message = '请上传支付凭证'
				} else if (!this.form.imageFileId) {
					message = '请上传学生照片'
				} else if (!this.form.phone) {
					message = '请输入手机号'
				} else if (!this.form.className) {
					message = '请输入报名班级'
				} else if (!this.form.talkerName){
					message = '请选择谈单人'
				} else if (this.form.payTypeId.length > 1 && !this.form.remark){
					message = '请输入支付备注'
				} 
				if(message) {
					this.$refs.uTips.show({
						title: message,
						type: 'warning',
					})
					return false
				}
				NET.request(API.joinCLass, {
					...this.form,
				}, 'POST').then(res => {
					console.log(res);
					this.$refs.uTips.show({
						title: '提交成功',
						type: 'success',
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  设置有效期
			setTime(object) {
				this.form.time = object.year + '-' + object.month + '-' + object.day + ' ' + object.hour + ':' + object.minute + ':' + object.second
			},
			//  设置销售员
			setSale(object) {
				this.form.saleId = this.saleList[object[0]].id
				this.form.saleName = this.saleList[object[0]].name
			},
			//  设置支付方式
			setPayType(object) {
				this.form.payTypeId = this.payTypeList[object[0]].id
				this.form.payTypeName = this.payTypeList[object[0]].name
				this.payTypeCode = this.payTypeList[object[0]].other
			},
			//  设置总价
			setCoursePrice() {
				if (this.form.courseNumber && this.form.sumPrice) {
					this.form.coursePrice = (this.form.sumPrice / this.form.courseNumber).toFixed(2)
				}
			},
		},
	}
</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>