<template>
	<view class="header">
		<image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
		<view class="info-block flex-row-between">
			<view class="info">
				<view class="title">{{title}}</view>
				<view class="desc">{{$test.$desc}}</view>
			</view>

			<view v-if="title=='收款码'+$test.$test" @click="look" class="btn flex-center">查看指引 <image class="zhiyin" src="../../static/images/zhiyin.png"
				 mode=""></image>
			</view>

			<view v-if="title=='普通二维码'+$test.$test" @click="lookCode" class="btn flex-center">查看指引 <image class="zhiyin" src="../../static/images/zhiyin.png"
				 mode=""></image>
			</view>

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

<script>
	export default {

		name: 'headerTitle',
		props: {
			title: {
				type: String,
				default () {
					return ""
				},
			}
		},
		data() {
			return {
		       $test:this.$test.$test,
			}
		},
		methods: {
			look() {
				uni.showModal({
					title: '温馨提示',
					content: '上传多张收款码视为多码合一，请勿上传第三方聚合收款码。多码合一只支持支付宝收款二维码、云闪付钱包收款二维码',
					showCancel: false,
					cancelText: '',
					confirmText: '好的',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			lookCode() {
				uni.showModal({
					title: '温馨提示',
					content: `图片${this.$test.$test}只支持能有效进行访问的网址链接，非网址链接的二维码，不建议进行${this.$test.$test}操作。`,
					showCancel: false,
					cancelText: '',
					confirmText: '好的',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		}
	}
</script>

<style>
	.header {
		width: 100%;
		height: 198rpx;
		position: relative;
	}

	.header .bg-img {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 198rpx;

	}

	.header .info-block {
		padding: 0 40rpx 0 48rpx;
		height: 198rpx;
	}

	.header .info-block .title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
		line-height: 50rpx;
	}

	.header .info-block .desc {
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
		line-height: 40rpx;
		margin-top: 8rpx;
	}

	.header .info-block .btn {
		width: 176rpx;
		height: 56rpx;
		border: 2rpx solid #fff;
		border-radius: 28rpx;
		text-align: center;
		line-height: 52rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;
	}

	.zhiyin {
		width: 28rpx;
		height: 28rpx;
		margin-left: 6rpx;
	}
</style>
