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-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>
						</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"  placeholder="请输入QQ号" @blur="sureinfor" 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 maxlength="120"  show-word-limit type="textarea" @blur="widthCheck($event.target, 100)" placeholder="比赛中遇到作弊怎么办？"
								  v-model.trim="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"
								   ref="upload"
								   :file-list="fileList"
								   :on-change='uploadChange'
								   :before-upload="beforeAvatarUpload"
								   :on-success='uploadSuccess'
								   :on-error="uploadError"
								   :on-remove="handleRemove"
								   :auto-upload="false"
								   list-type="picture-card"
								   :limit="4"
								   :on-exceed="handleExceed"
						>
							<i slot="default" class="el-icon-plus"></i>
						</el-upload>
						<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: [],//上传图片的数据集合
				imgUrl:'',
				fileList: [],
				isUpImg:false,
				isSub:false,
				imgNum:0,
			}
		},
		methods: {
			// 返回传值到父组件
			back() {
				this.$emit('value', 100)
			},
			// 提交
			sub() {
				if(this.isSub) return;
				if (this.call == '') {
					this.$message.error('请填写称呼!');
				} else if (this.leaveInfor == '') {
					this.$message.error('请填写留言信息!');
				} else {
					// 手动上传
					this.isUpImg = true;
					this.isSub = true;
					this.$refs.upload.submit();
					let _this = this;
					this.imgNum = 0;
				

					// setTimeout(function () {
					// 	// console.log(this.imgUrl,"上传的图片")
			
					// }, 1500)
				}
			},

			//留言数据异步提交
			subData(){
				let uid = localStorage.getItem('uid');
				let params = {
					'nick_name': this.call,
					'email': this.eMail,
					'content': this.leaveInfor,
					'phone': this.phone,
					'qq': this.QQ,
					'wechat': this.WX,
					'file': this.imgUrl,
					'account_id': uid,
				}
				this.$axios.post('/api/index/User/LeavingMessage', params).then(res => {
					if (res.data.code == 1) {
						this.$message.success('留言成功')
						this.$emit('value', 10);
						//this.$refs.upload.clearFiles();
						this.fileList =[];
						this.isSub = false;
					}
				})
			},


			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.$message.error('手机格式不正确！')
						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.$message.error('邮箱格式不正确！')
						this.eMail = '';
					} else {
						this.emailError = false;
					}
				} else {
					if (!(/^[0-9]+$/.test(this.QQ))) {
						this.$message.error('只能输入数字！')
						this.QQ = '';
					}
				}
			},
			// 上传之前
			beforeAvatarUpload(file) {
				const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt1M = file.size / 1024 / 1024 < 2;
				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
				}
				if (!isLt1M) {
					this.$message.error('上传文件大小不能超过 2MB!');
				}
				return isJPG && isLt1M
			},
			// 上传成功时的回调
			uploadSuccess(res, file) {
				this.imgNum ++;
				this.imgUrl = this.imgUrl ? this.imgUrl + "," + res.data.src :res.data.src;
				if(this.fileList.length == this.imgNum){
					this.subData()
				}

			},

			// 上传失败
			uploadError() {
				this.$message.error('上传失败，请重新上传')
			},

			handleExceed(files, fileList) {
				this.$message.error(`图片上传数量最多4张`);
			},
			//删除回掉
			handleRemove(file, fileList,) {
				console.log(fileList,'删除回掉');
				this.fileList = fileList;
				// this.uploadImg = fileList
			},
			// 每次改变图片状态返回的回调
			uploadChange(file, fileList) {
				console.log('每次改变图片状态返回的回调', fileList)
				const isJPG = file.raw.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
				const isLt1M = file.size / 1024 / 1024 < 0.5;
				if (!isJPG) {
					this.$message.error('上传只能是图片格式!');
					fileList.pop();
					this.fileList = fileList;
					return false
				}
				if (!isLt1M) {
					this.$message.error('上传图片大小单张不能超过0.5MB!');
					fileList.pop()
					this.fileList = fileList;
					return false
				}
				// this.$refs.upload.clearFiles();
				if(!this.isUpImg){
					this.fileList.push(file)
				}else{
					this.fileList = fileList
				}
			},
		}
	}
</script>
<style scoped>
	.chatBox {
		margin: 0 auto;
		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>