purchase-let/pagesOrder/addressEdit/addressEdit.vue

365 lines
9.9 KiB
Vue
Raw Normal View History

2024-04-27 18:02:43 +08:00
<template>
2024-06-14 13:56:28 +08:00
<view class="">
<view class="card">
<up-form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="100">
<up-form-item label="联系人" prop="real_name" borderBottom>
2024-06-14 13:56:28 +08:00
<up-input v-model="formData.real_name" disabledColor="#ffffff" border="none"
placeholder="请填写联系人姓名"></up-input>
2024-06-14 13:56:28 +08:00
</up-form-item>
<up-form-item label="联系电话" prop="phone" borderBottom>
<up-input v-model="formData.phone" disabledColor="#ffffff" type="number" placeholder="请填写联系电话"
border="none"></up-input>
</up-form-item>
<up-form-item label="所在位置" prop="address" borderBottom>
<view @click="showPop = true" style="width: 100%;">
<up-input style="pointer-events: none" v-model="formData.address" border="none" prefixIcon="map"
readonly placeholder="点击选择地址" :customStyle="{
background: '#F3F3F3', padding: '20rpx',
'border-radius': '30rpx'
}" :placeholderStyle="{ color: '#444444' }" :prefixIconStyle="{ 'margin-right': '40rpx' }"
suffixIcon='arrow-down'></up-input>
</view>
</up-form-item>
<!-- <up-form-item label="详细地址" prop="detail" borderBottom>
2024-06-14 13:56:28 +08:00
<up-input v-model="formData.detail" disabledColor="#ffffff" placeholder="请填写详细地址"
border="none"></up-input>
</up-form-item> -->
2024-06-14 13:56:28 +08:00
</up-form>
</view>
<!-- <view class="card">
2024-06-14 13:56:28 +08:00
<view class="is-default">
<view>设置为默认地址</view>
<up-switch v-model="formData.is_default" :activeValue="1" :inactiveValue="0"
activeColor="#20B128"></up-switch>
</view>
</view> -->
2024-06-14 13:56:28 +08:00
<view class="bottom-fixed">
<up-button color="#20B128" shape="circle" @click="submit">保存</up-button>
</view>
<!-- 地址选择器 -->
<up-popup :show="showPop" @close="showPop = false" @open="showPop = true" :round="10">
<view style="padding: 20rpx;">
<up-tabs :list="tabsList" @change='addressTbasChange' :current='currentAddressIndex' lineColor='#20B128'
:activeStyle="{ color: '#20B128' }"></up-tabs>
<up-line style="margin-top:20rpx "></up-line>
<view class="address-content" v-if='currentAddressIndex == 0'>
<view class="address-li" :class='{ act: item.city_code == formData.city }'
v-for="item in addressList.city" :key="item.city_code" @click="addressLiClick(0, item)">
<text>{{ item.city_name }}</text>
<up-icon name="arrow-right" :color="item.city_code == formData.city ? '#20B128' : '#777777'" />
</view>
</view>
<view class="address-content" v-else-if='currentAddressIndex == 1'>
<view class="address-li" v-for="item in addressList.area" @click="addressLiClick(1, item)"
:key="item.area_code" :class='{ act: item.area_code == formData.area }'>
<text>{{ item.area_name }}</text>
<up-icon name="arrow-right" :color="item.area_code == formData.area ? '#20B128' : '#777777'" />
</view>
</view>
<view class="address-content" v-else-if='currentAddressIndex == 2'>
<view class="address-li" v-for="item in addressList.street" @click="addressLiClick(2, item)"
:key="item.street_code" :class='{ act: item.street_code == formData.street }'>
<text>{{ item.street_name }}</text>
<up-icon name="arrow-right"
:color="item.street_code == formData.street ? '#20B128' : '#777777'" />
</view>
</view>
<view class="address-content" v-else-if='currentAddressIndex == 3'>
<view class="address-li" v-for="item in addressList.village" @click="addressLiClick(3, item)"
:key="item.village_code" :class='{ act: item.village_code == formData.village }'>
<text>{{ item.village_name }}</text>
<up-icon name="arrow-right"
:color="item.village_code == formData.village ? '#20B128' : '#777777'" />
</view>
</view>
<view class="address-content" v-else-if='currentAddressIndex == 4'>
<view class="address-li" :class='{ act: item.id == formData.brigade }'
v-for="item in addressList.brigade" :key="item.id" @click="addressLiClick(4, item)">
<text>{{ item.brigade_name }}</text>
<up-icon name="arrow-right" :color="item.id == formData.brigade ? '#20B128' : '#777777'" />
</view>
2024-06-14 13:56:28 +08:00
</view>
</view>
</up-popup>
</view>
2024-04-27 18:02:43 +08:00
</template>
<script setup>
2024-06-14 13:56:28 +08:00
import {
onLoad
} from "@dcloudio/uni-app"
import {
reactive,
2024-06-14 13:56:28 +08:00
ref
} from "vue"
import {
addressCreateApi,
addressEditApi,
addressDetailApi
} from "@/api/user.js"
import {
provinceListApi,
cityListApi,
areaListApi,
streetListApi,
villageListApi,
brigadeListApi
} from "@/api/address.js"
import useUserStore from "@/store/user";
2024-04-27 18:02:43 +08:00
2024-06-14 13:56:28 +08:00
const mode = ref('add');
const type = ref('');
2024-06-14 13:56:28 +08:00
const showAddressPop = ref(false)
2024-04-27 18:02:43 +08:00
2024-06-14 13:56:28 +08:00
const formData = ref({
real_name: '',
phone: '',
detail: '',
is_default: 1,
province: 510000,
city: '',
area: "",
street: "",
village: "",
brigade: "",
2024-06-14 13:56:28 +08:00
address: ""
})
const userInfo = useUserStore().userInfo;
if (userInfo) {
formData.value.phone = userInfo.mobile
formData.value.real_name = userInfo.real_name
}
2024-06-14 13:56:28 +08:00
const rules = ref({
real_name: [{
required: true,
message: '请输入姓名',
trigger: ['blur']
}],
phone: [{
required: true,
message: '请输入手机号',
trigger: ['blur']
}, {
2024-06-03 16:45:07 +08:00
validator: (rule, value, callback) => {
return uni.$u.test.mobile(value);
},
message: '手机号码不正确',
2024-06-14 13:56:28 +08:00
trigger: ['change', 'blur'],
2024-06-03 16:45:07 +08:00
}],
2024-06-14 13:56:28 +08:00
detail: [{
required: true,
message: '请输入地址',
trigger: ['blur']
}]
})
const uForm = ref(null);
const submit = () => {
uForm.value.validate().then(() => {
if (mode.value == 'add') {
addressCreateApi(formData.value).then(res => {
uni.$u.toast(res.msg);
uni.$u.sleep(800).then(res => {
if (type.value == 'settle') {
uni.redirectTo({
url: '/pagesOrder/settle/settle'
});
} else {
uni.navigateBack();
}
2024-06-14 13:56:28 +08:00
})
})
} else {
addressEditApi(formData.value).then(res => {
uni.$u.toast(res.msg);
uni.$u.sleep(800).then(res => {
if (type.value == 'settle') {
uni.redirectTo({
url: '/pagesOrder/settle/settle'
});
} else {
uni.navigateBack();
}
2024-06-14 13:56:28 +08:00
})
})
}
}).catch(() => {
console.log('验证失败');
})
}
2024-04-27 18:02:43 +08:00
2024-06-14 13:56:28 +08:00
const getAddressDetil = (address_id) => {
addressDetailApi({
address_id
}).then(res => {
formData.value = res.data;
})
}
// 地址选择
const showPop = ref(false)
const currentAddressIndex = ref(0)
const currentAddressList = () => {
if (!formData.city) return [0, 'city'];
else if (formData.area) return [1, 'area'];
else if (formData.street) return [2, 'street'];
else if (formData.village) return [3, 'village'];
else if (formData.brigade) return [4, 'brigade'];
}
const addressTbasChange = (e) => {
currentAddressIndex.value = e.index
}
const addressList = reactive({
city: [],
area: [],
street: [],
village: [],
brigade: []
})
const addressLiClick = async (i, item) => {
if (i == 0) {
formData.value.city = item.city_code
tabsList[0].name = item.city_name
let res = await areaListApi({
city_code: formData.value.city
})
addressList.area = res.data
}
if (i == 1) {
formData.value.area = item.area_code
tabsList[1].name = item.area_name
let res = await streetListApi({
area_code: formData.value.area
})
addressList.street = res.data
}
if (i == 2) {
formData.value.street = item.street_code
tabsList[2].name = item.street_name
let res = await villageListApi({
street_code: formData.value.street
})
addressList.village = res.data
}
if (i == 3) {
formData.value.village = item.village_code
tabsList[3].name = item.village_name
let res = await brigadeListApi({
village_code: formData.value.village
})
addressList.brigade = res.data
}
if (i == 4) {
formData.value.brigade = item.id
tabsList[4].name = item.brigade_name
2024-06-14 13:56:28 +08:00
formData.value.address = tabsList[0].name + tabsList[1].name + tabsList[2].name + tabsList[3].name +
tabsList[4].name
return showPop.value = false
}
formData.value.address = tabsList[0].name + tabsList[1].name + tabsList[2].name + tabsList[3].name +
tabsList[4]
.name
return currentAddressIndex.value++
}
const getCityList = async () => {
let res = await cityListApi({
province_code: formData.value.province
})
addressList.city = res.data
}
const tabsList = reactive(
[{
name: "请选择"
},
{
name: '请选择',
disabled: false
},
{
name: '请选择',
disabled: false
},
{
name: '请选择',
disabled: false
},
{
name: '请选择',
disabled: false
},
]);
2024-06-14 13:56:28 +08:00
onLoad((options) => {
if (options.type) {
type.value = options.type
}
2024-06-14 13:56:28 +08:00
if (options.mode == 'edit' && options.address_id) {
mode.value = 'edit';
uni.setNavigationBarTitle({
title: '编辑地址'
})
getAddressDetil(options.address_id)
} else uni.setNavigationBarTitle({
title: '新增地址'
})
getCityList()
2024-06-14 13:56:28 +08:00
})
2024-04-27 18:02:43 +08:00
</script>
<style lang="scss">
2024-06-14 13:56:28 +08:00
.card {
margin: 20rpx;
background-color: #fff;
border-radius: 14rpx;
padding: 0 30rpx;
.is-default {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
}
}
.bottom-fixed {
position: fixed;
bottom: 0;
left: 0;
height: 120rpx;
height: calc(constant(safe-area-inset-bottom) + 120rpx);
/* 适用于iOS设备 */
height: calc(env(safe-area-inset-bottom) + 120rpx);
/* 适用于Android设备 */
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 20rpx;
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
/* 适用于iOS设备 */
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
/* 适用于Android设备 */
}
2024-04-27 18:02:43 +08:00
.address-content {
2024-06-14 13:56:28 +08:00
padding: 20rpx;
height: 60vh;
2024-06-14 13:56:28 +08:00
overflow-y: auto;
2024-04-27 18:02:43 +08:00
.address-li {
display: flex;
justify-content: space-between;
align-items: center;
2024-06-14 13:56:28 +08:00
font-size: 32rpx;
color: #777777;
margin: 30rpx 0;
}
.act {
color: #20B128;
2024-06-14 13:56:28 +08:00
}
}
2024-04-27 18:02:43 +08:00
</style>