feat(client): 新增评价弹窗

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

@@ -38,7 +38,7 @@
             <u-icon name="thumb-up-fill" color="red" size="18"></u-icon>
             <text class="u-m-l-4">619</text>
           </view>
-          <view class="like-message fl-flex">
+          <view class="like-message fl-flex" @click="handleMessage">
             <u-icon name="chat" color="#333" size="18"></u-icon>
             <text class="u-m-l-4">619</text>
           </view>
@@ -99,6 +99,9 @@ export default {
     handleClick(item) {
       this.$emit('click', item);
     },
+    handleMessage(item) {
+      this.$emit('message', item);
+    },
   },
 };
 </script>

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

@@ -4,9 +4,15 @@
  ****--@description 确认弹框 可以继续完善
 -->
 <template>
-  <u-popup :show="show" mode="center" :round="10" :customStyle="popupCustomStyle">
+  <u-popup
+    :show="show"
+    :safeAreaInsetBottom="false"
+    mode="center"
+    :round="10"
+    :customStyle="popupCustomStyle"
+  >
     <view class="popup-confirm">
-      <view class="f-s-34 text-bold text-333 text-center u-m-b-32">提示</view>
+      <view class="f-s-34 text-bold text-333 text-center u-m-b-32 u-m-t-20">提示</view>
       <view class="popup-content">{{ text }}</view>
       <view class="fl-flex popup-bottom">
         <view class="popup-btn popup-btn1" @click="confirm">{{ confirmText }}</view>
@@ -26,7 +32,7 @@ export default {
     },
     width: {
       type: String,
-      default: '550rpx',
+      default: '600rpx',
     },
     confirmText: {
       type: String,
@@ -46,6 +52,7 @@ export default {
       return {
         width: this.width,
         padding: '24rpx',
+        padding: '0rpx',
       };
     },
   },
@@ -62,23 +69,17 @@ export default {
 
 <style lang="scss" scoped>
 .popup-confirm {
-  position: relative;
   .popup-content {
     color: #333;
     font-size: 30rpx;
     line-height: 40rpx;
-    margin-bottom: 50rpx;
     text-align: justify;
+    margin: 0 32rpx 40rpx;
   }
   .popup-bottom {
-    width: 109.5%;
-    position: absolute;
-    left: -24rpx;
-    bottom: -89rpx;
-    font-size: 32rpx;
     color: #333;
     .popup-btn {
-      width: calc(109.5% / 2);
+      width: calc(100% / 2);
       height: 112rpx;
       line-height: 112rpx;
       text-align: center;

src/components/publish-bottom/publish-bottom.vue

@@ -0,0 +1,47 @@
+<!--
+ ****--@date 2024-06-10 15:08:22
+ ****--@author yizhiyang
+ ****--@description  底部发布评论按钮
+-->
+<template>
+  <view class="fl-flex publish-bottom">
+    <u--input
+      placeholder="说点什么..."
+      shape="circle"
+      v-model="value"
+      border="none"
+      :customStyle="customStyleInput"
+    ></u--input>
+    <u-button text="发布" :customStyle="customStyleBtn" color="#215EBE"></u-button>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'publish-bottom',
+  computed: {
+    customStyleBtn() {
+      return {
+        width: '96rpx',
+        height: '68rpx',
+        borderRadius: ' 8rpx',
+        marginLeft: '32rpx',
+      };
+    },
+    customStyleInput() {
+      return {
+        height: '70rpx !important',
+        backgroundColor: '#f5f6f8',
+        paddingLeft: '32rpx',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.publish-bottom {
+  height: 88rpx;
+  padding: 10rpx 32rpx;
+}
+</style>

src/components/publish-review/publish-review.vue

@@ -1,47 +1,54 @@
-<!--
- ****--@date 2024-06-10 15:08:22
- ****--@author yizhiyang
- ****--@description  底部发布评论按钮
--->
 <template>
-  <view class="fl-flex publish-review">
-    <u--input
-      placeholder="说点什么..."
-      shape="circle"
-      v-model="value"
-      border="none"
-      :customStyle="customStyleInput"
-    ></u--input>
-    <u-button text="发布" :customStyle="customStyleBtn" color="#215EBE"></u-button>
-  </view>
+  <u-popup :show="show" @close="close" closeable>
+    <view :style="{ height }" class="publish-review">
+      <view class="review-title">商品评价</view>
+      <view class="u-m-t-32">
+        <evaluate-list v-for="(item, index) in 1" :key="index"></evaluate-list>
+      </view>
+    </view>
+    <view class="review-button">
+      <publish-bottom></publish-bottom>
+    </view>
+  </u-popup>
 </template>
-
 <script>
 export default {
-  name: 'publish-review',
-  computed: {
-    customStyleBtn() {
-      return {
-        width: '96rpx',
-        height: '68rpx',
-        borderRadius: ' 8rpx',
-        marginLeft: '32rpx',
-      };
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    height: {
+      type: String,
+      default: '600rpx',
     },
-    customStyleInput() {
-      return {
-        height: '70rpx !important',
-        backgroundColor: '#f5f6f8',
-        paddingLeft: '32rpx',
-      };
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    close() {
+      this.$emit('close', false);
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scope>
 .publish-review {
-  height: 88rpx;
-  padding: 10rpx 32rpx;
+  padding: 32rpx;
+  .review-title {
+    font-size: 32rpx;
+    padding-bottom: 28rpx;
+    border-bottom: 2rpx solid #dddddd;
+  }
+  .review-button {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+  }
 }
 </style>

src/pagesHome/evaluateDetail/index.vue

@@ -2,7 +2,7 @@
   <view>
     <view class="evaluate-detail">
       <page-navbar bgColor="#fff" title="评价详情" />
-      <dynamic-list :list="list"></dynamic-list>
+      <dynamic-list :list="list" @message="handleMessage"></dynamic-list>
       <view class="fl-flex merchant-mine">
         <base-img
           src="/static/img.jpg"
@@ -30,26 +30,35 @@
 
       <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>
+        <evaluate-list v-for="(item, index) in 8" :key="index"></evaluate-list>
       </view>
     </view>
     <view class="evaluate-button">
-      <publish-review></publish-review>
+      <publish-bottom></publish-bottom>
     </view>
+    <publish-review :show="show" @close="handleClose"></publish-review>
   </view>
 </template>
 
 <script>
-import EvaluateItem from './evaluateItem.vue';
 export default {
   name: 'evaluate-detail',
-  components: { EvaluateItem },
   data() {
     return {
       list: [{}],
       value: 3,
+      show: false,
     };
   },
+  methods: {
+    handleMessage(item) {
+      console.log(item, 'item');
+      this.show = true;
+    },
+    handleClose(val) {
+      this.show = val;
+    },
+  },
 };
 </script>