APP/pages/common/aboutUs/ContactUs.vue

<template>
	<view class="maincontent contentBg">
		<view class="title">
			您可以反馈App使用中的问题、产品问题、投诉、意见或建议,向我们获取使用教程,我们将在收到您的反馈后,15个工作日内答复您,请保持您的注册手机号畅通。
		</view>
		<view class="main">
			<view class="text-content">

				<textarea class="textarea" v-model="txt" auto-focus="true" placeholder-class="placehoderClass" auto-height="true"
					placeholder="您需要反馈的内容" :auto-height="true" maxlength="2000" cursor-color="#BBE600" />



			</view>
			<view class="footBtn">
				<view class="fright convert" @click.stop="Send">发送</view>
				<view class="fright audioSett" @click.stop="txt=''">清空</view>
				<view class="clear"></view>
			</view>
		</view>

		<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
			:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
			:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
			:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
			@buttonClick="HidePop" :visiblePrompt="Status.Pop.visiblePrompt" :promptTitle="Status.Pop.promptTitle"
			v-model="Status.Pop.modelValue" @closePop="closePop" />

		<global-loading ref="loading" />
	</view>
</template>

<script>
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js' ;
	var these=null;
	export default {
		data() {
			return {
				txt: "",
				Status: {
					Pop: {
						showPop: false, //是否显示弹窗
						popType: 'custom',
						bgColor: '#383934bd',
						borderColor: '#BBE600',
						textColor: '#ffffffde',
						buttonBgColor: '#BBE600',
						buttonTextColor: '#232323DE',
						iconUrl: '',
						message: '您确定要这样做吗？',
						buttonText: '确定',
						clickEvt: '',
						visiblePrompt: false,
						promptTitle: '设备名称',
						modelValue: '',
						visibleClose: false,
						okCallback: null
					}
				}
			}
		},
		onLoad(){
			these=this;
		},
		methods: {
			Send() {
				if(!this.txt){
					this.showPop({
						showPop: true,
						message: "请输入反馈内容",
						iconUrl: "/static/images/6155/DeviceDetail/warnning.png",
						borderColor: "#e034344d",
						buttonBgColor: "#E03434",
					});
					return;
				}
				showLoading(this,{text:'正在发送'});
				setTimeout(()=>{
					//假装联系了我们
					this.showPop({
						showPop: true,
						message: "已收到您的反馈",
						iconUrl: "/static/images/common/success.png"
					});
					this.txt="";
					hideLoading(this);
				},800);
				

			},

			closePop: function() {
				this.Status.Pop.showPop = false;

				if (this.Status.Pop.cancelCallback) {
					this.Status.Pop.cancelCallback();
				}
			},
			HidePop: function() {
				if (this.Status.Pop.clickEvt == 'SendUsr') {

				}


				this.Status.Pop.showPop = false;
				if (this.Status.Pop.okCallback) {
					this.Status.Pop.okCallback();
				}
			},
			showPop: function(option) {
				hideLoading(this);
				let def = {
					showPop: true, //是否显示弹窗
					popType: 'custom',
					bgColor: '#383934bd',
					borderColor: '#BBE600',
					textColor: '#ffffffde',
					buttonBgColor: '#BBE600',
					buttonTextColor: '#232323DE',
					iconUrl: '',
					message: '',
					buttonText: '确定',
					clickEvt: '',
					visiblePrompt: false,
					promptTitle: '',
					modelValue: '',
					visibleClose: false,
					okCallback: null,
					showSlot: false,
					buttonCancelText: '',
					showCancel: false,
				}

				let keys = Object.keys(def);

				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];
					if (key in option) {
						continue;
					}
					this.Status.Pop[key] = def[key];
				}
				if (option) {
					keys = Object.keys(option);
					for (let i = 0; i < keys.length; i++) {
						let key = keys[i];

						this.Status.Pop[key] = option[key];
					}
				}

				if (!option.borderColor) {
					option.borderColor = '#BBE600';
					option.buttonBgColor = '#BBE600';
				}
				these.Status.Pop.showPop = true;
			},

		}
	}
</script>

<style>
	.title{
		margin: 50rpx 0rpx;
		color: #FFFFFFDE;
		
		
		font-family: PingFang SC;
		font-size: 27rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0px;
		text-align: left;
	}
	.footBtn .audioSett {
		margin-right: 50rpx;
		color: #FFFFFFDE;
		

		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 55rpx;
		letter-spacing: 0px;
		text-align: center;
	}

	.footBtn .convert {
		/* 组合 99 */
		width: 130rpx;
		height: 55rpx;
		line-height: 55rpx;
		border-radius: 180px;
		color: #232323;
		background-color: #AED600;
		text-align: center;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 12rpx;
	}

	.main {
		width: 100%;
		height: 100%;


	}

	.maincontent {
		height: 100vh;
		overflow: hidden;
	}

	.footBtn {
		width: 100%;

	}


	.line {
		width: 100%;
		height: 0rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.36);
		margin-bottom: 20rpx;
	}

	.placehoderClass {
		color: rgba(255, 255, 255, 0.6);

		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 44rpx;
		letter-spacing: 0.14px;
	}

	.text-content {
		border-radius: 16rpx;
		background: rgba(26, 26, 26, 1);
		width: 100%;
		height: 70%;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		overflow-y: scroll;
	}

	.importTxt {
		color: rgba(174, 214, 0, 1);

		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		height: 60rpx;
		line-height: 60rpx;
		letter-spacing: 0.14px;

	}

	.textarea {

		overflow-y: scroll;
		width: 100%;
		box-sizing: border-box;
	}
</style>