feat(client): 新增评价列表和评价详情

src/components/dynamic-list/dynamic-list.vue

@@ -1,18 +1,20 @@
 <template>
   <view class="dynamic-list">
-    <view v-for="(item, index) in 3" :key="index" class="u-m-b-60">
-      <view class="fl-flex-item u-m-b-16">
-        <view class="fl-flex">
-          <u-avatar src="/static/img.jpg" size="50" />
-          <view class="u-m-l-16">
-            <view class="f-s-30 text-primary text-bold u-m-b-6 u-m-t-8">易只烊</view>
-            <u-rate v-model="value" readonly gutter="0"></u-rate>
+    <view v-for="(item, index) in list" :key="index" class="u-m-b-60">
+      <view @click="handleClick(item)">
+        <view class="fl-flex-item u-m-b-16">
+          <view class="fl-flex">
+            <u-avatar src="/static/img.jpg" size="50" />
+            <view class="u-m-l-16">
+              <view class="f-s-30 text-primary text-bold u-m-b-6 u-m-t-8">易只烊</view>
+              <u-rate v-model="value" readonly gutter="0"></u-rate>
+            </view>
           </view>
+          <view class="f-s-24 text-999">2024.05.23</view>
+        </view>
+        <view class="dynamic-content">
+          评价评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容内容
         </view>
-        <view class="f-s-24 text-999">2024.05.23</view>
-      </view>
-      <view class="dynamic-content">
-        评价评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容评价内容内容
       </view>
       <u-album
         :urls="urls2"
@@ -44,6 +46,10 @@
 <script>
 export default {
   props: {
+    list: {
+      type: Array,
+      default: [],
+    },
     maxCount: {
       type: Number,
       default: 3,
@@ -84,6 +90,9 @@ export default {
     handleMore(item) {
       this.$emit('more', item);
     },
+    handleClick(item) {
+      this.$emit('click', item);
+    },
   },
 };
 </script>

src/components/popup-confirm/popup-confirm.vue

@@ -9,7 +9,7 @@
       :closeOnClickOverlay="false"
     >
       <view class="main flex align-center">
-        <base-imgae class="u-m-r-10" :src="iconSrc" width="24px" height="24px"></base-imgae>
+        <base-img class="u-m-r-10" :src="iconSrc" width="24px" height="24px"></base-imgae>
         <view class="text u-font-16 text-title">{{ text }}</view>
       </view>
       <view class="footer flex justify-end">

src/pages.json

@@ -77,6 +77,12 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "evaluateDetail/index",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "popularNearby/index",
           "style": {

src/pagesHome/evaluateDetail/evaluateItem.vue

@@ -0,0 +1,37 @@
+<template>
+  <view class="evaluateItem">
+    <view class="fl-flex u-m-b-32">
+      <u-avatar src="/static/img.jpg" size="50" />
+      <view class="u-m-l-24">
+        <view class="u-m-b-18">
+          <view class="f-s-26 u-m-b-4" style="color: #616570">喵喵</view>
+          <view class="f-s-26 text-primary u-m-b-4">端午节安康！</view>
+          <view class="f-s-24" style="color: #9fa0a6">2天前</view>
+        </view>
+        <view class="fl-flex u-m-b-16" v-for="(item, index) in 2" :key="index">
+          <u-avatar src="/static/img.jpg" size="40" />
+          <view class="u-m-l-20">
+            <view class="f-s-26 u-m-b-4" style="color: #616570">青青</view>
+            <view class="f-s-26 text-primary u-m-b-4">同乐同乐！</view>
+            <view class="f-s-24" style="color: #9fa0a6">2天前</view>
+          </view>
+        </view>
+
+        <view class="fl-flex">
+          <view class="f-s-28 color-primary">共5条回复</view>
+          <u-icon name="arrow-right" color="#1B5FC5" size="18"></u-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.evaluateItem {
+  background-color: #fff;
+}
+</style>

src/pagesHome/evaluateDetail/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <view class="evaluate-detail">
+    <page-navbar bgColor="#fff" title="评价详情" />
+    <dynamic-list :list="list"></dynamic-list>
+    <view class="fl-flex merchant-mine">
+      <base-img
+        src="/static/img.jpg"
+        width="160rpx"
+        height="160rpx"
+        borderRadius="16rpx"
+      ></base-img>
+      <view class="merchant-list u-m-l-32">
+        <view class="f-s-30 text-primary u-m-b-14 text-bold u-m-t-8">
+          新世纪环球购物中心
+        </view>
+        <view class="fl-flex u-m-b-14 fl-align-center">
+          <u-rate
+            v-model="value"
+            readonly
+            gutter="0"
+            size="24"
+            activeColor="#ffa033"
+          ></u-rate>
+          <view class="f-s-26 text-99">(3.0)</view>
+        </view>
+        <view class="f-s-24 text-999">世纪城国际展览中心世纪城国际展览中心</view>
+      </view>
+    </view>
+
+    <view class="evaluate">
+      <view class="fl-text-title u-m-b-32">全部评价</view>
+      <evaluate-item v-for="(item, index) in 8" :key="index"></evaluate-item>
+    </view>
+  </view>
+</template>
+
+<script>
+import EvaluateItem from './evaluateItem.vue';
+export default {
+  name: 'evaluate-detail',
+  components: { EvaluateItem },
+  data() {
+    return {
+      list: [{}],
+      value: 3,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.evaluate-detail {
+  height: 100%;
+  padding: 20rpx 32rpx;
+  background-color: #fff;
+  .merchant-mine {
+    padding: 16rpx;
+    border-radius: 8rpx;
+    border: 2rpx solid #e6e6e6;
+  }
+  .evaluate {
+    margin: 32rpx 0;
+  }
+}
+</style>

src/pagesHome/evaluateList/index.vue

@@ -1,12 +1,30 @@
 <template>
-  <view>
-    <page-navbar bgColor="#fff" title="评价列表"></page-navbar>
+  <view class="evaluate-list">
+    <page-navbar bgColor="#fff" title="评价列表" />
+    <dynamic-list @click="handleServer" :list="list"></dynamic-list>
   </view>
 </template>
 
 <script>
-export default {};
+export default {
+  name: 'evaluate-list',
+  data() {
+    return {
+      list: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
+    };
+  },
+  methods: {
+    handleServer() {
+      this.$Router.push('/pagesHome/evaluateDetail/index');
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.evaluate-list {
+  padding: 0 32rpx;
+  height: 100vh;
+  background-color: #fff;
+}
 </style>

src/pagesHome/productDetail/index.vue

@@ -97,7 +97,7 @@
         </view>
       </view>
       <view class="u-m-t-24">
-        <dynamic-list></dynamic-list>
+        <dynamic-list :list="list"></dynamic-list>
         <view class="dynamic-more" @click="$Router.push('/pagesHome/evaluateList/index')">
           <view>120评论 查看更多</view>
           <u-icon name="arrow-right" color="#999" size="12"></u-icon>
@@ -154,6 +154,7 @@ export default {
           name: '网友评价',
         },
       ],
+      list: [{}, {}, {}],
     };
   },
   onLoad(option) {

src/pagesHome/productDetail/serviceFooter copy.vue

@@ -1,84 +0,0 @@
-<template>
-  <view class="fl-flex-item" style="padding: 20rpx 20rpx 40rpx 40rpx">
-    <view class="footer-left">
-      <view class="left-item" @click="collect(0)">
-        <view class="item-img">
-          <image src="/static/pagesHome/detail_shop.png" class="img"></image>
-        </view>
-        <view class="item-text">店铺</view>
-      </view>
-      <view class="left-item" @click="collect(1)">
-        <view class="item-img">
-          <image src="/static/pagesHome/detail_comment.png" class="img"></image>
-        </view>
-        <view class="item-text">咨询</view>
-      </view>
-    </view>
-    <view class="footer-right">
-      <view class="btn1" @click="handlerFavorite">
-        <image src="/static/pagesHome/detail_heart.png)"></image>
-        <view>收藏</view>
-      </view>
-      <view class="btn2" @click="handlerAddCart"> 立即购买 </view>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  methods: {
-    collect(data) {
-      this.$emit('collect', data);
-    },
-    handlerAddCart() {
-      this.$emit('cart');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.footer-left {
-  display: flex;
-  .left-item {
-    margin-right: 32rpx;
-    .item-img {
-      .img {
-        width: 44rpx;
-        height: 44rpx;
-      }
-    }
-    .item-text {
-      color: #0c1223;
-      font-size: 24rpx;
-    }
-  }
-}
-.footer-right {
-  display: flex;
-  justify-content: space-between;
-  font-size: 28rpx;
-  .btn1 {
-    padding: 20rpx 54rpx;
-    background-color: #0c1223;
-    color: #fff;
-    text-align: center;
-    align-items: center;
-    border-radius: 8rpx;
-    display: flex;
-    margin-right: 20rpx;
-    vertical-align: middle;
-    .img {
-      width: 32rpx;
-      height: 32rpx;
-      margin-right: 10rpx;
-    }
-  }
-  .btn2 {
-    border-radius: 8rpx;
-    padding: 20rpx 82rpx;
-    background-color: #215ebe;
-    color: #fff;
-  }
-}
-</style>