<template>
    <view class="occupy-success">
        <view class="os-address">{{ qrInfo.stadium_name || '-' }}</view>
        <image class="os-code" mode="aspectFit" :src="qrInfo.verify_qrcode"></image>
        <view class="os-num">验证码：{{ qrInfo.verify_code || '-' }}</view>
        <view class="os-btn" @click="toShare">
            <view>分享给朋友</view>
            <image mode="aspectFit" src="/static/images/icon/share_arrow_cff.png"></image>
        </view>
        <view class="os-black" @click="backBtn">返回</view>
    </view>
</template>

<script>
import { API } from '../../../js/api';
import { servers } from '../../../js/server';
import util from '../../../utils/util';
export default {
    data(){
        return {
            qrInfo: {},
            optionsQuery: {},
        }
    },
    onLoad(options){
        this.optionsQuery = options || {};
        this.getPageInfo({
            brand_id: options.brand_id,
            order_no: options.order_no,
        })
    },
    methods: {
        toShare(){
            let { optionsQuery } = this;
            let _qrStr = `?brand_id=${optionsQuery.brand_id}&order_no=${optionsQuery.order_no}`
            util.routeTo(`/pages/site/occupy_share/occupy_share${_qrStr}`, 'nT')
        },
        backBtn(){
            util.routeTo();
            util.previousPageFunction({ // 刷新占用列表
                fnName: 'refreshList',
                query: null
            })
        },
        getPageInfo({
            brand_id,
            order_no,
        }){
            servers.get({
                url: API.venue.takeUpVerifyQr,
                data: {
                    brand_id,
                    order_no,
                },
                failMsg: '加载失败！'
            })
            .then(res=>{
                console.warn('res--->' , res);
                this.qrInfo = res || {};
            })
        }
    }
    
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    .occupy-success{
        padding: 0 24upx;
        .os-address{
            margin-bottom: 80upx;
            height: 92upx;
            line-height: 90upx;
            border-bottom: 2upx solid #D8D8D8;
            font-size: 32upx;
            color: #333;
            @include textHide(1);
        }
        .os-code{
            margin: 0 auto 40upx;
            display: block;
            width: 400upx;
            height: 400upx;
        }
        .os-num{
            margin-bottom: 128upx;
            text-align: center;
            font-size: 32upx;
            color: #333;
            @include textHide(1);
        }
        .os-btn{
            margin: 0 auto 92upx;
            width: 320upx;
            height: 112upx;
            background-color: $themeColor;
            border-radius: 10upx;
            @include centerFlex(center);
            >view{
                font-size: 32upx;
                color: #fff;
            }
            >image{
                margin-left: 20upx;
                width: 34upx;
                height: 36upx;
            }
        }
        .os-black{
            font-size: 32upx;
            line-height: 44upx;
            text-align: center;
            color: $themeColor;
            text-decoration: underline;
        }
    }
</style>