school-shunt-app/pages/apps/change-major/change-major.vue

<template>
	<view class="page-container">
		<u-nav-bar title="专业分流志愿填报" bg="#007aff" ref="uNavBar" />
		<view class="u-bg" />
		<view class="main-content">
			<u-panel v-if="form.notice">
				<u-des-row label="注意事项" />
				<view class="notice-tip" v-html="form.notice" />
			</u-panel>
			<u-panel title="个人信息">
				<u-des-row label="学号" :value="userInfo.studentNO" border />
				<u-des-row label="姓名" :value="userInfo.studentName" border />
				<u-des-row label="班级" :value="userInfo.gradeName" border />
				<u-des-row label="联系电话" eye>
					<view slot="value" slot-scope="{isOpen}">
						{{isOpen ? userInfo.mobileNo : hideCode(userInfo.mobileNo, 3,4) }}
					</view>
				</u-des-row>
			</u-panel>
			<u-panel title="专业志愿">
				<u-picker v-model="form.majorId1st" label-key="majorName" value-key="majorId" :options="majorOptions"
					@change="e=>pickerMajor(e, 'majorId1st')">
					<u-des-row slot-scope="{data}" label="第一专业志愿" :value="data.majorName || '请选择'"
						:style="{opacity: data.majorName?1:0.5}" border />
				</u-picker>
				<u-picker v-model="form.majorId2nd" label-key="majorName" value-key="majorId" :options="majorOptions"
					@change="e=>pickerMajor(e, 'majorId2nd')">
					<u-des-row slot-scope="{data}" label="第二专业志愿" :value="data.majorName || '请选择'"
						:style="{opacity: data.majorName?1:0.5}" border />
				</u-picker>
				<u-picker v-model="form.majorId3rd" label-key="majorName" value-key="majorId" :options="majorOptions"
					@change="e=>pickerMajor(e, 'majorId3rd')">
					<u-des-row slot-scope="{data}" label="第三专业志愿" :value="data.majorName || '请选择'"
						:style="{opacity: data.majorName?1:0.5}" border />
				</u-picker>
				<u-picker v-model="form.majorId4th" label-key="majorName" value-key="majorId" :options="majorOptions"
					@change="e=>pickerMajor(e, 'majorId4th')">
					<u-des-row slot-scope="{data}" label="第四专业志愿" :value="data.majorName || '请选择'"
						:style="{opacity: data.majorName?1:0.5}" border />
				</u-picker>
				<u-picker v-model="form.majorId5th" label-key="majorName" value-key="majorId" :options="majorOptions"
					@change="e=>pickerMajor(e, 'majorId5th')">
					<u-des-row slot-scope="{data}" label="第五专业志愿" :value="data.majorName || '请选择'"
						:style="{opacity: data.majorName?1:0.5}" />
				</u-picker>
			</u-panel>
			<u-panel>
				<u-des-row label="学生签名" @click="visible=true">
					<image slot="value" style="width: 34rpx;height: 30rpx;" src="/static/sign_icon.png"
						mode="widthFix" />
				</u-des-row>
				<view v-if="form.studentSign" class="u-sign-preview">
					<image :src="form.studentSign" style="width: 100%;height: 100%;" mode="widthFix"></image>
					<view class="icon-clear u-flex-center" @click="form.studentSign=''">
						<uni-icons type="closeempty" size="15" color="white" />
					</view>
				</view>
				<view v-else class="sign-tip">填写完信息请点击签字笔完成签名哦~</view>
			</u-panel>
			<view class="u-flex" style="margin: 96rpx 0 32rpx;">
				<view class="u-button save-button" :class="{'disabled':disabledSave}" @click="!disabledSave && onSumbit(1)">
					暂存
				</view>
				<view style="width:20rpx">
				</view>
				<button class="u-button sumbit-button" :class="{'disabled':disabledSumbit}" @click="!disabledSumbit && onSumbit(2)">
					{{form.applyStatus >= 1 ? '已提交' : '提交'}}
				</button>
			</view>
		</view>
		<u-drawer :visible.sync="visible" title="手写签名" @sumbit="signSumbit" @cancel="visible=false">
			<view class="drawer-tip">
				<text class="empty-2"></text>
				<text>本人已仔细阅读专业分流并理解了有关要求和规定，在此我郑重承诺：“本人自愿按以上顺序选择专业，服从调剂，且专业分流后不再变更。
					对违反以上承诺所造成的后果，本人自愿承担相应责任。”</text>
			</view>
			<u-sign ref="uSign" v-if="visible" />
		</u-drawer>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		hideCode
	} from '@/common'
	import formChecker from '@/common/formChecker.js'
	export default {
		data() {
			return {
				form: {
					notice: '',
					majorId1st: '',
					majorId2nd: '',
					majorId3rd: '',
					majorId4th: '',
					majorId5th: '',

					studentSign: '',
					//
					applyStatus: '',
					majorApplyId: ''
				},
				visible: false, // 签名 抽屉
				majorOptions: []
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
			}),
			disabledSave() {
				return this.form.applyStatus >= 1 // 已提交
			},
			disabledSumbit() {
				return this.form.applyStatus >= 1 || !this.form.majorApplyId // 已提交 或 未缓存
			},
		},
		mounted() {
			this.$ajax.get('/shunt/major-info').then(res => {
				this.majorOptions = res.data.map(item => ({
					majorId: item.majorId,
					majorName: item.majorName,
					disabled: false
				}))
				this.majorOptionsDisabled()
			})
			this.init()
		},
		methods: {
			hideCode,
			async init() {
				// 志愿填报浏览
				this.$ajax.post('/shunt/major-apply-view').then(res => {
					Object.assign(this.form, res.data)
				})
			},
			majorOptionsDisabled() {
				const selectedList = []
				Object.keys(this.form).forEach(key => {
					key.indexOf('majorId') >= 0 && this.form[key] && selectedList.push(this.form[key])
				})
				this.majorOptions.forEach(element => {
					element.disabled = selectedList.indexOf(element.majorId) >= 0
				})
				console.log(1111, selectedList, this.majorOptions)
			},
			pickerMajor(val, prop) {
				console.log(222, val, prop)
				Object.keys(this.form).forEach(key => {
					if (key != prop && key.indexOf('majorId') >= 0 && this.form[key] === val) {
						this.form[key] = ''
					}
				})
				// this.form[majorKey] = this.majorOptions[index].label
				// this[indexKey] = index
				this.majorOptionsDisabled()
			},
			signSumbit() {
				this.$refs.uSign.getBase64(res => {
					this.form.studentSign = res?.tempFilePath || ''
					this.visible = false
				})
			},
			// api 
			onSumbit(type) { // 1:暂存 2:提交
				//定义表单规则
				var rule = [{
					name: "majorId1st",
					checkType: "notnull",
					errorMsg: "请输入第一专业志愿"
				}, {
					name: "majorId2nd",
					checkType: "notnull",
					errorMsg: "请输入第二专业志愿"
				}, {
					name: "majorId3rd",
					checkType: "notnull",
					errorMsg: "请输入第三专业志愿"
				}, {
					name: "majorId4th",
					checkType: "notnull",
					errorMsg: "请输入第四专业志愿"
				}, {
					name: "majorId5th",
					checkType: "notnull",
					errorMsg: "请输入第五专业志愿"
				}, {
					name: "studentSign",
					checkType: "notnull",
					errorMsg: "请填写签名"
				}, ];
				//进行表单检查
				var checkRes = formChecker.check(this.form, rule);
				if (!checkRes) {
					uni.showToast({
						title: formChecker.error,
						icon: "none"
					});
					return
				}
				const that = this

				uni.showLoading()
				this.$ajax.post('/shunt/major-apply', this.form).then(res => {
					if (type === 1) {
						uni.showToast({
							title: '暂存成功',
							icon: "success"
						});
						that.init()
					}
					uni.hideLoading()
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title: '错误',
						content: error.msg || error,
						showCancel: false
					})
				})
				if (type === 2) {
					uni.showLoading()
					this.$ajax.post('/shunt/major-apply-submit').then(res => {
						uni.showToast({
							title: '提交成功',
							icon: "success"
						});
						that.init()
						uni.hideLoading()
					}).catch(error => {
						uni.hideLoading()
						uni.showModal({
							title: '错误',
							content: error.msg || error,
							showCancel: false
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		.u-bg {
			height: 317rpx;
			background: $uni-color-primary;
		}

		.main-content {
			padding: 60rpx 32rpx 32rpx 32rpx;
		}

		.notice-tip {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 1.5;
			padding-bottom: 32rpx;
		}

		.sign-tip {
			height: 144rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #A3ABBF;
		}

		.drawer-tip {
			font-size: 24rpx;
			font-weight: 400;
			line-height: 1.5;
			color: #999999;
			margin-bottom: 36rpx;
		}

		.save-button,
		.sumbit-button {
			flex: 1;
			height: 88rpx;
			background: linear-gradient(90deg, #FFCF18 0%, #FFB300 100%);
			border-radius: 8rpx;

			&.disabled {
				cursor: not-allowed;
				opacity: 0.3;
			}
		}

		.sumbit-button {
			background: linear-gradient(90deg, #36ACFC 0%, #078EF7 100%);
		}

	}
</style>