zhuangcheng/uni-wechat-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 收货地址开发完成

Browse Source
This commit is contained in:
zc 2025-12-02 14:37:25 +08:00
parent 9dfa9fd1a2
commit ba07f22b6a
5 changed files with 93 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api/order.js
View File

@ -43,7 +43,7 @@ export function receipt(orderId, data) {
return request.post(api.receipt, { orderId, ...data })
}
// 获取地理位置
// 获取买家地址
export const apiGetAddressList = (data) => {
return httpRequest.post(
`${baseUrl}/buyer/address/list`,
@ -51,6 +51,14 @@ export const apiGetAddressList = (data) => {
);
}
// 新增或更新买家地址
export const apiInsertOrUpdateAddress = (data) => {
return httpRequest.post(
`${baseUrl}/buyer/address/insertOrUpdate`,
data
);
}
// 下单
export const apiOrderAdd = (data) => {
return httpRequest.post(

5
components/select-region/select-region.vue
View File

@ -62,14 +62,15 @@
},
watch: {
// 监听当前选中的值
modelValue(val) {
modelValue: { handler(val) {
// 设置默认选中的值
this.valueText = val.map(item => item.label).join('/')
this.setDefaultValue(val)
// 将当前的值发送到 u-form-item 进行校验
// this.dispatch('u-form-item', 'on-form-change', val)
},
},
immediate: true
}},
created() {
// 获取地区数据 (同步)
this.getTreeDataSync()

66
pages/address/create.vue
View File

@ -5,11 +5,11 @@
<!-- 表单组件 -->
<view class="form-wrapper">
<u-form :model="form" ref="uForm" label-width="140rpx">
<u-form-item label="姓名" prop="name">
<u-input v-model="form.name" placeholder="请输入收货人姓名" />
<u-form-item label="姓名" prop="buyerName">
<u-input v-model="form.buyerName" placeholder="请输入收货人姓名" />
</u-form-item>
<u-form-item label="电话" prop="phone">
<u-input v-model="form.phone" placeholder="请输入收货人手机号" />
<u-form-item label="电话" prop="buyerPhone">
<u-input v-model="form.buyerPhone" placeholder="请输入收货人手机号" />
</u-form-item>
<u-form-item label="地区" prop="region">
<select-region ref="sRegion" v-model="form.region" />
@ -34,27 +34,25 @@
<script>
import SelectRegion from '@/components/select-region/select-region'
import { isMobile } from '@/utils/verify'
import * as AddressApi from '@/api/address'
import * as OrderApi from '@/api/order'
// 表单验证规则
const rules = {
name: [{
buyerName: [{
required: true,
message: '请输入姓名',
trigger: ['blur', 'change']
}],
phone: [{
buyerPhone: [{
required: true,
message: '请输入手机号',
trigger: ['blur', 'change']
}, {
// 自定义验证函数
validator: (rule, value, callback) => {
// 返回true表示校验通过，返回false表示不通过
return isMobile(value)
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['blur'],
}],
region: [{
@ -77,23 +75,16 @@
data() {
return {
form: {
content: '',
name: '',
phone: '',
buyerName: '',
buyerPhone: '',
region: [],
detail: ''
},
rules,
// 按钮禁用
disabled: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules)
@ -109,8 +100,8 @@
uni.chooseAddress({
success(res) {
const names = $refs.sRegion.getOptionItemByNames(res)
form.name = res.userName
form.phone = res.telNumber
form.buyerName = res.userName
form.buyerPhone = res.telNumber
form.detail = res.detailInfo
form.region = names.length > 0 ? names : []
},
@ -124,33 +115,6 @@
},
// #endif
// 生成默认的表单数据
createFormData(detail) {
const { form } = this
form.name = detail.name
form.phone = detail.phone
form.detail = detail.detail
form.region = this.createRegion(detail)
},
// 格式化地区数据 (用于select-region组件)
createRegion(detail) {
if (detail.province_id == 0 || detail.city_id == 0 || detail.region_id == 0) {
this.$toast('很抱歉，地区未能识别请手动选择', 2000)
return []
}
return [{
label: detail.region.province,
value: detail.province_id
}, {
label: detail.region.city,
value: detail.city_id
}, {
label: detail.region.region,
value: detail.region_id
}]
},
// 表单提交
handleSubmit() {
const app = this
@ -160,9 +124,13 @@
app.$refs.uForm.validate(valid => {
if (valid) {
app.disabled = true
AddressApi.add(app.form)
const data = { ...app.form }
data.province = data.region[0].label
data.city = data.region[1].label
data.district = data.region[2].label
OrderApi.apiInsertOrUpdateAddress(data)
.then(result => {
app.$toast(result.message)
app.$toast(result.msg)
uni.navigateBack()
})
.finally(() => app.disabled = false)

124
pages/address/index.vue
View File

@ -3,8 +3,8 @@
<view class="addres-list">
<view class="address-item" v-for="(item, index) in list" :key="index">
<view class="contacts">
<text class="name">{{ item.name }}</text>
<text class="phone">{{ item.phone }}</text>
<text class="name">{{ item.buyerName }}</text>
<text class="phone">{{ item.buyerPhone }}</text>
</view>
<view class="address">
<text class="region" v-for="(region, idx) in item.region" :key="idx">{{ region }}</text>
@ -14,18 +14,18 @@
<view class="item-option">
<view class="_left">
<view class="item-radio">
<u-radio-group v-model="defaultId" @change="handleSetDefault(item.address_id)">
<u-radio :name="item.address_id" :active-color="appTheme.mainBg">{{ item.address_id == defaultId ? '默认' : '选择' }}</u-radio>
<u-radio-group v-model="defaultId" @change="handleSetDefault(item.id)">
<u-radio :name="item.id" :active-color="appTheme.mainBg">默认</u-radio>
</u-radio-group>
</view>
</view>
<view class="_right">
<view class="events">
<view class="event-item" @click="handleUpdate(item.address_id)">
<view class="event-item" @click="handleUpdate(item)">
<text class="iconfont icon-edit"></text>
<text class="title">编辑</text>
</view>
<view class="event-item" @click="handleRemove(item.address_id)">
<view class="event-item" @click="handleRemove(item.id)">
<text class="iconfont icon-delete"></text>
<text class="title">删除</text>
</view>
@ -46,6 +46,7 @@
<script>
import * as AddressApi from '@/api/address'
import * as OrderApi from '@/api/order'
import Empty from '@/components/empty'
export default {
@ -54,100 +55,52 @@
},
data() {
return {
//当前页面参数
options: {},
// 正在加载
isLoading: true,
// 收货地址列表
list: [],
// 默认收货地址
defaultId: null
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 当前页面参数
this.options = options
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取页面数据
this.getPageData()
},
methods: {
// 获取页面数据
getPageData() {
const app = this
app.isLoading = true
Promise.all([app.getDefaultId(), app.getAddressList()])
.then(() => {
// 列表排序把默认收货地址放到最前
app.onReorder()
})
.finally(() => app.isLoading = false)
},
// 获取收货地址列表
getAddressList() {
const app = this
return new Promise((resolve, reject) => {
AddressApi.list()
.then(result => {
app.list = result.data.list
resolve(result)
})
.catch(reject)
OrderApi.apiGetAddressList({}).then(res => {
const rows = res.data.rows.map(item => {
return {
...item,
region: [item.province, item.city, item.district]
}
});
const defaultItemIndex = rows.findIndex(item => item.status === 'default');
if (defaultItemIndex !== -1) {
const [defaultItem] = rows.splice(defaultItemIndex, 1);
app.defaultId = defaultItem.id;
app.list = [defaultItem, ...rows];
} else {
app.list = rows;
}
})
.finally(() => app.isLoading = false)
},
// 获取默认的收货地址
getDefaultId() {
return new Promise((resolve, reject) => {
const app = this
AddressApi.defaultId()
.then(result => {
app.defaultId = result.data.defaultId
resolve(result)
})
.catch(reject)
})
},
// 列表排序把默认收货地址放到最前
onReorder() {
const app = this
app.list.sort(item => {
return item.address_id == app.defaultId ? -1 : 1
})
},
/**
* 添加新地址
*/
// 添加新地址
handleCreate() {
this.$navTo('pages/address/create')
},
/**
* 编辑地址
* @param {int} addressId 收货地址ID
*/
handleUpdate(addressId) {
this.$navTo('pages/address/update', { addressId })
// 编辑地址
handleUpdate(item) {
const data = encodeURIComponent(JSON.stringify(item))
this.$navTo('pages/address/update', { data })
},
/**
* 删除收货地址
* @param {int} addressId 收货地址ID
*/
// 删除收货地址
handleRemove(addressId) {
const app = this
uni.showModal({
@ -158,28 +111,19 @@
}
});
},
/**
* 确认删除收货地址
* @param {int} addressId 收货地址ID
*/
// 确认删除收货地址
onRemove(addressId) {
const app = this
AddressApi.remove(addressId)
OrderApi.apiInsertOrUpdateAddress({ id: addressId, status: 'deleted' })
.then(result => {
app.getPageData()
})
},
/**
* 设置为默认地址
* @param {Object} addressId
*/
// 设置为默认地址
handleSetDefault(addressId) {
const app = this
AddressApi.setDefault(addressId)
.then(result => {
// app.defaultId = addressId
OrderApi.apiInsertOrUpdateAddress({ id: addressId, status: 'default' })
.then(() => {
app.options.from === 'checkout' && uni.navigateBack()
})
}

87
pages/address/update.vue
View File

@ -5,11 +5,11 @@
<!-- 表单组件 -->
<view class="form-wrapper">
<u-form :model="form" ref="uForm" label-width="140rpx">
<u-form-item label="姓名" prop="name">
<u-input v-model="form.name" placeholder="请输入收货人姓名" />
<u-form-item label="姓名" prop="buyerName">
<u-input v-model="form.buyerName" placeholder="请输入收货人姓名" />
</u-form-item>
<u-form-item label="电话" prop="phone">
<u-input v-model="form.phone" placeholder="请输入收货人手机号" />
<u-form-item label="电话" prop="buyerPhone">
<u-input v-model="form.buyerPhone" placeholder="请输入收货人手机号" />
</u-form-item>
<u-form-item label="地区" prop="region">
<select-region ref="sRegion" v-model="form.region" />
@ -35,15 +35,16 @@
import SelectRegion from '@/components/select-region/select-region'
import { isMobile } from '@/utils/verify'
import * as AddressApi from '@/api/address'
import * as OrderApi from '@/api/order'
// 表单验证规则
const rules = {
name: [{
buyerName: [{
required: true,
message: '请输入姓名',
trigger: ['blur', 'change']
}],
phone: [{
buyerPhone: [{
required: true,
message: '请输入手机号',
trigger: ['blur', 'change']
@ -77,49 +78,25 @@
data() {
return {
form: {
content: '',
name: '',
phone: '',
buyerName: '',
buyerPhone: '',
region: [],
detail: ''
},
rules,
// 加载中
isLoading: true,
// 按钮禁用
disabled: false,
// 当前收货地址ID
addressId: null
disabled: false
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({ addressId }) {
// 当前收货地址ID
this.addressId = addressId
// 获取当前记录详情
this.getDetail()
onLoad({ data }) {
data = JSON.parse(decodeURIComponent(data))
this.createFormData(data)
},
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
onReady() {
this.$refs.uForm.setRules(this.rules)
this.$refs.uForm.setRules(this.rules) // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
},
methods: {
// 获取当前记录详情
getDetail() {
const app = this
AddressApi.detail(app.addressId)
.then(result => {
const detail = result.data.detail
app.createFormData(detail)
})
},
// 选择微信地址
// #ifdef MP-WEIXIN
chooseAddress() {
@ -127,8 +104,8 @@
uni.chooseAddress({
success(res) {
const names = $refs.sRegion.getOptionItemByNames(res)
form.name = res.userName
form.phone = res.telNumber
form.buyerName = res.userName
form.buyerPhone = res.telNumber
form.detail = res.detailInfo
form.region = names.length > 0 ? names : []
},
@ -139,34 +116,27 @@
})
},
// #endif
// 生成默认的表单数据
createFormData(detail) {
const { form } = this
form.name = detail.name
form.phone = detail.phone
form.buyerName = detail.buyerName
form.buyerPhone = detail.buyerPhone
form.detail = detail.detail
form.region = this.createRegion(detail)
},
// 格式化地区数据 (用于select-region组件)
createRegion(detail) {
if (detail.province_id == 0 || detail.city_id == 0 || detail.region_id == 0) {
this.$toast('很抱歉，地区未能识别请手动选择', 2000)
return []
}
return [{
label: detail.region.province,
value: detail.province_id
label: detail.province,
value: NaN
}, {
label: detail.region.city,
value: detail.city_id
label: detail.city,
value: NaN
}, {
label: detail.region.region,
value: detail.region_id
label: detail.district,
value: NaN
}]
},
// 表单提交
handleSubmit() {
const app = this
@ -176,16 +146,19 @@
app.$refs.uForm.validate(valid => {
if (valid) {
app.disabled = true
AddressApi.edit(app.addressId, app.form)
const data = { ...app.form }
data.province = data.region[0].label
data.city = data.region[1].label
data.district = data.region[2].label
OrderApi.apiInsertOrUpdateAddress(data)
.then(result => {
app.$toast(result.message)
app.$toast(result.msg)
uni.navigateBack()
})
.finally(() => app.disabled = false)
}
})
}
}
}
</script>