Skip to content

梁建民 / scm_app

Go to a project
Commit dab699a3 by liangjianmin
Options

style(approve): enhance card layout and status badge styling 

- Add card-header class for improved layout of approval cards
- Introduce status-badge class with styling for approved and rejected statuses
- Update detail view to reflect changes in approval status conditions
- Refactor card footer to conditionally display action buttons based on current tab
parent 1f49c7d3
Inline Side-by-side
Showing with 46 additions and 33 deletions
assets/css/approve/index.scss
...@@ -50,11 +50,31 @@ ...@@ -50,11 +50,31 @@
overflow: hidden; overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
.card-header {
padding: 24rpx 28rpx 12rpx;
}
.card-title { .card-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1e293b;
padding: 24rpx 28rpx 12rpx; }
.status-badge {
font-size: 22rpx;
font-weight: 500;
padding: 8rpx 16rpx;
border-radius: 20rpx;
&.approved {
color: #10b981;
background: rgba(16, 185, 129, 0.1);
}
&.rejected {
color: #f56c6c;
background: rgba(245, 108, 108, 0.1);
}
} }
.card-body { .card-body {
...@@ -112,27 +132,15 @@ ...@@ -112,27 +132,15 @@
opacity: 0.8; opacity: 0.8;
} }
} }
}
}
.card-status-bar { &.detail {
border-top: 1rpx solid #f0f1f5;
padding: 20rpx 28rpx;
.status-text {
font-size: 26rpx;
font-weight: 500;
&.approved {
color: #3b82f6; color: #3b82f6;
} background: rgba(59, 130, 246, 0.1);
border: 1rpx solid rgba(59, 130, 246, 0.2);
&.reviewing { &:active {
color: #3b82f6; background: rgba(59, 130, 246, 0.15);
} }
&.rejected {
color: #f56c6c;
} }
} }
} }
......
pages/approve/detail.vue
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</view> </view>
</view> </view>
<view class="bottom-actions" v-if="detail.status === 0"> <view class="bottom-actions" v-if="detail.approve_status == 0 || detail.approve_status == 1">
<u-button text="取消" shape="circle" :customStyle="{ flex: 1, marginRight: '24rpx', background: '#ffffff', color: '#606266', border: '1rpx solid #dcdfe6' }" @click="goBack"></u-button> <u-button text="取消" shape="circle" :customStyle="{ flex: 1, marginRight: '24rpx', background: '#ffffff', color: '#606266', border: '1rpx solid #dcdfe6' }" @click="goBack"></u-button>
<u-button text="审核" type="primary" shape="circle" :customStyle="{ flex: 1, background: '#2979ff' }" @click="openModal"></u-button> <u-button text="审核" type="primary" shape="circle" :customStyle="{ flex: 1, background: '#2979ff' }" @click="openModal"></u-button>
</view> </view>
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
data() { data() {
return { return {
id: '', id: '',
bill_id:'', bill_id: '',
detail: {}, detail: {},
orderInfo: {}, orderInfo: {},
showModal: false, showModal: false,
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
* @return {void} * @return {void}
*/ */
getData() { getData() {
this.request(API.feeApproveList, 'GET', { id: this.id }, true).then(res => { this.request(API.feeApproveList, 'GET', { approve_id: this.id }, true).then(res => {
if (res.code === 0) { if (res.code === 0) {
var { list = [] } = res.data || {}; var { list = [] } = res.data || {};
this.detail = list[0] || {}; this.detail = list[0] || {};
...@@ -211,10 +211,10 @@ ...@@ -211,10 +211,10 @@
setTimeout(() => { setTimeout(() => {
uni.navigateBack(); uni.navigateBack();
}, 1500); }, 1500);
}else{ } else {
uni.showToast({ uni.showToast({
title: res.msg || '操作失败', title: res.msg || '操作失败',
icon: 'none' icon: 'none'
}); });
} }
}); });
......
pages/approve/index.vue
...@@ -19,7 +19,12 @@ ...@@ -19,7 +19,12 @@
<!-- 列表内容 --> <!-- 列表内容 -->
<template v-else> <template v-else>
<view class="approve-card" v-for="item in currentList" :key="item.approve_id"> <view class="approve-card" v-for="item in currentList" :key="item.approve_id">
<view class="card-title">费用减免申请</view> <view class="card-header row bothSide verCenter">
<text class="card-title">费用减免申请</text>
<view v-if="currentTab === 1" :class="['status-badge', item.status === 1 ? 'approved' : 'rejected']">
{{ item.status_cn }}
</view>
</view>
<view class="card-body"> <view class="card-body">
<view class="card-row row"> <view class="card-row row">
<text class="card-label">申请人：</text> <text class="card-label">申请人：</text>
...@@ -33,6 +38,10 @@ ...@@ -33,6 +38,10 @@
<text class="card-label">订单号：</text> <text class="card-label">订单号：</text>
<text class="card-value">{{ item.order_sn }}</text> <text class="card-value">{{ item.order_sn }}</text>
</view> </view>
<view class="card-row row" v-if="currentTab == 0">
<text class="card-label">等待审批人：</text>
<text class="card-value">{{ item.next_auditor_name }}</text>
</view>
<view class="card-row row verCenter bothSide"> <view class="card-row row verCenter bothSide">
<view class="row verCenter"> <view class="row verCenter">
<u-icon name="clock-fill" color="#c0c4cc"></u-icon> <u-icon name="clock-fill" color="#c0c4cc"></u-icon>
...@@ -41,13 +50,9 @@ ...@@ -41,13 +50,9 @@
<text class="card-tag">{{ item.relief_detail }}</text> <text class="card-tag">{{ item.relief_detail }}</text>
</view> </view>
</view> </view>
<view class="card-footer row rowCenter" v-if="currentTab === 0"> <view class="card-footer row rowCenter">
<view class="action-btn approve" @click="handleApprove(item)">审批</view> <view v-if="currentTab === 0" class="action-btn approve" @click="handleApprove(item)">审批</view>
</view> <view v-else class="action-btn detail" @click="handleApprove(item)">查看详情</view>
<view class="card-status-bar row rowCenter" v-else>
<text :class="['status-text', item.status === 1 ? 'approved' : 'rejected']">
{{ item.status_cn }}
</text>
</view> </view>
</view> </view>
...@@ -202,7 +207,7 @@ ...@@ -202,7 +207,7 @@
* @param {Object} item - 审批项 * @param {Object} item - 审批项
* @return {void} * @return {void}
*/ */
handleApprove(item) { handleApprove(item) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/approve/detail?id=${item.approve_id}&bill_id=${item.bill_id}` url: `/pages/approve/detail?id=${item.approve_id}&bill_id=${item.bill_id}`
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment