丰都积分

src/project/qianxinan/AppGroupTags/AppGroupTags.vue

@@ -19,17 +19,19 @@
       </div>
     </AiTopFixed>
     <div class="list-content">
-      <div class="item">
-        <div class="label">餐饮美食</div>
-        <div class="value">100</div>
-      </div>
-      <div class="item">
-        <div class="label">餐饮美餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食餐饮美食食</div>
-        <div class="value">100</div>
-      </div>
-      <div class="item">
-        <div class="label">餐饮美食</div>
-        <div class="value">100</div>
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="item-content">
+          <div class="label">{{item.name}}</div>
+          <div class="value" @click="viewList(index)">
+            <u-icon name="arrow-down" color="#999" size="28" :class="activeIndex == index ? 'icon-down icon-down-active' : 'icon-down'" />
+          </div>
+        </div>
+        <div class="item-list" v-if="activeIndex == index">
+          <div class="row" v-for="(row, indexs) in item.tagList" :key="indexs" @click="toGrouping(row)">
+            <div class="row-label">{{row.name}}</div>
+            <div class="row-value">50</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -41,7 +43,11 @@
     appName: '群标签',
     data() {
       return {
-        deptList: []
+        deptList: [],
+        current: 1,
+        pages: 2,
+        list: [],
+        activeIndex: null
       }
     },
     computed: {
@@ -49,22 +55,40 @@
     },
     onLoad() {
       this.deptList = [{name: this.user.departName, id: this.user.departId}]
+      this.getList()
     },
     onShow() {
       document.title = '群标签'
     },
     methods: {
       getListInit() {
-
+        this.current = 1
+        this.pages = 2
+        this.getList()
       },
-      getTotal() {
-        this.$http.post(`/app/appwxuserfamiliarityrate/wxTopStatistics`).then(res=> {
+      getList() {
+        if(this.current > this.pages) return
+        this.$http.post(`/app/wxcp/wxgroupchattag/listAll?current=${this.current}`).then(res=> {
           if(res?.data) {
-            this.form = {...res.data}
+            this.list = this.current == 1?  res.data.records : [...this.list,...res.data.records]
+            this.pages = res.data.pages
           }
         })
       },
+      toGrouping(row) {
+        uni.navigateTo({url: `./groupGrouping?name=${row.name}&id=${row.taggroupId}`})
+      },
+      viewList(index) {
+        if(this.activeIndex == index) {
+          return this.activeIndex = null
+        }
+        this.activeIndex = index
+      }
     },
+    onReachBottom() {
+      this.current ++
+      this.getList()
+    }
   }
 </script>
 
@@ -113,24 +137,53 @@
       }
     }
     .list-content {
-      padding: 24px 32px 0;
+      padding: 24px 0 0;
       .item {
-        padding: 42px 32px;
         background-color: #fff;
-        box-shadow: 0 0 8px 0 #00000005;
-        border-radius: 16px;
-        display: flex;
-        font-family: PingFangSC-Regular;
-        font-size: 32px;
-        margin-bottom: 24px;
+        .item-content {
+          display: flex;
+          padding: 36px 32px;
+          border-bottom: 1px solid #eee;
+        }
         .label {
           width: calc(100% - 120px);
-          color: #333;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 34px;
+          color: #000;
         }
         .value {
           width: 120px;
           text-align: right;
-          color: #222;
+          .icon-down {
+            transform: rotate(180deg);
+            transition: all 0.3s ease-in-out;
+            margin-left:4px;
+          }
+
+          .icon-down-active {
+            transform: rotate(0deg);
+          }
+        }
+        .item-list {
+          width: 100%;
+          padding: 0 32px;
+          box-sizing: border-box;
+          .row {
+            display: flex;
+            font-family: PingFangSC-Regular;
+            font-size: 30px;
+            color: #000;
+            border-bottom: 1px solid #eee;
+            padding: 28px 0;
+          }
+          .row-label {
+            width: calc(100% - 120px);
+          }
+          .row-value {
+            width: 120px;
+            text-align: right;
+          }
         }
       }
     }

src/project/qianxinan/AppGroupTags/groupGrouping.vue

@@ -1,29 +1,19 @@
 <template>
-  <div class="AppGroupGrouping">
+  <div class="groupGrouping">
     <AiTopFixed>
       <u-search v-model="keyword" :clearabled="true" placeholder="请输入群名称、群主" :show-action="false" bg-color="#F5F5F5"
         search-icon-color="#999" color="#333" height="58" @search="getListInit" @clear="getListInit">
       </u-search>
     </AiTopFixed>
     <div class="list-content">
-      <div class="item">
-        <img src="./imgs/del-icon.png" alt="" class="group-img">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <img :src="item.qrCode" alt="" class="group-img">
         <div class="item-right">
           <div class="group-info">
-            <p>兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群兴龙县步行街美食一群</p>
-            <div>3人 | 群主:谢晋</div>
+            <p>{{item.name}}</p>
+            <div>{{item.personCount}}人 | 群主:{{item.ownerName}}</div>
           </div>
-          <img src="./imgs/del-icon.png" alt="" class="del-img" @click="del()">
-        </div>
-      </div>
-      <div class="item">
-        <img src="./imgs/del-icon.png" alt="" class="group-img">
-        <div class="item-right">
-          <div class="group-info">
-            <p>兴龙县步行街美食一群</p>
-            <div>3人 | 群主:谢晋</div>
-          </div>
-          <img src="./imgs/del-icon.png" alt="" class="del-img">
+          <img src="./imgs/del-icon.png" alt="" class="del-img" @click="del(item)">
         </div>
       </div>
     </div>
@@ -37,45 +27,63 @@
     appName: '群分组',
     data() {
       return {
-        keyword: ''
+        keyword: '',
+        titleName: '',
+        tagId: '',
+        current: 1,
+        pages: 2,
+        list: []
       }
     },
     computed: {
       ...mapState(['user']),
     },
+    onLoad(option) {
+      this.titleName = option.name
+      this.tagId = option.id
+      this.getListInit()
+    },
     onShow() {
-      document.title = '群分组'
+      document.title = this.titleName
     },
     methods: {
       getListInit() {
-        
+        this.current = 1
+        this.pages = 2
+        this.getList()
       },
-      getTotal() {
-        this.$http.post(`/app/appwxuserfamiliarityrate/wxTopStatistics`).then(res=> {
+      getList() {
+        if(this.current > this.pages) return
+        this.$http.post(`/app/wxcp/wxgroup/list?current=${this.current}&groupName=${this.keyword}&size=10`).then(res=> {
           if(res?.data) {
-            this.form = {...res.data}
+            this.list = this.current == 1?  res.data.records : [...this.list,...res.data.records]
+            this.pages = res.data.pages
           }
         })
       },
-      del() {
+      del(row) {
         this.$confirm('是否确认从该标签组中移除？').then(() => {
-          // this.$http.post(`/app/appzyvideobroadcast/getBroadcastRecall?broadcastId=${this.info.id}`).then((res) => {
-          //   if (res.code == 0) {
-          //     this.$u.toast('撤回成功！')
-          //     this.getDetail()
-          //   }
-          // })
+          this.$http.post(`/app/wxcp/wxgroupchattag/markTagForCP?tagId=${this.tagId}&groupId=${row.id}`).then((res) => {
+            if (res.code == 0) {
+              this.$u.toast('移除成功！')
+              this.getListInit()
+            }
+          })
         })
       },
       add() {
         uni.navigateTo({url: `./groupList`})
       }
     },
+    onReachBottom() {
+      this.current ++
+      this.getList()
+    }
   }
 </script>
 
 <style lang="scss" scoped>
-  .AppGroupGrouping {
+  .groupGrouping {
     .list-content {
       margin-top: 24px;
       .item {