<template>
	<view class="content">
		<text class="title">下载承诺书模板流程如下：</text>
		<text>1、点击复制链接按钮,复制链接到剪切板；({{downUrl}})</text>
		<button type="primary" class="copyLinkBtn" @click="copyLink">复制链接</button>
		<text>2、打开浏览器,在网址一栏,鼠标右键粘贴,回车打开；</text>
		<view v-if="sure">
			<image class="imgBox" src="../../static/downBook_1.jpg" mode="widthFix"></image>
			<text>3、点击下载按钮进行下载；</text>
			<image class="imgBox" src="../../static/downBook_2.jpg" mode="widthFix"></image>
			<text>4、承诺书填写规范,请按照下图完整填写；</text>
			<image class="imgBox" src="../../static/guifan.jpg" mode="widthFix"></image>
		</view>
		<view v-else>
			<text>3、承诺书填写规范,请按照下图完整填写；</text>
			<image class="imgBox" src="../../static/guifan.jpg" mode="widthFix"></image>
		</view>
		
	</view>
</template>

<script>
	
	import { downBook } from '../../api/index.js'
	
	export default{
		name:"down-book",
		data() {
			return {
				downUrl: 'https://pan.baidu.com/s/1KtVOi7PN_kgUbbpS8Lt53g',
				sure: true
			}
		},
		onShow() {
			downBook().then(res=>{
				if(res.error_code === 200){
					this.downUrl = res.url
					this.sure = false
				}
			})
		},
		methods:{
			copyLink(){
				const url = this.downUrl
				uni.setClipboardData({
					data: url,
					success:function(){
						uni.showToast({
							title:"已复制到剪切板",
							icon:'success',
							duration:2500
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		min-height: 100%;
		background: $uni-bg-color-normal;
		color: #4D4D4D;
	}
	.content{
		padding: 37rpx 31rpx;
		font-size: 24rpx;
	}
	.content text{
		display: block;
		margin-bottom: 36rpx;
	}
	.title{
		font-size: 28rpx;
	}
	.copyLinkBtn{
		margin: 26rpx 0;
		font-size: 32rpx;
		background: $uni-btn-bg-color !important;
	}
	.imgBox{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-bottom: 20rpx;
	}
</style>
