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/main.vue | 208 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 208 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
new file mode 100644
index 0000000..89ffe47
--- /dev/null
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -0,0 +1,208 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 鑺嬮亾婧愮爜锛�
+ 鈶� 绉婚櫎澶氫綑鐨� rep 涓哄墠缂�鐨勫彉閲忥紝璁� message 娑堟伅鏇寸畝鍗�
+ 鈶� 浠ｇ爜浼樺寲锛岃ˉ鍏呮敞閲婏紝鎻愬崌闃呰鎬�
+ 鈶� 浼樺寲娑堟伅鐨勪复鏃剁紦瀛樼瓥鐣ワ紝鍙戦�佹秷鎭椂锛屽彧娓呯悊琚彂閫佹秷鎭殑 tab锛屼笉浼氬己鍒跺垏鍥炲埌 text 杈撳叆
+ 鈶� 鏀寔鍙戦�併�愯棰戙�戞秷鎭椂锛屾敮鎸佹柊寤鸿棰�
+-->
+<template>
+ <el-tabs type="border-card" v-model="currentTab">
+ <!-- 绫诲瀷 1锛氭枃鏈� -->
+ <el-tab-pane :name="ReplyType.Text">
+ <template #label>
+ <el-row align="middle"><Icon icon="ep:document" /> 鏂囨湰</el-row>
+ </template>
+ <TabText v-model="reply.content" />
+ </el-tab-pane>
+
+ <!-- 绫诲瀷 2锛氬浘鐗� -->
+ <el-tab-pane :name="ReplyType.Image">
+ <template #label>
+ <el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 鍥剧墖</el-row>
+ </template>
+ <TabImage v-model="reply" />
+ </el-tab-pane>
+
+ <!-- 绫诲瀷 3锛氳闊� -->
+ <el-tab-pane :name="ReplyType.Voice">
+ <template #label>
+ <el-row align="middle"><Icon icon="ep:phone" /> 璇煶</el-row>
+ </template>
+ <TabVoice v-model="reply" />
+ </el-tab-pane>
+
+ <!-- 绫诲瀷 4锛氳棰� -->
+ <el-tab-pane :name="ReplyType.Video">
+ <template #label>
+ <el-row align="middle"><Icon icon="ep:share" /> 瑙嗛</el-row>
+ </template>
+ <TabVideo v-model="reply" />
+ </el-tab-pane>
+
+ <!-- 绫诲瀷 5锛氬浘鏂� -->
+ <el-tab-pane :name="ReplyType.News">
+ <template #label>
+ <el-row align="middle"><Icon icon="ep:reading" /> 鍥炬枃</el-row>
+ </template>
+ <TabNews v-model="reply" :news-type="newsType" />
+ </el-tab-pane>
+
+ <!-- 绫诲瀷 6锛氶煶涔� -->
+ <el-tab-pane :name="ReplyType.Music">
+ <template #label>
+ <el-row align="middle"><Icon icon="ep:service" />闊充箰</el-row>
+ </template>
+ <TabMusic v-model="reply" />
+ </el-tab-pane>
+ </el-tabs>
+</template>
+
+<script lang="ts" setup>
+import { Reply, NewsType, ReplyType, createEmptyReply } from './components/types'
+import TabText from './components/TabText.vue'
+import TabImage from './components/TabImage.vue'
+import TabVoice from './components/TabVoice.vue'
+import TabVideo from './components/TabVideo.vue'
+import TabNews from './components/TabNews.vue'
+import TabMusic from './components/TabMusic.vue'
+
+defineOptions({ name: 'WxReplySelect' })
+
+interface Props {
+ modelValue: Reply
+ newsType?: NewsType
+}
+const props = withDefaults(defineProps<Props>(), {
+ newsType: () => NewsType.Published
+})
+const emit = defineEmits<{
+ (e: 'update:modelValue', v: Reply)
+}>()
+
+const reply = computed<Reply>({
+ get: () => props.modelValue,
+ set: (val) => emit('update:modelValue', val)
+})
+// 浣滀负澶氫釜鏍囩淇濆瓨鍚勮嚜Reply鐨勭紦瀛�
+const tabCache = new Map<ReplyType, Reply>()
+// 閲囩敤鐙珛鐨剅ef鏉ヤ繚瀛樺綋鍓峵ab锛岄伩鍏嶅湪watch鏍囩鍙樺寲锛屽reply杩涜璧嬪�间細浜х敓浜嗗惊鐜皟鐢�
+const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text)
+
+watch(
+ currentTab,
+ (newTab, oldTab) => {
+ // 绗竴娆¤繘鍏ワ細oldTab 涓� undefined
+ // 鍒ゆ柇 newTab 鏄洜涓� Reply 涓� Partial
+ if (oldTab === undefined || newTab === undefined) {
+ return
+ }
+
+ tabCache.set(oldTab, unref(reply))
+
+ // 浠庣紦瀛橀噷闈㈠彇鍑烘柊tab鍐呭锛屾湁鍒欒鐩朢eply锛屾病鏈夊垯鍒涘缓绌篟eply
+ const temp = tabCache.get(newTab)
+ if (temp) {
+ reply.value = temp
+ } else {
+ const newData = createEmptyReply(reply)
+ newData.type = newTab
+ reply.value = newData
+ }
+ },
+ {
+ immediate: true
+ }
+)
+
+/** 娓呴櫎闄や簡`type`, `accountId`鐨勫瓧娈� */
+const clear = () => {
+ reply.value = createEmptyReply(reply)
+}
+
+defineExpose({
+ clear
+})
+</script>
+
+<style lang="scss" scoped>
+.select-item {
+ width: 280px;
+ padding: 10px;
+ margin: 0 auto 10px;
+ border: 1px solid #eaeaea;
+}
+
+.select-item2 {
+ padding: 10px;
+ margin: 0 auto 10px;
+ border: 1px solid #eaeaea;
+}
+
+.ope-row {
+ padding-top: 10px;
+ text-align: center;
+}
+
+.input-margin-bottom {
+ margin-bottom: 2%;
+}
+
+.item-name {
+ overflow: hidden;
+ font-size: 12px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.el-form-item__content {
+ line-height: unset !important;
+}
+
+.col-select {
+ width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
+}
+
+.col-select2 {
+ 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);
+}
+
+.avatar-uploader-icon {
+ width: 100px !important;
+ height: 100px !important;
+ font-size: 28px;
+ line-height: 100px !important;
+ color: #8c939d;
+ text-align: center;
+ border: 1px solid #d9d9d9;
+}
+
+.material-img {
+ width: 100%;
+}
+
+.thumb-div {
+ display: inline-block;
+ text-align: center;
+}
+
+.item-infos {
+ width: 30%;
+ margin: auto;
+}
+</style>
--
Gitblit v1.8.0