样式优化
Showing
4 changed files
with
31 additions
and
20 deletions
| ... | @@ -52,10 +52,10 @@ | ... | @@ -52,10 +52,10 @@ |
| 52 | <text class="label">结算金额</text> | 52 | <text class="label">结算金额</text> |
| 53 | <text class="value red">¥{{ item.price }}</text> | 53 | <text class="value red">¥{{ item.price }}</text> |
| 54 | </view> | 54 | </view> |
| 55 | <view class="info-row"> | 55 | <!-- <view class="info-row"> |
| 56 | <text class="label">结算状态</text> | 56 | <text class="label">结算状态</text> |
| 57 | <text :class="['value', item.status == '2' ? 'green' : item.status == '3' ? 'red' : '']">{{ item.verityStatusStr }}</text> | 57 | <text :class="['value', item.status == '2' ? 'green' : item.status == '3' ? 'red' : '']">{{ item.verityStatusStr }}</text> |
| 58 | </view> | 58 | </view> --> |
| 59 | </view> | 59 | </view> |
| 60 | 60 | ||
| 61 | <!-- 底部信息 --> | 61 | <!-- 底部信息 --> |
| ... | @@ -65,8 +65,8 @@ | ... | @@ -65,8 +65,8 @@ |
| 65 | <text v-if="item.auditTime" class="date">审核: {{ formatDate(item.auditTime) }}</text> | 65 | <text v-if="item.auditTime" class="date">审核: {{ formatDate(item.auditTime) }}</text> |
| 66 | </view> | 66 | </view> |
| 67 | <view class="footer-right"> | 67 | <view class="footer-right"> |
| 68 | <text v-if="item.fileUrl" class="invoice-btn" @click="downloadInvoice(item)">发票</text> | 68 | <!-- <text v-if="item.fileUrl" class="invoice-btn" @click="downloadInvoice(item)">发票</text> |
| 69 | <view v-else class="invoice-btn disabled">发票</view> | 69 | <view v-else class="invoice-btn disabled">发票</view> --> |
| 70 | <button | 70 | <button |
| 71 | v-if="item.status == '1'" | 71 | v-if="item.status == '1'" |
| 72 | class="btn-settle" | 72 | class="btn-settle" | ... | ... |
| ... | @@ -92,7 +92,7 @@ | ... | @@ -92,7 +92,7 @@ |
| 92 | </view> | 92 | </view> |
| 93 | <view class="info-line"> | 93 | <view class="info-line"> |
| 94 | <text class="info-label">支付方式</text> | 94 | <text class="info-label">支付方式</text> |
| 95 | <text class="info-value">民生付</text> | 95 | <text class="info-value">{{ pay.ziZhangBu ? '对公转账' : '民生付' }}</text> |
| 96 | </view> | 96 | </view> |
| 97 | <view class="info-line"> | 97 | <view class="info-line"> |
| 98 | <text class="info-label">审核状态</text> | 98 | <text class="info-label">审核状态</text> | ... | ... |
| ... | @@ -161,7 +161,7 @@ const handleSubmit = async () => { | ... | @@ -161,7 +161,7 @@ const handleSubmit = async () => { |
| 161 | .invoice-apply { | 161 | .invoice-apply { |
| 162 | min-height: 100vh; | 162 | min-height: 100vh; |
| 163 | background: #f5f7fa; | 163 | background: #f5f7fa; |
| 164 | padding-bottom: 140rpx; | 164 | // padding-bottom: 140rpx; |
| 165 | } | 165 | } |
| 166 | 166 | ||
| 167 | .content { | 167 | .content { |
| ... | @@ -256,18 +256,18 @@ const handleSubmit = async () => { | ... | @@ -256,18 +256,18 @@ const handleSubmit = async () => { |
| 256 | padding: 20rpx; | 256 | padding: 20rpx; |
| 257 | border: 2rpx solid #e4e7ed; | 257 | border: 2rpx solid #e4e7ed; |
| 258 | border-radius: 12rpx; | 258 | border-radius: 12rpx; |
| 259 | background: #fafafa; | 259 | background: #faf4f4; |
| 260 | transition: all 0.3s; | 260 | transition: all 0.3s; |
| 261 | 261 | ||
| 262 | &.active { | 262 | &.active { |
| 263 | border-color: #409eff; | 263 | border-color: #AD181F; |
| 264 | background: #f0f6ff; | 264 | background: #faf4f4; |
| 265 | } | 265 | } |
| 266 | 266 | ||
| 267 | .type-icon { | 267 | .type-icon { |
| 268 | width: 60rpx; | 268 | width: 60rpx; |
| 269 | height: 60rpx; | 269 | height: 60rpx; |
| 270 | background: #f5f7ff; | 270 | background: #fbd9d9; |
| 271 | border-radius: 8rpx; | 271 | border-radius: 8rpx; |
| 272 | display: flex; | 272 | display: flex; |
| 273 | align-items: center; | 273 | align-items: center; |
| ... | @@ -277,27 +277,27 @@ const handleSubmit = async () => { | ... | @@ -277,27 +277,27 @@ const handleSubmit = async () => { |
| 277 | .icon-text { | 277 | .icon-text { |
| 278 | font-size: 28rpx; | 278 | font-size: 28rpx; |
| 279 | font-weight: 600; | 279 | font-weight: 600; |
| 280 | color: #409eff; | 280 | color: #AD181F; |
| 281 | } | 281 | } |
| 282 | 282 | ||
| 283 | &.enterprise { | 283 | &.enterprise { |
| 284 | background: #f0f6ff; | 284 | background: #fbd9d9; |
| 285 | 285 | ||
| 286 | .icon-text { | 286 | .icon-text { |
| 287 | color: #1561CB; | 287 | color: #AD181F; |
| 288 | } | 288 | } |
| 289 | } | 289 | } |
| 290 | } | 290 | } |
| 291 | 291 | ||
| 292 | &.active .type-icon { | 292 | &.active .type-icon { |
| 293 | background: #409eff; | 293 | background: #AD181F; |
| 294 | 294 | ||
| 295 | .icon-text { | 295 | .icon-text { |
| 296 | color: #fff; | 296 | color: #fff; |
| 297 | } | 297 | } |
| 298 | 298 | ||
| 299 | &.enterprise { | 299 | &.enterprise { |
| 300 | background: #1561CB; | 300 | background: #AD181F; |
| 301 | } | 301 | } |
| 302 | } | 302 | } |
| 303 | 303 | ... | ... |
| ... | @@ -56,12 +56,16 @@ | ... | @@ -56,12 +56,16 @@ |
| 56 | <!-- 缴费编号 --> | 56 | <!-- 缴费编号 --> |
| 57 | <view class="info-row payment-code-row" v-if="item.payTime"> | 57 | <view class="info-row payment-code-row" v-if="item.payTime"> |
| 58 | <text class="label">缴费时间</text> | 58 | <text class="label">缴费时间</text> |
| 59 | <text class="value order-no">{{ item.payTime || '' }}</text> | 59 | <text class="value order-no">{{ item.payTime.slice(0,10) || '' }}</text> |
| 60 | <!-- <view class="payment-code" > | 60 | <!-- <view class="payment-code" > |
| 61 | <text class="code-text">{{ item.payTime || '——' }}</text> | 61 | <text class="code-text">{{ item.payTime || '——' }}</text> |
| 62 | </view> --> | 62 | </view> --> |
| 63 | </view> | 63 | </view> |
| 64 | 64 | ||
| 65 | <view class="info-row payment-code-row" > | ||
| 66 | <text class="label">开票状态</text> | ||
| 67 | <text class="value order-no">{{ item.invoiceStatus == 1 ? '已开票' : "未开票"}}</text> | ||
| 68 | </view> | ||
| 65 | <!-- 核心信息区:缴费年限/人数 + 缴费方式 --> | 69 | <!-- 核心信息区:缴费年限/人数 + 缴费方式 --> |
| 66 | <view class="info-section flex f-j-s"> | 70 | <view class="info-section flex f-j-s"> |
| 67 | <view v-if="currentTab === 0 || currentTab === 1" class="single-info"> | 71 | <view v-if="currentTab === 0 || currentTab === 1" class="single-info"> |
| ... | @@ -70,12 +74,13 @@ | ... | @@ -70,12 +74,13 @@ |
| 70 | </view> | 74 | </view> |
| 71 | <view v-if="currentTab === 2 || currentTab === 3 || currentTab === 4" class="single-info"> | 75 | <view v-if="currentTab === 2 || currentTab === 3 || currentTab === 4" class="single-info"> |
| 72 | <view class="label">人数合计</view> | 76 | <view class="label">人数合计</view> |
| 73 | <view class="value">{{ item.content?.allPersonCount || 0 }}人</view> | 77 | <view class="value">{{ item.content?.personCount || 0 }}人</view> |
| 74 | </view> | 78 | </view> |
| 75 | <view class="divider"></view> | 79 | <view class="divider"></view> |
| 76 | <view class="single-info"> | 80 | <view class="single-info"> |
| 77 | <view class="label">缴费方式</view> | 81 | <view class="label">缴费方式</view> |
| 78 | <view class="value">{{ item.ziZhangBu ? '对公转账' : (item.payWay || '民生付') }}</view> | 82 | <view class="value " style="color:blue" @click="getPayWay(item)" v-if="item.ziZhangBu">对公转账</view> |
| 83 | <view class="value" v-else>民生付</view> | ||
| 79 | </view> | 84 | </view> |
| 80 | <view class="divider"></view> | 85 | <view class="divider"></view> |
| 81 | <view class="single-info"> | 86 | <view class="single-info"> |
| ... | @@ -201,7 +206,11 @@ onReachBottom(() => { | ... | @@ -201,7 +206,11 @@ onReachBottom(() => { |
| 201 | initData(); | 206 | initData(); |
| 202 | } | 207 | } |
| 203 | }); | 208 | }); |
| 204 | 209 | const getPayWay = (item) => { | |
| 210 | uni.redirectTo({ | ||
| 211 | url: `/myCenter/transferPay?orderId=${item.id}` | ||
| 212 | }); | ||
| 213 | } | ||
| 205 | // 切换标签 | 214 | // 切换标签 |
| 206 | const switchTab = (index) => { | 215 | const switchTab = (index) => { |
| 207 | currentTab.value = index; | 216 | currentTab.value = index; |
| ... | @@ -379,7 +388,9 @@ const goToDetail = (item) => { | ... | @@ -379,7 +388,9 @@ const goToDetail = (item) => { |
| 379 | height: 100vh; | 388 | height: 100vh; |
| 380 | } | 389 | } |
| 381 | } | 390 | } |
| 382 | 391 | .link { | |
| 392 | color: #667fee; | ||
| 393 | } | ||
| 383 | // 标签栏样式 | 394 | // 标签栏样式 |
| 384 | .tab-bar { | 395 | .tab-bar { |
| 385 | display: flex; | 396 | display: flex; | ... | ... |
-
Please register or sign in to post a comment