收货地址:编辑/新增

pull/29/head^2
YunaiV 2023-12-16 20:37:37 +08:00
parent 5bcf44b7a9
commit cfb514e276
5 changed files with 127 additions and 174 deletions

View File

@ -1,10 +1,11 @@
<!-- 收货地址的新增/编辑 -->
<template>
<s-layout :title="state.model.id ? '编辑地址' : '新增地址'">
<uni-forms ref="addressFormRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
<uni-forms ref="addressFormRef" v-model="state.model" :rules="rules" validateTrigger="bind"
labelWidth="160" labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
<view class="bg-white form-box ss-p-x-30">
<uni-forms-item name="consignee" label="收货人" class="form-item">
<uni-easyinput v-model="state.model.consignee" placeholder="请填写收货人姓名" :inputBorder="false"
<uni-forms-item name="name" label="收货人" class="form-item">
<uni-easyinput v-model="state.model.name" placeholder="请填写收货人姓名" :inputBorder="false"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
</uni-forms-item>
@ -13,178 +14,160 @@
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="region" label="省市区" @tap="state.showRegion = true" class="form-item">
<uni-easyinput v-model="state.model.region" disabled :inputBorder="false"
<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
:styles="{ disableColor: '#fff', color: '#333' }"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请选择省市区">
<template v-slot:right>
<uni-icons type="right"></uni-icons>
<uni-icons type="right" />
</template>
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="address" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
<uni-forms-item name="detailAddress" label="详细地址" :formItemStyle="{ alignItems: 'flex-start' }"
:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.address"
<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.detailAddress"
placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
placeholder="请输入详细地址" clearable></uni-easyinput>
placeholder="请输入详细地址" clearable />
</uni-forms-item>
</view>
<view class="ss-m-y-20 bg-white ss-p-x-30 ss-flex ss-row-between ss-col-center default-box">
<view class="default-box-title"> 设为默认地址 </view>
<su-switch style="transform: scale(0.8)" v-model="state.model.is_default"></su-switch>
<su-switch style="transform: scale(0.8)" v-model="state.model.defaultStatus" />
</view>
</uni-forms>
<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
<view class="footer-box ss-flex-col ss-row-between ss-p-20">
<view class="ss-m-b-20"><button class="ss-reset-button save-btn ui-Shadow-Main"
@tap="onSave">保存</button></view>
<view class="ss-m-b-20">
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave"></button>
</view>
<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
删除
</button>
</view>
</su-fixed>
<!-- 省市区弹窗 -->
<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm">
</su-region-picker>
<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
</s-layout>
</template>
<script setup>
import {
computed,
watch,
ref,
reactive,
unref
} from 'vue';
import { ref, reactive, unref } from 'vue';
import sheep from '@/sheep';
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
import { onLoad } from '@dcloudio/uni-app';
import _ from 'lodash';
import {
consignee,
mobile,
address,
region
} from '@/sheep/validate/form';
import { mobile } from '@/sheep/validate/form';
import AreaApi from '@/sheep/api/system/area';
import AddressApi from '@/sheep/api/member/address';
const addressFormRef = ref(null);
const state = reactive({
showRegion: false,
model: {
consignee: '',
name: '',
mobile: '',
address: '',
is_default: false,
region: '',
},
rules: {
consignee,
mobile,
address,
region,
detailAddress: '',
defaultStatus: false,
areaName: '',
},
rules: {},
});
watch(
() => state.model.province_name,
(newValue) => {
if (newValue) {
state.model.region =
`${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
}
}, {
deep: true,
},
);
const rules = {
name: {
rules: [
{
required: true,
errorMessage: '请输入收货人姓名',
},
],
},
mobile,
detailAddress: {
rules: [{
required: true,
errorMessage: '请输入详细地址',
}]
},
areaName: {
rules: [{
required: true,
errorMessage: '请选择您的位置'
}]
},
};
//
const onRegionConfirm = (e) => {
console.log(e);
state.model = {
...state.model,
...e,
};
state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`
state.model.areaId = e.district_id;
state.showRegion = false;
};
//
const getAreaData = () => {
if (_.isEmpty(uni.getStorageSync('areaData'))) {
sheep.$api.data.area().then((res) => {
if (res.code === 0) {
uni.setStorageSync('areaData', res.data);
}
});
AreaApi.getAreaTree().then((res) => {
if (res.code === 0) {
uni.setStorageSync('areaData', res.data);
}
});
}
};
//
const onSave = async () => {
//
const validate = await unref(addressFormRef)
.validate()
.catch((error) => {
console.log('error: ', error);
});
if (!validate) return;
if (!validate) {
return;
}
let res = null;
if (state.model.id) {
res = await sheep.$api.user.address.update({
id: state.model.id,
areaId: state.model.district_id,
defaultStatus: state.model.is_default,
detailAddress: state.model.address,
mobile: state.model.mobile,
name: state.model.consignee
});
} else {
res = await sheep.$api.user.address.create({
areaId: state.model.district_id,
defaultStatus: state.model.is_default,
detailAddress: state.model.address,
mobile: state.model.mobile,
name: state.model.consignee
});
}
if (res.code === 0) {
//
const formData = {
...state.model
}
const {code } = state.model.id > 0 ? await AddressApi.updateAddress(formData)
: await AddressApi.createAddress(formData);
if (code === 0) {
sheep.$router.back();
}
};
//
const onDelete = () => {
uni.showModal({
title: '提示',
content: '确认删除此收货地址吗?',
success: async function(res) {
if (res.confirm) {
const {
code
} = await sheep.$api.user.address.delete(state.model.id);
if (code === 0) {
sheep.$router.back();
}
if (!res.confirm) {
return;
}
const { code } = await AddressApi.deleteAddress(state.model.id);
if (code === 0) {
sheep.$router.back();
}
},
});
};
onLoad(async (options) => {
getAreaData();
if (options.id) {
let res = await sheep.$api.user.address.detail(options.id);
if (res.code === 0) {
state.model = {
...state.model,
district_id: res.data.areaId,
is_default: res.data.defaultStatus,
address: res.data.detailAddress,
mobile: res.data.mobile,
consignee: res.data.name,
id: res.data.id,
province_name: res.data.areaName.split(' ')[0],
city_name: res.data.areaName.split(' ')[1],
district_name: res.data.areaName.split(' ')[2]
};
}
}
onLoad(async (options) => {
//
getAreaData();
// id
if (options.id) {
let { code, data} = await AddressApi.getAddress(options.id);
if (code !== 0) {
return;
}
state.model = data;
}
// TODO
if (options.data) {
let data = JSON.parse(options.data);
const areaData = uni.getStorageSync('areaData');

View File

@ -8,6 +8,38 @@ const AddressApi = {
method: 'GET'
});
},
// 创建用户收件地址
createAddress: (data) => {
return request2({
url: '/app-api/member/address/create',
method: 'POST',
data
});
},
// 更新用户收件地址
updateAddress: (data) => {
return request2({
url: '/app-api/member/address/update',
method: 'PUT',
data
});
},
// 获得用户收件地址
getAddress: (id) => {
return request2({
url: '/app-api/member/address/get',
method: 'GET',
params: { id }
});
},
// 删除用户收件地址
deleteAddress: (id) => {
return request2({
url: '/app-api/member/address/delete',
method: 'DELETE',
params: { id }
});
},
};
export default AddressApi;

View File

@ -218,12 +218,6 @@ export default {
method: 'GET',
custom: {},
}),
// list: () =>
// request({
// url: 'user/address',
// method: 'GET',
// custom: {},
// }),
create: (data) =>
request2({
url: 'member/address/create',
@ -233,15 +227,6 @@ export default {
showSuccess: true,
},
}),
// create: (data) =>
// request({
// url: 'user/address',
// method: 'POST',
// data,
// custom: {
// showSuccess: true,
// },
// }),
update: (data) =>
request2({
url: 'member/address/update',
@ -251,35 +236,16 @@ export default {
showSuccess: true,
},
}),
// update: (id, data) =>
// request({
// url: 'user/address/' + id,
// method: 'PUT',
// data,
// custom: {
// showSuccess: true,
// },
// }),
detail: (id) =>
request2({
url: 'member/address/get?id=' + id,
method: 'GET',
}),
// detail: (id) =>
// request({
// url: 'user/address/' + id,
// method: 'GET',
// }),
delete: (id) =>
request2({
url: 'member/address/delete?id=' + id,
method: 'DELETE',
}),
// delete: (id) =>
// request({
// url: 'user/address/' + id,
// method: 'DELETE',
// }),
},
invoice: {
list: () =>

View File

@ -1,3 +1,4 @@
<!-- 省市区选择弹窗 -->
<template>
<su-popup :show="show" @close="onCancel" round="20">
<view class="ui-region-picker">
@ -9,7 +10,7 @@
title="选择区域"
@cancel="onCancel"
@confirm="onConfirm('confirm')"
></su-toolbar>
/>
<view class="ui-picker-body">
<picker-view
:value="state.currentIndex"

View File

@ -187,32 +187,6 @@ export const alipayAccount = {
],
};
export const consignee = {
rules: [
{
required: true,
errorMessage: '请输入收货人姓名',
},
],
};
export const region = {
rules: [
{
required: true,
errorMessage: '请选择您的位置',
},
],
};
export const address = {
rules: [
{
required: true,
errorMessage: '请输入详细地址',
},
],
};
export default {
mobile,
alipayAccount,
@ -222,9 +196,6 @@ export default {
password,
code,
account,
consignee,
address,
region,
taxNo,
taxName,
};