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/components/wx-reply/components/TabImage.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 171 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/components/wx-reply/components/TabImage.vue b/src/views/mp/components/wx-reply/components/TabImage.vue
new file mode 100644
index 0000000..6dbfeed
--- /dev/null
+++ b/src/views/mp/components/wx-reply/components/TabImage.vue
@@ -0,0 +1,171 @@
+<template>
+ <div>
+ <!-- 鎯呭喌涓�锛氬凡缁忛�夋嫨濂界礌鏉愩�佹垨鑰呬笂浼犲ソ鍥剧墖 -->
+ <div class="select-item" v-if="reply.url">
+ <img class="material-img" :src="reply.url" />
+ <p class="item-name" v-if="reply.name">{{ reply.name }}</p>
+ <el-row class="ope-row" justify="center">
+ <el-button type="danger" circle @click="onDelete">
+ <Icon icon="ep:delete" />
+ </el-button>
+ </el-row>
+ </div>
+ <!-- 鎯呭喌浜岋細鏈仛瀹屼笂杩版搷浣� -->
+ <el-row v-else style="text-align: center" align="middle">
+ <!-- 閫夋嫨绱犳潗 -->
+ <el-col :span="12" class="col-select">
+ <el-button type="success" @click="showDialog = true">
+ 绱犳潗搴撻�夋嫨 <Icon icon="ep:circle-check" />
+ </el-button>
+ <el-dialog
+ title="閫夋嫨鍥剧墖"
+ v-model="showDialog"
+ width="90%"
+ append-to-body
+ destroy-on-close
+ >
+ <WxMaterialSelect
+ type="image"
+ :account-id="reply.accountId"
+ @select-material="selectMaterial"
+ />
+ </el-dialog>
+ </el-col>
+ <!-- 鏂囦欢涓婁紶 -->
+ <el-col :span="12" class="col-add">
+ <el-upload
+ :action="UPLOAD_URL"
+ :headers="HEADERS"
+ multiple
+ :limit="1"
+ :file-list="fileList"
+ :data="uploadData"
+ :before-upload="beforeImageUpload"
+ :on-success="onUploadSuccess"
+ >
+ <el-button type="primary">涓婁紶鍥剧墖</el-button>
+ <template #tip>
+ <span>
+ <div class="el-upload__tip">鏀寔 bmp/png/jpeg/jpg/gif 鏍煎紡锛屽ぇ灏忎笉瓒呰繃 2M</div>
+ </span>
+ </template>
+ </el-upload>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import WxMaterialSelect from '@/views/mp/components/wx-material-select'
+import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
+import type { UploadRawFile } from 'element-plus'
+import { getAccessToken } from '@/utils/auth'
+import { Reply } from './types'
+const message = useMessage()
+
+const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-temporary'
+const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+
+const props = defineProps<{
+ modelValue: Reply
+}>()
+const emit = defineEmits<{
+ (e: 'update:modelValue', v: Reply)
+}>()
+const reply = computed<Reply>({
+ get: () => props.modelValue,
+ set: (val) => emit('update:modelValue', val)
+})
+
+const showDialog = ref(false)
+const fileList = ref([])
+const uploadData = reactive({
+ accountId: reply.value.accountId,
+ type: 'image',
+ title: '',
+ introduction: ''
+})
+
+const beforeImageUpload = (rawFile: UploadRawFile) => useBeforeUpload(UploadType.Image, 2)(rawFile)
+
+const onUploadSuccess = (res: any) => {
+ if (res.code !== 0) {
+ message.error('涓婁紶鍑洪敊锛�' + res.msg)
+ return false
+ }
+
+ // 娓呯┖涓婁紶鏃剁殑鍚勭鏁版嵁
+ fileList.value = []
+ uploadData.title = ''
+ uploadData.introduction = ''
+
+ // 涓婁紶濂界殑鏂囦欢锛屾湰璐ㄦ槸涓礌鏉愶紝鎵�浠ュ彲浠ヨ繘琛岄�変腑
+ selectMaterial(res.data)
+}
+
+const onDelete = () => {
+ reply.value.mediaId = null
+ reply.value.url = null
+ reply.value.name = null
+}
+
+const selectMaterial = (item) => {
+ showDialog.value = false
+
+ // reply.value.type = 'image'
+ reply.value.mediaId = item.mediaId
+ reply.value.url = item.url
+ reply.value.name = item.name
+}
+</script>
+
+<style lang="scss" scoped>
+.select-item {
+ width: 280px;
+ padding: 10px;
+ margin: 0 auto 10px;
+ border: 1px solid #eaeaea;
+
+ .material-img {
+ width: 100%;
+ }
+
+ .item-name {
+ overflow: hidden;
+ font-size: 12px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ .item-infos {
+ width: 30%;
+ margin: auto;
+ }
+
+ .ope-row {
+ padding-top: 10px;
+ text-align: center;
+ }
+ }
+
+ .col-select {
+ width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
+ }
+
+ .col-add {
+ float: right;
+ width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
+
+ .el-upload__tip {
+ line-height: 18px;
+ text-align: center;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0