77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<!--收寄地址-->
|
||
<template>
|
||
<view class="boxBg">
|
||
<view class="addressCon">
|
||
<view class="item" @click="handleDate(1)">
|
||
<view class="sendIcon">寄</view>
|
||
<view class="address">
|
||
<view :class="mailCity.province ? 'active' : ''">
|
||
<view v-if="!mailCity.province">请选择寄件城市</view>
|
||
<view v-else>
|
||
<text>{{ mailCity.province }}</text>
|
||
<text>{{ mailCity.city }}</text>
|
||
<text>{{ mailCity.area }}</text>
|
||
</view>
|
||
</view>
|
||
<icon class="nextIcon"></icon>
|
||
</view>
|
||
<view class="line"></view>
|
||
</view>
|
||
<view class="item" @click="handleDate(2)">
|
||
<view class="receiveIcon">收</view>
|
||
<view class="address">
|
||
<view :class="consigneeCity.province ? 'active' : ''">
|
||
<view v-if="!consigneeCity.province">请选择收件城市</view>
|
||
<view v-else>
|
||
<text>{{ consigneeCity.province }}</text>
|
||
<text>{{ consigneeCity.city }}</text>
|
||
<text>{{ consigneeCity.area }}</text>
|
||
</view>
|
||
</view>
|
||
<icon class="nextIcon"></icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<CityPopup ref="city" :type="type" @getCity="getCity"></CityPopup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue";
|
||
// 接口pai
|
||
// 导入组件
|
||
// 城市弹层
|
||
import CityPopup from "@/components/uni-address/index.vue";
|
||
// ------定义变量------
|
||
const city = ref(); //定义子组件ref，获取子组件方法
|
||
const emit = defineEmits();
|
||
let type = ref(null); //触发的寄件还是收件：type=1 寄件;type=2 收件
|
||
let mailCity = ref({}); //寄件数据
|
||
let consigneeCity = ref({}); //收件数据
|
||
// ------定义方法------
|
||
// 地址弹层弹层
|
||
const handleDate = (val) => {
|
||
// type代表触发的寄件还是收件：type=1 寄件;type=2 收件
|
||
type.value = val;
|
||
city.value.handleOpen();
|
||
};
|
||
// 获取区县
|
||
const getCity = (obj) => {
|
||
if (type.value === 1) {
|
||
mailCity.value = obj;
|
||
} else {
|
||
consigneeCity.value = obj;
|
||
}
|
||
if (mailCity.value.areaId && consigneeCity.value.areaId) {
|
||
emit("handleCity", true);
|
||
}
|
||
};
|
||
//把数据、方法暴漏给父组件
|
||
defineExpose({
|
||
mailCity,
|
||
consigneeCity,
|
||
});
|
||
</script>
|
||
|
||
<style></style>
|