8584268f by lttnew
2 parents 86ed73ee 685385a7
<template>
<view :class="{ 'no-scroll': isPopupOpen }" class="order-page">
<!-- 顶部标签栏 -->
<view class="search-bar">
<uni-easyinput
v-model="queryParams.wfCode"
:input-border="false"
class="search-input"
placeholder="搜索缴费编号"
placeholderStyle="font-size:30rpx;color:#999"
prefixIcon="search"
@blur="handelSearch"
@clear="handelSearch">
</uni-easyinput>
<view class="add-btn" @click="handelSearch">
<text class="add-text">搜索</text>
</view>
</view>
<view class="tab-bar">
<view
v-for="(tab, index) in tabs"
......@@ -24,58 +41,187 @@
>
<view class="order-list">
<!-- 有数据才循环 -->
<!-- <view v-if="list.length > 0">-->
<!-- <view-->
<!-- v-for="(item, index) in list"-->
<!-- :key="index"-->
<!-- class="order-card"-->
<!-- @click="goToDetail(item)"-->
<!-- >-->
<!-- &lt;!&ndash; 订单头部:日期 + 状态 &ndash;&gt;-->
<!-- <view class="card-header">-->
<!-- <view class="date">-->
<!-- &lt;!&ndash; <image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" style="width:30rpx;height:30rpx;"/> &ndash;&gt;-->
<!-- &lt;!&ndash; &ndash;&gt;-->
<!-- <text class="value text-primary">{{ item.wfCode || '——' }}</text>-->
<!-- </view>-->
<!-- <view class="status-tags">-->
<!-- &lt;!&ndash; <view-->
<!-- class="status-tag"-->
<!-- :class="{-->
<!-- success: item.payStatus == 1,-->
<!-- danger: item.payStatus == 2,-->
<!-- pending: item.payStatus == 0-->
<!-- }"-->
<!-- >-->
<!-- {{ getStatusText(item.payStatus) }}-->
<!-- </view> &ndash;&gt;-->
<!-- <view-->
<!-- :class="{-->
<!-- 'status-wait': item.auditStatus == 0,-->
<!-- 'status-pending': item.auditStatus == 1,-->
<!-- 'status-success': item.auditStatus == 2,-->
<!-- 'status-danger': item.auditStatus == 3-->
<!-- }"-->
<!-- class="status-tag ml-10"-->
<!-- >-->
<!-- {{ getAuditStatusText(item.auditStatus) }}-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- -->
<!-- &lt;!&ndash; 订单编号、缴费编号 &ndash;&gt;-->
<!-- <view class="info-row">-->
<!-- <text class="label">订单编号:</text>-->
<!-- <text class="value">{{ item.tradeNo || '——' }}</text>-->
<!-- </view>-->
<!-- <view v-if="item.orderName" class="info-row">-->
<!-- <text class="label">缴费名称:</text>-->
<!-- <text class="value">{{ item.orderName || '' }}</text>-->
<!-- </view>-->
<!-- &lt;!&ndash; <view class="info-row">-->
<!-- <text class="label">缴费编号:</text>-->
<!-- -->
<!-- </view> &ndash;&gt;-->
<!-- -->
<!-- &lt;!&ndash; 核心:前2tab仅展示缴费年限,后2tab仅展示人数合计 &ndash;&gt;-->
<!-- <view v-if="item.content" class="info-section flex f-j-s">-->
<!-- &lt;!&ndash; 个人/单位会员(仅缴费年限) &ndash;&gt;-->
<!-- <view v-if="currentTab === '0' || currentTab === '1'" class="single-info">-->
<!-- <view class="label">缴费年限:</view>-->
<!-- <view class="value">{{ item.content.yearCount || 0 }}</view>-->
<!-- </view>-->
<!-- &lt;!&ndash; 级位/段位考试(仅人数合计) &ndash;&gt;-->
<!-- <view v-if="currentTab === '2' || currentTab === '3' || currentTab === '4'" class="single-info">-->
<!-- <view class="label">人数合计</view>-->
<!-- <view class="value">{{ item.content.personCount || 0 }}</view>-->
<!-- </view>-->
<!-- <view class="line"></view>-->
<!-- <view class="single-info">-->
<!-- <view class="label">订单状态</view>-->
<!-- <view :class="item.effect == 1 ? 'text-success' : 'text-warning'" class="value">-->
<!-- {{ item.effect == 1 ? '已生效' : '未生效' }}-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="line"></view>-->
<!-- <view class="single-info">-->
<!-- <view class="label">缴费状态</view>-->
<!-- <view-->
<!-- :class="{-->
<!-- 'text-primary': item.payStatus == 0,-->
<!-- 'text-success': item.payStatus == 1,-->
<!-- 'text-danger': item.payStatus == 2-->
<!-- }"-->
<!-- class="value"-->
<!-- >-->
<!-- {{ item.payStatus == 0 ? '待缴费' : item.payStatus == 1 ? '缴费成功' : '订单取消' }}-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- -->
<!-- &lt;!&ndash; 费用合计 + 缴费方式 &ndash;&gt;-->
<!-- <view class="price-section">-->
<!-- <view class="price-row">-->
<!-- <text class="price-label">费用合计</text>-->
<!-- <text class="price-value">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>-->
<!-- </view>-->
<!-- <view class="price-row">-->
<!-- <text class="price-label">缴费方式</text>-->
<!-- <text class="price-value">{{ item.ziZhangBu ? '对公转账' : '民生付' }}</text>-->
<!-- </view>-->
<!-- </view>-->
<!-- -->
<!-- &lt;!&ndash; 按钮组:靠右紧凑展示 &ndash;&gt;-->
<!-- <view class="btn-group">-->
<!-- &lt;!&ndash; 已缴费:申请开票/已开票(需要审核通过才能开票) &ndash;&gt;-->
<!-- <template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">-->
<!-- <button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice" @click="makeInvoiceFN(item)">-->
<!-- 开票-->
<!-- </button>-->
<!-- </template>-->
<!-- &lt;!&ndash; 已开票:查看发票 &ndash;&gt;-->
<!-- <template v-if="item.invoiceStatus == 1">-->
<!-- <button class="btn btn-invoice" @click.stop="viewInvoice(item)">查看发票</button>-->
<!-- </template>-->
<!-- &lt;!&ndash; 未缴费:去缴费 + 取消订单 &ndash;&gt;-->
<!-- &lt;!&ndash; <template v-if="item.payStatus == 0">-->
<!-- <button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>-->
<!-- <button class="btn btn-pay" @click="handlePay(item)">去缴费</button>-->
<!-- </template> &ndash;&gt;-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- 有数据才循环 -->
<view v-if="list.length > 0">
<view
v-for="(item, index) in list"
:key="index"
class="order-card"
class="order-card-new"
@click="goToDetail(item)"
>
<!-- 订单头部:日期 + 状态 -->
<view class="card-header">
<view class="date">
<!-- <image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" style="width:30rpx;height:30rpx;"/> -->
<!-- -->
<text class="value text-primary">{{ item.wfCode || '——' }}</text>
</view>
<view class="status-tags">
<!-- <view
class="status-tag"
:class="{
success: item.payStatus == 1,
danger: item.payStatus == 2,
pending: item.payStatus == 0
}"
>
{{ getStatusText(item.payStatus) }}
</view> -->
<view
:class="{
<view class="data-header">
<text class="member-label">{{ tabs[currentTab].label }}·</text>
<text class="value ">{{ item.orderName || '——' }}</text>
</view>
<text :class="{
'status-wait': item.auditStatus == 0,
'status-pending': item.auditStatus == 1,
'status-success': item.auditStatus == 2,
'status-danger': item.auditStatus == 3
}"
class="status-tag ml-10"
>
{{ getAuditStatusText(item.auditStatus) }}
class="status-tag ">{{ getAuditStatusText(item.auditStatus) }}
</text>
</view>
</view>
<view class="card-header">
<view class="date">
<view class="data-header">
<text class="value">
<text class="tradeNo">订单编号:</text>
{{ item.tradeNo || '——' }}
</text>
</view>
</view>
</view>
<!-- 订单编号、缴费编号 -->
<view class="info-row">
<text class="label">订单编号:</text>
<text class="value">{{ item.tradeNo || '——' }}</text>
<view class="card-header">
<view class="date">
<view class="data-header">
<text class="value">
<text class="tradeNo">缴费编号:</text>
{{ item.wfCode || '——' }}
</text>
</view>
</view>
</view>
<view v-if="item.orderName" class="info-row">
<text class="label">缴费名称:</text>
<text class="value">{{ item.orderName || '' }}</text>
<view class="member-time">
<view class="label">
<text class="star"></text>
{{ `${filterTime(item.genTime)}${filterType(item.type)}` }}
</view>
<view class="price">
<view>¥{{ item.price || '0.00' }}</view>
<view v-if="item.type==0" class="person">共{{ item.content?.allPersonCount || 0 }}人</view>
<view v-if="item.type==1" class="person">共{{ item.content?.yearCount || 0 }}年</view>
<view v-if="item.type==2||item.type==3||item.type==4" class="person">共{{
item.content?.personCount || 0
}}人
</view>
</view>
</view>
<!-- <view class="info-row">
<text class="label">缴费编号:</text>
</view> -->
<!-- 核心:前2tab仅展示缴费年限,后2tab仅展示人数合计 -->
<view v-if="item.content" class="info-section flex f-j-s">
......@@ -112,35 +258,34 @@
</view>
</view>
<!-- 费用合计 + 缴费方式 -->
<view class="price-section">
<view class="price-row">
<text class="price-label">费用合计</text>
<text class="price-value">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>
<!-- 按钮组:靠右紧凑展示 -->
<view class="btn-group">
<view>
<text class="more" @click="goToDetail(item)">更多</text>
</view>
<view class="price-row">
<text class="price-label">缴费方式</text>
<text class="price-value">{{ item.ziZhangBu ? '对公转账' : '民生付' }}</text>
<view class="btn-flex">
<!-- 已缴费:申请开票/已开票(需要审核通过才能开票) -->
<template>
<button class="btn btn-info" @click="goToDetail(item)">查看明细</button>
</template>
<!-- 已缴费:申请开票/已开票(需要审核通过才能开票) -->
<template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">
<button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice"
@click="makeInvoiceFN(item)">
开票
</button>
</template>
<!-- 已开票:查看发票 -->
<template v-if="item.invoiceStatus == 1">
<button class="btn btn-invoice" @click.stop="viewInvoice(item)">查看发票</button>
</template>
<!-- 未缴费:去缴费 + 取消订单 -->
<!-- <template v-if="item.payStatus == 0">
<button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>
<button class="btn btn-pay" @click="handlePay(item)">去缴费</button>
</template> -->
</view>
</view>
<!-- 按钮组:靠右紧凑展示 -->
<view class="btn-group">
<!-- 已缴费:申请开票/已开票(需要审核通过才能开票) -->
<template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">
<button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice" @click="makeInvoiceFN(item)">
开票
</button>
</template>
<!-- 已开票:查看发票 -->
<template v-if="item.invoiceStatus == 1">
<button class="btn btn-invoice" @click.stop="viewInvoice(item)">查看发票</button>
</template>
<!-- 未缴费:去缴费 + 取消订单 -->
<!-- <template v-if="item.payStatus == 0">
<button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>
<button class="btn btn-pay" @click="handlePay(item)">去缴费</button>
</template> -->
</view>
</view>
</view>
......@@ -233,6 +378,7 @@ import {
} from '@dcloudio/uni-app'
import * as api from '@/common/api.js'
import config from '@/config.js'
import dayjs from 'dayjs'
// 获取deptType值(初始值为0,在onMounted中设置实际值)
const deptType = ref(0);
......@@ -245,29 +391,29 @@ const tabs = computed(() => {
if (dt === 6) {
console.log('返回3个tab: 个人会员、单位会员、级位考试');
return [
{name: '个人会员', type: '0'},
{name: '单位会员', type: '1'},
{name: '级位考试', type: '2'}
{name: '个人会员', type: '0', label: "会员"},
{name: '单位会员', type: '1', label: "单位"},
{name: '级位考试', type: '2', label: "级位"}
];
} else if (dt === 2) {
console.log('返回3个tab: 单位会员、段位考试、越段考试');
return [
// {name: '单位会员', type: '1'},
{name: '段位考试', type: '3'},
{name: '越段考试', type: '4'}
{name: '段位考试', type: '3', label: "段位"},
{name: '越段考试', type: '4', label: "越段"}
];
} else if (dt === 1) {
console.log('返回默认5个tab, dt值为:', dt);
return [
{name: '个人会员', type: '0'},
{name: '单位会员', type: '1'},
{name: '级位考试', type: '2'},
{name: '段位考试', type: '3'},
{name: '越段考试', type: '4'}
{name: '个人会员', type: '0', label: "会员"},
{name: '单位会员', type: '1', label: "单位"},
{name: '级位考试', type: '2', label: "级位"},
{name: '段位考试', type: '3', label: "段位"},
{name: '越段考试', type: '4', label: "越段"}
];
} else {
return [
{name: '单位会员', type: '1'},
{name: '单位会员', type: '1', label: "单位"},
];
}
});
......@@ -309,8 +455,10 @@ onLoad((option) => {
const app = getApp();
deptType.value = Number(app.globalData?.deptType || 0);
const firstType = tabs.value[0]?.type ?? '0';
currentTab.value = option.type || firstType;
queryParams.type = option.type || firstType;
// currentTab.value = option.type || firstType;
// queryParams.type = option.type || firstType;
currentTab.value = firstType;
queryParams.type = firstType;
initData();
});
......@@ -368,6 +516,20 @@ const getAuditStatusText = (status) => {
return map[status] || '';
};
const filterTime = (row) => {
if (!row) return ''
return dayjs(row).format('YYYY年MM月DD日')
}
const filterType = (row) => {
if (row == 0) return '个人会员缴费办理'
if (row == 1) return '单位会员缴费办理'
if (row == 2) return '级位考试办理'
if (row == 3) return '段位考试办理'
if (row == 4) return '越位考试办理'
}
// 数据请求核心方法
const initData = async () => {
loading.value = true;
......@@ -409,6 +571,12 @@ const initData = async () => {
}
};
const handelSearch = () => {
pageNum.value = 1
list.value = []
initData()
}
// 删除订单
const handleDelete = (item) => {
currentOrder.value = item;
......@@ -425,7 +593,7 @@ const confirmDel = async () => {
uni.showToast({title: '删除成功', icon: 'success'});
pageNum.value = 1;
list.value = [];
initData();
await initData();
closeDelPopup();
} catch (e) {
uni.showToast({title: '删除失败', icon: 'error'});
......@@ -521,7 +689,7 @@ const confirmCancel = async () => {
uni.showToast({title: '取消成功', icon: 'success'});
pageNum.value = 1;
list.value = [];
initData();
await initData();
closeCancelPopup();
} catch (e) {
uni.showToast({title: '取消失败', icon: 'error'});
......@@ -549,24 +717,67 @@ const closeCancelPopup = () => {
}
}
/* 搜索栏 */
.search-bar {
display: flex;
align-items: center;
padding: 20rpx 30rpx;
background-color: #ffffff;
margin-bottom: 0;
.search-input {
flex: 1;
margin-right: 20rpx;
:deep(.uni-easyinput__content) {
border-radius: 40rpx;
background-color: #f5f7fa;
height: 76rpx;
padding: 0 24rpx;
}
:deep(.uni-easyinput__content-input) {
font-size: 28rpx;
color: #333;
}
}
.add-btn {
display: flex;
align-items: center;
padding: 10rpx 30rpx;
background-color: #AD181F;
border-radius: 40rpx;
font-size: 28rpx;
color: #ffffff;
}
.add-icon {
font-size: 36rpx;
margin-right: 10rpx;
font-weight: bold;
}
}
// 标签栏样式
.tab-bar {
display: flex;
background: #fff;
border-bottom: 1rpx solid #eee;
//background: #fff;
//border-bottom: 1rpx solid #eee;
flex-shrink: 0;
.tab-item {
flex: 1;
text-align: center;
padding: 24rpx 0;
font-size: 28rpx;
font-size: 30rpx;
color: #666;
position: relative;
font-weight: bold;
&.active {
color: #e4393c;
font-weight: 500;
color: #c30d23;
font-weight: bold;
&::after {
content: '';
......@@ -575,8 +786,9 @@ const closeCancelPopup = () => {
left: 50%;
transform: translateX(-50%);
width: 60rpx;
height: 4rpx;
background: linear-gradient(90deg, #FF755A, #F51722);
height: 6rpx;
//background: linear-gradient(90deg, #FF755A, #F51722);
background: #c30d23;
border-radius: 2rpx;
}
}
......@@ -614,7 +826,7 @@ const closeCancelPopup = () => {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
padding-bottom: 10rpx;
// margin-bottom: 20rpx;
// border-bottom: 1rpx dashed #eee;
......@@ -636,21 +848,21 @@ const closeCancelPopup = () => {
.status-tag {
font-size: 22rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx;
//padding: 6rpx 16rpx;
//border-radius: 20rpx;
&.success {
background: #e6f7ef;
//background: #e6f7ef;
color: #52c41a;
}
&.danger {
background: #fff1f0;
//background: #fff1f0;
color: #ff4d4f;
}
&.pending {
background: #f5f5f5;
//background: #f5f5f5;
color: #999;
}
......@@ -659,27 +871,27 @@ const closeCancelPopup = () => {
}
&.status-wait {
background: #f0f5ff;
//background: #f0f5ff;
color: #597ef7;
border: 1rpx solid rgba(89, 126, 247, 0.3);
//border: 1rpx solid rgba(89, 126, 247, 0.3);
}
&.status-pending {
background: #fff7e6;
//background: #fff7e6;
color: #faad14;
border: 1rpx solid rgba(250, 173, 20, 0.3);
//border: 1rpx solid rgba(250, 173, 20, 0.3);
}
&.status-success {
background: #e6f7ef;
//background: #e6f7ef;
color: #52c41a;
border: 1rpx solid rgba(82, 196, 26, 0.3);
//border: 1rpx solid rgba(82, 196, 26, 0.3);
}
&.status-danger {
background: #fff1f0;
//background: #fff1f0;
color: #ff4d4f;
border: 1rpx solid rgba(232, 52, 29, 0.3);
//border: 1rpx solid rgba(232, 52, 29, 0.3);
}
}
}
......@@ -708,9 +920,10 @@ const closeCancelPopup = () => {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20rpx 0;
//margin: 20rpx 0;
padding: 0 20rpx;
min-height: 100rpx;
border-radius: 20rpx;
}
.line {
......@@ -726,6 +939,7 @@ const closeCancelPopup = () => {
border-radius: 8rpx;
font-size: 26rpx;
text-align: center;
.label {
color: #999;
text-align: center;
......@@ -736,19 +950,19 @@ const closeCancelPopup = () => {
font-weight: 500;
text-align: center;
margin-top: 10rpx;
&.text-primary {
color: #597ef7;
}
&.text-success {
color: #52c41a;
}
&.text-danger {
color: #ff4d4f;
}
&.text-warning {
color: #faad14;
}
......@@ -790,21 +1004,32 @@ const closeCancelPopup = () => {
// 按钮组
.btn-group {
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
gap: 16rpx;
width: 100%;
margin-top: 20rpx;
.more {
color: #666;
}
.btn-flex {
display: flex;
justify-content: flex-end;
gap: 16rpx;
}
.btn {
// 固定宽度,所有按钮一样大
width: 160rpx;
height: 70rpx;
line-height: 70rpx;
height: 50rpx;
line-height: 50rpx;
padding: 0;
border-radius: 40rpx;
font-size: 24rpx;
border-radius: 20rpx;
font-size: 28rpx;
white-space: nowrap;
font-weight: bold;
border: none;
background: transparent;
text-align: center;
......@@ -817,20 +1042,27 @@ const closeCancelPopup = () => {
&.btn-delete {
background: #fff;
color: #e4393c;
border: 1rpx solid #e4393c;
//color: #e4393c;
color: #c30d23;
border: 1rpx solid #c30d23;
}
&.btn-invoice {
background: #fff;
color: #e4393c;
border: 1rpx solid #e4393c;
color: #c30d23;
border: 1rpx solid #c30d23;
}
&.btn-view-invoice {
background: linear-gradient(90deg, #FF755A, #F51722);
color: #fff;
border: none;
//background: linear-gradient(90deg, #FF755A, #F51722);
color: #c30d23;
//border: none;
border: 1rpx solid #c30d23;
}
&.btn-info {
color: #444;
border: 1rpx solid #666;
}
&.btn-cancel {
......@@ -840,9 +1072,10 @@ const closeCancelPopup = () => {
}
&.btn-pay {
background: linear-gradient(90deg, #FF755A, #F51722);
color: #fff;
border: none;
//background: linear-gradient(90deg, #FF755A, #F51722);
color: #c30d23;
//border: none;
border: 1rpx solid #c30d23;
}
&:disabled {
......@@ -1040,4 +1273,143 @@ const closeCancelPopup = () => {
}
}
}
.order-card-new {
background: #fff;
margin-bottom: 20rpx;
padding: 20rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
border-radius: 12rpx;
display: flex;
flex-direction: column;
// 卡片头部
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10rpx;
// margin-bottom: 20rpx;
// border-bottom: 1rpx dashed #eee;
.date {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8rpx;
font-size: 26rpx;
.data-header {
display: flex;
}
.member-label {
color: #c30d23;
font-size: 28rpx;
font-weight: bold;
}
.value {
color: #000;
font-size: 28rpx;
font-weight: bold;
.tradeNo {
color: #999;
font-size: 26rpx;
}
}
.date-text {
color: #666;
}
}
.status-tags {
display: flex;
gap: 10rpx;
}
.status-tag {
font-size: 26rpx;
//padding: 6rpx 16rpx;
//border-radius: 20rpx;
&.success {
//background: #e6f7ef;
color: #52c41a;
}
&.danger {
//background: #fff1f0;
color: #ff4d4f;
}
&.pending {
//background: #f5f5f5;
color: #999;
}
&.ml-10 {
margin-left: 10rpx;
}
&.status-wait {
//background: #f0f5ff;
color: #597ef7;
//border: 1rpx solid rgba(89, 126, 247, 0.3);
}
&.status-pending {
//background: #fff7e6;
color: #faad14;
//border: 1rpx solid rgba(250, 173, 20, 0.3);
}
&.status-success {
//background: #e6f7ef;
color: #52c41a;
//border: 1rpx solid rgba(82, 196, 26, 0.3);
}
&.status-danger {
//background: #fff1f0;
color: #ff4d4f;
//border: 1rpx solid rgba(232, 52, 29, 0.3);
}
}
}
.member-time {
width: 100%;
display: flex;
justify-content: space-between;
padding-bottom: 10rpx;
.label {
font-size: 26rpx;
color: #999;
.star {
color: #000;
font-size: 28rpx;
}
}
.price {
font-size: 30rpx;
color: #000;
font-weight: bold;
.person {
font-size: 24rpx;
color: #999;
text-align: right;
}
}
}
}
</style>
......
<template>
<view>
<scroll-view scroll-y class="detail-content">
<scroll-view class="detail-content" scroll-y>
<!-- 考段基本信息 -->
<view class="card">
<view class="card-header">
......@@ -10,7 +10,7 @@
</view>
<view class="card-body">
<view class="info-row">
<text class="label">名称</text>
<text class="label">名称</text>
<text class="value">{{ form.name || '' }}</text>
</view>
<view class="info-row">
......@@ -38,15 +38,15 @@
<text class="label">考段地点</text>
<text class="value">{{ form.address || '--' }}</text>
</view>
<view class="info-row" v-if="userType == '2' || userType == '1'">
<view v-if="userType == '2' || userType == '1'" class="info-row">
<text class="label">总金额</text>
<text class="value text-red">¥{{ (Number(form.totalAmount) || 0).toFixed(2) }}</text>
</view>
</view>
</view>
<!-- 收货地址 -->
<view class="card" v-if="addressForm.name || addressForm.phone || addressForm.address">
<view v-if="addressForm.name || addressForm.phone || addressForm.address" class="card">
<view class="card-header">
<view class="header-left">收货地址</view>
</view>
......@@ -65,7 +65,7 @@
</view>
</view>
</view>
<!-- 考生信息(完全去字段名,匹配参考图布局) -->
<view class="card">
<view class="card-header">
......@@ -74,33 +74,33 @@
{{ tablePersonInfo.total || 0 }}
</view>
</view>
<!-- 级别统计 -->
<view class="level-summary" v-if="tablePersonInfo.levelArr?.length > 0">
<view class="level-tag" v-for="l in tablePersonInfo.levelArr" :key="l.level">
<view v-if="tablePersonInfo.levelArr?.length > 0" class="level-summary">
<view v-for="l in tablePersonInfo.levelArr" :key="l.level" class="level-tag">
{{ szToHz(l.level) }}{{ l.num }}
</view>
</view>
<!-- 加载状态 -->
<view v-if="loading" class="state-tip">加载中...</view>
<view v-else-if="list.length === 0" class="state-tip">暂无考生信息</view>
<!-- 考生列表(去字段名,美观布局) -->
<view class="student-list" v-else>
<view class="student-card" v-for="n in list" :key="n.id">
<view v-else class="student-list">
<view v-for="n in list" :key="n.id" class="student-card">
<view class="student-top">
<view class="student-name">
<text class="name">{{ n.realName || '--' }}</text>
<text class="unit">{{ n.memName || '' }}</text>
</view>
<view class="pass-tag" :class="n.isPass == 1 ? 'pass' : 'fail'">
<view :class="n.isPass == 1 ? 'pass' : 'fail'" class="pass-tag">
{{ n.isPass == 1 ? '通过' : '未通过' }}
</view>
</view>
<view class="student-info">
<view class="info-col">
<text class="info-text" >{{ n.idcCode || '--' }}</text>
<text class="info-text">{{ n.idcCode || '--' }}</text>
</view>
<view class="info-col">
<text class="info-text">{{ !n.levelOld || n.levelOld == 0 ? '十级' : szToHz(n.levelOld) + '级' }}</text>
......@@ -108,33 +108,33 @@
<view class="info-col">
<text class="info-text">{{ n.levelNew ? szToHz(n.levelNew) + '级' : '--' }}</text>
</view>
<view class="info-col" v-if="userType == '2' || userType == '1'">
<view v-if="userType == '2' || userType == '1'" class="info-col">
<text class="info-text text-red">¥{{ (Number(n.examFee) || 0).toFixed(2) }}</text>
</view>
</view>
</view>
</view>
<!-- 加载更多 -->
<view class="load-more" v-if="list.length > 0 && hasMore" @click="loadMore">
<view v-if="list.length > 0 && hasMore" class="load-more" @click="loadMore">
{{ loadingMore ? '加载中...' : '加载更多' }}
</view>
<!-- <view class="no-more" v-if="!hasMore && list.length > 0">没有更多了</view> -->
</view>
<!-- 审核记录 -->
<view class="h3-padding">审核记录</view>
<view class="wBox">
<view v-if="loadingAudit" class="state-tip">加载中...</view>
<view v-else-if="recordList.length === 0" class="state-tip">暂无审核记录</view>
<view class="stepItem" v-else v-for="(n, index) in recordList" :key="index">
<view v-for="(n, index) in recordList" v-else :key="index" class="stepItem">
<view class="time">{{ n.auditTime || '待审批' }}</view>
<view class="content">
<view class="status">
<text v-if="n.auditResult==1" class="text-success">审核通过</text>
<text v-else-if="n.auditResult==0" class="text-danger">审核拒绝</text>
<text v-else class="text-primary">审核中</text>
<text v-else class="text-primary">审核中</text>
</view>
<view class="deptName">{{ n.auditDeptName || n.deptName || '--' }}</view>
<view v-if="n.auditMsg">备注:{{ n.auditMsg }}</view>
......@@ -148,9 +148,9 @@
<script setup>
import * as api from '@/common/api.js'
import _ from 'underscore'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { szToHz } from '@/common/utils.js'
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import {szToHz} from '@/common/utils.js'
const app = getApp()
const userType = ref('')
......@@ -174,7 +174,7 @@ let examType = ref('2')
onLoad((option) => {
if (!option.examId) {
uni.showToast({ title: '参数错误', icon: 'none' })
uni.showToast({title: '参数错误', icon: 'none'})
setTimeout(() => uni.navigateBack(), 1500)
return
}
......@@ -186,7 +186,7 @@ onLoad((option) => {
})
function initData() {
uni.showLoading({ title: '加载中' })
uni.showLoading({title: '加载中'})
userType.value = app.globalData.userType || '3'
getForm()
getList()
......@@ -200,12 +200,12 @@ function getForm() {
form.value = res.data || {}
addressForm.value = res.data?.postAddress || {}
} else {
uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
uni.showToast({title: res.msg || '获取详情失败', icon: 'none'})
}
}).catch(err => {
uni.hideLoading()
console.error('getForm error:', err)
uni.showToast({ title: '网络请求失败', icon: 'none' })
uni.showToast({title: '网络请求失败', icon: 'none'})
})
}
......@@ -235,7 +235,7 @@ function getList() {
function calcPersonInfo(rows) {
if (!rows || rows.length === 0) {
tablePersonInfo.value = { total: 0, levelArr: [] }
tablePersonInfo.value = {total: 0, levelArr: []}
return
}
const total = rows.length
......@@ -246,7 +246,7 @@ function calcPersonInfo(rows) {
if (temp) {
temp.num++
} else {
levelArr.push({ level: d.levelNew, num: 1 })
levelArr.push({level: d.levelNew, num: 1})
}
})
tablePersonInfo.value = {
......@@ -288,7 +288,7 @@ function loadMore() {
function getAuditResultText(result, statusStr) {
if (statusStr) return statusStr
const map = { 0: '审核拒绝', 1: '审核通过' }
const map = {0: '审核拒绝', 1: '审核通过'}
return map[result] || '审核中'
}
......@@ -314,7 +314,7 @@ function goBack() {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
// 颜色变量 - 小程序主色系
$primary-color: #e8341d;
$success-color: #52c41a;
......@@ -343,7 +343,7 @@ $content-gap: 24rpx; // 统一内容边距
position: sticky;
top: 0;
z-index: 100;
.back-btn {
width: 40rpx;
height: 40rpx;
......@@ -351,13 +351,13 @@ $content-gap: 24rpx; // 统一内容边距
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 32rpx;
font-weight: 500;
color: $text-primary;
}
.placeholder {
width: 40rpx;
}
......@@ -390,11 +390,11 @@ $content-gap: 24rpx; // 统一内容边距
// display: flex;
padding: 16rpx;
border-bottom: 1rpx dashed #eee;
&:last-child {
border-bottom: none;
}
.time {
width: 80%;
font-size: 22rpx;
......@@ -402,21 +402,21 @@ $content-gap: 24rpx; // 统一内容边距
flex-shrink: 0;
padding-top: 4rpx;
}
.content {
flex: 1;
.status {
font-size: 28rpx;
font-weight: 600;
margin-bottom: 6rpx;
}
.deptName {
font-size: 26rpx;
color: #666;
}
view {
font-size: 24rpx;
color: #999;
......@@ -439,13 +439,13 @@ $content-gap: 24rpx; // 统一内容边距
align-items: center;
padding: 24rpx $content-gap 20rpx;
border-bottom: 1rpx solid $border-color;
.header-left {
font-size: 30rpx;
font-weight: 600;
color: $text-primary;
}
.header-right {
font-size: 26rpx;
color: $primary-color;
......@@ -464,18 +464,18 @@ $content-gap: 24rpx; // 统一内容边距
align-items: center;
padding: 18rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.label {
font-size: 28rpx;
color: $text-placeholder;
flex-shrink: 0;
width: 170rpx;
}
.value {
font-size: 28rpx;
color: $text-primary;
......@@ -494,7 +494,7 @@ $content-gap: 24rpx; // 统一内容边距
padding: 20rpx $content-gap;
// background: #fff5f5;
border-bottom: 1rpx solid $border-color;
.level-tag {
font-size: 24rpx;
color: $primary-color;
......@@ -523,40 +523,40 @@ $content-gap: 24rpx; // 统一内容边距
margin-top: 16rpx;
border: 1rpx solid $border-color;
// border-left: 4rpx solid $primary-color;
.student-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.student-name {
.name {
font-size: 32rpx;
font-weight: 600;
color: $text-primary;
}
.unit {
font-size: 24rpx;
color: $text-placeholder;
margin-left: 16rpx;
}
}
.pass-tag {
font-size: 24rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx;
flex-shrink: 0;
font-weight: 500;
&.pass {
background: rgba($success-color, 0.1);
color: $success-color;
border: 1rpx solid rgba($success-color, 0.2);
}
&.fail {
background: rgba($danger-color, 0.1);
color: $danger-color;
......@@ -564,18 +564,18 @@ $content-gap: 24rpx; // 统一内容边距
}
}
}
// 考生信息去字段名,4列等宽布局
.student-info {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12rpx;
.info-col {
flex: 1;
text-align: center;
.info-text {
font-size: 28rpx;
color: $text-primary;
......@@ -608,4 +608,4 @@ $content-gap: 24rpx; // 统一内容边距
.text-green {
color: $success-color !important;
}
</style>
\ No newline at end of file
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!