319 lines
8.9 KiB
Vue
319 lines
8.9 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="adderss_cont">
|
||
<view class="adderss_item">
|
||
<view class="adderss_name">联系人</view>
|
||
<view class="adderss_r">
|
||
<view class="adderss_text">
|
||
<input class="adderss_input" v-model="realName" type="text" placeholder="收货人姓名"/>
|
||
</view>
|
||
<view class="adderss_type">
|
||
<view class="adderss_type_item"><view class="adderss_type_select adderss_acty"><image class="adderss_acty_img" src="../../static/selected.png"></image></view>先生</view>
|
||
<view class="adderss_type_item adderss_type_left"><view class="adderss_type_select"></view>女生</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="adderss_item">
|
||
<view class="adderss_name">手机号</view>
|
||
<view class="adderss_r">
|
||
<view class="adderss_text">
|
||
<input class="adderss_input" v-model="phone" type="text" placeholder="收货人手机号"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="adderss_item">
|
||
<view class="adderss_name">所在的地区</view>
|
||
<view class="adderss_r ">
|
||
<view class="adderss_text adderss_arr" @click="OpenAddress()">
|
||
<input class="adderss_input" v-model="address_text" disabled="true" type="text" placeholder="省、市、区"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="adderss_item">
|
||
<view class="adderss_name">详细地址</view>
|
||
<view class="adderss_r ">
|
||
<view class="adderss_text">
|
||
<textarea class="adderss_textarea" :disable-default-padding="isIos" v-model="detail" type="text" placeholder="小区、门牌号"></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="adderss_cont" v-if="!address_isDefault">
|
||
<view class="adderss_default">
|
||
<view class="adderss_default_l">
|
||
<view class="adderss_default_title">设为默认地址</view>
|
||
<view class="adderss_default_desc">每次下单会默认推荐使用该地址</view>
|
||
</view>
|
||
<view class="adderss_default_switch">
|
||
<switch :checked="isDefault == 1 ? true:false" color="#e61817" @change="switchChange" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_btn" :class="edit?'widths':''" @click="save">保存地址</view>
|
||
<view v-if="edit" class="footer_btn footer_border" :class="edit?'widths':''" @click="removeCart">删除地址</view>
|
||
</view>
|
||
<uni-popup ref="addressPopup" type="bottom" @change="changeAddress">
|
||
<view class="address_pup">
|
||
<view class="address_head">请选择地区<view class="address_open_close" @click="OpenAddress()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
|
||
<view class="address_cont" v-if="province_v">
|
||
<view class="address_name" :class="hover == 1?'address_hover':''" @click="switchover(1)">{{province_v}}</view>
|
||
<block v-if="city_v">
|
||
<view class="address_x">-</view>
|
||
<view class="address_name" :class="hover == 2?'address_hover':''" @click="switchover(2)">{{city_v}}</view>
|
||
</block>
|
||
<block v-if="district_v">
|
||
<view class="address_x">-</view>
|
||
<view class="address_name" :class="hover == 3?'address_hover':''" @click="switchover(3)">{{district_v}}</view>
|
||
</block>
|
||
</view>
|
||
<view class="address_select">选择省份/地区</view>
|
||
<view class="address_list">
|
||
<block v-if="address_id === '1'">
|
||
<view class="address_list_item" v-for="(item,index) in cityData" :key="index" @click="addressClick(1,item)">{{item.name}}</view>
|
||
</block>
|
||
<block v-if="address_id === '2'">
|
||
<view class="address_list_item" v-for="(item,index) in citylists" :key="index" @click="addressClick(2,item)">{{item.name}}</view>
|
||
</block>
|
||
<block v-if="address_id === '3'">
|
||
<view class="address_list_item" v-for="(item,index) in districtlist" :key="index" @click="addressClick(3,item)">{{item.name}}</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { citylist,addressedit,addressdetail,addressdel } from "@/server/api.js"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
|
||
const cityId = ref('');
|
||
const province = ref('')
|
||
const city = ref('')
|
||
const district = ref('')
|
||
const province_v = ref('')
|
||
const city_v = ref('')
|
||
const district_v = ref('')
|
||
const addressShow = ref(false);
|
||
const addressPopup = ref(null);
|
||
const hover = ref('1');
|
||
const address_id = ref('1')
|
||
const cityData = ref([]);
|
||
const citylists = ref([]);
|
||
const districtlist = ref([]);
|
||
const address_text = ref('');
|
||
const isDefault = ref(1);
|
||
const detail = ref('');
|
||
const phone = ref('');
|
||
const realName = ref('');
|
||
const id = ref('');
|
||
const isIos = ref(false);
|
||
const edit = ref(false);
|
||
const address_isDefault = ref(false);
|
||
const isDefaultShow = computed(() => {
|
||
return address_isDefault.value?true:false;
|
||
});
|
||
const System = () =>{
|
||
const phone = wx.getSystemInfoSync();
|
||
if (phone.platform == 'ios') {
|
||
isIos.value = true
|
||
} else if (phone.platform == 'android') {
|
||
isIos.value = false
|
||
}
|
||
};
|
||
const api_citylist=()=>{
|
||
return citylist().then(({data}) => {
|
||
cityData.value = data;
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const OpenAddress=()=>{
|
||
addressShow.value ? addressPopup.value.close():addressPopup.value.open()
|
||
}
|
||
const changeAddress = (e)=>{
|
||
addressShow.value = e.show;
|
||
}
|
||
const removeCart=()=>{
|
||
const params = {
|
||
id:id.value
|
||
}
|
||
return addressdel(params).then(({message}) => {
|
||
uni.showToast({
|
||
title:message,
|
||
icon:'success',
|
||
success: () => {
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},1400)
|
||
}
|
||
})
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const addressClick = (type,item) =>{
|
||
cityId.value = item.cityId;
|
||
if(type == 1){
|
||
address_id.value = '2'
|
||
hover.value = '1';
|
||
province.value = item.name;
|
||
province_v.value = item.name;
|
||
citylists.value = item.child;
|
||
}else if(type == 2){
|
||
address_id.value = '3'
|
||
hover.value = '2';
|
||
city.value = item.name;
|
||
city_v.value = item.name;
|
||
districtlist.value = item.child
|
||
}else{
|
||
hover.value = '3';
|
||
district.value = item.name;
|
||
district_v.value = item.name;
|
||
OpenAddress();
|
||
}
|
||
address_text.value = province.value + city.value + district.value;
|
||
}
|
||
const switchover = (type) =>{
|
||
if(hover.value == type) return false;
|
||
if(type == 1){
|
||
address_id.value = '1'
|
||
hover.value = '1';
|
||
}else if(type == 2){
|
||
address_id.value = '2'
|
||
hover.value = '2';
|
||
}else{
|
||
address_id.value = '3'
|
||
hover.value = '3';
|
||
}
|
||
}
|
||
const api_addressdetail = () =>{
|
||
return addressdetail(id.value).then(({data}) => {
|
||
phone.value = data.phone;
|
||
realName.value = data.realName;
|
||
province.value = data.province;
|
||
city.value = data.city;
|
||
district.value = data.district;
|
||
detail.value = data.detail;
|
||
address_text.value = province.value + city.value + district.value;
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
const save=()=>{
|
||
if(!realName.value){
|
||
uni.showToast({
|
||
title:'联系不能为空！',
|
||
icon:'none',
|
||
})
|
||
return false
|
||
}
|
||
if(!phone.value){
|
||
uni.showToast({
|
||
title:'手机号不能为空！',
|
||
icon:'none',
|
||
})
|
||
return false
|
||
}
|
||
if(!province.value){
|
||
uni.showToast({
|
||
title:'请选择省！',
|
||
icon:'none',
|
||
})
|
||
return false
|
||
}
|
||
if(!city.value){
|
||
uni.showToast({
|
||
title:'请选择市！',
|
||
icon:'none',
|
||
})
|
||
return false
|
||
}
|
||
if(!district.value){
|
||
uni.showToast({
|
||
title:'请选择区/县',
|
||
icon:'none',
|
||
})
|
||
return false
|
||
}
|
||
|
||
if(!detail.value){
|
||
uni.showToast({
|
||
title:'详细地址不能为空',
|
||
icon:'none',
|
||
})
|
||
return false
|
||
}
|
||
const params = {
|
||
address: {
|
||
city:city.value,
|
||
district:district.value,
|
||
province:province.value
|
||
},
|
||
detail:detail.value,
|
||
isDefault:isDefault.value == 1?true:false,
|
||
phone:phone.value,
|
||
realName:realName.value
|
||
}
|
||
if(id.value){
|
||
params.id = id.value
|
||
}
|
||
if(cityId.value){
|
||
params.address.cityId = cityId.value
|
||
}
|
||
return addressedit(params).then(({message}) => {
|
||
uni.showToast({
|
||
title:message,
|
||
icon:'success',
|
||
success: () => {
|
||
setTimeout(()=>{
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
},1400)
|
||
}
|
||
})
|
||
}).catch(({message}) => {
|
||
uni.showToast({
|
||
title:message,
|
||
icon:'none',
|
||
})
|
||
})
|
||
}
|
||
onLoad((options) => {
|
||
const { edits,ids,address_isDefaults } = options;
|
||
if(ids){id.value = ids;}
|
||
if(address_isDefaults){address_isDefault.value = address_isDefaults}
|
||
System();
|
||
api_citylist();
|
||
if(edits){edit.value = edits;api_addressdetail();}
|
||
|
||
});
|
||
onShow(() => {});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{})
|
||
onReachBottom(()=>{})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |