feat : 完善商品详情页面

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;
 }
 
@@ -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;
+}

packages/shop/goods/index.vue

@@ -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;
   },