提交 a395cf86 authored 作者: 王鹏飞's avatar 王鹏飞

chore: 省市地区修改为选择框

上级 d8e76a3a
<template>
<el-select v-bind="$attrs" v-on="$listeners" clearable no-data-text="请先选择省份">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
import { areaList } from '@vant/area-data'
const json2Array = function(data) {
return Object.keys(data).map(code => ({ code, label: data[code], value: data[code] }))
}
export default {
props: {
parentValue: { type: String, default: '' },
isCity: { type: Boolean, default: false }
},
computed: {
options() {
return this.parentValue || this.isCity ? this.cityList : this.provinceList
},
provinceList() {
return json2Array(areaList.province_list).sort((a, b) => {
return a.label.localeCompare(b.label)
})
},
cityList() {
return json2Array(areaList.city_list)
.filter(item => {
const provinceValueCode = this.provinceList.find(province => province.label === this.parentValue)?.code || ''
return item.code.slice(0, 2) === provinceValueCode.slice(0, 2)
})
.sort((a, b) => {
return a.label.localeCompare(b.label)
})
},
treeList() {
this.provinceList.map(item => {
const children = json2Array(areaList.city_list)
.filter(item2 => {
return item2.code.slice(0, 2) === item.code.slice(0, 2)
})
.sort((a, b) => {
return a.label.localeCompare(b.label)
})
return { ...item, children }
})
}
}
}
</script>
......@@ -35,7 +35,7 @@ export default function(_this) {
{ ID_CARD_FRONT: [], ID_CARD_BACK: [], HK_ID_CARD: [], PASSPORT: [], OTHER_ID_CARD_PHOTO: [] }
)
basicInfo.id_type = basicInfo.id_type === '护照' ? '中国护照' : basicInfo.id_type
return Object.assign({}, basicInfo, attachment)
return Object.assign({ address_province: '', address_city: '' }, basicInfo, attachment)
}
},
update: {
......@@ -201,7 +201,8 @@ export default function(_this) {
label: '英文名',
model: 'real_name_en',
attrs: { placeholder: '请输入英文名' },
rules: [{ required: true, message: '请输入英文名', trigger: 'blur' }]
rules: [{ required: true, message: '请输入英文名', trigger: 'blur' }],
prependSlotName: 'form-name-prepend'
},
{
type: 'v-radio',
......@@ -233,14 +234,42 @@ export default function(_this) {
label: '居住省',
model: 'address_province',
attrs: { placeholder: '请输入居住省' },
rules: [{ required: true, message: '请输入居住省', trigger: 'blur' }]
rules: [{ required: true, message: '请输入居住省', trigger: 'blur' }],
isShow() {
return !_this.isNew
}
},
{
type: 'v-input',
label: '居住市',
model: 'address_city',
attrs: { placeholder: '请输入居住市' },
rules: [{ required: true, message: '请输入居住市', trigger: 'blur' }]
rules: [{ required: true, message: '请输入居住市', trigger: 'blur' }],
isShow() {
return !_this.isNew
}
},
{
type: 'v-input',
label: '居住省',
model: 'address_province',
attrs: { placeholder: '请选择居住省' },
rules: [{ required: true, message: '请选择居住省', trigger: 'blur' }],
slotName: 'form-province',
isShow() {
return _this.isNew
}
},
{
type: 'v-input',
label: '居住市',
model: 'address_city',
attrs: { placeholder: '请选择居住市' },
rules: [{ required: true, message: '请选择居住市', trigger: 'blur' }],
slotName: 'form-city',
isShow() {
return _this.isNew
}
},
// {
// type: 'city-v-select',
......
......@@ -21,6 +21,29 @@
<template #content v-if="currentActive === 'application_pay'">
<app-pay />
</template>
<template #form-name-prepend>
<el-popover trigger="hover">
<div>例:张文武<br />英文名:Wenwu Zhang</div>
<i class="e-icon el-icon-info" slot="reference" style="position:absolute;left:-18px;color:blue;"></i>
</el-popover>
</template>
<template #form-province="{form}">
<v-area
v-model="form.address_province"
placeholder="请选择居住省"
style="width: 300px;"
@change="form.address_city = ''"
/>
</template>
<template #form-city="{form}">
<v-area
:parentValue="form.address_province"
isCity
v-model="form.address_city"
placeholder="请选择居住市"
style="width: 300px;"
/>
</template>
</vue-form>
<el-dialog title="预览全部" :visible.sync="dialogVisible" width="790px" class="dialog-preview">
<app-preview :hasEdit="true" @edit="handlePreviewEdit" v-if="dialogVisible" />
......@@ -35,11 +58,12 @@ import getMenu from './form'
import AppPay from './pay.vue'
import AppPreview from './preview.vue'
import AppComplete from './complete.vue'
import VArea from './components/VArea.vue'
import * as api from '@/api/my'
export default {
components: { AppLayout, AppPay, AppPreview, AppComplete },
components: { AppLayout, AppPay, AppPreview, AppComplete, VArea },
data() {
const menus = getMenu(this)
return {
......@@ -64,6 +88,11 @@ export default {
computed: {
visible() {
return this.currentActive !== 'application_info' || this.tabActive !== 'application_info_first'
},
isNew() {
return this.detail?.material?.created_time
? new Date(this.detail?.material?.created_time).getTime() > new Date('2022-06-28').getTime()
: true
}
},
methods: {
......
......@@ -8,7 +8,8 @@
"name": "project-pc",
"version": "1.0.0",
"dependencies": {
"@ezijing/vue-form": "^2.2.11",
"@ezijing/vue-form": "^2.3.12",
"@vant/area-data": "^1.3.1",
"axios": "^0.21.1",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
......@@ -1010,9 +1011,9 @@
}
},
"node_modules/@ezijing/vue-form": {
"version": "2.2.11",
"resolved": "https://registry.npmjs.org/@ezijing/vue-form/-/vue-form-2.2.11.tgz",
"integrity": "sha512-nHAhcA8I1XCNtwCjENHOSWaN86tZRr2jj00lRdie/lLq/BylvpZWkmhJ2Dq1ZVEzT7DmwyKPRsR1MlXyhd+cuw==",
"version": "2.3.12",
"resolved": "https://registry.npmjs.org/@ezijing/vue-form/-/vue-form-2.3.12.tgz",
"integrity": "sha512-qmMqfkqQL2+abSAiD4+GEOGQJOmKeGyk45pSBIhNJQ580SMTE97W+db5peUI710zs+Qst/Y5ypRsvWhwgM6d5g==",
"dependencies": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2",
......@@ -2079,6 +2080,11 @@
"node": ">=0.10.0"
}
},
"node_modules/@vant/area-data": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@vant/area-data/-/area-data-1.3.1.tgz",
"integrity": "sha512-xji2kfVBXzFYmHAJNbhYjiRJ4GnN+enbTmtx6FnpTyxs9sUcFtS11BZ23hYCGuj4s02gXyrzUBTXGqhX5IKHIw=="
},
"node_modules/@vant/icons": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
......@@ -13723,9 +13729,9 @@
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
},
"@ezijing/vue-form": {
"version": "2.2.11",
"resolved": "https://registry.npmjs.org/@ezijing/vue-form/-/vue-form-2.2.11.tgz",
"integrity": "sha512-nHAhcA8I1XCNtwCjENHOSWaN86tZRr2jj00lRdie/lLq/BylvpZWkmhJ2Dq1ZVEzT7DmwyKPRsR1MlXyhd+cuw==",
"version": "2.3.12",
"resolved": "https://registry.npmjs.org/@ezijing/vue-form/-/vue-form-2.3.12.tgz",
"integrity": "sha512-qmMqfkqQL2+abSAiD4+GEOGQJOmKeGyk45pSBIhNJQ580SMTE97W+db5peUI710zs+Qst/Y5ypRsvWhwgM6d5g==",
"requires": {
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2",
......@@ -14638,6 +14644,11 @@
}
}
},
"@vant/area-data": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@vant/area-data/-/area-data-1.3.1.tgz",
"integrity": "sha512-xji2kfVBXzFYmHAJNbhYjiRJ4GnN+enbTmtx6FnpTyxs9sUcFtS11BZ23hYCGuj4s02gXyrzUBTXGqhX5IKHIw=="
},
"@vant/icons": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
......
......@@ -10,7 +10,8 @@
"generate": "nuxt generate"
},
"dependencies": {
"@ezijing/vue-form": "^2.2.11",
"@ezijing/vue-form": "^2.3.12",
"@vant/area-data": "^1.3.1",
"axios": "^0.21.1",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论