From 07141014a9cbe532a00357cea8d44740a61a56ba Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Thu, 16 Feb 2023 16:59:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E9=97=BB=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/project/qujing/AppContent/AppContent.vue  | 224 +++++++++++++
 .../qujing/AppContent/contentDetail.vue       | 295 ++++++++++++++++++
 .../qujing/AppContent/contentManager.vue      | 103 ++++++
 src/project/qujing/AppHome/AppHome.vue        |   4 +-
 4 files changed, 624 insertions(+), 2 deletions(-)
 create mode 100644 src/project/qujing/AppContent/AppContent.vue
 create mode 100644 src/project/qujing/AppContent/contentDetail.vue
 create mode 100644 src/project/qujing/AppContent/contentManager.vue

diff --git a/src/project/qujing/AppContent/AppContent.vue b/src/project/qujing/AppContent/AppContent.vue
new file mode 100644
index 0000000..30f3267
--- /dev/null
+++ b/src/project/qujing/AppContent/AppContent.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="wrapper" :style="{ paddingTop: categorys.length ? '54px' : '10px' }" v-if="pageShow">
+    <div class="tabs">
+      <u-tabs
+          :list="categorys && categorys.map(e=>({name:e.categoryName}))"
+          font-size="36"
+          bg-color="transparent"
+          :bold="false"
+          inactive-color="#ccddff"
+          :is-scroll="true"
+          :gutter="16"
+          active-color="#fff"
+          :current="index"
+          @change="tabChange">
+      </u-tabs>
+    </div>
+    <div class="list-wrap" v-if="categoryList && categoryList.length">
+      <div class="list-card" hover-class="bg-hover" v-for="(category,index) in categoryList" :key="index"
+           @click="$linkTo('./contentDetail?id='+category.id)">
+        <div class="header">{{ category.title }}</div>
+        <div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length == 1">
+          <img class="img" :src="item.url" v-for="(item,index) in category.files" :key="index.id" alt="">
+        </div>
+        <div class="content-wrap" v-if="category.contentType==0 && category.files && category.files.length > 1">
+          <img class="min-img" :src="item.url" v-for="(item,index) in category.files && category.files.slice(0,3)"
+               :key="index.id" alt="">
+        </div>
+        <div class="content-wrap" v-if="category.contentType==1">
+          <img class="img" :src="category.pictureUrl" alt="">
+          <img class="play-icon" src="https://cdn.cunwuyun.cn/AppContent/play.png" alt="">
+        </div>
+        <div class="bottom">
+          <div class="left">
+            <div class="tag">{{ category.categoryName || names }}</div>
+            {{ category.createTime }}
+          </div>
+          <div class="right">
+            <em>{{ category.viewCount }}</em>
+            人看过
+          </div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty v-else></AiEmpty>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "AppContent",
+  appName: "内容管理",
+  data() {
+    return {
+      index: 0,
+      names: "",
+      categorys: [],
+      categoryList: [],
+      pageShow: false,
+      search: {}
+    }
+  },
+  onLoad(option) {
+    this.$loading()
+    this.names = option.names;
+    this.search.areaId = option.areaId || this.user.areaId || ""
+    this.getName();
+    if (option.names) {
+      uni.setNavigationBarTitle({
+        title: option.names
+      })
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    active() {
+      return {
+        fontSize: "22px",
+        color: "#fff",
+      };
+    },
+  },
+  methods: {
+    getName() {
+      this.$instance.post("/app/appcontentmoduleinfo/listByName", null, {
+        params: {names: this.names}
+      }).then(res => {
+        if (res?.data) {
+          this.categorys = res.data?.[0]?.categoryList || [];
+          this.search.moduleId = res.data?.[0]?.id || "";
+          this.search.categoryId = res.data?.[0]?.categoryList?.[0]?.id || "";
+          this.getCategoryList();
+        } else {
+          this.$hideLoading()
+        }
+      })
+    },
+    tabChange(e) {
+      this.index = e
+      this.search.categoryId = this.categorys?.[e]?.id
+      this.getCategoryList();
+    },
+    getCategoryList() {
+      this.$instance.post("/app/appcontentinfo/list", null, {
+        params: {...this.search, size: 10}
+      }).then(res => {
+        if (res?.data) {
+          this.categoryList = this.current > 1 ? [...this.categoryList, ...res.data.records] : res.data.records;
+        }
+        this.pageShow = true
+        this.$hideLoading()
+      })
+    },
+  },
+  onReachBottom() {
+    this.current++;
+    this.getCategoryList();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  padding-top: 100px;
+
+  .list-wrap {
+    box-sizing: border-box;
+    padding: 32px;
+
+    .list-card {
+      width: 100%;
+      min-height: 100px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      box-sizing: border-box;
+      padding: 32px;
+      margin-bottom: 24px;
+
+      .header {
+        font-size: 36px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 50px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      .content-wrap {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+        margin-top: 24px;
+        position: relative;
+
+        .img {
+          width: 100%;
+          height: 350px;
+        }
+
+        .min-img {
+          width: 204px;
+          height: 204px;
+        }
+
+        .play-icon {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      .bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 24px;
+
+        .left {
+          display: flex;
+          align-items: center;
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+
+          .tag {
+            width: 144px;
+            height: 48px;
+            background: #EEEEEE;
+            border-radius: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28px;
+            font-weight: 400;
+            color: #999999;
+            margin-right: 16px;
+          }
+        }
+
+        .right {
+          font-size: 28px;
+          font-weight: 400;
+          color: #999999;
+          display: flex;
+          align-items: center;
+
+          em {
+            font-style: normal;
+            color: #4181FF;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/project/qujing/AppContent/contentDetail.vue b/src/project/qujing/AppContent/contentDetail.vue
new file mode 100644
index 0000000..385fde9
--- /dev/null
+++ b/src/project/qujing/AppContent/contentDetail.vue
@@ -0,0 +1,295 @@
+<template>
+  <section class="contentDetail">
+    <AiDetail :detail="detail" :props="props"/>
+    <u-gap height="16"/>
+    <AiComment v-if="detail.id&&detail.isComment==1" :bid="detail.id"/>
+    <div class="btn_box">
+      <div class="input_btn" @click="showSend = true">我来说两句...</div>
+      <div class="comment" @click="showComment = true;getComment()">
+        <img src="https://cdn.cunwuyun.cn/qujing/message.png" alt="">
+        <div class="comm_num">
+          <span>{{ commentList.length || 0}}</span><span v-show="commentList.length > 999">+</span>
+        </div>
+      </div>
+    </div>
+
+    <u-popup v-model="showComment" mode="bottom" border-radius="32">
+			<h4 class="message_num">共{{ commentList.length }}条评论</h4>
+      <div v-if="commentList.length">
+        <div class="comment_card" v-for="item in commentList" :key="item.id">
+          <div class="avatar">
+            <img :src="item.avatar" alt="" v-if="item.avatar">
+            <img src="https://cdn.cunwuyun.cn/shandong10086/avatar.png" alt="" v-else>
+          </div>
+          <div class="comment_info">
+            <div class="avatar_info">
+              <div class="avatar_name">{{ item.name }}</div>
+              <div class="avatar_time">{{ item.commentTime }}</div>
+            </div>
+            <div class="comm_content">{{ item.content }}</div>
+          </div>
+        </div>
+      </div>
+      <AiEmpty :description="`暂无相关评论`" class="emptyWrap" v-else/>
+
+      <div class="comm_input_btn" @click="showSend = true,showComment= false">
+        <div>我来说两句...</div>
+      </div>
+		</u-popup>
+
+    <u-popup v-model="showSend" mode="bottom" border-radius="32">
+			<div class="send_box">
+        <div class="text">
+          <textarea
+              @blur="height = 0"
+              placeholder-style="color: #999;font-size: 16px;"
+              v-model="content"
+              :cursor-spacing="40"
+              placeholder="我来说两句..."
+              maxlength="100"
+              @keyboardheightchange="keyboard">
+          </textarea>
+        </div>
+        <div class="send_btn" @click="sendComment">发送</div>
+      </div>
+		</u-popup>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "contentDetail",
+  appName: "内容详情",
+  data() {
+    return {
+      detail: {title: "内容详情"},
+      props: {
+        count: "viewCount"
+      },
+      id: "",
+
+      showComment: false,
+      showSend: false,
+      content: '',
+      height: 0,
+      data: {},
+      commentList: [],
+      id: '',
+      flag: false,
+    }
+  },
+  onLoad({id}) {
+    if (id) {
+      this.id = id
+      this.getDetail()
+      this.getComment()
+    }
+  },
+  methods: {
+    getDetail(id) {
+      this.$instance.post(`/app/appcontentinfo/queryDetailById`, null, {
+        params: {id: this.id}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data
+        }
+      })
+    },
+    // 评论集合
+    getComment() {
+      this.$instance.post(`/app/appcontentcomment/listForWX?contentId=${this.id}`).then(res=> {
+        if(res?.data) {
+          this.commentList = res.data.records
+        }
+      })
+    },
+    // 新增评论
+    sendComment() {
+      if(this.flag) return
+
+      if(!this.content) {
+        return this.$u.toast('请输入内容')
+      }
+
+      this.flag = true
+      this.$instance.post(`/app/appcontentcomment/addByApplet`,{
+        contentId: this.detail.id,
+        content: this.content,
+        type: '1'
+      }).then(res=> {
+        if(res.code==0) {
+          this.flag = false
+          this.showSend = false
+          this.getComment()
+          this.getDetail()
+        }
+      }).catch(err=> {
+        this.flag = false
+        this.showSend = false
+        this.$u.toast(err.msg)
+      })
+    },
+  },
+  onShareAppMessage() {
+    return {
+      title: this.detail.title,
+      path: '/AppHome/contentDetail?id=' + this.id
+    };
+  },
+  onReachBottom() {
+    uni.$emit("moreComments")
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contentDetail {
+    .btn_box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 128px;
+    background: #fff;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    
+    .input_btn {
+      width: 87%;
+      height: 80px;
+      line-height: 80px;
+      padding-left: 32px;
+      box-sizing: border-box;
+      background: #F4F5FA;
+      border-radius: 44px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #666666;
+      margin-right: 20px;
+    }
+
+    .comment {
+      position: relative;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+
+      .comm_num {
+        position: absolute;
+        left: 34px;
+        top: -10px;
+        background: #FFF;
+        color: #E23C3C;
+        font-weight: 600;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .message_num {
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    font-weight: 400;
+    font-size: 28rpx;
+    color: #333333;
+  }
+
+  .comment_card {
+    display: flex;
+    padding: 24px 32px;
+    box-sizing: border-box;
+
+    .avatar {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .comment_info {
+      margin-left: 16px;
+      width: calc(100% - 80px);
+
+      .avatar_info {
+        display: flex;
+        justify-content: space-between;
+
+        .avatar_name {
+          font-weight: 500;
+          font-size: 28px;
+          color: #333333;
+        }
+        .avatar_time {
+          font-weight: 400;
+          font-size: 26px;
+          color: #999999;
+        }
+      }
+
+      .comm_content {
+        margin-top: 8px;
+        font-weight: 400;
+        font-size: 32rpx;
+        color: #333333;
+      }
+    }
+  }
+
+  .comm_input_btn {
+    width: 100%;
+    height: 128px;
+    background: #fff;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    div {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      padding-left: 32px;
+      box-sizing: border-box;
+      background: #F4F5FA;
+      border-radius: 44px;
+      font-weight: 400;
+      font-size: 32px;
+      color: #666666;
+    }
+  }
+
+  .send_box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 32px;
+    box-sizing: border-box;
+    .text {
+      textarea { 
+        background: #F4F5FA;
+        border-radius: 16px;
+        padding: 16px;
+        box-sizing: border-box;
+        height: 128px;
+        width: 80vw;
+      }
+    }
+    .send_btn {
+      width: 80px;
+      height: 80px;
+      line-height: 80px;
+      text-align: right;
+      font-weight: 500;
+      font-size: 34rpx;
+      color: #2D7DFF;
+    }
+  }
+}
+</style>
diff --git a/src/project/qujing/AppContent/contentManager.vue b/src/project/qujing/AppContent/contentManager.vue
new file mode 100644
index 0000000..c759ca6
--- /dev/null
+++ b/src/project/qujing/AppContent/contentManager.vue
@@ -0,0 +1,103 @@
+<template>
+  <section class="contentManager">
+    <AiNewsList :list="list" :loadmore="loadmore" @select="showDetail">
+      <template #header>
+        <div class="search-wrap">
+          <div class="search">
+            <u-icon name="search" color="rgba(255,255,255,0.5)" size="40"></u-icon>
+            <input placeholder="请输入需要搜索的内容" class="desc" placeholder-style="color:rgba(255,255,255,0.5);"
+                   confirm-type="search" @change="onChange"/>
+          </div>
+        </div>
+      </template>
+    </AiNewsList>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "contentManager",
+  appName: "搜索结果",
+  computed: {
+    ...mapState(['user']),
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    }
+  },
+  data() {
+    return {
+      list: [],
+      current: 1,
+      pages: 0,
+      name: "",
+    }
+  },
+  onLoad(params) {
+    if (params.moduleId) {
+      this.moduleId = params.moduleId
+      this.getData(params.moduleId)
+    }
+  },
+  methods: {
+    onChange(val) {
+      this.current = 1;
+      this.getData(val.detail.value);
+    },
+    getData(title = "") {
+      let {current} = this
+      this.moduleId && this.$instance.post("/app/appcontentinfo/list", null, {
+        params: {moduleId: this.moduleId, current, size: 10, title}
+      }).then(res => {
+        if (res?.data) {
+          this.list = current > 1 ? [...this.list, ...res.data.records] : res.data.records
+          this.pages = res.data.pages
+        }
+      })
+    },
+    handleSelectArea(e) {
+      this.search.areaId = e.id
+      this.getData()
+    },
+    showDetail(row) {
+      uni.navigateTo({url: `./contentDetail?id=${row.id}`})
+    },
+  },
+  onReachBottom() {
+    this.current++;
+    this.getData()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .search-wrap {
+  width: 750px;
+  height: 112px;
+  box-sizing: border-box;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #4181FF;
+
+  .search {
+    width: 100%;
+    height: 64px;
+    background: rgba(0, 0, 0, .2);
+    border-radius: 32px;
+    box-sizing: border-box;
+    padding: 0 32px;
+    display: flex;
+    align-items: center;
+
+    .desc {
+      flex: 1;
+      font-size: 28px;
+      color: #FFFFFF;
+      margin-left: 16px;
+    }
+  }
+}
+</style>
diff --git a/src/project/qujing/AppHome/AppHome.vue b/src/project/qujing/AppHome/AppHome.vue
index e86eddb..4d8101c 100644
--- a/src/project/qujing/AppHome/AppHome.vue
+++ b/src/project/qujing/AppHome/AppHome.vue
@@ -4,7 +4,7 @@
     <div class="header-bg">
       <div class="header-info">
         <div class="search-wrap">
-          <div class="search fill" @click="$linkTo('/mods/AppContent/contentManager?moduleId=' + search.moduleId)">
+          <div class="search fill" @click="$linkTo('../AppContent/contentManager?moduleId=' + search.moduleId)">
             <u-icon name="search" color="#333" size="40"></u-icon>
             <span class="desc">请输入需要搜索的内容</span>
           </div>
@@ -42,7 +42,7 @@
               :is-scroll="true" :current="index" @change="tabChange"/>
       <div class="list-wrap" v-if="categoryList && categoryList.length>0">
         <div class="list-card" v-for="(category,index) in categoryList" :key="index"
-             @click="$linkTo('/mods/AppContent/contentDetail?id='+category.id)">
+             @click="$linkTo('../AppContent/contentDetail?id='+category.id)">
           <div class="header">{{ category.title }}</div>
           <div class="content-wrap"
                v-if="category.contentType==0 && category.files && category.files.length<3&&category.files.length>0">