menduner/src/views/mall/components/details/order/addressSelection.vue

<!-- 下单界面，收货地址 or 自提门店的选择组件 -->
<template>
  <div>
    <v-card class="allAddress" elevation="1" >
      <div class="d-flex justify-space-between align-center">
        <div
          class="address py-4 px-5"
          v-if="state.deliveryType === 1"
        >
          <div class="addressCon" v-if="state.addressInfo.name">
            <div class="name d-flex"
              >{{ state.addressInfo.name }}
              <div class="phone ml-3">{{ state.addressInfo.mobile }}</div>
            </div>
            <div class="d-flex mt-1">
              <div class="default font-color mr-3" v-if="state.addressInfo.defaultStatus">[默认]</div>
              <div class="line2">
                {{ state.addressInfo.areaName }} {{ state.addressInfo.detailAddress }}
              </div>
            </div>
          </div>
          <div class="addressCon" v-else>
            <div class="setaddress">设置收货地址</div>
          </div>
          <div class="iconfont">
            <div class="ss-rest-button">
              <div class="_icon-forward" />
            </div>
          </div>
        </div>
        <div class="mx-1">
          <v-btn color="primary" variant="text" @click="onSelectAddress">切换</v-btn>
        </div>
      </div>
    </v-card>
    <CtDialog :visible="selectAddress" titleClass="text-h6" :footer="true" :widthType="1" title="修改收货地址" @submit="handleSubmit" @close="selectAddress = false">
      <div style="min-height: 60vh;">
        <addressPage ref="addressPageRef" showSelect single returnObject></addressPage>
      </div>
    </CtDialog>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { isEmpty1 } from '@/utils/is'
  import addressPage from '@/views/mall/user/address'
  import Snackbar from '@/plugins/snackbar'
  const props = defineProps({
    modelValue: {
      type: Object,
      default() {},
    },
  });
  const emits = defineEmits(['update:modelValue']);

  // computed 解决父子组件双向数据同步
  const state = computed({
    get() {
      return new Proxy(props.modelValue, {
        set(obj, name, val) {
          emits('update:modelValue', {
            ...obj,
            [name]: val,
          });
          return true;
        },
      });
    },
    set(val) {
      emits('update:modelValue', val);
    },
  });

  const selectAddress = ref(false)
  // 选择地址
  function onSelectAddress() {
    selectAddress.value = true
  }
  
  const addressPageRef = ref()
  const handleSubmit = () => {
    const selected = addressPageRef.value?.getSelected() || []
    if (!selected?.length) return Snackbar.warning('请选择收货地址')
    changeConsignee(selected[0])
    selectAddress.value = false
  }

  // 更改收货人地址&计算订单信息
  async function changeConsignee(addressInfo = {}) {
    if (!isEmpty1(addressInfo)) {
      if (state.value.deliveryType === 1) {
        state.value.addressInfo = addressInfo;
      }
      if (state.value.deliveryType === 2) {
        state.value.pickUpInfo = addressInfo;
      }
    }
  }

</script>

<style scoped lang="scss">
  .allAddress .font-color {
    color: #e93323 !important;
  }

  .address .addressCon .name {
    font-size: 16px;
    color: #282828;
    font-weight: bold;
    // margin-bottom: 10px;
  }
</style>