diff --git a/packages/shop/goods/index.css b/packages/shop/goods/index.css index f6644165..f74f9dc4 100644 --- a/packages/shop/goods/index.css +++ b/packages/shop/goods/index.css @@ -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; } @@ -362,29 +401,124 @@ image { color: #999999; } -.active{ +.active { background: #FF370B; color: #fff; } -.priceInfo{ +.priceInfo { height: 450rpx; padding: 20rpx; } -.priceInfo-title{ - font-size: 30rpx; +.priceInfo-title { + /* font-size: 30rpx; */ font-weight: bolder; margin: 15rpx 0 20rpx 0; } -.priceInfo-content{ - font-size: 28rpx; +.priceInfo-content { + font-size: 26rpx; color: #9c9c9c; - line-height: 1.5; + line-height: 1.7; } -.priceInfo-content-title{ +.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; } \ No newline at end of file diff --git a/packages/shop/goods/index.vue b/packages/shop/goods/index.vue index 0cc9c097..d650db3b 100644 --- a/packages/shop/goods/index.vue +++ b/packages/shop/goods/index.vue @@ -63,7 +63,88 @@
{{ currentGG.goods_name }}
{{ currentGG.commodity_brief }}
-
商品详情
+ +
+ + +
+
+
优惠
+
满100减10
+
+
+
限购
+
限购5件
+
+
+
阶梯价
+
1~9件 9.5元/件;>10件 8.0元/件
+
+
+
满赠
+
满5赠1，满10赠3
+
+
+
满减
+
满100减5，满200减20
+
+
+ +
+ +
+
质检
+
质检报告
+
+
+
押金
+
需另付押金:￥30.00(30天可退)
+
+
+
配送
+ + 12:00前下单,预计8月21日送达; + 12:00前下单,预计8月21日送达; + +
+
+ + +
+
+

评价({{ comments.length }})

+ 查看全部 > +
+
+
+
+ + +
{{ comment.time }}
+
+
已购 {{ comment.product }}
+
{{ comment.content }}
+
+ +
+
+
+
+ +
+ +

商品详情

商品编号
@@ -92,7 +173,7 @@
-
价格说明
+

价格说明

划线价格： @@ -219,6 +300,46 @@
保存海报
+ + + +
+
+

评价

+
+
+
+
+ + +
{{ comment.time }}
+
+
已购 {{ comment.product }}
+
{{ comment.content }}
+
+ +
+
+
+
+ @@ -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; },