CRM_26-07-21#story#9039,服务商在调度端App与系统中能变更基础信息及对应区域经理审核功能增加
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
import request from '@/utils/http'
|
||||
|
||||
/**
|
||||
* 查询当前服务商分时段电话列表和审批状态
|
||||
* @param {Object} params
|
||||
* @param {number} params.supplierId 服务商 ID
|
||||
*/
|
||||
export function getSupplierPhoneList(params) {
|
||||
return request({
|
||||
url: '/supplierAppV2/dispatchApp/supplierPhone/list',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询当前服务商电话时段变更审批状态
|
||||
* @param {Object} params
|
||||
* @param {number} params.supplierId 服务商 ID
|
||||
*/
|
||||
export function getSupplierPhoneApprovalStatus(params) {
|
||||
return request({
|
||||
url: '/supplierAppV2/dispatchApp/supplierPhone/approvalStatus',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交服务商电话时段变更审批
|
||||
* @param {Object} data
|
||||
* @param {number} data.supplierId 服务商 ID
|
||||
* @param {string} [data.modifyReason] 修改原因
|
||||
* @param {Array} data.phoneList 电话时段草稿列表
|
||||
*/
|
||||
export function submitSupplierPhoneApproval(data) {
|
||||
return request({
|
||||
url: '/supplierAppV2/dispatchApp/supplierPhone/submit',
|
||||
method: 'POST',
|
||||
contentType: 'application/json',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -43,6 +43,22 @@ const routes = [
|
||||
title: '信息查看',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/supplierTimePhone',
|
||||
name: 'supplierTimePhone',
|
||||
component: () => import('@/views/index/supplierTimePhone'),
|
||||
meta:{
|
||||
title: '供应商时段电话',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/supplierTimePhoneEdit',
|
||||
name: 'supplierTimePhoneEdit',
|
||||
component: () => import('@/views/index/supplierTimePhoneEdit'),
|
||||
meta:{
|
||||
title: '编辑时段电话',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/toDoList',
|
||||
name: 'toDoList',
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 校验电话号码
|
||||
* 支持：大陆手机号、大陆固话、400电话、港澳手机号
|
||||
* @param {string} phone
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function isValidPhone(phone) {
|
||||
if (!phone) return false
|
||||
// 大陆手机号
|
||||
const mainlandMobile = /^1[3-9]\d{9}$/
|
||||
// 大陆固话：区号(可选) + 7~8位号码
|
||||
const mainlandLandline = /^(0\d{2,3}-?)\d{7,8}$/
|
||||
// 400电话
|
||||
const phone400 = /^400-?\d{3}-?\d{4}$/
|
||||
// 港澳手机号（8位，首位5/6/8/9）
|
||||
const hkMacaoMobile = /^[5689]\d{7}$/
|
||||
// 港澳固话
|
||||
const hkMacaoLandline = /^(\d{4}-?)?\d{4}$/
|
||||
|
||||
return (
|
||||
mainlandMobile.test(phone) ||
|
||||
mainlandLandline.test(phone) ||
|
||||
phone400.test(phone) ||
|
||||
hkMacaoMobile.test(phone) ||
|
||||
hkMacaoLandline.test(phone)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验时段格式 HH:mm 及起止关系
|
||||
* @param {string} startTime
|
||||
* @param {string} endTime
|
||||
* @returns {{valid: boolean, message?: string}}
|
||||
*/
|
||||
export function validateTimeRange(startTime, endTime) {
|
||||
const timeRegex = /^([0-1]\d|2[0-3]):([0-5]\d)$/
|
||||
if (!startTime || !endTime) {
|
||||
return { valid: false, message: '请填写完整的起止时段' }
|
||||
}
|
||||
if (!timeRegex.test(startTime) || !timeRegex.test(endTime)) {
|
||||
return { valid: false, message: '时段格式不正确，应为 00:00 ~ 23:59' }
|
||||
}
|
||||
const [startH, startM] = startTime.split(':').map(Number)
|
||||
const [endH, endM] = endTime.split(':').map(Number)
|
||||
const start = startH * 60 + startM
|
||||
const end = endH * 60 + endM
|
||||
if (start > end) {
|
||||
return { valid: false, message: '开始时间不得晚于结束时间' }
|
||||
}
|
||||
return { valid: true }
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<van-nav-bar
|
||||
title="供应商时段电话"
|
||||
left-arrow
|
||||
@click-left="goBack"
|
||||
fixed
|
||||
placeholder
|
||||
class="nav-bar"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<!-- 审批状态提示条 -->
|
||||
<div v-if="inApproval" class="status-tip status-tip--pending">
|
||||
服务商-电话时段变更审核中
|
||||
</div>
|
||||
<div v-else-if="rejected" class="status-tip status-tip--danger">
|
||||
<div class="status-tip__title">审批被驳回</div>
|
||||
<div v-if="approvalRemark" class="status-tip__desc">{{ approvalRemark }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 空态 -->
|
||||
<div v-if="!phoneList.length" class="empty-wrap">
|
||||
<div class="empty-text">暂无分时段电话，点击新增时段电话</div>
|
||||
</div>
|
||||
|
||||
<!-- 时段卡片列表 -->
|
||||
<div v-else class="card-list">
|
||||
<div v-for="(item, index) in phoneList" :key="index" class="time-card" @click="goEdit(index)">
|
||||
<div class="card-head">
|
||||
<span class="period">{{ item.startTime }} — {{ item.endTime }}</span>
|
||||
<div class="ops" @click.stop>
|
||||
<span class="op-edit" @click="goEdit(index)">编辑</span>
|
||||
<span class="op-del" @click="deleteItem(index)">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="phone-rows">
|
||||
<div v-for="phone in visiblePhones(item)" :key="phone.index" class="phone-row">
|
||||
<span class="phone-icon">☎</span>
|
||||
<span class="phone-num">{{ phone.num }}</span>
|
||||
<span v-if="phone.desc" class="tag">{{ phone.desc }}</span>
|
||||
<span v-if="phone.wx" class="tag tag-wx">微:{{ phone.wx }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="footer">
|
||||
<button v-if="!inApproval" class="btn btn-add" @click="goAdd">＋ 新增时段</button>
|
||||
<button
|
||||
class="btn btn-submit"
|
||||
:disabled="inApproval || !phoneList.length"
|
||||
@click="onSubmitClick"
|
||||
>
|
||||
{{ inApproval ? '审核中' : '提交审批' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSupplierPhoneList, submitSupplierPhoneApproval } from '@/api/supplierPhone'
|
||||
import { myMixins } from '@/utils/myMixins'
|
||||
import { Dialog, Toast } from 'vant'
|
||||
|
||||
const DRAFT_KEY_PREFIX = 'supplierTimePhoneDraft_'
|
||||
|
||||
function getSupplierIdFromToken() {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) return null
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split('.')[1]))
|
||||
return payload.supplierId || null
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function getDraftKey(supplierId) {
|
||||
return `${DRAFT_KEY_PREFIX}${supplierId}`
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'supplierTimePhone',
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
supplierId: null,
|
||||
supplierName: '',
|
||||
approvalId: null,
|
||||
approvalState: null,
|
||||
approvalStateName: '',
|
||||
inApproval: false,
|
||||
rejected: false,
|
||||
approvalRemark: '',
|
||||
phoneList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.supplierId = this.$route.query.supplierId || getSupplierIdFromToken()
|
||||
if (!this.supplierId) {
|
||||
Toast('未获取到服务商信息')
|
||||
return
|
||||
}
|
||||
this.loadData()
|
||||
},
|
||||
activated() {
|
||||
// 从编辑页返回时刷新本地草稿
|
||||
if (this.supplierId) {
|
||||
this.loadDraft()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
Toast.loading({ message: '加载中...', forbidClick: true, duration: 0 })
|
||||
try {
|
||||
const res = await getSupplierPhoneList({ supplierId: this.supplierId })
|
||||
this.supplierName = res?.supplierName || ''
|
||||
this.approvalId = res?.approvalId || null
|
||||
this.approvalState = res?.approvalState || null
|
||||
this.approvalStateName = res?.approvalStateName || ''
|
||||
this.inApproval = !!res?.inApproval
|
||||
this.rejected = !!res?.rejected
|
||||
this.approvalRemark = res?.approvalRemark || ''
|
||||
|
||||
const cached = this.getCachedDraft()
|
||||
if (cached && cached.approvalId === this.approvalId && cached.approvalState === this.approvalState) {
|
||||
this.phoneList = cached.phoneList || []
|
||||
} else {
|
||||
this.phoneList = res?.phoneList || []
|
||||
this.saveDraft()
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
Toast.clear()
|
||||
}
|
||||
},
|
||||
loadDraft() {
|
||||
const cached = this.getCachedDraft()
|
||||
if (cached) {
|
||||
this.phoneList = cached.phoneList || []
|
||||
}
|
||||
},
|
||||
visiblePhones(item) {
|
||||
const list = []
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const num = item['phone' + i]
|
||||
if (num) {
|
||||
list.push({
|
||||
index: i,
|
||||
num,
|
||||
desc: item['phone' + i + 'Desc'],
|
||||
wx: item['phone' + i + 'WechatId']
|
||||
})
|
||||
}
|
||||
}
|
||||
return list
|
||||
},
|
||||
getCachedDraft() {
|
||||
try {
|
||||
const raw = localStorage.getItem(getDraftKey(this.supplierId))
|
||||
return raw ? JSON.parse(raw) : null
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
},
|
||||
saveDraft() {
|
||||
const draft = {
|
||||
approvalId: this.approvalId,
|
||||
approvalState: this.approvalState,
|
||||
phoneList: this.phoneList
|
||||
}
|
||||
localStorage.setItem(getDraftKey(this.supplierId), JSON.stringify(draft))
|
||||
},
|
||||
goAdd() {
|
||||
this.goPage('supplierTimePhoneEdit', { supplierId: this.supplierId, index: -1 })
|
||||
},
|
||||
goEdit(index) {
|
||||
this.goPage('supplierTimePhoneEdit', { supplierId: this.supplierId, index })
|
||||
},
|
||||
deleteItem(index) {
|
||||
Dialog.confirm({
|
||||
title: '提示',
|
||||
message: '确定删除该时段电话？'
|
||||
}).then(() => {
|
||||
this.phoneList.splice(index, 1)
|
||||
this.saveDraft()
|
||||
}).catch(() => {})
|
||||
},
|
||||
async onSubmitClick() {
|
||||
if (this.inApproval) return
|
||||
if (!this.phoneList.length) {
|
||||
Toast('请先添加至少一个时段电话')
|
||||
return
|
||||
}
|
||||
if (!this.phoneList.every(item => item.phone1)) {
|
||||
Toast('每条时段电话1均必填')
|
||||
return
|
||||
}
|
||||
|
||||
Toast.loading({ message: '提交中...', forbidClick: true, duration: 0 })
|
||||
try {
|
||||
await submitSupplierPhoneApproval({
|
||||
supplierId: this.supplierId,
|
||||
modifyReason: '',
|
||||
phoneList: this.phoneList
|
||||
})
|
||||
Toast.success('提交成功')
|
||||
localStorage.removeItem(getDraftKey(this.supplierId))
|
||||
this.loadData()
|
||||
} catch (e) {
|
||||
Toast(e?.message || '提交失败，请重试')
|
||||
} finally {
|
||||
Toast.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
box-sizing: border-box;
|
||||
background: #f4f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .nav-bar {
|
||||
.van-nav-bar {
|
||||
background: #2b6cff;
|
||||
}
|
||||
.van-nav-bar__title,
|
||||
.van-nav-bar__arrow {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.status-tip {
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
&--pending {
|
||||
background: #eef3ff;
|
||||
color: #2b6cff;
|
||||
}
|
||||
&--danger {
|
||||
background: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
}
|
||||
&__desc {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
text-align: center;
|
||||
padding: 60px 0;
|
||||
.empty-text {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.time-card {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.period {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
background: #eef3ff;
|
||||
padding: 4px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ops {
|
||||
font-size: 13px;
|
||||
color: #2b6cff;
|
||||
span {
|
||||
margin-left: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.op-del {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.phone-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 0;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.phone-icon {
|
||||
color: #2b6cff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.phone-num {
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 6px;
|
||||
background: #f2f3f5;
|
||||
color: #666;
|
||||
}
|
||||
.tag-wx {
|
||||
background: #e8f8ee;
|
||||
color: #1a8a4a;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-add {
|
||||
flex: 0 0 44%;
|
||||
background: #fff;
|
||||
color: #2b6cff;
|
||||
border: 1.5px solid #2b6cff;
|
||||
}
|
||||
.btn-submit {
|
||||
background: #2b6cff;
|
||||
color: #fff;
|
||||
&:disabled {
|
||||
background: #b9c8ee;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<van-nav-bar
|
||||
:title="isEdit ? '编辑时段电话' : '新增时段电话'"
|
||||
left-arrow
|
||||
@click-left="goBack"
|
||||
fixed
|
||||
placeholder
|
||||
class="nav-bar"
|
||||
/>
|
||||
|
||||
<div class="content">
|
||||
<div class="field">
|
||||
<label class="field-label">时段（开始 — 结束，格式 00:00 ~ 23:59）</label>
|
||||
<div class="period-row">
|
||||
<input type="time" v-model="form.startTime" />
|
||||
<span class="sep">—</span>
|
||||
<input type="time" v-model="form.endTime" />
|
||||
</div>
|
||||
<div v-if="periodErr" class="err-msg">{{ periodErr }}</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-block" v-for="n in 3" :key="n">
|
||||
<div class="phone-block__head">
|
||||
<span>电话 {{ n }}{{ n === 1 ? '（必填）' : '（选填）' }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n]"
|
||||
:placeholder="'电话号码'"
|
||||
/>
|
||||
<div class="sub-grid">
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n + 'Desc']"
|
||||
placeholder="备注/负责人"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form['phone' + n + 'WechatId']"
|
||||
placeholder="微信号"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="phoneErr[n - 1]" class="err-msg">{{ phoneErr[n - 1] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<button v-if="isEdit" class="btn btn-del" @click="deleteCurrent">删除本时段</button>
|
||||
<button class="btn btn-cancel" @click="goBack">取消</button>
|
||||
<button class="btn btn-save" @click="save">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { myMixins } from '@/utils/myMixins'
|
||||
import { isValidPhone, validateTimeRange } from '@/utils/validate'
|
||||
import { Dialog, Toast } from 'vant'
|
||||
|
||||
const DRAFT_KEY_PREFIX = 'supplierTimePhoneDraft_'
|
||||
|
||||
function getDraftKey(supplierId) {
|
||||
return `${DRAFT_KEY_PREFIX}${supplierId}`
|
||||
}
|
||||
|
||||
function emptyRecord() {
|
||||
return {
|
||||
startTime: '00:00',
|
||||
endTime: '23:59',
|
||||
phone1: '',
|
||||
phone1Desc: '',
|
||||
phone1WechatId: '',
|
||||
phone2: '',
|
||||
phone2Desc: '',
|
||||
phone2WechatId: '',
|
||||
phone3: '',
|
||||
phone3Desc: '',
|
||||
phone3WechatId: ''
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'supplierTimePhoneEdit',
|
||||
mixins: [myMixins],
|
||||
data() {
|
||||
return {
|
||||
supplierId: null,
|
||||
index: -1,
|
||||
form: emptyRecord(),
|
||||
periodErr: '',
|
||||
phoneErr: ['', '', '']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return this.index >= 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.supplierId = this.$route.query.supplierId
|
||||
this.index = Number(this.$route.query.index)
|
||||
if (Number.isNaN(this.index)) {
|
||||
this.index = -1
|
||||
}
|
||||
if (this.isEdit) {
|
||||
this.loadRecord()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadRecord() {
|
||||
try {
|
||||
const raw = localStorage.getItem(getDraftKey(this.supplierId))
|
||||
const draft = raw ? JSON.parse(raw) : null
|
||||
const list = draft?.phoneList || []
|
||||
if (list[this.index]) {
|
||||
this.form = { ...emptyRecord(), ...list[this.index] }
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
validate() {
|
||||
this.periodErr = ''
|
||||
this.phoneErr = ['', '', '']
|
||||
let valid = true
|
||||
|
||||
const timeRes = validateTimeRange(this.form.startTime, this.form.endTime)
|
||||
if (!timeRes.valid) {
|
||||
this.periodErr = timeRes.message
|
||||
valid = false
|
||||
}
|
||||
|
||||
if (!this.form.phone1) {
|
||||
this.phoneErr[0] = '电话 1 为必填项'
|
||||
valid = false
|
||||
} else if (!isValidPhone(this.form.phone1)) {
|
||||
this.phoneErr[0] = '电话 1 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone1Desc) {
|
||||
this.phoneErr[0] = '电话 1 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
|
||||
if (this.form.phone2) {
|
||||
if (!isValidPhone(this.form.phone2)) {
|
||||
this.phoneErr[1] = '电话 2 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone2Desc) {
|
||||
this.phoneErr[1] = '电话 2 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
}
|
||||
if (this.form.phone3) {
|
||||
if (!isValidPhone(this.form.phone3)) {
|
||||
this.phoneErr[2] = '电话 3 格式不正确'
|
||||
valid = false
|
||||
} else if (!this.form.phone3Desc) {
|
||||
this.phoneErr[2] = '电话 3 备注为必填项'
|
||||
valid = false
|
||||
}
|
||||
}
|
||||
|
||||
return valid
|
||||
},
|
||||
save() {
|
||||
if (!this.validate()) return
|
||||
|
||||
try {
|
||||
const key = getDraftKey(this.supplierId)
|
||||
let draft = JSON.parse(localStorage.getItem(key) || '{}')
|
||||
let list = draft.phoneList || []
|
||||
const record = {
|
||||
startTime: this.form.startTime,
|
||||
endTime: this.form.endTime,
|
||||
phone1: this.form.phone1,
|
||||
phone1Desc: this.form.phone1Desc,
|
||||
phone1WechatId: this.form.phone1WechatId,
|
||||
phone2: this.form.phone2,
|
||||
phone2Desc: this.form.phone2Desc,
|
||||
phone2WechatId: this.form.phone2WechatId,
|
||||
phone3: this.form.phone3,
|
||||
phone3Desc: this.form.phone3Desc,
|
||||
phone3WechatId: this.form.phone3WechatId
|
||||
}
|
||||
if (this.isEdit) {
|
||||
list[this.index] = record
|
||||
} else {
|
||||
list.push(record)
|
||||
}
|
||||
draft.phoneList = list
|
||||
localStorage.setItem(key, JSON.stringify(draft))
|
||||
Toast('已保存')
|
||||
this.goBack()
|
||||
} catch (e) {
|
||||
Toast('保存失败')
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
deleteCurrent() {
|
||||
Dialog.confirm({
|
||||
title: '提示',
|
||||
message: '确定删除该时段电话？'
|
||||
}).then(() => {
|
||||
try {
|
||||
const key = getDraftKey(this.supplierId)
|
||||
let draft = JSON.parse(localStorage.getItem(key) || '{}')
|
||||
let list = draft.phoneList || []
|
||||
list.splice(this.index, 1)
|
||||
draft.phoneList = list
|
||||
localStorage.setItem(key, JSON.stringify(draft))
|
||||
Toast('已删除')
|
||||
this.goBack()
|
||||
} catch (e) {
|
||||
Toast('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
@import "@/styles/common.scss";
|
||||
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
box-sizing: border-box;
|
||||
background: #f4f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .nav-bar {
|
||||
.van-nav-bar {
|
||||
background: #2b6cff;
|
||||
}
|
||||
.van-nav-bar__title,
|
||||
.van-nav-bar__arrow {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.period-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
input {
|
||||
flex: 1;
|
||||
}
|
||||
.sep {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
input[type='time'],
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
border: 1px solid #dfe1e6;
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
background: #fafbfc;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
&:focus {
|
||||
border-color: #2b6cff;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-block {
|
||||
border: 1px solid #eef0f3;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
background: #fcfcfd;
|
||||
&__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #2b6cff;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sub-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eee;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn-save {
|
||||
background: #2b6cff;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-cancel {
|
||||
background: #f2f3f5;
|
||||
color: #666;
|
||||
}
|
||||
.btn-del {
|
||||
background: #fff;
|
||||
color: #ff4d4f;
|
||||
border: 1.5px solid #ffccc7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user