287 lines
6.5 KiB
Vue
287 lines
6.5 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 悬浮按钮 -->
|
|||
|
|
<view class="movableArea">
|
|||
|
|
<view class="movableView" @click="show = true">
|
|||
|
|
<u-icon name="kefu-ermai" size="56" :color="textColor"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-popup v-model="show" mode="center" border-radius="20">
|
|||
|
|
<view class="modal-content">
|
|||
|
|
<form @submit="submit">
|
|||
|
|
<view class="dc-form">
|
|||
|
|
<u-divider bgColor="#ffffff00" half-width="240" fontSize="40" color="#424242" borderColor="#578ce4">问题反馈</u-divider>
|
|||
|
|
<view class="blocks">
|
|||
|
|
<view class="block_input">
|
|||
|
|
<view><text>*</text>联系方式：</view>
|
|||
|
|
<input type="tel" name="phone" v-model="form.phone" placeholder="请输入您的联系方式"/>
|
|||
|
|
<view class="tip" v-show="tip.phone">请输入正确的联系方式</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="block_input">
|
|||
|
|
<view><text>*</text>留言：</view>
|
|||
|
|
<view class="message-textarea">
|
|||
|
|
<textarea name="message" v-model="form.message" placeholder="请输入留言内容" :maxlength="messageMaxlength"></textarea>
|
|||
|
|
<view class="mt-tip">
|
|||
|
|
{{ form.message.length }} / {{ messageMaxlength }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tip" v-show="tip.message">请输入留言内容</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="dcf-btn">
|
|||
|
|
<u-button ripple :disabled="loading" :loading="loading" :hairLine="false"
|
|||
|
|
:class="loading?'submit-disabled':''" class="messageSubmit" form-type="submit">提交</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</form>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false,
|
|||
|
|
form:{
|
|||
|
|
phone: '',// 联系方式
|
|||
|
|
message: ''// 留言
|
|||
|
|
},
|
|||
|
|
tip: {
|
|||
|
|
phone: false,
|
|||
|
|
message: false
|
|||
|
|
},
|
|||
|
|
messageMaxlength: 300,// 留言最长字数
|
|||
|
|
loading: true, // 加载
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
textColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#333'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.loading = false;
|
|||
|
|
this.form.phone = JSON.parse(this.$store.state.user_message)?.username;
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 提交申请
|
|||
|
|
async submit(e){
|
|||
|
|
try{
|
|||
|
|
this.loading = true;
|
|||
|
|
const { phone, message } = this.form;
|
|||
|
|
this.tip = {
|
|||
|
|
phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
|
|||
|
|
message:message===''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(!(/^1[345789]\d{9}$/.test(phone))){
|
|||
|
|
this.$emit('toast',{type:'warning',title: "联系方式不正确!"});
|
|||
|
|
return;
|
|||
|
|
}else if(message===''){
|
|||
|
|
this.$emit('toast',{type:'warning',title: "请输入留言内容!"});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let res = await this.$api.addMessage(this.form);
|
|||
|
|
if(res.success){
|
|||
|
|
this.$emit('toast',{type:'success',title: "提交成功!"});
|
|||
|
|
this.clear();
|
|||
|
|
}else{
|
|||
|
|
this.$emit('toast',{type:'error',title: "提交失败!"});
|
|||
|
|
}
|
|||
|
|
}catch(e){
|
|||
|
|
this.$emit('toast',{type:'error',title: "处理失败!"});
|
|||
|
|
}finally{
|
|||
|
|
this.loading = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 清空
|
|||
|
|
clear(){
|
|||
|
|
this.form= {
|
|||
|
|
phone: '',// 联系方式
|
|||
|
|
message: ''// 留言
|
|||
|
|
};
|
|||
|
|
this.tip={
|
|||
|
|
phone: false,
|
|||
|
|
message: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.movableArea {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 120rpx;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 120rpx);
|
|||
|
|
pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
|
|||
|
|
z-index: 80;
|
|||
|
|
|
|||
|
|
.movableView {
|
|||
|
|
position: fixed;
|
|||
|
|
right: -96rpx;
|
|||
|
|
bottom: 400rpx;
|
|||
|
|
pointer-events: auto; //可以点击
|
|||
|
|
cursor: pointer;
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 120rpx;
|
|||
|
|
// border-radius: 78rpx;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
border-top-left-radius: 14rpx;
|
|||
|
|
border-bottom-left-radius: 14rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
|
|||
|
|
background: rgba(255,255,255,0.99);
|
|||
|
|
transition: 0.3s;
|
|||
|
|
.iconImage {
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
&:hover{
|
|||
|
|
right: 0;
|
|||
|
|
border-radius: 78rpx;
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
&:active{
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.modal-content{
|
|||
|
|
width: 1000rpx;
|
|||
|
|
// height: 500rpx;
|
|||
|
|
padding: 40rpx 70rpx 0rpx;
|
|||
|
|
color: #f9f9f9;
|
|||
|
|
.dc-form{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.blocks{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.block_title{
|
|||
|
|
font-family: PingFang SC, PingFang SC;
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
.block_input{
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
.tip{
|
|||
|
|
color: #FE020E;
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
font-size: small;
|
|||
|
|
margin-bottom: 0rpx !important;
|
|||
|
|
}
|
|||
|
|
view{
|
|||
|
|
font-family: PingFang SC, PingFang SC;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
text{
|
|||
|
|
vertical-align: middle;
|
|||
|
|
color: #FE020E;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
input{
|
|||
|
|
height: 92rpx;
|
|||
|
|
background: #F8F9FB;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
color: rgba(0,0,0,0.8);
|
|||
|
|
padding:0 32rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
}
|
|||
|
|
.message-textarea{
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
textarea{
|
|||
|
|
padding: 32rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400rpx;
|
|||
|
|
background: #F8F9FB;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
color: rgba(0,0,0,0.8);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
}
|
|||
|
|
.mt-tip{
|
|||
|
|
position: absolute;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
right: 32rpx;
|
|||
|
|
bottom: 10rpx;
|
|||
|
|
z-index: 2;
|
|||
|
|
background-color: #f8f9fb;
|
|||
|
|
padding: 5rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.dcf-btn{
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.messageSubmit{
|
|||
|
|
width: 100%;
|
|||
|
|
background-size: 200% auto;
|
|||
|
|
transition: 0.5s;
|
|||
|
|
animation-duration: 1s;
|
|||
|
|
animation-fill-mode: both;
|
|||
|
|
border: none;
|
|||
|
|
background-image: -webkit-linear-gradient( to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
|
|||
|
|
background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5 51%, #36D1DC 100%);
|
|||
|
|
height: 100rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 56rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 35rpx;
|
|||
|
|
&::after{
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
&:hover {
|
|||
|
|
background-position: right center;
|
|||
|
|
color: #f8f9fb;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
&:active{
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.submit-disabled{
|
|||
|
|
cursor: default;
|
|||
|
|
opacity: 0.5;
|
|||
|
|
&:hover {
|
|||
|
|
background-position: inherit !important;
|
|||
|
|
color: rgba(0, 0, 0, 0.3) !important;
|
|||
|
|
}
|
|||
|
|
&:active{
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|