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

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

@@ -1,190 +1,279 @@
 // 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({
 
-  /**
+    /**
-   * 组件的属性列表
+     * 组件的属性列表
-   */
+     */
-  properties: {
+    properties: {
-    status: Number
+        status: Number
-  },
-  
-  /**
-   * 组件的初始数据
-   */
-  data: {
-    keyword: "",
-    keywordTemp: "",
-    page: 1,
-  },
-  lifetimes: {
-    attached() {
-      loadingFunc(async () => {
-        await this.init();
-      })
-    }
-  },
-  /**
-   * 组件的方法列表
-   */
-  methods: {
-    onParkFocus(e) {
-      this.setData({
-        show: true,
-        title: "园区",
-        type: 'park'
-      })
     },
-    onConfirm(e) {
+
-      const { data } = e.detail;
+    /**
-      const that = this;
+     * 组件的初始数据
-      this.setData({
+     */
-        parkName: data.name,
+    data: {
-        park: data.id,
+        keyword: "",
-      }, () => {
+        keywordTemp: "",
-        loadingFunc(async () => {
+        page: 1,
-          await that.init();
+        currentActionSheet: null,
-        })
+        actionItems: [{
-      })
+            name: '查看详细',
-      this.onCancel();
+            value: 'detail'
+        }],
     },
-    onSearchKeyword(e) {
+
-      const that = this;
+    lifetimes: {
-      that.setData({
+        attached() {
-        keyword: e.detail
-      }, () => {
-        loadingFunc(async () => {
-          await that.init();
-        })
-      })
-    },
-    onChangeKeyword(e) {
-      this.setData({ keywordTemp: e.detail })
-    },
-    onSearch() {
-      const that = this;
-      that.setData({
-        keyword: that.data.keywordTemp
-      }, () => {
-        loadingFunc(async () => {
-          await that.init();
-        })
-      })
-    },
-    async init() {
-      const { 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,
-        total: total,
-        totalPage: Math.ceil(total / 20)
-      })
-    },
-    onChangeReason(e) {
-      this.setData({
-        reason: e.detail,
-      })
-    },
-    onApproveClose() {
-      this.setData({
-        reason: "",
-        approveShow: false,
-      })
-    },
-    onApproveConfirm() {
-      const { reason, record } = this.data;
-      const that = this;
-      if (!reason) {
-        alertInfo("请输入拒绝理由")
-        return;
-      }
-      loadingFunc(async () => {
-        const { code, message } = await rechargeApprove({ id: record, status: 1, reason })
-        if (code !== OK) {
-          alertInfo(message)
-          return;
-        }
-        alertSuccess("已拒绝")
-        that.init();
-        that.setData({
-          reason: "",
-          approveShow: false,
-          record: "",
-        })
-      })
-      
-    },
-    handleApprove(e) {
-      const status = e.currentTarget.dataset.status;
-      const that = this;
-      if (status === '1') {
-        this.setData({
-          approveShow: true
-        })
-        return;
-      }
-      const { record, list } = this.data;
-      const item = list.find(ele => ele.id === record)
-    
-      wx.showModal({
-        title: '提示',
-        content: `您确认要同意${item?.tenement?.shortName || 当前记录}吗？`,
-        complete: async (res) => {
-          if (res.cancel) {
-            
-          }
-          if (res.confirm) {
             loadingFunc(async () => {
-              const { code, message } = await rechargeApprove({ id: record, status: 0,  })
+                await this.init();
-              if (code !== OK) {
-                alertInfo(message)
-                return;
-              }
-              alertSuccess("已同意")
-              that.init();
             })
-            
-          }
         }
-      })
     },
-    jumpToDetail(e) {
+    /**
-      const { id } = e.currentTarget.dataset;
+     * 组件的方法列表
-      wx.navigateTo({
+     */
-        url: '/pages/rechargeDetail/index?id=' + id,
+    methods: {
-      })
+        onParkFocus(e) {
-    },
+            this.setData({
-    async onChangePage(e) {
+                show: true,
-      const page = e.detail.currentIndex;
+                title: "园区",
-      const that = this;
+                type: 'park'
-      this.setData({
+            })
-        page
+        },
-      }, () => {
+        onConfirm(e) {
-        loadingFunc(async () => {
+            const {
-          await that.init();
+                data
-        })
+            } = e.detail;
-      })
+            const that = this;
-    },
+            this.setData({
-    onCancel() {
+                parkName: data.name,
-      this.setData({
+                park: data.id,
-        show: false,
+            }, () => {
-        title: "",
+                loadingFunc(async () => {
-        type: "",
+                    await that.init();
-      })
+                })
-    },
+            })
-    onChangeSelectRecharge(e) {
+            this.onCancel();
-      this.setData({
+        },
-        record: e.detail
+        onSearchKeyword(e) {
-      })
+            const that = this;
+            that.setData({
+                keyword: e.detail
+            }, () => {
+                loadingFunc(async () => {
+                    await that.init();
+                })
+            })
+        },
+        onChangeKeyword(e) {
+            this.setData({
+                keywordTemp: e.detail
+            })
+        },
+        onSearch() {
+            const that = this;
+            that.setData({
+                keyword: that.data.keywordTemp
+            }, () => {
+                loadingFunc(async () => {
+                    await that.init();
+                })
+            })
+        },
+        async init() {
+            const {
+                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.map(item => {
+                    item.topTime = dayjs(item.topTime).format("MM-DD HH:mm:ss")
+                    return item
+                }),
+                total: total,
+                totalPage: Math.ceil(total / 20)
+            })
+        },
+        onChangeReason(e) {
+            this.setData({
+                reason: e.detail,
+            })
+        },
+        onApproveClose() {
+            this.setData({
+                reason: "",
+                approveShow: false,
+            })
+        },
+        onApproveConfirm() {
+            const {
+                reason,
+                record
+            } = this.data;
+            const that = this;
+            if (!reason) {
+                alertInfo("请输入拒绝理由")
+                return;
+            }
+            loadingFunc(async () => {
+                const {
+                    code,
+                    message
+                } = await rechargeApprove({
+                    id: record,
+                    status: 1,
+                    reason
+                })
+                if (code !== OK) {
+                    alertInfo(message)
+                    return;
+                }
+                alertSuccess("已拒绝")
+                that.init();
+                that.setData({
+                    reason: "",
+                    approveShow: false,
+                    record: "",
+                })
+            })
+
+        },
+        handleApprove(e) {
+            const status = e.currentTarget.dataset.status;
+            const that = this;
+            if (status === '1') {
+                this.setData({
+                    approveShow: true
+                })
+                return;
+            }
+            const {
+                record,
+                list
+            } = this.data;
+            const item = list.find(ele => ele.id === record)
+
+            wx.showModal({
+                title: '提示',
+                content: `您确认要同意${item?.tenement?.shortName || 当前记录}吗？`,
+                complete: async (res) => {
+                    if (res.cancel) {
+
+                    }
+                    if (res.confirm) {
+                        loadingFunc(async () => {
+                            const {
+                                code,
+                                message
+                            } = await rechargeApprove({
+                                id: record,
+                                status: 0,
+                            })
+                            if (code !== OK) {
+                                alertInfo(message)
+                                return;
+                            }
+                            alertSuccess("已同意")
+                            that.init();
+                        })
+
+                    }
+                }
+            })
+        },
+
+        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;
+            wx.navigateTo({
+                url: '/pages/rechargeDetail/index?id=' + id,
+            })
+        },
+        async onChangePage(e) {
+            const page = e.detail.currentIndex;
+            const that = this;
+            this.setData({
+                page
+            }, () => {
+                loadingFunc(async () => {
+                    await that.init();
+                })
+            })
+        },
+        onCancel() {
+            this.setData({
+                show: false,
+                title: "",
+                type: "",
+            })
+        },
+        onChangeSelectRecharge(e) {
+            this.setData({
+                record: e.detail
+            })
+        }
     }
-  }
 })

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",