<template> <div id="parti-info"> <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>