|
@@ -1,15 +1,26 @@
|
|
<!--test.vue-->
|
|
<!--test.vue-->
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
|
|
+ <div class="source-form-top-container">
|
|
|
|
+ <div class="source-form-tip-container" v-if="!canWrite">
|
|
|
|
+ <div class="source-form-content-container">
|
|
|
|
+ <van-empty :description="notCanWriteTip" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <van-overlay class="show-success-dialog-container" :show="isShowSuccessDialog" @click="successDialogShow = false">
|
|
|
|
+ <div @click.stop class="show-success-dialog-content-container">
|
|
|
|
+ <img v-if="useSourceFormConfig.submitSuccessImage" :src="useSourceFormConfig.submitSuccessImage" />
|
|
|
|
+ <van-icon class="icon-close-dialog" name="clear" @click="successDialogShow = false" />
|
|
|
|
+ </div>
|
|
|
|
+ </van-overlay>
|
|
<van-form
|
|
<van-form
|
|
class="source-form"
|
|
class="source-form"
|
|
@submit="onSubmit"
|
|
@submit="onSubmit"
|
|
:style="{
|
|
:style="{
|
|
- 'background-color': sourceFormConfig.background
|
|
|
|
|
|
+ 'background-color': useSourceFormConfig.background
|
|
}"
|
|
}"
|
|
>
|
|
>
|
|
<van-field
|
|
<van-field
|
|
- v-if="sourceFormConfig.company"
|
|
|
|
|
|
+ v-if="useSourceFormConfig.company"
|
|
v-model.trim="form.company"
|
|
v-model.trim="form.company"
|
|
required
|
|
required
|
|
name="公司名称"
|
|
name="公司名称"
|
|
@@ -17,7 +28,7 @@
|
|
placeholder="请输入准确的公司名称"
|
|
placeholder="请输入准确的公司名称"
|
|
/>
|
|
/>
|
|
<van-field
|
|
<van-field
|
|
- v-if="sourceFormConfig.name"
|
|
|
|
|
|
+ v-if="useSourceFormConfig.name"
|
|
v-model.trim="form.name"
|
|
v-model.trim="form.name"
|
|
required
|
|
required
|
|
name="姓名"
|
|
name="姓名"
|
|
@@ -25,21 +36,21 @@
|
|
placeholder="请输入姓名"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
/>
|
|
<van-field
|
|
<van-field
|
|
- v-if="sourceFormConfig.phone"
|
|
|
|
|
|
+ v-if="useSourceFormConfig.phone"
|
|
v-model.trim="form.phone"
|
|
v-model.trim="form.phone"
|
|
required
|
|
required
|
|
name="手机号"
|
|
name="手机号"
|
|
label="手机号"
|
|
label="手机号"
|
|
placeholder="请输入准确的手机号"
|
|
placeholder="请输入准确的手机号"
|
|
/>
|
|
/>
|
|
- <van-field name="radio" required label="你希望获得哪个行业的报告" v-if="sourceFormConfig.source_desc">
|
|
|
|
|
|
+ <van-field name="radio" required label="你希望获得哪个行业的报告" v-if="useSourceFormConfig.source_desc">
|
|
<template #input>
|
|
<template #input>
|
|
<div class="custom-radio-type">
|
|
<div class="custom-radio-type">
|
|
<van-radio-group
|
|
<van-radio-group
|
|
v-model="form.source_desc"
|
|
v-model="form.source_desc"
|
|
>
|
|
>
|
|
<van-radio
|
|
<van-radio
|
|
- v-for="item in sourceFormConfig.sourceOptions"
|
|
|
|
|
|
+ v-for="item in useSourceFormConfig.sourceOptions"
|
|
:name="item"
|
|
:name="item"
|
|
:key="item"
|
|
:key="item"
|
|
>
|
|
>
|
|
@@ -66,12 +77,41 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { Form, Field, Button, Radio, RadioGroup, Toast } from 'vant';
|
|
|
|
|
|
+import { Form, Field, Button, Radio, RadioGroup, Toast, Empty, Overlay, Icon} from 'vant';
|
|
import $axios from "@/service/httpServer";
|
|
import $axios from "@/service/httpServer";
|
|
|
|
|
|
|
|
+const DEFAULT_SOURCE_CONFIG = {
|
|
|
|
+ background: 'transparent',
|
|
|
|
+ source: 'default-source-h5',
|
|
|
|
+ name: true,
|
|
|
|
+ phone: true,
|
|
|
|
+ company: true,
|
|
|
|
+ source_desc: true,
|
|
|
|
+ sourceOptions: [
|
|
|
|
+ '建筑工程',
|
|
|
|
+ '信息技术',
|
|
|
|
+ '弱电安防',
|
|
|
|
+ '医疗卫生',
|
|
|
|
+ '服务采购',
|
|
|
|
+ '其他'
|
|
|
|
+ ],
|
|
|
|
+ // 提交限制
|
|
|
|
+ submitCountState: -1,
|
|
|
|
+ submitTimeState: -1,
|
|
|
|
+ submitSuccessState: -1,
|
|
|
|
+ submitTime: [],
|
|
|
|
+ submitSuccessTip: '提交成功',
|
|
|
|
+ submitCountMaxTip: '您已提交该表单',
|
|
|
|
+ submitTimeBeforeTip: '该表单暂未开始填写',
|
|
|
|
+ submitTimeAfterTip: '该表单已结束填写',
|
|
|
|
+}
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
name: 'DsSourceForm',
|
|
name: 'DsSourceForm',
|
|
components: {
|
|
components: {
|
|
|
|
+ [Overlay.name]: Overlay,
|
|
|
|
+ [Empty.name]: Empty,
|
|
|
|
+ [Icon.name]: Icon,
|
|
[Form.name]: Form,
|
|
[Form.name]: Form,
|
|
[Field.name]: Field,
|
|
[Field.name]: Field,
|
|
[Radio.name]: Radio,
|
|
[Radio.name]: Radio,
|
|
@@ -80,6 +120,7 @@ import $axios from "@/service/httpServer";
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ successDialogShow: false,
|
|
form: {
|
|
form: {
|
|
name: '',
|
|
name: '',
|
|
phone: '',
|
|
phone: '',
|
|
@@ -108,25 +149,127 @@ import $axios from "@/service/httpServer";
|
|
},
|
|
},
|
|
sourceFormConfig: {
|
|
sourceFormConfig: {
|
|
type:Object,
|
|
type:Object,
|
|
- default: ()=>({
|
|
|
|
- background: 'transparent',
|
|
|
|
- source: 'default-source-h5',
|
|
|
|
- name: true,
|
|
|
|
- phone: true,
|
|
|
|
- company: true,
|
|
|
|
- source_desc: true,
|
|
|
|
- sourceOptions: [
|
|
|
|
- '建筑工程',
|
|
|
|
- '信息技术',
|
|
|
|
- '弱电安防',
|
|
|
|
- '医疗卫生',
|
|
|
|
- '服务采购',
|
|
|
|
- '其他'
|
|
|
|
- ]
|
|
|
|
- })
|
|
|
|
|
|
+ default: () => {
|
|
|
|
+ return DEFAULT_SOURCE_CONFIG
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ isShowSuccessDialog () {
|
|
|
|
+ if (this.useSourceFormConfig.submitSuccessState !== 0) {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ if (this.isEdit) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ return this.successDialogShow
|
|
|
|
+ },
|
|
|
|
+ isEdit () {
|
|
|
|
+ return location.href.indexOf('/#/editor?id') !== -1
|
|
|
|
+ },
|
|
|
|
+ useSourceFormConfig () {
|
|
|
|
+ return Object.assign({}, DEFAULT_SOURCE_CONFIG, this.sourceFormConfig)
|
|
|
|
+ },
|
|
|
|
+ canWrite () {
|
|
|
|
+ let result = true
|
|
|
|
+ if (this.needCheckWriteCount && this.hasCacheWrite) {
|
|
|
|
+ result = false
|
|
|
|
+ }
|
|
|
|
+ if (!this.canTimeing) {
|
|
|
|
+ result = false
|
|
|
|
+ }
|
|
|
|
+ return result
|
|
|
|
+ },
|
|
|
|
+ notCanWriteTip () {
|
|
|
|
+ // 判断表单填写限制、表单过期限制
|
|
|
|
+ let tip = ''
|
|
|
|
+ if (this.needCheckTime) {
|
|
|
|
+ if (!this.isTimeStart) {
|
|
|
|
+ tip = this.useSourceFormConfig.submitTimeBeforeTip
|
|
|
|
+ } else if (this.isTimeEnd) {
|
|
|
|
+ tip = this.useSourceFormConfig.submitTimeAfterTip
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (this.needCheckWriteCount) {
|
|
|
|
+ if (this.hasCacheWrite) {
|
|
|
|
+ tip = this.useSourceFormConfig.submitCountMaxTip
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return tip
|
|
|
|
+ },
|
|
|
|
+ needCheckWriteCount () {
|
|
|
|
+ return this.useSourceFormConfig.submitCountState !== -1
|
|
|
|
+ },
|
|
|
|
+ needCheckTime () {
|
|
|
|
+ return this.useSourceFormConfig.submitTimeState !== -1
|
|
|
|
+ },
|
|
|
|
+ canTimeing () {
|
|
|
|
+ if (!this.needCheckTime) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ return this.isTimeStart && !this.isTimeEnd
|
|
|
|
+ },
|
|
|
|
+ hasCacheWrite () {
|
|
|
|
+ if (this.isEdit) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ let result = false
|
|
|
|
+ try {
|
|
|
|
+ result = localStorage.getItem(window._pageData._id) === '1'
|
|
|
|
+ } catch (e) {
|
|
|
|
+ console.warn(e)
|
|
|
|
+ }
|
|
|
|
+ return result
|
|
|
|
+ },
|
|
|
|
+ isTimeStart () {
|
|
|
|
+ if (this.sourceFormConfig.submitTime[0]) {
|
|
|
|
+ return Date.now() >= this.sourceFormConfig.submitTime[0]
|
|
|
|
+ } else {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ isTimeEnd () {
|
|
|
|
+ if (this.sourceFormConfig.submitTime[1]) {
|
|
|
|
+ return Date.now() >= this.sourceFormConfig.submitTime[1]
|
|
|
|
+ } else {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
|
|
+ saveCache () {
|
|
|
|
+ try {
|
|
|
|
+ localStorage.setItem(window._pageData._id, '1')
|
|
|
|
+ } catch (e) {
|
|
|
|
+ console.warn(e)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ submitSuccessCallback () {
|
|
|
|
+ this.saveCache()
|
|
|
|
+ switch (this.useSourceFormConfig.submitSuccessState) {
|
|
|
|
+ case -1: {
|
|
|
|
+ Toast(this.useSourceFormConfig.submitSuccessTip)
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ case 0: {
|
|
|
|
+ if (this.useSourceFormConfig.submitSuccessImage) {
|
|
|
|
+ this.successDialogShow = true
|
|
|
|
+ } else {
|
|
|
|
+ Toast(this.useSourceFormConfig.submitSuccessTip)
|
|
|
|
+ }
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ case 1: {
|
|
|
|
+ if (this.useSourceFormConfig.submitSuccessURL) {
|
|
|
|
+ location.href = this.useSourceFormConfig.submitSuccessURL
|
|
|
|
+ } else {
|
|
|
|
+ Toast(this.useSourceFormConfig.submitSuccessTip)
|
|
|
|
+ }
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
onSubmit (values) {
|
|
onSubmit (values) {
|
|
console.log(values)
|
|
console.log(values)
|
|
Toast.loading({
|
|
Toast.loading({
|
|
@@ -134,7 +277,7 @@ import $axios from "@/service/httpServer";
|
|
forbidClick: true
|
|
forbidClick: true
|
|
});
|
|
});
|
|
const params = Object.assign({
|
|
const params = Object.assign({
|
|
- source: this.sourceFormConfig.source,
|
|
|
|
|
|
+ source: this.useSourceFormConfig.source,
|
|
origin: location.href
|
|
origin: location.href
|
|
}, this.form, {
|
|
}, this.form, {
|
|
source_desc: this.form.source_desc === '其他' ? this.form.source_desc_temp : this.form.source_desc
|
|
source_desc: this.form.source_desc === '其他' ? this.form.source_desc_temp : this.form.source_desc
|
|
@@ -149,7 +292,7 @@ import $axios from "@/service/httpServer";
|
|
console.log('res', res)
|
|
console.log('res', res)
|
|
Toast.clear()
|
|
Toast.clear()
|
|
if (res.data) {
|
|
if (res.data) {
|
|
- Toast('提交成功')
|
|
|
|
|
|
+ this.submitSuccessCallback()
|
|
} else {
|
|
} else {
|
|
Toast(res.error_msg || '太火爆了,请稍后重试')
|
|
Toast(res.error_msg || '太火爆了,请稍后重试')
|
|
}
|
|
}
|
|
@@ -196,4 +339,39 @@ import $axios from "@/service/httpServer";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+.source-form-top-container {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.show-success-dialog-container {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+}
|
|
|
|
+.show-success-dialog-content-container {
|
|
|
|
+ max-width: 80%;
|
|
|
|
+ img {
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.icon-close-dialog {
|
|
|
|
+ color: #fff;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+}
|
|
|
|
+.source-form-tip-container {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ .source-form-content-container {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|