davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化我的页面扫码统计卡片 1.调整标题和图标位置 2.优化数字和单位布局 3.调整同比增长文字位置

Browse Source
This commit is contained in:
davy 2025-04-08 14:58:08 +08:00
parent c0ebcb2654
commit c809b1e0cd
1 changed files with 202 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
pages/index/my.vue
View File

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