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

This commit is contained in:
ZiHangQin 2025-07-21 14:10:05 +08:00
parent 33d7528990
commit fccaee5f2b
5 changed files with 336 additions and 249 deletions

View File

@ -1,190 +1,279 @@
// pages/workBench/components/recharge/components/waitApprove/index.js
import { alertInfo, alertSuccess, loadingFunc } from "../../../../../../utils/index";
import { getRechargeApproveList, rechargeApprove } from "../../../../../../service/recharge"
import {
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: {
status: Number
},
/**
* 组件的初始数据
*/
data: {
keyword: "",
keywordTemp: "",
page: 1,
},
lifetimes: {
attached() {
loadingFunc(async () => {
await this.init();
})
}
},
/**
* 组件的方法列表
*/
methods: {
onParkFocus(e) {
this.setData({
show: true,
title: "园区",
type: 'park'
})
/**
* 组件的属性列表
*/
properties: {
status: Number
},
onConfirm(e) {
const { data } = e.detail;
const that = this;
this.setData({
parkName: data.name,
park: data.id,
}, () => {
loadingFunc(async () => {
await that.init();
})
})
this.onCancel();
/**
* 组件的初始数据
*/
data: {
keyword: "",
keywordTemp: "",
page: 1,
currentActionSheet: null,
actionItems: [{
name: '查看详细',
value: '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,
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) {
lifetimes: {
attached() {
loadingFunc(async () => {
const { code, message } = await rechargeApprove({ id: record, status: 0, })
if (code !== OK) {
alertInfo(message)
return;
}
alertSuccess("已同意")
that.init();
await this.init();
})
}
}
})
},
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
})
/**
* 组件的方法列表
*/
methods: {
onParkFocus(e) {
this.setData({
show: true,
title: "园区",
type: 'park'
})
},
onConfirm(e) {
const {
data
} = e.detail;
const that = this;
this.setData({
parkName: data.name,
park: data.id,
}, () => {
loadingFunc(async () => {
await that.init();
})
})
this.onCancel();
},
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
})
}
}
}
})

View File

@ -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"
}
}

View File

@ -1,100 +1,65 @@
<!--pages/workBench/components/recharge/components/waitApprove/index.wxml-->
<searchSelectWrapper
label="园区"
placeholder="请选择园区"
text="{{parkName}}"
bind:search="onParkFocus"
/>
<searchSelectWrapper label="园区" placeholder="请选择园区" text="{{parkName}}" bind:search="onParkFocus" />
<searchSelectWrapper
label="关键字"
placeholder="请输入关键字"
text="{{meterName}}"
bind:searchKeyword="onSearchKeyword"
type="inputSearch"
/>
<searchSelectWrapper 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
type="info"
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>
<van-button type="info" 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="width: 250rpx"> 商户名字 </view>
<view class="th" style="width: 150rpx"> 充值金额 </view>
<view class="th" style="width: 200rpx"> 操作 </view>
<view class="th" style="flex: 0 0 100rpx;"> </view>
<view class="th" style="flex: 0 0 200rpx;"> 商户名字 </view>
<view class="th" style="flex: 0 0 250rpx;"> 充值金额 </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="th" style="width: 70rpx">
<view class="tr" style="display: flex; align-items: center;">
<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="width: 150rpx"> {{ item.money }} </view>
<view class="th" style="width: 200rpx">
<view class="primaryTextBtn" bind:tap="jumpToDetail" data-id="{{item.id}}">
查看详细
</view>
<view class="th" style="flex: 0 0 200rpx;">
{{ item.tenement.shortName }}
</view>
<view class="th" style="flex: 0 0 250rpx;">
{{ item.money }}
</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
currentIndex="{{page}}"
totalPage="{{totalPage}}"
bind:pagingChange="onChangePage"
/>
<pagination currentIndex="{{page}}" totalPage="{{totalPage}}" bind:pagingChange="onChangePage" />
</view>
<empty bind:refresh="init" wx:else />
</view>
<search-select
show="{{show}}"
title="{{title}}"
type="{{type}}"
park="{{park}}"
bindconfirm="onConfirm"
bindcancel="onCancel"
/>
<search-select show="{{show}}" title="{{title}}" type="{{type}}" park="{{park}}" bindconfirm="onConfirm" bindcancel="onCancel" />
<van-dialog
use-slot
title="审核"
show="{{ approveShow }}"
show-cancel-button
bind:close="onApproveClose"
bind:confirm="onApproveConfirm"
>
<van-field
label="拒绝理由"
value="{{ reason }}"
placeholder="请输入拒绝理由"
bind:change="onChangeReason"
/>
<van-dialog use-slot title="审核" show="{{ approveShow }}" show-cancel-button bind:close="onApproveClose" bind:confirm="onApproveConfirm">
<van-field label="拒绝理由" value="{{ reason }}" placeholder="请输入拒绝理由" bind:change="onChangeReason" />
</van-dialog>

View File

@ -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;
}

View File

@ -24,12 +24,19 @@
"miniprogram": {
"list": [
{
"name": "childPackage/pages/electricQuery/index",
"pathName": "childPackage/pages/electricQuery/index",
"name": "pages/workBench/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",