商品评论

src/pages.json

@@ -251,6 +251,12 @@
 			"style": {
 				"navigationBarTitleText": "商品详情页"
 			}
+		},
+		{
+			"path": "pages/assistingAgriculture/detail/comment",
+			"style": {
+				"navigationBarTitleText": "评论"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/assistingAgriculture/detail/comment.vue

+<template>
+  <view class="container">
+    <!--    顶部搜索框-->
+    <view class="header">
+      <wd-icon
+        class="icon"
+        name="arrow-left"
+        color="#000"
+        size="28rpx"
+        @click="handleBack"
+      ></wd-icon>
+      <view class="searchBox">
+        <wd-icon name="search" size="24rpx" color="#ABAAAA"></wd-icon>
+        <input
+          type="text"
+          :value="searchValue"
+          class="text"
+          placeholder="点评关键词/特色"
+          placeholder-style="font-size:22rpx;"
+        />
+      </view>
+    </view>
+
+    <view class="content">
+      <view class="tabs">
+        <view
+          v-for="item in tabs"
+          :key="item.value"
+          class="tab"
+          :class="{ active: tab === item.value }"
+          @click="handleChangeTab(item.value)"
+        >
+          {{ item.label }}
+        </view>
+      </view>
+
+      <view class="comment-list">
+        <view class="comment-item" v-for="item in 3" :key="item">
+          <view class="top">
+            <view class="row">
+              <image
+                class="headPortrait"
+                mode="aspectFill"
+                src="@/static/assistingAgriculture/detail/detail-img.png"
+              ></image>
+              <view class="right">
+                <text class="name">略略略</text>
+                <view class="ratebox">
+                  <image
+                    class="rate-img"
+                    src="@/static/assistingAgriculture/detail/fiveStars.png"
+                  ></image>
+                  <text>5.0分</text>
+                  <text>好评</text>
+                </view>
+              </view>
+            </view>
+            <text class="detail">2024-08-03 筑农散养虫子土鸡(未下蛋小母鸡)x2</text>
+          </view>
+          <view class="info">
+            <text class="text">味道鲜美，煲出来的汤非常好喝，值得购买！</text>
+            <view class="imgbox">
+              <image
+                class="img"
+                mode="aspectFill"
+                src="@/static/assistingAgriculture/detail/detail-img.png"
+                v-for="item in 6"
+                :key="item"
+              ></image>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const searchValue = ref('');
+
+const tab = ref(0);
+const tabs = ref([
+  {
+    value: 0,
+    label: '全部',
+  },
+  {
+    value: 1,
+    label: '图/视频（183）',
+  },
+  {
+    value: 2,
+    label: '追评（5）',
+  },
+  {
+    value: 3,
+    label: '中差评（13）',
+  },
+  {
+    value: 4,
+    label: '好评（514）',
+  },
+]);
+
+const rateList = ref([
+  {
+    value: 1,
+    url: '@/static/assistingAgriculture/index/oneStar.png',
+    text: '很糟',
+  },
+  {
+    value: 2,
+    url: '@/static/assistingAgriculture/index/twoStars.png',
+    text: '较差',
+  },
+  {
+    value: 3,
+    url: '@/static/assistingAgriculture/index/threeStars.png',
+    text: '一般',
+  },
+  {
+    value: 4,
+    url: '@/static/assistingAgriculture/index/fourStars.png',
+    text: '还行',
+  },
+  {
+    value: 5,
+    url: '@/static/assistingAgriculture/index/fiveStars.png',
+    text: '超赞',
+  },
+]);
+
+const handleChangeTab = (e) => {
+  if (e === tab.value) return;
+  tab.value = e;
+};
+const handleBack = () => {
+  uni.navigateBack();
+};
+</script>
+
+<style lang="scss" scoped>
+page {
+  background-color: #f3f3f3;
+}
+
+.container {
+  width: 375 * 2rpx;
+  margin: 0 auto;
+  position: relative;
+
+  .header {
+    height: 88rpx;
+    position: absolute;
+    width: 100%;
+    z-index: 999;
+    display: flex;
+    background-color: #fff;
+    margin: 0 auto;
+    align-items: center;
+    padding: 0 40rpx;
+    gap: 32rpx;
+
+    .searchBox {
+      width: 492rpx;
+      height: 56rpx;
+      background: #f3f3f3;
+      border-radius: 28rpx 28rpx 28rpx 28rpx;
+      display: flex;
+      align-items: center;
+      padding-left: 20rpx;
+      gap: 10rpx;
+
+      .text {
+        margin-left: 10rpx;
+        font-size: 22rpx;
+      }
+    }
+  }
+
+  .content {
+    padding: 98rpx 20rpx 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10rpx;
+
+    .tabs {
+      background-color: #fff;
+      display: flex;
+      justify-content: space-around;
+      border-radius: 16rpx;
+      padding: 30rpx 30rpx;
+
+      .tab {
+        font-family: Source Han Sans;
+        font-weight: 500;
+        font-size: 22rpx;
+        color: #767676;
+      }
+
+      .active {
+        font-family: Source Han Sans;
+        font-weight: 700;
+        font-size: 24rpx;
+        color: #3d3d3d;
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 32rpx;
+          height: 4rpx;
+          background-color: #fa5151;
+          position: absolute;
+          bottom: -16rpx;
+          left: 50%;
+          transform: translate(-50%);
+        }
+      }
+    }
+
+    .comment-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10rpx;
+
+      .comment-item {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        border-radius: 16rpx;
+        padding: 20rpx;
+        gap: 12rpx;
+
+        .top {
+          display: flex;
+          flex-direction: column;
+          gap: 20rpx;
+          border-bottom: 2rpx solid #f3f3f3;
+          padding-bottom: 20rpx;
+
+          .row {
+            display: flex;
+            gap: 16rpx;
+
+            .headPortrait {
+              width: 72rpx;
+              height: 72rpx;
+              border-radius: 50%;
+            }
+
+            .right {
+              display: flex;
+              flex-direction: column;
+              gap: 16rpx;
+
+              .name {
+                font-family: Source Han Sans;
+                font-weight: bold;
+                font-size: 28rpx;
+                color: #3d3d3d;
+              }
+
+              .ratebox {
+                display: flex;
+                position: relative;
+                align-items: center;
+                background-color: rgba(253, 223, 109, 0.1686);
+                gap: 10rpx;
+                padding: 2rpx 10rpx 2rpx 26rpx;
+                border-radius: 16rpx;
+
+                text {
+                  font-family: Source Han Sans;
+                  font-weight: 500;
+                  font-size: 16rpx;
+                  color: #e1961d;
+                }
+
+                .rate-img {
+                  width: 24rpx;
+                  height: 24rpx;
+                  position: absolute;
+                  left: -8rpx;
+                }
+              }
+            }
+          }
+
+          .detail {
+            font-family: Source Han Sans;
+            font-weight: 500;
+            font-size: 22rpx;
+            color: #abaaaa;
+          }
+        }
+
+        .info {
+          display: flex;
+          flex-direction: column;
+          gap: 20rpx;
+
+          .text {
+            font-family: Source Han Sans;
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #3d3d3d;
+          }
+
+          .imgbox {
+            display: flex;
+            gap: 10rpx;
+            flex-wrap: wrap;
+
+            .img {
+              width: 216rpx;
+              height: 216rpx;
+              border-radius: 16rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/order/order.vue

@@ -501,7 +501,7 @@ page {
   margin: 0 auto;
 
   .tabs {
-    padding-top: 88px;
+    padding-top: 88rpx;
 
     .wd-tabs {
       background-color: #f5f5f5;