214 lines
7.0 KiB
Vue
214 lines
7.0 KiB
Vue
<template>
|
|
<div class="ui-add-address">
|
|
<div class="ui-mb-40">
|
|
<div class="ui-address-box">
|
|
<div class="ui-address-list">
|
|
<div class="ui-address-name color3 font_28 bold">姓名</div>
|
|
<van-field v-model="myAddress.name" class="ui-input f-fcc font_28 color3" placeholder="收货人姓名" />
|
|
</div>
|
|
<div class="ui-address-list">
|
|
<div class="ui-address-name color3 font_28 bold">电话号码</div>
|
|
<van-field v-model="myAddress.mobile" type="number" class="ui-input f-fcc font_28 color3" placeholder="收货人手机号" />
|
|
</div>
|
|
<div class="ui-address-list">
|
|
<div class="ui-address-name color3 font_28 bold">所在地址</div>
|
|
<van-field v-model="myAddress.more_address" readonly class="ui-input f-fcc font_28 color3" placeholder="请选择地址" @click="showAddress = true" />
|
|
</div>
|
|
<div class="ui-address-list ui-address-list-none">
|
|
<div class="ui-address-name ui-address-nameV2 color3 font_28 bold">详情地址</div>
|
|
<van-field v-model="myAddress.detail_address" type="textarea" rows="2" class="ui-input f-fcc font_28 color3" placeholder="街道门牌、楼层房间号等信息" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui-add-btn font_32 colorF text-center" @click="toAddAddress">保存</div>
|
|
<van-popup v-model:show="showAddress" round position="bottom" :duration="0.5">
|
|
<van-picker v-model="payValue" title="选择地址" :columns="options" @confirm="onConfirm" @cancel="showAddress = false" />
|
|
<!-- <van-cascader-->
|
|
<!-- v-model="cascaderValue"-->
|
|
<!-- title="请选择所在地区"-->
|
|
<!-- :options="options"-->
|
|
<!-- @close="show = false"-->
|
|
<!-- @finish="onFinish"-->
|
|
<!-- />-->
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { useCascaderAreaData } from '@vant/area-data';
|
|
import { showToast } from 'vant';
|
|
import requestGo from '@/utils/requestApp';
|
|
import request from '@/utils/request';
|
|
import router from '@/router';
|
|
|
|
defineOptions({ name: 'AppMyAddress' });
|
|
|
|
const id = ref<string>('');
|
|
const throttle = ref(true);
|
|
const myAddress = ref<any>({});
|
|
const addressList = ref([]);
|
|
const showAddress = ref(false);
|
|
const payValue = ref<any[]>([]);
|
|
const options = useCascaderAreaData();
|
|
// 获取地址列表
|
|
const getDetail = () => {
|
|
requestGo({ url: `/app/user/address/get/detail/${id.value}`, method: 'get' })
|
|
.then((res) => {
|
|
let result = res.data;
|
|
myAddress.value = result;
|
|
if (myAddress.value.province) {
|
|
myAddress.value.more_address = `${myAddress.value.province}/${myAddress.value.city}/${myAddress.value.county}`;
|
|
}
|
|
payValue.value = [`${myAddress.value.province_pid}`, `${myAddress.value.city_pid}`, `${myAddress.value.county_pid}`];
|
|
console.log(payValue.value, ' payValue.value');
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
const toAddAddress = () => {
|
|
let data = {
|
|
name: myAddress.value.name,
|
|
area_code: 86,
|
|
mobile: myAddress.value.mobile,
|
|
province: myAddress.value.province,
|
|
city: myAddress.value.city,
|
|
county: myAddress.value.county,
|
|
province_pid: myAddress.value.province_pid - 0,
|
|
city_pid: myAddress.value.city_pid - 0,
|
|
county_pid: myAddress.value.county_pid - 0,
|
|
detail_address: myAddress.value.detail_address,
|
|
};
|
|
if (id.value == '0') {
|
|
data.is_default = 0;
|
|
requestGo({ url: `/app/user/address/add`, data, method: 'post' })
|
|
.then((res) => {
|
|
showToast('添加成功');
|
|
setTimeout(() => {
|
|
router.go(-1);
|
|
}, 1200);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
} else {
|
|
data.is_default = myAddress.value.is_default;
|
|
requestGo({ url: `/app/user/address/update/${id.value}`, data, method: 'put' })
|
|
.then((res) => {
|
|
showToast('修改成功');
|
|
setTimeout(() => {
|
|
router.go(-1);
|
|
}, 1200);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
}
|
|
};
|
|
const getAddress = () => {
|
|
request({ url: `get/china`, method: 'get' }).then((res) => {
|
|
addressList.value = res.data.map((item) => {
|
|
return {
|
|
value: item.id,
|
|
text: item.name,
|
|
children: getChildren(item.city),
|
|
};
|
|
});
|
|
});
|
|
};
|
|
const getChildren = (child) => {
|
|
let children = child.map((item) => {
|
|
return {
|
|
value: item.id,
|
|
text: item.name,
|
|
children: getChildrenV2(item.county),
|
|
};
|
|
});
|
|
return children;
|
|
};
|
|
const getChildrenV2 = (child) => {
|
|
let children = child.map((item) => {
|
|
return {
|
|
value: item.id,
|
|
text: item.name,
|
|
};
|
|
});
|
|
return children;
|
|
};
|
|
// 选择支付方式
|
|
const onConfirm = ({ selectedValues, selectedOptions }) => {
|
|
console.log(selectedOptions, 'selectedValues');
|
|
console.log(selectedValues, 'selectedValues');
|
|
myAddress.value.province = selectedOptions[0].text;
|
|
myAddress.value.province_pid = selectedOptions[0].value;
|
|
myAddress.value.city = selectedOptions[1].text;
|
|
myAddress.value.city_pid = selectedOptions[1].value;
|
|
myAddress.value.county = selectedOptions[2].text;
|
|
myAddress.value.county_pid = selectedOptions[2].value;
|
|
myAddress.value.more_address = selectedOptions.map((option) => option.text).join('/');
|
|
showAddress.value = false;
|
|
// payType.value = selectedValues[0];
|
|
};
|
|
onMounted(() => {
|
|
let route = router.currentRoute.value.query as any;
|
|
id.value = route.id;
|
|
if (id.value !== '0') {
|
|
getDetail();
|
|
}
|
|
getAddress();
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.ui-add-address {
|
|
background: #f6f6f6;
|
|
overflow-y: auto;
|
|
height: 100vh;
|
|
}
|
|
.ui-address-box {
|
|
margin: px2rem(16) px2rem(32);
|
|
padding: 0 px2rem(24);
|
|
width: px2rem(638);
|
|
background: #ffffff;
|
|
border-radius: px2rem(16);
|
|
.ui-address-list {
|
|
padding: px2rem(22) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: px2rem(2) solid #d8d8d8;
|
|
width: 100%;
|
|
.ui-address-name {
|
|
//padding-top: px2rem(32);
|
|
//padding-bottom: px2rem(32);
|
|
width: px2rem(112);
|
|
line-height: px2rem(28);
|
|
}
|
|
.ui-input {
|
|
flex: 1;
|
|
border-radius: px2rem(16);
|
|
line-height: px2rem(28);
|
|
//padding-top: px2rem(26);
|
|
//padding-bottom: px2rem(26);
|
|
}
|
|
}
|
|
.ui-address-list-none {
|
|
border: none;
|
|
align-items: flex-start;
|
|
.ui-address-nameV2 {
|
|
padding-top: px2rem(20);
|
|
}
|
|
}
|
|
}
|
|
.ui-add-btn {
|
|
position: fixed;
|
|
bottom: px2rem(84);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: px2rem(686);
|
|
height: px2rem(88);
|
|
line-height: px2rem(88);
|
|
background: linear-gradient(140deg, #18ca6e 0%, #0aa555 100%);
|
|
border-radius: px2rem(340);
|
|
}
|
|
</style>
|