【前端vue开发】vue开发输入姓名，电话，公司表单提交组件

Z时代
2024-01-10
分类：综合
vue
<template>
  <div >
    <div>
      <span>您的姓名：</span>
      <input v-model="username" type="text" placeholder="请输入您的姓名" >
    </div>
    <div>
      <span >手机号码：</span>
      <input v-model="phone" type="number" maxlength="11" placeholder="请输入您的手机号码">
    </div>
    <div>
      <span>所在保险公司：</span>
      <select v-model="selectedCompany" v-show="this.selectedCompany !== ''" >
        <option value="-1">请选择</option>
        <option value="">自定义输入</option>
        <option v-for="option in companyOptions" v-bind:value="option.id">
          {{ option.value }}
        </option>
      </select>
      <input v-model="selectedCustomCompany" v-show="this.selectedCompany === ''" type="text" maxlength="12" placeholder="请输入公司名称">
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import vcookie from 'vue-cookie'
import axios from 'axios'
import { companies } from '../data/companies'
Vue.use(vcookie)
export default {
  name: 'PartiInfo',
  data: function () {
    return {
      companyOptions: companies
    }
  },
  computed: {
    username: {
      get: function () {
        return this.$store.state.username
      },
      set: function (newValue) {
        this.$store.commit('updateUsername', newValue)
      }
    },
    phone: {
      get: function () {
        return this.$store.state.phone
      },
      set: function (newValue) {
        this.$store.commit('updatePhone', newValue)
      }
    },
    selectedCompany: {
      get: function () {
        return this.$store.state.company
      },
      set: function (newValue) {
        this.$store.commit('updateCompanyName', '')
        for (var i = 0; i < this.companyOptions.length; i++) {
          if (this.companyOptions[i].id === newValue) {
            this.$store.commit('updateCompanyName', this.companyOptions[i].value)
          }
        }
        this.$store.commit('updateCompany', newValue)
      }
    },
    selectedCustomCompany: {
      get: function () {
        return this.$store.state.companyName
      },
      set: function (newValue) {
        this.$store.commit('updateCompanyName', newValue)
      }
    }
  },
  mounted: function () {
    var vm = this
    var uuid = this.$cookie.get('api_uuid')
    var token = this.$cookie.get('api_token')
    axios.defaults.headers.common['api_token'] = token
    // 'eff7756789804c179e9efb0cbb48ecca'
    axios.get(vm.apiUrl + '/api/v1/activity/user/uuid/' + uuid)
    .then(function (response) {
      // 初始化自定义保险公司
      var notExist = true
      for (var i = 0; i < vm.companyOptions.length; i++) {
        if (vm.companyOptions[i].id === response.data.response.companyCode || vm.companyOptions[i].value === response.data.response.companyName) {
          notExist = false
        }
      }
      if (notExist) {
        vm.companyOptions.push({id: response.data.response.companyCode, value: response.data.response.companyName})
      }
      // 初始化数据
      vm.$store.commit('updateUsername', response.data.response.realName)
      vm.$store.commit('updatePhone', response.data.response.mobile)
      if (response.data.response.companyCode && response.data.response.companyCode !== '') {
        vm.$store.commit('updateCompany', response.data.response.companyCode)
      }
      if (response.data.response.companyName && response.data.response.companyName !== '') {
        vm.$store.commit('updateCompanyName', response.data.response.companyName)
      }
    }).catch(function (error) {
      console.log('Error! Could not reach the API. ' + error)
    })
  }
}
</script>