From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mp/draft/components/CoverSelect.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 166 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/draft/components/CoverSelect.vue b/src/views/mp/draft/components/CoverSelect.vue
new file mode 100644
index 0000000..499f1a6
--- /dev/null
+++ b/src/views/mp/draft/components/CoverSelect.vue
@@ -0,0 +1,166 @@
+<template>
+ <div>
+ <p>灏侀潰:</p>
+ <div class="thumb-div">
+ <el-image
+ v-if="newsItem.thumbUrl"
+ style="width: 300px; max-height: 300px"
+ :src="newsItem.thumbUrl"
+ fit="contain"
+ />
+ <Icon
+ v-else
+ icon="ep:plus"
+ class="avatar-uploader-icon"
+ :class="isFirst ? 'avatar' : 'avatar1'"
+ />
+ <div class="thumb-but">
+ <el-upload
+ :action="UPLOAD_URL"
+ :headers="HEADERS"
+ multiple
+ :limit="1"
+ :file-list="fileList"
+ :data="uploadData"
+ :before-upload="onBeforeUpload"
+ :on-error="onUploadError"
+ :on-success="onUploadSuccess"
+ >
+ <template #trigger>
+ <el-button size="small" type="primary">鏈湴涓婁紶</el-button>
+ </template>
+ <el-button
+ size="small"
+ type="primary"
+ @click="showImageDialog = true"
+ style="margin-left: 5px"
+ >
+ 绱犳潗搴撻�夋嫨
+ </el-button>
+ <template #tip>
+ <div class="el-upload__tip">鏀寔 bmp/png/jpeg/jpg/gif 鏍煎紡锛屽ぇ灏忎笉瓒呰繃 2M</div>
+ </template>
+ </el-upload>
+ </div>
+ <el-dialog
+ title="閫夋嫨鍥剧墖"
+ v-model="showImageDialog"
+ width="80%"
+ append-to-body
+ destroy-on-close
+ >
+ <WxMaterialSelect
+ type="image"
+ :account-id="accountId!"
+ @select-material="onMaterialSelected"
+ />
+ </el-dialog>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import WxMaterialSelect from '@/views/mp/components/wx-material-select'
+import { getAccessToken } from '@/utils/auth'
+import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
+import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
+import { NewsItem } from './types'
+const message = useMessage()
+
+const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 涓婁紶姘镐箙绱犳潗鐨勫湴鍧�
+const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+
+const props = defineProps<{
+ modelValue: NewsItem
+ isFirst: boolean
+}>()
+
+const emit = defineEmits<{
+ (e: 'update:modelValue', v: NewsItem)
+}>()
+const newsItem = computed<NewsItem>({
+ get() {
+ return props.modelValue
+ },
+ set(val) {
+ emit('update:modelValue', val)
+ }
+})
+
+const accountId = inject<number>('accountId')
+const showImageDialog = ref(false)
+
+const fileList = ref<UploadFiles>([])
+interface UploadData {
+ type: UploadType
+ accountId: number
+}
+const uploadData: UploadData = reactive({
+ type: UploadType.Image,
+ accountId: accountId!
+})
+
+/** 绱犳潗閫夋嫨瀹屾垚浜嬩欢*/
+const onMaterialSelected = (item: any) => {
+ showImageDialog.value = false
+ newsItem.value.thumbMediaId = item.mediaId
+ newsItem.value.thumbUrl = item.url
+}
+
+const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+ useBeforeUpload(UploadType.Image, 2)(rawFile)
+
+const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
+ if (res.code !== 0) {
+ message.error('涓婁紶鍑洪敊锛�' + res.msg)
+ return false
+ }
+
+ // 閲嶇疆涓婁紶鏂囦欢鐨勮〃鍗�
+ fileList.value = []
+
+ // 璁剧疆鑽夌鐨勫皝闈㈠瓧娈�
+ newsItem.value.thumbMediaId = res.data.mediaId
+ newsItem.value.thumbUrl = res.data.url
+}
+
+const onUploadError = (err: Error) => {
+ message.error('涓婁紶澶辫触: ' + err.message)
+}
+</script>
+
+<style lang="scss" scoped>
+.el-upload__tip {
+ margin-left: 5px;
+}
+
+.thumb-div {
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+
+ .avatar-uploader-icon {
+ width: 120px;
+ height: 120px;
+ font-size: 28px;
+ line-height: 120px;
+ color: #8c939d;
+ text-align: center;
+ border: 1px solid #d9d9d9;
+ }
+
+ .avatar {
+ width: 230px;
+ height: 120px;
+ }
+
+ .avatar1 {
+ width: 120px;
+ height: 120px;
+ }
+
+ .thumb-but {
+ margin: 5px;
+ }
+}
+</style>
--
Gitblit v1.8.0