统一组件

Web/src/views/PeriodicRecord.vue

@@ -91,7 +91,7 @@
       height="85%"
     >
       <van-form @submit="onSubmit">
-          <van-cell-group inset title="周期设置">
+        <van-cell-group inset title="周期设置">
             <van-field
               v-model="form.periodicTypeText"
               is-link
@@ -150,9 +150,9 @@
               type="number"
               :rules="[{ required: true, message: '请输入年开始后第几天' }]"
             />
-          </van-cell-group>
+        </van-cell-group>
 
-          <van-cell-group inset title="基本信息">
+        <van-cell-group inset title="基本信息">
             <van-field
               v-model="form.reason"
               name="reason"
@@ -173,15 +173,18 @@
               :rules="[{ required: true, message: '请输入金额' }]"
             />
             <van-field
-              v-model="form.typeText"
-              is-link
-              readonly
+              v-model="form.type"
               name="type"
               label="类型"
-              placeholder="请选择交易类型"
-              @click="showTypePicker = true"
-              :rules="[{ required: true, message: '请选择交易类型' }]"
-            />
+            >
+              <template #input>
+                <van-radio-group v-model="form.type" direction="horizontal">
+                  <van-radio :name="0">支出</van-radio>
+                  <van-radio :name="1">收入</van-radio>
+                  <van-radio :name="2">不计</van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
             <van-field name="classify" label="分类">
               <template #input>
                 <span v-if="!form.classify" style="color: #c8c9cc;">请选择交易分类</span>
@@ -219,25 +222,16 @@
                 清空
               </van-button>
             </div>
-          </van-cell-group>
+        </van-cell-group>
 
-          <div style="margin: 16px;">
+        <div style="margin: 16px;">
             <van-button round block type="primary" native-type="submit" :loading="submitting">
               {{ isEdit ? '更新' : '确认添加' }}
             </van-button>
-          </div>
-        </van-form>
+        </div>
+      </van-form>
     </PopupContainer>
 
-    <!-- 交易类型选择器 -->
-    <van-popup v-model:show="showTypePicker" position="bottom" round>
-      <van-picker
-        :columns="typeColumns"
-        @confirm="onTypeConfirm"
-        @cancel="showTypePicker = false"
-      />
-    </van-popup>
-
     <!-- 周期类型选择器 -->
     <van-popup v-model:show="showPeriodicTypePicker" position="bottom" round>
       <van-picker
@@ -306,7 +300,6 @@ const total = ref(0)
 const dialogVisible = ref(false)
 const isEdit = ref(false)
 const submitting = ref(false)
-const showTypePicker = ref(false)
 const showPeriodicTypePicker = ref(false)
 const showWeekdaysPicker = ref(false)
 const showMonthDaysPicker = ref(false)
@@ -316,13 +309,6 @@ const newClassify = ref('')
 // 分类列表
 const classifyColumns = ref([])
 
-// 交易类型
-const typeColumns = [
-  { text: '支出', value: 0 },
-  { text: '收入', value: 1 },
-  { text: '不计入收支', value: 2 }
-]
-
 // 周期类型
 const periodicTypeColumns = [
   { text: '每天', value: 0 },
@@ -355,7 +341,6 @@ const form = reactive({
   reason: '',
   amount: '',
   type: 0,
-  typeText: '',
   classify: '',
   periodicType: 0,
   periodicTypeText: '',
@@ -508,7 +493,6 @@ const editPeriodic = (item) => {
   form.reason = item.reason
   form.amount = item.amount.toString()
   form.type = item.type
-  form.typeText = typeColumns.find(t => t.value === item.type)?.text || ''
   form.classify = item.classify
   form.periodicType = item.periodicType
   form.periodicTypeText = periodicTypeColumns.find(t => t.value === item.periodicType)?.text || ''
@@ -593,7 +577,6 @@ const resetForm = () => {
   form.reason = ''
   form.amount = ''
   form.type = 0
-  form.typeText = ''
   form.classify = ''
   form.periodicType = 0
   form.periodicTypeText = ''
@@ -606,17 +589,6 @@ const resetForm = () => {
   form.yearDay = ''
 }
 
-// 选择器确认事件
-const onTypeConfirm = ({ selectedValues, selectedOptions }) => {
-  form.type = selectedValues[0]
-  form.typeText = selectedOptions[0].text
-  showTypePicker.value = false
-  // 清空已选的分类
-  form.classify = ''
-  // 重新加载对应类型的分类列表
-  loadClassifyList(form.type)
-}
-
 const onPeriodicTypeConfirm = ({ selectedValues, selectedOptions }) => {
   form.periodicType = selectedValues[0]
   form.periodicTypeText = selectedOptions[0].text