From 1001244f38cf8dff9d96877d42d27df79d0cef4d Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Fri, 17 Jul 2026 09:38:34 +0800
Subject: [PATCH] =?UTF-8?q?CRM=5F26-07-21#story#9039,=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=95=86=E5=9C=A8=E8=B0=83=E5=BA=A6=E7=AB=AFApp=E4=B8=8E?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E4=B8=AD=E8=83=BD=E5=8F=98=E6=9B=B4=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E4=BF=A1=E6=81=AF=E5=8F=8A=E5=AF=B9=E5=BA=94=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E7=BB=8F=E7=90=86=E5=AE=A1=E6=A0=B8=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/supplierPhone.js                  |  43 +++
 src/router/index.js                       |  16 +
 src/utils/validate.js                     |  51 +++
 src/views/index/supplierTimePhone.vue     | 384 ++++++++++++++++++++++
 src/views/index/supplierTimePhoneEdit.vue | 352 ++++++++++++++++++++
 5 files changed, 846 insertions(+)
 create mode 100644 src/api/supplierPhone.js
 create mode 100644 src/utils/validate.js
 create mode 100644 src/views/index/supplierTimePhone.vue
 create mode 100644 src/views/index/supplierTimePhoneEdit.vue

diff --git a/src/api/supplierPhone.js b/src/api/supplierPhone.js
new file mode 100644
index 00000000..239cf0f1
--- /dev/null
+++ b/src/api/supplierPhone.js
@@ -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
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 936c085b..21aca5b7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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',
diff --git a/src/utils/validate.js b/src/utils/validate.js
new file mode 100644
index 00000000..f38bd709
--- /dev/null
+++ b/src/utils/validate.js
@@ -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 }
+}
diff --git a/src/views/index/supplierTimePhone.vue b/src/views/index/supplierTimePhone.vue
new file mode 100644
index 00000000..72ac8fdc
--- /dev/null
+++ b/src/views/index/supplierTimePhone.vue
@@ -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>
diff --git a/src/views/index/supplierTimePhoneEdit.vue b/src/views/index/supplierTimePhoneEdit.vue
new file mode 100644
index 00000000..78a20440
--- /dev/null
+++ b/src/views/index/supplierTimePhoneEdit.vue
@@ -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>