REVIEW 公众号的实现

Author: YunaiV

build/vite/optimize.ts

@@ -75,7 +75,8 @@ const include = [
   'element-plus/es/components/dropdown-item/style/css',
   'element-plus/es/components/badge/style/css',
   'element-plus/es/components/breadcrumb/style/css',
-  'element-plus/es/components/breadcrumb-item/style/css'
+  'element-plus/es/components/breadcrumb-item/style/css',
+  'element-plus/es/components/image/style/css'
 ]
 
 const exclude = ['@iconify/json']

src/views/mp/components/WxMpSelect.vue

@@ -3,7 +3,7 @@
     <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
   </el-select>
 </template>
-
+<!-- TODO @芋艿：WxMpSelect 改成 WxAccountSelect，然后挪到现有的 wx-account-select 包下 -->
 <script lang="ts" setup name="WxMpSelect">
 import * as MpAccountApi from '@/api/mp/account'
 

src/views/mp/components/wx-editor/WxEditor.vue

@@ -102,5 +102,3 @@ const uploadError = () => {
     </div>
   </div>
 </template>
-
-<style></style>

src/views/mp/draft/index.vue

@@ -252,7 +252,6 @@ import * as MpFreePublishApi from '@/api/mp/freePublish'
 import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
 // 可以用改本地数据模拟，避免API调用超限
 // import drafts from './mock'
-
 const message = useMessage() // 消息
 
 const loading = ref(true) // 列表的加载中
@@ -362,7 +361,7 @@ const submitForm = async () => {
   } finally {
     dialogNewsVisible.value = false
     addMaterialLoading.value = false
-    getList()
+    await getList()
   }
 }
 

src/views/mp/material/index.vue

@@ -277,14 +277,11 @@ const uploadRules: FormRules = {
 }
 
 // 素材类型
-type MatertialType = 'image' | 'voice' | 'video'
-const type = ref<MatertialType>('image')
-// 遮罩层
-const loading = ref(false)
-// 总条数
-// 数据列表
-const list = ref<any[]>([])
-const total = ref(0)
+type MaterialType = 'image' | 'voice' | 'video'
+const type = ref<MaterialType>('image')
+const loading = ref(false) // 遮罩层
+const list = ref<any[]>([]) // 总条数
+const total = ref(0) // 数据列表
 // 查询参数
 interface QueryParams {
   pageNo: number
@@ -302,7 +299,7 @@ const queryParams: QueryParams = reactive({
 const fileList = ref<UploadUserFile[]>([])
 
 interface UploadData {
-  type: MatertialType
+  type: MaterialType
   title: string
   introduction: string
 }
@@ -346,7 +343,7 @@ const handleQuery = () => {
 
 const onTabChange = (tabName: TabPaneName) => {
   // 设置 type
-  uploadData.type = tabName as MatertialType
+  uploadData.type = tabName as MaterialType
 
   // 提前情况数据，避免tab切换后显示垃圾数据
   list.value = []

src/views/mp/tag/index.vue

@@ -71,11 +71,10 @@
   <TagForm ref="formRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MpTag">
+import { dateFormatter } from '@/utils/formatTime'
 import * as MpTagApi from '@/api/mp/tag'
 import TagForm from './TagForm.vue'
 import WxMpSelect from '@/views/mp/components/WxMpSelect.vue'
-import { dateFormatter } from '@/utils/formatTime'
-
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -93,7 +92,6 @@ const queryParams: QueryParams = reactive({
   pageSize: 10,
   accountId: undefined
 })
-
 const formRef = ref<InstanceType<typeof TagForm> | null>(null)
 
 /** 侦听公众号变化 **/

src/views/mp/user/index.vue

@@ -121,15 +121,8 @@ const queryParams: QueryParams = reactive({
   openid: null,
   nickname: null
 })
-
-const tagList = ref<any[]>([]) // 公众号标签列表
 const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
-const formRef = ref<InstanceType<typeof UserForm> | null>(null)
-
-/** 初始化 */
-onMounted(async () => {
-  tagList.value = await MpTagApi.getSimpleTagList()
-})
+const tagList = ref<any[]>([]) // 公众号标签列表
 
 /** 侦听公众号变化 **/
 const onAccountChanged = (id?: number) => {
@@ -165,6 +158,7 @@ const resetQuery = () => {
 }
 
 /** 添加/修改操作 */
+const formRef = ref<InstanceType<typeof UserForm> | null>(null)
 const openForm = (id: number) => {
   formRef.value?.open(id)
 }
@@ -175,7 +169,12 @@ const handleSync = async () => {
     await message.confirm('是否确认同步粉丝？')
     await MpUserApi.syncUser(queryParams.accountId)
     message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
-    getList()
+    await getList()
   } catch {}
 }
+
+/** 初始化 */
+onMounted(async () => {
+  tagList.value = await MpTagApi.getSimpleTagList()
+})
 </script>