init
This commit is contained in:
yixu
255
src/components/Address.vue
Normal file
255
src/components/Address.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user