VAVABUY/pages/address/components/addressModel.vue

<template>
  <view>
    <view class="address">
      <view
        class="address_item"
        :class="addressList.length ? '' : 'flex'"
        @click="addressClick"
      >
        <template v-if="addressList.length">
          <view class="_item">
            <view class="_item_top">
              <view class="_top_left">
                <view class="name"
                  >{{ selectItem.firstName }}&nbsp;{{
                    selectItem.lastName
                  }}</view
                >
                <view class="phone">{{ selectItem.phoneNo }}</view>
                <view class="code">{{ selectItem.zipCode }}</view>
              </view>
              <i class="icon-font icon-left"></i>
            </view>
            <view class="_item_middle">
              {{ selectItem.country }}&nbsp;{{ selectItem.province }},{{
                selectItem.city
              }},{{ selectItem.address }}
            </view>
            <view class="_item_bottom">
              <view class="default_btn" v-if="selectItem.default == 1">
                <trans _t="默认" />
              </view>
              <view class="label_btn" v-if="selectItem.label">{{
                selectItem.label
              }}</view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="address_empty">
            <trans _t="请选择地址" />

            <up-icon name="arrow-right"></up-icon>
          </view>
        </template>
      </view>
    </view>
    <popup title="请选择地址" isClose ref="popRef">
      <template #content>
        <view class="pop_cont">
          <view
            class="cont_list"
            v-for="(item, index) in addressList"
            :key="index"
            @click="listClick(item)"
          >
            <view class="_list_item">
              <view class="_item_top">
                <view class="_top_left">
                  <view class="name"
                    >{{ item.firstName }}&nbsp;{{ item.lastName }}</view
                  >
                  <view class="phone">{{ item.phoneNo }}</view>
                </view>
              </view>
              <view class="_item_middle">
                {{ item.country }}&nbsp;{{ item.province }},{{ item.city }},{{
                  item.address
                }}
              </view>
              <view class="_item_bottom">
                <view class="default_btn" v-if="item.default == 1">
                  <trans _t="默认" />
                </view>
                <view class="label_btn" v-if="item.label">{{
                  item.label
                }}</view>
              </view>
            </view>
            <view @click.stop="editAddress(item)">
              <i class="icon-font icon-edit"></i>
            </view>
          </view>
        </view>
      </template>
      <template #footer>
        <view class="footer_btn" @click="addressOpen">
          <trans _t="添加送货地址" />
        </view>
      </template>
    </popup>
    <Address ref="addressRef" />
  </view>
</template>

<script setup>
import { computed, ref, reactive, nextTick } from "vue";
import Popup from "@/components/popup.vue";
import { t } from "@/locale";
import { useShopStore } from "@/store";
import Address from "@/components/address";
import { onShow } from "@dcloudio/uni-app";

const emit = defineEmits(["confirm", "open", "close"]);

const popRef = ref(null);
const addressRef = ref(null);

const useShop = useShopStore();
const ids = ref([]);
const addressList = computed(() => {
  const list = useShop.getAddressList;
  const items = list.length && (list.find((item) => item.default == 1) || {});
  let obj = list.length && (JSON.stringify(items) === "{}" ? list[0] : items);
  ids.value = [obj.id || ""];
  return list;
});
const selectItem = computed(() => {
  let item = {};
  if (addressList.value.length) {
    item = addressList.value.find((item) => item.id == ids.value[0]) || {};
    getCheck(item);
    return item;
  }
  return item;
});

const getCheck = (item) => {
  emit("confirm", item || selectItem.value);
};
const form = reactive({
  id: "",
  express_name: "",
  express_no: "",
});
const open = () => {
  emit("open");
  popRef.value && popRef.value.open();
};

const close = () => {
  emit("close");
  popRef.value && popRef.value.close();
};
const addressClick = () => {
  popRef.value && popRef.value.open();
};
const listClick = (item) => {
  ids.value = [item.id];
  nextTick(() => {
    getCheck();
    popRef.value && popRef.value.close();
  });
};
const editAddress = (item) => {
  popRef.value && popRef.value.close();
  addressRef.value && addressRef.value.open(item);
};
const addressOpen = () => {
  popRef.value && popRef.value.close();
  addressRef.value && addressRef.value.open();
};

onShow(() => {
  nextTick(() => {
    useShop.setAddressList();
  });
});
defineExpose({ open, close });
</script>


<style lang="less" scoped>
@import url("@/style.less");

.address {
  margin-top: 24rpx;
  background: url("@/static/address_bg.png") no-repeat 50%;
  background-size: cover;
  padding: 2px;
  border-radius: 16rpx;

  &_item {
    padding: 24rpx 20rpx;
    background-color: var(--light);
    border-radius: 16rpx;
    min-height: 160rpx;

    .address_empty {
      height: inherit;
      flex: 1;
      .flex_position(space-between);
      color: var(--text-01);
      line-height: 60rpx;
      .size(28rpx);

      .icon-left {
        .size(36rpx);
        transform: rotate(180deg);
      }
    }

    ._item {
      overflow: hidden;

      &_top {
        .flex_position(space-between);
        padding-right: 30rpx;
        line-height: 60rpx;

        ._top_left {
          .ver();

          .name {
            .size(36rpx);
            font-weight: 700;
            color: var(--text);
          }

          .phone,
          .code {
            color: var(--text-01);
            margin-left: 30rpx;
            .size(28rpx);
            font-weight: 700;
          }
        }

        .icon-left {
          color: var(--text-01);
          transform: rotate(180deg);
          .size();
        }
      }

      &_middle {
        text-wrap: wrap;
        white-space: pre-wrap;
        word-wrap: break-word;
        .size(28rpx);
        color: var(--text-01);
        margin-top: 8rpx;
        line-height: 48rpx;
        margin-bottom: 12rpx;
      }

      &_bottom {
        .flex();
        flex-wrap: wrap;
        gap: 24rpx;

        .default_btn,
        .label_btn {
          padding: 8rpx 16rpx;
          .size(24rpx);
          border-radius: 8rpx;
        }

        .default_btn {
          color: var(--danger);
          background-color: #e62e2e1a;
        }

        .label_btn {
          background-color: #ff66331a;
          color: var(--primary);
        }
      }
    }
  }
}
.pop_cont {
  .cont_list {
    .ver();

    ._list_item {
      flex: 1;
      margin-left: 12rpx;

      ._item_top {
        line-height: 48rpx;

        ._top_left {
          .ver();
          color: var(--text);

          .name,
          .phone {
            .size(28rpx);
            font-weight: 700;
          }

          .phone {
            margin-left: 16rpx;
          }
        }
      }

      ._item_middle {
        color: var(--text-02);
        .size(24rpx);
        line-height: 40rpx;
        text-wrap: wrap;
        white-space: pre-wrap;
        word-wrap: break-word;
        margin-bottom: 12rpx;
        word-break: break-all;
      }

      ._item_bottom {
        .flex();
        flex-wrap: wrap;
        gap: 24rpx;

        .default_btn,
        .label_btn {
          padding: 8rpx 16rpx;
          .size(24rpx);
          border-radius: 8rpx;
        }

        .default_btn {
          color: var(--danger);
          background-color: #e62e2e1a;
        }

        .label_btn {
          background-color: #ff66331a;
          color: var(--primary);
        }
      }
    }

    .icon-edit {
      .size(36rpx);
      color: var(--primary);
    }
  }
}

.footer_btn {
  height: 38px;
  padding: 16rpx 30rpx;
  background-color: var(--black);
  color: var(--light);
  .flex_center();
  border-radius: 16rpx;
  .size(24rpx);
}
</style>