mteacher/src/views/visitManager/addVisit.vue

<template>
	<div class="addVisit">
		<m-header v-if="statusList.headerStatus" :name="name" />
		<van-cell-group>
			<van-field label="回访老师" v-model="teacherName" readonly input-align="right" placeholder="请选择" />
		</van-cell-group>
		<van-cell-group>
			<van-field label="学员姓名" @click="onCheckStudent" v-model="studentName" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
			<van-field label="回访类型" @click="onChange('type')" v-model="form.type" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
			<van-field label="回访目的" @click="onChange('purpose')" v-model="form.purpose" readonly input-align="right" :is-link="id ? false : true" placeholder="请选择" />
		</van-cell-group>
		<van-cell-group>
			<van-field label="当前学生情况" class="textarea" :readonly="id ? true : false" v-model="form.overview" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言" :show-word-limit="id ? false : true" />
		</van-cell-group>
		<van-cell-group>
			<van-field label="沟通后家长反馈" class="textarea" :readonly="id ? true : false" v-model="form.feedback" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言" :show-word-limit="id ? false : true" />
		</van-cell-group>
		<van-cell-group>
			<van-field label="回访时间" v-model="form.visitTime" readonly @click="onEnListShow" input-align="right" :is-link="id ? false : true" placeholder="请选择" />
		</van-cell-group>

		<div class="button-group" v-if="!id">
			<van-button type="primary" @click="onSubmit" round size="large">确认</van-button>
		</div>

		<van-action-sheet v-model="visit.status" :actions="visit.data" cancel-text="取消" @cancel="visit.status = false" @select="onModeSelect" />

		<van-popup v-model="dataForm.status" position="bottom">
			<van-datetime-picker v-model="dataForm.currentDate" type="date" :min-date="dataForm.minDate" :max-date="dataForm.maxDate" :formatter="formatter" @cancel="dataForm.status = false" @confirm="onCurrentConfirm" />
		</van-popup>

		<!-- 选择上课学生 -->
		<van-popup v-model="statusList.studentStatus" :lock-scroll="true" position="bottom" :style="{ height: '180%' }">
			<van-sticky>
				<van-search show-action shape="round" @search="onSearch" v-model="params.search" placeholder="请输入学生名或手机号">
					<template #action>
						<div @click="onSearch">搜索</div>
					</template>
				</van-search>
			</van-sticky>
			<div class="paddingB80">
				<van-list v-model="loading" class="studentContainer" v-if="dataShow" key="data" :finished="finished" finished-text="" @load="getStudent">
					<van-radio-group v-model="radioSelect">
						<van-cell-group>
							<van-cell v-for="(item, index) in dataList" :key="index" @click="onCheckboxSelect(item)" class="input-cell" :center="true">
								<template slot="icon">
									<img class="logo" v-if="item.avatar" :src="item.avatar" alt="">
									<img class="logo" v-else src="@/assets/images/icon_student.png" alt="">
								</template>
								<template slot="title">
									{{ item.userName }}
								</template>
								<template slot="label">
									<span>{{ desensitPhone(item.phone) }}</span>
								</template>
								<template slot="default">
									<van-radio :name="item.userId"></van-radio>
								</template>
							</van-cell>
						</van-cell-group>
					</van-radio-group>
				</van-list>
				<m-empty class="empty" v-else key="data" />
			</div>
			<div class="button-group-popup">
				<span class="btn" @click="onPopupCancel">取消</span>
				<span class="btn primary" @click="onPopupSubmit">确定</span>
			</div>
		</van-popup>
	</div>
</template>
<script>
import MHeader from '@/components/MHeader'
import { browser } from '@/common/common'
import MEmpty from '@/components/MEmpty'
import dayjs from 'dayjs'
import { queryStudentsWithTeacher, visitAdd, visitGetInfo } from '@/api/teacher'
import { queryUserInfo } from '@/api/app'
import setLoading from '@/utils/loading'
export default {
	name: 'addVisit',
	components: {
		MHeader,
		MEmpty
	},
	data() {
		const query = this.$route.query
		return {
			id: query.id,
			name: query.name,
			dataForm: { // 时间下拉框
				status: false,
				minDate: new Date(2000, 0, 1),
				maxDate: new Date(),
				currentDate: new Date()
			},
			statusList: { // 散状态集合
				headerStatus: true, // 头部是否展示
				studentStatus: false, // 上课学生状态
			},
			typeList: [{name: "课程推荐"}, {name: "常规回访"}, {name: "其它"}],
			visit: {
				status: false,
				type: null,
				data: []
			},
			studentName: null,
			teacherName: null,
			form: {
				teacherId: null,
				studentId: null,
				type: null,
				purpose: null,
				overview: null,
				feedback: null,
				visitTime: null,
				visiterType: 'TEACHER'
			},
			loading: false,
			finished: false,
			params: {
				search: null,
				page: 1,
				rows: 20
			},
			dataShow: true, // 是否有数据
			radioSelect: null,
			radioSelectName: null,
			clickStatus: false,
			dataList: []
		}
	},
	mounted() {
		let params = this.$route.query
		if (params.Authorization) {
			localStorage.setItem('Authorization', decodeURI(params.Authorization))
			localStorage.setItem('userInfo', decodeURI(params.Authorization))
		}
		if (browser().android || browser().iPhone) {
			this.statusList.headerStatus = false
		}
		document.title = this.name
		this.__init()
	},
	methods: {
		async __init() {
			let res = await queryUserInfo()
			let result = res.data
			if(res.status == 200) {
				this.teacherName = result.realName
				this.form.teacherId = result.id
			} else {
				this.$toast(res.msg)
			}

			if(this.id) {
				setLoading(true)
				let queryInfo = await visitGetInfo({ id: this.id })
				const queryResult = queryInfo.data
				let form = this.form
				setLoading(false)
				if(queryResult.code == 200) {
					let tempData = queryResult.data
					this.studentName = tempData.studentName
					form.studentId = tempData.studentId
					form.type = tempData.type
					form.purpose = tempData.purpose
					form.overview = tempData.overview
					form.feedback = tempData.feedback
					form.visitTime = dayjs(tempData.visitTime).format('YYYY-MM-DD')
					form.visiterType = tempData.visiterType
				} else {
					this.$toast(res.msg)
				}
			}
		},
		async onSubmit() {
			const form = this.form
			if(!form.studentId) {
				this.$toast('请选择学员')
				return
			} else if(!form.type) {
				this.$toast('请选择回访类型')
				return
			} else if(!form.purpose) {
				this.$toast('请选择回访目的')
				return
			} else if(!form.overview) {
				this.$toast('请输入当前学生情况')
				return
			} else if(!form.feedback) {
				this.$toast('请输入沟通后家长反馈')
				return
			} else if(!form.visitTime) {
				this.$toast('请选择回访时间')
				return
			}
			this.clickStatus = true
			setLoading(true)
			let res = await visitAdd(form)
			let result = res.data
			setLoading(false)
			if(result.code == 200) {
				this.$toast('添加成功')
				this.$router.push('visitList')
			} else {
				this.$toast(result.msg)
				this.clickStatus = false
				return
			}
		},
		onCheckStudent() {
			if(this.id) {
				return
			}
			this.statusList.studentStatus = true
		},
		onChange(type) {
			if(this.id) {
				return
			}
			let visit = this.visit
			let form = this.form
			if(type == 'type') {
				visit.data = this.typeList
			} else if(type == 'purpose') {
				if(form.type == '其它') {
					visit.data = [{name: '其它'}]
				} else if(form.type == '课程推荐') {
					visit.data = [{name: '新课推荐'}, {name: '续费提醒'}]
				} else if(form.type == '常规回访') {
					visit.data = [{name: '课后及作业回访'}, {name: '练习及乐团表现'}]
				} else {
					this.$toast('请选择回访类型')
					return
				}
			}
			visit.status = true
			visit.type = type
		},
		onSearch() {
			this.params.page = 1
			this.dataList = []
			this.dataShow = true
			this.loading = true
			this.finished = false
			this.getStudent()
		},
		onCheckboxSelect(item) {
			this.radioSelect = item.userId
			this.radioSelectName = item.userName
		},
		onPopupCancel () {
			this.statusList.studentStatus = false
		},
		onPopupSubmit() {
			this.form.studentId = this.radioSelect
			this.studentName = this.radioSelectName
			this.statusList.studentStatus = false
		},
		onCurrentConfirm(value) {
			if(value) {
				this.form.visitTime = dayjs(value).format('YYYY-MM-DD')
			}
			this.dataForm.status = false
		},
		onEnListShow() {
			if(this.id) {
				return
			}
			this.dataForm.status = true
		},
		getStudent() {
			let params = this.params
			queryStudentsWithTeacher(params).then(res => {
				let result = res.data
				this.loading = false
				if (result.code == 200) {
					params.page = result.data.pageNo
					this.dataList = this.dataList.concat(result.data.rows)
					if (params.page >= result.data.totalPage) {
						this.finished = true
					}
					this.params.page++
				} else {
					this.finished = true
				}
				// 判断是否有数据
				if (this.dataList.length <= 0) {
					this.dataShow = false
				}
			})
		},
		onModeSelect(value) {
			let visit = this.visit
			let form = this.form
			if(visit.type == 'type') {
				form.type = value.name
				form.purpose = null
			} else if(visit.type == 'purpose') {
				form.purpose = value.name
			}
			visit.status = false
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			} else if (type === 'month') {
				return `${value}月`
			} else if (type === 'day') {
				return `${value}日`
			}
			return value;
		},
		desensitPhone(phone) { // 手机号脱敏
			let first = phone.substr(0, 3)
			let last  = phone.substr(-4)
			return first + '****' + last
		}
	}
}
</script>
<style lang='less' scoped>
	@import url("../../assets/commonLess/variable.less");
	.addVisit {
		min-height: 100vh;
	}
	.vip-title {
		padding: .06rem 0 .04rem;
		font-size: .12rem;
		color: @mFontColor;
		text-align: center;
	}
	/deep/.van-cell-group {
		margin-bottom: .1rem;
	}
	/deep/.van-cell {
		display: flex;
		align-items: center;
		font-size: .16rem;
		line-height: .26rem;
	}
	/deep/.van-field__label,
	/deep/.van-cell__value {
		flex: 1 auto;
	}
	/deep/.van-field__word-limit {
		margin-top: 0px;
		position: absolute;
		top: -0.2rem;
		right: 5px;
		font-size: .14rem;
	}
	/deep/.van-field__control:disabled {
		color: #6a6969;
	}
	.textarea {
		display: flex;
		flex-direction: column;
		align-items: inherit;
		/deep/.van-field__label {
			width: 100%;
		}
		// /deep/.van-field__value {
		// 	border: 1px solid #ccc;
		// }
	}
	.button-group {
		margin: .3rem .26rem .2rem;

		.van-button--primary {
			background: @mColor;
			font-size: .18rem;
		}
	}

	.studentContainer {
		/deep/.van-cell__title {
			font-size: .14rem;
			color: @mFontColor;
			flex: 1 auto;
		}

		.logo {
			width: .35rem;
			height: .35rem;
			margin-right: .12rem;
			border-radius: 100%;
		}

		.input-cell {
			padding: .12rem .16rem .2rem;

			.van-radio {
				justify-content: flex-end;
			}
		}

		/deep/.van-cell__value {
			height: .2rem;
		}

		/deep/.van-radio__icon .van-icon {
			border-color: @sFontColor;
		}

		/deep/.van-radio__icon--checked {
			.van-icon {
				border-color: @orangeColor;
				background: @orangeColor;
			}
		}

		.van-tag {
			margin-left: .08rem;
		}
	}
	.paddingB80 {
		padding-bottom: .8rem
	}
	.button-group-popup {
		position: fixed;
		bottom: 0;
		padding: 0.2rem 0;
		width: 100%;
		text-align: center;
		background-color: #FFFFFF;
		.btn {
			padding: 0 0.45rem;
			line-height: 0.4rem;
			display: inline-block;
			border: 1px solid @mColor;
			border-radius: 1rem;
			color: @mColor;
			background: #fff;
			font-size: 0.18rem;
			&.primary {
				color: #fff;
				background: @mColor;
			}
		}
		.btn+.btn {
			margin-left: 0.1rem;
		}
	}
	.studentColor {
		color: #14928A;
	}
</style>