VAVABUY/components/address.vue

<template>
  <popup ref="popRef" :title="title" isClose class="address__popup">
    <template #content>
      <scroll-view class="form" scroll-y>
        <view class="form_item">
          <view class="item_label">
            <trans _t="收件人" />
          </view>
          <view class="item_value flex">
            <Input
              :placeholder="t('名')"
              border="surround"
              @focus="inputFocus"
              v-model="form.lastName"
            />
            <Input
              :placeholder="t('姓')"
              border="surround"
              @focus="inputFocus"
              v-model="form.firstName"
            />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="地区" />
          </view>
          <view class="item_value flex">
            <Select
              iconColor="#adb8cc"
              v-model:current="countryCurrent"
              :options="areaList"
              keyName="countryName"
              isTran
              class="country_select"
              @select="countryChange"
              ref="countryRef"
              @selectClick="() => provinceRef.close()"
            >
              <template #text>
                <view
                  class="select_label"
                  style="color: var(--inputText)"
                  v-if="form.country"
                >
                  {{ form.country }}
                </view>
                <view class="select_label" v-else>
                  <trans _t="国家" />
                </view>
              </template>
            </Select>
            <Select
              iconColor="#adb8cc"
              v-model:current="provinceCurrent"
              :options="provinceList"
              keyName="name"
              isTran
              ref="provinceRef"
              class="province_select"
              @select="provinceChange"
              @selectClick="() => countryRef.close()"
            >
              <template #text>
                <view
                  class="select_label"
                  style="color: var(--inputText)"
                  v-if="form.province"
                >
                  {{ form.province }}
                </view>
                <view class="select_label" v-else>
                  <trans _t="选择" />
                </view>
              </template>
            </Select>
            <Input border="surround" @focus="inputFocus" v-model="form.city" />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label">
            <trans _t="详细地址" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('输入公寓号码街道道路地址')"
              @focus="inputFocus"
              border="surround"
              v-model="form.address"
            />
          </view>
        </view>
        <!-- flex -->
        <view class="form_item">
          <view class="item_label">
            <trans _t="门号" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('如果没有门牌号可以输入')"
              @focus="inputFocus"
              border="surround"
              v-model="form.doorNumber"
            />
          </view>
        </view>
        <!-- flex -->
        <view class="form_item">
          <view class="item_label">
            <trans _t="邮政编码" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('邮政编码')"
              border="surround"
              @focus="inputFocus"
              v-model="form.zipCode"
            />
          </view>
        </view>
        <!-- flex -->
        <view class="form_item">
          <view class="item_label">
            <trans _t="电话号码" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('电话号码')"
              border="surround"
              @focus="inputFocus"
              v-model="form.phoneNo"
            />
          </view>
        </view>
        <!-- flex -->
        <view class="form_item">
          <view class="item_label _required">
            <trans _t="税号" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('税号')"
              border="surround"
              @focus="inputFocus"
              v-model="form.taxId"
            />
          </view>
        </view>
        <view class="form_item">
          <view class="item_label _required">
            <trans _t="地址标签" />
          </view>
          <view class="item_value">
            <Input
              :placeholder="t('地址标签')"
              border="surround"
              @focus="inputFocus"
              v-model="form.label"
            />
          </view>
          <view class="labels">
            <view
              class="labels_item"
              :class="form.label == label ? 'labels_active' : ''"
              v-for="(label, num) in labels"
              :key="num"
              @click="form.label = label"
            >
              <trans :_t="label" />
            </view>
          </view>
        </view>
        <view class="form_item flex" style="justify-content: space-between">
          <view class="item_label _required">
            <trans _t="默认地址" />
          </view>
          <view class="item_value" style="flex: none">
            <up-switch
              v-model="form.default"
              activeColor="var(--black)"
              inactiveColor="#dcdfe6"
            ></up-switch>
          </view>
        </view>
      </scroll-view>
    </template>
    <template #footer>
      <view class="submit_btn" @click="submit">
        <trans _t="确认" />
      </view>
    </template>
  </popup>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import popup from "./popup";
import Select from "./select";
import areaList from "@/utils/area";
import { t } from "@/locale";
import Input from "./input";
import { Toast } from "@/utils";
import { SHOP_ADDRESS_ADD } from "@/api";
import { useShopStore } from "@/store";

const useShop = useShopStore();
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const countryRef = ref(null);
const provinceRef = ref(null);
const countryCurrent = ref(0);
const provinceCurrent = ref(0);
const popRef = ref(null);
const title = ref("新增收货地址");
const form = reactive({
  id: "",
  firstName: "",
  lastName: "",
  country: "",
  province: "",
  city: "",
  address: "",
  doorNumber: "",
  zipCode: "",
  phoneNo: "",
  taxId: "",
  label: "",
  default: false,
});
const provinceList = ref([]);
const labels = [t("主页"), t("公司")];

const open = (item = {}) => {
  popRef.value && popRef.value.open();
  form.id = item.id;
  form.firstName = item.firstName || "";
  form.lastName = item.lastName || "";
  form.country = item.country || "";
  form.province = item.province || "";
  form.city = item.city || "";
  form.address = item.address || "";
  form.doorNumber = item.doorNumber || "";
  form.zipCode = item.zipCode || "";
  form.phoneNo = item.phoneNo || "";
  form.taxId = item.taxId || "";
  form.label = item.label || "";
  form.default = item.default ? true : false;
  if (JSON.stringify(item) == "{}") {
    title.value = "新增收货地址";
  } else {
    title.value = "编辑收货地址";
    const findIndex = areaList.findIndex(
      (a) => a.countryName === item.countryName
    );
    provinceList.value = findIndex == -1 ? [] : areaList[findIndex].regions;
  }
};
const close = () => {
  popRef.value && popRef.value.close();
};
const countryChange = (item) => {
  form.country = item.countryName;
  form.province = "";
  provinceList.value = item.regions;
  provinceRef.value && provinceRef.value.close();
};
const provinceChange = (item) => {
  form.province = item.name;
  countryRef.value && countryRef.value.close();
};

const inputFocus = () => {
  provinceRef.value && provinceRef.value.close();
  countryRef.value && countryRef.value.close();
};

const submit = () => {
  if (!form.firstName || !form.lastName) return Toast(t("收件人必须填写"));
  if (!form.country || !form.province || !form.city)
    return Toast(t("国家和州/省必须填写"));
  if (!form.address) return Toast(t("详细地址必须填写"));
  if (!form.doorNumber) return Toast(t("如果没有门牌号可以输入"));
  if (!form.zipCode) return Toast(t("邮政编码必须填写"));
  if (!form.phoneNo) return Toast(t("电话号码必须填写"));
  addressAdd();
};

const addressAdd = async () => {
  try {
    const res = await SHOP_ADDRESS_ADD({
      ...form,
      default: form.default === true ? 1 : 0,
    });
    nextTick(() => {
      useShop.setAddressList();
      close();
    });
  } catch (error) {
    Toast(error.msg);
    close();
  }
};

defineExpose({
  open,
  close,
});
</script>


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

.form {
  &_item {
    margin-top: 24rpx;

    &:first-child {
      margin-top: 0;
    }

    .item_label {
      font-weight: 700;
      color: var(--text);
      .size(28rpx);
      line-height: 60rpx;
      white-space: nowrap;
      padding-right: 24rpx;
      height: 64rpx;
      width: fit-content;
      position: relative;

      &::before {
        content: "*";
        color: #f56c6c;
        margin-right: 8rpx;
      }
    }

    ._required {
      &::before {
        content: "";
        margin-right: 0rpx;
      }
    }

    .item_value {
      column-gap: 24rpx;
      flex: 1;

      /deep/ .u-input {
        border-radius: 16rpx;
        padding: 0 24rpx !important;
        background-color: var(--bg);

        .u-input__content {
          display: unset;
        }
      }

      /deep/ .u-select {
        flex: 1;
        height: 32px;
        padding: 0 24rpx;
        border-radius: 16rpx;
        background-color: var(--bg);
        border-color: var(--borderColor) !important;
        box-shadow: 0 0 0 1px var(--borderColor) inset;

        .u-select__label {
          margin: 0;
          line-height: 32px;

          .select_label {
            flex: 1;
            color: #adb8cc;
            .size(28rpx);
            .ellipsis();
            width: 100%;
          }

          .u-select__options {
            width: 80vw;
          }
        }
      }

      .country_select,
      .province_select {
        /deep/ .u-select__options {
          width: 80vw;

          .u-select__options_item {
            .size(24rpx);
            height: 80rpx;
            line-height: 80rpx;
            padding: 0 64rpx;

            .u-select__item_text {
              color: var(--inputText);
            }
          }

          .active {
            .u-select__item_text {
              font-weight: 700;
              color: var(--black) !important;
            }
          }
        }
      }

      .province_select {
        /deep/ .u-select__options {
          // width: 300rpx;
        }
      }
    }

    .labels {
      margin-top: 24rpx;
      .ver();
      gap: 24rpx;

      &_item {
        border: 1px solid #7d8fb3;
        border-radius: 8rpx;
        color: #7d8fb3;
        padding: 0 28rpx;
        line-height: 64rpx;
        .size(24rpx);
      }

      .labels_active {
        background-color: var(--black);
        border: 1px solid var(--black);
        color: var(--light);
      }
    }
  }
}

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