[票务] 票务页面主题适配与样式优化
Council
parent
3fb7a3e70c
commit
75703a12f4
|
|
@ -175,9 +175,9 @@
|
|||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 12px;
|
||||
background-color: #fff5f5;
|
||||
background-color: rgba(241, 162, 158, 0.08);
|
||||
border-radius: 8px;
|
||||
border: 1rpx solid rgba(255, 64, 79, 0.15);
|
||||
border: 1rpx solid rgba(241, 162, 158, 0.15);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -202,8 +202,8 @@
|
|||
|
||||
.seat-badge {
|
||||
font-size: 12px;
|
||||
color: #ff404f;
|
||||
background: rgba(255, 64, 79, 0.1);
|
||||
color: #f1a29e;
|
||||
background: rgba(241, 162, 158, 0.1);
|
||||
padding: 2px 10px;
|
||||
border-radius: 4px;
|
||||
margin-right: 14px;
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
.total-price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
}
|
||||
|
||||
/* =========== 购票须知卡片 =========== */
|
||||
|
|
@ -327,8 +327,8 @@
|
|||
|
||||
.icon-warning {
|
||||
background-color: transparent;
|
||||
color: #ff404f;
|
||||
border: 1px solid #ff404f;
|
||||
color: #f1a29e;
|
||||
border: 1px solid #f1a29e;
|
||||
}
|
||||
|
||||
.service-text {
|
||||
|
|
@ -393,14 +393,14 @@
|
|||
|
||||
.currency {
|
||||
font-size: 14px;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -413,7 +413,7 @@
|
|||
margin: 0 16rpx 0 auto;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background: linear-gradient(90deg, #ff6b81, #ff404f);
|
||||
background: linear-gradient(90deg, var(--theme-color, #198309), var(--theme-color, #198309));
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="order-confirm-page">
|
||||
<view class="order-confirm-page" :class="theme_view" :style="{ '--theme-color': theme_color, '--theme-color-rgb': theme_color_rgb, '--theme-color-light': theme_color_light }">
|
||||
<!-- 顶部返回按钮 -->
|
||||
<view class="top-nav-left-icon pf" style="top: 44px;">
|
||||
<view class="icon back-icon round cp" @click="goBack">‹</view>
|
||||
|
|
@ -291,6 +291,8 @@ export default {
|
|||
// 主题
|
||||
theme_view: '',
|
||||
theme_color: '',
|
||||
theme_color_rgb: '25, 131, 9',
|
||||
theme_color_light: '#cce8d2',
|
||||
// 商品ID
|
||||
goodsId: null,
|
||||
// 商品数据
|
||||
|
|
@ -426,6 +428,8 @@ export default {
|
|||
// 主题
|
||||
this.theme_view = app.globalData.get_theme_value_view();
|
||||
this.theme_color = app.globalData.get_theme_color();
|
||||
this.theme_color_rgb = app.globalData.get_theme_color_rgb();
|
||||
this.theme_color_light = app.globalData.get_theme_color(null, true) || '#cce8d2';
|
||||
|
||||
// 货币符号
|
||||
this.currency_symbol = app.globalData.currency_symbol();
|
||||
|
|
@ -1038,8 +1042,8 @@ export default {
|
|||
}
|
||||
|
||||
.payment-item-selected {
|
||||
background-color: #fff5f5;
|
||||
border-color: #ff404f;
|
||||
background-color: rgba(241, 162, 158, 0.08);
|
||||
border-color: var(--theme-color, #198309);
|
||||
}
|
||||
|
||||
.payment-icon {
|
||||
|
|
|
|||
|
|
@ -303,8 +303,8 @@ export default {
|
|||
<style scoped>
|
||||
.ticket-header {
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 80%, rgba(120, 80, 255, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(255, 0, 127, 0.1) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 20% 80%, rgba(var(--theme-color-rgb), 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(var(--theme-color-rgb), 0.11) 0%, transparent 40%),
|
||||
linear-gradient(160deg, #1a1625 0%, #2d2840 50%, #1f1b2e 100%);
|
||||
padding: 54px 20px 20px 20px;
|
||||
display: flex;
|
||||
|
|
@ -348,7 +348,7 @@ export default {
|
|||
|
||||
.tag {
|
||||
font-size: 12px;
|
||||
color: #d0cdd8;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -447,18 +447,19 @@ export default {
|
|||
/* 当前 Tab（不可点击） */
|
||||
.date-tab-current {
|
||||
cursor: default;
|
||||
background: rgba(255, 64, 79, 0.25);
|
||||
box-shadow: 0 0 20px rgba(255, 64, 79, 0.2);
|
||||
background: rgba(var(--theme-color-rgb), 0.25);
|
||||
box-shadow: 0 0 20px rgba(var(--theme-color-rgb), 0.2);
|
||||
}
|
||||
|
||||
.date-tab-current .date-tab-date {
|
||||
color: #ff404f;
|
||||
color: var(--theme-color-light, #cce8d2);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date-tab-current .date-tab-day {
|
||||
color: rgba(255, 64, 79, 0.8);
|
||||
color: var(--theme-color-light, #cce8d2);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 已过期 Tab（不可点击） */
|
||||
|
|
@ -497,7 +498,7 @@ export default {
|
|||
left: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(255, 64, 79, 0.5);
|
||||
background: rgba(var(--theme-color-rgb), 0.5);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: ripple-expand 0.6s ease-out forwards;
|
||||
|
|
@ -521,7 +522,7 @@ export default {
|
|||
right: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #ff404f;
|
||||
background: var(--theme-color, #198309);
|
||||
border-radius: 50%;
|
||||
animation: loading-dot-pulse 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
|
@ -552,17 +553,17 @@ export default {
|
|||
transform: translateX(-50%);
|
||||
width: 24px;
|
||||
height: 3px;
|
||||
background: #ff404f;
|
||||
background: var(--theme-color-light, #cce8d2);
|
||||
border-radius: 2px;
|
||||
animation: indicator-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes indicator-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(255, 64, 79, 0.5);
|
||||
box-shadow: 0 0 5px rgba(var(--theme-color-rgb), 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 15px rgba(255, 64, 79, 0.8), 0 0 25px rgba(255, 64, 79, 0.4);
|
||||
box-shadow: 0 0 15px rgba(var(--theme-color-rgb), 0.8), 0 0 25px rgba(var(--theme-color-rgb), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -571,14 +572,14 @@ export default {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(135deg, #ff404f, #ff6b81);
|
||||
background: linear-gradient(135deg, var(--theme-color, #198309), var(--theme-color, #198309));
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 0 10px 0 4px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 1px 3px rgba(255, 64, 79, 0.4);
|
||||
box-shadow: 0 1px 3px rgba(var(--theme-color-rgb), 0.4);
|
||||
}
|
||||
|
||||
/* 已过期状态 */
|
||||
|
|
@ -597,18 +598,18 @@ export default {
|
|||
|
||||
/* 加载中状态 */
|
||||
.date-tab-loading {
|
||||
background: rgba(255, 64, 79, 0.2);
|
||||
background: rgba(var(--theme-color-rgb), 0.2);
|
||||
animation: tab-loading-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes tab-loading-pulse {
|
||||
0%, 100% {
|
||||
background: rgba(255, 64, 79, 0.15);
|
||||
background: rgba(var(--theme-color-rgb), 0.15);
|
||||
box-shadow: none;
|
||||
}
|
||||
50% {
|
||||
background: rgba(255, 64, 79, 0.25);
|
||||
box-shadow: 0 0 15px rgba(255, 64, 79, 0.3);
|
||||
background: rgba(var(--theme-color-rgb), 0.25);
|
||||
box-shadow: 0 0 15px rgba(var(--theme-color-rgb), 0.3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
<view class="venue-item" v-for="(item, index) in venues" :key="index" @click="handleVenueClick(item)">
|
||||
<view class="venue-info">
|
||||
<view class="venue-row">
|
||||
<iconfont name="icon-location" color="#ff404f" size="20px" propStyle="margin-right: 6px;"></iconfont>
|
||||
<iconfont name="icon-location" size="20px" propStyle="margin-right: 6px; color: var(--theme-color, #198309);"></iconfont>
|
||||
<text class="venue-name">{{ item.name }}</text>
|
||||
</view>
|
||||
<text class="venue-address">{{ item.address }}</text>
|
||||
|
|
@ -382,7 +382,7 @@ export default {
|
|||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
height: 3px;
|
||||
background-color: #ff404f;
|
||||
background-color: var(--theme-color, #198309);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -447,8 +447,8 @@ export default {
|
|||
|
||||
.icon-warning {
|
||||
background-color: transparent;
|
||||
color: #ff404f;
|
||||
border: 1px solid #ff404f;
|
||||
color: #f1a29e;
|
||||
border: 1px solid #f1a29e;
|
||||
}
|
||||
|
||||
/* 场馆列表项 */
|
||||
|
|
@ -539,8 +539,8 @@ export default {
|
|||
}
|
||||
|
||||
.buy-option-item.active {
|
||||
background-color: #fff0f1;
|
||||
border-color: #ff404f;
|
||||
background-color: rgba(var(--theme-color-rgb), 0.06);
|
||||
border-color: var(--theme-color, #198309);
|
||||
}
|
||||
|
||||
.buy-option-item.disabled {
|
||||
|
|
@ -561,7 +561,7 @@ export default {
|
|||
|
||||
.option-status {
|
||||
font-size: 11px;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -571,7 +571,7 @@ export default {
|
|||
}
|
||||
|
||||
.buy-option-item.active .option-name {
|
||||
color: #ff404f;
|
||||
color: var(--theme-color, #198309);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -582,7 +582,7 @@ export default {
|
|||
}
|
||||
|
||||
.buy-option-item.active .option-price {
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
|
|
@ -600,7 +600,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: linear-gradient(90deg, #ff6b81, #ff404f);
|
||||
background: linear-gradient(90deg, var(--theme-color, #198309), var(--theme-color, #198309));
|
||||
color: #fff;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="venue-card" @click="handleClick">
|
||||
<view class="venue-badge" v-if="isNearest">离我最近</view>
|
||||
<view class="venue-badge bg-main" v-if="isNearest">离我最近</view>
|
||||
<view class="venue-content">
|
||||
<view class="venue-info">
|
||||
<text class="venue-name">{{ venue.name || '获取中...' }}</text>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</view>
|
||||
<view class="venue-action">
|
||||
<view class="map-icon">
|
||||
<iconfont name="icon-location" color="#e61818" size="16px"></iconfont>
|
||||
<iconfont name="icon-location" size="16px"></iconfont>
|
||||
</view>
|
||||
<text class="map-more">所有场馆 ></text>
|
||||
</view>
|
||||
|
|
@ -56,7 +56,7 @@ export default {
|
|||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #ff404f;
|
||||
background-color: var(--theme-color, #198309);
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -102,12 +102,13 @@ export default {
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #ffffff;
|
||||
border: 1.5px solid #f76464;
|
||||
border: 1.5px solid var(--theme-color, #198309);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--theme-color, #198309);
|
||||
}
|
||||
|
||||
.map-more {
|
||||
|
|
|
|||
|
|
@ -154,16 +154,16 @@ export default {
|
|||
.vr-spinner-ring-1 {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-top-color: #ff404f;
|
||||
border-right-color: rgba(255, 64, 79, 0.5);
|
||||
border-top-color: var(--theme-color, #198309);
|
||||
border-right-color: rgba(var(--theme-color-rgb), 0.5);
|
||||
animation: vr-spin 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.vr-spinner-ring-2 {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-right-color: #ff6b81;
|
||||
border-bottom-color: rgba(255, 107, 129, 0.5);
|
||||
border-right-color: var(--theme-color, #198309);
|
||||
border-bottom-color: rgba(var(--theme-color-rgb), 0.5);
|
||||
animation: vr-spin 1.2s ease-in-out infinite;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
|
@ -171,8 +171,8 @@ export default {
|
|||
.vr-spinner-ring-3 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-bottom-color: #ffb3bf;
|
||||
border-left-color: rgba(255, 179, 191, 0.5);
|
||||
border-bottom-color: var(--theme-color, #198309);
|
||||
border-left-color: rgba(var(--theme-color-rgb), 0.3);
|
||||
animation: vr-spin 1.2s ease-in-out infinite;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
|
@ -183,7 +183,7 @@ export default {
|
|||
left: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: linear-gradient(135deg, #ff404f, #ff6b81);
|
||||
background: linear-gradient(135deg, var(--theme-color, #198309), var(--theme-color, #198309));
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: vr-core-pulse 1.2s ease-in-out infinite;
|
||||
|
|
@ -201,11 +201,11 @@ export default {
|
|||
@keyframes vr-core-pulse {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
box-shadow: 0 0 10px rgba(255, 64, 79, 0.8);
|
||||
box-shadow: 0 0 10px rgba(var(--theme-color-rgb), 0.8);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
box-shadow: 0 0 20px rgba(255, 64, 79, 1);
|
||||
box-shadow: 0 0 20px rgba(var(--theme-color-rgb), 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -241,7 +241,7 @@ export default {
|
|||
|
||||
.vr-progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #ff404f, #ff6b81, #ffb3bf);
|
||||
background: linear-gradient(90deg, var(--theme-color, #198309), rgba(var(--theme-color-rgb), 0.8), rgba(var(--theme-color-rgb), 0.6));
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -558,7 +558,7 @@ export default {
|
|||
|
||||
.seat-tag-price {
|
||||
font-size: 12px;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -597,7 +597,7 @@ export default {
|
|||
|
||||
.price-value {
|
||||
font-size: 20px;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -605,7 +605,7 @@ export default {
|
|||
width: 140px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
background: linear-gradient(90deg, #ff6b81, #ff404f);
|
||||
background: linear-gradient(90deg, var(--theme-color, #198309), var(--theme-color, #198309));
|
||||
color: #fff;
|
||||
border-radius: 22px;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
|
||||
.header-banner {
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 80%, rgba(120, 80, 255, 0.15) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(255, 0, 127, 0.1) 0%, transparent 40%),
|
||||
radial-gradient(ellipse at 20% 80%, rgba(var(--theme-color-rgb), 0.4) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(var(--theme-color-rgb), 0.25) 0%, transparent 40%),
|
||||
linear-gradient(160deg, #1a1625 0%, #2d2840 50%, #1f1b2e 100%);
|
||||
padding: 54px 20px 64px 20px;
|
||||
display: flex;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
.header-info .tag {
|
||||
font-size: 12px;
|
||||
color: #d0cdd8;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #ff404f;
|
||||
background-color: var(--theme-color, #198309);
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #ffffff;
|
||||
border: 1.5px solid #f76464;
|
||||
border: 1.5px solid var(--theme-color, #198309);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
.pin-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #e61818;
|
||||
fill: var(--theme-color, #198309);
|
||||
}
|
||||
|
||||
/* Service Header */
|
||||
|
|
@ -228,8 +228,8 @@
|
|||
|
||||
.icon-warning {
|
||||
background-color: transparent;
|
||||
color: #ff404f;
|
||||
border: 1px solid #ff404f;
|
||||
color: #f1a29e;
|
||||
border: 1px solid #f1a29e;
|
||||
}
|
||||
|
||||
/* =========== Section Card =========== */
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
|
||||
.reselect-text {
|
||||
font-size: 12px;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -365,14 +365,14 @@
|
|||
|
||||
.price-text {
|
||||
font-size: 18px;
|
||||
color: #ff404f;
|
||||
color: #f1a29e;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
flex: 1;
|
||||
background-color: #ff404f;
|
||||
background-color: var(--theme-color, #198309);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
|
|
@ -462,7 +462,7 @@
|
|||
transform: translateX(-50%);
|
||||
width: 50%;
|
||||
height: 3px;
|
||||
background-color: #ff404f;
|
||||
background-color: var(--theme-color, #198309);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="ticket-page">
|
||||
<view class="ticket-page" :class="theme_view" :style="{ '--theme-color': theme_color, '--theme-color-rgb': theme_color_rgb, '--theme-color-light': theme_color_light }">
|
||||
<!-- 顶部返回按钮 -->
|
||||
<view class="top-nav-left-icon pf" style="top: 44px;" v-show="!seatSelectorVisible">
|
||||
<view class="icon back-icon round cp" @click="goBack">‹</view>
|
||||
|
|
@ -170,6 +170,12 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 主题
|
||||
theme_view: '',
|
||||
theme_color: '',
|
||||
theme_color_rgb: '25, 131, 9',
|
||||
theme_color_light: '#cce8d2',
|
||||
theme_pink: '#f1a29e',
|
||||
// App 实例
|
||||
app: null,
|
||||
// 商品ID
|
||||
|
|
@ -295,6 +301,12 @@ export default {
|
|||
const app = getApp();
|
||||
this.app = app;
|
||||
|
||||
// 初始化主题
|
||||
this.theme_view = app.globalData.get_theme_value_view();
|
||||
this.theme_color = app.globalData.get_theme_color();
|
||||
this.theme_color_rgb = app.globalData.get_theme_color_rgb();
|
||||
this.theme_color_light = app.globalData.get_theme_color(null, true) || '#cce8d2';
|
||||
|
||||
// 获取页面参数
|
||||
if (params && params.id) {
|
||||
this.goodsId = params.id;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
.ticket-wallet-page {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: radial-gradient(circle at center, #fef4f4 0%, #f3e5e5 100%);
|
||||
background: radial-gradient(circle at center, rgba(241, 162, 158, 0.1) 0%, rgba(241, 162, 158, 0.05) 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
border-bottom: 1rpx solid rgba(225, 37, 27, 0.08);
|
||||
border-bottom: 1rpx solid rgba(var(--theme-color-rgb), 0.08);
|
||||
/* #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU || H5 || APP */
|
||||
padding-top: constant(safe-area-inset-top);
|
||||
padding-top: env(safe-area-inset-top);
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
.ticket-count {
|
||||
font-size: 22rpx;
|
||||
color: #e1251b;
|
||||
color: var(--theme-color, #198309);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
.section-count-number {
|
||||
font-size: 36rpx;
|
||||
font-weight: 900;
|
||||
color: #e1251b;
|
||||
color: var(--theme-color, #198309);
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
bottom: 74rpx; /* 对齐虚线 */
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #f3e5e5;
|
||||
background: rgba(241, 162, 158, 0.15);
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.03);
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
bottom: 74rpx; /* 对齐虚线 */
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #f3e5e5;
|
||||
background: rgba(241, 162, 158, 0.15);
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.03);
|
||||
|
|
@ -238,7 +238,7 @@
|
|||
}
|
||||
|
||||
.action-circle-btn:active {
|
||||
background: rgba(225, 37, 27, 0.08);
|
||||
background: rgba(var(--theme-color-rgb), 0.08);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
|
|
@ -292,7 +292,7 @@
|
|||
line-height: 1.1;
|
||||
margin-bottom: 24rpx;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
background: linear-gradient(135deg, #e1251b 0%, #ff6b35 100%);
|
||||
background: linear-gradient(135deg, var(--theme-color, #198309) 0%, var(--theme-color, #198309) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
@ -310,8 +310,8 @@
|
|||
|
||||
/* ========== 座位信息块 ========== */
|
||||
.seat-badge-block {
|
||||
background: #fdf8f8;
|
||||
border: 1rpx solid rgba(225, 37, 27, 0.08);
|
||||
background: rgba(241, 162, 158, 0.06);
|
||||
border: 1rpx solid rgba(241, 162, 158, 0.12);
|
||||
border-radius: 24rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
|
|
@ -345,17 +345,17 @@
|
|||
}
|
||||
|
||||
.seat-item {
|
||||
background: #e1251b;
|
||||
background: var(--theme-color, #198309);
|
||||
color: #ffffff;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 4rpx 10rpx rgba(225, 37, 27, 0.15);
|
||||
box-shadow: 0 4rpx 10rpx rgba(var(--theme-color-rgb), 0.15);
|
||||
}
|
||||
|
||||
.seat-separator {
|
||||
color: #e1251b;
|
||||
color: var(--theme-color, #198309);
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(225, 37, 27, 0.35);
|
||||
background: rgba(var(--theme-color-rgb), 0.35);
|
||||
filter: blur(10rpx);
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
|
|
@ -413,7 +413,7 @@
|
|||
|
||||
.poster-abbr-title {
|
||||
font-size: 20rpx;
|
||||
color: #e1251b;
|
||||
color: var(--theme-color, #198309);
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 2rpx;
|
||||
|
|
@ -451,7 +451,7 @@
|
|||
/* ========== 物理分割虚线和查看票码 ========== */
|
||||
.ticket-card-footer {
|
||||
margin-top: 28rpx;
|
||||
border-top: 2rpx dashed rgba(225, 37, 27, 0.15);
|
||||
border-top: 2rpx dashed rgba(var(--theme-color-rgb), 0.15);
|
||||
padding-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -467,7 +467,7 @@
|
|||
.view-code-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 800;
|
||||
color: #e1251b;
|
||||
color: var(--theme-color, #198309);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
|
@ -600,7 +600,7 @@
|
|||
|
||||
.history-card .ticket-punch-hole-left,
|
||||
.history-card .ticket-punch-hole-right {
|
||||
background: #f3e5e5;
|
||||
background: rgba(241, 162, 158, 0.15);
|
||||
border-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view :class="theme_view" class="ticket-wallet-page page-fade-in">
|
||||
<view :class="theme_view" class="ticket-wallet-page page-fade-in" :style="{ '--theme-color': theme_color, '--theme-color-rgb': theme_color_rgb, '--theme-color-light': theme_color_light, '--theme-pair': theme_pink }">
|
||||
<!-- 顶部返回 + 标题导航 -->
|
||||
<!-- <view class="top-nav-bar">
|
||||
<view class="nav-back" @click="goBack">
|
||||
|
|
@ -24,8 +24,9 @@
|
|||
<view class="brand-banner">
|
||||
<image
|
||||
class="brand-bg-image"
|
||||
src="/pages/plugins/vr-ticket-wallet/static/images/wallet_bg.png"
|
||||
:src="wallet_bg_url"
|
||||
mode="widthFix"
|
||||
@error="on_wallet_bg_error"
|
||||
/>
|
||||
</view>
|
||||
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
<view class="ticket-panel-container">
|
||||
<!-- 待使用演出列表 -->
|
||||
<view class="section-header-row" v-if="activeGroups.length > 0">
|
||||
<text class="section-main-title">待核销票据</text>
|
||||
<text class="section-main-title">待看演出</text>
|
||||
<view class="section-count-badge">
|
||||
<text>共</text>
|
||||
<text class="section-count-number">{{ totalActiveCount }}</text>
|
||||
|
|
@ -87,7 +88,7 @@
|
|||
<view class="seat-badge-block">
|
||||
<!-- 场馆厅信息 -->
|
||||
<view class="seat-hall-text" v-if="group.tickets[0] && getHallFromSeatInfo(group.tickets[0].seat_info)">
|
||||
<iconfont name="icon-map-position" size="24rpx" color="#e1251b" propClass="lh-il va-m mr-xs"></iconfont> {{ getHallFromSeatInfo(group.tickets[0].seat_info) }}
|
||||
<iconfont name="icon-map-position" size="24rpx" propClass="lh-il va-m mr-xs" propStyle="color: var(--theme-color, #198309);"></iconfont> {{ getHallFromSeatInfo(group.tickets[0].seat_info) }}
|
||||
</view>
|
||||
<!-- 座位号列表 -->
|
||||
<view class="seat-detail-wrap">
|
||||
|
|
@ -268,7 +269,7 @@
|
|||
|
||||
<script>
|
||||
import uPopup from '@/components/u-popup/u-popup.vue';
|
||||
import TicketQrPopup from './components/ticket-qr-popup/index.vue';
|
||||
import TicketQrPopupLocal from './components/ticket-qr-popup/index.vue';
|
||||
import componentCommon from '@/components/common/common';
|
||||
import componentQuickNav from '@/components/quick-nav/quick-nav';
|
||||
|
||||
|
|
@ -286,7 +287,7 @@ export default {
|
|||
name: 'TicketWallet',
|
||||
components: {
|
||||
uPopup,
|
||||
TicketQrPopup,
|
||||
TicketQrPopup: TicketQrPopupLocal,
|
||||
componentCommon,
|
||||
componentQuickNav,
|
||||
},
|
||||
|
|
@ -294,6 +295,10 @@ export default {
|
|||
return {
|
||||
// 主题样式
|
||||
theme_view: '',
|
||||
theme_color: '',
|
||||
theme_color_rgb: '25, 131, 9',
|
||||
theme_color_light: '#cce8d2',
|
||||
theme_pink: '#f1a29e',
|
||||
// 哀悼灰度插件（默认 false，在 onLoad() 中由 globalData 填充）
|
||||
plugins_mourning_data_is_app: false,
|
||||
// 加载状态 1=加载中 2=加载失败 3=加载成功
|
||||
|
|
@ -303,6 +308,9 @@ export default {
|
|||
rawTickets: [],
|
||||
// 默认海报兜底图
|
||||
defaultPoster: '/static/images/common/empty.png',
|
||||
// 票夹顶部背景图：远程主题图优先，加载失败后回落本地默认图
|
||||
wallet_bg_local_fallback: '/pages/plugins/vr-ticket-wallet/static/images/wallet_bg.png',
|
||||
wallet_bg_url: '/pages/plugins/vr-ticket-wallet/static/images/wallet_bg.png',
|
||||
// QR 弹窗控制（使用 ref.open()/close() 模式）
|
||||
qrPopupBg: '#ffffff',
|
||||
// 当前弹窗内展示的票（带 qr_payload）
|
||||
|
|
@ -350,6 +358,10 @@ export default {
|
|||
this.setData({
|
||||
plugins_mourning_data_is_app: isMourning,
|
||||
theme_view: app.globalData.get_theme_value_view(),
|
||||
theme_color: app.globalData.get_theme_color() || '#198309',
|
||||
theme_color_rgb: app.globalData.get_theme_color_rgb() || '25, 131, 9',
|
||||
theme_color_light: app.globalData.get_theme_color(null, true) || '#cce8d2',
|
||||
wallet_bg_url: this.get_wallet_bg_remote_url(app),
|
||||
});
|
||||
|
||||
// 调用公共事件方法
|
||||
|
|
@ -410,6 +422,24 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 生成票夹顶部背景图远程地址，按当前主题目录优先读取
|
||||
get_wallet_bg_remote_url(app) {
|
||||
var staticUrl = (((app || {}).globalData || {}).data || {}).static_url || '';
|
||||
var theme = 'kimjaejoong';
|
||||
try {
|
||||
theme = app.globalData.get_theme_value() || theme;
|
||||
} catch (e) {}
|
||||
return staticUrl.replace(/\/+$/, '') + '/static/app/' + theme + '/plugins/vr-ticket-wallet/wallet_bg.png';
|
||||
},
|
||||
|
||||
// 远程主题图不存在或加载失败时，回落到本地默认背景图
|
||||
on_wallet_bg_error() {
|
||||
if (this.wallet_bg_url === this.wallet_bg_local_fallback) return;
|
||||
this.setData({
|
||||
wallet_bg_url: this.wallet_bg_local_fallback,
|
||||
});
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
const pages = getCurrentPages();
|
||||
|
|
|
|||
Loading…
Reference in New Issue