Compare commits
No commits in common. "a7d3eeae3aad4ed7b8ab3d4636b2fff953792898" and "b08830c7ad477f9561594d410fbabcbdc66d79cb" have entirely different histories.
a7d3eeae3a
...
b08830c7ad
@ -1,89 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="share-actions">
|
|
||||||
<view v-if="showSave" class="action-btn save-btn" @click="handleSave">
|
|
||||||
<text class="btn-text">{{ saveText }}</text>
|
|
||||||
</view>
|
|
||||||
<button
|
|
||||||
v-if="showShare"
|
|
||||||
class="action-btn share-btn"
|
|
||||||
open-type="share"
|
|
||||||
>
|
|
||||||
<text class="btn-text">{{ shareText }}</text>
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineProps, defineEmits } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
// 是否显示保存按钮
|
|
||||||
showSave: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 是否显示分享按钮
|
|
||||||
showShare: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 保存按钮文字
|
|
||||||
saveText: {
|
|
||||||
type: String,
|
|
||||||
default: '保存图片'
|
|
||||||
},
|
|
||||||
// 分享按钮文字
|
|
||||||
shareText: {
|
|
||||||
type: String,
|
|
||||||
default: '分享微信'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['save', 'share'])
|
|
||||||
|
|
||||||
function handleSave() {
|
|
||||||
emit('save')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.share-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 20rpx;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
flex: 1;
|
|
||||||
height: 80rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
border: 2rpx solid #0074ff;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn .btn-text {
|
|
||||||
color: #0074ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-btn {
|
|
||||||
background: #0074ff;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-btn::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-btn .btn-text {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,18 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="message-page">
|
<view class="message-page">
|
||||||
<!-- 头部组件 -->
|
<!-- 头部组件 -->
|
||||||
<message-header v-model:activeTab="activeTab" @team-change="handleTeamChange" @add-patient="handleAddPatient" />
|
<message-header
|
||||||
|
v-model:activeTab="activeTab"
|
||||||
|
@team-change="handleTeamChange"
|
||||||
|
@add-patient="handleAddPatient"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- 消息列表 -->
|
<!-- 消息列表 -->
|
||||||
<scroll-view class="message-list" scroll-y="true" refresher-enabled :refresher-triggered="refreshing"
|
<scroll-view
|
||||||
@refresherrefresh="handleRefresh" @scrolltolower="handleLoadMore">
|
class="message-list"
|
||||||
|
scroll-y="true"
|
||||||
|
refresher-enabled
|
||||||
|
:refresher-triggered="refreshing"
|
||||||
|
@refresherrefresh="handleRefresh"
|
||||||
|
@scrolltolower="handleLoadMore"
|
||||||
|
>
|
||||||
<!-- 消息列表项 -->
|
<!-- 消息列表项 -->
|
||||||
<view v-for="conversation in filteredConversationList"
|
<view
|
||||||
:key="conversation.groupID || conversation.conversationID" class="message-item"
|
v-for="conversation in filteredConversationList"
|
||||||
@click="handleClickConversation(conversation)">
|
:key="conversation.groupID || conversation.conversationID"
|
||||||
|
class="message-item"
|
||||||
|
@click="handleClickConversation(conversation)"
|
||||||
|
>
|
||||||
<view class="avatar-container">
|
<view class="avatar-container">
|
||||||
<image class="avatar" :src="conversation.avatar || '/static/default-avatar.png'"
|
<image
|
||||||
mode="aspectFill" />
|
class="avatar"
|
||||||
|
:src="conversation.avatar || '/static/default-avatar.png'"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
<view v-if="conversation.unreadCount > 0" class="unread-badge">
|
<view v-if="conversation.unreadCount > 0" class="unread-badge">
|
||||||
<text class="unread-text">{{
|
<text class="unread-text">{{
|
||||||
conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
|
conversation.unreadCount > 99 ? "99+" : conversation.unreadCount
|
||||||
@ -24,7 +40,10 @@
|
|||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="name-info">
|
<view class="name-info">
|
||||||
<text class="name">{{ formatPatientName(conversation) }}</text>
|
<text class="name">{{ formatPatientName(conversation) }}</text>
|
||||||
<text v-if="conversation.patientSex || conversation.patientAge" class="patient-info">
|
<text
|
||||||
|
v-if="conversation.patientSex || conversation.patientAge"
|
||||||
|
class="patient-info"
|
||||||
|
>
|
||||||
{{ formatPatientInfo(conversation) }}
|
{{ formatPatientInfo(conversation) }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
@ -41,7 +60,10 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 空状态 -->
|
<!-- 空状态 -->
|
||||||
<view v-if="!loading && filteredConversationList.length === 0" class="empty-container">
|
<view
|
||||||
|
v-if="!loading && filteredConversationList.length === 0"
|
||||||
|
class="empty-container"
|
||||||
|
>
|
||||||
<image class="empty-image" src="/static/empty.svg" mode="aspectFit" />
|
<image class="empty-image" src="/static/empty.svg" mode="aspectFit" />
|
||||||
<text class="empty-text">{{
|
<text class="empty-text">{{
|
||||||
activeTab === "processing" ? "暂无处理中的会话" : "暂无已结束的会话"
|
activeTab === "processing" ? "暂无处理中的会话" : "暂无已结束的会话"
|
||||||
@ -49,7 +71,10 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 加载更多 -->
|
<!-- 加载更多 -->
|
||||||
<view v-if="hasMore && filteredConversationList.length > 0" class="load-more">
|
<view
|
||||||
|
v-if="hasMore && filteredConversationList.length > 0"
|
||||||
|
class="load-more"
|
||||||
|
>
|
||||||
<text class="load-more-text">{{
|
<text class="load-more-text">{{
|
||||||
loadingMore ? "加载中..." : "上拉加载更多"
|
loadingMore ? "加载中..." : "上拉加载更多"
|
||||||
}}</text>
|
}}</text>
|
||||||
@ -59,49 +84,26 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import { ref, computed } from "vue";
|
||||||
ref,
|
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||||||
computed
|
import { storeToRefs } from "pinia";
|
||||||
} from "vue";
|
|
||||||
import {
|
|
||||||
onLoad,
|
|
||||||
onShow,
|
|
||||||
onHide
|
|
||||||
} from "@dcloudio/uni-app";
|
|
||||||
import {
|
|
||||||
storeToRefs
|
|
||||||
} from "pinia";
|
|
||||||
import useAccountStore from "@/store/account.js";
|
import useAccountStore from "@/store/account.js";
|
||||||
import useTeamStore from "@/store/team.js";
|
import useTeamStore from "@/store/team.js";
|
||||||
import useInfoCheck from "@/hooks/useInfoCheck.js";
|
import useInfoCheck from "@/hooks/useInfoCheck.js";
|
||||||
import {
|
import { globalTimChatManager } from "@/utils/tim-chat.js";
|
||||||
globalTimChatManager
|
import { mergeConversationWithGroupDetails } from "@/utils/conversation-merger.js";
|
||||||
} from "@/utils/tim-chat.js";
|
|
||||||
import {
|
|
||||||
mergeConversationWithGroupDetails
|
|
||||||
} from "@/utils/conversation-merger.js";
|
|
||||||
import MessageHeader from "./components/message-header.vue";
|
import MessageHeader from "./components/message-header.vue";
|
||||||
|
|
||||||
// 获取登录状态
|
// 获取登录状态
|
||||||
const {
|
const { account, openid, isIMInitialized } = storeToRefs(useAccountStore());
|
||||||
account,
|
const { initIMAfterLogin } = useAccountStore();
|
||||||
openid,
|
|
||||||
isIMInitialized
|
|
||||||
} = storeToRefs(useAccountStore());
|
|
||||||
const {
|
|
||||||
initIMAfterLogin
|
|
||||||
} = useAccountStore();
|
|
||||||
|
|
||||||
// 获取团队信息
|
// 获取团队信息
|
||||||
const teamStore = useTeamStore();
|
const teamStore = useTeamStore();
|
||||||
const {
|
const { getTeams } = teamStore;
|
||||||
getTeams
|
|
||||||
} = teamStore;
|
|
||||||
|
|
||||||
// 信息完善检查
|
// 信息完善检查
|
||||||
const {
|
const { withInfo } = useInfoCheck();
|
||||||
withInfo
|
|
||||||
} = useInfoCheck();
|
|
||||||
|
|
||||||
// 团队相关状态
|
// 团队相关状态
|
||||||
const currentTeamId = ref(""); // 空字符串表示"全部会话消息"
|
const currentTeamId = ref(""); // 空字符串表示"全部会话消息"
|
||||||
@ -307,8 +309,7 @@
|
|||||||
const existing = conversationList.value[existingIndex];
|
const existing = conversationList.value[existingIndex];
|
||||||
if (
|
if (
|
||||||
existing.lastMessage !== conversationData.lastMessage ||
|
existing.lastMessage !== conversationData.lastMessage ||
|
||||||
existing.lastMessageTime !== conversationData
|
existing.lastMessageTime !== conversationData.lastMessageTime ||
|
||||||
.lastMessageTime ||
|
|
||||||
existing.unreadCount !== conversationData.unreadCount ||
|
existing.unreadCount !== conversationData.unreadCount ||
|
||||||
existing.patientName !== conversationData.patientName ||
|
existing.patientName !== conversationData.patientName ||
|
||||||
existing.patientSex !== conversationData.patientSex ||
|
existing.patientSex !== conversationData.patientSex ||
|
||||||
|
|||||||
@ -42,8 +42,8 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="px-15 text-base text-gray leading-normal text-center">进入团队首页,即可发起线上咨询、建档授权等服务</view>
|
<view class="px-15 text-base text-gray leading-normal text-center">进入团队首页,即可发起线上咨询、建档授权等服务</view>
|
||||||
<view class="mt-10 flex px-15">
|
<view class="mt-10 flex px-15">
|
||||||
<view class="mr-10 border-auto rounded py-10 text-base text-primary text-center flex-grow" @click="saveImage">保存图片</view>
|
<view class="mr-10 border-auto rounded py-10 text-base text-primary text-center flex-grow">保存图片</view>
|
||||||
<button class=" bg-primary rounded py-10 text-base text-white text-center flex-grow" open-type="share">分享微信</button>
|
<view class="bg-primary rounded py-10 text-base text-white text-center flex-grow">分享微信</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -56,7 +56,7 @@ import { onLoad } from "@dcloudio/uni-app";
|
|||||||
import useAccountStore from "@/store/account.js";
|
import useAccountStore from "@/store/account.js";
|
||||||
import useGuard from '@/hooks/useGuard';
|
import useGuard from '@/hooks/useGuard';
|
||||||
import api from "@/utils/api.js";
|
import api from "@/utils/api.js";
|
||||||
import { toast, saveImageToPhotosAlbum, shareToWeChat } from "@/utils/widget";
|
import { toast } from "@/utils/widget";
|
||||||
|
|
||||||
import emptyData from "@/components/empty-data.vue";
|
import emptyData from "@/components/empty-data.vue";
|
||||||
import renamePopup from "./rename-popup.vue";
|
import renamePopup from "./rename-popup.vue";
|
||||||
@ -69,7 +69,6 @@ const current = ref(0);
|
|||||||
const list = ref([]);
|
const list = ref([]);
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const teamId = ref('')
|
const teamId = ref('')
|
||||||
const qrcodes = ref(null);
|
|
||||||
const indicator = computed(() => ({
|
const indicator = computed(() => ({
|
||||||
prev: current.value > 0,
|
prev: current.value > 0,
|
||||||
next: current.value < list.value.length - 1
|
next: current.value < list.value.length - 1
|
||||||
@ -114,65 +113,6 @@ async function change(name) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存二维码图片
|
|
||||||
async function saveImage() {
|
|
||||||
if (!team.value || !team.value.qrcode) {
|
|
||||||
toast('暂无二维码');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const qrcodeComponent = qrcodes.value[current.value];
|
|
||||||
if (!qrcodeComponent) {
|
|
||||||
toast('二维码未加载完成');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取二维码临时文件路径
|
|
||||||
const tempFilePath = qrcodeComponent.toTempFilePath();
|
|
||||||
if (tempFilePath) {
|
|
||||||
await saveImageToPhotosAlbum(tempFilePath);
|
|
||||||
} else {
|
|
||||||
toast('获取二维码失败');
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('保存图片失败:', err);
|
|
||||||
toast('保存失败');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享配置
|
|
||||||
function onShareAppMessage() {
|
|
||||||
if (!team.value) {
|
|
||||||
return shareToWeChat({
|
|
||||||
title: '邀请患者加入团队',
|
|
||||||
path: '/pages/work/team/invite/invite-patient'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return shareToWeChat({
|
|
||||||
title: `邀请您加入${team.value.name}`,
|
|
||||||
path: `/pages/work/team/invite/invite-patient?teamId=${team.value.teamId}`,
|
|
||||||
imageUrl: team.value.qrcode || ''
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享到朋友圈
|
|
||||||
function onShareTimeline() {
|
|
||||||
if (!team.value) {
|
|
||||||
return {
|
|
||||||
title: '邀请患者加入团队',
|
|
||||||
path: '/pages/work/team/invite/invite-patient'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
title: `邀请您加入${team.value.name}`,
|
|
||||||
query: `teamId=${team.value.teamId}`,
|
|
||||||
imageUrl: team.value.qrcode || ''
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
onLoad(opts => {
|
onLoad(opts => {
|
||||||
teamId.value = opts.teamId || '';
|
teamId.value = opts.teamId || '';
|
||||||
})
|
})
|
||||||
@ -181,12 +121,6 @@ useShow(() => {
|
|||||||
getTeams()
|
getTeams()
|
||||||
})
|
})
|
||||||
|
|
||||||
// 导出分享方法供页面使用
|
|
||||||
defineExpose({
|
|
||||||
onShareAppMessage,
|
|
||||||
onShareTimeline
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.w-100 {
|
.w-100 {
|
||||||
@ -214,15 +148,4 @@ defineExpose({
|
|||||||
.h-30 {
|
.h-30 {
|
||||||
height: 60rpx;
|
height: 60rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.share-btn {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
line-height: normal;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-btn::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,234 +0,0 @@
|
|||||||
# 微信小程序分享功能使用指南
|
|
||||||
|
|
||||||
## 功能说明
|
|
||||||
|
|
||||||
提供了完整的微信小程序分享功能,包括:
|
|
||||||
- 分享给好友
|
|
||||||
- 分享到朋友圈
|
|
||||||
- 保存图片到相册
|
|
||||||
|
|
||||||
## 使用方法
|
|
||||||
|
|
||||||
### 1. 基础分享(在页面中)
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<button open-type="share">分享给好友</button>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { createShareMessage, createShareTimeline } from '@/utils/share'
|
|
||||||
|
|
||||||
// 分享给好友
|
|
||||||
function onShareAppMessage() {
|
|
||||||
return createShareMessage({
|
|
||||||
title: '分享标题',
|
|
||||||
path: '/pages/index/index?id=123',
|
|
||||||
imageUrl: 'https://example.com/share.jpg'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享到朋友圈(需要在 app.json 中配置)
|
|
||||||
function onShareTimeline() {
|
|
||||||
return createShareTimeline({
|
|
||||||
title: '朋友圈标题',
|
|
||||||
query: 'id=123',
|
|
||||||
imageUrl: 'https://example.com/share.jpg'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导出分享方法
|
|
||||||
defineExpose({
|
|
||||||
onShareAppMessage,
|
|
||||||
onShareTimeline
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 使用分享组件
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<share-actions
|
|
||||||
@save="handleSave"
|
|
||||||
:show-save="true"
|
|
||||||
:show-share="true"
|
|
||||||
save-text="保存图片"
|
|
||||||
share-text="分享微信"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { saveImageToAlbum, createShareMessage } from '@/utils/share'
|
|
||||||
import shareActions from '@/components/share-actions.vue'
|
|
||||||
|
|
||||||
// 保存图片
|
|
||||||
async function handleSave() {
|
|
||||||
const imagePath = 'https://example.com/image.jpg'
|
|
||||||
await saveImageToAlbum(imagePath)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享配置
|
|
||||||
function onShareAppMessage() {
|
|
||||||
return createShareMessage({
|
|
||||||
title: '分享标题',
|
|
||||||
path: '/pages/index/index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
onShareAppMessage
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 保存二维码图片
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<uqrcode ref="qrcode" canvasId="qrcode" :value="qrcodeUrl" />
|
|
||||||
<button @click="saveQrcode">保存二维码</button>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { saveImageToAlbum } from '@/utils/share'
|
|
||||||
import { toast } from '@/utils/widget'
|
|
||||||
|
|
||||||
const qrcode = ref(null)
|
|
||||||
const qrcodeUrl = ref('https://example.com')
|
|
||||||
|
|
||||||
async function saveQrcode() {
|
|
||||||
try {
|
|
||||||
if (!qrcode.value) {
|
|
||||||
toast('二维码未加载完成')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取二维码临时文件路径
|
|
||||||
const tempFilePath = qrcode.value.toTempFilePath()
|
|
||||||
if (tempFilePath) {
|
|
||||||
await saveImageToAlbum(tempFilePath)
|
|
||||||
} else {
|
|
||||||
toast('获取二维码失败')
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('保存失败:', err)
|
|
||||||
toast('保存失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. 动态分享内容
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { createShareMessage } from '@/utils/share'
|
|
||||||
|
|
||||||
const currentItem = ref({
|
|
||||||
id: '123',
|
|
||||||
title: '商品标题',
|
|
||||||
image: 'https://example.com/product.jpg'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 动态生成分享配置
|
|
||||||
function onShareAppMessage() {
|
|
||||||
return createShareMessage({
|
|
||||||
title: currentItem.value.title,
|
|
||||||
path: `/pages/detail/detail?id=${currentItem.value.id}`,
|
|
||||||
imageUrl: currentItem.value.image
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
onShareAppMessage
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 配置说明
|
|
||||||
|
|
||||||
### 1. 启用分享到朋友圈
|
|
||||||
|
|
||||||
在 `pages.json` 中配置页面:
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"path": "pages/index/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "首页",
|
|
||||||
"enableShareTimeline": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 全局分享配置
|
|
||||||
|
|
||||||
在 `App.vue` 中配置全局分享:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
onShareAppMessage() {
|
|
||||||
return {
|
|
||||||
title: '默认分享标题',
|
|
||||||
path: '/pages/index/index'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onShareTimeline() {
|
|
||||||
return {
|
|
||||||
title: '默认朋友圈标题'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API 说明
|
|
||||||
|
|
||||||
### createShareMessage(options)
|
|
||||||
|
|
||||||
创建分享给好友的配置
|
|
||||||
|
|
||||||
**参数:**
|
|
||||||
- `title` (string): 分享标题
|
|
||||||
- `path` (string): 分享路径
|
|
||||||
- `imageUrl` (string): 分享图片URL
|
|
||||||
|
|
||||||
**返回:** 分享配置对象
|
|
||||||
|
|
||||||
### createShareTimeline(options)
|
|
||||||
|
|
||||||
创建分享到朋友圈的配置
|
|
||||||
|
|
||||||
**参数:**
|
|
||||||
- `title` (string): 分享标题
|
|
||||||
- `query` (string): 分享路径参数
|
|
||||||
- `imageUrl` (string): 分享图片URL
|
|
||||||
|
|
||||||
**返回:** 分享配置对象
|
|
||||||
|
|
||||||
### saveImageToAlbum(filePath)
|
|
||||||
|
|
||||||
保存图片到相册
|
|
||||||
|
|
||||||
**参数:**
|
|
||||||
- `filePath` (string): 图片路径(本地临时路径或网络路径)
|
|
||||||
|
|
||||||
**返回:** Promise<boolean>
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
|
|
||||||
1. 分享图片建议尺寸:5:4,推荐 500x400px
|
|
||||||
2. 分享路径必须是已注册的页面路径
|
|
||||||
3. 保存图片需要用户授权相册权限
|
|
||||||
4. 分享到朋友圈需要在页面配置中启用
|
|
||||||
5. 网络图片会自动下载后保存到相册
|
|
||||||
169
utils/share.js
169
utils/share.js
@ -1,169 +0,0 @@
|
|||||||
/**
|
|
||||||
* 微信小程序分享工具
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { toast } from './widget'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 创建分享到好友的配置
|
|
||||||
* @param {Object} options 分享配置
|
|
||||||
* @param {string} options.title 分享标题
|
|
||||||
* @param {string} options.path 分享路径
|
|
||||||
* @param {string} options.imageUrl 分享图片URL
|
|
||||||
* @returns {Object} 分享配置对象
|
|
||||||
*/
|
|
||||||
export function createShareMessage(options = {}) {
|
|
||||||
const { title = '', path = '', imageUrl = '' } = options
|
|
||||||
|
|
||||||
return {
|
|
||||||
title,
|
|
||||||
path,
|
|
||||||
imageUrl,
|
|
||||||
success: () => {
|
|
||||||
toast('分享成功')
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('分享失败:', err)
|
|
||||||
toast('分享失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 创建分享到朋友圈的配置
|
|
||||||
* @param {Object} options 分享配置
|
|
||||||
* @param {string} options.title 分享标题
|
|
||||||
* @param {string} options.query 分享路径参数
|
|
||||||
* @param {string} options.imageUrl 分享图片URL
|
|
||||||
* @returns {Object} 分享配置对象
|
|
||||||
*/
|
|
||||||
export function createShareTimeline(options = {}) {
|
|
||||||
const { title = '', query = '', imageUrl = '' } = options
|
|
||||||
|
|
||||||
return {
|
|
||||||
title,
|
|
||||||
query,
|
|
||||||
imageUrl
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 在页面中启用分享功能
|
|
||||||
* 使用方法:在页面的 setup 中调用
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* import { enableShare } from '@/utils/share'
|
|
||||||
*
|
|
||||||
* // 在 setup 中
|
|
||||||
* enableShare({
|
|
||||||
* message: {
|
|
||||||
* title: '分享标题',
|
|
||||||
* path: '/pages/index/index',
|
|
||||||
* imageUrl: 'https://example.com/image.jpg'
|
|
||||||
* },
|
|
||||||
* timeline: {
|
|
||||||
* title: '朋友圈标题',
|
|
||||||
* query: 'id=123',
|
|
||||||
* imageUrl: 'https://example.com/image.jpg'
|
|
||||||
* }
|
|
||||||
* })
|
|
||||||
*/
|
|
||||||
export function enableShare(config = {}) {
|
|
||||||
const { message, timeline } = config
|
|
||||||
|
|
||||||
// 分享给好友
|
|
||||||
if (message) {
|
|
||||||
uni.$on('onShareAppMessage', () => {
|
|
||||||
return createShareMessage(message)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享到朋友圈
|
|
||||||
if (timeline) {
|
|
||||||
uni.$on('onShareTimeline', () => {
|
|
||||||
return createShareTimeline(timeline)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 保存图片到相册
|
|
||||||
* @param {string} filePath 图片路径(本地临时路径或网络路径)
|
|
||||||
*/
|
|
||||||
export async function saveImageToAlbum(filePath) {
|
|
||||||
try {
|
|
||||||
// 如果是网络图片,先下载
|
|
||||||
let localPath = filePath
|
|
||||||
if (filePath.startsWith('http')) {
|
|
||||||
const res = await uni.downloadFile({ url: filePath })
|
|
||||||
if (res[0]) {
|
|
||||||
throw new Error('下载图片失败')
|
|
||||||
}
|
|
||||||
localPath = res[1].tempFilePath
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查授权
|
|
||||||
const authRes = await uni.getSetting()
|
|
||||||
if (!authRes[1].authSetting['scope.writePhotosAlbum']) {
|
|
||||||
// 请求授权
|
|
||||||
try {
|
|
||||||
await uni.authorize({ scope: 'scope.writePhotosAlbum' })
|
|
||||||
} catch (err) {
|
|
||||||
// 用户拒绝授权,引导去设置
|
|
||||||
const [modalErr, modalRes] = await uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: '需要您授权保存相册',
|
|
||||||
confirmText: '去设置',
|
|
||||||
cancelText: '取消'
|
|
||||||
})
|
|
||||||
|
|
||||||
if (modalRes && modalRes.confirm) {
|
|
||||||
await uni.openSetting()
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存图片
|
|
||||||
const [saveErr] = await uni.saveImageToPhotosAlbum({ filePath: localPath })
|
|
||||||
if (saveErr) {
|
|
||||||
throw saveErr
|
|
||||||
}
|
|
||||||
|
|
||||||
await toast('保存成功')
|
|
||||||
return true
|
|
||||||
} catch (err) {
|
|
||||||
console.error('保存图片失败:', err)
|
|
||||||
await toast('保存失败')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成带参数的小程序码
|
|
||||||
* 需要后端接口支持
|
|
||||||
* @param {Object} options
|
|
||||||
* @param {string} options.scene 场景值
|
|
||||||
* @param {string} options.page 页面路径
|
|
||||||
* @returns {Promise<string>} 返回小程序码图片URL
|
|
||||||
*/
|
|
||||||
export async function generateMiniCode(options = {}) {
|
|
||||||
// 这里需要调用后端接口生成小程序码
|
|
||||||
// 示例代码,需要根据实际后端接口调整
|
|
||||||
try {
|
|
||||||
const res = await uni.request({
|
|
||||||
url: '/api/wechat/generateMiniCode',
|
|
||||||
method: 'POST',
|
|
||||||
data: options
|
|
||||||
})
|
|
||||||
|
|
||||||
if (res[0] || !res[1].data.success) {
|
|
||||||
throw new Error('生成小程序码失败')
|
|
||||||
}
|
|
||||||
|
|
||||||
return res[1].data.data.url
|
|
||||||
} catch (err) {
|
|
||||||
console.error('生成小程序码失败:', err)
|
|
||||||
throw err
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -51,46 +51,3 @@ export async function confirm(content, opt = {}) {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存图片到相册
|
|
||||||
export async function saveImageToPhotosAlbum(filePath) {
|
|
||||||
try {
|
|
||||||
// 检查授权
|
|
||||||
const authRes = await uni.getSetting()
|
|
||||||
if (!authRes[1].authSetting['scope.writePhotosAlbum']) {
|
|
||||||
// 请求授权
|
|
||||||
try {
|
|
||||||
await uni.authorize({ scope: 'scope.writePhotosAlbum' })
|
|
||||||
} catch (err) {
|
|
||||||
await confirm('需要您授权保存相册', { title: '提示', showCancel: false })
|
|
||||||
await uni.openSetting()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存图片
|
|
||||||
await uni.saveImageToPhotosAlbum({ filePath })
|
|
||||||
await toast('保存成功')
|
|
||||||
} catch (err) {
|
|
||||||
console.error('保存图片失败:', err)
|
|
||||||
await toast('保存失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享到微信
|
|
||||||
export function shareToWeChat(options = {}) {
|
|
||||||
const { title = '', path = '', imageUrl = '' } = options
|
|
||||||
|
|
||||||
return {
|
|
||||||
title,
|
|
||||||
path,
|
|
||||||
imageUrl,
|
|
||||||
success: () => {
|
|
||||||
toast('分享成功')
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('分享失败:', err)
|
|
||||||
toast('分享失败')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user