1 line
6.7 KiB
Plaintext
1 line
6.7 KiB
Plaintext
|
{"version":3,"file":"AddAddress.js","sources":["../../../../../../src/pages/address/components/AddAddress.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9wYWdlcy9hZGRyZXNzL2NvbXBvbmVudHMvQWRkQWRkcmVzcy52dWU"],"sourcesContent":["<template>\r\n <view class=\"add-address\">\r\n <wd-form ref=\"addressForm\">\r\n <wd-input label=\"姓名\" v-model=\"address.name\" required />\r\n <wd-input label=\"电话\" v-model=\"address.phone\" required type=\"tel\" />\r\n\r\n <!-- 使用 WotDesign 的选择器 -->\r\n <wd-picker\r\n :columns=\"typeOptions\"\r\n label=\"地址类型\"\r\n v-model=\"address.type\"\r\n @confirm=\"handleTypeChange\"\r\n />\r\n\r\n <!-- 如果选择了自定义类型，显示输入框 -->\r\n <wd-input v-if=\"isCustomType\" label=\"自定义类型\" v-model=\"address.customType\" required />\r\n\r\n <wd-col-picker\r\n label=\"选择地址\"\r\n v-model=\"value\"\r\n :columns=\"area\"\r\n :column-change=\"columnChange\"\r\n :display-format=\"displayFormat\"\r\n @confirm=\"handleConfirm\"\r\n ></wd-col-picker>\r\n <view\r\n style=\"width: 100%; padding-left: 15px; color: #bebebe\"\r\n v-if=\"address.address.length && address.address && !value.length\"\r\n >\r\n 当前地址：{{ address.address }}\r\n </view>\r\n <wd-input label=\"详细地址\" v-model=\"address.detailAddress\" required />\r\n <button class=\"add-address-button\" type=\"primary\" @click=\"submitAddress\">保存</button>\r\n </wd-form>\r\n </view>\r\n</template>\r\n<script setup>\r\nimport { ref, watch } from 'vue'\r\nimport { useColPickerData } from '@/hooks/useColPickerData'\r\n\r\nconst { colPickerData, findChildrenByCode } = useColPickerData()\r\n\r\nconst value = ref([])\r\nconst props = defineProps({\r\n initialAddress: {\r\n type: Object,\r\n default: () => ({\r\n name: '',\r\n phone: '',\r\n address: '',\r\n detailAddress: '',\r\n type: '',\r\n customType: '',\r\n }),\r\n },\r\n})\r\n\r\nconst initArea = ref([])\r\nconst area = ref([\r\n colPickerData.map((item) => {\r\n return {\r\n value: item.value,\r\n label: item.text,\r\n }\r\n }),\r\n])\r\n\r\nconst typeOptions = ref(['家', '公司', '自定义'])\r\n\r\nconst isCustomType = ref(false)\r\n\r\nconst columnChange = ({ selectedItem, resolve, finish }) => {\r\n const areaData = findChildrenByCode(colPickerData, selectedItem.value)\r\n if (areaData && areaData.length) {\r\n resolve(areaData.map((item) => ({ value: item.value, label: item.text })))\r\n } else {\r\n finish()\r\n }\r\n}\r\n\r\nconst displayFormat = (selectedItems) => {\r\n return selectedItems.map((v) => v.label).join('-')\r\n}\r\n\r\nfunction handleConfirm({ value, selectedItems }) {\r\n address.value.address = selectedItems.map((v) => v.label).join('-')\r\n console.log(address.value.address)\r\n}\r\n\r\nfunction handleTypeChange({ value }) {\r\n isCustomType.value = value === '自定义'\r\n if (!isCustomType.value) {\r\n address.value.customType = ''\r\n }\r\n}\r\n\r\nconst emit = defineEmits(['save-address'])\r\nconst address = ref({ ...props.initialAddress })\r\n\r\nconst initAddress = () => {\r\n console.log('ddd', area.value)\r\n const initAddress = props.initialAddress.address.split('-')\r\n const pcode = area.value[0].filter((area) => area.label == initAddress[0])\r\n const areaData = findChildrenByCode(colPickerData, pcode[0].value)\r\n const ccode = areaData.filter((area) => area.text == initAddress[1])\r\n const areaDataTwo = findChildrenByCode(colPickerData, ccode[0].value)\r\n const dcode = areaDataTwo.filter((area) => area.text == initAddress[2])\r\n value.value = [pcode[0].value, ccode[0].value, dcode[0].value]\r\n}\r\n\r\nwatch(\r\n () => props.initialAddress,\r\n (newVal) => {\r\n address.value = { ...newVal }\r\n isCustomType.value = newVal.type === '自定义'\r\n },\r\n)\r\n\r\nconst submitAddress = () => {\r\n
|