jp-housekeep-manage/pages/managementList/authorizedQRCode.vue

<template>
	<view>
		<u-navbar title="授权二维码" title-color="#101010">

		</u-navbar>
		
		<u-picker v-model="show" mode="selector"
		 :default-selector="[defaultIndex]"
		 :range="informationList" range-key="title"
			@confirm="confirm"></u-picker>
			
		<u-modal v-model="openModalBl" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" :title="userInfo.name" :content="userInfo.phone"
			></u-modal>
		<view class="main">
			<view class="company">
				{{companyInfo.name}}
			</view>
			<view class="energy-meter" v-if="informationList.length==1">
				{{information.title}}
			</view>
			<view class="energy-meter" v-else @click="show=true">
				{{information.title}}<u-icon name="arrow-down"></u-icon>
			</view>
			<!-- 个人信息 -->
			<view class="infos">
				<!-- <view class="photo">
					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
				</view> -->
				<view class="details">
					<view class="name">
						{{userInfo.name}}
					</view>
					<view class="tel">
						{{userInfo.phone}}
					</view>
				</view>

				<view class="dial"  @click="openModalBl=true" >
					<img src="@/assets/img/antOutline-phone 1.svg" alt="" />
				</view>
			</view>
			<!-- 二维码 -->
			<view class="qr-code">
				<view class="title">
					扫描下方的二维码申请授权
				</view>
				<view class="win">

					<view class="border-corner left-top"></view>
					<view class="border-corner right-top"></view>
					<view class="border-corner left-bottom"></view>
					<view class="border-corner right-bottom"></view>
					<view class="code-box">
						<img id="qrcode2" :src="qrCodeImg">
						<img id="qrcode" style="display: none;">

					</view>
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/managementList.js'
	import {
		convertCanvasToImage,
		substrMb
	} from '@/apis/utils'
	import QRCode from 'qrcodejs2'

	export default {
		data() {
			return {
				openModalBl: false,
				qrCodeImg: "",
				informationList: [],
				information: {},
				defaultIndex: 0,
				companyInfo:{},
				userInfo:{},
				show:false,
			}
		},
		onReady() {
			this.userInfo =this.carhelp.getPersonInfo();
			
			this.companyInfo =this.carhelp.getPersonInfoPlus().companyInfo;
			
			this.getInformationList()
		},
		methods: {
			confirmPhone() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.userInfo.phone //仅为示例
				});
			},
			
			confirm(e){
				console.log(e)	
				this.defaultIndex=e[0]
				this.information = this.informationList[e[0]]
				this.qrCodeImgMethod()
			},
			qrCodeImgMethod() {
				var url=window.location.href.split("/#")[0]
				
				var joinUrl = url+"/#/pages/managementList/applyAuthorisation?id="+this.information.id
				let qrcode = new QRCode('qrcode', {
					width: 200,
					height: 200,
					text: joinUrl,
					correctLevel: QRCode.CorrectLevel.M,

				})
				var canvas = document.getElementsByTagName('canvas')[0];
				this.qrCodeImg = convertCanvasToImage(canvas);
			},
			//授权二维码
			getInformationList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.informationList().then((res) => {
					uni.hideLoading();
					this.informationList = res.data.informationList;
					console.log(this.informationList)
					if (this.informationList.length) {
						this.information = this.informationList[0]
						this.qrCodeImgMethod()
					}else{
						uni.showModal({
							title:"提示",
							content:"未生成二维码，请联系管理员",
							showCancel:false,
							success: (res) => {
								uni.navigateBack()
							}
						})
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: rgba(94, 161, 255, 1);
	}
</style>

<style lang="scss" scoped>
	.main {
		margin: 48rpx;
		padding: 48rpx 0rpx;
		background-color: #fff;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.39);
		border-radius: 20px;

		.company {
			width: 344rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 28px;
			background-color: rgba(83, 150, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			text-align: center;
			margin: auto;
		}

		.energy-meter {
			color: rgb(16, 16, 16);
			font-size: 32rpx;
			margin-top: 20rpx;
			text-align: center;
			font-weight: bold;
		}

		.infos {
			display: flex;
			align-items: c;
			margin-top: 48rpx;
			padding: 48rpx 80rpx;
			border: 1px solid rgba(244, 244, 244, 1);

			.photo {
				img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50px;
				}
			}

			.details {
				margin-left: 16rpx;

				.name {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					display: flex;
					align-items: center;

					span {
						display: inline-block;
						width: 84px;
						height: 16px;
						border-radius: 4px;
						border: 1px solid rgba(187, 190, 194, 1);
						margin-left: 8rpx;
					}
				}

				.tel {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 4rpx;
				}
			}

			.dial {
				width: 64rpx;
				height: 64rpx;
				background-color: rgba(22, 119, 255, 1);
				border-radius: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

		}

	}

	// 二维码
	.qr-code {
		padding: 48rpx 0rpx;
		text-align: center;

		.title {
			color: rgb(16, 16, 16);
			font-size: 32rpx;


		}

		.code-box {
			width: 400rpx;
			height: 400rpx;
			border: 1px solid rgb(153, 204, 255);
			border-radius: 4px;

			img {
				width: 400rpx;
				height: 400rpx;
			}
		}

		.win {
			margin-top: 32rpx;
			padding: 30rpx;
			position: relative;
			display: inline-block;
		}

		.border-corner {
			z-index: 900;
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			background: rgba(0, 0, 0, 0);
			border: 4px solid #5396FF;
		}

		.left-top {
			top: 0;
			left: 0;
			border-right: none;
			border-bottom: none;
			border-top-left-radius: 4px;
		}

		.right-top {
			top: 0;
			right: 0;
			border-left: none;
			border-bottom: none;
			border-top-right-radius: 4px;
		}

		.left-bottom {
			bottom: 0;
			left: 0;
			border-right: none;
			border-top: none;
			border-bottom-left-radius: 4px;
		}

		.right-bottom {
			bottom: 0;
			right: 0;
			border-left: none;
			border-top: none;
			border-bottom-right-radius: 4px;
		}


	}
</style>