This commit is contained in:
1173117610@qq.com
parent
ac43edd9d5
commit
eb7103fe4f
12
pages.json
12
pages.json
|
|
@ -1,9 +1,15 @@
|
||||||
{
|
{
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "uni-app"
|
"navigationBarTitleText": "首页"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/detail/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -14,4 +20,4 @@
|
||||||
"backgroundColor": "#F8F8F8"
|
"backgroundColor": "#F8F8F8"
|
||||||
},
|
},
|
||||||
"uniIdRouter": {}
|
"uniIdRouter": {}
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,620 @@
|
||||||
|
<template>
|
||||||
|
<view class="detail-container">
|
||||||
|
<!-- 悬浮返回按钮 -->
|
||||||
|
<view class="back-btn" :style="{ top: statusBarHeight + 'px' }" @click="goBack">
|
||||||
|
<text class="back-icon">〈</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="scroll-content" :show-scrollbar="false">
|
||||||
|
<!-- 主图轮播 -->
|
||||||
|
<view class="swiper-box">
|
||||||
|
<swiper class="main-swiper" circular @change="swiperChange">
|
||||||
|
<swiper-item v-for="(img, index) in product.images" :key="index">
|
||||||
|
<image :src="img" mode="aspectFill" class="swiper-img"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<view class="swiper-indicator">{{ currentSwiper + 1 }}/{{ product.images.length }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 热销榜单提示 -->
|
||||||
|
<view class="hot-sale-bar">
|
||||||
|
<view class="hot-left">
|
||||||
|
<text class="trophy-icon">🏆</text>
|
||||||
|
<text class="hot-text">实时热销榜第{{ product.rank }}名</text>
|
||||||
|
</view>
|
||||||
|
<view class="hot-right">
|
||||||
|
<text>今日已有{{ product.todaySale }}人下单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 价格与标题区 -->
|
||||||
|
<view class="info-section">
|
||||||
|
<view class="price-row">
|
||||||
|
<view class="price-left">
|
||||||
|
<text class="price-symbol">券后￥</text>
|
||||||
|
<text class="price-integer">{{ product.price.split('.')[0] }}</text>
|
||||||
|
<text class="price-decimal">.{{ product.price.split('.')[1] || '00' }}</text>
|
||||||
|
<text class="old-price">￥{{ product.oldPrice }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="sales-count">已售 {{ product.totalSale }} 件</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="title-row">
|
||||||
|
<text class="platform-tag">{{ product.platform }}</text>
|
||||||
|
<text class="product-title">{{ product.title }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="label-row">
|
||||||
|
<text class="label-item">{{ product.timeTag }}</text>
|
||||||
|
<text class="label-item">{{ product.couponVal }}元</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 优惠券模块 (1:1 还原) -->
|
||||||
|
<view class="coupon-section">
|
||||||
|
<view class="coupon-card">
|
||||||
|
<view class="coupon-left">
|
||||||
|
<view class="coupon-amount">
|
||||||
|
<text class="amount-val">{{ product.couponVal }}</text>
|
||||||
|
<text class="amount-unit">元优惠券</text>
|
||||||
|
</view>
|
||||||
|
<view class="coupon-time">使用期限: {{ product.couponTime }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupon-right">
|
||||||
|
<view class="get-btn">立即领券</view>
|
||||||
|
</view>
|
||||||
|
<view class="coupon-circle top"></view>
|
||||||
|
<view class="coupon-circle bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 店铺评分 -->
|
||||||
|
<view class="shop-section">
|
||||||
|
<view class="shop-header">
|
||||||
|
<view class="shop-info">
|
||||||
|
<image :src="product.shopLogo" class="shop-logo"></image>
|
||||||
|
<text class="shop-name">{{ product.shopName }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="shop-entry">进店逛逛 ></text>
|
||||||
|
</view>
|
||||||
|
<view class="score-row">
|
||||||
|
<view class="score-item">宝贝描述 <text class="score-val">{{ product.scores.desc }}</text> <text class="score-up">↑</text></view>
|
||||||
|
<view class="score-item">卖家服务 <text class="score-val">{{ product.scores.service }}</text> <text class="score-up">↑</text></view>
|
||||||
|
<view class="score-item">物流服务 <text class="score-val">{{ product.scores.post }}</text> <text class="score-up">↑</text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 图文详情 -->
|
||||||
|
<view class="detail-images">
|
||||||
|
<view class="detail-title">商品详情</view>
|
||||||
|
<image v-for="(img, index) in product.detailImages" :key="index" :src="img" mode="widthFix" class="detail-img"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部留白 -->
|
||||||
|
<view class="footer-placeholder"></view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部固定操作栏 -->
|
||||||
|
<view class="bottom-bar">
|
||||||
|
<view class="bar-left">
|
||||||
|
<view class="bar-btn" @click="goHome">
|
||||||
|
<text class="bar-icon">🏠</text>
|
||||||
|
<text class="bar-text">首页</text>
|
||||||
|
</view>
|
||||||
|
<view class="bar-btn">
|
||||||
|
<text class="bar-icon">📤</text>
|
||||||
|
<text class="bar-text">分享</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bar-right">
|
||||||
|
<view class="copy-btn">复制口令购买</view>
|
||||||
|
<view class="buy-btn">领券购买</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusBarHeight: 44,
|
||||||
|
currentSwiper: 0,
|
||||||
|
product: {
|
||||||
|
id: '',
|
||||||
|
images: [
|
||||||
|
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
|
||||||
|
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
|
||||||
|
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
|
||||||
|
],
|
||||||
|
rank: 59,
|
||||||
|
todaySale: 1576,
|
||||||
|
price: '19.8',
|
||||||
|
oldPrice: '119.8',
|
||||||
|
totalSale: '1.0万',
|
||||||
|
platform: '天猫',
|
||||||
|
title: '【活动专享】润本植物精油贴儿童宝宝学生成人户外专用随身贴纸',
|
||||||
|
timeTag: '9天最低价',
|
||||||
|
couponVal: 100,
|
||||||
|
couponTime: '2026.05.09-2026.05.11',
|
||||||
|
shopName: '润本旗舰店',
|
||||||
|
shopLogo: 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
|
||||||
|
scores: {
|
||||||
|
desc: '4.7',
|
||||||
|
service: '4.8',
|
||||||
|
post: '4.8'
|
||||||
|
},
|
||||||
|
detailImages: [
|
||||||
|
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310',
|
||||||
|
'http://img-haodanku-com.cdn.fudaiapp.com/fd_1777258938037_429899_310'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.product.id = options.id || '55493973';
|
||||||
|
const sysInfo = uni.getSystemInfoSync();
|
||||||
|
this.statusBarHeight = sysInfo.statusBarHeight || 44;
|
||||||
|
this.getDetailData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getDetailData() {
|
||||||
|
uni.request({
|
||||||
|
url: `https://api.cmspro.haodanku.com/detail/itemInfo?id=${this.product.id}&cid=qOstW90`,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.data && res.data.code === 200) {
|
||||||
|
const d = res.data.data;
|
||||||
|
console.log('详情数据获取成功:', d);
|
||||||
|
|
||||||
|
// 格式化销量
|
||||||
|
let salesStr = d.itemsale;
|
||||||
|
if (d.itemsale >= 10000) {
|
||||||
|
salesStr = (d.itemsale / 10000).toFixed(1) + '万';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析排行榜标签
|
||||||
|
let rank = 10; // 默认
|
||||||
|
let rankText = '近期热销榜';
|
||||||
|
try {
|
||||||
|
const labels = JSON.parse(d.rank_label);
|
||||||
|
if (labels && labels.length > 0) {
|
||||||
|
rankText = labels[0].title;
|
||||||
|
rank = labels[0].sort || 10;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
this.product = {
|
||||||
|
id: d.id,
|
||||||
|
images: d.taobao_image_qiniu || [d.itempic],
|
||||||
|
rank: rank,
|
||||||
|
rankText: rankText,
|
||||||
|
todaySale: d.todaysale,
|
||||||
|
price: d.itemendprice,
|
||||||
|
oldPrice: d.itemprice,
|
||||||
|
totalSale: salesStr,
|
||||||
|
platform: d.shoptype === 'B' ? '天猫' : '淘宝',
|
||||||
|
title: d.itemtitle,
|
||||||
|
timeTag: d.label && d.label[0] ? d.label[0] : '超值特惠',
|
||||||
|
couponVal: d.couponmoney,
|
||||||
|
couponTime: d.couponlife.replace('有效期至：', ''),
|
||||||
|
shopName: d.shopname,
|
||||||
|
shopLogo: (d.brand_info && d.brand_info.brand_logo) || d.shopicon || 'https://cdn-icons-png.flaticon.com/512/732/732229.png',
|
||||||
|
scores: {
|
||||||
|
desc: d.shop_score.desc_score,
|
||||||
|
service: d.shop_score.serv_score,
|
||||||
|
post: d.shop_score.post_score
|
||||||
|
},
|
||||||
|
// 详情图处理：如果素材里有图，拼接前缀展示
|
||||||
|
detailImages: (d.material_info && d.material_info[0] && d.material_info[0].image) ?
|
||||||
|
d.material_info[0].image.map(img => img.startsWith('http') ? img : `https://img-haodanku-com.cdn.fudaiapp.com/${img}`) :
|
||||||
|
[d.itempic]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
goHome() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
swiperChange(e) {
|
||||||
|
this.currentSwiper = e.detail.current;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.detail-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回按钮 */
|
||||||
|
.back-btn {
|
||||||
|
position: fixed;
|
||||||
|
left: 30rpx;
|
||||||
|
width: 64rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 100;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-icon {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮播图 */
|
||||||
|
.swiper-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 750rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-swiper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-indicator {
|
||||||
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
|
bottom: 30rpx;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 4rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 热销榜 */
|
||||||
|
.hot-sale-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(to right, #fff1eb, #fbe9e7);
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #d84315;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-right {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #bf360c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息区 */
|
||||||
|
.info-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
color: #ff416c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-symbol {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-integer {
|
||||||
|
font-size: 56rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-decimal {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.old-price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
text-decoration: line-through;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sales-count {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-tag {
|
||||||
|
background-color: #ff416c;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 2rpx 10rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-row {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-item {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ff416c;
|
||||||
|
background-color: #fff0f3;
|
||||||
|
padding: 4rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 优惠券 */
|
||||||
|
.coupon-section {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-card {
|
||||||
|
height: 160rpx;
|
||||||
|
background: linear-gradient(to right, #ff715a, #ff416c);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-left {
|
||||||
|
flex: 1;
|
||||||
|
padding: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-amount {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-val {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-unit {
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-time {
|
||||||
|
font-size: 20rpx;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-right {
|
||||||
|
width: 200rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-left: 2rpx dashed rgba(255, 255, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.get-btn {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #ff416c;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 10rpx 24rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-circle {
|
||||||
|
position: absolute;
|
||||||
|
width: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-radius: 50%;
|
||||||
|
left: auto;
|
||||||
|
right: 188rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-circle.top {
|
||||||
|
top: -12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-circle.bottom {
|
||||||
|
bottom: -12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 店铺 */
|
||||||
|
.shop-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-logo {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shop-entry {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-val {
|
||||||
|
color: #ff416c;
|
||||||
|
margin: 0 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-up {
|
||||||
|
color: #ff416c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 详情图 */
|
||||||
|
.detail-images {
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 30rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-placeholder {
|
||||||
|
height: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部栏 */
|
||||||
|
.bottom-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
|
||||||
|
align-items: center;
|
||||||
|
border-top: 1rpx solid #eeeeee;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-left {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-btn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-bottom: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar-right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-btn {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #ffbcba;
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-btn {
|
||||||
|
flex: 1;
|
||||||
|
background: linear-gradient(to right, #ff715a, #ff416c);
|
||||||
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -108,7 +108,7 @@
|
||||||
|
|
||||||
<swiper class="worth-swiper" :indicator-dots="true" indicator-active-color="#ff416c">
|
<swiper class="worth-swiper" :indicator-dots="true" indicator-active-color="#ff416c">
|
||||||
<swiper-item v-for="(chunk, cIdx) in worthBuyChunks" :key="cIdx">
|
<swiper-item v-for="(chunk, cIdx) in worthBuyChunks" :key="cIdx">
|
||||||
<view class="worth-goods-item" v-for="(item, idx) in chunk" :key="idx">
|
<view class="worth-goods-item" v-for="(item, idx) in chunk" :key="idx" @click="goToDetail(item.id)">
|
||||||
<image class="worth-goods-img" :src="item.img" mode="aspectFill"></image>
|
<image class="worth-goods-img" :src="item.img" mode="aspectFill"></image>
|
||||||
<view class="worth-goods-info">
|
<view class="worth-goods-info">
|
||||||
<view class="worth-goods-title">
|
<view class="worth-goods-title">
|
||||||
|
|
@ -174,7 +174,7 @@
|
||||||
|
|
||||||
<!-- 品牌商品格子 -->
|
<!-- 品牌商品格子 -->
|
||||||
<view class="brand-goods-grid">
|
<view class="brand-goods-grid">
|
||||||
<view class="brand-grid-item" v-for="(goods, gIdx) in shop.items" :key="gIdx">
|
<view class="brand-grid-item" v-for="(goods, gIdx) in shop.items" :key="gIdx" @click="goToDetail(goods.id)">
|
||||||
<view class="b-img-wrap">
|
<view class="b-img-wrap">
|
||||||
<view class="anniversary-tag">
|
<view class="anniversary-tag">
|
||||||
<text class="a-icon">🎂</text>
|
<text class="a-icon">🎂</text>
|
||||||
|
|
@ -217,7 +217,7 @@
|
||||||
|
|
||||||
<!-- 商品列表 (1:1 还原) -->
|
<!-- 商品列表 (1:1 还原) -->
|
||||||
<view class="goods-list" id="goods-list-section">
|
<view class="goods-list" id="goods-list-section">
|
||||||
<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx">
|
<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx" @click="goToDetail(goods.id)">
|
||||||
<view class="g-img-wrap">
|
<view class="g-img-wrap">
|
||||||
<view class="g-anniversary-tag">
|
<view class="g-anniversary-tag">
|
||||||
<text class="a-icon">🎂</text>
|
<text class="a-icon">🎂</text>
|
||||||
|
|
@ -346,6 +346,12 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
goToDetail(id) {
|
||||||
|
console.log('正在跳转到详情页，商品ID:', id);
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/detail/detail?id=${id}`
|
||||||
|
});
|
||||||
|
},
|
||||||
getBottomBar() {
|
getBottomBar() {
|
||||||
uni.request({
|
uni.request({
|
||||||
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
|
||||||
|
|
@ -390,6 +396,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
id: item.id,
|
||||||
image: item.itempic,
|
image: item.itempic,
|
||||||
title: item.itemshorttitle,
|
title: item.itemshorttitle,
|
||||||
finalPrice: item.itemendprice,
|
finalPrice: item.itemendprice,
|
||||||
|
|
@ -412,6 +419,7 @@
|
||||||
if (res.data && res.data.code === 200) {
|
if (res.data && res.data.code === 200) {
|
||||||
const formatData = (list) => {
|
const formatData = (list) => {
|
||||||
return list.map(item => ({
|
return list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
img: item.itempic,
|
img: item.itempic,
|
||||||
title: item.itemshorttitle,
|
title: item.itemshorttitle,
|
||||||
label1: item.label && item.label[0] ? item.label[0] : '',
|
label1: item.label && item.label[0] ? item.label[0] : '',
|
||||||
|
|
@ -443,6 +451,7 @@
|
||||||
desc: shop.title || '官方直降 爆款秒杀',
|
desc: shop.title || '官方直降 爆款秒杀',
|
||||||
tags: shop.label ? shop.label.slice(0, 2) : ['抢限量大额券', '霸榜天猫3大榜单'],
|
tags: shop.label ? shop.label.slice(0, 2) : ['抢限量大额券', '霸榜天猫3大榜单'],
|
||||||
items: (shop.items || []).slice(0, 3).map(goods => ({
|
items: (shop.items || []).slice(0, 3).map(goods => ({
|
||||||
|
id: goods.id,
|
||||||
img: goods.itempic,
|
img: goods.itempic,
|
||||||
title: goods.itemshorttitle,
|
title: goods.itemshorttitle,
|
||||||
sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,
|
sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue