LSM_OIL_SITE_zhongping/packageQr/pages/partnership/join-qr/join-qr.vue

<template>
	<view class="page-content bg-main-oil">
		<view class="qr-container shadow bg-white">
			<view class="text-xxl padding back-x" @tap="goBack(1)">
				<text class="cuIcon-close ">
				</text>
			</view>
			<view class="text-center logo">
				<image style="width:180upx" :src="mainURL+'logo.png'" mode="widthFix"></image>
				<!-- <image style="width:150upx" :src="mainURL+'bg-qy.png'" mode="widthFix"></image> -->

			</view>
			<view class="margin padding text-center oil-main-color text-xl">
				<text @tap="getCompanyQrCode(id)">{{companyName}}</text>
				<view class="cu-tag bg-red bg-main-oil padding-left self-tag" @tap="goBack(1)">
					<text class="padding-left-sm">
						<text class="cuIcon-order icon-exchange "></text>
						切换企业</text>
				</view>
			</view>
			<view class="padding-top text-center qr-part">
				<view class="qrimg" @tap="copyQrStr">
					<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="400" unit="upx" background="#fff" foreground="#000"
					 pdground="#000" :icon="iconUrl" iconSize="40" onval :usingComponents="usingComponents" showLoading @result="qrR" />
				</view>
			</view>
			<view class="margin padding text-center bg-white ">
				<text>使用星油扫一扫，司机即可快速加入该企业</text>
			</view>
		</view>
	</view>
</template>

<script>
	import partnerApi from '@/api/partner.js'
	// 引入二维码库
	import tkiQrcode from "../../../components/tki-qrcode/tki-qrcode.vue" //二维码生成器
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
				val: '',
				iconUrl: '../../static/img/qr-icon.png',
				mainURL: this.global.mainURL,
				id: '',
				companyName: ''
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.id = option.id
			this.companyName = option.name
		},
		onShow() {
			// this.qrInit()
			this.getCompanyQrCode(this.id)
		},
		onPullDownRefresh() {
			this.getCompanyQrCode(this.id)
		},
		created() {},
		methods: {
			goBack(num) {
				uni.navigateBack({
					delta: num
				})
			},
			qrR() {

			},
			copyQrStr() {
				uni.setClipboardData({
					data: this.val,
					success: () => {
						uni.showToast({
							title: '已复制',
							icon: 'none'
						})
					}
				})
			},
			getCompanyQrCode(id) {
				const data1 = {
					companyId: id,
					oilSiteCode: uni.getStorageSync('oilSite').oilSiteCode
				}
				partnerApi.getCompanyQrCode(data1).then(res => {
					if (res.code == 20000) {
						this.val = res.data
					}
				})
			}
		}
	}
</script>

<style scoped>
	.qr-container {
		height: 80%;
		position: absolute;
		bottom: 0;
		width: 750upx;
		border-radius: 10px 10px 0 0;
		box-shadow: 3px -3px 4px rgba(26, 26, 26, 0.2);
	}

	.logo {
		position: absolute;
		width: 100%;
		top: -80rpx;
	}

	.qr-part {
		position: relative;
		z-index: 2;
	}

	.self-tag {
		position: absolute;
		right: 0;
		top: 2em;
		border-radius: 100upx 0 0 100upx;
	}

	.icon-exchange {
		/* transform: scale(1, 1.8); */
		transform: rotate(90deg);
		position: absolute;
		left: 15upx;
		line-height: 1rem;
	}

	.back-x {
		position: relative;
		z-index: 3;
	}
</style>