<template>
	<view class="pages">
		<view class="success-box">
			<view class="success-tit">质保单领取成功</view>
			<view class="success-code">
				<image :src="codeImg"></image>
			</view>
			<view class="success-tips">车主可用微信扫此二维码查看质保单详情</view>
		</view>
		<view class="buttons flex justify_between">
			<u-button type="default" @click="shareCode">保存二维码</u-button>
			<u-button type="primary" @click="saveForm">查看质保信息</u-button>
		</view>
	</view>
</template>

<script>
	import { getZbdQrCode, sharePic } from '@/libs/tools'
	export default {
		data() {
			return {
				detail: null,
				codeImg: ''
			}
		},
		onLoad() {
			this.detail = this.$store.state.vuex_uuidTempData
			this.codeImg = getZbdQrCode()
		},
		onUnload() {
			this.$store.state.vuex_uuidTempData = null
		},
		methods: {
			// 保存二维码到相册并打开详情页面
			saveForm(){
				uni.redirectTo({
					url: "/pagesA/qualityPolicy/searchOrder?mobile="+this.detail.customerInfo.customMobile
				})
			},
			shareCode(){
				sharePic()
			}
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	background: #fff;
	.success-box{
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 10vh;
		.success-tit{
			font-weight: bold;
			color: #4CAF50;
			font-size: 1rem;
		}
		.success-code{
			padding: 2rem;
			image{
				width: 10rem;
				height: 10rem;
			}
		}
		.success-tips{
			color: #fd920e;
		}
	}
	 
	.buttons{
		padding: 1rem 2rem 2rem;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 10000;
		border-top: 1px solid #eee;
		justify-content: space-around;
		::v-deep .u-btn{
			width: 8rem;
		}
	}
}
</style>
