pension-vue/src/views/mine/addAddress.vue

<template>
  <div class="flex flex-col bg-[#F5F5F5] px-[30rpx] pt-[30rpx]">
    <nut-form class="flex-1 min-h-0 add-address-form">
      <div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx]">
        <div class="flex items-center">
          <nut-form-item class="flex-auto">
            <template #label>
              <span class="text-[32rpx] font-500 text-black">收货人</span>
            </template>
            <nut-input v-model="formData.name" placeholder="请输入姓名" type="text" input-align="left" />
          </nut-form-item>
          <nut-form-item>
            <nut-radio-group v-model="formData.gender" direction="horizontal">
              <nut-radio :label="item.id" v-for="(item, index) in gender" :key="index">
                <template #icon>
                  <div class="w-[36rpx] h-[36rpx] rounded-full border-solid border-[#999] border-[2rpx] mr-[10rpx]"></div>
                  <span class="text-[#999] text-[32rpx] font-500">{{ item.name }}</span>
                </template>
                <template #checkedIcon>
                  <div class="w-[36rpx] h-[36rpx] rounded-full bg-[#2bbfbc] flex items-center justify-center mr-[10rpx]">
                    <Check color="white" class="w-[32rpx] h-[32rpx]" />
                  </div>
                  <span class="text-[#28BEBB] text-[32rpx] font-500">{{ item.name }}</span>
                </template>
              </nut-radio>
            </nut-radio-group>
          </nut-form-item>
        </div>
        <nut-divider />
        <nut-form-item class="w-full!">
          <template #label>
            <span class="text-[32rpx] font-500 text-black">电话号码</span>
          </template>
          <nut-input v-model="formData.phone" placeholder="请输入电话号码" type="text" input-align="left" />
        </nut-form-item>
      </div>

      <div class="rounded-[20rpx] bg-white px-[30rpx] py-[44rpx] mt-[30rpx]">
        <nut-form-item class="w-full!" label-position="top" star-position="right">
          <template #label>
            <span class="text-[32rpx] font-500 text-black">收货地址</span>
          </template>
          <div class="flex items-center justify-between mt-[36rpx]">
            <div class="flex justify-center flex-col">
              <div class="text-[36rpx] font-600 text-[#000]">幸福小区幸福小区</div>
              <ul class="flex items-center text-[32rpx] text-[#666] font-400 mt-[20rpx]">
                <li>山东省</li>
                <li>-</li>
                <li>济南市</li>
                <li>-</li>
                <li>某某区</li>
              </ul>
            </div>
            <img src="/images/map/without-text-map-icon.png" alt="icon" class="w-[192rpx] h-[120rpx] object-cover" @click="toMap" />
          </div>
        </nut-form-item>
        <nut-divider />
        <nut-form-item class="w-full!">
          <template #label>
            <span class="text-[32rpx] font-500 text-black">详细地址</span>
          </template>
          <nut-input v-model="formData.phone" placeholder="详细地址，例1层101室1" type="text" input-align="left" />
        </nut-form-item>
      </div>

      <div class="rounded-[20rpx] bg-white px-[30rpx] py-[30rpx] mt-[30rpx]">
        <nut-form-item class="w-full!">
          <template #label>
            <div class="text-[32rpx] font-500 text-black flex items-center h-full">设为默认收货地址</div>
          </template>
          <div class="flex items-center justify-end">
            <nut-switch v-model="formData.isDefault" class="" active-color="#28BEBB"></nut-switch>
          </div>
        </nut-form-item>
      </div>

      <div class="flex flex-col mt-[120rpx]">
        <div class="rounded-[20rpx] bg-[#28BEBB] text-[44rpx] text-white font-600 flex items-center justify-center py-[28rpx]">保存地址</div>
        <div
          class="rounded-[20rpx] bg-white text-[44rpx] text-[#28BEBB] font-600 flex items-center justify-center py-[28rpx] border-[#28BEBB] border-[4rpx] border-solid mt-[38rpx]"
          @click="goBack">
          返回
        </div>
      </div>
    </nut-form>
  </div>
</template>

<script lang="ts" setup>
  import { Check } from "lucide-vue-next";
  import { useRouter } from "vue-router";

  const router = useRouter();
  const formData = ref({
    name: "",
    gender: 1,
    phone: "",
    isDefault: false,
  });

  const gender = [
    { id: 1, name: "先生" },
    { id: 2, name: "女士" },
  ];

  const toMap = () => {
    router.push({ path: "/location/map" });
  };

  const goBack = () => {
    router.back();
  };
</script>

<style lang="scss" scoped>
  .nut-radio-group .nut-radio {
    margin-bottom: 0;
    margin-right: 0;
    display: flex;
  }
  .nut-radio-group {
    display: flex;
  }
  :deep(.nut-cell-group__wrap) {
    margin: 0;
    display: contents;
  }

  .add-address-form {
    --nut-cell-padding: 0 0;
    --nut-divider-margin: 20px 0;

    --nut-divider-text-color: #f5f5f5;
    --nut-cell-after-border-bottom: transparent;
    --nut-switch-height: 30px;
    --nut-switch-width: 54px;
    --nut-switch-inside-width: 26px;
    --nut-switch-inside-height: 26px;
    --nut-switch-inside-open-transform: translateX(100%);
    --nut-switch-inside-close-transform: translateX(10%);

    --nut-form-item-label-width: max-content;
  }
</style>