15133400227
/
baimacms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
1173117610@qq.com 2026-05-09 15:31:17 +08:00
parent 7fc89d2b10
commit 1a9e57c88f
1 changed files with 175 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
pages/index/index.vue
View File

@ -36,8 +36,8 @@
<swiper class="notice-swiper" vertical circular autoplay interval="3000">
<swiper-item v-for="(item, idx) in noticeList" :key="idx">
<view class="notice-item">
<image class="notice-avatar" :src="item.avatar"></image>
<text class="notice-text">{{ item.text }}</text>
<image class="notice-avatar" :src="item.img"></image>
<text class="notice-text">{{ item.msg }}</text>
</view>
</swiper-item>
</swiper>
@ -94,17 +94,17 @@
</view>
<swiper class="worth-swiper" :indicator-dots="true" indicator-active-color="#ff416c">
<swiper-item v-for="(p, pIdx) in 1" :key="pIdx">
<view class="worth-goods-item" v-for="(item, index) in worthBuyGoods" :key="index">
<swiper-item v-for="(chunk, cIdx) in worthBuyChunks" :key="cIdx">
<view class="worth-goods-item" v-for="(item, idx) in chunk" :key="idx">
<image class="worth-goods-img" :src="item.img" mode="aspectFill"></image>
<view class="worth-goods-info">
<view class="worth-goods-title">
<text class="tag-tmall">天猫</text>
<text :class="item.shopType === '天猫' ? 'tag-tmall' : 'tag-taobao'">{{ item.shopType }}</text>
{{ item.title }}
</view>
<view class="worth-goods-labels">
<text class="worth-label red">{{ item.label1 }}</text>
<text class="worth-label orange">{{ item.label2 }}</text>
<text class="worth-label orange" v-if="item.label2">{{ item.label2 }}</text>
</view>
<view class="worth-price-row">
<view class="worth-price-left">
@ -116,7 +116,7 @@
<view class="worth-coupon-tag">券 {{ item.coupon }}元</view>
</view>
<view class="worth-buy-btn-group">
<view class="worth-btn-left">今日已抢 {{ item.sold }} 件</view>
<view class="worth-btn-left">今日已抢 {{ item.todaySale }} 件</view>
<view class="worth-btn-right">马上抢 ></view>
</view>
</view>
@ -216,7 +216,7 @@
</view>
<view class="goods-info">
<view class="goods-title">
<text class="tag-tmall">天猫</text>
<text :class="goods.shopType === '天猫' ? 'tag-tmall' : 'tag-taobao'">{{ goods.shopType }}</text>
<text class="title-text">{{ goods.title }}</text>
</view>
<view class="goods-lowest-price" v-if="goods.lowestTag">{{ goods.lowestTag }}</view>
@ -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;