CBB3/pages/chat/group/info/groupInfo/qrcode.vue

<template>
	<view class="app">
		<view class="pannel fx-h fx-bc fx-ac">
			<view class="pannel-body fx-h fx-bc fx-ac">
				
				<view class="fx-r fx-bc" style="width: 100%;margin: 10px;">
					<image  class="avatar"  :src="img == '' ? '/static/chat/group_chat.png' : img" mode="aspectFill"></image>
					<view class="nickname">{{name}}</view>
				</view>
				<view class="hr"></view>
				<view class="fx-r fx-bc fx-ac">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 300px;height: 300px;" />
				</view>
				<view class="tip">该二维码7天({{utils.date('m月d日')}})有效，重新进入将更新.</view>	
			</view>
		</view>
		
	</view>
</template>

<style>
	.app{padding-top: 40px;}
	.pannel{background: #fff;width:calc(100vw - 40px);margin-left: 20px;border-radius:10px;}
	.pannel .avatar{width: 40px;height: 40px;border-radius: 4px;margin-left: 10px;}
	.pannel-body{position: relative;width: 100%;padding: 20px 0;}
	.pannel-body .nickname{color: #000;margin-left: 10px;font-weight: bold;}
	.pannel-body .tag{font-size: 14px;color: #737373;margin-top: 10px;}
	.hr{border-top: 1px dashed #f1f1f1;height: 1px;width: 100%;;margin: 10px 0;}
	.sub-btn{background: #2fbec0;padding: 8px 20px;color: white;display: inline-block;border-radius: 4px; margin-top: 20px;}
</style>



<script>
	import {mapState,mapMutations} from 'vuex';
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js';
	//import yuanqiQrCode from '@/uni_modules/yuanqi-qr-code/components/yuanqi-qr-code/yuanqi-qr-code';
	export default {  
		computed: mapState(['user']),
		//components: {yuanqiQrCode },
		data() {
			return {
				bm_code:""
			}
		},
		onLoad(options) {
			this.name = options.name || "";
			this.img = options.img || "";
			this.groupId = options.groupId || "";
			this.initView();
		},
		methods: {
			...mapMutations(['checkUserLogin']),
			
			initView:function(){
				uni.showLoading({ title:"加载中.." });
				this
					.request
					.post("chatGroupQrcode",{groupId:this.groupId})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.bm_code = res.msg;
							uQRCode.make({
								canvasId: 'qrcode',
								componentInstance: this,
								size: 300,
								margin: 10,
								text: this.bm_code,
								backgroundColor: '#ffffff',
								foregroundColor: '#000',
								fileType: 'png',
								errorCorrectLevel: uQRCode.errorCorrectLevel.H
							})
							.then(res => {
								console.log(res)
							});
							//setTimeout(()=>{this.$refs.yuanqiQRCode.makeImage();},200);
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err=>{
						uni.hideLoading();
						this.utils.Tip("加载失败，请重新尝试");
						uni.navigateBack();
					});
			},
			tapSave:function(){
				//  this.$refs.yuanqiQRCode.save();
			},
		}
		
	}
</script>

<style>
</style>