From f7639e65a604a6d3a312cbc06d500f13f8d4e4d3 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Mon, 26 May 2025 16:15:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(modifyAddress):=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80=E5=8E=BB=E9=99=A4=E5=AE=A1=E6=A0=B8=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E7=9B=B8=E5=85=B3=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=89=8B=E6=9C=BA=E5=8F=B7=E6=AD=A3=E5=88=99=E6=A0=A1?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/selfService/modifyAddress.vue | 123 +++++++--------
 src/util/README.md                           | 133 ++++++++++++++++
 src/util/validator.js                        | 156 +++++++++++++++++++
 3 files changed, 349 insertions(+), 63 deletions(-)
 create mode 100644 src/util/README.md
 create mode 100644 src/util/validator.js

diff --git a/src/components/selfService/modifyAddress.vue b/src/components/selfService/modifyAddress.vue
index bc5fc94..c4bb418 100644
--- a/src/components/selfService/modifyAddress.vue
+++ b/src/components/selfService/modifyAddress.vue
@@ -94,23 +94,7 @@
           min-width="120px"
           :label="'详细地址'"
         ></el-table-column>
-        <el-table-column
-          align="center"
-          prop="approveStatusVal"
-          :label="'审核状态'"
-        >
-          <template slot-scope="scope">
-            <div v-if="scope.row.approveStatus == 3">
-              <el-popover placement="right" width="400" trigger="hover">
-                <div v-html="scope.row.rejectMsg"></div>
-                <div style="color: #00417c; cursor: pointer" slot="reference">
-                  {{ scope.row.approveStatusVal }}
-                </div>
-              </el-popover>
-            </div>
-            <div v-else>{{ scope.row.approveStatusVal }}</div>
-          </template>
-        </el-table-column>
+
         <el-table-column align="center" prop="time" :label="'操作'">
           <template slot-scope="scope">
             <el-popover
@@ -153,7 +137,12 @@
         <!-- <div style="color: #666666; font-size: 16px; margin-bottom: 20px">
           {{ '注：修改地址后，若涉及运费问题，系统将自动扣除请在原订单基础上填写新的收货人信息' }}
         </div> -->
-        <el-form :model="pickForm" label-width="auto" ref="pickForm">
+        <el-form
+          :model="pickForm"
+          :rules="formRules"
+          label-width="auto"
+          ref="pickForm"
+        >
           <el-form-item :label="'订单编号'" prop="orderCode">
             <el-input disabled v-model="pickForm.orderCode"></el-input>
           </el-form-item>
@@ -198,9 +187,9 @@
               </div>
             </div>
           </el-form-item>
-          <el-form-item :label="`${$t('邮费扣除')}(￥)`" prop="newPostage">
+          <!-- <el-form-item :label="`${$t('邮费扣除')}(￥)`" prop="newPostage">
             <el-input disabled v-model="pickForm.newPostage"></el-input>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item :label="'备注'" prop="selfRemark">
             <el-input
               :placeholder="'请输入'"
@@ -226,35 +215,13 @@
     </el-dialog>
 
     <!-- 修改成功 -->
-    <el-dialog
-      :title="'提交成功'"
-      :visible.sync="successShow"
-      width="30%"
-      center
-    >
-      <div class="successdiv">
-        <div class="word1">
-          {{
-            "我们将在24小时内完成业务受理！具体进度将会以通知形式发送给您，请注意查收！"
-          }}
-        </div>
-        <!-- <div>{{'售后电话'}}：400-111-2818</div> -->
-        <div class="word2">
-          <el-button
-            class="common-dialog-footer-btn"
-            type="primary"
-            @click="successShow = false"
-            >确认</el-button
-          >
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import * as sel from "@/api/selfservice.js";
 import * as api from "@/api/register.js";
+import { createValidators } from "@/util/validator.js";
 export default {
   components: {},
   data() {
@@ -287,7 +254,6 @@ export default {
       },
       addressList: [],
       pickShow: false,
-      successShow: false,
       areaData: [],
       regionParams: {
         label: "name",
@@ -297,6 +263,24 @@ export default {
       },
       moren: "",
       postageData: {},
+      // 表单校验规则
+      formRules: {
+        newRecName: [
+          { required: true, message: "请输入收货人姓名", trigger: "blur" },
+        ],
+        newRecPhone: createValidators.mobile(true, "请输入正确的手机号码"),
+        newRecAddress: [
+          { required: true, message: "请输入详细地址", trigger: "blur" },
+        ],
+        dizhi: [
+          {
+            type: "array",
+            required: true,
+            message: "请选择收货地址",
+            trigger: "change",
+          },
+        ],
+      },
     };
   },
   // watch: {
@@ -311,26 +295,28 @@ export default {
     this.getAddressList();
   },
   methods: {
+    setPickForm(item) {
+      this.$set(this.pickForm, "newRecName", item.recName);
+      this.$set(this.pickForm, "nameList", item.recArea);
+      this.$set(this.pickForm, "newRecPhone", item.recPhone);
+      this.$set(this.pickForm, "newRecAddress", item.recAddress);
+      this.$set(this.pickForm, "newRecProvince", item.recProvince);
+      this.$set(this.pickForm, "newRecCity", item.recCity);
+      this.$set(this.pickForm, "newRecCounty", item.recCounty);
+    },
     checkRadio() {
       this.$set(this.pickForm, "dizhi", []);
       let arr = [];
       this.addressList.forEach((item) => {
         if (item.pkId == this.moren) {
-          // this.pickForm.newRecName = item.recName
-          // this.pickForm.nameList = item.recArea
-          // this.pickForm.newRecPhone = item.recPhone
-          // this.pickForm.newRecAddress = item.recAddress
-          // this.pickForm.newRecProvince = item.recProvince
-          // this.pickForm.newRecCity = item.recCity
-          // this.pickForm.newRecCounty = item.recCounty
-          this.$set(this.pickForm, "newRecName", item.recName);
-          this.$set(this.pickForm, "nameList", item.recArea);
-          this.$set(this.pickForm, "newRecPhone", item.recPhone);
-          this.$set(this.pickForm, "newRecAddress", item.recAddress);
-          this.$set(this.pickForm, "newRecProvince", item.recProvince);
-          this.$set(this.pickForm, "newRecCity", item.recCity);
-          this.$set(this.pickForm, "newRecCounty", item.recCounty);
-
+          // this.$set(this.pickForm, "newRecName", item.recName);
+          // this.$set(this.pickForm, "nameList", item.recArea);
+          // this.$set(this.pickForm, "newRecPhone", item.recPhone);
+          // this.$set(this.pickForm, "newRecAddress", item.recAddress);
+          // this.$set(this.pickForm, "newRecProvince", item.recProvince);
+          // this.$set(this.pickForm, "newRecCity", item.recCity);
+          // this.$set(this.pickForm, "newRecCounty", item.recCounty);
+          this.setPickForm(item);
           arr = [
             item.recProvince + "",
             item.recCity + "",
@@ -342,7 +328,7 @@ export default {
         return s && s.trim();
       });
       this.$set(this.pickForm, "dizhi", arr);
-      this.getPostAge();
+      // this.getPostAge();
       this.$forceUpdate();
     },
     //查询邮费
@@ -361,7 +347,7 @@ export default {
         this.addressList = res.data;
       });
     },
-    setDizhi(e, val) {
+    setDizhi(e) {
       let arr = this.flatten(this.areaData);
       let nameList = "";
       arr.forEach((item) => {
@@ -377,7 +363,7 @@ export default {
       if (e.length > 2) {
         this.pickForm.newRecCounty = e[2];
       }
-      this.getPostAge();
+      // this.getPostAge();
       this.$forceUpdate();
     },
     flatten(arr) {
@@ -399,8 +385,8 @@ export default {
         if (valid) {
           sel.saveSelfAddress(this.pickForm).then((res) => {
             if (res.code == 200) {
-              this.successShow = true;
               this.$refs.pickForm.clearValidate();
+              this.$message.success("修改成功");
               this.pickShow = false;
               this.getDataList();
             }
@@ -411,6 +397,17 @@ export default {
     //修改地址
     pickOrder(item) {
       this.pickForm = item;
+      this.setPickForm(item);
+      this.$set(this.pickForm, "orderCode", item.orderCode);
+      // this.$set(this.pickForm, "dizhi", [
+      //   String(item.recProvince),
+      //   String(item.recCity),
+      //   String(item.recCounty),
+      // ]);
+      this.moren =
+        this.addressList.find((item) => item.isDefault === 1)?.pkId ||
+        this.addressList[0].pkId;
+      this.checkRadio();
       this.pickShow = true;
       this.postageData = {
         specialArea: item.specialArea,
diff --git a/src/util/README.md b/src/util/README.md
new file mode 100644
index 0000000..3b23c13
--- /dev/null
+++ b/src/util/README.md
@@ -0,0 +1,133 @@
+# 校验工具使用说明
+
+## 概述
+
+`validator.js` 是一个通用的表单校验工具，提供了常用的校验规则和方法，遵循高内聚低耦合的设计原则。
+
+## 引入方式
+
+```javascript
+// 完整引入
+import validator from '@/utils/validator.js';
+
+// 按需引入
+import { createValidators, validators, REGEX_PATTERNS } from '@/utils/validator.js';
+```
+
+## 使用方法
+
+### 1. 在Element UI表单中使用校验规则
+
+```javascript
+export default {
+  data() {
+    return {
+      form: {
+        mobile: '',
+        email: '',
+        name: ''
+      },
+      // 表单校验规则
+      formRules: {
+        // 手机号校验（必填）
+        mobile: createValidators.mobile(true, '请输入正确的手机号码'),
+        
+        // 邮箱校验（非必填）
+        email: createValidators.email(false, '请输入正确的邮箱地址'),
+        
+        // 中文姓名校验
+        name: createValidators.chineseName(true, '请输入正确的中文姓名'),
+        
+        // 组合使用多个校验规则
+        description: [
+          createValidators.required('请输入描述'),
+          createValidators.length(10, 200, '描述长度为10-200个字符')
+        ]
+      }
+    };
+  }
+}
+```
+
+### 2. 直接校验（非表单场景）
+
+```javascript
+import { validators } from '@/utils/validator.js';
+
+// 校验手机号
+const isValidMobile = validators.isMobile('13812345678'); // true
+
+// 校验邮箱
+const isValidEmail = validators.isEmail('test@example.com'); // true
+
+// 校验中文姓名
+const isValidName = validators.isChineseName('张三'); // true
+```
+
+### 3. 使用正则表达式
+
+```javascript
+import { REGEX_PATTERNS } from '@/utils/validator.js';
+
+// 直接使用正则
+const mobileRegex = REGEX_PATTERNS.mobile;
+const isValid = mobileRegex.test('13812345678');
+```
+
+## 可用的校验规则
+
+### createValidators（用于Element UI表单）
+
+- `mobile(required, message)` - 手机号校验
+- `email(required, message)` - 邮箱校验
+- `chineseName(required, message)` - 中文姓名校验
+- `required(message)` - 必填校验
+- `length(min, max, message)` - 长度校验
+
+### validators（直接校验方法）
+
+- `isMobile(mobile)` - 校验手机号
+- `isEmail(email)` - 校验邮箱
+- `isChineseName(name)` - 校验中文姓名
+
+### REGEX_PATTERNS（正则表达式）
+
+- `mobile` - 手机号：1开头的11位数字
+- `email` - 邮箱地址
+- `idCard` - 身份证号
+- `chineseName` - 中文姓名
+- `number` - 数字
+- `positiveInteger` - 正整数
+
+## 扩展校验规则
+
+如需添加新的校验规则，请在 `validator.js` 文件中：
+
+1. 在 `REGEX_PATTERNS` 中添加新的正则表达式
+2. 在 `createValidators` 中添加对应的表单校验方法
+3. 在 `validators` 中添加对应的直接校验方法
+
+示例：
+```javascript
+// 添加新的正则
+REGEX_PATTERNS.newRule = /^your-regex$/;
+
+// 添加表单校验方法
+createValidators.newRule = function(required = true, message = '默认错误信息') {
+  const rules = [];
+  if (required) {
+    rules.push({ required: true, message: '请输入内容', trigger: 'blur' });
+  }
+  rules.push({
+    pattern: REGEX_PATTERNS.newRule,
+    message,
+    trigger: 'blur'
+  });
+  return rules;
+};
+
+// 添加直接校验方法
+validators.isNewRule = function(value) {
+  return REGEX_PATTERNS.newRule.test(value);
+};
+``` 
\ No newline at end of file
diff --git a/src/util/validator.js b/src/util/validator.js
new file mode 100644
index 0000000..ce03af0
--- /dev/null
+++ b/src/util/validator.js
@@ -0,0 +1,156 @@
+/**
+ * 通用校验规则工具
+ * 高内聚低耦合的校验规则封装
+ */
+
+// 正则表达式集合
+const REGEX_PATTERNS = {
+  // 手机号：1开头的11位数字
+  mobile: /^1\d{10}$/,
+  // 邮箱
+  email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+  // 身份证号
+  idCard:
+    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
+  // 中文姓名
+  chineseName: /^[\u4e00-\u9fa5]{2,4}$/,
+  // 数字
+  number: /^\d+$/,
+  // 正整数
+  positiveInteger: /^[1-9]\d*$/,
+};
+
+// 校验规则生成器
+const createValidators = {
+  /**
+   * 手机号校验
+   * @param {boolean} required - 是否必填
+   * @param {string} message - 自定义错误信息
+   * @returns {Array} Element UI 校验规则数组
+   */
+  mobile(required = true, message = "请输入正确的手机号码") {
+    const rules = [];
+    if (required) {
+      rules.push({
+        required: true,
+        message: "请输入手机号码",
+        trigger: "blur",
+      });
+    }
+    rules.push({
+      pattern: REGEX_PATTERNS.mobile,
+      message,
+      trigger: "blur",
+    });
+    return rules;
+  },
+
+  /**
+   * 邮箱校验
+   * @param {boolean} required - 是否必填
+   * @param {string} message - 自定义错误信息
+   * @returns {Array} Element UI 校验规则数组
+   */
+  email(required = false, message = "请输入正确的邮箱地址") {
+    const rules = [];
+    if (required) {
+      rules.push({
+        required: true,
+        message: "请输入邮箱地址",
+        trigger: "blur",
+      });
+    }
+    rules.push({
+      pattern: REGEX_PATTERNS.email,
+      message,
+      trigger: "blur",
+    });
+    return rules;
+  },
+
+  /**
+   * 中文姓名校验
+   * @param {boolean} required - 是否必填
+   * @param {string} message - 自定义错误信息
+   * @returns {Array} Element UI 校验规则数组
+   */
+  chineseName(required = true, message = "请输入正确的中文姓名") {
+    const rules = [];
+    if (required) {
+      rules.push({ required: true, message: "请输入姓名", trigger: "blur" });
+    }
+    rules.push({
+      pattern: REGEX_PATTERNS.chineseName,
+      message,
+      trigger: "blur",
+    });
+    return rules;
+  },
+
+  /**
+   * 必填校验
+   * @param {string} message - 错误信息
+   * @returns {Object} Element UI 校验规则
+   */
+  required(message = "此字段不能为空") {
+    return { required: true, message, trigger: "blur" };
+  },
+
+  /**
+   * 长度校验
+   * @param {number} min - 最小长度
+   * @param {number} max - 最大长度
+   * @param {string} message - 自定义错误信息
+   * @returns {Object} Element UI 校验规则
+   */
+  length(min, max, message) {
+    const defaultMessage = max
+      ? `长度在 ${min} 到 ${max} 个字符`
+      : `长度不能少于 ${min} 个字符`;
+    return {
+      min,
+      max,
+      message: message || defaultMessage,
+      trigger: "blur",
+    };
+  },
+};
+
+// 直接校验函数（用于非表单场景）
+const validators = {
+  /**
+   * 校验手机号
+   * @param {string} mobile - 手机号
+   * @returns {boolean} 校验结果
+   */
+  isMobile(mobile) {
+    return REGEX_PATTERNS.mobile.test(mobile);
+  },
+
+  /**
+   * 校验邮箱
+   * @param {string} email - 邮箱
+   * @returns {boolean} 校验结果
+   */
+  isEmail(email) {
+    return REGEX_PATTERNS.email.test(email);
+  },
+
+  /**
+   * 校验中文姓名
+   * @param {string} name - 姓名
+   * @returns {boolean} 校验结果
+   */
+  isChineseName(name) {
+    return REGEX_PATTERNS.chineseName.test(name);
+  },
+};
+
+export { REGEX_PATTERNS, createValidators, validators };
+
+// 默认导出
+export default {
+  REGEX_PATTERNS,
+  createValidators,
+  validators,
+};