feat(modifyAddress): 修改地址去除审核状态相关展示，添加手机号正则校验
This commit is contained in:
woody
parent
4d3aa9578b
commit
f7639e65a6
|
|
@ -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,18 +295,7 @@ export default {
|
|||
this.getAddressList();
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
setPickForm(item) {
|
||||
this.$set(this.pickForm, "newRecName", item.recName);
|
||||
this.$set(this.pickForm, "nameList", item.recArea);
|
||||
this.$set(this.pickForm, "newRecPhone", item.recPhone);
|
||||
|
|
@ -330,7 +303,20 @@ export default {
|
|||
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.$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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
```
|
||||
|
|
@ -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,
|
||||
};
|
||||
Loading…
Reference in New Issue