app/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue

<style>
.page {
	background-color: #000000;
	opacity: 0.9;
}

.btn-cancel {
	background-color: #1d1d1e;
	border-color: #3a3a3d;
}
.btn-cancel-touched {
	background-color: #515156;
	border-color: #2b2b2f;
}
.all-box {
	display: flex;
	flex-direction: row;
	/* justify-content: space-around; */
	height: 280rpx;
}
.share-item {
	display: flex;
	flex-direction: column;
	margin-top: 60rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	width: 120rpx;
}
.icon-wrapper {
	width: 120rpx;
	height: 120rpx;
	background-color: #343437;
	border-radius: 100px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	opacity: 0.8;
}
.icon-image {
	width: 60rpx;
	height: 60rpx;
}
.icon-tag-text {
	color: #ffffff;
	width: 120rpx;
	font-size: 14px;
	margin-top: 10rpx;
	lines: 1;
	text-overflow: ellipsis;
	text-align: center;
}
</style>

<template>
	<view class="page">
		<view class="all-box">
			<!-- 	<view
				class="share-item"
				@click="downloadVlog()"
			>
				<view
					class="icon-wrapper"
					style="align-self: center"
				>
					<image
						class="icon-image"
						src="/static/images/link.png"
						style="align-self: center"
					></image>
				</view>
				<text
					class="icon-tag-text"
					style="align-self: center"
				>
					复制口令
				</text>
			</view> -->

			<view
				v-if="userId == ''"
				class="share-item"
				@click="copyLink()"
			>
				<view
					class="icon-wrapper"
					style="align-self: center"
				>
					<image
						class="icon-image"
						src="/static/images/link.png"
						style="align-self: center"
					></image>
				</view>
				<text
					class="icon-tag-text"
					style="align-self: center"
				>
					复制链接
				</text>
			</view>
			<!-- 会话列表 storage.getHasLogin() -->
			<scroll-view
				v-if="userId != ''"
				:scroll-x="true"
				:show-scrollbar="false"
				class="all-box"
			>
				<view
					class="share-item"
					@click="copyLink()"
				>
					<view
						class="icon-wrapper"
						style="align-self: center"
					>
						<image
							class="icon-image"
							src="/static/images/link.png"
							style="align-self: center"
						></image>
					</view>
					<text
						class="icon-tag-text"
						style="align-self: center"
					>
						复制链接
					</text>
				</view>
				<view
					v-for="(i, index) in converList"
					:key="index"
					class="share-item"
					@click="toIm(i)"
				>
					<view
						class="icon-wrapper"
						style="align-self: center"
					>
						<image
							v-if="i.type == 'C2C'"
							class="icon-image"
							:src="i.userProfile.avatar || ''"
							style="align-self: center"
						></image>
						<image
							v-if="i.type == 'GROUP'"
							class="icon-image"
							:src="i.groupProfile.avatar || ''"
							style="align-self: center"
						></image>
					</view>
					<text
						v-if="i.type == 'C2C'"
						class="icon-tag-text"
						style="align-self: center"
					>
						{{ i.userProfile.nick || '' }}
					</text>
					<text
						v-if="i.type == 'GROUP'"
						class="icon-tag-text"
						style="align-self: center"
					>
						{{ i.groupProfile.name || '' }}
					</text>
				</view>
			</scroll-view>

			<!-- 	<view
				class="share-item"
				@click="gotoQRCode()"
			>
				<view
					class="icon-wrapper"
					style="align-self: center"
				>
					<image
						class="icon-image"
						src="/static/images/icon-qrcode.png"
						style="align-self: center"
					></image>
				</view>
				<text
					class="icon-tag-text"
					style="align-self: center"
				>
					二维码
				</text>
			</view> -->

			<!-- 判断只有我自己才能显示这个按钮 -->
			<!-- 			<view
				v-if="thisVlogerId == userId && isPrivate == 0"
				class="share-item"
				@click="changeVlogToPrivate()"
			>
				<view
					class="icon-wrapper"
					style="align-self: center"
				>
					<image
						class="icon-image"
						src="/static/images/icon-private.png"
						style="align-self: center"
					></image>
				</view>
				<text
					class="icon-tag-text"
					style="align-self: center"
				>
					转为私密
				</text>
			</view> -->

			<!-- 			<view
				v-if="thisVlogerId == userId && isPrivate == 1"
				class="share-item"
				@click="changeVlogToPublic()"
			>
				<view
					class="icon-wrapper"
					style="align-self: center"
				>
					<image
						class="icon-image"
						src="/static/images/icon-private.png"
						style="align-self: center"
					></image>
				</view>
				<text
					class="icon-tag-text"
					style="align-self: center"
				>
					转为公开
				</text>
			</view> -->
		</view>

		<view
			class=""
			style="padding: 0 20rpx"
		>
			<!-- :class="{'btn-preplay':!preplayTouched, 'btn-preplay-touched': preplayTouched}"
			@click="preview"
			@touchstart="touchstartPreplay" 
			@touchend="touchendPreplay" -->

			<view
				:class="{ 'btn-cancel': !cancelTouched, 'btn-cancel-touched': cancelTouched }"
				@click="close"
				@touchstart="touchstartCancel"
				@touchend="touchendCancel"
				style="height: 50px; display: flex; flex-direction: column; justify-content: center; border-width: 1rpx; border-radius: 10px"
			>
				<text
					class=""
					style="color: #ffffff; font-size: 16px; align-self: center; align-self: center"
				>
					取消
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
import config from '@/config/config.js';
import { vlogChangeToPublic, vlogChangeToPrivate } from '@/api/vlog';
import { dateFormat, graceNumber, getDateBeforeNow } from '@/utils/tools.js';
import { conversationData, sendVlogCustomMsg } from '@/utils/handleim.js';
import popup from '../uni-popup/popup.js';
export default {
	name: 'UniPopupShare',
	mixins: [popup],
	emits: ['select'],
	props: {
		title: {
			type: String,
			default: ''
		},
		beforeClose: {
			type: Boolean,
			default: false
		},
		thisVlogerId: {
			type: String,
			default: ''
		},
		thisVlogId: {
			type: String,
			default: ''
		},
		vlogUrl: {
			type: String,
			default: ''
		},
		isPrivate: {
			type: Number,
			default: 0
		},
		vlogItem: {}
	},
	data() {
		return {
			userId: '',
			cancelTouched: false,
			converList: [],
			flag: true
		};
	},

	mounted() {
		console.log('挂载');
		var info = storage.getVlogUserInfo();
		if (info != null) {
			console.log('登录了');
			this.userId = info.id;
			this.conversationList();
		}
	},
	methods: {
		// 获取会话列表
		async conversationList() {
			var data = await conversationData();
			console.log(data);
			this.converList = data.data.conversationList;
			console.log(this.converList);
		},
		toIm(i) {
			if (this.flag) {
				this.flag = false;
				sendVlogCustomMsg(i, this.vlogItem)
					.then((res) => {
						console.log('发送成功，返回结果：', res);
						uni.showToast({
							icon: 'success',
							title: '分享成功',
							duration: 3000
						});
						var timer = setTimeout(() => {
							clearTimeout(timer);
							this.flag = true;
						}, 3000);
					})
					.catch((err) => {
						this.flag = true;
						console.error('发送失败了', err);
						// 这里可以做失败之后的处理，比如弹个错误提示
						uni.showToast({
							icon: 'error',
							title: '云服务异常'
						});
					});
			} else {
				uni.showToast({
					icon: 'none',
					title: '点太快了'
				});
			}
		},
		/**
		 * 选择内容
		 */
		select(item, index) {
			this.$emit('select', {
				item,
				index
			});
			this.close();
		},
		/**
		 * 关闭窗口
		 */
		close() {
			if (this.beforeClose) return;
			this.popup.close();
			uni.showTabBar({
				animation: true
			});
		},

		touchstartCancel() {
			this.cancelTouched = true;
		},

		touchendCancel() {
			this.cancelTouched = false;
		},

		downloadVlog() {
			console.log('downloadVlog...thisVlogId = ' + this.vlogUrl);
			uni.showLoading();
			uni.downloadFile({
				url: this.vlogUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						console.log('下载成功');
						uni.saveVideoToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								console.log('save success');
								uni.hideLoading();
								uni.showToast({
									title: '保存成功~！',
									duration: 5000
								});
							}
						});
					}
				}
			});
		},

		copyLink() {
			// this.thisVlogId 视频id
			var url = config.shareLink + '/pages/me/vlog?vlogId=' + this.thisVlogId;
			uni.setClipboardData({
				data: url,
				success: () => {
					uni.showToast({
						//提示
						title: '复制成功'
					});
				}
			});
		},

		gotoQRCode() {
			uni.navigateTo({
				url: '/pages/qrcode/qrcode?vlogId=' + this.thisVlogId
			});
		},

		async changeVlogToPublic() {
			var vlogId = this.thisVlogId;
			var me = this;
			var info = storage.getVlogUserInfo();
			var userId = info.id;
			var result = await vlogChangeToPublic(userId, vlogId);
			if (result.data.status == 200) {
				this.isPrivate = 0;
				uni.showToast({
					title: '设置完毕~'
				});
			}
		},

		async changeVlogToPrivate() {
			var vlogId = this.thisVlogId;
			var me = this;
			var info = storage.getVlogUserInfo();
			var userId = info.id;
			var result = await vlogChangeToPrivate(userId, vlogId);
			if (result.data.status == 200) {
				this.isPrivate = 1;
				uni.showToast({
					title: '设置完毕~'
				});
			}
		}
	}
};
</script>