✨ feat: 增加电费提醒功能

src/api/power.js

@@ -34,7 +34,7 @@ export function deleteAccount(parameter) {
   return request({
     url: api.Account,
     method: 'delete',
-    params: parameter
+    data: parameter
   })
 }
 

src/components/Footer/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="footer">
-        <span>© {{ new Date().getFullYear() }} RunForge - 自助乐跑平台</span>
+        <span>© {{ new Date().getFullYear() }} RunForge - 智能校园乐跑平台</span>
     </div>
 </template>
 

src/pages/Main/Main.vue

@@ -17,7 +17,7 @@
         <Section2 />
     </div>
     <div class="footer">
-        <span>© {{ new Date().getFullYear() }} RunForge - 自助乐跑平台</span>
+        <span>© {{ new Date().getFullYear() }} RunForge - 智能校园乐跑平台</span>
     </div>
 
 </template>

src/pages/lepao/accountList/index.vue

@@ -187,10 +187,10 @@
     :ok-loading="ok_loading" esc-to-close closable>
     <a-form :model="form">
       <a-form-item field="student_num" label="学号">
-        <a-input v-model="form.student_num" placeholder="账号所有者学号，填写错误将无法登录" />
+        <a-input v-model="form.student_num" placeholder="账号所有者学号，填写错误将无法登录" allow-clear/>
       </a-form-item>
       <a-form-item field="email" label="通知邮箱">
-        <a-auto-complete :data="email" @search="handleSearch" v-model="form.email" placeholder="用于接收乐跑失败、登录失效的通知" />
+        <a-auto-complete :data="email" @search="handleSearch" v-model="form.email" placeholder="用于接收乐跑失败、登录失效的通知" allow-clear/>
       </a-form-item>
       <a-form-item field="area" label="乐跑跑区">
         <a-select v-model="form.area" placeholder="请选择乐跑跑区" default-value="">

src/pages/lepao/lepaoRecords/index.vue

@@ -45,7 +45,7 @@
         </a-col>
       </a-row>
 
-      <a-alert>仅记录成功上传至乐跑服务器的跑步记录。未成功的跑步不会扣除账户乐跑次数。</a-alert>
+      <a-alert>仅保存成功上传至乐跑服务器的跑步记录。未成功的跑步（含状态无效）不会扣除账户乐跑次数。</a-alert>
 
       <a-table :data="data" stripe hoverable class="table" :loading="loading" :pagination="{
         showPageSize: true,

src/pages/power/accountList.vue

@@ -2,25 +2,17 @@
   <div class="container">
     <Breadcrumb :items="['宿舍电费', '定制电费提醒']" />
 
-    <a-card title="定制电费提醒" style="margin-top: 15px; ">
-      <a-result status="403" subtitle="即将上线，敬请期待">
-        <template #extra>
-          <a-space>
-            <!-- <a-button type="primary">Back</a-button> -->
-          </a-space>
-        </template>
-      </a-result>
-    </a-card>
-
-    <a-card title="定制电费提醒" style="display: none;">
+    <a-card title="定制电费提醒">
       <a-button type="primary" size="large" @click="editAccount()">
         <template #icon>
           <icon-plus />
         </template>
-        添加账号
+        添加提醒任务
       </a-button>
 
-      <a-table :data="data" stripe hoverable column-resizable class="table" :loading="loading" :scroll="{
+      <a-alert style="margin-top: 15px;">仅保存最近30天的电费变更记录</a-alert>
+
+      <a-table :data="data" :columns="columns" stripe hoverable class="table" :loading="loading" :scroll="{
         x: 1600
       }" :pagination="{ showPageSize: true, showJumper: true, defaultPageSize: 15 }">
 
@@ -35,173 +27,53 @@
             </a-space>
           </div>
         </template>
-
-        <template #columns>
-          <a-table-column title="" :width="60" data-index="user_avatar" tooltip>
-            <template #cell="{ record }">
-              <a-avatar>
-                <IconUser v-if="!record.user_avatar" />
-                <img :alt="record.name ?? ''" :src="record.user_avatar" v-else />
-              </a-avatar>
-            </template>
-          </a-table-column>
-          <a-table-column title="学号" :width="120" data-index="student_num" ellipsis tooltip :filterable="{
-            filter: (value, record) => (record.student_num ?? '').includes(value),
-            slotName: 'name-filter',
-            icon: () => h(IconSearch)
-          }"></a-table-column>
-          <a-table-column title="用户名" :width="130" :filterable="{
-            filter: (value, record) => (record.name ?? '').includes(value),
-            slotName: 'name-filter',
-            icon: () => h(IconSearch)
-          }">
-            <template #cell="{ record }">
-              {{ record.name ?? '请使用乐跑登录器更新信息' }}
-            </template>
-          </a-table-column>
-          <a-table-column title="性别" :width="80" ellipsis tooltip :filterable="{
-            filters: [
-              { text: '男', value: 1 },
-              { text: '女', value: 2 }
-            ],
-            filter: (value, record) => record.sex == value
-          }">
-            <template #cell="{ record }">
-              <icon-man v-if="record.sex === 1" />
-              <icon-woman v-else-if="record.sex === 2" />
-              {{ record.sex === 1 ? '男' : (record.sex === 2 ? '女' : '') }}
-            </template>
-          </a-table-column>
-          <a-table-column title="学院" :width="220" data-index="academy_name" ellipsis tooltip :filterable="{
-            filter: (value, record) => (record.academy_name ?? '').includes(value),
-            slotName: 'name-filter',
-            icon: () => h(IconSearch)
-          }"></a-table-column>
-          <a-table-column title="跑区" :width="130" :filterable="{
-            filter: (value, record) => (record.name ?? '').includes(value),
-            slotName: 'name-filter',
-            icon: () => h(IconSearch)
-          }">
-            <template #cell="{ record }">
-              <div class="vipcontent">
-                <span>{{ record.area || '随机分配' }} </span>
-                <!-- <img src="@/assets/vip.svg" alt="vip" height="20" v-if="record.area"> -->
-              </div>
-            </template>
-          </a-table-column>
-          <a-table-column title="通知邮箱" :width="180" data-index="email" ellipsis tooltip :filterable="{
-            filter: (value, record) => (record.email ?? '').includes(value),
-            slotName: 'name-filter',
-            icon: () => h(IconSearch)
-          }"></a-table-column>
-          <a-table-column title="帐号状态" :width="100" ellipsis tooltip :filterable="{
-            filters: [
-              { text: '正常', value: 1 },
-              { text: '需登录', value: 0 },
-              { text: '状态异常', value: 2 },
-            ],
-            filter: (value, record) => record.state == value
-          }">
-            <template #cell="{ record }">
-              <div v-if="record.state === 0" class="state">
-                <div class="circle zero"></div>需登录
-              </div>
-              <div v-else-if="record.state === 1" class="state">
-                <div class="circle one"></div>正常
-              </div>
-              <div v-else class="state">
-                <div class="circle else"></div>状态异常
-              </div>
-            </template>
-          </a-table-column>
-          <a-table-column title="自动乐跑" :width="100" ellipsis tooltip :filterable="{
-            filters: [
-              { text: '开启', value: 1 },
-              { text: '关闭', value: 0 }
-            ],
-            filter: (value, record) => record.auto_run == value
-          }">
-            <template #cell="{ record }">
-              <a-tag color="green" v-if="record.auto_run">开启</a-tag>
-              <a-tag color="red" v-else>关闭</a-tag>
-            </template>
-          </a-table-column>
-          <a-table-column title="自动乐跑时段" :width="120" ellipsis tooltip>
-            <template #cell="{ record }">
-              {{ autoTimeLabel(record.auto_time) }}
-            </template>
-          </a-table-column>
-          <a-table-column title="累计次数" data-index="total_num" :width="110" ellipsis tooltip :sortable="{
-            sortDirections: ['ascend', 'descend']
-          }"></a-table-column>
-          <a-table-column title="剩余次数" :width="110" ellipsis tooltip>
-            <template #cell="{ record }">
-              {{ record.term_num - record.total_num > 0 ? (record.term_num - record.total_num) : '已完成' }}
-            </template>
-          </a-table-column>
-          <a-table-column title="添加时间" :width="170" ellipsis tooltip :sortable="{
-            sortDirections: ['ascend', 'descend']
-          }">
-            <template #cell="{ record }">
-              {{ stramptoTime(record.create_time) }}
-            </template>
-          </a-table-column>
-          <a-table-column title="更新时间" :width="170" ellipsis tooltip>
-            <template #cell="{ record }">
-              {{ stramptoTime(record.update_time || record.create_time) }}
-            </template>
-          </a-table-column>
-          <a-table-column title="备注" :width="200" ellipsis tooltip>
-            <template #cell="{ record }">
-              {{ record.notes }}
-            </template>
-          </a-table-column>
-
-          <a-table-column title="" fixed="right" :width="100">
-            <template #cell="{ record }">
-              <a-dropdown :popup-max-height="false" trigger="hover">
-                <a-button>操作 <icon-down /></a-button>
-                <template #content>
-                  <a-doption @click="editAccount(record)"><icon-edit /> 编辑账号</a-doption>
-                  <a-doption @click="SingleRun(record)"><icon-play-circle /> 开始单次乐跑</a-doption>
-                  <a-doption @click="ChangeAutoRun(record)"><icon-translate /> {{ record.auto_run ? '关闭' :
-                    '开启' }}自动乐跑</a-doption>
-                  <a-doption @click="DeleteAccount(record)"><icon-minus-circle /> 解绑账号</a-doption>
-                </template>
-              </a-dropdown>
-            </template>
-          </a-table-column>
+        <template #balance="{ record }">
+          <a-tag :color="record.balance <= record.lowest ? 'red' : 'green'">￥{{ record.balance
+          }}</a-tag>
+        </template>
+        <template #lowest="{ record }">
+          ￥{{ record.lowest }}
+        </template>
+        <template #create_time="{ record }">
+          {{ stramptoTime(record.create_time) }}
+        </template>
+        <template #update_time="{ record }">
+          {{ stramptoTime(record.update_time) }}
+        </template>
+        <template #optional="{ record }">
+          <div style="display: flex; gap:10px">
+            <a-button @click="GetChangeRecord(record.id)">账单&nbsp;<icon-select-all /></a-button>
+            <a-dropdown :popup-max-height="false" trigger="hover">
+              <a-button>操作&nbsp;<icon-down /></a-button>
+              <template #content>
+                <a-doption @click="editAccount(record)"><icon-edit /> 编辑任务</a-doption>
+                <a-doption @click="DeleteAccount(record)"><icon-delete /> 删除任务</a-doption>
+              </template>
+            </a-dropdown>
+          </div>
         </template>
       </a-table>
     </a-card>
   </div>
 
   <!-- 账号编辑对话框 -->
-  <a-modal v-model:visible="visible" title="编辑账号" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
+  <a-modal v-model:visible="visible" title="编辑电费提醒任务" @cancel="handleCancel" @before-ok="handleBeforeOk" draggable
     :ok-loading="ok_loading" esc-to-close closable>
     <a-form :model="form">
-      <a-form-item field="student_num" label="学号">
-        <a-input v-model="form.student_num" placeholder="账号所有者学号，填写错误将无法登录" />
-      </a-form-item>
-      <a-form-item field="email" label="通知邮箱">
-        <a-auto-complete :data="email" @search="handleSearch" v-model="form.email" placeholder="用于接收乐跑失败、登录失效的通知" />
+      <a-form-item field="area" label="校区" :loading="selectLoading">
+        <a-select v-model="form.area" placeholder="请选择所在校区" default-value="" :options="areas"
+          @change="GetPowerData('dylist', form.area)" />
       </a-form-item>
-      <a-form-item field="area" label="乐跑跑区">
-        <a-select v-model="form.area" placeholder="请选择乐跑跑区" default-value="">
-          <a-option value="">随机分配</a-option>
-          <a-option v-for="(item, index) in area" :key="index" :value="item">
-            <span class="vipcontent">
-              <span>{{ item }} </span>
-              <!-- <img src="@/assets/vip.svg" alt="vip" height="20"> -->
-            </span>
-          </a-option>
-        </a-select>
+      <a-form-item field="building" label="楼栋" :loading="selectLoading">
+        <a-select v-model="form.building" placeholder="请选择所在楼栋" default-value="" :options="buildings"
+          @change="GetPowerData('mphlist', form.building)" />
       </a-form-item>
-      <a-form-item field="auto_run" label="自动乐跑开关">
-        <a-switch v-model="form.auto_run" :checked-value="1" :unchecked-value="0" />
+      <a-form-item field="room" label="宿舍号" :loading="selectLoading">
+        <a-select v-model="form.room" placeholder="请选择所在宿舍" default-value="" :options="rooms" />
       </a-form-item>
-      <a-form-item field="area" label="自动乐跑时段">
-        <a-select v-model="form.auto_time" placeholder="请选择每天自动乐跑的时段" :options="auto_time" />
+      <a-form-item field="email" label="通知邮箱">
+        <a-auto-complete :data="email" @search="handleSearch" v-model="form.email" placeholder="用于接收电费变更通知"
+          allow-clear />
       </a-form-item>
       <a-form-item field="notes" label="备注">
         <a-textarea v-model="form.notes" placeholder="添加对账号的备注（非必填）" :max-length="{ length: 50 }" allow-clear
@@ -209,46 +81,223 @@
       </a-form-item>
     </a-form>
   </a-modal>
+
+  <!-- 电费变更记录 -->
+  <a-modal v-model:visible="listVisible" title="电费变更记录" esc-to-close closable width="auto" hide-cancel>
+    <a-table :data="changeList" :columns="listColumns" stripe hoverable :loading="listLoading"
+      :pagination="{ showPageSize: true, showJumper: true, defaultPageSize: 15 }">
+      <template #balance="{ record }">
+        ￥{{ record.balance }}
+      </template>
+      <template #change="{ record }">
+        <a-tag :color="record.balance < record.old_balance ? 'red' : 'green'">￥{{ record.balance - record.old_balance
+        }}</a-tag>
+      </template>
+      <template #time="{ record }">
+        {{ stramptoTime(record.time) }}
+      </template>
+    </a-table>
+  </a-modal>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, h } from 'vue'
-import { getPowerData, getChangeRecord, addAccount, deleteAccount, getAccount } from '@/api/power'
+import { getPowerData, addAccount, deleteAccount, getAccount, getChangeRecord } from '@/api/power'
 import { Modal, Notification, Message } from '@arco-design/web-vue'
-import { IconSearch } from '@arco-design/web-vue/es/icon'
 
 const data = ref([])
 const loading = ref(false)
 
+const listVisible = ref(false)
+const changeList = ref([])
+const listLoading = ref(false)
+const GetChangeRecord = async (id) => {
+  try {
+    listLoading.value = true
+    listVisible.value = true
+    changeList.value = []
+    const res = await getChangeRecord({ id })
+    if (!res || res.code !== 0)
+      return Notification.error({
+        title: '获取电费变更记录失败！',
+        content: res?.msg ?? '请稍后再试'
+      })
+    changeList.value = res.data
+  } catch (error) {
+    Notification.error({
+      title: '获取电费变更记录失败！',
+      content: error.message || '请稍后再试'
+    })
+  } finally {
+    listLoading.value = false
+  }
+}
+
+
 const visible = ref(false)
 const ok_loading = ref(false)
 const form = reactive({
   id: null,
-  student_num: '',
-  email: '',
   area: '',
-  auto_time: 8,
-  auto_run: 1,
-  notes: ''
+  building: '',
+  room: '',
+  email: '',
+  notes: '',
+  lowest: 10.00
 })
 
+const columns = [{
+  title: '校区',
+  dataIndex: 'area',
+  width: 120
+}, {
+  title: '楼栋',
+  dataIndex: 'building',
+  width: 130
+}, {
+  title: '寝室号',
+  dataIndex: 'room',
+}, {
+  title: '通知邮箱',
+  dataIndex: 'email',
+  width: 220
+}, {
+  title: '当前余额',
+  slotName: 'balance',
+  width: 120
+}, {
+  title: '触发提醒阈值',
+  slotName: 'lowest',
+  width: 120
+}, {
+  title: '扣费日期',
+  dataIndex: 'koufei_date',
+  width: 170
+}, {
+  title: '任务添加时间',
+  slotName: 'create_time',
+  width: 170
+}, {
+  title: '上次更新时间',
+  slotName: 'update_time',
+  width: 170
+}, {
+  title: '备注',
+  dataIndex: 'notes'
+}, {
+  title: '操作',
+  slotName: 'optional',
+  width: 200,
+  fixed: 'right'
+}]
+
+const listColumns = [{
+  title: '记录时间',
+  slotName: 'time',
+  width: 170
+}, {
+  title: '扣费时间',
+  dataIndex: 'change_time',
+  width: 170
+}, {
+  title: '电费余额',
+  slotName: 'balance',
+  width: 120
+}, {
+  title: '变动金额',
+  slotName: 'change',
+  width: 120
+}]
+
+const selectLoading = ref(false)
+const areas = ref([])
+const buildings = ref([])
+const rooms = ref([])
+
+const GetPowerData = async (type, pid = '') => {
+  try {
+    const data = {
+      type,
+      pid
+    }
+    const res = await getPowerData(data)
+    if (!res || res.code !== 0)
+      return Notification.error({
+        title: '获取电费信息失败！',
+        content: res?.msg ?? '请稍后再试'
+      })
+    let resdata = res.data.map(item => ({
+      value: item,
+      label: item
+    }))
+    switch (type) {
+      case 'buildlist':
+        areas.value = resdata
+        break
+      case 'dylist':
+        buildings.value = resdata
+        form.building = ''
+        form.room = ''
+        break
+      case 'mphlist':
+        rooms.value = resdata
+        form.room = ''
+        break
+    }
+  } catch (error) {
+    Notification.error({
+      title: '获取电费信息失败！',
+      content: error.message || '请稍后再试'
+    })
+  }
+}
+
+const email = ref([])
+const handleSearch = (value) => {
+  const emailSuffix = ["qq.com", "ctbu.edu.cn", "163.com"]
+  const input = (value || "").trim()
+
+  if (!input) {
+    email.value = []
+    return
+  }
+
+  // 没有输入 @，直接拼接所有后缀
+  if (!input.includes("@")) {
+    email.value = emailSuffix.map(suffix => `${input}@${suffix}`)
+    return
+  }
+
+  // 输入了 @ 但结尾是 @，拼接所有后缀
+  if (input.endsWith("@")) {
+    email.value = emailSuffix.map(suffix => `${input}${suffix}`)
+    return
+  }
+
+  // 输入了 @ 且有部分后缀，智能匹配
+  const [prefix, suffixPart] = input.split("@")
+  email.value = emailSuffix
+    .filter(suffix => suffix.startsWith(suffixPart))
+    .map(suffix => `${prefix}@${suffix}`)
+}
+
 const editAccount = (item) => {
   if (item) {
     form.id = item.id
-    form.student_num = item.student_num
-    form.email = item.email
     form.area = item.area
-    form.auto_time = item.auto_time
-    form.auto_run = item.auto_run
+    form.building = item.building
+    form.room = item.room
+    form.email = item.email
     form.notes = item.notes
+    form.lowest = item.lowest ?? 10.00
   } else {
     form.id = null
-    form.student_num = ''
-    form.email = ''
-    form.auto_run = 1
-    form.auto_time = 7
     form.area = ''
+    form.building = ''
+    form.room = ''
+    form.email = ''
     form.notes = ''
+    form.lowest = 10.00
   }
   visible.value = true
 }
@@ -256,15 +305,9 @@ const editAccount = (item) => {
 const handleBeforeOk = async (done) => {
   try {
     ok_loading.value = true
-    const { student_num, email } = form
-    if (!student_num || !email) {
-      Message.error('请填写完整的账号信息')
-      return false
-    }
-
-    const studentNumRegex = /^\d{10}$/
-    if (!studentNumRegex.test(student_num)) {
-      Message.error('请检查学号格式是否正确')
+    const { area, building, room, email } = form
+    if (!area || !building || !room || !email) {
+      Message.error('请填写完整的任务信息')
       return false
     }
 
@@ -275,15 +318,13 @@ const handleBeforeOk = async (done) => {
     }
 
     let data = {
-      ...form,
-      min_distance: form.distance[0],
-      max_distance: form.distance[1]
+      ...form
     }
 
     const res = await addAccount(data)
     if (!res || res.code !== 0) {
       Notification.error({
-        title: '保存乐跑账号失败！',
+        title: '保存电费提醒任务失败！',
         content: res?.msg ?? '请稍后再试'
       })
       return false
@@ -294,7 +335,7 @@ const handleBeforeOk = async (done) => {
     getAccounts()
   } catch (error) {
     Notification.error({
-      title: '保存乐跑账号失败！',
+      title: '保存电费提醒任务失败！',
       content: error.message || '请稍后再试'
     })
     return false
@@ -329,18 +370,18 @@ const getAccounts = async () => {
 
 const DeleteAccount = async (item) => {
   Modal.confirm({
-    title: '解绑账号',
+    title: '删除任务',
     content: () => h('div', [
-      h('p', '您是否要解绑该账号？该操作不可逆')
+      h('p', '您是否要删除该电费提醒任务？该操作不可逆')
     ]),
     onOk: async () => {
       const res = await deleteAccount({ id: item.id })
       if (!res || res.code !== 0)
         return Notification.error({
-          title: '解绑失败',
+          title: '删除失败',
           content: res?.msg ?? '请稍后再试'
         })
-      Message.success('解绑成功！')
+      Message.success('删除成功！')
       getAccounts()
     }
   })
@@ -351,7 +392,8 @@ const stramptoTime = (time) => {
 }
 
 onMounted(() => {
-  
+  GetPowerData('buildlist')
+  getAccounts()
 })
 
 </script>