mobile_uniapp_mmhy/pageA/complaint/complaint.vue

<template>
	<view class="cooperation">
		<u-toast ref="uToast" />
		<view class="formBgc">
			<view class="form">
				<view class="item message" >
					<view class="label">
						您的称呼:
					</view>
					<input v-model="name" placeholder-style="font-size:24rpx;text-align:right" placeholder="输入您的称呼" type="text"  />
				</view>
				<view class="item message">
					<view class="label">
						联系电话:
					</view>
					<view class="sms">
						<input v-model="phone" maxlength="11" placeholder-style="font-size:24rpx;text-align:right" placeholder="输入您的电话" type="text" />
						<view class="wrap" v-if="configAll.system_sms_open">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" start-text="验证码" @end="end" @start="start" ref="uCode" 
							@change="codeChange"></u-verification-code>
							<view class="tips" @tap="getCode" >{{tips}}</view>
						</view>
					</view>
				</view>
				<view class="item message" v-if="configAll.system_sms_open">
					<view class="label">
						验证码:
					</view>
					<input v-model="sms_code" max placeholder-style="font-size:24rpx;text-align:right" maxlength="4" placeholder="输入验证码" type="text"  />
				</view>
				<view class="item message" >
					<view class="label">
						标题:
					</view>
					<input v-model="title" maxlength="10" placeholder-style="font-size:24rpx;text-align:right" placeholder="输入标题（10字内）" type="text"  />
				</view>
				<view class="item textarea">
					<view class="inputTextarea">
						<u-input v-model="content" type="textarea" height="230" placeholder-style="font-size:24rpx;color:#CBCBCB;" :clearable="false" placeholder="请输入购买手机号遇到的问题（120字内）我们将在24小时内给您回复"/>
					</view>
					<view class="label">
						付款截图：（最多3张，大小1M内）
					</view>
					<!-- width="600rpx" height="300rpx" -->
					<u-upload ref="uUpload1" max-count="3"  @on-change="progress1" :action="action" ></u-upload>
				</view>
				<view class="btn">
					<u-button @click="business_form()">提交</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name:'',
			phone:'',//手机号
			sms_code:'',//短信
			title: '',
			content: '',
			// refCode: null,
			seconds: 60,
			tips: '获取验证码',
			// 上传地址
			action: '',
		};
	},
	onLoad() {
		this.action=this.$httpUrl+'/api/common/upload'
	},
	methods: {
		progress1(res, index, lists, name){
			// console.log(JSON.parse(res.data))
			if(JSON.parse(res.data).code==0){
				this.$refs.uToast.show({
					title: JSON.parse(res.data).msg,
					type: 'error ',
				})
				this.$refs.uUpload1.clear()
			}
		},


		codeChange(text) {
				this.tips = text;
			},
			//商务合作
			business_form(){
				if(this.name==''){
					this.$refs.uToast.show({
						title: '请输入姓名',
						type: 'error ',
					})
					return;
				}
				if(!this.$check.checkName(this.name)){
					this.$refs.uToast.show({
						title: '请输入正确的格式',
						type: 'error ',
					})
					return;
				}
				if(this.phone==''){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error ',
					})
					return;
				}
				if(!this.$check.checkMobile(this.phone)){
					this.$refs.uToast.show({
						title: '请输入正确手机号的格式',
						type: 'error ',
					})
					return;
				}
				if(this.phone==''){
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error ',
					})
					return;
				}
				if(this.title==''){
					this.$refs.uToast.show({
						title: '请输入标题',
						type: 'error ',
					})
					return;
				}
				let files1 = [];
				files1 = this.$refs.uUpload1.lists.filter(val => {
					return val.progress == 100;
				})
				let imgs=[]
				if(files1.length>0){
					files1.forEach(item=>{
						imgs.push(item.response.data.url)
					})
				}else{
					this.$refs.uToast.show({
						title: '请上传截图',
						type: 'error ',
					})
					return;
				}
				console.log(imgs)
				let obj={
					name:this.name,
					phone:this.phone,
					sms_code:this.sms_code,
					title:this.title,
					content:this.content,
					images:imgs,
				}
				this.$http.feedback(obj).then(res=>{
					console.log(res)
					if(res.data.code==1){
						uni.reLaunch({
						  url: '/pages/index/index',
						})
					}else{
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error ',
						})
					}
				})
			},
			// 获取短信
			getCode() {
				
				console.log('发送验证码')
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					console.log(this.phone)
					if(this.phone==''){
						this.$refs.uToast.show({
							title: '请输入手机号',
							type: 'error ',
						})
						return;
					}
					if (!this.$check.checkMobile.test(this.phone)) {
						this.$refs.uToast.show({
							title: '请输入正确的手机号格式',
							type: 'warning ',
						})
						return;
					}
					this.$http.send({mobile:this.phone,event:'complaint'})
					.then(res=>{
						console.log(res)
						if(res.data.code==1){
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
							
						}else{
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
						}
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
	}
};
</script>

<style lang="scss">
	.cooperation{
		width: 100%;
		.formBgc{
			// border-top: 1rpx solid #fff;	
			width: 100%;
			height: 725rpx;
			background: linear-gradient(rgb(213, 46, 76), #fff);
				padding-top: 30rpx;
			.form{
				background-color: #fff;
				margin: 0rpx 20rpx 0;
				box-sizing: border-box;
				padding: 25rpx;
				border-radius: 10rpx;
				/deep/ .u-radio__label{
					font-size: 25rpx
				}
				/deep/ .u-radio-group{
					margin-left: 28rpx;
					margin-bottom:4rpx;
				}
				/deep/ input::-webkit-input-placeholder {
					/* placeholder颜色 */
					color: #aab2bd;
					/* placeholder字体大小 */
					font-size: 24rpx;
				}
				.item{
					padding:33rpx 0;
					border-bottom: 1rpx solid #F2F2F7;
					display: flex;
					flex-wrap: wrap;
					justify-content: left;
					.label{
						position: relative;
						font-size: 24rpx;
						color: #333;
						padding-left: 20rpx;
					}
					.label::after{
						position: absolute;
						content:'*';
						color: $uni-color-BGC;
						top: 50%;
						transform: translateY(-50%);
						left: 0;
					}
				}
				.textarea{
					display:block;
					.inputTextarea{
						border: 1px solid #e2e2e2;
						border-radius: 10rpx;
						padding: 10rpx;
					}
					/deep/ .u-input{
						width: 100%;
						padding: 10rpx 0;
					}
					/depp/ .u-add-wrap{
						display: none;
					}
					.label{
						margin: 20rpx 0;
					}
				}
				.type{
					position: relative;
					box-sizing: border-box;
					padding-left: 90rpx;
					border-bottom: 1rpx solid #F2F2F7;
					.label{
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
						font-size: 25rpx;
					}
					.inputBox{
						display: flex;
						flex-wrap: wrap;
						// justify-content: space-between;
					}
					.inputBoxTop{
						margin-top: 16rpx;
					}
					
					/deep/ input{
						width:230rpx;
						height: 42rpx;
						line-height: 42rpx;
						background: #FFFFFF;
						min-height: 42rpx;
						max-height: 42rpx;
						border-radius: 8rpx;
						font-size: 20rpx;
						color: #BABABA;
						border: 1rpx solid rgba(86, 86, 86, 0.2);
						padding: 0 16rpx;
					}
				}
				
				.message{
					position: relative;
					justify-content: space-between;
					.tips{
						width: 168rpx;
						height: 49rpx;
						text-align: center;
						line-height: 49rpx;
						// border: 1rpx solid #D52E4C;
						border-radius: 20rpx;
						font-size: 24rpx;
						color: #fff;
						background-color: $uni-color-BGC;
					}
					.sms{
						display: flex;
						flex-wrap: wrap;
					}
					/deep/ .u-input.u-input--border{
						border: 0!important;
					}
					/deep/ input{
						width:260rpx;
						border: 0;
						line-height: 40rpx !important;
						height: 40rpx;
						min-height: 40rpx!important;
						font-size: 24rpx;
						text-align: right;
						padding-right: 10rpx;
					}
					.label::after{
						content:'';
						position: absolute;
					}
				}
				.btn{					
					.u-size-default{
						height: 80rpx;
						line-height: 80rpx;
						background: #D52E4C;
						border-radius: 40px;
						color: #fff;
						margin-top: 40rpx;
						margin-bottom: 40rpx;
					}
					.u-default-hover{
						background: #c02b46!important;
						border-radius: 40px!important;
						color: #fff!important;
					}
				}
			}
		}
	}
</style>