Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
67042ffd by 张猛
Options

订单页面样式修改

1 parent 47f54494
Inline Side-by-side
Showing 1 changed file with 469 additions and 97 deletions
myCenter/order.vue
1 <template> 1 <template>
2 <view :class="{ 'no-scroll': isPopupOpen }" class="order-page"> 2 <view :class="{ 'no-scroll': isPopupOpen }" class="order-page">
3 <!-- 顶部标签栏 --> 3 <!-- 顶部标签栏 -->
4
5 <view class="search-bar">
6 <uni-easyinput
7 v-model="queryParams.wfCode"
8 :input-border="false"
9 class="search-input"
10 placeholder="搜索缴费编号"
11 placeholderStyle="font-size:30rpx;color:#999"
12 prefixIcon="search"
13 @blur="handelSearch"
14 @clear="handelSearch">
15 </uni-easyinput>
16 <view class="add-btn" @click="handelSearch">
17 <text class="add-text">搜索</text>
18 </view>
19 </view>
20
4 <view class="tab-bar"> 21 <view class="tab-bar">
5 <view 22 <view
6 v-for="(tab, index) in tabs" 23 v-for="(tab, index) in tabs"
...@@ -24,58 +41,187 @@ ...@@ -24,58 +41,187 @@
24 > 41 >
25 <view class="order-list"> 42 <view class="order-list">
26 <!-- 有数据才循环 --> 43 <!-- 有数据才循环 -->
44 <!-- <view v-if="list.length > 0">-->
45 <!-- <view-->
46 <!-- v-for="(item, index) in list"-->
47 <!-- :key="index"-->
48 <!-- class="order-card"-->
49 <!-- @click="goToDetail(item)"-->
50 <!-- >-->
51 <!-- &lt;!&ndash; 订单头部：日期 + 状态 &ndash;&gt;-->
52 <!-- <view class="card-header">-->
53 <!-- <view class="date">-->
54 <!-- &lt;!&ndash; <image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" style="width:30rpx;height:30rpx;"/> &ndash;&gt;-->
55 <!-- &lt;!&ndash; &ndash;&gt;-->
56 <!-- <text class="value text-primary">{{ item.wfCode || '——' }}</text>-->
57 <!-- </view>-->
58 <!-- <view class="status-tags">-->
59 <!-- &lt;!&ndash; <view-->
60 <!-- class="status-tag"-->
61 <!-- :class="{-->
62 <!-- success: item.payStatus == 1,-->
63 <!-- danger: item.payStatus == 2,-->
64 <!-- pending: item.payStatus == 0-->
65 <!-- }"-->
66 <!-- >-->
67 <!-- {{ getStatusText(item.payStatus) }}-->
68 <!-- </view> &ndash;&gt;-->
69 <!-- <view-->
70 <!-- :class="{-->
71 <!-- 'status-wait': item.auditStatus == 0,-->
72 <!-- 'status-pending': item.auditStatus == 1,-->
73 <!-- 'status-success': item.auditStatus == 2,-->
74 <!-- 'status-danger': item.auditStatus == 3-->
75 <!-- }"-->
76 <!-- class="status-tag ml-10"-->
77 <!-- >-->
78 <!-- {{ getAuditStatusText(item.auditStatus) }}-->
79 <!-- </view>-->
80 <!-- </view>-->
81 <!-- </view>-->
82 <!-- -->
83 <!-- &lt;!&ndash; 订单编号、缴费编号 &ndash;&gt;-->
84 <!-- <view class="info-row">-->
85 <!-- <text class="label">订单编号：</text>-->
86 <!-- <text class="value">{{ item.tradeNo || '——' }}</text>-->
87 <!-- </view>-->
88 <!-- <view v-if="item.orderName" class="info-row">-->
89 <!-- <text class="label">缴费名称：</text>-->
90 <!-- <text class="value">{{ item.orderName || '' }}</text>-->
91 <!-- </view>-->
92 <!-- &lt;!&ndash; <view class="info-row">-->
93 <!-- <text class="label">缴费编号：</text>-->
94 <!-- -->
95 <!-- </view> &ndash;&gt;-->
96 <!-- -->
97 <!-- &lt;!&ndash; 核心：前2tab仅展示缴费年限，后2tab仅展示人数合计 &ndash;&gt;-->
98 <!-- <view v-if="item.content" class="info-section flex f-j-s">-->
99 <!-- &lt;!&ndash; 个人/单位会员（仅缴费年限） &ndash;&gt;-->
100 <!-- <view v-if="currentTab === '0' || currentTab === '1'" class="single-info">-->
101 <!-- <view class="label">缴费年限：</view>-->
102 <!-- <view class="value">{{ item.content.yearCount || 0 }}</view>-->
103 <!-- </view>-->
104 <!-- &lt;!&ndash; 级位/段位考试（仅人数合计） &ndash;&gt;-->
105 <!-- <view v-if="currentTab === '2' || currentTab === '3' || currentTab === '4'" class="single-info">-->
106 <!-- <view class="label">人数合计</view>-->
107 <!-- <view class="value">{{ item.content.personCount || 0 }}</view>-->
108 <!-- </view>-->
109 <!-- <view class="line"></view>-->
110 <!-- <view class="single-info">-->
111 <!-- <view class="label">订单状态</view>-->
112 <!-- <view :class="item.effect == 1 ? 'text-success' : 'text-warning'" class="value">-->
113 <!-- {{ item.effect == 1 ? '已生效' : '未生效' }}-->
114 <!-- </view>-->
115 <!-- </view>-->
116 <!-- <view class="line"></view>-->
117 <!-- <view class="single-info">-->
118 <!-- <view class="label">缴费状态</view>-->
119 <!-- <view-->
120 <!-- :class="{-->
121 <!-- 'text-primary': item.payStatus == 0,-->
122 <!-- 'text-success': item.payStatus == 1,-->
123 <!-- 'text-danger': item.payStatus == 2-->
124 <!-- }"-->
125 <!-- class="value"-->
126 <!-- >-->
127 <!-- {{ item.payStatus == 0 ? '待缴费' : item.payStatus == 1 ? '缴费成功' : '订单取消' }}-->
128 <!-- </view>-->
129 <!-- </view>-->
130 <!-- </view>-->
131 <!-- -->
132 <!-- &lt;!&ndash; 费用合计 + 缴费方式 &ndash;&gt;-->
133 <!-- <view class="price-section">-->
134 <!-- <view class="price-row">-->
135 <!-- <text class="price-label">费用合计</text>-->
136 <!-- <text class="price-value">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>-->
137 <!-- </view>-->
138 <!-- <view class="price-row">-->
139 <!-- <text class="price-label">缴费方式</text>-->
140 <!-- <text class="price-value">{{ item.ziZhangBu ? '对公转账' : '民生付' }}</text>-->
141 <!-- </view>-->
142 <!-- </view>-->
143 <!-- -->
144 <!-- &lt;!&ndash; 按钮组：靠右紧凑展示 &ndash;&gt;-->
145 <!-- <view class="btn-group">-->
146 <!-- &lt;!&ndash; 已缴费：申请开票/已开票（需要审核通过才能开票） &ndash;&gt;-->
147 <!-- <template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">-->
148 <!-- <button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice" @click="makeInvoiceFN(item)">-->
149 <!-- 开票-->
150 <!-- </button>-->
151 <!-- </template>-->
152 <!-- &lt;!&ndash; 已开票：查看发票 &ndash;&gt;-->
153 <!-- <template v-if="item.invoiceStatus == 1">-->
154 <!-- <button class="btn btn-invoice" @click.stop="viewInvoice(item)">查看发票</button>-->
155 <!-- </template>-->
156 <!-- &lt;!&ndash; 未缴费：去缴费 + 取消订单 &ndash;&gt;-->
157 <!-- &lt;!&ndash; <template v-if="item.payStatus == 0">-->
158 <!-- <button class="btn btn-cancel" @click="handleCancel(item)">取消订单</button>-->
159 <!-- <button class="btn btn-pay" @click="handlePay(item)">去缴费</button>-->
160 <!-- </template> &ndash;&gt;-->
161 <!-- </view>-->
162 <!-- </view>-->
163 <!-- </view>-->
164
165 <!-- 有数据才循环 -->
27 <view v-if="list.length > 0"> 166 <view v-if="list.length > 0">
28 <view 167 <view
29 v-for="(item, index) in list" 168 v-for="(item, index) in list"
30 :key="index" 169 :key="index"
31 class="order-card" 170 class="order-card-new"
32 @click="goToDetail(item)" 171 @click="goToDetail(item)"
33 > 172 >
34 <!-- 订单头部：日期 + 状态 --> 173 <!-- 订单头部：日期 + 状态 -->
35 <view class="card-header"> 174 <view class="card-header">
36 <view class="date"> 175 <view class="date">
37 <!-- <image :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" style="width:30rpx;height:30rpx;"/> --> 176 <view class="data-header">
38 <!-- --> 177 <text class="member-label">{{ tabs[currentTab].label }}·</text>
39 <text class="value text-primary">{{ item.wfCode || '——' }}</text> 178 <text class="value ">{{ item.orderName || '——' }}</text>
40 </view> 179 </view>
41 <view class="status-tags"> 180 <text :class="{
42 <!-- <view
43 class="status-tag"
44 :class="{
45 success: item.payStatus == 1,
46 danger: item.payStatus == 2,
47 pending: item.payStatus == 0
48 }"
49 >
50 {{ getStatusText(item.payStatus) }}
51 </view> -->
52 <view
53 :class="{
54 'status-wait': item.auditStatus == 0, 181 'status-wait': item.auditStatus == 0,
55 'status-pending': item.auditStatus == 1, 182 'status-pending': item.auditStatus == 1,
56 'status-success': item.auditStatus == 2, 183 'status-success': item.auditStatus == 2,
57 'status-danger': item.auditStatus == 3 184 'status-danger': item.auditStatus == 3
58 }" 185 }"
59 class="status-tag ml-10" 186 class="status-tag ">{{ getAuditStatusText(item.auditStatus) }}
60 > 187 </text>
61 {{ getAuditStatusText(item.auditStatus) }}
62 </view> 188 </view>
63 </view> 189 </view>
190 <view class="card-header">
191 <view class="date">
192 <view class="data-header">
193 <text class="value">
194 <text class="tradeNo">订单编号：</text>
195 {{ item.tradeNo || '——' }}
196 </text>
197 </view>
198 </view>
199 </view>
200 <view class="card-header">
201 <view class="date">
202 <view class="data-header">
203 <text class="value">
204 <text class="tradeNo">缴费编号：</text>
205 {{ item.wfCode || '——' }}
206 </text>
207 </view>
208 </view>
209 </view>
210 <view class="member-time">
211 <view class="label">
212 <text class="star">★</text>
213 {{ `${filterTime(item.genTime)}${filterType(item.type)}` }}
214 </view>
215 <view class="price">
216 <view>￥{{ item.price || '0.00' }}</view>
217 <view v-if="item.type==0" class="person">共{{ item.content?.allPersonCount || 0 }}人</view>
218 <view v-if="item.type==1" class="person">共{{ item.content?.yearCount || 0 }}年</view>
219 <view v-if="item.type==2||item.type==3||item.type==4" class="person">共{{
220 item.content?.personCount || 0
221 }}人
64 </view> 222 </view>
65
66 <!-- 订单编号、缴费编号 -->
67 <view class="info-row">
68 <text class="label">订单编号：</text>
69 <text class="value">{{ item.tradeNo || '——' }}</text>
70 </view> 223 </view>
71 <view v-if="item.orderName" class="info-row">
72 <text class="label">缴费名称：</text>
73 <text class="value">{{ item.orderName || '' }}</text>
74 </view> 224 </view>
75 <!-- <view class="info-row">
76 <text class="label">缴费编号：</text>
77
78 </view> -->
79 225
80 <!-- 核心：前2tab仅展示缴费年限，后2tab仅展示人数合计 --> 226 <!-- 核心：前2tab仅展示缴费年限，后2tab仅展示人数合计 -->
81 <view v-if="item.content" class="info-section flex f-j-s"> 227 <view v-if="item.content" class="info-section flex f-j-s">
...@@ -112,23 +258,20 @@ ...@@ -112,23 +258,20 @@
112 </view> 258 </view>
113 </view> 259 </view>
114 260
115 <!-- 费用合计 + 缴费方式 -->
116 <view class="price-section">
117 <view class="price-row">
118 <text class="price-label">费用合计</text>
119 <text class="price-value">¥{{ (Number(item.price) || 0).toFixed(2) }}</text>
120 </view>
121 <view class="price-row">
122 <text class="price-label">缴费方式</text>
123 <text class="price-value">{{ item.ziZhangBu ? '对公转账' : '民生付' }}</text>
124 </view>
125 </view>
126
127 <!-- 按钮组：靠右紧凑展示 --> 261 <!-- 按钮组：靠右紧凑展示 -->
128 <view class="btn-group"> 262 <view class="btn-group">
263 <view>
264 <text class="more" @click="goToDetail(item)">更多</text>
265 </view>
266 <view class="btn-flex">
267 <!-- 已缴费：申请开票/已开票（需要审核通过才能开票） -->
268 <template>
269 <button class="btn btn-info" @click="goToDetail(item)">查看明细</button>
270 </template>
129 <!-- 已缴费：申请开票/已开票（需要审核通过才能开票） --> 271 <!-- 已缴费：申请开票/已开票（需要审核通过才能开票） -->
130 <template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0"> 272 <template v-if="item.payStatus == 1 && item.invoiceStatus != 1&& item.auditStatus == 2 &&item.price>0">
131 <button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice" @click="makeInvoiceFN(item)"> 273 <button :disabled="item.invoiceStatus === 1" class="btn btn-view-invoice"
274 @click="makeInvoiceFN(item)">
132 开票 275 开票
133 </button> 276 </button>
134 </template> 277 </template>
...@@ -142,6 +285,8 @@ ...@@ -142,6 +285,8 @@
142 <button class="btn btn-pay" @click="handlePay(item)">去缴费</button> 285 <button class="btn btn-pay" @click="handlePay(item)">去缴费</button>
143 </template> --> 286 </template> -->
144 </view> 287 </view>
288
289 </view>
145 </view> 290 </view>
146 </view> 291 </view>
147 292
...@@ -233,6 +378,7 @@ import { ...@@ -233,6 +378,7 @@ import {
233 } from '@dcloudio/uni-app' 378 } from '@dcloudio/uni-app'
234 import * as api from '@/common/api.js' 379 import * as api from '@/common/api.js'
235 import config from '@/config.js' 380 import config from '@/config.js'
381 import dayjs from 'dayjs'
236 // 获取deptType值（初始值为0，在onMounted中设置实际值） 382 // 获取deptType值（初始值为0，在onMounted中设置实际值）
237 const deptType = ref(0); 383 const deptType = ref(0);
238 384
...@@ -245,29 +391,29 @@ const tabs = computed(() => { ...@@ -245,29 +391,29 @@ const tabs = computed(() => {
245 if (dt === 6) { 391 if (dt === 6) {
246 console.log('返回3个tab: 个人会员、单位会员、级位考试'); 392 console.log('返回3个tab: 个人会员、单位会员、级位考试');
247 return [ 393 return [
248 {name: '个人会员', type: '0'}, 394 {name: '个人会员', type: '0', label: "会员"},
249 {name: '单位会员', type: '1'}, 395 {name: '单位会员', type: '1', label: "单位"},
250 {name: '级位考试', type: '2'} 396 {name: '级位考试', type: '2', label: "级位"}
251 ]; 397 ];
252 } else if (dt === 2) { 398 } else if (dt === 2) {
253 console.log('返回3个tab: 单位会员、段位考试、越段考试'); 399 console.log('返回3个tab: 单位会员、段位考试、越段考试');
254 return [ 400 return [
255 // {name: '单位会员', type: '1'}, 401 // {name: '单位会员', type: '1'},
256 {name: '段位考试', type: '3'}, 402 {name: '段位考试', type: '3', label: "段位"},
257 {name: '越段考试', type: '4'} 403 {name: '越段考试', type: '4', label: "越段"}
258 ]; 404 ];
259 } else if (dt === 1) { 405 } else if (dt === 1) {
260 console.log('返回默认5个tab, dt值为:', dt); 406 console.log('返回默认5个tab, dt值为:', dt);
261 return [ 407 return [
262 {name: '个人会员', type: '0'}, 408 {name: '个人会员', type: '0', label: "会员"},
263 {name: '单位会员', type: '1'}, 409 {name: '单位会员', type: '1', label: "单位"},
264 {name: '级位考试', type: '2'}, 410 {name: '级位考试', type: '2', label: "级位"},
265 {name: '段位考试', type: '3'}, 411 {name: '段位考试', type: '3', label: "段位"},
266 {name: '越段考试', type: '4'} 412 {name: '越段考试', type: '4', label: "越段"}
267 ]; 413 ];
268 } else { 414 } else {
269 return [ 415 return [
270 {name: '单位会员', type: '1'}, 416 {name: '单位会员', type: '1', label: "单位"},
271 ]; 417 ];
272 } 418 }
273 }); 419 });
...@@ -309,8 +455,10 @@ onLoad((option) => { ...@@ -309,8 +455,10 @@ onLoad((option) => {
309 const app = getApp(); 455 const app = getApp();
310 deptType.value = Number(app.globalData?.deptType || 0); 456 deptType.value = Number(app.globalData?.deptType || 0);
311 const firstType = tabs.value[0]?.type ?? '0'; 457 const firstType = tabs.value[0]?.type ?? '0';
312 currentTab.value = option.type || firstType; 458 // currentTab.value = option.type || firstType;
313 queryParams.type = option.type || firstType; 459 // queryParams.type = option.type || firstType;
460 currentTab.value = firstType;
461 queryParams.type = firstType;
314 initData(); 462 initData();
315 }); 463 });
316 464
...@@ -368,6 +516,20 @@ const getAuditStatusText = (status) => { ...@@ -368,6 +516,20 @@ const getAuditStatusText = (status) => {
368 return map[status] || ''; 516 return map[status] || '';
369 }; 517 };
370 518
519 const filterTime = (row) => {
520 if (!row) return ''
521 return dayjs(row).format('YYYY年MM月DD日')
522 }
523
524 const filterType = (row) => {
525 if (row == 0) return '个人会员缴费办理'
526 if (row == 1) return '单位会员缴费办理'
527 if (row == 2) return '级位考试办理'
528 if (row == 3) return '段位考试办理'
529 if (row == 4) return '越位考试办理'
530 }
531
532
371 // 数据请求核心方法 533 // 数据请求核心方法
372 const initData = async () => { 534 const initData = async () => {
373 loading.value = true; 535 loading.value = true;
...@@ -409,6 +571,12 @@ const initData = async () => { ...@@ -409,6 +571,12 @@ const initData = async () => {
409 } 571 }
410 }; 572 };
411 573
574 const handelSearch = () => {
575 pageNum.value = 1
576 list.value = []
577 initData()
578 }
579
412 // 删除订单 580 // 删除订单
413 const handleDelete = (item) => { 581 const handleDelete = (item) => {
414 currentOrder.value = item; 582 currentOrder.value = item;
...@@ -425,7 +593,7 @@ const confirmDel = async () => { ...@@ -425,7 +593,7 @@ const confirmDel = async () => {
425 uni.showToast({title: '删除成功', icon: 'success'}); 593 uni.showToast({title: '删除成功', icon: 'success'});
426 pageNum.value = 1; 594 pageNum.value = 1;
427 list.value = []; 595 list.value = [];
428 initData(); 596 await initData();
429 closeDelPopup(); 597 closeDelPopup();
430 } catch (e) { 598 } catch (e) {
431 uni.showToast({title: '删除失败', icon: 'error'}); 599 uni.showToast({title: '删除失败', icon: 'error'});
...@@ -521,7 +689,7 @@ const confirmCancel = async () => { ...@@ -521,7 +689,7 @@ const confirmCancel = async () => {
521 uni.showToast({title: '取消成功', icon: 'success'}); 689 uni.showToast({title: '取消成功', icon: 'success'});
522 pageNum.value = 1; 690 pageNum.value = 1;
523 list.value = []; 691 list.value = [];
524 initData(); 692 await initData();
525 closeCancelPopup(); 693 closeCancelPopup();
526 } catch (e) { 694 } catch (e) {
527 uni.showToast({title: '取消失败', icon: 'error'}); 695 uni.showToast({title: '取消失败', icon: 'error'});
...@@ -549,24 +717,67 @@ const closeCancelPopup = () => { ...@@ -549,24 +717,67 @@ const closeCancelPopup = () => {
549 } 717 }
550 } 718 }
551 719
720 /* 搜索栏 */
721 .search-bar {
722 display: flex;
723 align-items: center;
724 padding: 20rpx 30rpx;
725 background-color: #ffffff;
726 margin-bottom: 0;
727
728 .search-input {
729 flex: 1;
730 margin-right: 20rpx;
731
732 :deep(.uni-easyinput__content) {
733 border-radius: 40rpx;
734 background-color: #f5f7fa;
735 height: 76rpx;
736 padding: 0 24rpx;
737 }
738
739 :deep(.uni-easyinput__content-input) {
740 font-size: 28rpx;
741 color: #333;
742 }
743 }
744
745 .add-btn {
746 display: flex;
747 align-items: center;
748 padding: 10rpx 30rpx;
749 background-color: #AD181F;
750 border-radius: 40rpx;
751 font-size: 28rpx;
752 color: #ffffff;
753 }
754
755 .add-icon {
756 font-size: 36rpx;
757 margin-right: 10rpx;
758 font-weight: bold;
759 }
760 }
761
552 // 标签栏样式 762 // 标签栏样式
553 .tab-bar { 763 .tab-bar {
554 display: flex; 764 display: flex;
555 background: #fff; 765 //background: #fff;
556 border-bottom: 1rpx solid #eee; 766 //border-bottom: 1rpx solid #eee;
557 flex-shrink: 0; 767 flex-shrink: 0;
558 768
559 .tab-item { 769 .tab-item {
560 flex: 1; 770 flex: 1;
561 text-align: center; 771 text-align: center;
562 padding: 24rpx 0; 772 padding: 24rpx 0;
563 font-size: 28rpx; 773 font-size: 30rpx;
564 color: #666; 774 color: #666;
565 position: relative; 775 position: relative;
776 font-weight: bold;
566 777
567 &.active { 778 &.active {
568 color: #e4393c; 779 color: #c30d23;
569 font-weight: 500; 780 font-weight: bold;
570 781
571 &::after { 782 &::after {
572 content: ''; 783 content: '';
...@@ -575,8 +786,9 @@ const closeCancelPopup = () => { ...@@ -575,8 +786,9 @@ const closeCancelPopup = () => {
575 left: 50%; 786 left: 50%;
576 transform: translateX(-50%); 787 transform: translateX(-50%);
577 width: 60rpx; 788 width: 60rpx;
578 height: 4rpx; 789 height: 6rpx;
579 background: linear-gradient(90deg, #FF755A, #F51722); 790 //background: linear-gradient(90deg, #FF755A, #F51722);
791 background: #c30d23;
580 border-radius: 2rpx; 792 border-radius: 2rpx;
581 } 793 }
582 } 794 }
...@@ -614,7 +826,7 @@ const closeCancelPopup = () => { ...@@ -614,7 +826,7 @@ const closeCancelPopup = () => {
614 display: flex; 826 display: flex;
615 justify-content: space-between; 827 justify-content: space-between;
616 align-items: center; 828 align-items: center;
617 padding-bottom: 20rpx; 829 padding-bottom: 10rpx;
618 // margin-bottom: 20rpx; 830 // margin-bottom: 20rpx;
619 // border-bottom: 1rpx dashed #eee; 831 // border-bottom: 1rpx dashed #eee;
620 832
...@@ -636,21 +848,21 @@ const closeCancelPopup = () => { ...@@ -636,21 +848,21 @@ const closeCancelPopup = () => {
636 848
637 .status-tag { 849 .status-tag {
638 font-size: 22rpx; 850 font-size: 22rpx;
639 padding: 6rpx 16rpx; 851 //padding: 6rpx 16rpx;
640 border-radius: 20rpx; 852 //border-radius: 20rpx;
641 853
642 &.success { 854 &.success {
643 background: #e6f7ef; 855 //background: #e6f7ef;
644 color: #52c41a; 856 color: #52c41a;
645 } 857 }
646 858
647 &.danger { 859 &.danger {
648 background: #fff1f0; 860 //background: #fff1f0;
649 color: #ff4d4f; 861 color: #ff4d4f;
650 } 862 }
651 863
652 &.pending { 864 &.pending {
653 background: #f5f5f5; 865 //background: #f5f5f5;
654 color: #999; 866 color: #999;
655 } 867 }
656 868
...@@ -659,27 +871,27 @@ const closeCancelPopup = () => { ...@@ -659,27 +871,27 @@ const closeCancelPopup = () => {
659 } 871 }
660 872
661 &.status-wait { 873 &.status-wait {
662 background: #f0f5ff; 874 //background: #f0f5ff;
663 color: #597ef7; 875 color: #597ef7;
664 border: 1rpx solid rgba(89, 126, 247, 0.3); 876 //border: 1rpx solid rgba(89, 126, 247, 0.3);
665 } 877 }
666 878
667 &.status-pending { 879 &.status-pending {
668 background: #fff7e6; 880 //background: #fff7e6;
669 color: #faad14; 881 color: #faad14;
670 border: 1rpx solid rgba(250, 173, 20, 0.3); 882 //border: 1rpx solid rgba(250, 173, 20, 0.3);
671 } 883 }
672 884
673 &.status-success { 885 &.status-success {
674 background: #e6f7ef; 886 //background: #e6f7ef;
675 color: #52c41a; 887 color: #52c41a;
676 border: 1rpx solid rgba(82, 196, 26, 0.3); 888 //border: 1rpx solid rgba(82, 196, 26, 0.3);
677 } 889 }
678 890
679 &.status-danger { 891 &.status-danger {
680 background: #fff1f0; 892 //background: #fff1f0;
681 color: #ff4d4f; 893 color: #ff4d4f;
682 border: 1rpx solid rgba(232, 52, 29, 0.3); 894 //border: 1rpx solid rgba(232, 52, 29, 0.3);
683 } 895 }
684 } 896 }
685 } 897 }
...@@ -708,9 +920,10 @@ const closeCancelPopup = () => { ...@@ -708,9 +920,10 @@ const closeCancelPopup = () => {
708 display: flex; 920 display: flex;
709 align-items: center; 921 align-items: center;
710 justify-content: space-between; 922 justify-content: space-between;
711 margin: 20rpx 0; 923 //margin: 20rpx 0;
712 padding: 0 20rpx; 924 padding: 0 20rpx;
713 min-height: 100rpx; 925 min-height: 100rpx;
926 border-radius: 20rpx;
714 } 927 }
715 928
716 .line { 929 .line {
...@@ -726,6 +939,7 @@ const closeCancelPopup = () => { ...@@ -726,6 +939,7 @@ const closeCancelPopup = () => {
726 border-radius: 8rpx; 939 border-radius: 8rpx;
727 font-size: 26rpx; 940 font-size: 26rpx;
728 text-align: center; 941 text-align: center;
942
729 .label { 943 .label {
730 color: #999; 944 color: #999;
731 text-align: center; 945 text-align: center;
...@@ -790,21 +1004,32 @@ const closeCancelPopup = () => { ...@@ -790,21 +1004,32 @@ const closeCancelPopup = () => {
790 // 按钮组 1004 // 按钮组
791 .btn-group { 1005 .btn-group {
792 display: flex; 1006 display: flex;
793 justify-content: flex-end; 1007 justify-content: space-between;
794 align-items: center; 1008 align-items: center;
795 gap: 16rpx; 1009 gap: 16rpx;
796 width: 100%; 1010 width: 100%;
797 margin-top: 20rpx; 1011 margin-top: 20rpx;
798 1012
1013 .more {
1014 color: #666;
1015 }
1016
1017 .btn-flex {
1018 display: flex;
1019 justify-content: flex-end;
1020 gap: 16rpx;
1021 }
1022
799 .btn { 1023 .btn {
800 // 固定宽度，所有按钮一样大 1024 // 固定宽度，所有按钮一样大
801 width: 160rpx; 1025 width: 160rpx;
802 height: 70rpx; 1026 height: 50rpx;
803 line-height: 70rpx; 1027 line-height: 50rpx;
804 padding: 0; 1028 padding: 0;
805 border-radius: 40rpx; 1029 border-radius: 20rpx;
806 font-size: 24rpx; 1030 font-size: 28rpx;
807 white-space: nowrap; 1031 white-space: nowrap;
1032 font-weight: bold;
808 border: none; 1033 border: none;
809 background: transparent; 1034 background: transparent;
810 text-align: center; 1035 text-align: center;
...@@ -817,20 +1042,27 @@ const closeCancelPopup = () => { ...@@ -817,20 +1042,27 @@ const closeCancelPopup = () => {
817 1042
818 &.btn-delete { 1043 &.btn-delete {
819 background: #fff; 1044 background: #fff;
820 color: #e4393c; 1045 //color: #e4393c;
821 border: 1rpx solid #e4393c; 1046 color: #c30d23;
1047 border: 1rpx solid #c30d23;
822 } 1048 }
823 1049
824 &.btn-invoice { 1050 &.btn-invoice {
825 background: #fff; 1051 background: #fff;
826 color: #e4393c; 1052 color: #c30d23;
827 border: 1rpx solid #e4393c; 1053 border: 1rpx solid #c30d23;
828 } 1054 }
829 1055
830 &.btn-view-invoice { 1056 &.btn-view-invoice {
831 background: linear-gradient(90deg, #FF755A, #F51722); 1057 //background: linear-gradient(90deg, #FF755A, #F51722);
832 color: #fff; 1058 color: #c30d23;
833 border: none; 1059 //border: none;
1060 border: 1rpx solid #c30d23;
1061 }
1062
1063 &.btn-info {
1064 color: #444;
1065 border: 1rpx solid #666;
834 } 1066 }
835 1067
836 &.btn-cancel { 1068 &.btn-cancel {
...@@ -840,9 +1072,10 @@ const closeCancelPopup = () => { ...@@ -840,9 +1072,10 @@ const closeCancelPopup = () => {
840 } 1072 }
841 1073
842 &.btn-pay { 1074 &.btn-pay {
843 background: linear-gradient(90deg, #FF755A, #F51722); 1075 //background: linear-gradient(90deg, #FF755A, #F51722);
844 color: #fff; 1076 color: #c30d23;
845 border: none; 1077 //border: none;
1078 border: 1rpx solid #c30d23;
846 } 1079 }
847 1080
848 &:disabled { 1081 &:disabled {
...@@ -1040,4 +1273,143 @@ const closeCancelPopup = () => { ...@@ -1040,4 +1273,143 @@ const closeCancelPopup = () => {
1040 } 1273 }
1041 } 1274 }
1042 } 1275 }
1276
1277 .order-card-new {
1278 background: #fff;
1279 margin-bottom: 20rpx;
1280 padding: 20rpx;
1281 box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
1282 border-radius: 12rpx;
1283 display: flex;
1284 flex-direction: column;
1285
1286
1287 // 卡片头部
1288 .card-header {
1289 display: flex;
1290 justify-content: space-between;
1291 align-items: center;
1292 padding-bottom: 10rpx;
1293 // margin-bottom: 20rpx;
1294 // border-bottom: 1rpx dashed #eee;
1295
1296 .date {
1297 width: 100%;
1298 display: flex;
1299 align-items: center;
1300 justify-content: space-between;
1301 gap: 8rpx;
1302 font-size: 26rpx;
1303
1304 .data-header {
1305 display: flex;
1306 }
1307
1308 .member-label {
1309 color: #c30d23;
1310 font-size: 28rpx;
1311 font-weight: bold;
1312 }
1313
1314 .value {
1315 color: #000;
1316 font-size: 28rpx;
1317 font-weight: bold;
1318
1319 .tradeNo {
1320 color: #999;
1321 font-size: 26rpx;
1322 }
1323 }
1324
1325 .date-text {
1326 color: #666;
1327 }
1328 }
1329
1330
1331 .status-tags {
1332 display: flex;
1333 gap: 10rpx;
1334 }
1335
1336 .status-tag {
1337 font-size: 26rpx;
1338 //padding: 6rpx 16rpx;
1339 //border-radius: 20rpx;
1340
1341 &.success {
1342 //background: #e6f7ef;
1343 color: #52c41a;
1344 }
1345
1346 &.danger {
1347 //background: #fff1f0;
1348 color: #ff4d4f;
1349 }
1350
1351 &.pending {
1352 //background: #f5f5f5;
1353 color: #999;
1354 }
1355
1356 &.ml-10 {
1357 margin-left: 10rpx;
1358 }
1359
1360 &.status-wait {
1361 //background: #f0f5ff;
1362 color: #597ef7;
1363 //border: 1rpx solid rgba(89, 126, 247, 0.3);
1364 }
1365
1366 &.status-pending {
1367 //background: #fff7e6;
1368 color: #faad14;
1369 //border: 1rpx solid rgba(250, 173, 20, 0.3);
1370 }
1371
1372 &.status-success {
1373 //background: #e6f7ef;
1374 color: #52c41a;
1375 //border: 1rpx solid rgba(82, 196, 26, 0.3);
1376 }
1377
1378 &.status-danger {
1379 //background: #fff1f0;
1380 color: #ff4d4f;
1381 //border: 1rpx solid rgba(232, 52, 29, 0.3);
1382 }
1383 }
1384 }
1385
1386 .member-time {
1387 width: 100%;
1388 display: flex;
1389 justify-content: space-between;
1390 padding-bottom: 10rpx;
1391
1392 .label {
1393 font-size: 26rpx;
1394 color: #999;
1395
1396 .star {
1397 color: #000;
1398 font-size: 28rpx;
1399 }
1400 }
1401
1402 .price {
1403 font-size: 30rpx;
1404 color: #000;
1405 font-weight: bold;
1406
1407 .person {
1408 font-size: 24rpx;
1409 color: #999;
1410 text-align: right;
1411 }
1412 }
1413 }
1414 }
1043 </style> 1415 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!