diff --git a/pages/index/index.vue b/pages/index/index.vue
index 8aedb9d..3111da3 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -36,8 +36,8 @@
-
- {{ item.text }}
+
+ {{ item.msg }}
@@ -94,17 +94,17 @@
-
-
+
+
- 天猫
+ {{ item.shopType }}
{{ item.title }}
{{ item.label1 }}
- {{ item.label2 }}
+ {{ item.label2 }}
@@ -116,7 +116,7 @@
券 {{ item.coupon }}元
- 今日已抢 {{ item.sold }} 件
+ 今日已抢 {{ item.todaySale }} 件
马上抢 >
@@ -216,7 +216,7 @@
- 天猫
+ {{ goods.shopType }}
{{ goods.title }}
{{ goods.lowestTag }}
@@ -256,37 +256,17 @@
{ name: '每日半价', icon: 'https://cdn-icons-png.flaticon.com/512/879/879854.png' }
],
noticeList: [
- { avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&q=80', text: '用户180****9287在6分钟前下单成功' },
- { avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80', text: '用户135****6621在1分钟前下单成功' },
- { avatar: 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&q=80', text: '用户130****5746在刚刚下单成功' }
+ // 初始兜底数据
+ { img: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&q=80', msg: '正在获取最新订单信息...' }
],
adList: [
'https://images.unsplash.com/photo-1607083206968-13611e3d76db?w=800&q=80',
'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80'
],
- worthTabActive: 2,
- worthBuyGoods: [
- {
- img: 'https://images.unsplash.com/photo-1595113316349-9fa4ee24f884?w=400&q=80',
- title: '雨森桉木浆卷纸18卷4斤加厚...',
- label1: '满21减5',
- label2: '爆款',
- price: '16.93',
- oldPrice: '21.93',
- coupon: 5,
- sold: 0
- },
- {
- img: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?w=400&q=80',
- title: '【超值380g约55-60个】豪士...',
- label1: '今日热卖前十',
- label2: '',
- price: '12.8',
- oldPrice: '24.8',
- coupon: 12,
- sold: 3745
- }
- ],
+ worthTabActive: 0,
+ deserveList: [],
+ nineList: [],
+ nineteenList: [],
recommendData: {
left: { title: '今日必抢', sub: '爆款直降', img: 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&q=80' },
topRight: { title: '百亿补贴', sub: '大牌正品', img: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&q=80' },
@@ -331,30 +311,125 @@
}
],
platformActive: 0,
- goodsList: [
- {
- image: 'https://img.alicdn.com/imgextra/i3/2278533591/O1CN01h1F0Y11cOjO88KGKn_!!2278533591.png_310x310',
- brandTag: 'Colorkey/珂拉琪',
- title: '任选3件! 珂拉琪官旗唇釉合集',
- lowestTag: '48天最低价',
- sales: '70.0万',
- couponValue: 63,
- finalPrice: '49.2'
- },
- {
- image: 'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777010018610_784070_310',
- brandTag: '薇诺娜',
- bottomTag: '品牌直发 正品保障 假一赔十',
- title: '薇诺娜保湿修护精华爽肤水120ml',
- lowestTag: '13天最低价',
- sales: '1.0万',
- couponValue: 40,
- finalPrice: '45'
- }
- ]
+ goodsList: []
+ }
+ },
+ onLoad() {
+ this.getNoticeList();
+ this.getGoodsList();
+ this.getWorthBuyLists();
+ this.getBrandSaleList();
+ },
+ computed: {
+ worthBuyGoods() {
+ if (this.worthTabActive === 0) return this.deserveList;
+ if (this.worthTabActive === 1) return this.nineList;
+ if (this.worthTabActive === 2) return this.nineteenList;
+ return [];
+ },
+ // 将商品按 2 个一组进行切分
+ worthBuyChunks() {
+ let chunks = [];
+ for (let i = 0; i < this.worthBuyGoods.length; i += 2) {
+ chunks.push(this.worthBuyGoods.slice(i, i + 2));
+ }
+ return chunks;
}
},
methods: {
+ getNoticeList() {
+ uni.request({
+ url: 'https://api.cmspro.haodanku.com/msg/getMsgs?cid=qOstW90',
+ success: (res) => {
+ if (res.data && res.data.code === 200) {
+ this.noticeList = res.data.data.msgs;
+ }
+ }
+ });
+ },
+ getGoodsList() {
+ uni.request({
+ url: 'https://api.cmspro.haodanku.com/recommend/getRecommend?page_size=200&page=1&type=2&cid=qOstW90',
+ success: (res) => {
+ if (res.data && res.data.code === 200) {
+ const list = res.data.data.recommends.map(item => {
+ // 格式化销量
+ let salesStr = item.itemsale;
+ if (item.itemsale >= 10000) {
+ salesStr = (item.itemsale / 10000).toFixed(1) + '万';
+ }
+
+ return {
+ image: item.itempic,
+ title: item.itemshorttitle,
+ finalPrice: item.itemendprice,
+ couponValue: item.couponmoney,
+ sales: salesStr,
+ brandTag: item.brand_name,
+ lowestTag: item.label && item.label.length > 0 ? item.label[0] : '',
+ shopType: item.shoptype === 'B' ? '天猫' : '淘宝'
+ };
+ });
+ this.goodsList = list;
+ }
+ }
+ });
+ },
+ getWorthBuyLists() {
+ uni.request({
+ url: 'https://api.cmspro.haodanku.com/index/deserveLists?cid=qOstW90',
+ success: (res) => {
+ if (res.data && res.data.code === 200) {
+ const formatData = (list) => {
+ return list.map(item => ({
+ img: item.itempic,
+ title: item.itemshorttitle,
+ label1: item.label && item.label[0] ? item.label[0] : '',
+ label2: item.label && item.label[1] ? item.label[1] : '',
+ price: item.itemendprice,
+ oldPrice: item.itemprice,
+ coupon: item.couponmoney,
+ todaySale: item.todaysale >= 10000 ? (item.todaysale / 10000).toFixed(1) + '万' : item.todaysale,
+ sold: item.itemsale >= 10000 ? (item.itemsale / 10000).toFixed(1) + '万' : item.itemsale,
+ shopType: item.shoptype === 'B' ? '天猫' : '淘宝'
+ }));
+ };
+ this.deserveList = formatData(res.data.data.deserve_lists);
+ this.nineList = formatData(res.data.data.nine_lists);
+ this.nineteenList = formatData(res.data.data.nineteen_lists);
+ }
+ }
+ });
+ },
+ getBrandSaleList() {
+ uni.request({
+ url: 'https://api.cmspro.haodanku.com/brandItem/choiceness?cid=qOstW90',
+ success: (res) => {
+ if (res.data && res.data.code === 200 && res.data.data.deserve_lists.length > 0) {
+ const firstItem = res.data.data.deserve_lists[0];
+ const act = firstItem.activity_info || {};
+
+ // 映射主推位信息
+ this.brandFeature = {
+ bg: act.long_img || 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80',
+ logo: act.top_icon || firstItem.itempic,
+ name: act.name || firstItem.shopname,
+ desc: act.guide_article || '官方直降 爆款秒杀'
+ };
+
+ // 映射下方商品 (取前3个)
+ this.brandGoods = res.data.data.deserve_lists.slice(0, 3).map(item => ({
+ img: item.itempic,
+ title: item.itemshorttitle,
+ sold: item.itemsale >= 10000 ? (item.itemsale / 10000).toFixed(1) + '万' : item.itemsale,
+ promo: item.activity_info ? item.activity_info.guide_article : '官方立减',
+ price: item.itemendprice,
+ coupon: item.couponmoney
+ }));
+ }
+ }
+ });
+ },
switchTab(index) {
this.currentTab = index;
}
@@ -372,7 +447,7 @@
/* 头部区域 */
.header {
- background: linear-gradient(to right, #ff4b2b, #ff416c);
+ background: #ffffff;
padding-top: var(--status-bar-height, 44px); /* 适配状态栏 */
padding-bottom: 10rpx;
z-index: 100;
@@ -446,14 +521,14 @@
}
.nav-text {
- font-size: 28rpx;
- color: rgba(255, 255, 255, 0.8);
+ font-size: 30rpx;
+ color: #333;
transition: all 0.3s;
}
.nav-item.active .nav-text {
- color: #ffffff;
- font-size: 32rpx;
+ color: #ff416c;
+ font-size: 34rpx;
font-weight: bold;
}
@@ -464,7 +539,7 @@
transform: translateX(-50%);
width: 40rpx;
height: 6rpx;
- background-color: #ffffff;
+ background-color: #ff416c;
border-radius: 6rpx;
}
@@ -476,14 +551,14 @@
/* 轮播图 */
.banner-box {
- padding: 20rpx 30rpx;
+ padding: 20rpx 30rpx 10rpx;
}
.swiper {
- height: 280rpx;
- border-radius: 20rpx;
+ height: 320rpx;
+ border-radius: 24rpx;
overflow: hidden;
- box-shadow: 0 10rpx 20rpx rgba(255, 65, 108, 0.2);
+ box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}
.banner-img {
@@ -491,9 +566,23 @@
height: 100%;
}
+ /* 修改主轮播指示器 */
+ .swiper :deep(.uni-swiper-dot) {
+ width: 12rpx;
+ height: 12rpx;
+ background: rgba(255, 255, 255, 0.8) !important;
+ }
+
+ .swiper :deep(.uni-swiper-dot-active) {
+ width: 30rpx;
+ height: 12rpx;
+ border-radius: 6rpx;
+ background: #ff416c !important;
+ }
+
/* 垂直通知栏 */
.notice-bar {
- margin: 0 30rpx 20rpx;
+ margin: 0 30rpx 16rpx;
background-color: #fff0f3;
height: 64rpx;
border-radius: 32rpx;
@@ -545,7 +634,7 @@
flex-wrap: wrap;
padding: 10rpx 20rpx;
background: #ffffff;
- margin: 0 30rpx 20rpx;
+ margin: 0 30rpx 16rpx;
border-radius: 20rpx;
}
@@ -575,7 +664,7 @@
/* 活动专区 - 胶囊轮播图 */
.ad-swiper-box {
- margin: 0 30rpx 30rpx;
+ margin: 0 30rpx 16rpx;
}
.ad-swiper {
@@ -608,9 +697,9 @@
/* 今日值得买 (1:1 还原) */
.worth-buy-card {
background-color: #ffffff;
- margin: 0 30rpx 20rpx;
+ margin: 0 30rpx 16rpx;
border-radius: 24rpx;
- padding: 24rpx;
+ padding: 24rpx 24rpx 10rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.03);
}
@@ -723,7 +812,11 @@
}
.worth-swiper {
- height: 840rpx; /* 两项高度加上指示点 */
+ height: 700rpx; /* 进一步压缩高度，消除底部留白 */
+ }
+
+ .worth-swiper :deep(.uni-swiper-dots) {
+ bottom: 0rpx !important; /* 使指示点更贴近底部 */
}
.worth-goods-item {
@@ -987,10 +1080,10 @@
/* 品牌特卖区 (1:1 还原) */
.brand-sale-module {
- margin: 0 30rpx 20rpx;
+ margin: 0 30rpx 16rpx;
background: #ffffff;
border-radius: 24rpx;
- padding: 24rpx;
+ padding: 24rpx 24rpx 10rpx;
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.03);
}
@@ -1337,8 +1430,7 @@
margin-bottom: 12rpx;
}
- .tag-tmall {
- background-color: #ff0036;
+ .tag-tmall, .tag-taobao {
color: #fff;
font-size: 20rpx;
padding: 2rpx 8rpx;
@@ -1348,6 +1440,14 @@
vertical-align: middle;
}
+ .tag-tmall {
+ background-color: #ff0036;
+ }
+
+ .tag-taobao {
+ background-color: #ff5000;
+ }
+
.goods-lowest-tag {
display: inline-block;
border: 1rpx solid #ff416c;