- 视频
+ 视频
新建视频
@@ -212,16 +197,22 @@
-
+
- {{ formatDate(scope.row.createTime) }}
+ {{ scope.row.createTime }}
- 下载
+
+ 下载
+
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
-import { getSimpleAccountList } from '@/api/mp/account'
-import { getMaterialPage, deletePermanentMaterial } from '@/api/mp/material'
-import { getAccessToken } from '@/utils/auth'
-import { formatDate } from '@/utils/formatTime'
-
-const BASE_URL = import.meta.env.VITE_BASE_URL
+import WxAccountSelect from '@/views/mp/components/wx-account-select/main.vue'
+// import * as MpAccountApi from '@/api/mp/account'
+import * as MpMaterialApi from '@/api/mp/material'
+import * as authUtil from '@/utils/auth'
+import { dateFormatter } from '@/utils/formatTime'
const message = useMessage()
-const queryFormRef = ref()
+const BASE_URL = import.meta.env.VITE_BASE_URL
+const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
+const headers = { Authorization: 'Bearer ' + authUtil.getAccessToken() }
+
+// const queryFormRef = ref()
const uploadFormRef = ref()
const uploadVideoRef = ref()
@@ -277,8 +271,6 @@ const queryParams = reactive({
permanent: true
})
-const actionUrl = BASE_URL + '/admin-api/mp/material/upload-permanent'
-const headers = { Authorization: 'Bearer ' + getAccessToken() }
const fileList = ref([])
const uploadData = reactive({
type: 'image',
@@ -295,20 +287,11 @@ const uploadRules = reactive({
introduction: [{ required: true, message: '请输入描述', trigger: 'blur' }]
})
-// 公众号账号列表
-const accountList = ref([])
-
-onMounted(() => {
- getSimpleAccountList().then((data) => {
- accountList.value = data
- // 默认选中第一个
- if (accountList.value.length > 0) {
- setAccountId(accountList.value[0].id)
- }
- // 加载数据
- getList()
- })
-})
+/** 侦听公众号变化 **/
+const accountChange = (accountId) => {
+ setAccountId(accountId)
+ getList()
+}
// ======================== 列表查询 ========================
/** 设置账号编号 */
@@ -318,7 +301,7 @@ const setAccountId = (accountId) => {
}
/** 查询列表 */
-const getList = () => {
+const getList = async () => {
// 如果没有选中公众号账号，则进行提示。
if (!queryParams.accountId) {
message.error('未选中公众号，无法查询草稿箱')
@@ -326,17 +309,16 @@ const getList = () => {
}
loading.value = true
- getMaterialPage({
- ...queryParams,
- type: type.value
- })
- .then((data) => {
- list.value = data.list
- total.value = data.total
- })
- .finally(() => {
- loading.value = false
+ try {
+ const data = await MpMaterialApi.getMaterialPage({
+ ...queryParams,
+ type: type.value
})
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
}
/** 搜索按钮操作 */
@@ -349,31 +331,23 @@ const handleQuery = () => {
getList()
}
-/** 重置按钮操作 */
-const resetQuery = () => {
- queryFormRef.value?.resetFields()
- // 默认选中第一个
- if (accountList.value.length > 0) {
- setAccountId(accountList.value[0].id)
- }
- handleQuery()
-}
-
const handleTabChange = (tabName) => {
// 设置 type
uploadData.type = tabName
+
+ // 提前情况数据，避免tab切换后显示垃圾数据
+ list.value = []
+ total.value = 0
+
// 从第一页开始查询
handleQuery()
}
// ======================== 文件上传 ========================
const beforeImageUpload = (file) => {
- const isType =
- file.type === 'image/jpeg' ||
- file.type === 'image/png' ||
- file.type === 'image/gif' ||
- file.type === 'image/bmp' ||
- file.type === 'image/jpg'
+ const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
+ file.type
+ )
if (!isType) {
message.error('上传图片格式不对!')
return false
@@ -388,11 +362,7 @@ const beforeImageUpload = (file) => {
}
const beforeVoiceUpload = (file) => {
- const isType =
- file.type === 'audio/mp3' ||
- file.type === 'audio/wma' ||
- file.type === 'audio/wav' ||
- file.type === 'audio/amr'
+ const isType = ['audio/mp3', 'audio/wma', 'audio/wav', 'audio/amr'].includes(file.type)
const isLt = file.size / 1024 / 1024 < 2
if (!isType) {
message.error('上传语音格式不对!')
@@ -412,11 +382,13 @@ const beforeVideoUpload = (file) => {
message.error('上传视频格式不对!')
return false
}
+
const isLt = file.size / 1024 / 1024 < 10
if (!isLt) {
message.error('上传视频大小不能超过 10M!')
return false
}
+
addMaterialLoading.value = true
return true
}
@@ -476,7 +448,7 @@ const resetVideo = () => {
// ======================== 其它操作 ========================
const handleDelete = async (item) => {
await message.confirm('此操作将永久删除该文件, 是否继续?')
- await deletePermanentMaterial(item.id)
+ await MpMaterialApi.deletePermanentMaterial(item.id)
message.alertSuccess('删除成功')
}
@@ -487,40 +459,50 @@ const handleDelete = async (item) => {
width: 100%;
column-gap: 10px;
column-count: 5;
- margin-top: 10px; /* 芋道源码：增加 10px，避免顶着上面 */
+ margin-top: 10px;
+ /* 芋道源码：增加 10px，避免顶着上面 */
}
+
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
+
.material-img {
width: 100%;
}
+
p {
line-height: 30px;
}
+
@media (min-width: 992px) and (max-width: 1300px) {
.waterfall {
column-count: 3;
}
+
p {
color: red;
}
}
+
@media (min-width: 768px) and (max-width: 991px) {
.waterfall {
column-count: 2;
}
+
p {
color: orange;
}
}
+
@media (max-width: 767px) {
.waterfall {
column-count: 1;
}
}
+
/*瀑布流样式*/