|
|
@@ -6,21 +6,27 @@
|
|
|
|
|
|
<view class="form-item">
|
|
|
<view class="item-label">
|
|
|
- <input class="input-field" placeholder="姓名" placeholder-class="placeholder" v-model="formInfo" />
|
|
|
+ <input class="input-field" placeholder="姓名" placeholder-class="placeholder" maxlength="10"
|
|
|
+ v-model="formData.contactName" />
|
|
|
</view>
|
|
|
<view class="item-control">
|
|
|
- <input class="input-field" placeholder="电话" placeholder-class="placeholder" v-model="formInfo" />
|
|
|
+ <input class="input-field" placeholder="电话" placeholder-class="placeholder" maxlength="11"
|
|
|
+ v-model="formData.contactPhone" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="form-item" @click="showTimePicker = true">
|
|
|
- <text class="time-value placeholder">省市区</text>
|
|
|
- <text class="time-value value">{{ selectedTime }}</text>
|
|
|
- <u-icon class="arrow" name='arrow-right' size="18"></u-icon>
|
|
|
- </view>
|
|
|
|
|
|
+ <picker mode="region" @change="changeAddress">
|
|
|
+ <view class="form-item form-items">
|
|
|
+ <text
|
|
|
+ class="time-value placeholder">{{ formData.provinceName ? formData.provinceName + formData.cityName + formData.countyName : '省市区' }}</text>
|
|
|
+ <text class="time-value value">{{ selectedTime }}</text>
|
|
|
+ <u-icon class="arrow" name='arrow-right' size="18"></u-icon>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
<view class="form-item">
|
|
|
<view class="item-control">
|
|
|
- <input class="input-field" placeholder="详细地址" placeholder-class="placeholder" v-model="formInfo" />
|
|
|
+ <input class="input-field" placeholder="详细地址" placeholder-class="placeholder"
|
|
|
+ v-model="formData.detailedAddress" />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -29,7 +35,7 @@
|
|
|
<!-- 设置默认和清空 -->
|
|
|
<view class="form-actions">
|
|
|
<view class="action-left">
|
|
|
- <switch color="#007AFF" @change="onDefaultChange" />
|
|
|
+ <switch :checked="formData.defaultFlag == 1" color="#007AFF" @change="onDefaultChange" />
|
|
|
<text class="action-text">设为默认寄件地址</text>
|
|
|
</view>
|
|
|
<view class="action-right" @click="clearForm">
|
|
|
@@ -40,19 +46,19 @@
|
|
|
</view>
|
|
|
|
|
|
|
|
|
- <view class="section-title">最近使用地址</view>
|
|
|
+ <view class="section-title" v-if="false">最近使用地址</view>
|
|
|
|
|
|
<!-- 最近使用地址 -->
|
|
|
- <view class="recent-address">
|
|
|
+ <view class="recent-address" v-if="false">
|
|
|
<!-- 地址项1 -->
|
|
|
<view class="address-item" @tap="selectAddress(0)">
|
|
|
-
|
|
|
- <AddressInfo v-if="addressSend.id" :address="addressSend" />
|
|
|
+
|
|
|
+ <AddressInfo v-if="formData.id" :address="addressSend" />
|
|
|
<view class="address-info">
|
|
|
<view class="address-name">袁添昊 13344642161</view>
|
|
|
<view class="address-detail">湖北省荆州市新石南路747号</view>
|
|
|
</view>
|
|
|
- <!-- <view class="address-select">
|
|
|
+ <!-- <view class="address-select">
|
|
|
|
|
|
</view> -->
|
|
|
</view>
|
|
|
@@ -83,20 +89,31 @@
|
|
|
ref,
|
|
|
reactive
|
|
|
} from 'vue'
|
|
|
- import {onLoad} from '@dcloudio/uni-app'
|
|
|
+ import {
|
|
|
+ onLoad
|
|
|
+ } from '@dcloudio/uni-app'
|
|
|
import AddressInfo from '@/components/AddressInfo.vue'
|
|
|
-
|
|
|
+
|
|
|
+ import {
|
|
|
+ addBook,
|
|
|
+ updateBook,
|
|
|
+ getBook
|
|
|
+ } from '@/api/address.js'
|
|
|
+
|
|
|
const addType = ref('1') //1 表示从创建订单过来 2 表示编辑 3表示创建
|
|
|
-
|
|
|
+
|
|
|
// 表单数据
|
|
|
const formData = reactive({
|
|
|
- name: '',
|
|
|
- phone: '',
|
|
|
- region: [],
|
|
|
- address: '',
|
|
|
- isDefault: false
|
|
|
+ contactName: '', //姓名
|
|
|
+ contactPhone: '', //电话
|
|
|
+ provinceName: '', //省
|
|
|
+ cityName: '', //市
|
|
|
+ countyName: '', //区
|
|
|
+ addressId: null, //地址ID
|
|
|
+ detailedAddress: '', //详细地址
|
|
|
+ defaultFlag: 0 //是否默认 0非默认1默认
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
// 最近地址列表
|
|
|
const recentAddresses = ref([{
|
|
|
name: '袁添昊',
|
|
|
@@ -109,10 +126,49 @@
|
|
|
address: '湖北省荆州市新石南路747号'
|
|
|
}
|
|
|
])
|
|
|
-
|
|
|
- onLoad((option)=>{
|
|
|
+
|
|
|
+ onLoad((option) => {
|
|
|
+ if (option.id) {
|
|
|
+ formData.addressId = option.id;
|
|
|
+ getAddress()
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title:'编辑地址'
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
})
|
|
|
+ const getAddress = async () => {
|
|
|
+ let res = await getBook(formData.addressId);
|
|
|
+ console.log(res.data, formData);
|
|
|
+ let {
|
|
|
+ addressId,
|
|
|
+ contactName,
|
|
|
+ contactPhone,
|
|
|
+ countyName,
|
|
|
+ defaultFlag,
|
|
|
+ detailedAddress,
|
|
|
+ provinceName,
|
|
|
+ cityName
|
|
|
+ } = res.data;
|
|
|
+
|
|
|
+ // formData = {addressId,contactName,contactPhone,countyName,defaultFlag,detailedAddress,provinceName}
|
|
|
+ Object.assign(formData, {
|
|
|
+ addressId,
|
|
|
+ contactName,
|
|
|
+ contactPhone,
|
|
|
+ cityName,
|
|
|
+ countyName,
|
|
|
+ defaultFlag,
|
|
|
+ detailedAddress,
|
|
|
+ provinceName
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 选择地址
|
|
|
+ const changeAddress = (e) => {
|
|
|
+ formData.provinceName = e.detail.value[0]
|
|
|
+ formData.cityName = e.detail.value[1]
|
|
|
+ formData.countyName = e.detail.value[2]
|
|
|
+ }
|
|
|
|
|
|
|
|
|
// 省市区选择
|
|
|
@@ -122,46 +178,50 @@
|
|
|
|
|
|
// 默认地址切换
|
|
|
const onDefaultChange = (e) => {
|
|
|
- formData.isDefault = e.detail.value
|
|
|
+ formData.defaultFlag = e.detail.value ? 1 : 0
|
|
|
}
|
|
|
|
|
|
// 清空表单
|
|
|
const clearForm = () => {
|
|
|
- formData.name = ''
|
|
|
- formData.phone = ''
|
|
|
- formData.region = []
|
|
|
- formData.address = ''
|
|
|
- formData.isDefault = false
|
|
|
- }
|
|
|
-
|
|
|
- // 选择地址
|
|
|
- const selectAddress = (index) => {
|
|
|
- const address = recentAddresses.value[index]
|
|
|
- formData.name = address.name
|
|
|
- formData.phone = address.phone
|
|
|
- formData.address = address.address
|
|
|
+ formData.contactName = ''
|
|
|
+ formData.contactPhone = ''
|
|
|
+ formData.provinceName = ''
|
|
|
+ formData.cityName = ''
|
|
|
+ formData.countyName = ''
|
|
|
+ formData.detailedAddress = ''
|
|
|
+ formData.defaultFlag = 0
|
|
|
}
|
|
|
|
|
|
// 确定提交
|
|
|
- const onConfirm = () => {
|
|
|
+ const onConfirm = async () => {
|
|
|
// 这里可以添加表单验证
|
|
|
- if (!formData.name || !formData.phone || !formData.address) {
|
|
|
+ if (!formData.contactName || !formData.contactPhone || !formData.detailedAddress) {
|
|
|
uni.showToast({
|
|
|
title: '请填写完整信息',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
+
|
|
|
+ if (!formData.provinceName) return uni.showToast({
|
|
|
+ title: '请选择省市区',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
|
|
|
// 提交逻辑
|
|
|
+ let api = formData.addressId ? updateBook(formData) : addBook(formData)
|
|
|
+ let res = await api;
|
|
|
+
|
|
|
console.log('提交数据:', formData)
|
|
|
uni.showToast({
|
|
|
title: '提交成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
|
|
|
- // 返回上一页或执行其他操作
|
|
|
- // uni.navigateBack()
|
|
|
+ setTimeout(() => {
|
|
|
+ // 返回上一页或执行其他操作
|
|
|
+ uni.navigateBack()
|
|
|
+ }, 800)
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -266,6 +326,12 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .form-items {
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: 1rpx solid #F1F3F8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/* 寄件标识 */
|
|
|
.send-tag {
|
|
|
padding: 40rpx 30rpx 20rpx;
|