加入用户关注功能

src/api/community/wechatSubscribeApi.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取微信关注用户列表
+export function listWechatSubscribe(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/wechat.listWechatSubscribe',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 同步微信关注用户
+export function synchronizeWechatSubscribe(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/wechat.synchronizeWechatSubscribe',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}

src/components/community/syncSubscribeWechat.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog
+    :title="$t('wechatSubscribe.confirmTitle')"
+    :visible.sync="visible"
+    width="500px"
+    @close="handleClose">
+    <div class="dialog-content">
+      <p>{{ $t('wechatSubscribe.syncConfirmText') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="syncSubscribeWechat">{{ $t('common.submit') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { synchronizeWechatSubscribe } from '@/api/community/wechatSubscribeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'SyncSubscribeWechat',
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async syncSubscribeWechat() {
+      try {
+        const params = {
+          communityId: getCommunityId()
+        }
+        await synchronizeWechatSubscribe(params)
+        this.$message.success(this.$t('wechatSubscribe.syncSuccess'))
+        this.$emit('success')
+        this.handleClose()
+      } catch (error) {
+        this.$message.error(this.$t('wechatSubscribe.syncError'))
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialog-content {
+  padding: 20px;
+  text-align: center;
+  
+  p {
+    margin: 0;
+    line-height: 1.5;
+  }
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>

src/i18n/communityI18n.js

@@ -13,6 +13,7 @@ import { messages as adminCarDetailMessages } from '../views/aCommunity/adminCar
 import { messages as adminFeeDetailMessages } from '../views/aCommunity/adminFeeDetailLang.js'
 import { messages as listRoomDecorationRecordMessages } from '../views/community/listRoomDecorationRecordLang'
 import { messages as listRoomRenovationRecordDetailsMessages } from '../views/community/listRoomRenovationRecordDetailsLang'
+import { messages as wechatSubscribeMessages } from '../views/community/wechatSubscribeLang'
 export const messages = {
     en: {
         ...roomStructureMessages.en,
@@ -30,6 +31,7 @@ export const messages = {
         ...adminFeeDetailMessages.en,
         ...listRoomDecorationRecordMessages.en,
         ...listRoomRenovationRecordDetailsMessages.en,
+        ...wechatSubscribeMessages.en,
     },
     zh: {
         ...roomStructureMessages.zh,
@@ -47,5 +49,6 @@ export const messages = {
         ...adminFeeDetailMessages.zh,
         ...listRoomDecorationRecordMessages.zh,
         ...listRoomRenovationRecordDetailsMessages.zh,
+        ...wechatSubscribeMessages.zh,
     }
 }

src/router/communityRouter.js

@@ -74,4 +74,9 @@ export default [
         name: '/views/community/listRoomRenovationRecordDetails',
         component: () => import('@/views/community/listRoomRenovationRecordDetailsList.vue')
     },
+    {
+        path: '/pages/community/wechatSubscribe',
+        name: '/pages/community/wechatSubscribe',
+        component: () => import('@/views/community/wechatSubscribeList.vue')
+    },
 ]

src/views/community/wechatSubscribeLang.js

@@ -0,0 +1,36 @@
+export const messages = {
+  en: {
+    wechatSubscribe: {
+      title: 'Subscribed Users',
+      type: 'Type',
+      openId: 'Open ID',
+      unionId: 'Union ID',
+      syncTime: 'Sync Time',
+      wechat: 'WeChat',
+      other: 'Other',
+      syncUser: 'Sync Users',
+      confirmTitle: 'Please confirm your operation!',
+      syncConfirmText: 'Confirm to sync subscribed users data from WeChat official account. Please do not use frequently to avoid being banned by WeChat. Please refresh to view sync records after submission.',
+      syncSuccess: 'Sync successfully',
+      syncError: 'Sync failed',
+      fetchError: 'Failed to fetch subscribed users'
+    }
+  },
+  zh: {
+    wechatSubscribe: {
+      title: '关注用户',
+      type: '类型',
+      openId: 'Open ID',
+      unionId: 'Union ID',
+      syncTime: '同步时间',
+      wechat: '微信',
+      other: '其他',
+      syncUser: '同步用户',
+      confirmTitle: '请确认您的操作!',
+      syncConfirmText: '确定从公众号同步关注用户数据，请不要频繁使用，以免微信公众号封禁，提交后请刷新查看同步记录',
+      syncSuccess: '同步成功',
+      syncError: '同步失败',
+      fetchError: '获取关注用户失败'
+    }
+  }
+}

src/views/community/wechatSubscribeList.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="wechat-subscribe-container">
+    <el-card class="box-card">
+      <div slot="header" class="flex justify-between items-center">
+        <span>{{ $t('wechatSubscribe.title') }}</span>
+        <div class="card-header-actions">
+          <el-button size="small" @click="_queryWechatSubscribeMethod()">
+            {{ $t('common.refresh') }}
+          </el-button>
+          <el-button 
+            type="primary" 
+            size="small" 
+            @click="_openOpenSyncDataModel()">
+            {{ $t('wechatSubscribe.syncUser') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="wechatSubscribeInfo.users"
+        border
+        style="width: 100%">
+        <el-table-column
+          prop="openType"
+          :label="$t('wechatSubscribe.type')"
+          align="center">
+          <template slot-scope="scope">
+            {{ scope.row.openType === 'WECHAT' ? $t('wechatSubscribe.wechat') : $t('wechatSubscribe.other') }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="openId"
+          :label="$t('wechatSubscribe.openId')"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="unionId"
+          :label="$t('wechatSubscribe.unionId')"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="appId"
+          label="app_id"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="createTime"
+          :label="$t('wechatSubscribe.syncTime')"
+          align="center">
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="pagination-wrapper"
+        :current-page.sync="page.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange">
+      </el-pagination>
+    </el-card>
+
+    <sync-subscribe-wechat ref="syncSubscribeWechat" @success="handleSyncSuccess"></sync-subscribe-wechat>
+  </div>
+</template>
+
+<script>
+import { listWechatSubscribe } from '@/api/community/wechatSubscribeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import SyncSubscribeWechat from '@/components/community/syncSubscribeWechat'
+
+export default {
+  name: 'WechatSubscribeList',
+  components: {
+    SyncSubscribeWechat
+  },
+  data() {
+    return {
+      loading: false,
+      wechatSubscribeInfo: {
+        users: [],
+        conditions: {
+          name: '',
+          appId: '',
+          weChatType: '1000'
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._listWechatSubscribes(this.page.current, this.page.size)
+  },
+  methods: {
+    async _listWechatSubscribes(page, size) {
+      try {
+        this.loading = true
+        const params = {
+          page,
+          row: size,
+          communityId: getCommunityId(),
+          ...this.wechatSubscribeInfo.conditions
+        }
+        const { data, total } = await listWechatSubscribe(params)
+        this.wechatSubscribeInfo.users = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('wechatSubscribe.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _openOpenSyncDataModel() {
+      this.$refs.syncSubscribeWechat.open()
+    },
+    _queryWechatSubscribeMethod() {
+      this.page.current = 1
+      this._listWechatSubscribes(this.page.current, this.page.size)
+    },
+    handleSyncSuccess() {
+      this._listWechatSubscribes(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listWechatSubscribes(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this._listWechatSubscribes(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wechat-subscribe-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .card-header-actions {
+    float: right;
+  }
+
+  .pagination-wrapper {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>