278 lines
7.2 KiB
Vue
278 lines
7.2 KiB
Vue
<template>
|
||
<van-popup
|
||
v-model:show="isShow"
|
||
position="center"
|
||
closeable
|
||
:style="{
|
||
background: '#161718',
|
||
borderRadius: '6px',
|
||
width: '90%',
|
||
}"
|
||
>
|
||
<div class="text-white">
|
||
<!-- <div class="bg-[#111F63] w-75 p-6 flex-1 flex-none flex flex-col">
|
||
<div class="text-2xl font-bold">需求留言问卷</div>
|
||
<div class="mt-9 text-base font-bold flex-1">
|
||
<p>感谢您对海兔AI的关注</p>
|
||
<p>请留下您的信息</p>
|
||
<p>我们会尽快联系您！</p>
|
||
</div>
|
||
<div class="w-43 h-43 border"></div>
|
||
<div class="mt-6 text-base">了解更多，一键扫码咨询</div>
|
||
</div> -->
|
||
<div class="flex justify-between pt-40px">
|
||
<div class="text-22px text-white text-opacity-40">
|
||
<p class="text-30px font-bold text-white">感谢您对海兔AI的关注</p>
|
||
<p class="mt-20px">请留下您的信息</p>
|
||
<p class="mt-10px">我们会尽快联系您！</p>
|
||
</div>
|
||
<!-- <div>
|
||
<div class="w-200px h-200px border"></div>
|
||
</div> -->
|
||
</div>
|
||
<div class="p-17px flex-1 text-white mt-20px">
|
||
<div class="text-27px mb-22px">
|
||
<div class="required">需求类型</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-radio-group
|
||
class="cu-radio"
|
||
shape="dot"
|
||
direction="horizontal"
|
||
v-model="form.type_id"
|
||
>
|
||
<van-radio
|
||
v-for="(item, i) in typeList"
|
||
:key="i"
|
||
:name="item.id"
|
||
>{{ item.name }}</van-radio
|
||
>
|
||
</van-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="required">性别</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-radio-group
|
||
class="cu-radio"
|
||
shape="dot"
|
||
direction="horizontal"
|
||
v-model="form.sex"
|
||
>
|
||
<van-radio name="1">男</van-radio>
|
||
<van-radio name="0">女</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="required">姓名</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-field
|
||
v-model="form.name"
|
||
placeholder="请输入姓名"
|
||
class="cu-field-input !text-white"
|
||
></van-field>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="required">联系方式</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-field
|
||
v-model="form.phone"
|
||
placeholder="请输入手机号"
|
||
class="cu-field-input !text-white"
|
||
></van-field>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="">公司名称</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-field
|
||
v-model="form.company"
|
||
placeholder="请输入公司名称"
|
||
class="cu-field-input !text-white"
|
||
></van-field>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="">企业邮箱</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-field
|
||
v-model="form.email"
|
||
placeholder="请输入企业邮箱"
|
||
class="cu-field-input !text-white"
|
||
></van-field>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="">职位</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-field
|
||
v-model="form.job"
|
||
placeholder="请输入职位"
|
||
class="cu-field-input !text-white"
|
||
></van-field>
|
||
</div>
|
||
</div>
|
||
<div class="text-27px mb-22px">
|
||
<div class="">需求描述</div>
|
||
<div class="flex items-center mt-14px">
|
||
<van-field
|
||
v-model="form.content"
|
||
type="textarea"
|
||
placeholder="请输入需求描述"
|
||
class="cu-field-input !text-white"
|
||
></van-field>
|
||
</div>
|
||
</div>
|
||
<div class="text-right flex mt-30px">
|
||
<van-button
|
||
@click="handleSumbit"
|
||
type="primary"
|
||
class="!rounded-2px !h-66px w-full border-[#414548] text-white !border-none !text-27px"
|
||
>
|
||
确认
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive, toRaw, onBeforeMount, computed, watch } from 'vue'
|
||
import { showToast } from 'vant'
|
||
import http from '@/io/request'
|
||
const emit = defineEmits(['update:value'])
|
||
|
||
const telReg = /^1[3-9]\d{9}$/
|
||
const emailReg = /^[\w\.-]+@[a-zA-Z\d\.-]+\.[a-zA-Z]{2,}$/
|
||
|
||
const props = defineProps({
|
||
value: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
})
|
||
const isShow = computed({
|
||
get() {
|
||
return props.value
|
||
},
|
||
set(val) {
|
||
emit('update:value', val)
|
||
},
|
||
})
|
||
|
||
const defaultForm = {
|
||
type_id: '',
|
||
sex: 1,
|
||
name: '',
|
||
phone: '',
|
||
company: '',
|
||
email: '',
|
||
job: '',
|
||
content: '',
|
||
}
|
||
const typeList = ref([])
|
||
const loading = ref(false)
|
||
const form = reactive(Object.assign({}, defaultForm))
|
||
const getTypes = async () => {
|
||
const res = await http.get('/api/keywords?type_key=feedback')
|
||
typeList.value = res
|
||
if (res.length && !form.type_id) {
|
||
form.type_id = res[0].id
|
||
}
|
||
}
|
||
|
||
function handleSumbit() {
|
||
const _form = toRaw(form)
|
||
if (!_form.type_id) return showToast('请选择需求类型')
|
||
if (!_form.name) return showToast('请输入姓名')
|
||
if (!_form.phone) return showToast('请输入手机号')
|
||
if (!telReg.test(_form.phone)) return showToast('请输入正确的手机号')
|
||
if (_form.email && !emailReg.test(_form.email))
|
||
return showToast('请输入正确的邮箱')
|
||
if (loading.value) return
|
||
|
||
loading.value = true
|
||
http
|
||
.post('/api/feedback', _form)
|
||
.then(() => {
|
||
showToast('提交成功')
|
||
form.value = Object.assign({}, defaultForm)
|
||
isShow.value = false
|
||
loading.value = false
|
||
})
|
||
.catch(() => {
|
||
loading.value = false
|
||
})
|
||
}
|
||
|
||
watch(
|
||
() => isShow.value,
|
||
(val) => {
|
||
if (!val) {
|
||
form.value = Object.assign({}, defaultForm)
|
||
}
|
||
}
|
||
)
|
||
|
||
onBeforeMount(() => {
|
||
getTypes()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.required {
|
||
position: relative;
|
||
&::before {
|
||
position: absolute;
|
||
display: inline-block;
|
||
color: #ff4d4f;
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
left: -20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
content: '*';
|
||
}
|
||
}
|
||
|
||
.cu-field-input {
|
||
background: #161718;
|
||
border: 1px solid #414548;
|
||
color: #fff !important;
|
||
font-size: 22px;
|
||
padding: 0 19px;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
&::placeholder {
|
||
color: #fff;
|
||
opacity: 0.4;
|
||
}
|
||
input {
|
||
color: #fff;
|
||
height: 72px;
|
||
}
|
||
textarea {
|
||
color: #fff;
|
||
}
|
||
}
|
||
.cu-radio {
|
||
.van-radio__icon--dot {
|
||
height: 24px;
|
||
width: 24px;
|
||
border-radius: 4px;
|
||
&__icon {
|
||
width: 80%;
|
||
height: 80%;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
.van-radio__label {
|
||
font-size: 22px;
|
||
color: white;
|
||
margin-left: 8px !important;
|
||
}
|
||
}
|
||
</style>
|