feat : 完善商品详情页面
This commit is contained in:
赵毅
parent
ad75a5142d
commit
48b26483c0
@ -104,6 +104,45 @@ image {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
/* 促销信息样式 */
|
||||
.promotions-container {
|
||||
padding: 15rpx;
|
||||
background-color: #FFF;
|
||||
border-radius: 10rpx;
|
||||
margin: 15rpx 0;
|
||||
}
|
||||
|
||||
.promotion-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.promotion-tag {
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
background-color: #ffe8e5;
|
||||
color: #ff5029;
|
||||
padding: 5rpx 15rpx;
|
||||
border-radius: 10rpx;
|
||||
font-size: 26rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.promotion-content {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.promotion-content1 {
|
||||
width: auto;
|
||||
padding: 5rpx 10rpx;
|
||||
text-align: center;
|
||||
background-color: #ff6749;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.GG_Item {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
@ -130,7 +169,7 @@ image {
|
||||
}
|
||||
|
||||
.GoodsMsg {
|
||||
font-size: 33rpx;
|
||||
/* font-size: 30rpx; */
|
||||
color: #222222;
|
||||
margin: 0 20rpx;
|
||||
margin-top: 55rpx;
|
||||
@ -148,14 +187,14 @@ image {
|
||||
.Msg_ItemTit {
|
||||
width: 120rpx;
|
||||
margin-right: 100rpx;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin: 0 20rpx;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.Msg_ItemCon {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -270,7 +309,7 @@ image {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
@ -373,18 +412,113 @@ image {
|
||||
}
|
||||
|
||||
.priceInfo-title {
|
||||
font-size: 30rpx;
|
||||
/* font-size: 30rpx; */
|
||||
font-weight: bolder;
|
||||
margin: 15rpx 0 20rpx 0;
|
||||
}
|
||||
|
||||
.priceInfo-content {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #9c9c9c;
|
||||
line-height: 1.5;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.priceInfo-content-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.fenge {
|
||||
width: 100%;
|
||||
height: 15rpx;
|
||||
background-color: #f5f7fb;
|
||||
}
|
||||
|
||||
/* 评价部分样式 */
|
||||
.reviews-section {
|
||||
padding: 20rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.reviews-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.reviews-header h3 {
|
||||
/* font-size: 32rpx; */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reviews-list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.review-item {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.review-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.user-purchase {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.review-content {
|
||||
font-size: 27rpx;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.review-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.review-img {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.review-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
@ -63,7 +63,88 @@
|
||||
|
||||
<div class="Tit">{{ currentGG.goods_name }}</div>
|
||||
<div class="Msg">{{ currentGG.commodity_brief }}</div>
|
||||
<div class="GoodsMsg">商品详情</div>
|
||||
|
||||
<div class="fenge"></div>
|
||||
|
||||
<!-- 促销信息区域 -->
|
||||
<div class="promotions-container">
|
||||
<div class="promotion-item">
|
||||
<div class="promotion-tag">优惠</div>
|
||||
<div class="promotion-content promotion-content1">满100减10</div>
|
||||
</div>
|
||||
<div class="promotion-item">
|
||||
<div class="promotion-tag">限购</div>
|
||||
<div class="promotion-content">限购5件</div>
|
||||
</div>
|
||||
<div class="promotion-item">
|
||||
<div class="promotion-tag">阶梯价</div>
|
||||
<div class="promotion-content">1~9件 9.5元/件;>10件 8.0元/件</div>
|
||||
</div>
|
||||
<div class="promotion-item">
|
||||
<div class="promotion-tag">满赠</div>
|
||||
<div class="promotion-content">满5赠1，满10赠3</div>
|
||||
</div>
|
||||
<div class="promotion-item">
|
||||
<div class="promotion-tag">满减</div>
|
||||
<div class="promotion-content">满100减5，满200减20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fenge"></div>
|
||||
|
||||
<div class="Msg_Item">
|
||||
<div class="Msg_ItemTit">质检</div>
|
||||
<div class="Msg_ItemCon">质检报告</div>
|
||||
</div>
|
||||
<div class="Msg_Item">
|
||||
<div class="Msg_ItemTit">押金</div>
|
||||
<div class="Msg_ItemCon">需另付押金:￥30.00(30天可退)</div>
|
||||
</div>
|
||||
<div class="Msg_Item">
|
||||
<div class="Msg_ItemTit">配送</div>
|
||||
<text class="Msg_ItemCon">
|
||||
12:00前下单,预计8月21日送达;
|
||||
12:00前下单,预计8月21日送达;
|
||||
</text>
|
||||
</div>
|
||||
<div class="fenge"></div>
|
||||
|
||||
<!-- 评价部分 -->
|
||||
<div class="reviews-section">
|
||||
<div class="reviews-header">
|
||||
<h3>评价({{ comments.length }})</h3>
|
||||
<view class="view-all" @click="showPopup">查看全部 ></view>
|
||||
</div>
|
||||
<div class="reviews-list" v-if="comments.length > 0">
|
||||
<div
|
||||
class="review-item"
|
||||
v-for="(comment, index) in comments"
|
||||
:key="index"
|
||||
>
|
||||
<div class="review-user">
|
||||
<image :src="comment.avatar" class="user-avatar"></image>
|
||||
<div class="user-info">
|
||||
<div class="user-name">{{ comment.username }}</div>
|
||||
</div>
|
||||
<div class="review-time">{{ comment.time }}</div>
|
||||
</div>
|
||||
<div class="user-purchase">已购 {{ comment.product }}</div>
|
||||
<div class="review-content">{{ comment.content }}</div>
|
||||
<div class="review-images" v-if="comment.images.length > 0">
|
||||
<image
|
||||
:src="img"
|
||||
class="review-img"
|
||||
v-for="(img, idx) in comment.images"
|
||||
:key="idx"
|
||||
></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fenge"></div>
|
||||
|
||||
<h3 class="GoodsMsg">商品详情</h3>
|
||||
|
||||
<div class="Msg_Item">
|
||||
<div class="Msg_ItemTit">商品编号</div>
|
||||
@ -92,7 +173,7 @@
|
||||
</div>
|
||||
|
||||
<div class="priceInfo">
|
||||
<div class="priceInfo-title">价格说明</div>
|
||||
<h3 class="priceInfo-title">价格说明</h3>
|
||||
<div class="priceInfo-content">
|
||||
<view>
|
||||
<text class="priceInfo-content-title">划线价格：</text>
|
||||
@ -219,6 +300,46 @@
|
||||
<div class="shadowBox_btn" @click.stop="saveImg">保存海报</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价 查看详情 -->
|
||||
<u-popup
|
||||
:show="show"
|
||||
round="20rpx"
|
||||
mode="bottom"
|
||||
@close="close"
|
||||
@open="open"
|
||||
>
|
||||
<div class="reviews-section">
|
||||
<div class="reviews-header">
|
||||
<h3>评价</h3>
|
||||
</div>
|
||||
<div class="reviews-list" v-if="comments.length > 0">
|
||||
<div
|
||||
class="review-item"
|
||||
v-for="(comment, index) in comments"
|
||||
:key="index"
|
||||
>
|
||||
<div class="review-user">
|
||||
<image :src="comment.avatar" class="user-avatar"></image>
|
||||
<div class="user-info">
|
||||
<div class="user-name">{{ comment.username }}</div>
|
||||
</div>
|
||||
<div class="review-time">{{ comment.time }}</div>
|
||||
</div>
|
||||
<div class="user-purchase">已购 {{ comment.product }}</div>
|
||||
<div class="review-content">{{ comment.content }}</div>
|
||||
<div class="review-images" v-if="comment.images.length > 0">
|
||||
<image
|
||||
:src="img"
|
||||
class="review-img"
|
||||
v-for="(img, idx) in comment.images"
|
||||
:key="idx"
|
||||
></image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -245,6 +366,33 @@ export default {
|
||||
currentGGIndex: "", //当前规格index
|
||||
|
||||
carOrderList: [],
|
||||
// 新增评论数据
|
||||
showReviewPopup: false,
|
||||
comments: [
|
||||
{
|
||||
avatar: "http://localhost:8080/test.png",
|
||||
username: "TP",
|
||||
product: "库尔勒香梨 10kg/箱",
|
||||
content:
|
||||
"踏入这家位于街角的餐厅，木质门框与暖黄灯光交织出温馨氛围，墙面上手绘的食材插画画透着文艺气息，开放式厨房的设计让食客能看见厨师处理食材的全过程，第一印象便给人以干净与安心。",
|
||||
images: ["http://localhost:8080/test.png"],
|
||||
time: "2025-03-01 11:24:20",
|
||||
},
|
||||
{
|
||||
avatar: "http://localhost:8080/test.png",
|
||||
username: "TP",
|
||||
product: "库尔勒香梨 10kg/箱",
|
||||
content:
|
||||
"踏入这家位于街角的餐厅，木质门框与暖黄灯光交织出温馨氛围，墙面上手绘的食材插_draw着文艺气息，开放式厨房的设计让食客能看见厨师处理食材的全过程，第一印象便给人以干净与安心。",
|
||||
images: [
|
||||
"http://localhost:8080/test.png",
|
||||
"http://localhost:8080/test.png",
|
||||
"http://localhost:8080/test.png",
|
||||
],
|
||||
time: "2025-03-01 11:24:20",
|
||||
},
|
||||
],
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -372,7 +520,6 @@ export default {
|
||||
|
||||
// 切换规格
|
||||
changeGG(item, index) {
|
||||
console.log("🚀 ~ changeGG ~ item-----------------:", item);
|
||||
this.currentGG = item;
|
||||
this.currentGGIndex = index;
|
||||
if (this.currentGG.cart_count) {
|
||||
@ -460,10 +607,17 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
showPopup() {
|
||||
console.log("🚀 ~ showPopup ~ showPopup:");
|
||||
this.show = true;
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const itemObj = JSON.parse(decodeURIComponent(options.item));
|
||||
console.log("🚀 ~ onLoad ~ itemObj:", itemObj);
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
@ -489,6 +643,8 @@ export default {
|
||||
|
||||
request(apiArr.updateCar, "POST", {
|
||||
goods_id_and_count,
|
||||
}).then((res) => {
|
||||
console.log("Cart updated on hide");
|
||||
});
|
||||
return;
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user