C端小程序显示优化 工作台部分

pages/workBench/components/recharge/components/approve/index.js

@@ -1,8 +1,18 @@
 // pages/workBench/components/recharge/components/waitApprove/index.js
-import { alertInfo, alertSuccess, loadingFunc } from "../../../../../../utils/index";
+import {
-import { getRechargeApproveList, rechargeApprove } from "../../../../../../service/recharge"
+    alertInfo,
+    alertSuccess,
+    loadingFunc
+} from "../../../../../../utils/index";
+import {
+    getRechargeApproveList,
+    rechargeApprove
+} from "../../../../../../service/recharge"
 import request from "../../../../../../utils/request"
-const { OK } = request
+import dayjs from "../../../../../../utils/dayjs"
+const {
+    OK
+} = request
 
 // pages/workBench/components/record/index.js
 Component({
@@ -21,7 +31,13 @@ Component({
         keyword: "",
         keywordTemp: "",
         page: 1,
+        currentActionSheet: null,
+        actionItems: [{
+            name: '查看详细',
+            value: 'detail'
+        }],
     },
+
     lifetimes: {
         attached() {
             loadingFunc(async () => {
@@ -41,7 +57,9 @@ Component({
             })
         },
         onConfirm(e) {
-      const { data } = e.detail;
+            const {
+                data
+            } = e.detail;
             const that = this;
             this.setData({
                 parkName: data.name,
@@ -64,7 +82,9 @@ Component({
             })
         },
         onChangeKeyword(e) {
-      this.setData({ keywordTemp: e.detail })
+            this.setData({
+                keywordTemp: e.detail
+            })
         },
         onSearch() {
             const that = this;
@@ -77,14 +97,32 @@ Component({
             })
         },
         async init() {
-      const { page, keyword, park, status } = this.data;
+            const {
-      const { code, message, data, total } = await getRechargeApproveList({ park, page, keyword, status })
+                page,
+                keyword,
+                park,
+                status
+            } = this.data;
+            const {
+                code,
+                message,
+                data,
+                total
+            } = await getRechargeApproveList({
+                park,
+                page,
+                keyword,
+                status
+            })
             if (code !== OK) {
                 alertInfo(message);
                 return;
             }
             this.setData({
-        list: data,
+                list: data.map(item => {
+                    item.topTime = dayjs(item.topTime).format("MM-DD HH:mm:ss")
+                    return item
+                }),
                 total: total,
                 totalPage: Math.ceil(total / 20)
             })
@@ -101,14 +139,24 @@ Component({
             })
         },
         onApproveConfirm() {
-      const { reason, record } = this.data;
+            const {
+                reason,
+                record
+            } = this.data;
             const that = this;
             if (!reason) {
                 alertInfo("请输入拒绝理由")
                 return;
             }
             loadingFunc(async () => {
-        const { code, message } = await rechargeApprove({ id: record, status: 1, reason })
+                const {
+                    code,
+                    message
+                } = await rechargeApprove({
+                    id: record,
+                    status: 1,
+                    reason
+                })
                 if (code !== OK) {
                     alertInfo(message)
                     return;
@@ -132,7 +180,10 @@ Component({
                 })
                 return;
             }
-      const { record, list } = this.data;
+            const {
+                record,
+                list
+            } = this.data;
             const item = list.find(ele => ele.id === record)
 
             wx.showModal({
@@ -144,7 +195,13 @@ Component({
                     }
                     if (res.confirm) {
                         loadingFunc(async () => {
-              const { code, message } = await rechargeApprove({ id: record, status: 0,  })
+                            const {
+                                code,
+                                message
+                            } = await rechargeApprove({
+                                id: record,
+                                status: 0,
+                            })
                             if (code !== OK) {
                                 alertInfo(message)
                                 return;
@@ -157,8 +214,40 @@ Component({
                 }
             })
         },
+
+        showActionMenu(e) {
+            this.setData({
+                currentActionSheet: e.currentTarget.dataset.id
+            });
+        },
+
+        hideActionMenu() {
+            this.setData({
+                currentActionSheet: null
+            });
+        },
+
+        onMenuSelect(e) {
+            const {
+                value
+            } = e.detail;
+            const id = e.currentTarget.dataset.id;
+
+            if (value === 'detail') {
+                this.jumpToDetail({
+                    currentTarget: {
+                        dataset: {
+                            id
+                        }
+                    }
+                });
+            }
+        },
+
         jumpToDetail(e) {
-      const { id } = e.currentTarget.dataset;
+            const {
+                id
+            } = e.currentTarget.dataset;
             wx.navigateTo({
                 url: '/pages/rechargeDetail/index?id=' + id,
             })

pages/workBench/components/recharge/components/approve/index.json

@@ -11,6 +11,8 @@
     "van-radio": "@vant/weapp/radio/index",
     "van-radio-group": "@vant/weapp/radio-group/index",
     "van-dialog": "@vant/weapp/dialog/index",
-    "searchSelectWrapper": "/components/searchSelectWrapper/index"
+    "searchSelectWrapper": "/components/searchSelectWrapper/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-action-sheet": "@vant/weapp/action-sheet/index"    
   }
 }

pages/workBench/components/recharge/components/approve/index.wxml

@@ -1,100 +1,65 @@
 <!--pages/workBench/components/recharge/components/waitApprove/index.wxml-->
-<searchSelectWrapper 
+<searchSelectWrapper label="园区" placeholder="请选择园区" text="{{parkName}}" bind:search="onParkFocus" />
-    label="园区" 
-    placeholder="请选择园区"
-    text="{{parkName}}"
-    bind:search="onParkFocus"
-/>
 
-<searchSelectWrapper 
+<searchSelectWrapper label="关键字" placeholder="请输入关键字" text="{{meterName}}" bind:searchKeyword="onSearchKeyword" type="inputSearch" />
-    label="关键字" 
-    placeholder="请输入关键字"
-    text="{{meterName}}"
-    bind:searchKeyword="onSearchKeyword"
-    type="inputSearch"
-/>
 <view>
     <view wx:if="{{list.length}}">
         <view class="operate" wx:if="{{status === 2}}">
             <view style="margin-top: 60rpx; margin-bottom: 60rpx;display: flex; justify-content: center; align-items: center;">
-                <van-button 
+                <van-button type="info" size="small" style="margin-right: 30rpx;" bind:click="handleApprove" data-status="0" disabled="{{!record}}"> 同意 </van-button>
-                    type="info" 
+                <van-button size="small" bind:click="handleClear" disabled="{{!record}}" bind:click="handleApprove" data-status="1"> 拒绝 </van-button>
-                    size="small" 
-                    style="margin-right: 30rpx;" 
-                    bind:click="handleApprove"
-                    data-status="0"
-                    disabled="{{!record}}"
-                > 同意 </van-button>
-                <van-button 
-                    size="small" 
-                    bind:click="handleClear"  
-                    disabled="{{!record}}" 
-                    bind:click="handleApprove"
-                    data-status="1"
-                > 拒绝 </van-button>
             </view>
         </view>
         <view class="tableWrapper">
             <view class="table">
                 <view class="thead">
-                    <view class="th" style="width: 70rpx">  </view>
+                    <view class="th" style="flex: 0 0 100rpx;"> </view>
-                    <view class="th" style="width: 250rpx"> 商户名字 </view>
+                    <view class="th" style="flex: 0 0 200rpx;"> 商户名字 </view>
-                    <view class="th" style="width: 150rpx"> 充值金额 </view>
+                    <view class="th" style="flex: 0 0 250rpx;"> 充值金额 </view>
-                    <view class="th" style="width: 200rpx"> 操作 </view>
+                    <view class="th" style="flex: 0 0 350rpx; display: {{status === 1 ? 'block' : 'none'}};">状态</view>
+                    <view class="th"  style="flex: 0 0 250rpx;">提交时间</view>
+                    <view class="th"style="flex: 1; justify-content: flex-end; display: flex; align-items: center;"> 操作 </view>
                 </view>
                 <view class="tbody">
                     <van-radio-group value="{{ record }}" bind:change="onChangeSelectRecharge">
                         <block wx:for="{{list}}" wx:for-index="itemIndex" wx:key="item">
-                            <view class="tr">
+                            <view class="tr" style="display: flex; align-items: center;">
-                                <view class="th" style="width: 70rpx">
+                                <view class="th" style="flex: 0 0 100rpx;">
                                     <van-radio wx:if="{{status === 2}}" name="{{item.id}}"></van-radio>
                                 </view>
-                                <view class="th" style="width: 250rpx"> {{ item.tenement.shortName }} </view>
+                                <view class="th" style="flex: 0 0 200rpx;">
-                                <view class="th" style="width: 150rpx"> {{ item.money }} </view>
+                                    {{ item.tenement.shortName }}
-                                <view class="th" style="width: 200rpx">
+                                </view>
-                                    <view class="primaryTextBtn" bind:tap="jumpToDetail" data-id="{{item.id}}">
+                                <view class="th" style="flex: 0 0 250rpx;">
-                                        查看详细
+                                    {{ item.money }}
-                                    </view>
+                                </view>
+                                <view class="th" style="flex: 0 0 350rpx; display: {{status === 1 ? 'block' : 'none'}};">
+                                    <view class="tag">{{item.orderStatus}}</view>
+                                </view>
+                                <view class="th" style="flex: 0 0 250rpx; font-size: 30rpx;">
+                                    {{item.topTime}}
+                                </view>
+                                <view class="th" style="flex: 1; justify-content: flex-end; display: flex; align-items: center;">
+                                    <van-icon name="ellipsis" size="24px" bind:tap="showActionMenu" data-id="{{item.id}}" class="more-icon" />
+                                    <van-action-sheet show="{{ currentActionSheet === item.id }}" actions="{{ actionItems }}" bind:close="hideActionMenu" bind:select="onMenuSelect" data-id="{{item.id}}" close-on-click-action />
                                 </view>
                             </view>
+
                         </block>
                     </van-radio-group>
                 </view>
             </view>
         </view>
 
-        <pagination 
+        <pagination currentIndex="{{page}}" totalPage="{{totalPage}}" bind:pagingChange="onChangePage" />
-            currentIndex="{{page}}" 
-            totalPage="{{totalPage}}" 
-            bind:pagingChange="onChangePage"  
-        />
 
     </view>
     <empty bind:refresh="init" wx:else />
 
 </view>
 
-<search-select 
+<search-select show="{{show}}" title="{{title}}" type="{{type}}" park="{{park}}" bindconfirm="onConfirm" bindcancel="onCancel" />
-    show="{{show}}" 
-    title="{{title}}" 
-    type="{{type}}" 
-    park="{{park}}"
-    bindconfirm="onConfirm"
-    bindcancel="onCancel"
-/>
 
-<van-dialog
+<van-dialog use-slot title="审核" show="{{ approveShow }}" show-cancel-button bind:close="onApproveClose" bind:confirm="onApproveConfirm">
-  use-slot
+    <van-field label="拒绝理由" value="{{ reason }}" placeholder="请输入拒绝理由" bind:change="onChangeReason" />
-  title="审核"
-  show="{{ approveShow }}"
-  show-cancel-button
-  bind:close="onApproveClose"
-  bind:confirm="onApproveConfirm"
->
-    <van-field
-        label="拒绝理由"
-        value="{{ reason }}"
-        placeholder="请输入拒绝理由"
-        bind:change="onChangeReason"
-    />
 </van-dialog>

pages/workBench/components/recharge/components/approve/index.wxss

@@ -43,3 +43,27 @@
     word-break: break-all;
     text-align: center;
 }
+
+.more-icon {
+    padding: 20rpx;
+    color: #1989fa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+/* 基础标签样式 */
+.tag {
+    display: inline-block;
+    padding: 8px 16px;
+    margin-right: 12px;
+    border-radius: 16px;
+    background: #07c160;
+    color: white;
+  }
+  
+  /* 激活状态样式 */
+  .tag.active {
+    background: #07c160;
+    color: white;
+  }

project.private.config.json

@@ -24,12 +24,19 @@
     "miniprogram": {
       "list": [
         {
-          "name": "childPackage/pages/electricQuery/index",
+          "name": "pages/workBench/index",
-          "pathName": "childPackage/pages/electricQuery/index",
+          "pathName": "pages/workBench/index",
           "query": "",
           "scene": null,
           "launchMode": "default"
         },
+        {
+          "name": "childPackage/pages/electricQuery/index",
+          "pathName": "childPackage/pages/electricQuery/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "childPackage/pages/electricQuery/index",
           "pathName": "childPackage/pages/electricQuery/index",