charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 首页改版

Browse Source
This commit is contained in:
charles
2026-08-25 17:52:05 +08:00
parent d65083aa51
commit d5253e3202
15 changed files with 1014 additions and 644 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/home.vue
+277 -132
View File
@@ -1,78 +1,86 @@
<template>
<view class="home_warp" :class="platformType ? '' : 'iosplatformType'">
<!-- 带背景的头部 -->
<view class="home_content_z_warp">
<view class="home_header_warp" :style="mpHeaderWarpStyle">
<view class="header_title_warp" :style="mpHeaderStyle">
<view class="language_warp" style="flex: 1; justify-content: flex-start;" @click="jumpSearch">
<view :style="isMP ? 'display: flex; align-items: center;margin-top: 10rpx;' : 'margin-top: 10rpx;'">
<up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20"
bgColor="#f1f6ff00"></up-image>
</view>
<text class="search_msg_warp" :style="isMP ? 'line-height: 1;' : ''">搜索</text>
</view>
<view class="message-entry" @click.stop="jumpNewSearch('list')">
<image src="https://static.tbmall.xin/static/chart.png" class="chart_img"></image>
<text v-if="kefuUnreadCount > 0" class="message-entry-badge">{{ formatKefuBadge(kefuUnreadCount) }}</text>
</view>
</view>
<view class="logo_banner">
<view style="padding: 20rpx 0 0 20rpx">
<up-image src="https://static.tbmall.xin/static/home/logo_banner.png" width="108" height="16"
bgColor="#f1f6ff00"></up-image>
<view class="logo_banner_title">TB聚合商城</view>
<view class="logo_banner_msg">全民共创共享的电商平台</view>
</view>
<up-image src="https://static.tbmall.xin/static/logo_banner2.png" width="140" height="98"
<view class="home_warp" :class="platformType ? '' : 'iosplatformType'" @scroll="onScroll">
<!-- 变色搜索栏 -->
<view class="header_title_warp" :class="{ 'is-scrolled': isScrolled }" :style="mpHeaderStyle">
<view class="language_warp" style="flex: 1; justify-content: flex-start;" @click.stop="jumpSearch">
<view :style="isMP ? 'display: flex; align-items: center;margin-top: 0;' : 'margin-top: 0;'">
<up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20"
bgColor="#f1f6ff00"></up-image>
</view>
<text class="search_msg_warp" :style="isMP ? 'line-height: 1;' : ''">搜索</text>
</view>
<view class="message-entry" @click.stop="jumpNewSearch('list')">
<image src="https://static.tbmall.xin/static/chart.png" class="chart_img"></image>
<text v-if="kefuUnreadCount > 0" class="message-entry-badge">{{ formatKefuBadge(kefuUnreadCount) }}</text>
</view>
</view>
<!-- 分类 -->
<view class="home_sort_warp">
<view class="sort_comm_warp" v-if="sortList && sortList.length !== 0 && isBlockedDate">
<view v-for="item in sortList" :key="item.id" class="sort_item_comm" @click="jumpSort(item)">
<up-image :src="item.icon" width="50" height="36" bgColor="#f1f6ff00"></up-image>
<view class="sort_item_title_comm">{{ item.name }}</view>
</view>
</view>
<view v-else class="not_order_warp">
<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">暂无分类</view>
<!-- 页面内容容器 -->
<view class="home_content_z_warp">
<!-- 轮播 Banner 区域 (整个紫色区域包含文案背景均为 Banner 图，延伸至头部安全区) -->
<view class="home_header_warp">
<view class="banner_swiper_container" v-if="swiperList && swiperList.length > 0">
<up-swiper :list="swiperList" height="480rpx" radius="0" @change="e => currentNum = e.current"
bgColor="#ffffff00" @click="onSwiper">
<template #indicator>
<view class="indicator-dots" v-if="swiperList.length > 1">
<view v-for="(item, index) in swiperList.length" :key="index" class="indicator-dot"
:class="{ active: currentNum === index }"></view>
</view>
</template>
</up-swiper>
</view>
<view v-else class="banner_placeholder">
<up-swiper :list="['https://static.tbmall.xin/static/logo_banner2.png']" height="230" radius="0"
bgColor="#ffffff00"></up-swiper>
</view>
</view>
<!-- 分类（覆盖在Banner上） -->
<view class="home_sort_warp">
<view class="sort_comm_warp" v-if="sortList && sortList.length !== 0 && isBlockedDate">
<view v-for="item in sortList" :key="item.id" class="sort_item_comm" @click.stop="jumpSort(item)">
<up-image :src="item.icon" width="100rpx" height="72rpx" bgColor="#f1f6ff00"></up-image>
<view class="sort_item_title_comm">{{ item.name }}</view>
</view>
</view>
<view v-else class="not_order_warp">
<up-image src="https://static.tbmall.xin/static/not_order.png" width="80" height="80"
bgColor="#f1f6ff00"></up-image>
<view class="not_order_msg_warp">暂无分类</view>
</view>
</view>
<!-- 爆款专区-->
<view class="home_content_warp Hot_Picks_Zone" v-if="faddishProduct && faddishProduct.length !== 0"
@click="onJumpYou">
<view class="product_comm_yp">
<view class="yp_title">
<view class="yp_title_left">
<text class="yp_title_main">信任桥优品</text>
<up-image src="https://static.tbmall.xin/static/home/youxuan.png" width="14" height="14"
bgColor="#f1f6ff00"></up-image>
<text class="yp_title_sub" style="margin-left: 8rpx">品牌五折秒杀福利</text>
</view>
<view class="yp_title_right">
<text>立即抢购</text>
<view class="yp_arrow_circle">
<view class="yp_arrow_chevron"></view>
</view>
<!-- 爆款专区-->
<view class="home_content_warp Hot_Picks_Zone" v-if="faddishProduct && faddishProduct.length !== 0"
@click="onJumpYou">
<view class="product_comm_yp">
<view class="yp_title">
<view class="yp_title_left">
<text class="yp_title_main">信任桥优品</text>
<up-image src="https://static.tbmall.xin/static/home/youxuan.png" width="14" height="14"
bgColor="#f1f6ff00"></up-image>
<text class="yp_title_sub" style="margin-left: 8rpx">品牌五折秒杀福利</text>
</view>
<view class="yp_title_right">
<text>立即抢购</text>
<view class="yp_arrow_circle">
<view class="yp_arrow_chevron"></view>
</view>
</view>
<view class="yp_content">
<!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
<view class="yp_item" v-for="item in faddishProduct" :key="item.id" @click.stop="jumpInfo(item)">
<view class="yp_item_image_wrapper">
<image :src="item.url" mode="aspectFill" lazy-load class="yp_item_image" shape="square" radius="15">
</image>
<!-- <up-image :src="item.url" width="100%" height="88" bgColor="#f1f6ff00" shape="square"
</view>
<view class="yp_content">
<!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
<view class="yp_item" v-for="item in faddishProduct" :key="item.id" @click.stop="jumpInfo(item)">
<view class="yp_item_image_wrapper">
<image :src="item.url" mode="aspectFill" lazy-load class="yp_item_image" shape="square" radius="15">
</image>
<!-- <up-image :src="item.url" width="100%" height="88" bgColor="#f1f6ff00" shape="square"
radius="15"></up-image> -->
</view>
<view class="yp_item_info">
<view class="yp_item_name">{{ item.title }}</view>
<view class="yp_item_price_tag">优选价{{ item.price }}元</view>
</view>
</view>
<view class="yp_item_info">
<view class="yp_item_name">{{ item.title }}</view>
<view class="yp_item_price_tag">优选价{{ item.price }}元</view>
</view>
</view>
</view>
@@ -226,8 +234,8 @@ import {
getSeckillGoodsList,
getGoodsTags,
} from "@/api/product.js";
import { checkAppVersion } from "@/api/common.js";
import { SEARCH_TYPE, SORT_TYPE } from "@/utils/enumUtils.js";
import { checkAppVersion, getCarouselImage } from "@/api/common.js";
import { SEARCH_TYPE, SORT_TYPE, APP_PAGE_TYPE } from "@/utils/enumUtils.js";
import CustomTabBar from "@/components/custom-tab-bar.vue"; // 引入自定义组件路径可能需要根据项目结构调整
import dayjs from "dayjs";
import useTabber from "tabber-component";
@@ -252,6 +260,7 @@ export default {
},
data() {
return {
swiperList: [],
currentNum: 0,
sortList: [],
faddishProduct: [], // 爆款专区
@@ -297,8 +306,15 @@ export default {
mpLanguageStyle: {},
kefuUnreadCount: 0,
kefuUnreadRefreshTimer: null,
isScrolled: false,
scrollTop: 0,
};
},
onPageScroll(e) {
const top = e ? (e.scrollTop || 0) : 0;
this.scrollTop = top;
this.isScrolled = top > 10;
},
onShow() {
this.refreshKefuUnread();
startKefuRealtime();
@@ -324,6 +340,8 @@ export default {
this.getSortList();
this.querySearchList(SEARCH_TYPE.EXPLOSIVE); // 爆单专区
this.onNews(); // 获取公告
this.getCarouselImage();
// 秒杀
this.onGetSeckillCurrent();
@@ -363,6 +381,34 @@ export default {
},
mounted() { },
methods: {
onScroll(e) {
const top = e.detail ? e.detail.scrollTop : (e.target ? e.target.scrollTop : 0);
this.scrollTop = top;
this.isScrolled = top > 10;
},
// 查询轮播图
async getCarouselImage() {
const params = {
pageUi: APP_PAGE_TYPE.HOME,
};
const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) {
const data = resp.data || [];
this.swiperDataList = data;
this.swiperList =
data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
}
},
onSwiper(index) {
console.log("--1---", this.swiperDataList[index])
const id = this.swiperDataList[index]?.goodsUrl;
if (!id) return;
uni.navigateTo({
url: `/pages/other_package/productInfo/productInfo?id=${id}`,
});
},
formatKefuBadge(value) {
return Number(value) > 99 ? "99+" : String(Number(value) || 0);
},
@@ -806,50 +852,65 @@ export default {
<style lang="scss" scoped>
.home_warp {
background: #f4f4f4;
height: calc(100vh - env(safe-area-inset-bottom)); // 是底部的导航栏高度
overflow-y: auto;
overflow-x: hidden;
background: #fff;
min-height: 100vh;
position: relative;
box-sizing: border-box;
&.iosplatformType {
height: 100vh;
min-height: 100vh;
}
}
.home_header_warp {
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
height: auto;
padding: calc(var(--status-bar-height) + 80rpx) 30rpx 30rpx;
position: relative;
width: 100%;
padding: 0;
margin: 0;
background: transparent;
overflow: hidden;
.banner_swiper_container,
.banner_placeholder {
width: 100%;
position: relative;
}
}
.home_content_z_warp {
position: absolute;
/* 顶部固定/变色搜索栏 */
.header_title_warp {
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
right: 0;
z-index: 999;
background: transparent;
padding: calc(var(--status-bar-height) + 12rpx) 24rpx 16rpx;
box-sizing: border-box;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
.header_title_warp {
display: flex;
align-items: center;
margin-bottom: 30rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
padding: calc(var(--status-bar-height) + 20rpx) 30rpx 20rpx;
box-sizing: border-box;
&.is-scrolled {
background: #ffffff !important;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 4px;
//background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
pointer-events: none;
.language_warp {
background: #f4f5f8;
border: 1rpx solid #e8e8e8;
.search_msg_warp {
color: #888888;
}
::v-deep .up-image,
.up-image {
filter: brightness(0.3);
}
}
.chart_img {
filter: brightness(0.2);
}
}
@@ -860,20 +921,24 @@ export default {
}
.language_warp {
flex: 1;
display: flex;
justify-content: space-between;
justify-content: flex-start;
align-items: center;
width: 100rpx;
padding: 10rpx 20rpx;
background: #ffffff30;
border-radius: 24rpx;
// background: linear-gradient(270deg, #ae39c5, #7932fe);
height: 68rpx;
padding: 0 24rpx;
background: rgba(255, 255, 255, 0.35);
border: 1rpx solid rgba(255, 255, 255, 0.4);
border-radius: 34rpx;
box-sizing: border-box;
transition: all 0.3s ease;
}
.chart_img {
width: 50rpx;
height: 50rpx;
display: block;
transition: filter 0.3s ease;
}
.message-entry {
@@ -893,8 +958,8 @@ export default {
right: -8rpx;
min-width: 30rpx;
height: 30rpx;
padding: 0 7rpx;
border: 3rpx solid #8f3be9;
// padding: 0 7rpx;
// border: 3rpx solid #8f3be9;
border-radius: 18rpx;
background: #f04438;
color: #fff;
@@ -909,52 +974,131 @@ export default {
margin-left: 12rpx;
font-weight: 500;
font-size: 28rpx;
color: #ffffffb3;
color: rgba(255, 255, 255, 0.95);
transition: color 0.3s ease;
}
}
.home_content_z_warp {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.logo_banner {
display: flex;
justify-content: space-between;
// padding: 0 30rpx;
align-items: center;
color: #ffffff;
margin-top: 50rpx;
margin-top: 20rpx;
padding: 0 10rpx;
.logo_banner_left {
display: flex;
flex-direction: column;
}
.logo_banner_title {
font-weight: bold;
font-size: 38rpx;
line-height: 36rpx;
margin: 20rpx 0;
font-size: 40rpx;
line-height: 46rpx;
margin: 16rpx 0 10rpx;
color: #ffffff;
letter-spacing: 1rpx;
}
.logo_banner_msg {
font-size: 22rpx;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.5rpx;
}
.logo_banner_right {
flex-shrink: 0;
}
}
::v-deep .u-swiper__indicator {
position: absolute;
bottom: 105rpx !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
display: flex !important;
justify-content: center !important;
z-index: 15;
}
.indicator-dots,
.indicator-dots-static {
display: flex;
justify-content: center;
align-items: center;
gap: 10rpx;
.indicator-dot {
width: 16rpx;
height: 8rpx;
border-radius: 4rpx;
background: rgba(255, 255, 255, 0.45);
transition: all 0.3s ease;
&.active {
width: 28rpx;
height: 8rpx;
border-radius: 4rpx;
background: #ffffff;
}
}
}
.home_sort_warp {
// position: absolute;
top: 460rpx;
width: 100%;
position: relative;
z-index: 10;
margin: -60rpx 30rpx 0;
.sort_warp {
.sort_comm_warp {
background: #ffffff;
padding: 20rpx;
border-radius: 20rpx;
padding: 30rpx 16rpx 24rpx;
border-radius: 28rpx;
box-shadow: 0 8rpx 24rpx rgba(118, 50, 255, 0.08);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: space-around;
align-items: center;
.sort_item {
width: 18%;
text-align: center;
margin-bottom: 20rpx;
.sort_item_comm {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
.sort_item_title_comm {
font-weight: 500;
font-size: 24rpx;
color: #333333;
margin-top: 10rpx;
white-space: nowrap;
text-align: center;
}
}
}
.sort_item_title {
font-weight: 500;
font-size: 22rpx;
color: #333333;
.not_order_warp {
background: #ffffff;
padding: 30rpx;
border-radius: 28rpx;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 8rpx 24rpx rgba(118, 50, 255, 0.08);
.not_order_msg_warp {
font-size: 24rpx;
color: #999999;
margin-top: 12rpx;
}
}
}
@@ -963,10 +1107,11 @@ export default {
padding-bottom: 100rpx;
&.Hot_Picks_Zone {
width: 100%;
width: calc(100% - 60rpx);
margin: 0 30rpx 100rpx;
box-sizing: border-box;
height: auto;
background: linear-gradient(344deg, #ffffff 0%, #ede3ff 100%);
background: #fff;
border-radius: 28rpx;
border: 1rpx solid #dfdfdf;
padding: 24rpx 20rpx 20rpx;