208 lines
4.2 KiB
Vue
208 lines
4.2 KiB
Vue
<template>
|
|
<view>
|
|
<touch-popup ref="popup" :backShow="true">
|
|
<view class="bck">
|
|
<view style="width: 100%;height: 15px;"></view>
|
|
<scroll-view scroll-y>
|
|
<view class="title center">
|
|
联系我们
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">
|
|
类型
|
|
</view>
|
|
<view class="item-input">
|
|
商务合作
|
|
<!-- <select :value="typeStr">
|
|
<option value="1">商务合作</option>
|
|
<option value="2">广告洽谈</option>
|
|
</select> -->
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">
|
|
联系人
|
|
</view>
|
|
<view class="item-input">
|
|
<input type="text" v-model="lianxiren" placeholder="请输入联系人" />
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">
|
|
联系方式
|
|
</view>
|
|
<view class="item-input">
|
|
<input type="text" v-model="phone" placeholder="请输入联系方式" />
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-title">
|
|
详细信息
|
|
</view>
|
|
<view class="item-input2">
|
|
<textarea placeholder="请输入详细信息" name="details" maxlength="500" v-model="details"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="button">
|
|
<view class="submit" @click="submit">
|
|
<text>{{isSave ? '当前内容已提交' : '提交信息'}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</touch-popup>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
const app = getApp()
|
|
import { ref, defineExpose, computed } from 'vue'
|
|
import touchPopup from '@/components/touch-popup/touch-popup'
|
|
const popup = ref() // ref组件
|
|
|
|
const isSave = ref(false)
|
|
|
|
const typeStr = ref(1)
|
|
const lianxiren = ref('') // 联系人
|
|
const phone = ref('') // 联系方式
|
|
const details = ref('') // 详细信息
|
|
|
|
const submit = (e) => {
|
|
let toast = ''
|
|
if (!lianxiren.value) {
|
|
toast = '请输入联系人'
|
|
}
|
|
if (!phone.value) {
|
|
toast = '请输入联系方式'
|
|
}
|
|
if (toast != '') {
|
|
uni.showToast({
|
|
title: toast,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (isSave.value) {
|
|
uni.showToast({
|
|
title: '您的内容已提交，可以重新打开窗口再次提交新内容！',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading()
|
|
uni.request({
|
|
url: app.globalData.requestUrl + '/api/contact/save',
|
|
data: {
|
|
type: typeStr.value,
|
|
name: lianxiren.value,
|
|
mobile: phone.value,
|
|
content: details.value
|
|
},
|
|
header: {
|
|
'Authorization': 'Bearer ' + app.globalData.token
|
|
},
|
|
method: 'POST',
|
|
success: (res) => {
|
|
if (res.data.code === 200) {
|
|
uni.showToast({
|
|
title: '提交成功！',
|
|
icon: 'none'
|
|
})
|
|
isSave.value = true
|
|
} else {
|
|
uni.showToast({
|
|
title: res.data.msg,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
complete() {
|
|
uni.hideLoading()
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
const open = () => {
|
|
isSave.value = false
|
|
popup.value.open()
|
|
}
|
|
defineExpose({
|
|
open
|
|
}) // 暴露方法
|
|
</script>
|
|
|
|
<style scoped>
|
|
.submit text {
|
|
background: linear-gradient(180deg, #C2FF9A 0%, #41FEB6 116.67%);
|
|
color: transparent;
|
|
-webkit-background-clip: text;
|
|
}
|
|
.submit {
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 15px;
|
|
height: 44px;
|
|
border-radius: 22px;
|
|
align-items: center;
|
|
background-color: #000;
|
|
width: 260px;
|
|
}
|
|
.button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 20px;
|
|
|
|
}
|
|
textarea {
|
|
font-size: 14px;
|
|
height: 100px;
|
|
width: 100%;
|
|
}
|
|
.item-input2 {
|
|
border-radius: 15px;
|
|
border: 1px solid rgba(0,0,0,0.5);
|
|
background: #FFFFFF;
|
|
padding: 5px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
select {
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
input {
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
.item-input {
|
|
height: 35px;
|
|
border-radius: 30px;
|
|
border: 1px solid rgba(0,0,0,0.5);
|
|
background: #FFFFFF;
|
|
padding: 5px 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item-title {
|
|
padding: 5px;
|
|
}
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px 30px;
|
|
}
|
|
scroll-view {
|
|
height: calc(100% - 15px);
|
|
}
|
|
.title {
|
|
padding: 15px;
|
|
}
|
|
.bck {
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%);
|
|
}
|
|
</style> |