dbdf4c4c by lttnew

样式优化

1 parent 9d8dc7ee
// dev
const baseUrl_api = 'http://192.168.1.137:8787'
// const baseUrl_api = 'http://tk001.wxjylt.com/stage-api'
// const baseUrl_api = 'http://192.168.1.137:8787'
const baseUrl_api = 'http://tk001.wxjylt.com/stage-api'
const payUrl = 'https://wxpay.cmbc.com.cn/mobilePlatform/appserver/lcbpPay.do'
// prod
......
......@@ -22,7 +22,7 @@
<uni-list-item thumb="/static/user_icon03.png" title="账号安全" showArrow clickable @click="goPath('/myCenter/safe')">
</uni-list-item>
<uni-list-item thumb="/static/user_icon03.png" v-if="userType==2 || userType==6" title="我的订单" showArrow clickable @click="goPath('/myCenter/order')">
<uni-list-item thumb="/static/user_icon04.png" v-if="userType==2 || userType==6" title="我的订单" showArrow clickable @click="goPath('/myCenter/order')">
</uni-list-item>
</uni-list>
......
......@@ -33,8 +33,9 @@
<!-- 订单头部:日期 + 状态 -->
<view class="card-header">
<view class="date">
<image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" v-if="item.payTime" mode="widthFix" style="width:30rpx;height:30rpx;"/>
<text class="date-text" v-if="item.payTime">{{ item.payTime }}</text>
<image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" style="width:30rpx;height:30rpx;"/>
<!-- -->
<text class="value code-text" @click="goToDetail(item)">{{ item.wfCode || '——' }}</text>
</view>
<view class="status-tags">
<view
......@@ -65,10 +66,10 @@
<text class="label">订单编号:</text>
<text class="value">{{ item.tradeNo || '——' }}</text>
</view>
<view class="info-row">
<!-- <view class="info-row">
<text class="label">缴费编号:</text>
<text class="value">{{ item.wfCode || '——' }}</text>
</view>
</view> -->
<!-- 核心:前2tab仅展示缴费年限,后2tab仅展示人数合计 -->
<view class="info-section flex f-j-s" v-if="item.content">
......@@ -168,7 +169,9 @@ import * as api from '@/common/api.js'
import config from '@/config.js'
// 获取deptType值(初始值为0,在onMounted中设置实际值)
const deptType = ref(0);
const goToDetail = (item) => {
uni.navigateTo({ url: `/pages/rank/applyDetail?examId=${item.sourceId || item.id}&type=${queryParams.type}` });
}
// 标签栏配置(根据deptType动态生成)
const tabs = computed(() => {
......@@ -803,4 +806,10 @@ const closeCancelPopup = () => {
border: none;
}
}
.code-text {
font-size: 28rpx;
font-weight: 600;
color: #e8341d;
letter-spacing: 1rpx;
}
</style>
\ No newline at end of file
......
......@@ -119,7 +119,7 @@
信息变更
</view>
<view @click="goPath('/group/auditRecord1')">
<image :src="config.baseUrl_api+'/fs/static/icon/27.png'" />
<image :src="config.baseUrl_api+'/fs/static/icon/17.png'" />
审核记录
</view>
<view @click="goPath('/level/ztx/examinationVerification')">
......@@ -141,11 +141,11 @@
级位变更
</view>
<view @click="goPath('/level/auditRecord2')">
<image :src="config.baseUrl_api+'/fs/static/icon/27.png'" />
<image :src="config.baseUrl_api+'/fs/static/icon/17.png'" />
审核记录
</view>
<view @click="goPath('/level/ztx/costSettlement')">
<image :src="config.baseUrl_api+'/fs/static/icon/27.png'" />
<image :src="config.baseUrl_api+'/fs/static/icon/10.png'" />
费用结算
</view>
</view>
......@@ -237,7 +237,7 @@
证书发布
</view>
<view @click="goPath('/level/ztx/mail')">
<image :src="config.baseUrl_api+'/fs/static/icon/18.png'" />
<image :src="config.baseUrl_api+'/fs/static/icon/3.png'" />
证书邮寄
</view>
<view @click="goPath('/personalVip/changeLevelAudit')">
......
......@@ -2,7 +2,7 @@
<view class="page-container">
<!-- 会员卡区域 -->
<view class="member-card">
<image class="card-bg" :src="config.baseUrl_api + '/fs/static/slices/user_01@2x.png'" mode="aspectFill">
<image class="card-bg" :src="config.baseUrl_api + '/fs/static/user_01@2x.png'" mode="aspectFill">
</image>
<!-- 绑定/解绑学员 -->
......@@ -18,7 +18,7 @@
<!-- <image class="avatar" v-if="perInfo.photo" :src="config.baseUrl_api + perInfo.photo"
mode="aspectFill">
</image> -->
<image class="avatar" :src="config.baseUrl_api + '/fs/static/slices/tx@2x.png'"
<image class="avatar" :src="config.baseUrl_api + '/fs/static/tx@2x.png'"
mode="aspectFill">
</image>
</view>
......@@ -35,7 +35,7 @@
<!-- 已过期印章 -->
<image v-if="perInfo?.perValidDateFlag == 0" class="expired-stamp"
:src="config.baseUrl_api + '/fs/static/slices/end@2x.png'" mode="aspectFit">
:src="config.baseUrl_api + '/fs/static/end@2x.png'" mode="aspectFit">
</image>
</view>
......
<template>
<view class="page-container">
<!-- 表格头部 -->
<view class="table-header">
<view class="table-cell table-cell-1">序号</view>
<view class="table-cell table-cell-2">级位</view>
<view class="table-cell table-cell-3">级位号</view>
<view class="table-cell table-cell-4">获得证书时间</view>
<view class="table-cell table-cell-5">操作</view>
<!-- 加载状态 -->
<view v-if="loading" class="loading-container">
<uni-load-more status="loading"></uni-load-more>
</view>
<!-- 表格内容 -->
<view v-if="loading" class="loading-container">
<uni-icons type="spinner" size="40" color="#409eff" class="loading-icon" />
<view class="loading-text">加载中...</view>
<!-- 列表内容 -->
<view v-else class="list-content">
<view class="record-card" v-for="(item, index) in levelRecords" :key="index">
<!-- <view class="card-header">
<text class="card-index">{{ index + 1 }}</text>
<text class="card-level">{{ szToHz(item.level) }}</text>
</view> -->
<view class="card-body">
<view class="card-row">
<text class="row-label">级位</text>
<text class="row-value">{{ szToHz(item.level)}}</text>
</view>
<view class="card-row">
<text class="row-label">级位号</text>
<text class="row-value">{{ item.certCode || '-' }}</text>
</view>
<view class="card-row">
<text class="row-label">获得证书时间</text>
<text class="row-value">{{ item.createTime ? item.createTime.substring(0, 10) : '-' }}</text>
</view>
<view class="card-row" v-if="item.remark?.length > 0">
<text class="row-label">变更记录</text>
<text class="row-value link" @click="showChangeRecord(item)">查看详情</text>
</view>
<view v-else class="table-content">
<view class="table-row" v-for="(item, index) in levelRecords" :key="index">
<view class="table-cell table-cell-1">{{ index + 1 }}</view>
<view class="table-cell table-cell-2">{{ szToHz(item.level) }}</view>
<view class="table-cell table-cell-3">{{ item.certCode }}</view>
<view class="table-cell table-cell-4">{{ item.createTime ? item.createTime.substring(0, 10) : '--' }}</view>
<view class="table-cell table-cell-5">
<view class="change-record-btn" @click="showChangeRecord(item)" v-if="item.remark?.length>0">变更记录</view>
</view>
</view>
......@@ -46,30 +52,22 @@
<view v-if="currentChangeRecord" class="change-details">
<view class="change-item">
<view class="change-label">变更名称:{{ currentChangeRecord.modName || '等级变更' }}</view>
<!-- <view class="change-value"></view> -->
</view>
<view class="change-item">
<view class="change-label">考级级别:{{ szToHz(currentChangeRecord.oldJi) }}</view>
<!-- <view class="change-value"></view> -->
</view>
<view class="change-item">
<view class="change-label">变更后级位:{{ szToHz(currentChangeRecord.newJi) }}</view>
<!-- <view class="change-value"></view> -->
</view>
<view class="change-item">
<view class="change-label">变更时间:{{ parseTime(currentChangeRecord.modTime) }}</view>
<!-- <view class="change-value">/view> -->
</view>
</view>
<!-- 空状态 -->
<view v-else class="empty-state">
<uni-icons type="empty" size="60" color="#ccc" />
<view class="empty-text">暂无变更记录</view>
</view>
</view>
<!-- <view class="popup-footer">
<button class="confirm-btn" @click="closeChangeRecord">确定</button>
</view> -->
</view>
</uni-popup>
</view>
......@@ -189,133 +187,91 @@
.page-container {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
}
/* 导航栏 */
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
background: #ffffff;
padding: 0 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
z-index: 100;
}
.nav-left {
width: 44rpx;
height: 44rpx;
/* 加载状态 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 500rpx;
}
.nav-title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.nav-right {
width: 44rpx;
}
/* 表格头部 */
.table-header {
display: flex;
background: linear-gradient(135deg, #ff6b6b, #ff9f43);
padding: 0 30rpx;
position: sticky;
// top: 88rpx;
z-index: 90;
/* 列表内容 */
.list-content {
padding-bottom: 20rpx;
}
/* 表格内容 */
.table-content {
background: #ffffff;
margin: 20rpx 20rpx;
/* 卡片 */
.record-card {
background: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
/* 表格行 */
.table-row {
.card-header {
display: flex;
padding: 0 30rpx;
border-bottom: 1rpx solid #f0f0f0;
transition: all 0.3s ease;
}
.table-row:last-child {
border-bottom: none;
}
.table-row:hover {
background: #fff9f0;
}
align-items: center;
padding: 24rpx 30rpx;
background: linear-gradient(135deg, #ff6b6b, #ff9f43);
/* 表格单元格 */
.table-cell {
padding: 24rpx 0;
font-size: 26rpx;
color: #333;
.card-index {
width: 44rpx;
height: 44rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24rpx;
color: #fff;
margin-right: 16rpx;
}
.table-header .table-cell {
color: #ffffff;
font-weight: 500;
.card-level {
font-size: 32rpx;
font-weight: 600;
color: #fff;
}
/* 单元格宽度 */
.table-cell-1 {
width: 80rpx;
}
.table-cell-2 {
width: 120rpx;
.card-body {
padding: 8rpx 24rpx 24rpx;
}
.table-cell-3 {
flex: 1;
padding: 0 10rpx;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;
.table-cell-4 {
width: 200rpx;
&:last-child {
border-bottom: none;
}
.table-cell-5 {
width: 150rpx;
.row-label {
font-size: 26rpx;
color: #999;
flex-shrink: 0;
}
/* 变更记录按钮 */
.change-record-btn {
background: linear-gradient(135deg, #ff6b6b, #ff9f43);
color: #ffffff;
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-size: 24rpx;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.row-value {
font-size: 26rpx;
color: #333;
text-align: right;
flex: 1;
margin-left: 20rpx;
word-break: break-all;
.change-record-btn:hover {
transform: scale(1.05);
box-shadow: 0 4rpx 8rpx rgba(255, 107, 107, 0.3);
&.link {
color: #1890ff;
}
}
.change-record-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
/* 空状态 */
......@@ -335,11 +291,10 @@
/* 弹窗 */
.popup-content {
width: 300px;
width: 600rpx;
background: #ffffff;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
}
.popup-header {
......@@ -366,148 +321,25 @@
border-radius: 50%;
}
.popup-close uni-icons {
color: #ffffff;
}
.popup-body {
padding: 40rpx;
}
/* 变更记录详情 */
.change-details {
width: 100%;
}
.change-item {
margin-bottom: 30rpx;
}
.change-item:last-child {
&:last-child {
margin-bottom: 0;
}
}
.change-label {
font-size: 26rpx;
color: #666;
margin-bottom: 10rpx;
font-weight: 500;
}
.change-value {
font-size: 28rpx;
color: #333;
padding: 16rpx 24rpx;
background: #fff9f0;
border-radius: 12rpx;
border-left: 4rpx solid #ff6b6b;
}
.popup-footer {
padding: 0 30rpx 30rpx;
}
.confirm-btn {
width: 100%;
height: 80rpx;
background: linear-gradient(135deg, #ff6b6b, #ff9f43);
color: #ffffff;
border: none;
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 500;
transition: all 0.3s ease;
}
.confirm-btn:hover {
transform: translateY(-2rpx);
box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}
/* 加载状态 */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 500rpx;
}
.loading-icon {
animation: spin 1s linear infinite;
color: #ff6b6b;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #ff6b6b;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 响应式调整 */
@media (max-width: 375px) {
.table-header,
.table-row {
padding: 0 20rpx;
}
.table-cell {
font-size: 24rpx;
padding: 20rpx 0;
}
.table-cell-1 {
width: 60rpx;
}
.table-cell-2 {
width: 100rpx;
}
.table-cell-4 {
width: 160rpx;
}
.table-cell-5 {
width: 120rpx;
}
.change-record-btn {
font-size: 22rpx;
padding: 6rpx 12rpx;
}
.popup-content {
width: 300px;
max-width: 450rpx;
}
.popup-header,
.popup-body,
.popup-footer {
padding: 24rpx 32rpx;
}
.change-label {
font-size: 28rpx;
}
.change-value {
font-size: 26rpx;
padding: 12rpx 20rpx;
}
.change-item {
margin-bottom: 20rpx;
}
}
</style>
\ No newline at end of file
......
......@@ -137,9 +137,9 @@ const queryParams = reactive({
pageNum: 1,
pageSize: 10,
type: '0', // 0表示个人会员
queryType: '1',
// queryType: '1',
// payStatus: '',
// perId: ''
perId: ''
});
// 弹窗控制
......@@ -157,12 +157,12 @@ const currentOrder = ref(null);
// 页面挂载初始化
onMounted(() => {
// 获取用户信息
// if (userInfo.value && userInfo.value.perId) {
// queryParams.perId = userInfo.value.perId;
if (userInfo.value && userInfo.value.perId) {
queryParams.perId = userInfo.value.perId;
initData();
// } else {
// uni.showToast({ title: '获取用户信息失败', icon: 'none' });
// }
} else {
uni.showToast({ title: '获取用户信息失败', icon: 'none' });
}
});
// 小程序原生触底加载
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!