邻里互助

project/fengdu/app/AppHelp/components/Add.vue

@@ -8,8 +8,8 @@
       <ai-card title="发帖信息">
         <template #content>
           <el-form class="ai-form" :model="form" label-width="120px" ref="form">
-            <el-form-item label="单位" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择单位', trigger: 'change' }]">
+            <el-form-item label="单位" prop="publishDepartName" style="width: 100%;" :rules="[{ required: true, message: '请选择单位', trigger: 'change' }]">
-              <el-input size="small" placeholder="请选择..." disabled v-model="form.departmentName">
+              <el-input size="small" placeholder="请选择..." disabled v-model="form.publishDepartName">
                 <ai-wechat-selecter slot="append" isStrictly :instance="instance" @change="onChange" v-model="department" isChooseUnit>
                   <el-button type="info">选择</el-button>
                 </ai-wechat-selecter>
@@ -26,8 +26,8 @@
                 :limit="9">
               </ai-uploader>
             </el-form-item>
-            <el-form-item prop="title" style="width: 100%;" label="话题">
+            <el-form-item prop="themeId" style="width: 100%;" label="话题">
-              <el-input size="small" placeholder="请输入话题" v-model="form.title"></el-input>
+              <ai-select v-model="form.themeId" :selectList="talkList" placeholder="请选择话题" />
             </el-form-item>
           </el-form>
         </template>
@@ -54,14 +54,15 @@
       return {
         info: {},
         form: {
-          title: '',
+          themeId: '',
           content: '',
           files: [],
-          departmentName: '',
+          publishDepartName: '',
-          departmentIds: [],
+          publishDepartIdList: [],
         },
         id: '',
         department: [],
+        talkList: []
       }
     },
 
@@ -74,13 +75,15 @@
         this.id = this.params.id
         this.getInfo(this.params.id)
       }
+      this.getTalkList()
     },
 
     methods: {
       getInfo (id) {
-        this.instance.post(`/app/appactivityinfo/queryDetailById?id=${id}`).then(res => {
+        this.instance.post(`/app/appneighborhoodassistance/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
             this.form = res.data
+            this.form.publishDepartIdList = this.form.publishDepartId.split(',')
           }
         })
       },
@@ -88,8 +91,9 @@
       confirm () {
         this.$refs.form.validate((valid) => {
           if (valid) {
-            this.instance.post(`/app/appactivityinfo/addOrUpdate`, {
+            this.instance.post(`/app/appneighborhoodassistance/addOrUpdate`, {
-              ...this.form
+              ...this.form,
+              publishDepartId: this.form.publishDepartIdList.join(',')
             }).then(res => {
               if (res.code == 0) {
                 this.$message.success('提交成功')
@@ -111,13 +115,27 @@
 
       onChange (e) {
         if (e.length) {
-          this.form.departmentIds = e.map(v => v.id)
+          this.form.publishDepartIdList = e.map(v => v.id)
-          this.form.departmentName = e.map(v => v.name).join(',')
+          this.form.publishDepartName = e.map(v => v.name).join(',')
         } else {
-          this.form.departmentIds = ''
+          this.form.publishDepartIdList = ''
-          this.form.departmentName = ''
+          this.form.publishDepartName = ''
         }
       },
+
+      getTalkList() {
+        this.instance.post(`/app/appneighborhoodassistancetheme/list?size=100`).then(res => {
+          if (res.code == 0) {
+            this.talkList = []
+            res.data.records.map((item) => {
+              this.talkList.push({
+                dictName: item.title,
+                dictValue: item.id
+              })
+            })
+          }
+        })
+      },
     }
   }
 </script>

project/fengdu/app/AppHelp/components/Detail.vue

@@ -1,42 +1,68 @@
 <template>
   <ai-detail class="detail">
     <template slot="title">
-      <ai-title title="活动详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      <ai-title title="帖子详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
       </ai-title>
     </template>
     <template slot="content">
-      <ai-card title="基本信息">
+      <ai-card title="帖子信息">
         <template #content>
-          <ai-wrapper
+          <div class="talk-info">
-            label-width="120px">
+            <div class="user">
-            <ai-info-item label="活动标题" :value="info.title"></ai-info-item>
+              <img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt="">
-            <ai-info-item label="活动内容" isLine>
+              <div class="info">
-              <AiArticle :value="info.content"></AiArticle>
+                <h2>张三</h2>
-            </ai-info-item>
+                <div class="time-flex">
-            <ai-info-item label="附件" isLine>
+                  <span class="area-name">某某街道</span>
-              <AiFileList :fileList="info.files"></AiFileList>
+                  <span>2023-03-16 09:34:02</span>
-            </ai-info-item>
-          </ai-wrapper>
-        </template>
-      </ai-card>
-      <ai-card title="报名列表">
-        <template #content>
-          <ai-table
-            :tableData="tableData"
-            :col-configs="colConfigs"
-            :total="total"
-            style="margin-top: 6px;"
-            :current.sync="search.current"
-            :size.sync="search.size"
-            @getList="getList">
-            <!-- <el-table-column slot="options" width="90px" fixed="right" label="操作" align="center">
-              <template slot-scope="{ row }">
-                <div class="table-options">
-                  <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
                 </div>
-              </template>
+              </div>
-            </el-table-column> -->
+            </div>
-          </ai-table>
+            <div class="content">
+              <span>#【闲置物品交易】</span>啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦啦啦啦啦啦啦啦啦啦啦啊啦啦
+            </div>
+            <!-- <ai-uploader
+              :instance="instance"
+              disabled
+              v-model="row.urlList"
+              :limit="1">
+            </ai-uploader> -->
+          </div>
+          <div class="comment-list">
+            <div class="title">评论</div>
+            <div class="item">
+              <div class="user">
+                <img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt="">
+                <div class="info-flex">
+                  <h2>张三</h2>
+                  <span>2023-03-16 09:34:02</span>
+                </div>
+              </div>
+              <div class="content-flex">
+                <p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p>
+                <div>删除</div>
+              </div>
+              <div class="reply-list">
+                <div class="reply-item">
+                  <div class="reply-user">
+                    <img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt="">
+                    <div  class="reply-name">
+                      <span>李四</span>回复<span>张三</span>
+                    </div>
+                    <span class="reply-time">2023-03-16 09:34:02</span>
+                  </div>
+                  <div class="content-flex">
+                    <p>评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复</p>
+                    <div>删除</div>
+                  </div>
+                </div>
+              </div>
+              <div class="reply-more" @click="isShowMore = !isShowMore" :class="[isShowMore ? 'active' : '']">
+                <span class="line"></span>{{isShowMore ? '收起' : `展开3条回复`}}
+                <i class="el-icon-arrow-down"></i>
+              </div>
+            </div>
+          </div>
         </template>
       </ai-card>
     </template>
@@ -66,7 +92,14 @@
         },
         tableData: [],
         total: 0,
-        info: {}
+        info: {},
+        isShowMore: false
+      }
+    },
+
+    computed: {
+      getAvatar(row){
+        return row.avatar||row.photo||'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'
       }
     },
 
@@ -110,4 +143,152 @@
 </script>
 
 <style scoped lang="scss">
+.detail {
+  .talk-info {
+    .user {
+      display: flex;
+      margin-bottom: 8px;
+      img {
+        width: 80px;
+        height: 80px;
+        margin-right: 16px;
+        border-radius: 50%;
+      }
+      .info {
+        width: calc(100% - 96px);
+        h2 {
+          font-size: 24px;
+          line-height: 40px;
+          font-weight: 400;
+        }
+        .time-flex {
+          display: flex;
+          justify-content: space-between;
+          color: #999;
+          font-size: 14px;
+          line-height: 40px;
+          .area-name {
+            color: #666;
+          }
+        }
+      }
+    }
+    .content {
+      font-size: 16px;
+      line-height: 32px;
+      word-break: break-all;
+      span {
+        color: #26f;
+      }
+    }
+  }
+  .comment-list {
+    .title {
+      color: #333;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 40px;
+      margin-bottom: 8px;
+    }
+    .item {
+      border-bottom: 1px solid #ddd;
+      padding-bottom: 16px;
+      .user {
+        display: flex;
+        margin-bottom: 8px;
+        img {
+          width: 80px;
+          height: 80px;
+          margin-right: 16px;
+          border-radius: 50%;
+        }
+        .info-flex {
+          width: calc(100% - 96px);
+          display: flex;
+          justify-content: space-between;
+          h2 {
+            font-size: 24px;
+            line-height: 40px;
+            font-weight: 400;
+          }
+          span {
+            color: #999;
+            font-size: 14px;
+          }
+        }
+      }
+      .content-flex {
+        display: flex;
+        font-size: 16px;
+        line-height: 30px;
+        margin-bottom: 8px;
+        p {
+          width: calc(100% - 50px);
+          word-break: break-all;
+        }
+        div {
+          color: #26f;
+          width: 50px;
+          text-align: right;
+        }
+      }
+      .reply-list {
+        padding-left: 100px;
+        .reply-item {
+          margin-bottom: 8px;
+          .reply-user {
+            font-size: 14px;
+            margin-bottom: 8px;
+            img {
+              width: 50px;
+              height: 50px;
+              border-radius: 50%;
+              vertical-align: middle;
+              margin-right: 8px;
+            }
+            .reply-name {
+              display: inline-block;
+              color: #333;
+              width: 300px;
+              span {
+                display: inline-block;
+                color: #666;
+                margin: 0 8px;
+              }
+            }
+            .reply-time {
+              color: #999;
+            }
+          }
+          .content-flex {
+            font-size: 14px;
+            line-height: 24px;
+          }
+        }
+      }
+      .reply-more {
+        font-size: 16px;
+        line-height: 28px;
+        color: #333;
+        .line {
+          display: inline-block;
+          width: 120px;
+          border-top: 1px solid #eee;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+
+        .el-icon-arrow-down {
+          transition: all ease 0.5s;
+          transform: rotate(180deg);
+          margin-left: 8px;
+        }
+
+        &.active .el-icon-arrow-down {
+          transform: rotate(0);
+        }
+      }
+    }
+  }
+}
 </style>

project/fengdu/app/AppHelp/components/List.vue

@@ -8,7 +8,7 @@
       <ai-search-bar class="search-bar">
         <template #left>
           <el-date-picker
-            v-model="date"
+            v-model="dateList"
             @change="search.current = 1,getList()"
             type="daterange"
             size="small"
@@ -21,13 +21,13 @@
         </template>
         <template #right>
           <el-input
-            v-model="search.title"
+            v-model="search.createUserName"
             class="search-input"
             size="small"
             v-throttle="() => {search.current = 1, getList()}"
             placeholder="请输入发帖人"
             clearable
-            @clear="search.current = 1, search.province = '', getList()"
+            @clear="search.current = 1, search.createUserName = '', getList()"
             suffix-icon="iconfont iconSearch">
           </el-input>
         </template>
@@ -43,9 +43,7 @@
         <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">
-              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
               <el-button type="text" @click="toDetail(row.id)">详情</el-button>
-              <el-button type="text" @click="stop(row.id, row.status)">{{ row.status === '1' ? '关闭' : '开启' }}</el-button>
               <el-button type="text" @click="remove(row.id)">删除</el-button>
             </div>
           </template>
@@ -69,20 +67,20 @@
         search: {
           current: 1,
           size: 10,
-          title: '',
+          createUserName: '',
-          status: ''
         },
         total: 10,
         colConfigs: [
-          { prop: 'title',  label: '内容', align: 'left'},
+          { prop: 'content',  label: '内容', align: 'left'},
-          { prop: 'title',  label: '发帖人', align: 'left', width: '120' },
+          { prop: 'createUserName',  label: '发帖人', align: 'left', width: '120' },
-          { prop: 'title',  label: '创建时间', align: 'left', width: '120' },
+          { prop: 'createTime',  label: '创建时间', align: 'left', width: '120' },
-          { prop: 'title',  label: '评论数', align: 'left', width: '120' },
+          { prop: 'commentCount',  label: '评论数', align: 'left', width: '120' },
-          { prop: 'title',  label: '点赞数', align: 'left', width: '120' },
+          { prop: 'appreciateCount',  label: '点赞数', align: 'left', width: '120' },
-          { prop: 'title',  label: '分享数', align: 'left', width: '120' },
+          { prop: 'sharedCount',  label: '分享数', align: 'left', width: '120' },
           { slot: 'options'},
         ],
         tableData: [],
+        dateList: []
       }
     },
 
@@ -92,7 +90,7 @@
 
     methods: {
       getList() {
-        this.instance.post(`/app/appactivityinfo/list`, null, {
+        this.instance.post(`/app/appneighborhoodassistance/list`, null, {
           params: {
             ...this.search
           }
@@ -104,19 +102,8 @@
         })
       },
 
-      stop (id, status) {
-        this.$confirm(status === '1' ? '确认关闭该活动?' : '确认开启该活动?').then(() => {
-          this.instance.post(`/app/appactivityinfo/stop?id=${id}`).then(res => {
-            if (res.code == 0) {
-              this.$message.success('操作成功！')
-              this.getList()
-            }
-          })
-        })
-      },
-
       remove (id) {
-        this.$confirm('确定删除该活动？').then(() => {
+        this.$confirm('确定删除该帖子？').then(() => {
           this.instance.post(`/app/appactivityinfo/delete?ids=${id}`).then(res => {
             if (res.code == 0) {
               this.$message.success('删除成功！')