groupQRCode.nvue

<template>
	<view class="container">
		<view class="qr-code">
			<view class="code-info">
				<text class="group-name">{{name}}</text>
				<text class="group-id" @click="copyGroupID">群号：{{group_id}}</text>
				<!--uqrcode 组件来源，插件Sansnn-uQRCode 链接地址：https://ext.dcloud.net.cn/plugin?id=1287 -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- <uqrcode ref="uqrcode" :start="false" :size="200" canvas-id="qrcode" :value="qrcodeData"></uqrcode> -->
				<!-- #endif -->
			</view>
			<!-- #ifndef APP-NVUE -->
			<image class="group-avatar" :src="avatar_file || '/uni_modules/uni-im/static/avatarUrl.png'" mode="">
			</image>
			<!-- #endif -->

		</view>
		<!-- #ifdef APP-NVUE -->
		<image class="group-avatar" :src="avatar_file || '/uni_modules/uni-im/static/avatarUrl.png'" mode=""></image>
		<!-- #endif -->

		<!-- <view class="btn-box">
			<view class="btn-item" @click="save">
				<uni-icons type="arrow-down" size="30"></uni-icons>
				<text class="btn-text">保存</text>
			</view>
			<view class="btn-item" @click="share">
				<uni-icons type="paperplane" size="30"></uni-icons>
				<text class="btn-text">分享</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uqrcode from "@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode"
	export default {
		components: {
			uqrcode
		},
		data() {
			return {
				group_id: '',
				name: '',
				avatar_file: ''
			}
		},
		computed: {
			qrcodeData() {
				let data = {
					"type": "uni-im",
					"subType": "groupInfo",
					"data": {
						group_id: this.group_id,
						name: this.name,
						avatar_file: this.avatar_file
					}
				}
				return JSON.stringify(data)
			}
		},
		onLoad(options) {
			// console.log("options: ",options);
			this.group_id = options.id
			this.name = options.name
			this.avatar_file = options.avatar_file
		},
		onReady(){
			setTimeout(()=>{
				this.$refs.uqrcode.make({
					success: () => {
						// console.log('生成成功');
					},
					fail: err => {
						// console.log(err)
					}
				});
			},1000)
		},
		methods: {
			copyGroupID() {
				uni.setClipboardData({
					data: this.group_id,
					success: function() {
						console.log('success');
					}
				});
			},
			save() {
				console.log('保存');
			},
			share() {
				console.log('分享');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		/* #ifndef APP-NVUE */
		height: 100vh;
		/* #endif */
		flex: 1;
		padding-top: 200rpx;
		// justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
	}

	.qr-code {
		width: 550rpx;
		height: 780rpx;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		background-color: #fff;
		position: relative;
	}

	.code-info {
		align-items: center;
		justify-content: center;
	}

	.group-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 100rpx;
		position: absolute;
		/* #ifdef APP-NVUE */
		top: 150rpx;
		/* #endif */
		/* #ifndef APP-NVUE */
		top: -60rpx;
		/* #endif */
	}

	.group-name {
		width: 400rpx;
		font-size: 46rpx;
		/* #ifdef APP-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		overflow: hidden;
		/* #endif */
		text-overflow: ellipsis;
		margin-top: 120rpx;
		text-align: center;
	}

	.group-id {
		margin: 40rpx 0;
		font-size: 30rpx;
	}

	.btn-box {
		flex-direction: row;
		margin-top: 100rpx;
	}

	.btn-item {
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 130rpx;
		border-radius: 100rpx;
		background-color: #fff;
		margin: 0 80rpx;
		border: 1px solid #eee;
	}

	.btn-text {
		font-size: 28rpx;
	}
</style>