xc/components/service/index.vue

<template>
	<view>
		<uni-popup class="" ref="popup">
			<view class="popup-box">
				<view class="img">
					<image src="/static/image/img29.png" mode=""></image>
				</view>
				<view class="mian">
					<view class="delivery">
						<view class="title">已经为您定制专属客服</view>
						<image src="/static/image/img30.png" mode=""></image>
					</view>
					<view class="nocancel">客服VX:{{ kefu }}</view>
					<view class="comfirm-box">
						<view class="cancel" @click="close">取消</view>
						<view class="comfirm" @click="comfirm(kefu)">复制微信</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	
	export default {
		props: [],
		data() {
			return{
	            kefu:'vx458562',
				show:false
			};
		},
		mounted() {},
		methods: {
			open(){
				this.$refs.popup.open('center')
			},
			close(){
				this.$refs.popup.close()
			},
			comfirm(text) {
				console.log(text);
				const result = this.uniCopy(text);
				if (result === false) {
					uni.showToast({
						title: "不支持",
					});
				} else {
					uni.showToast({
						title: "复制成功",
						icon: "none",
					});
				}
				this.close();
			},
			uniCopy(content) {
				/**
				 * 小程序端 和 app端的复制逻辑
				 */
				//#ifndef H5
				uni.setClipboardData({
					data: content,
					success: function () {
						console.log("success");
						return true;
					},
				});
				//#endif
			
				/**
				 * H5端的复制逻辑
				 */
				// #ifdef H5
				if (!document.queryCommandSupported("copy")) {
					//为了兼容有些浏览器 queryCommandSupported 的判断
					// 不支持
					return false;
				}
				let textarea = document.createElement("textarea");
				textarea.value = content;
				textarea.readOnly = "readOnly";
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, content.length); //核心
				let result = document.execCommand("copy"); // 执行浏览器复制命令
				textarea.remove();
				return result;
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popup-box {
		position: relative;
		background-color: #ffffff;
		border-radius: 25rpx;
		.img {
			position: relative;
			top: -60rpx;
			left: 10%;
			width: 80%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			image {
				border-radius: 20rpx 20rpx 0 0;
				height: 150rpx;
			}
		}
		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;
			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;
	
				.title {
				}
	
				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}
	
			.nocancel {
				font-size: 32rpx;
				color: #333333;
				margin-top: 14rpx;
			}
	
			.comfirm-box {
				margin: 52rpx 0rpx;
				display: flex;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					border: 1px solid #dcc786;
					border-radius: 38rpx;
	
					font-size: 32rpx;
					color: #605128;
				}
	
				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 74rpx;
					background: linear-gradient(
						-90deg,
						#d1ba77 0%,
						#f7e8ad 100%
					);
					border-radius: 38px;
					font-size: 32rpx;
					color: #605128;
				}
			}
		}
	}
</style>