首页增加支付分标识
This commit is contained in:
@@ -67,6 +67,7 @@
|
|||||||
|
|
||||||
<!-- 底部导航栏 -->
|
<!-- 底部导航栏 -->
|
||||||
<view class="tab-bar">
|
<view class="tab-bar">
|
||||||
|
<view class="tab-bar-row">
|
||||||
<view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
|
<view class="tab-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">
|
||||||
<view class="home-icon">
|
<view class="home-icon">
|
||||||
<view class="home-roof"></view>
|
<view class="home-roof"></view>
|
||||||
@@ -87,6 +88,14 @@
|
|||||||
<text class="tab-text">我的</text>
|
<text class="tab-text">我的</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 支付分信息(仅微信环境显示) -->
|
||||||
|
<view v-if="isWechat" class="payscore-info">
|
||||||
|
<image class="payscore-logo" src="/static/payscore-logo.png" mode="aspectFit" />
|
||||||
|
<view class="payscore-divider"></view>
|
||||||
|
<text class="payscore-text">微信支付分 | 550分及以上优享</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- ========== 我的内容 ========== -->
|
<!-- ========== 我的内容 ========== -->
|
||||||
@@ -169,6 +178,7 @@ export default {
|
|||||||
{ title: '公众号信息', action: 'qrcode' }
|
{ title: '公众号信息', action: 'qrcode' }
|
||||||
],
|
],
|
||||||
servicePhone: config.servicePhone,
|
servicePhone: config.servicePhone,
|
||||||
|
isWechat: false,
|
||||||
isDev: process.env.NODE_ENV === 'development',
|
isDev: process.env.NODE_ENV === 'development',
|
||||||
vconsoleEnabled: false
|
vconsoleEnabled: false
|
||||||
};
|
};
|
||||||
@@ -194,6 +204,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
|
// 检测是否在微信环境中打开
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.isWechat = true;
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
this.isWechat = /MicroMessenger/i.test(navigator.userAgent);
|
||||||
|
// #endif
|
||||||
|
|
||||||
// 支持通过 tab 参数切换到"我的"页面
|
// 支持通过 tab 参数切换到"我的"页面
|
||||||
if (options.tab === 'mine') {
|
if (options.tab === 'mine') {
|
||||||
this.currentTab = 'mine';
|
this.currentTab = 'mine';
|
||||||
@@ -337,10 +355,11 @@ page { height: 100%; background-color: #fff; }
|
|||||||
.price-num { font-size: 32rpx; }
|
.price-num { font-size: 32rpx; }
|
||||||
|
|
||||||
/* 底部占位 */
|
/* 底部占位 */
|
||||||
.bottom-spacer { height: 160rpx; }
|
.bottom-spacer { height: 200rpx; }
|
||||||
|
|
||||||
/* 底部导航栏 */
|
/* 底部导航栏 */
|
||||||
.tab-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 120rpx; background: #fff; display: flex; align-items: center; justify-content: space-around; box-shadow: 0 -2rpx 16rpx rgba(0,0,0,0.08); z-index: 999; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
|
.tab-bar { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; display: flex; flex-direction: column; align-items: center; box-shadow: 0 -2rpx 16rpx rgba(0,0,0,0.08); z-index: 999; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
|
||||||
|
.tab-bar-row { width: 100%; height: 120rpx; display: flex; align-items: center; justify-content: space-around; }
|
||||||
.tab-bar .tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
|
.tab-bar .tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
|
||||||
.tab-bar .tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
|
.tab-bar .tab-text { font-size: 28rpx; color: #999; font-weight: normal; }
|
||||||
.tab-bar .tab-item.active .tab-text { color: #2979ff; }
|
.tab-bar .tab-item.active .tab-text { color: #2979ff; }
|
||||||
@@ -413,6 +432,10 @@ page { height: 100%; background-color: #fff; }
|
|||||||
}
|
}
|
||||||
.door-btn-wrapper { position: relative; display: flex; align-items: center; justify-content: center; margin-top: -80rpx; }
|
.door-btn-wrapper { position: relative; display: flex; align-items: center; justify-content: center; margin-top: -80rpx; }
|
||||||
.door-btn { width: 160rpx; height: 160rpx; border-radius: 50%; background: linear-gradient(135deg, #2979ff, #1e60e0); color: #fff; font-size: 38rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 10rpx 36rpx rgba(41,121,255,0.55); }
|
.door-btn { width: 160rpx; height: 160rpx; border-radius: 50%; background: linear-gradient(135deg, #2979ff, #1e60e0); color: #fff; font-size: 38rpx; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 10rpx 36rpx rgba(41,121,255,0.55); }
|
||||||
|
.payscore-info { display: flex; align-items: center; padding-bottom: 16rpx; }
|
||||||
|
.payscore-logo { width: 34rpx; height: 34rpx; }
|
||||||
|
.payscore-divider { width: 2rpx; height: 24rpx; background-color: rgba(102, 102, 102, 0.6); margin: 0 10rpx; }
|
||||||
|
.payscore-text { font-size: 24rpx; color: #666; white-space: nowrap; }
|
||||||
|
|
||||||
/* 空状态 / Loading */
|
/* 空状态 / Loading */
|
||||||
.empty-tip, .loading-tip { text-align: center; padding: 60rpx; color: #999; font-size: 28rpx; }
|
.empty-tip, .loading-tip { text-align: center; padding: 60rpx; color: #999; font-size: 28rpx; }
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Reference in New Issue
Block a user