feat:增加数字键盘组件

src/components/Bill/BillQuery.vue

@@ -14,15 +14,6 @@
       <el-option v-for="(item, index) in dateTypeOptions" :key="index"
                  :label="item.label" :value="item.value"/>
     </el-select>
-
-    <el-switch
-        v-model="billStore.billType"
-        inline-prompt
-        active-value="income" inactive-value="expensive"
-        active-text="收入" inactive-text="支出"
-        @change="billStore.refreshInfo(isStats)"
-        style="--el-switch-on-color: #6FBB69; --el-switch-off-color: #CA6C65;"
-    />
   </div>
 </template>
 

src/components/NumberInput.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="keyboard">
+    <div class="display">
+      {{ model || '0' }}
+    </div>
+
+    <div class="keys">
+      <el-button v-for="key in keys" :key="String(key)" class="key" @click="press(key)">
+        {{ key }}
+      </el-button>
+
+      <el-button class="key delete" @click="removeLast">
+        <i class="fa-solid fa-delete-left"></i>
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineModel } from 'vue'
+
+const model = defineModel<string>({
+  default: ''
+})
+
+const keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0] as const
+
+const press = (key: number | '.') => {
+  const pressValue = model.value
+
+  // 小数点
+  if (key === '.') {
+    if (pressValue.includes('.')) return
+    if (pressValue === '') {
+      model.value = '0.'
+    } else {
+      model.value += '.'
+    }
+    return
+  }
+
+  const next = pressValue + key
+
+  // 限制小数点后两位
+  if (next.includes('.')) {
+    const [, decimal] = next.split('.')
+    if (decimal.length > 2) return
+  }
+
+  if (next.length > 1 && next.startsWith('0') && !next.startsWith('0.')) {
+    model.value = next.slice(1)
+  } else {
+    model.value = next
+  }
+}
+
+const removeLast = () => {
+  model.value = model.value.slice(0, -1)
+}
+</script>
+
+<style lang="scss" scoped>
+.keyboard {
+  min-height: 320px;
+  width: 100%;
+  background: #f7f8fa;
+  border-radius: 16px;
+  padding: 16px;
+  box-sizing: border-box;
+  user-select: none;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .display {
+    height: 48px;
+    line-height: 48px;
+    padding: 0 14px;
+    margin-bottom: 12px;
+    border-radius: 12px;
+    background: #fff;
+    font-size: 22px;
+    text-align: right;
+    color: #333;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+
+  .keys {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+
+    .key {
+      margin-left: 0;
+      height: 48px;
+      font-size: 20px;
+      border-radius: 12px;
+      border: none;
+      box-shadow:
+          0 1px 2px rgba(0, 0, 0, 0.08),
+          inset 0 -1px 0 rgba(0, 0, 0, 0.05);
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+
+    .delete {
+      color: #ff3b30;
+
+      .fa-delete-left {
+        font-size: 28px;
+      }
+    }
+  }
+}
+</style>

src/store/bill.ts

@@ -10,7 +10,7 @@ import {
   queryBillRecordApi,
   queryBillStatsApi, queryBillSummaryApi, searchBillSummaryApi, updateBillRecordApi
 } from '@/apis/bill'
-import { getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
+import { formatDate, getCurrentMonth, getCurrentYear, getStartEndDate } from 'vue3-common/utils/dateUtil'
 import { IDateType, ImagePathEnum } from '@/types'
 import { IDialog, IStatsChart, IHandleApi } from 'vue3-common/types'
 import { ElMessage } from 'element-plus'
@@ -154,7 +154,7 @@ export const useBillStore = defineStore('bill', {
         bookName: '',
         category: '',
         content: '',
-        date: '',
+        date: formatDate(new Date()),
         location: '',
         payAccount: '',
         remark: '',

src/views/bill/detail[id].vue

@@ -1,51 +1,79 @@
 <template>
-  <div class="common-mobile-view">
+  <div class="common-mobile-view bill-detail">
     <el-form ref="formRef" :model="billStore.currentBillRecord"
              :rules="rules" label-position="top" label-width="80px"
-             class="form-item">
-      <el-form-item label="账本类型" prop="bookName">
-        <el-radio-group v-model="billStore.currentBillRecord.bookName"
-                        @change="changeBillBookNameEvent">
-          <el-radio v-for="(item, index) in billStore.billBookList"
-                    :value="item.name" :key="index">
-            <template #default>
-              <i :class="item.icon" :style="{color: item.color}"/>
-              <span style="margin-left: 5px;">{{ item.name }}</span>
-            </template>
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
+             class="form-item bill-form">
+      <div style="display: flex;gap: 5px;">
+        <el-select v-model="billStore.currentBillRecord.bookName"
+                   @change="changeBillBookNameEvent" style="width: 100px">
+          <el-option
+              v-for="item in billStore.billBookList"
+              :key="item.id" :label="item.name" :value="item.name"
+          />
+        </el-select>
 
-      <el-form-item label="账单类别" prop="type">
-        <el-radio-group v-model="billStore.currentBillRecord.type"
-                        @change="changeBillCategoryEvent">
-          <el-radio v-for="(item, index) in billInfo.billTypeList"
-                    :value="item" :key="index">
-            {{ getBillTypeName(item) }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
+        <el-select v-model="billStore.currentBillRecord.type"
+                   @change="changeBillCategoryEvent" style="width: 100px">
+          <el-option
+              v-for="(item, index) in billInfo.billTypeList"
+              :key="index" :label="getBillTypeName(item)" :value="item"
+          />
+        </el-select>
 
-      <el-form-item label="账单分类" prop="category">
-        <el-radio-group v-model="billStore.currentBillRecord.category">
-          <el-radio v-for="(item, index) in billInfo.billCategoryList"
-                    :value="item.name" :key="index">
-            <template #default>
-              <i :class="item.icon" :style="{color: item.color}"/>
-              <span style="margin-left: 5px;">{{ item.name }}</span>
-            </template>
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
+        <el-select v-model="billStore.currentBillRecord.payAccount"
+                   @change="changeBillCategoryEvent" style="width: 100px">
+          <el-option
+              v-for="item in billStore.billPayList"
+              :key="item.id" :label="item.name" :value="item.name"
+          />
+        </el-select>
+      </div>
 
-      <el-form-item label="账单时间" prop="date">
+<!--      <el-form-item label="账单分类" prop="category">-->
+<!--        -->
+<!--      </el-form-item>-->
+
+      <el-radio-group v-model="billStore.currentBillRecord.category">
+        <el-radio v-for="(item, index) in billInfo.billCategoryList"
+                  :value="item.name" :key="index">
+          <template #default>
+            <i :class="item.icon" :style="{color: item.color}"/>
+            <span style="margin-left: 5px;">{{ item.name }}</span>
+          </template>
+        </el-radio>
+      </el-radio-group>
+
+      <div class="bill-gap"></div>
+
+<!--      <el-form-item label="账本类型" prop="bookName">-->
+<!--        <el-radio-group v-model="billStore.currentBillRecord.bookName"-->
+<!--                        @change="changeBillBookNameEvent">-->
+<!--          <el-radio v-for="(item, index) in billStore.billBookList"-->
+<!--                    :value="item.name" :key="index">-->
+<!--            <template #default>-->
+<!--              <i :class="item.icon" :style="{color: item.color}"/>-->
+<!--              <span style="margin-left: 5px;">{{ item.name }}</span>-->
+<!--            </template>-->
+<!--          </el-radio>-->
+<!--        </el-radio-group>-->
+<!--      </el-form-item>-->
+
+<!--      <el-form-item label="账单类别" prop="type">-->
+<!--        <el-radio-group v-model="billStore.currentBillRecord.type"-->
+<!--                        @change="changeBillCategoryEvent">-->
+<!--          <el-radio v-for="(item, index) in billInfo.billTypeList"-->
+<!--                    :value="item" :key="index">-->
+<!--            {{ getBillTypeName(item) }}-->
+<!--          </el-radio>-->
+<!--        </el-radio-group>-->
+<!--      </el-form-item>-->
+
+      <div style="display: flex;gap: 5px;">
         <el-date-picker
             v-model="billStore.currentBillRecord.date"
             type="date" :editable="false" placeholder="请选择账单时间"
             value-format="YYYY-MM-DD"/>
-      </el-form-item>
 
-      <el-form-item label="账单地点" prop="location">
         <el-input v-model="billStore.currentBillRecord.location" autocomplete="off"
                   placeholder="请输入账单地点"  clearable
                   show-word-limit maxlength="10">
@@ -53,62 +81,68 @@
             <el-icon class="el-input__icon"><location/></el-icon>
           </template>
         </el-input>
-      </el-form-item>
+      </div>
 
-      <el-form-item label="账单账户" prop="payAccount">
-        <el-radio-group v-model="billStore.currentBillRecord.payAccount">
-          <el-radio v-for="(item, index) in billStore.billPayList"
-                    :value="item.name" :key="index">
-            <template #default>
-              <i :class="item.icon" :style="{color: item.color}"/>
-              <span style="margin-left: 5px;">{{ item.name }}</span>
-            </template>
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
+<!--      <el-form-item label="账单时间" prop="date">-->
+<!--        <el-date-picker-->
+<!--            v-model="billStore.currentBillRecord.date"-->
+<!--            type="date" :editable="false" placeholder="请选择账单时间"-->
+<!--            value-format="YYYY-MM-DD"/>-->
+<!--      </el-form-item>-->
 
-      <el-form-item label="账单金额" prop="amount">
-        <amount-input v-model="billStore.currentBillRecord.amount"/>
-      </el-form-item>
+<!--      <el-form-item label="账单地点" prop="location">-->
+<!--        <el-input v-model="billStore.currentBillRecord.location" autocomplete="off"-->
+<!--                  placeholder="请输入账单地点"  clearable-->
+<!--                  show-word-limit maxlength="10">-->
+<!--          <template #prefix>-->
+<!--            <el-icon class="el-input__icon"><location/></el-icon>-->
+<!--          </template>-->
+<!--        </el-input>-->
+<!--      </el-form-item>-->
 
-      <el-form-item label="账单内容" prop="content">
-        <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"
-                  placeholder="请输入账单内容"  clearable
-                  show-word-limit maxlength="10">
-          <template #prefix>
-            <el-icon class="el-input__icon"><document/></el-icon>
-          </template>
-        </el-input>
-      </el-form-item>
+<!--      <el-form-item label="账单账户" prop="payAccount">-->
+<!--        <el-radio-group v-model="billStore.currentBillRecord.payAccount">-->
+<!--          <el-radio v-for="(item, index) in billStore.billPayList"-->
+<!--                    :value="item.name" :key="index">-->
+<!--            <template #default>-->
+<!--              <i :class="item.icon" :style="{color: item.color}"/>-->
+<!--              <span style="margin-left: 5px;">{{ item.name }}</span>-->
+<!--            </template>-->
+<!--          </el-radio>-->
+<!--        </el-radio-group>-->
+<!--      </el-form-item>-->
 
-      <el-form-item label="账单备注">
-        <el-input v-model="billStore.currentBillRecord.remark" type="textarea"
-                  placeholder="请输入账单备注" clearable
-                  :rows="5" show-word-limit maxlength="200">
-        </el-input>
-      </el-form-item>
+<!--      <el-form-item label="账单内容" prop="content">-->
+<!--        <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"-->
+<!--                  placeholder="请输入账单内容"  clearable-->
+<!--                  show-word-limit maxlength="10">-->
+<!--          <template #prefix>-->
+<!--            <el-icon class="el-input__icon"><document/></el-icon>-->
+<!--          </template>-->
+<!--        </el-input>-->
+<!--      </el-form-item>-->
 
-      <el-form-item label="账单图片">
-        <el-upload
-            v-model:file-list="imageFileList"
-            list-type="picture-card"
-            :accept="acceptImageTypes"
-            :limit="3"
-            :before-upload="beforeUpload"
-            :http-request="httpRequest"
-            :on-success="handleSuccess"
-            :on-exceed="handleExceed"
-            :before-remove="beforeRemove"
-            :on-remove="handleRemove"
-        >
-          <el-icon><Plus /></el-icon>
-          <template #tip>
-            <div class="el-upload__tip">
-              请上传小于10M的图片
-            </div>
-          </template>
-        </el-upload>
-      </el-form-item>
+      <el-input v-model="billStore.currentBillRecord.content" autocomplete="off"
+                placeholder="请输入账单内容"  clearable
+                show-word-limit maxlength="10">
+        <template #prefix>
+          <el-icon class="el-input__icon"><document/></el-icon>
+        </template>
+      </el-input>
+
+      <el-input v-model="billStore.currentBillRecord.remark" type="textarea"
+                placeholder="请输入账单备注" clearable
+                :rows="3" show-word-limit maxlength="50">
+      </el-input>
+
+<!--      <el-form-item label="账单备注">-->
+<!--        <el-input v-model="billStore.currentBillRecord.remark" type="textarea"-->
+<!--                  placeholder="请输入账单备注" clearable-->
+<!--                  :rows="5" show-word-limit maxlength="200">-->
+<!--        </el-input>-->
+<!--      </el-form-item>-->
+
+      <number-input :model-value="amountStr" class="amount-input" />
     </el-form>
 
     <div class="form-button">
@@ -124,22 +158,13 @@
 import { AmountInput } from 'vue3-common'
 import { useBillStore } from '@/store/bill.ts'
 import { useAppStore } from '@/store/app.ts'
-import { Location, Document, Plus } from '@element-plus/icons-vue'
-import {
-  ElMessage,
-  ElMessageBox,
-  FormRules,
-  UploadProps,
-  UploadRawFile,
-  UploadRequestOptions,
-  UploadUserFile
-} from 'element-plus'
+import { Location, Document } from '@element-plus/icons-vue'
+import { FormRules, UploadUserFile } from 'element-plus'
 import { billRecordRules } from '@/utils/element/elRules.ts'
-import { nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { IBillCategory } from '@/types/bill.ts'
 import { commonElMessageBox } from 'vue3-common/utils/elUtil'
-import { acceptImageTypes } from '@/utils/file.ts'
-import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
+import NumberInput from '@/components/NumberInput.vue'
 
 const formRef = ref()
 const rules = reactive<FormRules>(billRecordRules)
@@ -193,30 +218,7 @@ const initImageFileList = () => {
   })
 }
 
-const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
-  return beforeUploadImage(rawFile)
-}
-
-const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
-  return await httpRequestFile(billStore.billImagePath, options)
-}
-
-const handleSuccess = (response: string) => {
-  billStore.currentBillRecord.imageList.push(response)
-}
-
-const handleExceed: UploadProps['onExceed'] = () => {
-  ElMessage.warning('最多上传3张图片')
-}
-
-const handleRemove: UploadProps['onRemove'] = (uploadFile) => {
-  const index = imageFileList.value.findIndex((item) => item.uid === uploadFile.uid)
-  billStore.currentBillRecord.imageList.splice(index, 1)
-}
-
-const beforeRemove: UploadProps['beforeRemove'] = () => {
-  return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
-}
+const amountStr = computed<string>(() => billStore.currentBillRecord.amount.toString())
 
 /**
  * 获取账单类型名称
@@ -293,3 +295,19 @@ const deleteClick = () => {
   })
 }
 </script>
+
+<style lang="scss">
+.bill-detail {
+  .bill-form {
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .bill-gap {
+      flex-grow: 1;
+    }
+  }
+}
+</style>