Skip to content

梁建民 / scm_app

Go to a project
Commit e85ab1e3 by liangjianmin
Options

Add approval detail page and update navigation in approve index

parent b24b3b72
Inline Side-by-side
Showing with 335 additions and 12 deletions
assets/css/approve/detail.scss 0 → 100644
.approve-detail-page {
min-height: 100vh;
background: #f5f7fa;
padding-bottom: 180rpx;
.section {
background: #ffffff;
margin-bottom: 20rpx;
.section-title {
font-size: 32rpx;
font-weight: 700;
color: #1e293b;
padding: 32rpx 32rpx 24rpx;
position: relative;
display: flex;
align-items: center;
&::before {
content: '';
width: 8rpx;
height: 32rpx;
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
border-radius: 4rpx;
margin-right: 16rpx;
flex-shrink: 0;
}
}
.link-text {
font-size: 26rpx;
color: #3b82f6;
}
}
.highlight-section {
.detail-content {
padding: 0 32rpx 32rpx;
}
.amount-box {
padding: 24rpx 0;
margin-bottom: 32rpx;
border-bottom: 1rpx solid #e4e7ed;
display: flex;
align-items: baseline;
justify-content: space-between;
.amount-label {
font-size: 28rpx;
color: #303133;
flex-shrink: 0;
}
.amount-value {
font-size: 40rpx;
font-weight: 600;
color: #3b82f6;
line-height: 1.3;
}
}
.reason-box {
.reason-label {
display: block;
font-size: 26rpx;
color: #909399;
margin-bottom: 12rpx;
}
.reason-text {
display: block;
font-size: 28rpx;
color: #303133;
line-height: 1.6;
}
}
}
.timeline-wrap {
padding: 0 32rpx 24rpx;
.timeline-item {
position: relative;
padding-left: 40rpx;
padding-bottom: 32rpx;
&:last-child {
padding-bottom: 0;
&::before {
display: none;
}
}
&::before {
content: '';
position: absolute;
left: 8rpx;
top: 32rpx;
bottom: 0;
width: 2rpx;
background: #e4e7ed;
}
.timeline-dot {
position: absolute;
left: 0;
top: 8rpx;
width: 18rpx;
height: 18rpx;
border-radius: 50%;
background: #3b82f6;
border: 3rpx solid #ecf5ff;
}
.timeline-content {
background: #f5f7fa;
border-radius: 12rpx;
padding: 20rpx;
.log-header {
margin-bottom: 16rpx;
.log-time {
font-size: 24rpx;
color: #909399;
}
.log-user {
font-size: 24rpx;
color: #606266;
}
}
.log-body {
margin-bottom: 12rpx;
.log-label {
font-size: 26rpx;
color: #909399;
}
.log-text {
font-size: 26rpx;
color: #303133;
}
}
.log-footer {
.log-label {
font-size: 26rpx;
color: #909399;
}
.log-status {
font-size: 26rpx;
font-weight: 500;
&.approved {
color: #67c23a;
}
&.rejected {
color: #f56c6c;
}
}
}
}
}
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 32rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: #ffffff;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
z-index: 100;
}
}
pages.json
......@@ -25,6 +25,12 @@
"style": {
"navigationBarTitleText": "审批列表"
}
},
{
"path": "pages/approve/detail",
"style": {
"navigationBarTitleText": "审批详情页"
}
}
],
"tabBar": {
......
pages/approve/detail.vue 0 → 100644
<template>
<view class="approve-detail-page">
<view class="section">
<view class="section-title">申请信息</view>
<u-cell-group>
<u-cell title="申请类型" :value="detail.applyType"></u-cell>
<u-cell title="客户名称" :value="detail.customerName"></u-cell>
<u-cell title="减免明细" :value="detail.deductionType"></u-cell>
<u-cell title="申请时间" :value="detail.applyTime"></u-cell>
<u-cell title="订单号" :value="detail.orderNo" :value-style="{ flex: 1 }" :border="false">
<template #value>
<view class="row verCenter bothSide" style="flex: 1;">
<text>{{ detail.orderNo }}</text>
<text class="link-text">申请人：{{ detail.applicant }}</text>
</view>
</template>
</u-cell>
</u-cell-group>
</view>
<view class="section">
<view class="section-title">订单信息</view>
<u-cell-group>
<u-cell title="订单金额(商币)" :value="detail.orderAmount"></u-cell>
<u-cell title="订单币别" :value="detail.currency"></u-cell>
<u-cell title="代理费金额" :value="detail.agentFee" :border="false">
<template #value>
<view class="row verCenter">
<text style="margin-right: 40rpx;">{{ detail.agentFee }}</text>
<text>最低代理费：{{ detail.minAgentFee }}</text>
</view>
</template>
</u-cell>
</u-cell-group>
</view>
<view class="section highlight-section">
<view class="section-title">明细</view>
<view class="detail-content">
<view class="amount-box">
<text class="amount-label">申请免收金额(元)</text>
<text class="amount-value">{{ detail.amount }}</text>
</view>
<view class="reason-box">
<text class="reason-label">免收原因</text>
<text class="reason-text">{{ detail.reason }}</text>
</view>
</view>
</view>
<view class="section">
<view class="section-title">审批日志</view>
<view class="timeline-wrap">
<view class="timeline-item" v-for="(log, index) in detail.logs" :key="index">
<view class="timeline-dot"></view>
<view class="timeline-content">
<view class="log-header row verCenter bothSide">
<text class="log-time">{{ log.time }}</text>
<text class="log-user">审批人：{{ log.approver }}</text>
</view>
<view class="log-body">
<text class="log-label">审批意见：</text>
<text class="log-text">{{ log.comment }}</text>
</view>
<view class="log-footer">
<text class="log-label">审批结果：</text>
<text :class="['log-status', log.status]">{{ log.statusText }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="bottom-actions">
<u-button text="拒绝" shape="circle" :customStyle="{ flex: 1, marginRight: '24rpx', background: '#ffffff', color: '#606266', border: '1rpx solid #dcdfe6' }" @click="handleReject"></u-button>
<u-button text="同意" type="primary" shape="circle" :customStyle="{ flex: 1, background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' }" @click="handleApprove"></u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
detail: {
applyType: '费用减免申请',
customerName: '深圳市海克斯科技有限公司',
deductionType: '代理费减免',
applyTime: '2026-04-10 15:00',
orderNo: 'B123456',
applicant: '陈小将',
orderAmount: '100000.00',
currency: '美元',
agentFee: '300.00',
minAgentFee: '300.00',
amount: '3,000.00',
reason: '业务员在发起申请的时必须填写，字数长度不限定，宇航长度不限定',
logs: [
{
time: '1.2026-01-20 16:37',
approver: '周家仪',
comment: 'xxxxxxxxxxxx',
status: 'approved',
statusText: '通过'
},
{
time: '2.2026-01-20 16:37',
approver: '周家仪',
comment: 'xxxxxxxxxxxx',
status: 'approved',
statusText: '通过'
}
]
}
};
},
methods: {
/**
* 拒绝审批
* @return {void}
*/
handleReject() {
// 后续接入接口逻辑
},
/**
* 同意审批
* @return {void}
*/
handleApprove() {
// 后续接入接口逻辑
}
}
};
</script>
<style lang="scss">
@import '@/assets/css/approve/detail.scss';
</style>
pages/approve/index.vue
......@@ -144,23 +144,15 @@
onTabChange(item) {
this.currentTab = item.index;
},
/**
* 拒绝审批
* @param {Object} item - 审批项
* @return {void}
*/
handleReject(item) {
// 后续接入接口逻辑
},
/**
* 同意审批
* 审批
* @param {Object} item - 审批项
* @return {void}
*/
handleApprove(item) {
// 后续接入接口逻辑
uni.navigateTo({
url: '/pages/approve/detail'
});
}
}
};
......
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