预约入馆

src/api/weixin/index.js

@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-// import qs from 'qs'
+import qs from 'qs'
 
 // 回复读者留言
 // {
@@ -49,10 +49,29 @@ export function FetchDeleteActivity(data) {
   })
 }
 
+// 初始化预约入馆设置
+export function FetchInitLibraryReservationSettings(params) {
+  return request({
+    url: 'api/weixin/initLibraryReservationSettings' + '?' + qs.stringify(params, { indices: false }),
+    method: 'get'
+  })
+}
+
+// 保存预约入馆设置
+export function FetchSaveLibraryReservationSettings(data) {
+  return request({
+    url: 'api/weixin/saveLibraryReservationSettings',
+    method: 'post',
+    data
+  })
+}
+
 export default {
   FetchReplyReaderMessage,
   add,
   edit,
   FetchCancelResumeActivity,
-  FetchDeleteActivity
+  FetchDeleteActivity,
+  FetchInitLibraryReservationSettings,
+  FetchSaveLibraryReservationSettings
 }

src/views/weChatMiniProgram/reservation.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="app-container">
     <el-card class="reservation-card">
-      <div slot="header">
+      <div slot="header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
         <span>预约设置</span>
+        <!-- <i class="iconfont icon-shezhi" /> -->
+        <el-button size="mini" type="primary" icon="el-icon-s-tools" @click="toggleEdit">{{ editMode ? '保存' : '设置' }}</el-button>
       </div>
       <div class="reservation-form">
         <div class="frequency-item">
           <span class="label">预约时间设置频率</span>
-          <el-select v-model="frequency" placeholder="请选择频率">
+          <el-select v-model="advanceBookingDays" placeholder="请选择频率" :disabled="!editMode">
             <el-option label="7天" value="7" />
             <el-option label="15天" value="15" />
             <el-option label="30天" value="30" />
@@ -16,7 +18,7 @@
         <div class="week-list">
           <div v-for="day in weekDays" :key="day.id" class="week-item">
             <label class="week-checkbox">
-              <el-checkbox v-model="day.checked" />
+              <el-checkbox v-model="day.checked" :disabled="!editMode" />
               <span>{{ day.name }}</span>
             </label>
             <div class="time-container">
@@ -24,15 +26,15 @@
                 <el-tag
                   v-for="(time, index) in day.times"
                   :key="index"
-                  closable
+                  :closable="editMode"
                   @close="removeTime(day, index)"
                 >
-                  {{ time }}
+                  {{ formatTimeDisplay(time) }}
                 </el-tag>
               </div>
               <div class="time-picker-container">
                 <el-time-picker
-                  v-if="day.showPicker"
+                  v-if="day.showPicker && editMode"
                   v-model="day.newTime"
                   is-range
                   range-separator="至"
@@ -45,7 +47,7 @@
                   @blur="day.showPicker = false"
                 />
                 <i
-                  v-if="day.checked"
+                  v-if="day.checked && editMode"
                   class="el-icon-circle-plus-outline add-time-icon"
                   @click="addTime(day)"
                 />
@@ -115,6 +117,7 @@
 </template>
 
 <script>
+import { FetchInitLibraryReservationSettings, FetchSaveLibraryReservationSettings } from '@/api/weixin'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -122,7 +125,9 @@ export default {
   components: { },
   data() {
     return {
-      frequency: '7',
+      editMode: false, // 编辑模式开关，默认false只读
+      settingId: null,
+      advanceBookingDays: '7',
       weekDays: [
         { id: 1, name: '周一', checked: false, times: [], showPicker: false, newTime: '' },
         { id: 2, name: '周二', checked: false, times: [], showPicker: false, newTime: '' },
@@ -151,27 +156,181 @@ export default {
       'user'
     ])
   },
+  mounted() {
+    this.initReservationSettings()
+  },
   methods: {
+    // 【新增】页面展示格式化：内部存 HH:mm:ss，页面显示 HH:mm
+    formatTimeDisplay(timeStr) {
+      if (timeStr === '全天') return '全天'
+      // "08:30:00 - 12:00:00" → "08:30 - 12:00"
+      return timeStr.split(' - ').map(item => item.slice(0, 5)).join(' - ')
+    },
+
+    // 初始化预约入馆设置
+    async initReservationSettings() {
+      const params = { libcode: this.user.fonds.fondsNo }
+      const res = await FetchInitLibraryReservationSettings(params)
+      console.log('res', res)
+      const { baseSetting, weekJson } = res
+      // 基础设置
+      this.settingId = baseSetting.id
+      this.advanceBookingDays = baseSetting.advanceBookingDays
+
+      // 重置
+      this.weekDays.forEach(w => {
+        w.times = []
+        w.checked = false
+      })
+
+      // 星期勾选状态回写 baseSetting
+      this.weekDays.find(d => d.id === 1).checked = !!baseSetting.monday
+      this.weekDays.find(d => d.id === 2).checked = !!baseSetting.tuesday
+      this.weekDays.find(d => d.id === 3).checked = !!baseSetting.wednesday
+      this.weekDays.find(d => d.id === 4).checked = !!baseSetting.thursday
+      this.weekDays.find(d => d.id === 5).checked = !!baseSetting.friday
+      this.weekDays.find(d => d.id === 6).checked = !!baseSetting.saturday
+      this.weekDays.find(d => d.id === 7).checked = !!baseSetting.sunday
+
+      // 解析 weekJson，把 [h,m] / [h,m,s] 转 HH:mm:ss 字符串
+      Object.keys(weekJson).forEach(weekKey => {
+        const weekdayNum = Number(weekKey)
+        const dayItem = this.weekDays.find(d => d.id === weekdayNum)
+        if (!dayItem) return
+        const timeList = weekJson[weekKey] || []
+        timeList.forEach(t => {
+          const sArr = t.startTime // [h,m] or [h,m,s]
+          const eArr = t.endTime
+          const sh = String(sArr[0]).padStart(2, '0')
+          const sm = String(sArr[1]).padStart(2, '0')
+          const ss = sArr.length >= 3 ? String(sArr[2]).padStart(2, '0') : '00'
+
+          const eh = String(eArr[0]).padStart(2, '0')
+          const em = String(eArr[1]).padStart(2, '0')
+          const es = eArr.length >= 3 ? String(eArr[2]).padStart(2, '0') : '00'
+
+          const startStr = `${sh}:${sm}:${ss}`
+          const endStr = `${eh}:${em}:${es}`
+
+          // 判断全天
+          if (startStr === '00:00:00' && endStr === '23:59:59') {
+            dayItem.times.push('全天')
+          } else {
+            dayItem.times.push(`${startStr} - ${endStr}`)
+          }
+        })
+      })
+      console.log('this.weekDays', this.weekDays)
+    },
+    // 校验：勾选的星期必须至少有一个时间段
+    validateWeekTime() {
+      for (const day of this.weekDays) {
+        if (day.checked) {
+          if (!day.times || day.times.length === 0) {
+            this.$message.warning(`${day.name}已勾选，请至少配置一个预约时间段`)
+            return false
+          }
+        }
+      }
+      return true
+    },
+    // 切换设置/保存
+    async toggleEdit() {
+      if (!this.editMode) {
+        // 进入编辑模式
+        this.editMode = true
+      } else {
+        // 1.校验：勾选的星期必须至少有一个时间段
+        // if (!this.validateWeekTime()) {
+        //   return
+        // }
+
+        // 勾选但无时间段，页面塞入“全天”标签展示
+        this.weekDays.forEach(day => {
+          if (day.checked && day.times.length === 0) {
+            day.times.push('全天')
+          }
+        })
+
+        // 2.组装 vxLibraryReservationWeekdaySettingsList
+        const vxLibraryReservationWeekdaySettingsList = []
+        this.weekDays.forEach(day => {
+          if (!day.checked) return
+          day.times.forEach(timeStr => {
+            let startTime, endTime
+            if (timeStr === '全天') {
+              startTime = '00:00:00'
+              endTime = '23:59:59'
+            } else {
+              // "00:00:00 - 05:00:00"分割
+              const arr = timeStr.split(' - ')
+              startTime = arr[0]
+              endTime = arr[1]
+            }
+            vxLibraryReservationWeekdaySettingsList.push({
+              startTime,
+              endTime,
+              weekday: day.id // 1周一~7周日
+            })
+          })
+        })
+
+        // 3.组装后端要求params
+        const params = {
+          libcode: this.user.fonds.fondsNo,
+          id: this.settingId,
+          advanceBookingDays: this.advanceBookingDays,
+          monday: this.weekDays.find(d => d.id === 1).checked,
+          tuesday: this.weekDays.find(d => d.id === 2).checked,
+          wednesday: this.weekDays.find(d => d.id === 3).checked,
+          thursday: this.weekDays.find(d => d.id === 4).checked,
+          friday: this.weekDays.find(d => d.id === 5).checked,
+          saturday: this.weekDays.find(d => d.id === 6).checked,
+          sunday: this.weekDays.find(d => d.id === 7).checked,
+          vxLibraryReservationWeekdaySettingsList
+        }
+        console.log('提交后端数据 params', params)
+
+        try {
+          const res = await FetchSaveLibraryReservationSettings(params)
+          console.log('FetchSaveLibraryReservationSettings', res)
+          if (res === '保存成功') {
+            this.$message.success('保存成功')
+            this.editMode = false
+            this.initReservationSettings()
+          } else {
+            this.$message.error(res.msg || '保存失败')
+          }
+        } catch (err) {
+          console.error(err)
+          this.$message.error('保存异常，请重试')
+        }
+      }
+    },
     addTime(day) {
       day.showPicker = true
     },
     selectTime(day) {
       if (day.newTime && day.newTime.length === 2) {
-        const startStr = day.newTime[0]
-        const endStr = day.newTime[1]
+        // el-time-picker value-format="HH:mm"拿到 08:30，手动补 :00，内部存储带秒
+        const startStr = day.newTime[0] + ':00'
+        const endStr = day.newTime[1] + ':00'
         day.times.push(`${startStr} - ${endStr}`)
         day.newTime = ''
         day.showPicker = false
       }
     },
     removeTime(day, index) {
+      if (!this.editMode) return
       day.times.splice(index, 1)
+      if (day.checked && day.times.length === 0) {
+        this.$message.info(`${day.name}已勾选，未设置时段保存将默认为全天`)
+      }
     },
     confirmAdd() {
       this.$refs.closedForm.validate((valid) => {
         if (valid) {
           console.log(this.closedForm)
-          // this.$refs.closedForm.resetFields()
           this.closedDialogVisible = false
         } else {
           console.log('校验失败')
@@ -293,4 +452,7 @@ export default {
     padding: 0 0 20px 0;
   }
 }
+::v-deep .el-icon-s-tools{
+  font-size: 16px;
+}
 </style>