继续完善文件结构

pages/mall/admin/finance/withdrawal.uvue

@@ -5,19 +5,29 @@
       <view class="filter-row">
         <view class="filter-item">
           <text class="filter-label">时间选择:</text>
-          <uni-datetime-picker v-model="timeRange" type="daterange" class="dt-picker" />
+          <input class="date-input" type="text" v-model="timeRangeText" placeholder="请选择时间范围" />
         </view>
         <view class="filter-item">
           <text class="filter-label">提现状态:</text>
-          <uni-data-select v-model="statusValue" :localdata="statusOptions" class="data-select" />
+          <picker mode="selector" :range="statusOptions" range-key="text" @change="statusChange">
+            <view class="picker-view">
+              <text>{{ statusLabel }}</text>
+              <text class="iconfont icon-arrow-down" style="font-size: 12px;"></text>
+            </view>
+          </picker>
         </view>
         <view class="filter-item">
           <text class="filter-label">提现方式:</text>
-          <uni-data-select v-model="methodValue" :localdata="methodOptions" class="data-select" />
+          <picker mode="selector" :range="methodOptions" range-key="text" @change="methodChange">
+            <view class="picker-view">
+              <text>{{ methodLabel }}</text>
+              <text class="iconfont icon-arrow-down" style="font-size: 12px;"></text>
+            </view>
+          </picker>
         </view>
         <view class="filter-item search-wrap">
           <text class="filter-label">搜索:</text>
-          <uni-easyinput v-model="searchKeyword" placeholder="微信昵称/姓名/支付宝账号/银行卡号" class="search-input" />
+          <input class="search-input" v-model="searchKeyword" placeholder="微信昵称/姓名/支付宝账号/银行卡号" />
         </view>
         <button class="btn-query" @click="handleQuery">查询</button>
       </view>
@@ -107,9 +117,10 @@
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const timeRange = ref([])
+const timeRangeText = ref('')
 const statusValue = ref('all')
 const methodValue = ref('all')
 const searchKeyword = ref('')
@@ -128,6 +139,16 @@ const methodOptions = ref([
   { value: 'weixin', text: '微信' }
 ])
 
+const statusLabel = computed(() => {
+  const item = statusOptions.value.find((opt: any) => opt.value === statusValue.value)
+  return item ? item.text : '全部'
+})
+
+const methodLabel = computed(() => {
+  const item = methodOptions.value.find((opt: any) => opt.value === methodValue.value)
+  return item ? item.text : '全部'
+})
+
 const stats = ref([
   { label: '佣金总金额', value: '676809.25', icon: '$', colorClass: 'blue' },
   { label: '待提现金额', value: '71', icon: '¥', colorClass: 'orange' },
@@ -165,6 +186,14 @@ const tableData = ref([
   }
 ])
 
+const statusChange = (e: any) => {
+  statusValue.value = statusOptions.value[e.detail.value].value
+}
+
+const methodChange = (e: any) => {
+  methodValue.value = methodOptions.value[e.detail.value].value
+}
+
 const handleQuery = () => {
   console.log('Query with:', statusValue.value, methodValue.value, searchKeyword.value)
 }
@@ -207,12 +236,26 @@ const handleQuery = () => {
   white-space: nowrap;
 }
 
-.dt-picker {
+.date-input {
   width: 260px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
 }
 
-.data-select {
+.picker-view {
   width: 140px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
 }
 
 .search-wrap {
@@ -222,6 +265,11 @@ const handleQuery = () => {
 
 .search-input {
   flex: 1;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
 }
 
 .btn-query {