018A UI部分完成了
This commit is contained in:
liub
272
pages/common/aboutUs/ContactUs.vue
Normal file
272
pages/common/aboutUs/ContactUs.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user