12.0 init

src/routes/modules/cygxRoutes.js

@@ -289,6 +289,12 @@ export default [
           keepAlive: false,
         },
       },
+      {
+        path: "yanXuanSpecial",
+        component: () => import("@/views/rai_manage/reportManage/yanXuanSpecial.vue"),
+        name: "研选专栏",
+        hidden: false,
+      },
     ],
   },
 

src/views/rai_manage/reportManage/components/specialDlg.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="container special-dlg-container">
+    <el-dialog title="新建专栏作者" :visible.sync="addAuthorDlgVisible" width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
+      <el-autocomplete
+        class="inline-input"
+        style="width: 100%; margin-bottom: 20px"
+        v-model="keyAuthor"
+        :fetch-suggestions="querySearchHandler"
+        placeholder="请输入客户姓名"
+        :trigger-on-focus="false"
+      ></el-autocomplete>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleCloseAuthor">取 消</el-button>
+        <el-button type="primary" @click="addAuthorHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="驳回" :visible.sync="submitRejectDlgVisible" width="500px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
+      <el-input type="textarea" :rows="4" style="margin-bottom: 20px" v-model="textReject" placeholder="请输入驳回原因"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleCloseReject">取 消</el-button>
+        <el-button type="primary" @click="submitRejectHandler">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { raiInterface } from "@/api/api.js";
+export default {
+  name: "",
+  components: {},
+  props: {
+    addAuthorDlgVisible: {
+      default: false,
+      type: Boolean,
+    },
+    submitRejectDlgVisible: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      keyAuthor: "",
+      companyList: [],
+      textReject: "",
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    // 关闭添加作者的弹框
+    handleCloseAuthor() {
+      this.keyAuthor = "";
+      this.$emit("update:addAuthorDlgVisible", false);
+    },
+    // 作者弹框的搜索事件
+    async querySearchHandler(query, cb) {
+      cb([]);
+      if (!query) return;
+      const res = await raiInterface.activitySignupUserList({ KeyWord: query });
+      if (res.Ret === 200) {
+        console.log(res);
+        let arr =
+          res.Data.List && res.Data.List.length
+            ? res.Data.List.map((item) => {
+                return {
+                  ...item,
+                  value: item.RealName + " - " + item.Mobile + " - " + item.CompanyName,
+                };
+              })
+            : [];
+        this.companyList = arr;
+        cb(arr);
+      }
+    },
+    // 作者添加的事件
+    addAuthorHandler() {
+      const isKey = this.companyList.some((item) => item.value === this.keyAuthor);
+      if (!isKey) return this.$message.error("请输入客户姓名!");
+    },
+    /* **************************************************** */
+    // 驳回的弹框关闭事件
+    handleCloseReject() {},
+    // 驳回的弹框确定事件
+    submitRejectHandler() {
+      if (!textReject) return;
+      // 提交成功后刷新页面
+    },
+  },
+};
+</script>
+<style lang="scss">
+.special-dlg-container {
+  .el-dialog .el-input {
+    width: 100%;
+  }
+}
+</style>

src/views/rai_manage/reportManage/yanXuanSpecial.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="container yanxuan-special">
+    <div class="author-content">
+      <div class="top">
+        <div>专栏作者</div>
+        <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
+      </div>
+      <div class="author-ul">
+        <div class="author-li">
+          <div class="avatar">
+            <img src="~@/assets/img/document_m/default-img.png" alt="" />
+          </div>
+          <div class="info-content">
+            <p class="info-name">沈瑛岚-15757749952</p>
+            <p>昵称：Yoya</p>
+            <p>公司名称公司名称</p>
+          </div>
+          <div class="switch-box">
+            <!-- <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用"> </el-switch> -->
+            <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
+          </div>
+        </div>
+        <div class="divider-box"></div>
+      </div>
+    </div>
+    <div class="examine-content">
+      <p style="margin-bottom: 20px">待审核内容</p>
+      <div class="info-box" style="margin-bottom: 20px">
+        <div class="avatar">
+          <img src="~@/assets/img/document_m/default-img.png" alt="" />
+        </div>
+        <div class="info-content">
+          <p class="info-name">作者昵称作者昵称</p>
+          <p>2023.08.01 14:13:12</p>
+        </div>
+      </div>
+      <div class="content-detial">
+        笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容
+        笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容
+        笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容
+        笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容
+        笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容笔记内容
+      </div>
+      <div class="look-all-txt">查看全文</div>
+      <div class="file-box">文件文件</div>
+      <div class="img-box">
+        <img src="~@/assets/img/document_m/default-img.png" alt="" />
+      </div>
+      <div>
+        <div class="lable-li">标签1</div>
+        <div class="lable-li">标签1</div>
+        <div class="lable-li">标签1</div>
+        <div class="lable-li">标签1</div>
+        <div class="lable-li">标签1</div>
+      </div>
+      <div class="bottom-button">
+        <div @click="submitRejectDlgVisible = true">驳回</div>
+        <div @click="openMessage">通过</div>
+      </div>
+    </div>
+    <special-dlg :addAuthorDlgVisible.sync="addAuthorDlgVisible" :submitRejectDlgVisible.sync="submitRejectDlgVisible" />
+  </div>
+</template>
+
+<script>
+import SpecialDlg from "./components/specialDlg.vue";
+export default {
+  name: "",
+  components: { SpecialDlg },
+  props: {},
+  data() {
+    return {
+      addAuthorDlgVisible: false,
+      submitRejectDlgVisible: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    // 审核通过的确认按钮
+    openMessage() {
+      this.$confirm("确定通过此内容在小程序展示吗？", "审核通过", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消",
+          });
+        });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+div {
+  box-sizing: border-box;
+}
+.yanxuan-special {
+  display: flex;
+  justify-content: space-between;
+  .author-content {
+    width: 400px;
+    height: calc(100vh - 118px);
+    border-radius: 4px;
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    .top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .author-ul {
+      padding-bottom: 10px;
+      height: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      .author-li {
+        flex: 1;
+        height: 116px;
+        padding: 20px;
+        display: flex;
+        justify-content: space-between;
+
+        .switch-box {
+          width: 30px;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+  .divider-box {
+    margin: 10px 0;
+    border: 1px solid #dcdfe6;
+  }
+  .info-content {
+    flex: 1;
+    padding-left: 16px;
+    color: #999999;
+    p:nth-child(2) {
+      margin: 8px 0;
+    }
+  }
+  .avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: #d9d9d9;
+    flex-shrink: 0;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+  }
+  .info-name {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+  .examine-content {
+    margin-left: 20px;
+    padding: 20px;
+    flex: 1;
+    background: #fff;
+    .info-box {
+      display: flex;
+    }
+    .content-detial {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 8;
+    }
+    .look-all-txt {
+      color: #409eff;
+      font-size: 16px;
+      margin: 20px 0;
+      cursor: pointer;
+    }
+    .file-box {
+      height: 64px;
+    }
+    .img-box {
+      margin: 20px 0;
+      height: 112px;
+      img {
+        width: 112px;
+        height: 100%;
+        margin-right: 30px;
+      }
+    }
+    .lable-li {
+      display: inline-block;
+      padding: 4px 20px;
+      height: 28px;
+      border-radius: 48px;
+      margin: 0 15px 15px 0;
+      border: 1px solid #409eff;
+      background-color: #eaf3fe;
+      color: #409eff;
+    }
+    .bottom-button {
+      display: flex;
+      justify-content: center;
+      div {
+        cursor: pointer;
+        width: 120px;
+        height: 40px;
+        padding: 10px 46px 10px 46px;
+        border-radius: 4px;
+        background: #c54322;
+      }
+      div:nth-child(2) {
+        margin-left: 20px;
+        background: #67c23a;
+      }
+    }
+  }
+}
+</style>