Customer-Service-Web/pc_chat/src/components/leaveMsg.vue

<template>
	<el-container class="chatBox">
		<el-header height='80px'>
			<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
				<el-col class="tit nopd">
					<span @click="back()" class="back pointer"></span>
					<span>我要留言</span>
				</el-col>
				<el-col>
				</el-col>
			</el-row>
		</el-header>
		<div class="cationer">

			<el-main>
				<form action="">
					<div class="call">
						<label for="">
							<span>您的称呼</span>
							<span class="star"> *</span>
						</label>
						<el-input v-model="call" placeholder="请输入内容" style="paddiing:0 9px;"></el-input>
					</div>
					<div class="phone">
						<label for="">
							<span>您的手机号</span>
							<span class="star"> *</span>
							<span class="tips" v-if="error">(请输入正确的手机号)</span>
						</label>
						<el-input v-model="phone" @blur='sureinfor(1)' placeholder="请输入手机号"
								  style="paddiing:0 9px;"></el-input>
					</div>
					<div class="qq">
						<label for="">
							<span>您的QQ号</span>
						</label>
						<el-input v-model="QQ" type="number" placeholder="请输入QQ号" style="paddiing:0 9px;"></el-input>
					</div>
					<div class="wx">
						<label for="">
							<span>您的微信号</span>
						</label>
						<el-input v-model="WX" placeholder="请输入微信号" style="paddiing:0 9px;"></el-input>
					</div>
					<div class="eMail">
						<label for="">
							<span>您的邮箱地址</span>
							<span class="star"> </span>
							<span class="tips" v-if="emailError">(请输入正确的邮箱地址)</span>
						</label>
						<el-input v-model="eMail" @blur='sureinfor(10)' placeholder="请输入邮箱地址"
								  style="paddiing:0 9px;"></el-input>
					</div>
					<div class="leaveMsg">
						<label for="">
							<span>您的留言信息</span>
							<span class="star"> *</span>
						</label>
						<el-input type="textarea" @blur="widthCheck($event.target, 100)" placeholder="比赛中遇到作弊怎么办？"
								  v-model="leaveInfor"></el-input>
					</div>
					<!-- 上传图片 -->
					<div class="addPhoto">
						<label for="">
							<span>上传图片</span>
						</label>
						<!-- :on-preview="handlePictureCardPreview"  :on-remove="handleRemove" -->
						<el-upload style="margin-top:14px;"
								   action="/api/index/upload/uploadImg"
								   :before-upload="beforeAvatarUpload"
								   :on-progress="onProgress"
								   :on-change='uploadChange'
								   :on-success='uploadSuccess'
								   :on-error="uploadError"
								   :on-remove="handleRemove"
								   :auto-upload="false"
								   list-type="picture-card"
								   ref="upload"
						>
							<!-- :file-list="uploadImg"
		   -->
							<i slot="default" class="el-icon-plus"></i>
						</el-upload>
						<!-- :visible.sync="dialogVisible" -->
						<el-dialog>
							<img width="100%" :src="dialogImageUrl" alt="">
						</el-dialog>
					</div>
					<!-- 按钮 -->
					<div class="btn">
						<el-button type="primary" @click='sub()'>提交留言</el-button>
					</div>
				</form>
			</el-main>
		</div>
	</el-container>
</template>
<script>
	import '../css/index.css'

	export default {
		name: 'leaveMsg',
		data() {
			return {
				call: '', //称呼
				error: false, //手机号错误提示
				leaveInfor: '', // 留言信息
				phone: '', //手机信息
				leaveMsg: '', // 留言信息
				eMail: '',
				dialogImageUrl: '',
				emailError: false,
				QQ: "",
				WX: '',
				uploadImg: [] //上传图片的数据集合
			}
		},
		methods: {
			// 返回传值到父组件
			back() {
				this.$emit('value', 100)
			},
			// 提交
			sub() {
				if (this.call == '') {
					this.$message.error('请填写称呼!');
				} else if (this.phone == '') {
					this.$message.error('请填写手机号!');
				} else if (this.leaveInfor == '') {
					this.$message.error('请填写留言信息!');
				} else {
					// 手动上传
					this.$refs.upload.submit();
					let _this = this;
					setTimeout(function () {
						let params = {
							'name': _this.call,
							'email': _this.eMail,
							'content': _this.leaveInfor,
							'phone': _this.phone,
							'qq': _this.QQ,
							'wechat': _this.WX,
							'file': _this.uploadImg.join(',')
						}
						_this.$axios.post('/api/index/User/LeavingMessage', params).then(res => {
							console.log('res', res)
							if (res.data.code == 1) {
								_this.$message.success('留言成功')
								_this.$emit('value', 10);
							}
						})
					}, 500)
				}
			},
			widthCheck(str, len) {
				var temp = 0
				for (var i = 0; i < str.value.length; i++) {
					if (str.value.length < 4) {
						str.value = ''
					}
				}
			},

			// 失去焦点时验证
			sureinfor(type) {
				if (type == 1) {
					if (!/^1[34578]\d{9}$/.test(this.phone)) {
						this.error = true;
						this.phone = '';
					} else {
						this.error = false;
					}
				}
				else if (type == 10) {
					if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.eMail)) {
						this.emailError = true;
						this.eMail = '';
					} else {
						this.emailError = false;
					}
				}
			},
			// 上传之前
			beforeAvatarUpload(file) {
				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
				}
				return isJPG
			},
			// 上传成功时的回调
			uploadSuccess(res, file) {
				// console.log('res',file)
				this.uploadImg.push(URL.createObjectURL(file.raw))
				// console.log(this.uploadImg)
				return this.uploadImg
			},
			// 发送中
			onProgress() {

			},
			// 上传失败
			uploadError() {
				this.$message.error('上传失败，请重新上传')
			},
			handleRemove(file, fileList) {
				// console.log('123',fileList)
				// 重置为空数组赋值
				// this.uploadImg = []
				// fileList.forEach((res,index) => {
				//   this.uploadImg.push(URL.createObjectURL(res.raw))
				// });
				// console.log(this.uploadImg)
			},
			// 每次改变图片状态返回的回调
			uploadChange(file, fileList) {
				console.log('`112321', fileList)
			},
		}
	}
</script>
<style scoped>
	.chatBox {
		width: 700px;
	}

	.el-header {
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
	}

	.tit {
		height: 100%;
		line-height: 80px;
		text-align: left;
		padding-left: 20px;
	}

	.tit span {
		font-size: 18px;
	}

	.el-col span {
		font-size: 18px;
		color: #FFFFFF;
	}

	.imgBox {
		text-align: right;
	}

	.imgBox img {
		margin-right: 20px;
	}

	.imgBox img:nth-last-child(1) {
		margin-right: 0
	}

	.el-main {
		background: #fff;
		width: 445px;
		padding: 0;
	}

	.el-aside {
		background: #F5F5F5;
		width: 255px;
	}

	.cationer, .artificial {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
	}

	.rt {
		width: 255px;
		box-sizing: inherit;
	}

	.artificial {
		/* width: 150px; */
		/* padding:0 20px; */
		margin-top: 23px;
		margin-bottom: 9px;
		vertical-align: middle;
		/* flex-direction: column;*/

	}

	.infor div {
		margin-bottom: 3px;
	}

	.infor div span, .autograph span {
		color: #999999;
		font-size: 14px;
		font-weight: 400;
	}

	.infor div span:nth-child(2), .autograph span:nth-child(2) {
		color: #666666;
		margin-left: 4px;
	}

	.headPortrait {
		width: 100px;
		height: 100px;
	}

	.autograph {
		margin-bottom: 11px;
	}

	.advent {
		border-top: 1px solid #DDDDDD;
		padding: 20px;
	}

	.advent img {
		width: 215px;
		height: 350px;
	}

	.pd {
		padding: 20px;
	}

	.pd20 {
		padding: 0 20px;
	}

	/* 留言框 */
	.el-main {
		padding: 20px 20px 23px 20px;
		position: relative;
		height: 600px;
		overflow: auto;
	}

	label {
		font-size: 14px;
		color: #666666;

	}

	.el-input {
		margin: 10px 0 20px;
		color: #333333;
	}

	.star {
		color: #F04992;
		vertical-align: middle;

	}

	.tips {
		font-size: 12px;
		color: #F04992;
		margin-left: 20px;
	}

	.addPhoto {
		margin: 20px 0 0;
	}

	.addPhoto label {
		margin-bottom: 14px;
	}

	.el-textarea {
		margin-top: 10px;
	}

	.btn {
		position: absolute;
		/* bottom: 23px; */
		right: 20px;
	}

	.el-button {
		width: 120px;
		height: 48px;
		background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
		box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
	}

	.back {
		display: inline-block;
		width: 25px;
		height: 25px;
		background: url("./../assets/st-img/back.png") no-repeat;
		background-size: 100% 100%;
		vertical-align: middle;
	}

	.nopd {
		padding: 0;
	}

	/* 顶部三个图标 */
	.imgBox i {
		display: inline-block;
		width: 25px;
		height: 25px;
		margin-right: 20px;
		background: url("./../assets/st-img/pj.png") no-repeat;
		background-size: 100% 100%;
		vertical-align: middle;
	}

	i.scActy {
		background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
		width: 33px;
		height: 33px;

		background-position: 5px;
	}

	.imgBox .syActy {
		background: #1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
		width: 33px;
		height: 33px;
		background-position: 5px;
	}

	.imgBox .sqActy {
		background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
		width: 33px;
		height: 33px;
		transform: rotate(180deg);
		background-position: 5px;
	}

	.pointer {
		cursor: pointer;
	}

</style>