From 1a9e57c88f54217de21c4dee06078246350dd2c3 Mon Sep 17 00:00:00 2001 From: "1173117610@qq.com" Date: Sat, 9 May 2026 15:31:17 +0800 Subject: [PATCH] 1 --- pages/index/index.vue | 250 +++++++++++++++++++++++++++++------------- 1 file changed, 175 insertions(+), 75 deletions(-) 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;