mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 05:40:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Introducing new features. 优化微信公众号

Browse Source
This commit is contained in:
aeizzz 2023-03-01 10:59:34 +08:00
parent e38e9bb864
commit 0d594b259a
11 changed files with 267 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/wechart/wx-material-select/main.vue
View File

@ -103,8 +103,7 @@
<div class="waterfall" v-loading="state.loading">
<template v-for="item in state.dataList">
<div v-if="item.content && item.content.newsItem" class="waterfall-item" :key="item.id">
<!-- <wx-news :articles="item.content.newsItem" />-->
<wx-news :obj-data="item.content.newsItem"></wx-news>
<el-row class="ope-row">
<el-button size="mini" type="success" @click="selectMaterial(item)">
选择<el-icon class="el-icon--right"
@ -128,12 +127,14 @@
import {defineEmits} from "vue";
import {BasicTableProps, useTable} from "/@/hooks/table";
import {getPage} from "/@/api/mp/wx-material";
const WxNews = defineAsyncComponent(() => import('../wx-news/index.vue'))
const emit = defineEmits(["selectMaterial"])
const objData = reactive({
repType: '',
accountId: ''
accountId: '',
type: ''
})
const visible = ref(false)
@ -167,6 +168,7 @@ const openDialog = (data: any) => {
state.queryForm.type = data.type
state.queryForm.appId = data.accountId
console.log(data,'data')
objData.type = data.type
visible.value = true
getDataList()
}

64
src/components/wechart/wx-reply/index.vue
View File

@ -84,7 +84,7 @@
<template #label><i class="el-icon-news"></i> 图文</template>
<el-row>
<div v-if="objData.content" class="select-item">
<WxNews :obj-data="objData.content.newsItem"></WxNews>
<wx-news :obj-data="objData.content.newsItem"></wx-news>
<el-row class="ope-row">
<el-button type="danger" icon="el-icon-delete" circle @click="deleteObj"></el-button>
</el-row>
@ -106,10 +106,14 @@
</template>
<script setup lang="ts" name="wx-reply">
import {getMaterialVideo} from "/@/api/mp/wx-material";
const WxMaterialSelect = defineAsyncComponent(() => import("/@/components/wechart/wx-material-select/main.vue"))
const WxFileUpload = defineAsyncComponent(() => import("/@/components/wechart/fileUpload/index.vue"))
const WxNews = defineAsyncComponent(() => import("/@/components/wechart/wx-news/index.vue"))
const props = defineProps({
objData: {
type: Object,
@ -130,18 +134,15 @@ const uploadData = reactive({
appId: props.objData.appId
})
const actionUrl = ref("/admin/wx-material/materialFileUpload")
const handleClick = (tab) => {
uploadData.mediaType = tab.paneName
}
const deleteObj = () => {
// this.$delete(this.objData, 'repName')
// this.$delete(this.objData, 'repUrl')
// this.$delete(this.objData, 'content')
props.objData.repName = ''
props.objData.repUrl = ''
props.objData.content = ''
}
const openMaterial = (data: any) => {
@ -151,23 +152,52 @@ const openMaterial = (data: any) => {
const dialogNewsRef = ref()
const selectMaterial = (item, appId) => {
console.log(item, appId,'item, appId')
const tempObjItem = {
repType: '',
repMediaId: '',
media_id: '',
content: ''
}
tempObjItem.repType = props.objData.repType
tempObjItem.repMediaId = item.mediaId
tempObjItem.media_id = item.mediaId
tempObjItem.content = item.content
}
const handelImageChange = () => {
// getDataList()
props.objData.repMediaId = item.mediaId
props.objData.media_id = item.mediaId
props.objData.content = item.content
if (props.objData.repType === 'music') {
tempObjItem.repThumbMediaId = item.mediaId
tempObjItem.repThumbUrl = item.url
props.objData.repThumbMediaId = item.mediaId
props.objData.repThumbUrl = item.url
} else {
tempObjItem.repName = item.name
tempObjItem.repUrl = item.url
props.objData.repName = item.name
props.objData.repUrl = item.url
}
if (props.objData.repType === 'video') {
getMaterialVideo({
mediaId: item.mediaId,
appId: appId
}).then(response => {
const data = response.data.data
tempObjItem.repDesc = data.description
tempObjItem.repUrl = data.downUrl
})
}
}
</script>
<style scoped>
<style scoped lang="scss">
.public-account-management {
.el-input {
width: 70%;
margin-right: 2%;
}
.el-input {
width: 70%;
margin-right: 2%;
}
}
.pagination {

103
src/components/wechart/wx-video-player/index.vue
View File

@ -1,103 +0,0 @@
<template>
<div>
<div v-if="!outTime" @click="playVideo()"><i class="el-icon-video-camera" style="font-size: 40px!important;"></i>
</div>
<div v-if="outTime">
<i class="el-icon-video-play shipin-i"></i>
<p />
<i class="el-icon-time">该视频已过期</i>
</div>
<el-dialog
v-loading="state.mainLoading"
title="视频播放"
v-model="state.dialogVideo"
width="40%"
append-to-body>
<video-player
v-if="state.playerOptions.sources[0].src"
ref="videoPlayer"
class="video-player vjs-custom-skin"
:options="state.playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
>
</video-player>
</el-dialog>
</div>
</template>
<script setup lang="ts" name="wx-video-player">
const props = defineProps({
objData: {
type: Object,
default: () => ({})
}
})
const state = reactive({
dialogVideo: false,
outTime: false,
mainLoading: false,
playerOptions: {
autoplay: true, //如果true,浏览器准备好时开始自动播放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: 'video/mp4',
src: '' //你的视频地址（必填）
}],
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
},
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
}
})
const playVideo = () => {
state.dialogVideo = true
getVideo()
}
const getVideo = () => {
if (props.objData.type === '2') {
// asdasd
}else if(props.objData.type === '1'){
//asdasd
}
}
const onPlayerPlay = (e) => {
console.log(e,'eee')
}
const onPlayerPause = (e) => {
console.log(e, 'eee')
}
</script>
<style scoped>
</style>

4
src/main.ts
View File

@ -2,8 +2,8 @@ import {createApp} from 'vue'
import pinia from '/@/stores/index'
import App from './App.vue'
import router from './router'
import {directive} from '/@/directive/index'
import {i18n} from '/@/i18n/index'
import {directive} from '/@/directive'
import {i18n} from '/@/i18n'
import other from '/@/utils/other'
import ElementPlus from 'element-plus'

9
src/views/mp/wx-account-tag/index.vue
View File

@ -49,13 +49,8 @@
<el-table-column :label="t('wxAccountTag.tagId')" prop="tagId" show-overflow-tooltip/>
<el-table-column :label="$t('common.action')" width="150">
<template #default="scope">
<el-button v-auth="'mp_wxAccountTag_edit'" text type="primary"
@click="formDialogRef.openDialog(scope.row.id)">{{ $t('common.editBtn') }}
</el-button>
<el-button v-auth="'sys_wxAccountTag_del'" text type="primary" @click="handleDelete([scope.row.id])">{{
$t('common.delBtn')
}}
</el-button>
<el-button text type="primary" @click="formDialogRef.openDialog(scope.row.id)">{{ $t('common.editBtn') }}</el-button>
<el-button text type="primary" @click="handleDelete([scope.row.id])">{{$t('common.delBtn') }}</el-button>
</template>
</el-table-column>
</el-table>

15
src/views/mp/wx-account/index.vue
View File

@ -68,10 +68,17 @@
@click="access(scope.row,scope.index)">
接入
</el-button>
<el-button
type="text"
@click="generate(scope.row,scope.index)">二维码
</el-button>
<el-button
type="text"
@click="quota(scope.row,scope.index)">
quota
</el-button>
</template>
</el-table-column>
</el-table>
@ -95,7 +102,7 @@
<script lang="ts" name="systemWxAccount" setup>
import {BasicTableProps, useTable} from "/@/hooks/table";
import {delObjs, fetchList, generateQr} from "/@/api/mp/wx-account";
import {clearQuota, delObjs, fetchList, generateQr} from "/@/api/mp/wx-account";
import {useMessage, useMessageBox} from "/@/hooks/message";
import {useI18n} from "vue-i18n";
@ -175,4 +182,10 @@ const generate = (row: any) => {
getDataList()
})
}
const quota = (row) => {
clearQuota(row.appid).then(() => {
useMessage().success("清空api的调用quota成功")
})
}
</script>

169
src/views/mp/wx-auto-reply/index.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<div class="layout-padding">
<el-row :gutter="20">
<el-col :span="4" :xs="24">
<el-card class="layout-padding-auto" shadow="hover">
<query-tree :query="deptData.queryList"
@node-click="handleNodeClick"/>
</el-card>
</el-col>
<el-col :md="20">
<el-tabs v-model="type" @tab-click="handleClick">
<el-tab-pane name="1" label="1">
<template #label>关注时回复</template>
<el-table v-loading="state.loading" :data="state.dataList" style="width: 100%" @sort-change="sortChangeHandle">
<el-table-column label="序号" type="index" width="80"/>
<el-table-column label="回复消息类型" prop="repType" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="dicDataRepType" :value="scope.row.repType"></dict-tag>
</template>
</el-table-column>
<el-table-column label="操作" prop="action" show-overflow-tooltip/>
</el-table>
<pagination v-bind="state.pagination" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"/>
</el-tab-pane>
<el-tab-pane name="2" label="2">
<template #label>消息回复</template>
<el-table v-loading="state.loading" :data="state.dataList" style="width: 100%" @sort-change="sortChangeHandle">
<el-table-column label="序号" type="index" width="80"/>
<el-table-column label="请求消息类型" prop="reqType" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="dicDataReqType" :value="scope.row.reqType"></dict-tag>
</template>
</el-table-column>
<el-table-column label="回复消息类型" prop="repType" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="dicDataRepType" :value="scope.row.repType"></dict-tag>
</template>
</el-table-column>
<el-table-column label="操作" prop="action" show-overflow-tooltip/>
</el-table>
<pagination v-bind="state.pagination" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"/>
</el-tab-pane>
<el-tab-pane name="3" label="3">
<template #label>关键词回复</template>
<el-table v-loading="state.loading" :data="state.dataList" style="width: 100%" @sort-change="sortChangeHandle">
<el-table-column label="序号" type="index" width="80"/>
<el-table-column label="关键词" prop="reqKey" show-overflow-tooltip>
</el-table-column>
<el-table-column label="匹配类型" prop="repMate" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="dicRepMate" :value="scope.row.repMate"></dict-tag>
</template>
</el-table-column>
<el-table-column label="匹配类型" prop="repMate" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="dicDataRepType" :value="scope.row.repType"></dict-tag>
</template>
</el-table-column>
<el-table-column label="操作" prop="action" show-overflow-tooltip/>
</el-table>
<pagination v-bind="state.pagination" @size-change="sizeChangeHandle" @current-change="currentChangeHandle"/>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts" name="wx-auto-reply">
import {fetchAccountList} from "/@/api/mp/wx-account";
import {BasicTableProps, useTable} from "/@/hooks/table";
import {fetchList} from "/@/api/mp/wx-fans-msg";
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
// 点击树
const handleNodeClick = (node: any) => {
accountId.value = node.appid
}
const dicDataRepType = ref([{
label: '文本',
value: 'text'
}, {
label: '图片',
value: 'image'
}, {
label: '语音',
value: 'voice'
}, {
label: '视频',
value: 'video'
}, {
label: '图文',
value: 'news'
}])
const dicDataReqType = ref(
[{
value: 'text',
label: '文本'
}, {
value: 'image',
label: '图片'
}, {
value: 'voice',
label: '语音'
}, {
value: 'video',
label: '视频'
}, {
value: 'shortvideo',
label: '小视频'
}, {
value: 'location',
label: '地理位置'
}, {
value: 'link',
label: '链接消息'
}, {
value: 'event',
label: '事件推送'
}]
)
const dicRepMate = ref([
{
value: '1',
label: '全匹配'
}, {
value: '2',
label: '半匹配'
}
])
const deptData = reactive({
queryList: () => {
return fetchAccountList()
}
})
const accountId = ref()
const type = ref()
const handleClick = (e: any) => {
}
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
pageList: fetchList
})
const {
getDataList,
currentChangeHandle,
sizeChangeHandle,
sortChangeHandle,
} = useTable(state)
</script>
<style scoped>
</style>

1
src/views/mp/wx-fans-msg/index.vue
View File

@ -69,7 +69,6 @@
<div v-if="scope.row.repType === 'link'"><el-tag size="mini">链接</el-tag>：<a :href="scope.row.repUrl" target="_blank">{{ scope.row.repName }}</a></div>
</template>
</el-table-column>
<el-table-column :label="t('wxFansMsg.readFlag')" prop="readFlag" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="response_type" :value="scope.row.readFlag"></dict-tag>

12
src/views/mp/wx-material/components/news-form.vue
View File

@ -155,15 +155,21 @@ const isActiveAddNews = ref(0)
// 编辑媒体的id
const articlesMediaId = ref()
const openDialog = (data: any) => {
const openDialog = (data: any,item: any,mediaId: any,type: any) => {
// 设置组件内不用账号
accountId.value = data.accountId
uploadData.appId = data.accountId
dialogNewsVisible.value = true
operateMaterial.value = 'add'
articlesMediaId.value = ''
articlesAdd.value = item
if(mediaId){
articlesMediaId.value = mediaId
}
if(type){
operateMaterial.value = type
}
}
const uploadData = reactive({

25
src/views/mp/wx-material/index.vue
View File

@ -132,7 +132,6 @@
@click="handleInfo(scope.row)">查看
</el-button>
<el-button
v-if="permissions.mp_wxmaterial_del"
type="text"
icon="el-icon-delete"
size="small"
@ -154,7 +153,7 @@
v-for="item in state.dataList"
:key="item.id"
class="waterfall-item">
<!-- <WxNews :obj-data="item.content.newsItem"></WxNews>-->
<wx-news :obj-data="item.content.newsItem"></wx-news>
<el-row class="ope-row">
<el-button type="primary" icon="el-icon-edit" circle @click="handleEditNews(item)"></el-button>
<el-button type="danger" icon="el-icon-delete" circle @click="delMaterial(item)"></el-button>
@ -179,11 +178,12 @@
import { fetchAccountList } from "/@/api/mp/wx-account";
import {useMessage, useMessageBox} from "/@/hooks/message";
import {BasicTableProps, useTable} from "/@/hooks/table";
import { delObj,getPage } from '/@/api/mp/wx-material'
import {delObj, getMaterialVideo, getPage} from '/@/api/mp/wx-material'
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
const NewsForm = defineAsyncComponent(() => import("./components/news-form.vue"))
const WxFileUpload = defineAsyncComponent(() => import("/@/components/wechart/fileUpload/index.vue"))
const WxNews = defineAsyncComponent(() => import("/@/components/wechart/wx-news/index.vue"))
const deptData = reactive({
queryList: () => {
@ -221,6 +221,8 @@ const handleClick = (tab) => {
}
materialType.value = tab.paneName
uploadData.value.mediaType = tab.paneName
state.queryForm.type = materialType.value
getDataList()
}
const state: BasicTableProps = reactive<BasicTableProps>({
@ -243,10 +245,6 @@ const {
sizeChangeHandle,
} = useTable(state)
const handelImageChange = () => {
getDataList()
}
const delMaterial = (item: any) => {
useMessageBox().confirm("此操作将永久删除该文件, 是否继续?").then(() => {
delObj({
@ -258,7 +256,6 @@ const delMaterial = (item: any) => {
})
}
const actionUrl = ref("/admin/wx-material/materialFileUpload")
// 视频
@ -307,7 +304,17 @@ const handleAddNews = () => {
const handleEditNews = (item) => {
dialogNewsRef.value.openDialog({
accountId: checkAppId.value
accountId: checkAppId.value,
},JSON.parse(JSON.stringify(item.content.newsItem)),item.mediaId,'edit')
}
const handleInfo = (row) => {
getMaterialVideo({
mediaId: row.mediaId,
appId: checkAppId.value
}).then((response) => {
const downUrl = response.data.downUrl
window.open(downUrl, '_blank')
})
}

4
src/views/mp/wx-menu/index.vue
View File

@ -95,7 +95,7 @@
<div class="configur_content" v-if="tempObj.type === 'article_view_limited'">
<el-row>
<div class="select-item" v-if="tempObj && tempObj.replyArticles">
<wx-news :articles="tempObj.replyArticles" />
<wx-news :objData="tempObj.replyArticles" />
<el-row class="ope-row">
<el-button type="danger" icon="el-icon-delete" circle @click="deleteMaterial" />
</el-row>
@ -139,6 +139,8 @@ const WxReply = defineAsyncComponent(() => import("/@/components/wechart/wx-repl
const QueryTree = defineAsyncComponent(() => import('/@/components/QueryTree/index.vue'))
const WxNews = defineAsyncComponent(() => import("/@/components/wechart/wx-news/index.vue"))
// 点击树
const handleNodeClick = (node: any) => {