feat: 完成评论功能

src/components/discuss-card/index.vue

@@ -16,8 +16,10 @@ defineProps({
 <template>
   <view class="discuss-card">
     <view class="card-title">
-      菜品评价
-      <template v-if="num1 !== undefined"> { num1 / num2 } </template>
+      {{ title }}
+      <template v-if="num1 !== undefined">
+        （{{ num1 }} / {{ num2 }}）
+      </template>
     </view>
     <view class="card-content">
       <slot></slot>
@@ -31,6 +33,7 @@ defineProps({
   width: 100%;
   padding: 40rpx;
   border-radius: 20rpx;
+  margin-bottom: 40rpx;
 }
 .card-title {
   font-weight: 700;

src/components/footer-button/index.vue

@@ -0,0 +1,56 @@
+<script setup>
+import CommonButton from "../common-button";
+const props = defineProps({
+  bgColor: {
+    type: String,
+    default: "#C62223",
+  },
+  color: {
+    type: String,
+    default: "#fff",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: "100%",
+  },
+});
+const emit = defineEmits(["click"]);
+const btnClick = () => {
+  emit("click");
+};
+</script>
+
+<template>
+  <view class="footer-button">
+    <view class="footer-area-button"></view>
+    <view class="footer-button-wrap">
+      <CommonButton
+        :bgColor="bgColor"
+        :color="color"
+        :disabled="disabled"
+        :width="width"
+        @click="btnClick"
+      >
+        <slot></slot>
+      </CommonButton>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.footer-area-button {
+  height: 40px;
+  margin-top: 40rpx;
+}
+.footer-button-wrap {
+  position: fixed;
+  padding: 0 40rpx;
+  bottom: 40rpx;
+  left: 0;
+  right: 0;
+}
+</style>

src/components/user-discuss/index.vue

@@ -1,9 +1,10 @@
 <script setup>
+import { watch } from "vue";
 import { ref, reactive } from "vue";
-import { Camera } from "@/assets/svg";
+// import { Camera } from "@/assets/svg";
 
 // 传入信息
-defineProps({
+const props = defineProps({
   avatarUrl: {
     type: String,
   },
@@ -18,27 +19,47 @@ defineProps({
     type: String,
     default: "",
   },
+  modelValue: {
+    type: Object,
+    default: () => ({}),
+  },
   data: {
     type: Object,
     default: () => ({}),
   },
 });
 const isFocus = ref(false);
-//
 const formData = reactive({
-  score: "",
-  content: "",
-  filedIds: [],
+  score: 5,
+  comment: "",
 });
-const imgsList = ref([]);
+// 监听分数变化
+watch(
+  () => formData.score,
+  () => {
+    changeValue();
+  }
+);
+// 监听评论内容变化
+watch(
+  () => formData.comment,
+  () => {
+    changeValue();
+  }
+);
+// 修改值
+const emit = defineEmits(["update:modelValue"]);
+function changeValue() {
+  const newItems = { ...props.modelValue };
+  Object.assign(newItems, formData);
+  emit("update:modelValue", newItems);
+}
+
+// const imgsList = ref([]);
+// 设置激活样式
 function changeIsFocus(flag) {
   isFocus.value = flag;
 }
-defineExpose({
-  getFormData() {
-    return formData;
-  },
-});
 </script>
 
 <template>
@@ -52,7 +73,7 @@ defineExpose({
       <view class="user-discuss-info">
         <view class="user-name">{{ cardName }}</view>
         <view class="star">
-          <view class="star-text">评分</view>
+          <view class="star-text">score</view>
           <view class="star-area">
             <uni-rate
               :max="5"
@@ -76,11 +97,11 @@ defineExpose({
           :maxlength="1000"
           @focus="changeIsFocus(true)"
           @blur="changeIsFocus(false)"
-          v-model="formData.content"
+          v-model="formData.comment"
         >
         </textarea>
       </view>
-      <view class="pictures">
+      <!-- <view class="pictures">
         <view class="picture-list">
           <view
             class="picture-list-item"
@@ -95,12 +116,15 @@ defineExpose({
             </view>
           </view>
         </view>
-      </view>
+      </view> -->
     </view>
   </view>
 </template>
 
 <style lang="scss" scoped>
+.user-discuss {
+  margin-top: 40rpx;
+}
 .user-avatar {
   border: 2rpx solid #f2f2f2;
   border-radius: 10rpx;
@@ -133,14 +157,14 @@ defineExpose({
     }
   }
   .star-text {
-    font-size: 24rpx;
+    font-size: 34rpx;
     color: #888;
   }
 }
 .user-discuss-content {
   width: 100%;
   border-radius: 20rpx;
-  margin-top: 20rpx;
+  margin-top: 40rpx;
   background-color: #f7f6f9;
   min-height: 140rpx;
   padding: 20rpx;

src/pages.json

@@ -9,16 +9,16 @@
   "pages": [
     //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
     {
-      "path": "pages/discuss/index",
+      "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "发表评价",
-        "navigationBarBackgroundColor": "#ffffff"
+        "navigationStyle": "custom"
       }
     },
     {
-      "path": "pages/index/index",
+      "path": "pages/discuss/index",
       "style": {
-        "navigationStyle": "custom"
+        "navigationBarTitleText": "Leave review",
+        "navigationBarBackgroundColor": "#ffffff"
       }
     },
     {

src/pages/discuss/index.vue

@@ -1,17 +1,106 @@
 <script setup>
+import { reactive } from "vue";
 import DiscussCard from "@/components/discuss-card";
 import UserDiscuss from "@/components/user-discuss";
-import CommonButton from "@/components/common-button";
+import FooterButton from "@/components/footer-button";
+import { fetchCommentInfo, submitComment } from "@/services/modules/comment";
+import { showToast } from "@/utils/interactive-feedback";
+import { onLoad } from "@dcloudio/uni-app";
+const data = reactive({
+  list1: [], // 菜品评价
+  list2: [], // 商家评价
+});
+const formData = reactive({
+  list1: [],
+  list2: [],
+});
+// 提交数据
+const postInfo = reactive({
+  orderId: "1772480007187632128",
+  orderMealReviews: [],
+});
+// 获取页面参数
+onLoad((options) => {
+  if (options && options.id) {
+    postInfo.id = options.id;
+  }
+});
+function addFormData(item, list) {
+  const newItem = JSON.parse(JSON.stringify(item));
+  list.push(newItem);
+}
+// 获取数据
+async function getData() {
+  const res = await fetchCommentInfo(postInfo.orderId);
+  const resData = res.data;
+  const list1 = [];
+  const list2 = [];
+  for (let item of resData) {
+    if (item.reviewType === 1) {
+      list1.push(item);
+      addFormData(item, formData.list1);
+    } else {
+      list2.push(item);
+      addFormData(item, formData.list2);
+    }
+  }
+  // 分别设置菜品评价与商家评价
+  data.list1 = list1;
+  data.list2 = list2;
+}
+getData();
+
+// 提交
+function submit() {
+  const info = [...formData.list1, ...formData.list2];
+  postInfo.orderMealReviews = info;
+  submitComment(postInfo).then((res) => {
+    if (res.code === 200) {
+      uni.showModal({
+        title: "Prompt",
+        content: "Registered successfully",
+        showCancel: false,
+        confirmText: "confirm",
+        success() {
+          window.opener = null;
+          window.open("", "_self");
+          window.close();
+        },
+      });
+    } else {
+      showToast(res.msg);
+    }
+  });
+}
 </script>
 
 <template>
   <view class="discuss">
-    <DiscussCard>
-      <UserDiscuss />
-    </DiscussCard>
-    <view class="discuss-footer">
-      <CommonButton>确定</CommonButton>
+    <view class="card-list">
+      <DiscussCard title="Dishes evaluation">
+        <!-- 菜品评论内容列表 -->
+        <UserDiscuss
+          v-for="(item, index) in data.list1"
+          :key="index"
+          v-model="formData.list1[index]"
+          :avatarUrl="item.link"
+          :cardName="item.nameEn"
+          placeholder="Please enter a review"
+        />
+      </DiscussCard>
+      <DiscussCard title="Business reviews">
+        <!-- 商家评论列表 -->
+        <UserDiscuss
+          v-for="(item, index) in data.list2"
+          :key="index"
+          :avatarUrl="item.link"
+          :cardName="item.nameEn"
+          v-model="formData.list2[index]"
+          placeholder="Please enter a review"
+        />
+      </DiscussCard>
     </view>
+    <FooterButton @click="submit">confirm</FooterButton>
   </view>
 </template>
 
@@ -24,11 +113,4 @@ page {
 .discuss {
   background: #f5f5f5;
 }
-.discuss-footer {
-  position: fixed;
-  padding: 0 40rpx;
-  bottom: 40rpx;
-  left: 0;
-  right: 0;
-}
 </style>

src/services/modules/comment.js

@@ -0,0 +1,19 @@
+import request from "..";
+
+// 获取提交信息
+export function fetchCommentInfo(id) {
+  return request.post({
+    url: "/v1/external/orderReviewPage",
+    data: {
+      id,
+    },
+  });
+}
+
+// 评论
+export function submitComment(data) {
+  return request.post({
+    url: "/v1/external/orderReview",
+    data,
+  });
+}

vite.config.js

@@ -1,28 +1,33 @@
-import { defineConfig } from 'vite'
-import uni from '@dcloudio/vite-plugin-uni'
-import { fileURLToPath, URL } from 'node:url'
-
+import { defineConfig } from "vite";
+import uni from "@dcloudio/vite-plugin-uni";
+import { fileURLToPath, URL } from "node:url";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  transpileDependencies: ['@dcloudio/uni-ui'],
-  plugins: [
-    uni(),
-  ],
+  transpileDependencies: ["@dcloudio/uni-ui"],
+  plugins: [uni()],
   server: {
     proxy: {
       // 接口地址代理
-      '/api': {
-        target: 'http://kcapp.gzzzyd.com/', // 接口的域名
+      "/api": {
+        // target: 'http://kcapp.gzzzyd.com/', // 接口的域名
+        target: "http://47.109.38.72:10887/",
         secure: false, // 如果是https接口，需要配置这个参数
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
-        rewrite: path => path.replace(/^\/demo/, '/demo')
+        rewrite: (path) => path.replace(/^\/demo/, "/demo"),
       },
-    }
+      "/v1": {
+        // target: 'http://kcapp.gzzzyd.com/', // 接口的域名
+        target: "http://192.168.1.196:10900/",
+        secure: false, // 如果是https接口，需要配置这个参数
+        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
+        rewrite: (path) => path.replace(/^\/demo/, "/demo"),
+      },
+    },
   },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
-})
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});