Skip to content

Commit f8a86cb

Browse files
dhb52dhb52
committed
refactor: mp/WxReply重构，拆分组件
1 parent cddf1ee commit f8a86cb

File tree

12 files changed

+795
-544
lines changed

12 files changed

+795
-544
lines changed

‎src/views/mp/components/wx-msg/main.vue

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
</div>
127127
<div class="msg-send" v-loading="sendLoading">
128128
<WxReplySelect ref="replySelectRef" :objData="objData" />
129-
<el-button type="success" size="small" class="send-but" @click="sendMsg">发送(S)</el-button>
129+
<el-button type="success" class="send-but" @click="sendMsg">发送(S)</el-button>
130130
</div>
131131
</ContentWrap>
132132
</template>
@@ -231,12 +231,8 @@ const sendMsg = async () => {
231231
list.value = [...list.value, ...[data]]
232232
scrollToBottom()
233233
234-
//ts检查的時候会判断这个组件可能是空的，所以需要进行断言。
235-
//避免 tab 的数据未清理
236-
const deleteObj = replySelectRef.value?.deleteObj
237-
if (deleteObj) {
238-
deleteObj()
239-
}
234+
// 发送后清空数据
235+
replySelectRef.value?.clear()
240236
}
241237
242238
const loadingMore = () => {
@@ -333,6 +329,7 @@ const scrollToBottom = () => {
333329
334330
.send-but {
335331
float: right;
336-
margin-top: 8px !important;
332+
margin-top: 8px;
333+
margin-bottom: 8px;
337334
}
338335
</style>

‎src/views/mp/components/wx-reply/components/TabImage.vue

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<template>
2+
<el-tab-pane name="image">
3+
<template #label>
4+
<el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
5+
</template>
6+
<!-- 情况一：已经选择好素材、或者上传好图片 -->
7+
<div class="select-item" v-if="objData.url">
8+
<img class="material-img" :src="objData.url" />
9+
<p class="item-name" v-if="objData.name">{{ objData.name }}</p>
10+
<el-row class="ope-row" justify="center">
11+
<el-button type="danger" circle @click="onDelete">
12+
<Icon icon="ep:delete" />
13+
</el-button>
14+
</el-row>
15+
</div>
16+
<!-- 情况二：未做完上述操作 -->
17+
<el-row v-else style="text-align: center" align="middle">
18+
<!-- 选择素材 -->
19+
<el-col :span="12" class="col-select">
20+
<el-button type="success" @click="showDialog = true">
21+
素材库选择 <Icon icon="ep:circle-check" />
22+
</el-button>
23+
<el-dialog
24+
title="选择图片"
25+
v-model="showDialog"
26+
width="90%"
27+
append-to-body
28+
destroy-on-close
29+
>
30+
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
31+
</el-dialog>
32+
</el-col>
33+
<!-- 文件上传 -->
34+
<el-col :span="12" class="col-add">
35+
<el-upload
36+
:action="UPLOAD_URL"
37+
:headers="HEADERS"
38+
multiple
39+
:limit="1"
40+
:file-list="fileList"
41+
:data="uploadData"
42+
:before-upload="beforeImageUpload"
43+
:on-success="onUploadSuccess"
44+
>
45+
<el-button type="primary">上传图片</el-button>
46+
<template #tip>
47+
<span>
48+
<div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
49+
</span>
50+
</template>
51+
</el-upload>
52+
</el-col>
53+
</el-row>
54+
</el-tab-pane>
55+
</template>
56+
57+
<script setup lang="ts">
58+
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
59+
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
60+
import type { UploadRawFile } from 'element-plus'
61+
import { getAccessToken } from '@/utils/auth'
62+
import { ObjData } from './types'
63+
64+
const message = useMessage()
65+
66+
const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
67+
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
68+
69+
const props = defineProps<{
70+
modelValue: ObjData
71+
}>()
72+
const emit = defineEmits<{
73+
(e: 'update:modelValue', v: ObjData)
74+
}>()
75+
const objData = computed<ObjData>({
76+
get: () => props.modelValue,
77+
set: (val) => emit('update:modelValue', val)
78+
})
79+
80+
const showDialog = ref(false)
81+
const fileList = ref([])
82+
const uploadData = reactive({
83+
accountId: objData.value.accountId,
84+
type: 'image',
85+
title: '',
86+
introduction: ''
87+
})
88+
89+
const beforeImageUpload = (rawFile: UploadRawFile) =>
90+
useBeforeUpload(MaterialType.Image, 2)(rawFile)
91+
92+
const onUploadSuccess = (res: any) => {
93+
if (res.code !== 0) {
94+
message.error('上传出错：' + res.msg)
95+
return false
96+
}
97+
98+
// 清空上传时的各种数据
99+
fileList.value = []
100+
uploadData.title = ''
101+
uploadData.introduction = ''
102+
103+
// 上传好的文件，本质是个素材，所以可以进行选中
104+
selectMaterial(res.data)
105+
}
106+
107+
const onDelete = () => {
108+
objData.value.mediaId = null
109+
objData.value.url = null
110+
objData.value.name = null
111+
}
112+
113+
const selectMaterial = (item) => {
114+
showDialog.value = false
115+
116+
objData.value.type = 'image'
117+
objData.value.mediaId = item.mediaId
118+
objData.value.url = item.url
119+
objData.value.name = item.name
120+
}
121+
</script>
122+
123+
<style lang="scss" scoped>
124+
.select-item {
125+
width: 280px;
126+
padding: 10px;
127+
margin: 0 auto 10px auto;
128+
border: 1px solid #eaeaea;
129+
130+
.material-img {
131+
width: 100%;
132+
}
133+
134+
.item-name {
135+
font-size: 12px;
136+
overflow: hidden;
137+
text-overflow: ellipsis;
138+
white-space: nowrap;
139+
text-align: center;
140+
141+
.item-infos {
142+
width: 30%;
143+
margin: auto;
144+
}
145+
146+
.ope-row {
147+
padding-top: 10px;
148+
text-align: center;
149+
}
150+
}
151+
152+
.col-select {
153+
border: 1px solid rgb(234, 234, 234);
154+
padding: 50px 0px;
155+
height: 160px;
156+
width: 49.5%;
157+
}
158+
159+
.col-add {
160+
border: 1px solid rgb(234, 234, 234);
161+
padding: 50px 0px;
162+
height: 160px;
163+
width: 49.5%;
164+
float: right;
165+
166+
.el-upload__tip {
167+
line-height: 18px;
168+
text-align: center;
169+
}
170+
}
171+
}
172+
</style>

‎src/views/mp/components/wx-reply/components/TabMusic.vue

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<template>
2+
<el-tab-pane name="music">
3+
<template #label>
4+
<el-row align="middle"><Icon icon="ep:service" />音乐</el-row>
5+
</template>
6+
<el-row align="middle" justify="center">
7+
<el-col :span="6">
8+
<el-row align="middle" justify="center" class="thumb-div">
9+
<el-col :span="24">
10+
<el-row align="middle" justify="center">
11+
<img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />
12+
<icon v-else icon="ep:plus" />
13+
</el-row>
14+
<el-row align="middle" justify="center" style="margin-top: 2%">
15+
<div class="thumb-but">
16+
<el-upload
17+
:action="UPLOAD_URL"
18+
:headers="HEADERS"
19+
multiple
20+
:limit="1"
21+
:file-list="fileList"
22+
:data="uploadData"
23+
:before-upload="beforeImageUpload"
24+
:on-success="onUploadSuccess"
25+
>
26+
<template #trigger>
27+
<el-button type="primary" link>本地上传</el-button>
28+
</template>
29+
<el-button type="primary" link @click="showDialog = true" style="margin-left: 5px"
30+
>素材库选择
31+
</el-button>
32+
</el-upload>
33+
</div>
34+
</el-row>
35+
</el-col>
36+
</el-row>
37+
<el-dialog
38+
title="选择图片"
39+
v-model="showDialog"
40+
width="80%"
41+
append-to-body
42+
destroy-on-close
43+
>
44+
<WxMaterialSelect
45+
:objData="{ type: 'image', accountId: objData.accountId }"
46+
@select-material="selectMaterial"
47+
/>
48+
</el-dialog>
49+
</el-col>
50+
<el-col :span="18">
51+
<el-input v-model="objData.title" placeholder="请输入标题" />
52+
<div style="margin: 20px 0"></div>
53+
<el-input v-model="objData.description" placeholder="请输入描述" />
54+
</el-col>
55+
</el-row>
56+
<div style="margin: 20px 0"></div>
57+
<el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" />
58+
<div style="margin: 20px 0"></div>
59+
<el-input v-model="objData.hqMusicUrl" placeholder="请输入高质量音乐链接" />
60+
</el-tab-pane>
61+
</template>
62+
63+
<script setup lang="ts">
64+
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
65+
import type { UploadRawFile } from 'element-plus'
66+
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
67+
import { getAccessToken } from '@/utils/auth'
68+
import { ObjData } from './types'
69+
70+
const message = useMessage()
71+
72+
const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
73+
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
74+
75+
const props = defineProps<{
76+
modelValue: ObjData
77+
}>()
78+
const emit = defineEmits<{
79+
(e: 'update:modelValue', v: ObjData)
80+
}>()
81+
const objData = computed<ObjData>({
82+
get: () => props.modelValue,
83+
set: (val) => emit('update:modelValue', val)
84+
})
85+
86+
const showDialog = ref(false)
87+
const fileList = ref([])
88+
const uploadData = reactive({
89+
accountId: objData.value.accountId,
90+
type: 'thumb', // 音乐类型为thumb
91+
title: '',
92+
introduction: ''
93+
})
94+
95+
const beforeImageUpload = (rawFile: UploadRawFile) =>
96+
useBeforeUpload(MaterialType.Image, 2)(rawFile)
97+
98+
const onUploadSuccess = (res: any) => {
99+
if (res.code !== 0) {
100+
message.error('上传出错：' + res.msg)
101+
return false
102+
}
103+
104+
// 清空上传时的各种数据
105+
fileList.value = []
106+
uploadData.title = ''
107+
uploadData.introduction = ''
108+
109+
// 上传好的文件，本质是个素材，所以可以进行选中
110+
selectMaterial(res.data)
111+
}
112+
113+
const selectMaterial = (item: any) => {
114+
showDialog.value = false
115+
116+
objData.value.thumbMediaId = item.mediaId
117+
objData.value.thumbMediaUrl = item.url
118+
}
119+
</script>
120+
121+
<style scoped></style>

0 commit comments

Comments
 (0)