更新

src/api/modules/dynamics.ts

@@ -40,6 +40,18 @@ export const deleteDynamics = data => {
     data
   });
 }
+// 删除评论
+export const deleComment = data => {
+  return http.request<Result>("post", "/adminapi/UserZone/del_comment", {
+    data
+  });
+}
+// 回复评论
+export const replyCommentData = data => {
+  return http.request<Result>("post", "/adminapi/UserZone/comment_zone", {
+    data
+  });
+}
 export const updateSataus = data => {
   return http.request<Result>("post", "/adminapi/UserZone/zone_top_or_show", {
     data

src/utils/http/config.ts

@@ -1,4 +1,4 @@
-export const URL = "https://qixinghuishen.qxhs.xyz";
+export const URL = "https://yushengapi.qxyushen.top";
 // export const URL = "https://test.vespa.qxyushen.top";
 // 声网appId 在这里换
 export const appIdBySw = '02f7339ec98947deaeab173599891932';

src/views/dynamics/dynamicsList/detail.vue

@@ -1,10 +1,66 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { message } from "@/utils/message";
+import { ref, onMounted, h } from "vue";
+import { addDialog } from "@/components/ReDialog";
+import replyView from './reply.vue';
 const props = defineProps(["userInfo"]);
+import {
+  deleComment,
+  getDynamicsInfo,
+  replyCommentData
+} from "@/api/modules/dynamics";
 const userData = ref({ ...props.userInfo })
-const previewIndex = ref(0)
+const formRef = ref();
 const imageDetail = ref(props.userInfo.images ? props.userInfo.images.split(',') : [])
-console.log(imageDetail.value)
+const deleteComment = async (rowData) => {
+  const { code } = await deleComment({ id: rowData.id });
+  if (code) {
+    message(`已删除这条评论`, {
+      type: "success"
+    });
+    getInfo()
+  }
+}
+const getInfo = async () => {
+  const { code, data } = await getDynamicsInfo({ id: userData.value.id })
+  userData.value = {}
+  userData.value = code ? { ...data } : {}
+  // console.log(userInfoRes)
+}
+const replyComment = async (rowData) => {
+  addDialog({
+    title: `回复内容`,
+    props: {
+      formInline: {
+        id: rowData.id,
+        content: ""
+      }
+    },
+    width: "50%",
+    closeOnClickModal: false,
+    contentRenderer: () => h(replyView, { ref: formRef, formInline: null }),
+    beforeSure: (done, { options }) => {
+      const FormRef = formRef.value.getRef();
+      const curData = options.props.formInline;
+      const saveData = async form => {
+        const { code } = await replyCommentData(form);
+        if (code) {
+          message("回复成功", { type: "success" });
+          getInfo()
+          done();
+        } else {
+          message("回复失败", { type: "error" });
+        }
+      };
+      FormRef.validate(valid => {
+        if (valid) {
+          console.log("curData", curData);
+          saveData(curData)
+        }
+      });
+    }
+  });
+}
 </script>
 <template>
   <div class="viewPage">
@@ -34,7 +90,7 @@ console.log(imageDetail.value)
     </div>
     <div>
       <div>
-        <div class="title">全部评论 <span>{{ userData.comment_lists.length }} 条</span></div>
+        <div class="title">全部评论 <span>{{ userData.comment_num }} 条</span></div>
         <template v-if="userData.comment_lists">
           <div class="commentlist" v-for="item in userData.comment_lists" :key="item">
             <div class="avatar">
@@ -44,12 +100,23 @@ console.log(imageDetail.value)
             <div class="content">
               <div class="nickname">{{ item.nickname }}</div>
               <div>{{ item.content }}</div>
-              <div class="replay" v-if="item.replies.length">
+              <div style="margin-top: 10px;text-align: right;">
-                <div class="replayItem" v-for="ele in item.replies" :key="ele">
+                <el-button type="text" @click="deleteComment(item)">删除</el-button>
-                  <span class="nickname">{{ ele.nickname }}</span> 回复 <span class="nickname">{{ ele.reply_to_user
+                <el-button type="text" @click="replyComment(item)">回复</el-button>
-                  }}</span> : <span>{{
+              </div>
-                      ele.content
+              <div class="replay" v-if="item.replies.length" style="margin-top: 20px;">
-                    }}</span>
+                <div class="replayItem" v-for="ele in item.replies" :key="ele"
+                  style="display: inline-flex;justify-content: space-between; width: 100%;">
+                  <div>
+                    <span class="nickname">{{ ele.nickname }}</span> 回复 <span class="nickname">{{ ele.reply_to_user
+                    }}</span> : <span>{{
+                        ele.content
+                      }}</span>
+                  </div>
+                  <div>
+                    <el-button type="text" @click="deleteComment(ele)">删除</el-button>
+                    <el-button type="text" @click="replyComment(ele)">回复</el-button>
+                  </div>
                 </div>
               </div>
             </div>

src/views/dynamics/dynamicsList/reply.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const ruleFormRef = ref();
+const formRules = ref({
+  content: [{ required: true, message: "请输入回复内容", trigger: "blur" }, { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }]
+});
+const props = defineProps(["formInline"]);
+const newFormInline = ref(
+  props.formInline
+    ? props.formInline
+    : {
+      id: "",
+      content: ""
+    }
+);
+function getRef() {
+  return ruleFormRef.value;
+}
+
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
+    <el-form-item label="回复内容" prop="content">
+      <el-input v-model="newFormInline.content" type="textarea" max="500" clearable placeholder="请输入内容" />
+    </el-form-item>
+  </el-form>
+</template>

vite.config.ts

@@ -37,7 +37,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
               proxyReq.method = 'OPTIONS';
               // https://test.vespa.qxyushen.top
               //   'http://yushenggliht.qxyushen.top'
-              res.setHeader('Access-Control-Allow-Origin', 'http://admingl.qxhs.xyz');
+              res.setHeader('Access-Control-Allow-Origin', 'http://yushenggliht.qxyushen.top');
               // res.setHeader('Access-Control-Allow-Origin', 'https://test.vespa.qxyushen.top');
               res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
               res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');