✨ 收货地址：编辑/新增

pages/user/address/edit.vue

@@ -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-forms-item name="name" label="收货人" class="form-item">
-					<uni-easyinput v-model="state.model.consignee" placeholder="请填写收货人姓名" :inputBorder="false"
+					<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-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
-					<uni-easyinput v-model="state.model.region" disabled :inputBorder="false"
+					<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"
+				<view class="ss-m-b-20">
-						@tap="onSave">保存</button></view>
+          <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 :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />
-		</su-region-picker>
 	</s-layout>
 </template>
 
 <script setup>
-	import {
+	import { ref, reactive, unref } from 'vue';
-		computed,
-		watch,
-		ref,
-		reactive,
-		unref
-	} from 'vue';
 	import sheep from '@/sheep';
-	import {
+	import { onLoad } from '@dcloudio/uni-app';
-		onLoad,
-		onPageScroll
-	} from '@dcloudio/uni-app';
 	import _ from 'lodash';
-	import {
+	import { mobile } from '@/sheep/validate/form';
-		consignee,
+  import AreaApi from '@/sheep/api/system/area';
-		mobile,
+  import AddressApi from '@/sheep/api/member/address';
-		address,
-		region
-	} from '@/sheep/validate/form';
 
 	const addressFormRef = ref(null);
 	const state = reactive({
 		showRegion: false,
 		model: {
-			consignee: '',
+			name: '',
 			mobile: '',
-			address: '',
+      detailAddress: '',
-			is_default: false,
+			defaultStatus: false,
-			region: '',
+      areaName: '',
-		},
-		rules: {
-			consignee,
-			mobile,
-			address,
-			region,
 		},
+    rules: {},
 	});
-	watch(
+
-		() => state.model.province_name,
+  const rules = {
-		(newValue) => {
+    name: {
-			if (newValue) {
+      rules: [
-				state.model.region =
+        {
-					`${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
+          required: true,
-			}
+          errorMessage: '请输入收货人姓名',
-		}, {
+        },
-			deep: true,
+      ],
+    },
+    mobile,
+    detailAddress: {
+      rules: [{
+        required: true,
+        errorMessage: '请输入详细地址',
+      }]
+    },
+    areaName: {
+      rules: [{
+        required: true,
+        errorMessage: '请选择您的位置'
+      }]
     },
-	);
-	const onRegionConfirm = (e) => {
-		console.log(e);
-		state.model = {
-			...state.model,
-			...e,
   };
+
+  // 确认选择地区
+	const onRegionConfirm = (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) => {
+      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) {
+				if (!res.confirm) {
-					const {
+					return;
-						code
+				}
-					} = await sheep.$api.user.address.delete(state.model.id);
+        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');

sheep/api/member/address.js

@@ -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;

sheep/api/user.js

@@ -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: () =>

sheep/ui/su-region-picker/su-region-picker.vue

@@ -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"

sheep/validate/form.js

@@ -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,
 };