zhaoma/src/components/Address.vue

<template>
  <ModalTransition :show="show">
    <div class="address-wrapper">
      <div class="address-title">收货地址填写</div>
      <div class="address-content">
        <div class="address-item">
          <div class="address-item-label">收货人</div>
          <input type="text" class="i-name" v-model="name" placeholder="请填写收货人姓名" />
        </div>
        <div class="address-item">
          <div class="address-item-label">联系方式</div>
          <input type="number" class="i-phone" v-model="phone" placeholder="请填写手机号码" />
        </div>
        <div class="address-item">
          <div class="address-item-label">所在地区</div>
          <div class="address-area" @click="changeArea">{{ area ? area : '请选择地理位置' }}</div>
        </div>
        <div class="address-item address-textarea">
          <div class="address-item-label">详细地址</div>
          <textarea placeholder="请填写详细地址" v-model="address"></textarea>
        </div>
      </div>
      <div class="btn-submit" :class="{ disable: btnDisableClass }" @click="handleSubmit">保存</div>
      <div class="address-close" @click="$emit('addressClose')"></div>
    </div>
  </ModalTransition>
</template>

<script setup>
import { ref, computed } from "vue"
import { Request } from "../libs/utils"
import AREA from "../libs/area"
import ModalTransition from "./ModalTransition.vue"
const props = defineProps({
  show: false,
  prizeId: Number
})
const emit = defineEmits(['addressSubmit','addressClose'])
// const addressShow = computed(() => props.prizeId ? props.show : false)
const btnDisableClass = ref(false)
const name = ref('')
const phone = ref('')
const province = ref('')
const city = ref('')
const county = ref('')
const area = computed(() => `${province.value}${city.value}${county.value}`)
const address = ref('')

const changeArea = () => {
  weui.picker(AREA, {
    defaultValue: ["110000", "110000", '110101'],
    onConfirm: (result) => {
      province.value = result[0].label
      city.value = result[1].label
      county.value = result[2].label
    }
  })
}

const checkForm = () => {
  if (name.value == "") {
    weui.alert("请输入联系人")
    return false
  } else if (phone.value === "" || phone.value.toString().length !== 11) {
    weui.alert("请输入正确的手机号")
    return false
  } else if (!province.value || !city.value || !county.value) {
    weui.alert("请选择地区")
    return false
  } else if (address.value == "") {
    weui.alert("请输入详细地址")
    return false
  } else {
    return true
  }
}
const handleSubmit = async () => {
  if (btnDisableClass.value) {
    return
  }
  if (!checkForm()) {
    return
  }

  btnDisableClass.value = true

  const result = await Request(`user/address`, {
    name: name.value,
    phone: phone.value,
    province: province.value,
    city: city.value,
    county: county.value,
    address: address.value,
    lottery_log_id: props.prizeId,
  })

  if (result.res.status == 200 || result.res.status == 201) {
    emit("addressSubmit", { id: props.prizeId })
  }else{
    emit('addressClose')
  }

  btnDisableClass.value = false
}


</script>

<style scoped>
.address-wrapper {
  width: 100%;
  background-color: #f2f3f8;
  border-radius: 2vw 2vw 0 0;
  animation: transitionIn ease 0.3s forwards;
  position: relative;
  padding: 0 4vw;
  padding-bottom: 14vw;
  position: relative;
}

.address-title {
  font-size: 3.703704vw;
  font-weight: 700;
  padding: 4vw 0;
}

.address-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 10vw;
}

.address-content input,
.address-content textarea {
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  resize: none;
  background: none;
  line-height: 1.2;
}

.address-area,
.address-content input,
.address-content textarea {
  font-size: 2.962963vw;
}

.address-content textarea {
  margin-top: .1vw;
}

.address-area {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-content input::placeholder,
.address-content textarea::placeholder,
.address-area {
  color: #86746e;
}

.address-item {
  width: 100%;
  position: relative;
  display: flex;
  padding: 3vw 0;
  align-items: center;
}

.address-item::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border-bottom: 1px solid gray;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
}

.address-item-label {
  min-width: 20vw;
  font-size: 3vw;
  line-height: 1.2;
  color: #000;
}

.address-item input {
  flex: 1;
  line-height: 100%;
  height: 6vw;
}

.btn-submit {
  text-align: center;
  border-radius: 1vw;
  background-color: #70b2e2;
  margin-top: 4vw;
  padding: 2vw;
  color: #fff;
  position: relative;
}

.btn-submit.disable {
  opacity: .7;
}

.btn-submit.disable::before {
  content: "";
  position: absolute;
  border: .5vw solid #fff;
  border-color: rgba(255, 255, 255, .8) transparent transparent transparent;
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  top: 30%;
  left: calc(50% - 14vw);
  animation: loginloading 1s linear infinite;
}

.address-area {
  flex: 1;
  font-weight: 700;
}

.address-textarea {
  height: 10vw;
  align-items: normal;
}

.address-textarea::after {
  display: none;
}

.address-close {
  display: block;
  position: absolute;
  right: 4vw;
  top: 4vw;
  width: 8.425926vw;
  height: 8.703704vw;
  background-repeat: no-repeat;
  background-position: 0 0;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNTAgNTAiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PHBhdGggZD0iTTI1LDJDMTIuMzE5LDIsMiwxMi4zMTksMiwyNXMxMC4zMTksMjMsMjMsMjNzMjMtMTAuMzE5LDIzLTIzUzM3LjY4MSwyLDI1LDJ6IE0zMy43MSwzMi4yOWMwLjM5LDAuMzksMC4zOSwxLjAzLDAsMS40MglDMzMuNTEsMzMuOSwzMy4yNiwzNCwzMywzNHMtMC41MS0wLjEtMC43MS0wLjI5TDI1LDI2LjQybC03LjI5LDcuMjlDMTcuNTEsMzMuOSwxNy4yNiwzNCwxNywzNHMtMC41MS0wLjEtMC43MS0wLjI5CWMtMC4zOS0wLjM5LTAuMzktMS4wMywwLTEuNDJMMjMuNTgsMjVsLTcuMjktNy4yOWMtMC4zOS0wLjM5LTAuMzktMS4wMywwLTEuNDJjMC4zOS0wLjM5LDEuMDMtMC4zOSwxLjQyLDBMMjUsMjMuNThsNy4yOS03LjI5CWMwLjM5LTAuMzksMS4wMy0wLjM5LDEuNDIsMGMwLjM5LDAuMzksMC4zOSwxLjAzLDAsMS40MkwyNi40MiwyNUwzMy43MSwzMi4yOXoiLz48L3N2Zz4=) center center no-repeat;
  background-size: 80%;
}
</style>