<template>
	<view class="body" style="overflow: hidden;padding-bottom: 0rpx">
		<view class="" style="width: 100%;height: 20px;visibility: hidden;"></view>
		<view class="arrow-left">
			<i class="uni-btn-icon" @click="backto" style="color: rgb(255, 255, 255); font-size: 27px;"></i>
		</view>
		<view class="yld_pay_body" :class="showEncy ? 'hide' : ''">
			<view class=""
				style="z-index: 111;font-size: 35px; color: #fff;font-weight:800;letter-spacing: 4px;margin: 0 60px;">
				<view class="">
					扫我付款
				</view>
				<view class="">
					随机减免
				</view>
			</view>
			<view class="top-nav page-first" id="top-nav">
				<view class="" style="height: 13px;"></view>
				<view class="qrcode">
					<canvas id="qrcode" canvas-id="qrcode"
						:style="'width: ' + sysWidth * 0.35 * qrcodeWidth + 'px;height:' + sysWidth * 0.35 * qrcodeWidth + 'px;'"></canvas>
				</view>
				<view class="merchname" :style="'font-size:' + 13 + 'px;'">
					{{ yld_merch_userdata.name }}
				</view>
			</view>
		</view>
		<!-- 广告 -->

		<view class="guanggao">
			<video :autoplay="true" :loop="true" :show-fullscreen-btn='false' :show-play-btn='false'
				:enable-progress-gesture='false' :show-center-play-btn='false' :controls='false'
				:style="'width: ' + sysWidth+ 'px;height: calc(100vh - 195px);'"
				src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/2.mp4"></video>
			<!-- </swiper-item> -->

			<!-- <swiper-item :style="'width: ' + sysWidth + 'px;'">
					<view class="swiper-item">
						<image src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/1.jpg" mode="" :style="'width: ' + sysWidth+ 'px;'" 
						mode="widthFix"></image>
					</view>
				</swiper-item> -->

			<!-- <swiper-item :style="'width: ' + sysWidth + 'px;'">
					<view class="swiper-item">
						<image src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/2.jpg" mode="" :style="'width: ' + sysWidth * 1.5 + 'px;'" 
						mode="widthFix"></image>
					</view>
				</swiper-item>
				
				<swiper-item :style="'width: ' + sysWidth + 'px;'">
					<view class="swiper-item">
						<image src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/3.jpg" mode="" :style="'width: ' + sysWidth * 1.5 + 'px;'" 
						mode="widthFix"></image>
					</view>
				</swiper-item> -->

			<!-- 	<swiper-item :style="'width: ' + sysWidth + 'px;'">
					<video :autoplay="false" :loop="false"
					:show-play-btn="true" :muted="true"
					:style="'width: ' + sysWidth+ 'px;height:456rpx;'" src="https://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/cashier/1.mp4"></video>
				</swiper-item> -->

			<!-- </swiper> -->
		</view>
		<view>
			<image class="bgimg"
				src="http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/qrcode/cashier/pay-bg.jpg"
				id="ecny-img-body-srolltag" mode="scaleToFill" />
		</view>
	</view>
</template>

<script>
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	export default {
		data() {
			return {
				showEncy: false,
				sysWidth: uni.getSystemInfoSync().windowWidth,
				qrcodeWidth: 0.6,
				yld_merch_userdata: uni.getStorageSync("yld_merch_userdata"),
			}
		},
		components: {},
		onReady() {
			this.makeQRCode()
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				})
				uni.stopPullDownRefresh()
			}, 688)
		},
		onHide() {
			this.init()
		},
		onUnload() {
			clearInterval(lisenTask)
		},
		methods: {
			backto() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 生成聚合收款码
			makeQRCode(total = null) {
				let qrcodeText = "https://yld.angyakeji.com/www/public/view/merge_qrcode/index.html?a=1&scene=merchid%3d"
				let qrOption = {
					text: qrcodeText,
					size: this.sysWidth * this.qrcodeWidth * 0.35,
					foreground: {
						image: {
							src: "",
							width: 0.2,
							height: 0.2
						}
					}
				}
				// qrOption.foreground.image.src = 'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/home_swiper.png'
				const ctx = uni.createCanvasContext('qrcode')
				const uqrcode = new UQRCode(qrOption, ctx)
				uqrcode.make()
				uqrcode.draw()
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import './cashier.scss';
</style>