分析下面代码中，粘贴完整地址后，不能调用recognizeAddress函数的原因，并解决问题
<!-- -->
<template>
<div>
<div class="bg-white py-4 flex justify-end">
<q-btn color="info" size="sm" outline padding="xs lg" @click="addItem">新增地址</q-btn>
</div>
<j-markup-table
bordered
:columns="columns"
:rows="list"
:total="total"
:pages="pages"
@pagesChange="getItem"
size="small">
<template #custom="{ row }">
<q-btn size="sm" flat color="minor" label="选择" @click="selectAddress(row)" v-if="select" />
<q-btn
size="sm"
flat
color="minor"
label="设为默认"
v-else-if="row.defaultFlag != 10"
@click="setDefault(row.id)" />
<q-btn size="sm" flat color="minor" label="修改" @click="setItem(row)" />
<q-btn size="sm" flat color="red" label="删除" @click="delItem(row.id)" />
</template>
</j-markup-table>
<j-dialog v-model="isShow" label="新增/编辑地址" cancel="取消" confirm="确定" @ok="sendForm">
<!-- <el-button
type="text"
size="small"
@click="recognizeAddress()"
>
识别地址
</el-button> -->
<j-form-auto :config="config" v-model="form" label-width="125px" size="small" ref="form">
<template #custom="{ item }">
<el-form-item :label="item.label + ':'">
<j-address
:value="addForm"
class="!grid !grid-cols-3 [&_.el-select]:block"
@change="onChangeArea"></j-address>
</el-form-item>
</template>
</j-form-auto>
</j-dialog>
</div>
</template>
<script>
import JAddress from '../j-address.vue'
import jFormAuto from '../j-form-auto.vue'
// import引入的组件需要注入到对象中才能使用
export default {
components: { jFormAuto, JAddress },
props: {
// 地址类型
addressType: {
type: [String, Number],
default: '10',
},
// 是否开启选择
select: {
type: Boolean,
default: false,
},
},
data() {
// 这里存放数据
return {
isShow: false,
total: 0,
pages: {
pageNum: 1,
pageSize: 10,
},
form: {
city: '',
cityCode: '',
county: '',
countyCode: '',
nation: '',
nationCode: '',
province: '',
provinceCode: '',
},
addForm: {},
config: [
{ label: '所在地址', name: 'custom', required: true },
{ hidden: true, name: 'city', required: true, label: '城市' },
{ hidden: true, name: 'county', required: true, label: '区/县' },
{ hidden: true, name: 'nation', required: true, label: '国家' },
{ hidden: true, name: 'province', required: true, label: '省份' },
{
label: '地址标签',
name: 'addressLabel',
type: 'radio-button',
options: [
{ label: '家', value: 10 },
{ label: '公司', value: 20 },
],
},
{ label: '街道地址', name: 'street', type: 'input', attrs: { type: 'textarea' ,placeholder: "粘贴完整地址可自动识别",onPaste: (e) => this.handleAddressPaste(e)}, required: true },
{ label: '邮政编码', name: 'postalCode', type: 'number' },
{ label: '收货人姓名', name: 'contactsName', type: 'input', required: true },
{
label: '收货人手机号',
name: 'contactsPhone',
type: 'phone',
rules: [{ type: 'phone' }],
required: true,
},
{
label: '',
name: 'defaultFlag',
type: 'checkbox',
attrs: { 'true-label': 10, 'false-label': 20, name: '是否设置成默认地址' },
},
],
list: [],
columns: [
{ label: '联系人', name: 'contactsName' },
{ label: '联系人手机号', name: 'contactsPhone' },
{ label: '详细地址', name: 'fullAddres' },
{ label: '是否默认', name: 'defaultFlag', custom: val => (val == 10 ? '是' : '否') },
{ label: '标签', name: 'addressLabel', custom: val => (!val || val == 10 ? '家' : '公司') },
{ label: '操作', name: 'custom', width: '230px' },
],
}
},
// 监听属性 类似于data概念
computed: {
userInfo() {
return this.$store.state.userInfo
},
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getItem()
},
watch: {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
// 方法集合
methods: {
// 新增方法：处理地址粘贴事件
handleAddressPaste(event) {
const pastedText = event.clipboardData.getData('text');
setTimeout(() => {
if (pastedText) {
this.recognizeAddress(pastedText);
}
}, 10);
},
// 修改方法：支持传入地址参数
recognizeAddress(address) {
this.apiPost('/bbb/pc/userCenter/stockAddress/recognizeAddress', { address }).then(res => {
if (res.code == 200) {
const data = res.data;
// 解析并填充地址数据
this.fillAddressForm(data);
}
});
},
// 新增方法：填充识别结果到表单
// 修改方法：使用 Vue.set 确保响应式更新
fillAddressForm(data) {
const result = data?.content?.result || {};
// 创建更新对象
const updates = {
province: result.province,
provinceCode: result.provinceCode,
city: result.city,
cityCode: result.cityCode,
county: result.county,
countyCode: result.countyCode,
street: result.street || result.detail || ''
};
// 响应式更新表单字段
Object.keys(updates).forEach(key => {
if (updates[key]) {
this.$set(this.form, key, updates[key]);
}
});
// 更新地址选择组件
this.addForm = { ...this.addForm, ...{
province: result.province,
provinceCode: result.provinceCode,
city: result.city,
cityCode: result.cityCode,
county: result.county,
countyCode: result.countyCode
}};
this.$message.success('地址识别成功');
},
selectAddress(row) {
this.$emit('change', row);
this.$message.success('地址选择成功'); // 添加成功提示
},
addItem() {
this.isShow = true
this.resetData('form')
const address = { ...this.userInfo.extendInfo }
Object.keys(address).forEach(ele => {
Object.keys(this.form).forEach(item => {
if (item == ele + 'Code') {
this.addForm[item] = address[ele]
}
if (item + 'Text' == ele) {
this.addForm[item] = address[ele]
}
})
})
},
sendForm() {
this.$refs.form.submit().then(data => {
const form = Object.assign({}, this.form, data)
if (form.id) {
this.apiPost(`/bbb/pc/userCenter/stockAddress/updateStockAddress/${form.id}`, {
...form,
bizType: this.addressType,
}).then(res => {
if (res.code == 200) {
this.$message.success('地址修改成功')
this.resetData('pages')
this.isShow = !this.isShow
}
})
} else {
this.apiPost(`/bbb/pc/userCenter/stockAddress/addStockAddress/${this.addressType}`, {
...form,
}).then(res => {
if (res.code == 200) {
this.$message.success('地址新增成功')
this.resetData('pages')
this.isShow = !this.isShow
}
})
}
})
},
getItem() {
this.apiGet(`/bbb/pc/userCenter/stockAddress/pageList/${this.addressType}`, { ...this.pages }).then(res => {
if (res.code == 200) {
this.list = res.data.content
this.total = res.data.total
}
})
},
setItem(row) {
this.isShow = true
this.$nextTick(() => {
this.form = { ...row }
this.addForm = { ...row }
})
},
setDefault(id) {
this.apiPost('/bbb/pc/userCenter/stockAddress/setDefault', { addressId: id }).then(res => {
if (res.code == 200) {
this.getItem()
this.$message.success('设置成功')
}
})
},
delItem(id) {
this.$q
.dialog({
title: '提示',
message: '确定要删除此地址?',
cancel: '取消',
ok: '确定',
})
.onOk(() => {
this.apiPost('bbbUserCenterStockAddressDelAll', { idList: [id] }).then(res => {
if (res.code == 200) {
this.getItem()
this.$message.success('删除成功')
}
})
})
},
onChangeArea(e) {
let form = { ...this.form }
form = Object.assign({}, form, e)
this.form = Object.assign({}, form, e)
},
},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
博客提及小程序中$nexttick相关内容，$nexttick在小程序开发里是重要概念，能处理特定场景下的渲染问题，对小程序功能实现和性能优化有一定作用。
扫一扫
1160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
