flying-monkey/pagesA/workOrder/payReturnVisit.vue

<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="工单回访"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: -25rpx -30rpx 0rpx;">
				<view class="hint">
					客户服务，重在回访仔细倾听，以服务质量求发展
				</view>
				<view class="payReturnVisit-from">
					<view class="payReturnVisit-input">
						<view class="title">
							<text>联</text>
							<text>系</text>
							<text>人</text>
						</view>
						<input class="input" v-model="name" placeholder="请填写联系人称呼" type="text" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							联系电话
						</view>
						<input class="input" maxlength="11" v-model="phone" placeholder="请输入手机号码" type="number" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							<text>微</text>
							<text>信</text>
							<text>号</text>
						</view>
						<input class="input" v-model="wxcode" placeholder="请输入微信号码" type="text" placeholder-class="placeClass" />
					</view>

					<view class="payReturnVisit-textarea">
						<view class="title">
							回访内容
						</view>
						<textarea class="textarea" v-model="content" placeholder="请输入回访内容" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							客服电话
						</view>
						<input class="input" disabled placeholder="400-765-9876" type="text" placeholder-class="placeClass" />
					</view>
					<view class="payReturnVisit-input">
						<view class="title">
							回访时间
						</view>
						<input class="input colc" v-model="custmertime" disabled placeholder="2022/02/13 14:18:00" type="text" placeholder-class="placeClass" />
						<!-- <input class="input" v-model="custmertime" @tap="openDatetimePicker" disabled placeholder="2022/02/13 14:18:00" type="text" placeholder-class="placeClass" />
						<yy-mm-dd-hh-ss ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2122"></yy-mm-dd-hh-ss> -->
					</view>
				</view>
				<button class="submit-button" @tap="setVisit" type="default">确认发送</button>
			</view>
		</container-subgroup-two>

	</view>
</template>

<script>
	import statusNav from '../../components/status-nav.vue';
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import yyMmDdHhSs from '@/components/dates/yy-mm-dd-hh-ss.vue';
	export default {
		components: {
			statusNav,
			containerSubgroupTwo,
			yyMmDdHhSs
		},
		data() {
			return {
				name:'',//联系人
				phone:'',//联系电话
				wxcode:'',//微信号
				content:'',//回访内容
				custmerphone:'400-765-9876',//客服电话
				custmertime:'',//回访时间
				workId:'',//工单id
				flag:true
			}
		},
		onLoad(op) {
			if(op.id) {this.workId = op.id}
			this.custmertime = this.$toolAll.tools.returnCurrentTime('/',1);
		},
		methods: {
			// 工单回访提交事件
			setVisit() {
				if(this.checkEmpty() && this.flag) {
					this.flag = false;
					uni.showLoading({
						title:'正在发送',
						mask:true
					})
					let parmas = {
						id:this.workId,
						a:this.name,
						b:this.phone,
						c:this.wxcode,
						d:this.custmerphone,
						e:this.custmertime,
						f:this.content
					}
					this.$request.post('',parmas).then(res=>{
						if(res.code) {
							// 接口调用成功,自动返回上一级
							this.$toolAll.tools.automaticBack();
						}
						uni.hideLoading();
						this.flag = true;
					})
				}
			},
			// 判空
			checkEmpty() {
				let result = false;
				if(!this.name) {
					this.$toolAll.tools.showToast('请填写联系人称呼');
				} else if(this.$toolAll.tools.isPhone(this.phone)) {
					this.$toolAll.tools.showToast('请正确填写手机号码');
				} else if(!this.content) {
					this.$toolAll.tools.showToast('请输入回访内容');
				} else {
					result = true;
				}
				
				return result;
			},
			// 打开时间选择弹框
			openDatetimePicker() {
			    this.$refs.myPicker.show();
			},
			// 时间弹框确认事件
			handleSubmit(e) {
			    this.custmertime = `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minute}:00`;
			},
		}
	}
</script>

<style>
	.placeClass {
		color: #cccccc;
	}

	.hint {
		color: #358ff0;
		font-size: 24rpx;
		padding: 25rpx 30rpx;
	}

	.submit-button {
		width: 686rpx;
		border-radius: 50rpx;
		height: 90rpx;
		background-color: #02A2ea;
		line-height: 90rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.payReturnVisit-input {
		background-color: #FFFFFF;
		height: 103rpx;
		display: flex;
		align-items: center;
		width: 700rpx;
		border-bottom: 2rpx solid #f4f4f4;
		margin: auto;
	}

	.payReturnVisit-input .title {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: bold;
		width: 120rpx;
		color: #333333;
		margin-right: 40rpx;


	}

	.payReturnVisit-input .input {
		flex: 1;
		font-size: 30rpx;
		margin-top: 2rpx;
	}

	.payReturnVisit-from {
		background-color: #FFFFFF;
	}

	.payReturnVisit-textarea {
		width: 700rpx;
		border-bottom: 2rpx solid #f4f4f4;
		margin: auto;
		padding-bottom: 30rpx;
	}

	.payReturnVisit-textarea .title {
		padding: 30rpx 0rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.payReturnVisit-textarea .textarea {
		width: 100%;
		height: 200rpx;
		background-color: #F5F5F5;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>