h5-editor/client/plugins/SourceForm/src/index.vue

<!--test.vue-->
<template>
  <div>
    <van-form
        class="source-form"
        @submit="onSubmit"
        :style="{
        'background-color': sourceFormConfig.background
      }"
    >
      <van-field
          v-if="sourceFormConfig.company"
          v-model.trim="form.company"
          required
          name="公司名称"
          label="公司名称"
          placeholder="请输入准确的公司名称"
      />
      <van-field
          v-if="sourceFormConfig.name"
          v-model.trim="form.name"
          required
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
      />
      <van-field
          v-if="sourceFormConfig.phone"
          v-model.trim="form.phone"
          required
          name="手机号"
          label="手机号"
          placeholder="请输入准确的手机号"
      />
      <van-field name="radio" required label="你希望获得哪个行业的报告" v-if="sourceFormConfig.source_desc">
        <template #input>
          <div class="custom-radio-type">
            <van-radio-group
                v-model="form.source_desc"
            >
              <van-radio
                  v-for="item in sourceFormConfig.sourceOptions"
                  :name="item"
                  :key="item"
              >
                <div class="other-input-box" v-if="form.source_desc === '其他' && item === '其他'">
                  <span>{{item}}</span>
                  <van-field
                      v-model.trim="form.source_desc_temp"
                      placeholder="请输入行业"
                  />
                </div>
                <span v-else>{{item}}</span>
              </van-radio>
            </van-radio-group>

          </div>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block :type="btnType" :size="size" native-type="submit">{{text}}</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, Button, Radio, RadioGroup } from 'vant';
import $axios from "@/service/httpServer";

	export default {
    name: 'DsSourceForm',
    components: {
        [Form.name]: Form,
        [Field.name]: Field,
        [Radio.name]: Radio,
        [RadioGroup.name]: RadioGroup,
        [Button.name]: Button
    },
    data() {
      return {
        form: {
          name: '',
          phone: '',
          company: '',
          source_desc: '',
          source_desc_temp: ''
        }
      }
    },
		props: {
      api: {
        type: String,
        default: '/salesLeads/collectInfo'
      },
      btnType:{
        type:String,
        default:'info'
      },
      text: {
        type: String,
        default: '提 交'
      },
      size:{
        type:String,
        default:'large'
      },
      sourceFormConfig: {
        type:Object,
        default: ()=>({
          background: 'transparent',
          source: 'default-source-h5',
          name: true,
          phone: true,
          company: true,
          source_desc: true,
          sourceOptions: [
              '建筑工程',
              '信息技术',
              '弱电安防',
              '医疗卫生',
              '服务采购',
              '其他'
          ]
        })
      }
		},
    methods: {
      onSubmit (values) {
        console.log(values)
        this.$toast.loading({
          duration: 0,
          forbidClick: true
        });
        const params = Object.assign({
          source: this.form.source_desc === '其他' ? this.form.source_desc_temp : this.form.source_desc,
          origin: location.href
        }, this.form)

        console.log('source-params', params)
        $axios.post(this.api, JSON.stringify(params), {
          headers: {
            'Content-Type': 'application/json;charset=utf-8'
          }
        }).then(res => {
          console.log('res', res)
          this.$toast.clear()
          this.$toast('提交成功，我们会尽快联系您~')
        }).catch(() => {
          this.$toast.clear()
          this.$toast('太火爆了，请稍后重试')
        })
      }
    }
	}
</script>

<style lang="scss" scoped>
.other-input-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  span {
    flex-shrink: 0;
  }
}
.custom-radio-type {
  display: flex;
  flex-direction: column;
}
.source-form {

  width: 100%;
  height: 100%;

  ::v-deep {
    .van-cell {
      flex-direction: column;
      background-color: inherit;
    }
    .van-field__label {
      width: 100%;
    }
    .van-radio {
      height: 44px;
    }
  }
}
</style>