<template>
|
<div class="message">
|
<div class="messagebox">
|
<div class="head">
|
<p class="title">仁软客户关怀中心</p>
|
<p class="tips">您的宝贵意见是我们进步的不竭动力</p>
|
<p class="btn pointer" @click="toSearch()">返回首页</p>
|
</div>
|
<!-- 反馈意思-->
|
<div class="contextbox">
|
<div class="content">
|
<div class="content-top">
|
<!--姓名-->
|
<label for="name">
|
<p>姓名 <span style="color: #E56E6E">*</span></p>
|
</label>
|
<input type="text" id="name" v-model="name">
|
<!--电话-->
|
<label for="tel">
|
<p>电话</p>
|
</label>
|
<input type="tel" id="tel" v-model="mobile">
|
<!--邮箱-->
|
<label for="email">
|
<p>邮箱</p>
|
</label>
|
<input type="email" id="email" v-model="email">
|
<!--公司名称-->
|
<label for="companyName">
|
<p>公司名称</p>
|
</label>
|
<input type="text" id="companyName" v-model="company">
|
<!--留言-->
|
<label for="note">
|
<p>请您在此留言,我们会尽快给您回复 <span style="color: #E56E6E">*</span></p>
|
</label>
|
<textarea rows="3" cols="20" id="note" v-model="note">
|
</textarea>
|
<!-- <input type="text" id="note" v-model="note">-->
|
</div>
|
<div class="content-submit">
|
<input type="submit" class="submit pointer" @click="onSubmit">
|
</div>
|
</div>
|
</div>
|
<!-- <footer>
|
<a href="http://huiyan.rensofter.com/caib" style="color:white;">RenSoft@仁软科技</a>
|
</footer> -->
|
<p class="bottom"><a href="https://www.rensofter.com/index.html" style="color:white;">RenSoft@仁软科技</a></p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
import {Notify} from 'vant';
|
|
export default {
|
name: 'message',
|
|
data() {
|
return {
|
height: document.documentElement.clientHeight,
|
name: '',
|
mobile: '',
|
email: '',
|
company: '',
|
note: ''
|
}
|
},
|
methods: {
|
toSearch() {
|
let id = this.countryName
|
this.$router.push('/search')
|
},
|
// 提交数据请求
|
onSubmit() {
|
if (this.name.toString().replace(/\s+/g, '') === '') {
|
Notify({type: 'danger', message: '请输入姓名'});
|
return false
|
}
|
if (!this.mobile && !this.email){
|
Notify({type: 'danger', message: '电话或者邮箱至少填写一处！'});
|
return false
|
}else{
|
if (this.mobile && !(/^1[3456789]\d{9}$/.test(this.mobile))) {
|
Notify({type: 'danger', message: '请输入正确手机号'});
|
return false
|
}
|
if (this.email && !(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.email))) {
|
Notify({type: 'danger', message: '请输入正确的邮箱'});
|
return false
|
}
|
}
|
// if (this.company.toString().replace(/\s+/g, '') === '') {
|
// Notify({type: 'danger', message: '请输入公司名称'});
|
// return false
|
// }
|
if (this.note.toString().replace(/\s+/g, '') === '') {
|
Notify({type: 'danger', message: '请输入意见或建议'});
|
return false
|
}
|
let data = {
|
Name: this.name,
|
Mobile: this.mobile,
|
Email: this.email,
|
Company: this.company,
|
Note: this.note,
|
TypeInfo: 'Haig'
|
}
|
this.$axios.request({
|
url: '/Advise/AddAdvise',
|
data,
|
method: 'post'
|
}).then((res) => {
|
this.name = ''
|
this.mobile = ''
|
this.email = ''
|
this.company = ''
|
this.note = ''
|
Notify({type: 'success', message: res.data.Msg});
|
}, err => {
|
Notify({type: 'danger', message: res.data.Msg});
|
})
|
},
|
},
|
activated() {
|
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.message {
|
height: 100vh;
|
.bottom {
|
text-align: center;
|
background-color: #9b0707;
|
color: #fff;
|
}
|
.messagebox {
|
height: 100%;
|
overflow: auto;
|
background-color: #b30808;
|
}
|
|
.head {
|
background-image: url(../assets/images/logo1.png);
|
background-size: 2.6rem;
|
padding: 1.2rem 15px 0;
|
background-color: #b30808;
|
background-position: 15px 0.2rem;
|
background-repeat: no-repeat;
|
height: 3.4rem;
|
position: relative;
|
|
.title {
|
height: 1rem;
|
line-height: 1rem;
|
font-size: 0.6rem;
|
color: #fff;
|
font-weight: 700;
|
text-align: center;
|
}
|
|
.tips {
|
text-align: right;
|
font-size: 16px;
|
line-height: 2.5;
|
color: #fff;
|
}
|
|
.btn {
|
display: inline-block;
|
background: rgba(255, 255, 255, .2);
|
width: 80px;
|
height: 26px;
|
line-height: 26px;
|
text-align: center;
|
border-radius: 13px;
|
font-size: 14px;
|
color: #fff;
|
position: absolute;
|
right: 15px;
|
top: 15px;
|
}
|
}
|
|
.contextbox {
|
padding: 15px;
|
background-color: #b30808;
|
height: calc(100% - 170px);
|
|
.content {
|
background-color: #f5f5f5;
|
padding: 15px;
|
}
|
}
|
}
|
|
.content-top {
|
background-color: white;
|
width: 100%;
|
padding: 15px 16px 0;
|
box-sizing: border-box;
|
}
|
|
input {
|
border: 1px solid #ccc;
|
margin: 0 0 13px;
|
height: 25px;
|
width: 100%;
|
}
|
|
textarea {
|
border: 1px solid #ccc;
|
width: 100%;
|
line-height: 20px;
|
margin: 0 0 13px;
|
}
|
|
.content-submit {
|
padding-bottom: 18px;
|
background-color: #fff;
|
}
|
|
.content-submit .submit {
|
width: 100%;
|
text-align: center;
|
height: 44px;
|
line-height: 42px;
|
color: white;
|
font-size: 16px;
|
box-sizing: border-box;
|
background-color: #ee0a24;
|
border-color: #ee0a24;
|
}
|
|
footer {
|
width: 633px;
|
margin: 0 auto;
|
color: white;
|
text-align: center;
|
background-color: #9b0707;
|
line-height: 30px;
|
font-size: 14px;
|
position: fixed;
|
// left: 0;
|
// right: 0;
|
bottom: 0;
|
}
|
.pointer{
|
cursor: pointer;
|
}
|
</style>
|
