2024-12-05 11:46:54 +08:00
|
|
|
|
<!-- 联系客服 -->
|
2024-12-03 09:34:24 +08:00
|
|
|
|
<template>
|
2024-12-05 11:46:54 +08:00
|
|
|
|
<!-- #ifdef APP -->
|
|
|
|
|
|
<view class="contact" :style="{ background: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)), url(${myFileUrl+background}) no-repeat 0% 20%/ cover`,paddingTop: CustomBar+'rpx' }">
|
|
|
|
|
|
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
|
|
|
|
|
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<!-- #ifndef APP -->
|
|
|
|
|
|
<view class="contact" :style="{ background: `linear-gradient(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)), url(${myFileUrl+background}) no-repeat 0% 20%/ cover` }">
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<view class="ct-top">
|
|
|
|
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
|
|
|
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
|
|
|
|
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
|
|
|
|
|
:color="topLevel===0? '#60547d' : `rgba(9, 9, 9,${topLevel})`"></u-icon>
|
|
|
|
|
|
<image :src="homeFileUrl+logo"></image>
|
|
|
|
|
|
<view style="width: 75rpx;"></view>
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
|
|
|
<image :src="myFileUrl+logo"></image>
|
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="detail-content">
|
|
|
|
|
|
<form @submit="submit">
|
|
|
|
|
|
<u-divider bgColor="#ffffff00" fontSize="35" color="#424242" borderColor="#f8f9f9">问题反馈</u-divider>
|
|
|
|
|
|
<view class="blocks">
|
|
|
|
|
|
<view class="block_input">
|
|
|
|
|
|
<view><text>*</text>姓名：</view>
|
|
|
|
|
|
<input type="text" name="name" v-model="form.name" placeholder="请输入您的姓名"/>
|
|
|
|
|
|
<view class="tip" v-show="tip.name">请输入您的姓名</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<picker @change="bindTypeChange" :value="messageType" :range="typeList">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<input disabled type="text" name="type" :value="typeList[messageType]" placeholder="请选择类型"/>
|
|
|
|
|
|
<u-icon class="type-icon" name="arrow-down" color="#CCCCCC" size="40"></u-icon>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</picker>
|
|
|
|
|
|
</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>
|
|
|
|
|
|
<u-button ripple :hairLine="false" class="messageSubmit" form-type="submit">提交</u-button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<u-toast ref="uToast"></u-toast>
|
|
|
|
|
|
<Loading :show="loading" />
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-12-05 11:46:54 +08:00
|
|
|
|
import configService from '@/common/config.service.js';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
loading: true, // 加载
|
|
|
|
|
|
// 基础路径
|
|
|
|
|
|
homeFileUrl: configService.fileUrl + 'pixel/home/',
|
|
|
|
|
|
myFileUrl: configService.fileUrl + 'pixel/my/',
|
|
|
|
|
|
// 页面背景
|
|
|
|
|
|
background: 'silver-background.png',
|
|
|
|
|
|
// logo图标
|
|
|
|
|
|
logo: 'logo.png',
|
|
|
|
|
|
// 顶部距离等级
|
|
|
|
|
|
topLevel: 0,
|
|
|
|
|
|
form:{
|
|
|
|
|
|
name: '',// 姓名
|
|
|
|
|
|
phone: '',// 联系方式
|
|
|
|
|
|
type: '',// 类别
|
|
|
|
|
|
message: ''// 留言
|
|
|
|
|
|
},
|
|
|
|
|
|
tip: {
|
|
|
|
|
|
name: false,
|
|
|
|
|
|
phone: false,
|
|
|
|
|
|
message: false
|
|
|
|
|
|
},
|
|
|
|
|
|
messageType: 0, //类型
|
|
|
|
|
|
typeList: [
|
|
|
|
|
|
"场地咨询",
|
|
|
|
|
|
"政策咨询",
|
|
|
|
|
|
"人才服务",
|
|
|
|
|
|
"赛事咨询",
|
|
|
|
|
|
"其他"
|
|
|
|
|
|
],
|
|
|
|
|
|
messageMaxlength: 300// 留言最长字数
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// #ifndef H5
|
|
|
|
|
|
onPageScroll(e) {
|
|
|
|
|
|
const level = e.scrollTop / 60;
|
|
|
|
|
|
if (level <= 1) this.topLevel = level;
|
|
|
|
|
|
else this.topLevel = 1;
|
|
|
|
|
|
},
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
|
|
// #ifdef H5
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
window.onscroll = function() {
|
|
|
|
|
|
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
|
|
|
|
|
//scrollTop就是触发滚轮事件时滚轮的高度
|
|
|
|
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
|
|
|
const level = scrollTop / 60;
|
|
|
|
|
|
if (level <= 1) that.topLevel = level;
|
|
|
|
|
|
else that.topLevel = 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
onHide() {
|
|
|
|
|
|
window.onscroll = null;
|
|
|
|
|
|
},
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 返回
|
|
|
|
|
|
back() {
|
|
|
|
|
|
uni.navigateBack();
|
|
|
|
|
|
},
|
|
|
|
|
|
// 提交申请
|
|
|
|
|
|
async submit(e){
|
|
|
|
|
|
try{
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
|
const { name, phone, type, message } = this.form;
|
|
|
|
|
|
this.tip = {
|
|
|
|
|
|
name: name==='',
|
|
|
|
|
|
phone: (phone==='') || (!(/^1[345789]\d{9}$/.test(phone))),
|
|
|
|
|
|
message:message===''
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if(name===''){
|
|
|
|
|
|
this.$refs.uToast.show({type:'warning',title: "请输入姓名!"});
|
|
|
|
|
|
return;
|
|
|
|
|
|
}else if(!(/^1[345789]\d{9}$/.test(phone))){
|
|
|
|
|
|
this.$refs.uToast.show({type:'warning',title: "联系方式不正确!"});
|
|
|
|
|
|
return;
|
|
|
|
|
|
}else if(message===''){
|
|
|
|
|
|
this.$refs.uToast.show({type:'warning',title: "请输入留言内容!"});
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let res = await this.$api.addMessage(e.detail.value);
|
|
|
|
|
|
if(res.success){
|
|
|
|
|
|
this.$refs.uToast.show({type:'success',title: "提交成功!"});
|
|
|
|
|
|
this.clear();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.$refs.uToast.show({type:'error',title: "提交失败!"});
|
|
|
|
|
|
}
|
|
|
|
|
|
}catch(e){
|
|
|
|
|
|
this.$refs.uToast.show({type:'error',title: "处理失败!"});
|
|
|
|
|
|
}finally{
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
// 清空
|
|
|
|
|
|
clear(){
|
|
|
|
|
|
this.form= {
|
|
|
|
|
|
name: '',// 姓名
|
|
|
|
|
|
phone: '',// 联系方式
|
|
|
|
|
|
type: '',// 类别
|
|
|
|
|
|
message: ''// 留言
|
|
|
|
|
|
};
|
|
|
|
|
|
this.messageType = 0;
|
|
|
|
|
|
this.tip={
|
|
|
|
|
|
name: false,
|
|
|
|
|
|
phone: false,
|
|
|
|
|
|
message: false
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
// 选择类型
|
|
|
|
|
|
bindTypeChange(e) {
|
|
|
|
|
|
this.messageType = e.detail.value
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2024-12-05 11:46:54 +08:00
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.contact {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
opacity: 0.9;
|
|
|
|
|
|
|
|
|
|
|
|
.ct-top {
|
|
|
|
|
|
// #ifdef APP
|
|
|
|
|
|
.app-top {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
z-index: 81;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
.mobile-logo {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
// #ifndef MP-WEIXIN
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.back{
|
|
|
|
|
|
margin-left: 35rpx;
|
|
|
|
|
|
margin-top: 5rpx
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// #endif
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
z-index: 81;
|
|
|
|
|
|
padding: 15rpx 0;
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 200rpx;
|
|
|
|
|
|
height: 45rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.detail-content{
|
|
|
|
|
|
margin: 80rpx 30rpx 32rpx;
|
|
|
|
|
|
// min-height: 90vh;
|
|
|
|
|
|
background: linear-gradient(rgba(160, 160, 160, 0.4), rgba(0, 0, 0, 0.1));
|
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
|
padding: 40rpx 25rpx 0rpx;
|
|
|
|
|
|
color: #f9f9f9;
|
|
|
|
|
|
.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-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;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
|
|
|
background-position: right center;
|
|
|
|
|
|
color: #f8f9fb;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.type-icon{
|
|
|
|
|
|
z-index:90;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 50rpx;
|
|
|
|
|
|
margin-top: -60rpx;
|
|
|
|
|
|
}
|
2024-12-03 09:34:24 +08:00
|
|
|
|
</style>
|
