feat: 优化我的页面扫码统计卡片 1.调整标题和图标位置 2.优化数字和单位布局 3.调整同比增长文字位置
This commit is contained in:
davy
parent
c0ebcb2654
commit
c809b1e0cd
@ -47,11 +47,27 @@
|
||||
<view class="coin-section">
|
||||
<!-- 左侧扫码统计 -->
|
||||
<view class="coin-box left-box">
|
||||
<view class="title">本月累计扫码酒款数量</view>
|
||||
<view class="amount-row">
|
||||
<text class="amount">{{scanCount}}</text>
|
||||
</view>
|
||||
<view class="desc">*击败全国0%认证门店</view>
|
||||
<block v-if="userStatus === 'verified'">
|
||||
<view class="title">
|
||||
<image src="/static/tag.svg" class="tag-icon" />
|
||||
<text>本周累计扫码</text>
|
||||
</view>
|
||||
<view class="amount-row">
|
||||
<text class="amount">20</text>
|
||||
<text class="unit">桶</text>
|
||||
</view>
|
||||
<view class="trend-row">
|
||||
<view class="trend-item up">
|
||||
<image src="/static/up.svg" class="trend-icon" />
|
||||
<text class="trend-text">同比增长13.2%</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="unauth-tip">
|
||||
<text class="tip-text">欢迎加入啤啤猩球</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 右侧啤酒币轮播 -->
|
||||
<swiper class="coin-box right-box"
|
||||
@ -61,6 +77,7 @@
|
||||
:autoplay="true"
|
||||
:interval="3000"
|
||||
circular
|
||||
@click="toBeerCoin"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in sortedBrandCoins" :key="index">
|
||||
<view class="brand-content">
|
||||
@ -164,15 +181,19 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: null,
|
||||
loading: true,
|
||||
barInfo: null,
|
||||
myScanData: null,
|
||||
statusBaeHeight: 40,
|
||||
statusBaeHeight: 0,
|
||||
isLoggedIn: false,
|
||||
currentBrandIndex: 0,
|
||||
sortedBrandCoins: [],
|
||||
scanCount: 0
|
||||
scanCount: 0,
|
||||
userInfo: null,
|
||||
// 扫码统计数据
|
||||
weekScanStats: {
|
||||
total: 20,
|
||||
weekGrowth: 13.2
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -204,65 +225,28 @@
|
||||
},
|
||||
methods: {
|
||||
// 检查登录状态
|
||||
async checkLoginStatus() {
|
||||
checkLoginStatus() {
|
||||
try {
|
||||
const token = uni.getStorageSync('token');
|
||||
const userInfo = uni.getStorageSync('userInfo');
|
||||
const token = getToken();
|
||||
const userInfo = getUserInfoFromAuth();
|
||||
|
||||
// 检查token和userInfo是否有效
|
||||
if (!token || token.startsWith('temp_') || !userInfo) {
|
||||
if (!token || !userInfo) {
|
||||
this.isLoggedIn = false;
|
||||
this.userInfo = null;
|
||||
this.barInfo = null;
|
||||
this.myScanData = null;
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoggedIn = true;
|
||||
this.userInfo = userInfo;
|
||||
|
||||
// 先获取酒吧信息
|
||||
await getBarInfo().then(res => {
|
||||
if (res && res.data) {
|
||||
this.barInfo = res.data;
|
||||
// 如果是认证中状态，设置默认的扫码数据
|
||||
if (this.barInfo.authState === 2) {
|
||||
this.myScanData = { scanCount: 0, percent: 0 };
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取酒吧信息失败:', err);
|
||||
if (err.code === 500 && err.msg.includes('门店未认证')) {
|
||||
this.barInfo = {
|
||||
authState: 2,
|
||||
barName: '',
|
||||
barNumber: '',
|
||||
barContactPhone: ''
|
||||
};
|
||||
this.myScanData = { scanCount: 0, percent: 0 };
|
||||
} else {
|
||||
this.barInfo = null;
|
||||
}
|
||||
});
|
||||
// 获取门店信息和扫码数据
|
||||
this.getBarInfo();
|
||||
this.getMyScanData();
|
||||
|
||||
// 如果不是认证中状态，获取扫码数据
|
||||
if (this.barInfo && this.barInfo.authState !== 2) {
|
||||
await getMyScanData().then(res => {
|
||||
if (res.code === 200) {
|
||||
this.myScanData = res.data;
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取扫码数据失败:', err);
|
||||
this.myScanData = { scanCount: 0, percent: 0 };
|
||||
});
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('检查登录状态失败:', error);
|
||||
return false;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.isLoggedIn = false;
|
||||
this.userInfo = null;
|
||||
}
|
||||
},
|
||||
loginSuccess() {
|
||||
@ -271,14 +255,23 @@
|
||||
this.userInfo = getUserInfoFromAuth();
|
||||
this.isLoggedIn = true;
|
||||
|
||||
// 显示加载提示
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
// 使用 Promise.all 同时获取所有需要的数据
|
||||
Promise.all([
|
||||
this.getBarInfoFun(),
|
||||
this.getMyScanDataFun()
|
||||
this.getBarInfo(),
|
||||
this.getMyScanData(),
|
||||
this.getStoreCoinBalanceFun()
|
||||
]).then(() => {
|
||||
console.log('所有数据更新完成');
|
||||
// 强制更新视图
|
||||
this.$forceUpdate();
|
||||
// 隐藏加载提示
|
||||
uni.hideLoading();
|
||||
// 显示登录成功提示
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
@ -287,6 +280,7 @@
|
||||
});
|
||||
}).catch(err => {
|
||||
console.error('数据更新失败:', err);
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '数据更新失败',
|
||||
icon: 'none'
|
||||
@ -294,51 +288,26 @@
|
||||
});
|
||||
},
|
||||
// 获取酒吧信息
|
||||
getBarInfoFun() {
|
||||
if (!this.isLoggedIn) {
|
||||
console.log('用户未登录，不获取酒吧信息');
|
||||
return Promise.reject('未登录');
|
||||
}
|
||||
|
||||
return getBarInfo().then(res => {
|
||||
console.log('获取酒吧信息成功:', res);
|
||||
if (res && res.data) {
|
||||
async getBarInfo() {
|
||||
try {
|
||||
const res = await getBarInfo();
|
||||
if (res.code === 200) {
|
||||
this.barInfo = res.data;
|
||||
// 强制更新视图
|
||||
this.$forceUpdate();
|
||||
return this.barInfo;
|
||||
} else {
|
||||
console.log('获取酒吧信息成功，但数据为空');
|
||||
this.barInfo = null;
|
||||
return Promise.reject('数据为空');
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取酒吧信息失败:', err);
|
||||
this.barInfo = null;
|
||||
return Promise.reject(err);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取门店信息失败:', error);
|
||||
}
|
||||
},
|
||||
// 获取我的扫码数据
|
||||
getMyScanDataFun() {
|
||||
if (!this.isLoggedIn) {
|
||||
return Promise.reject('未登录');
|
||||
}
|
||||
|
||||
return getMyScanData().then(res => {
|
||||
async getMyScanData() {
|
||||
try {
|
||||
const res = await getMyScanData();
|
||||
if (res.code === 200) {
|
||||
this.myScanData = res.data;
|
||||
return this.myScanData;
|
||||
} else {
|
||||
return Promise.reject(res);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取扫码数据失败:', err);
|
||||
uni.showToast({
|
||||
title: '获取扫码数据失败',
|
||||
icon: 'none'
|
||||
});
|
||||
return Promise.reject(err);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取扫码数据失败:', error);
|
||||
}
|
||||
},
|
||||
// 处理用户信息区域点击
|
||||
handleUserBoxClick() {
|
||||
@ -443,17 +412,31 @@
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 清除本地存储的用户信息
|
||||
clearLoginStatus();
|
||||
|
||||
// 跳转到首页
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
// 重置所有数据
|
||||
this.resetData();
|
||||
// 刷新页面状态
|
||||
this.checkLoginStatus();
|
||||
// 显示退出成功提示
|
||||
uni.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置数据方法
|
||||
resetData() {
|
||||
this.barInfo = null;
|
||||
this.myScanData = null;
|
||||
this.isLoggedIn = false;
|
||||
this.currentBrandIndex = 0;
|
||||
this.sortedBrandCoins = [];
|
||||
this.scanCount = 0;
|
||||
this.userInfo = null;
|
||||
},
|
||||
// 关闭登录弹窗
|
||||
closeLoginPopup() {
|
||||
this.$refs.loginRef.close();
|
||||
@ -466,11 +449,9 @@
|
||||
},
|
||||
// 跳转到设置页面
|
||||
toSettings() {
|
||||
if (this.userStatus === 'verified') {
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/setting'
|
||||
})
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/settings'
|
||||
});
|
||||
},
|
||||
|
||||
// 显示修改头像提示
|
||||
@ -615,8 +596,8 @@
|
||||
// 获取啤酒币余额
|
||||
async getStoreCoinBalanceFun() {
|
||||
try {
|
||||
const token = uni.getStorageSync('token');
|
||||
const userInfo = uni.getStorageSync('userInfo');
|
||||
const token = getToken();
|
||||
const userInfo = getUserInfoFromAuth();
|
||||
|
||||
if (!token || !userInfo) {
|
||||
this.sortedBrandCoins = [];
|
||||
@ -648,9 +629,15 @@
|
||||
this.sortedBrandCoins = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取啤酒币余额失败', error);
|
||||
console.error('获取啤酒币余额失败:', error);
|
||||
this.sortedBrandCoins = [];
|
||||
}
|
||||
},
|
||||
// 跳转到啤酒币页面
|
||||
toBeerCoin() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesCoin/beerCoin'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -659,7 +646,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
min-height: 100vh;
|
||||
background: #F8F8F8;
|
||||
background-color: #F6F7FB;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
@ -933,7 +920,7 @@
|
||||
|
||||
/* 数据统计区域样式 */
|
||||
.data-section {
|
||||
padding: 24rpx;
|
||||
padding: 0 24rpx;
|
||||
|
||||
/* 币种区域样式 */
|
||||
.coin-section {
|
||||
@ -957,22 +944,104 @@
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
padding: 8rpx 0;
|
||||
margin-top: -24rpx;
|
||||
position: relative;
|
||||
|
||||
.tag-icon {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
margin-top: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
margin-top: -20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
margin-bottom: 26rpx;
|
||||
margin-bottom: 8rpx;
|
||||
margin-left: 150rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-right: 12rpx;
|
||||
margin-top: -24rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 48rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
line-height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 48rpx;
|
||||
padding-bottom: 8rpx;
|
||||
margin-bottom: -8rpx;
|
||||
transform: translateY(8rpx);
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
.trend-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20rpx;
|
||||
color: #606060;
|
||||
line-height: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.trend-item {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
|
||||
.trend-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 56rpx;
|
||||
}
|
||||
|
||||
.trend-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: #52C41A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unauth-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
.tip-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
line-height: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -988,27 +1057,31 @@
|
||||
/* 品牌内容容器 */
|
||||
.brand-content {
|
||||
height: 100%;
|
||||
padding: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* 品牌标题区域 */
|
||||
.brand-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
align-items: flex-start;
|
||||
padding: 8rpx;
|
||||
|
||||
.brand-logo {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
margin-top: 12rpx;
|
||||
// margin-left: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1016,18 +1089,23 @@
|
||||
.amount-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
justify-content: flex-end;
|
||||
padding-right: 12rpx;
|
||||
margin-bottom: 8rpx;
|
||||
margin-top: -24rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 48rpx;
|
||||
color: #1A1A1A;
|
||||
font-weight: 600;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
color: #FFD700;
|
||||
font-size: 30rpx;
|
||||
margin-left: 10rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1035,6 +1113,10 @@
|
||||
.desc {
|
||||
font-size: 20rpx;
|
||||
color: #606060;
|
||||
text-align: right;
|
||||
line-height: 28rpx;
|
||||
padding-right: 20rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
/* 空数据状态样式 */
|
||||
@ -1043,6 +1125,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 40rpx;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user