<template>
    <view class="occupy-share">
        <view class="os-address">
            <view class="oa-name"> 
                <image mode="aspectFit" :src="shareInfo.stadium_logo"></image>
                <view>{{ shareInfo.stadium_name || '-' }}</view>
            </view>
            <view class="oa-info">
                <view>地址：</view>
                <view>{{ shareInfo.stadium_address || '-' }}</view>
            </view>
        </view>
        <view class="os-section">
            <view class="os-des">
                <view>①<text>截图</text>该页面后，发此图给朋友 </view>
                <view>② 朋友<text>长按此图</text>识别下面的二维码<text>关注公众号</text> </view>
                <view>③ 接收微信消息，<text>领取入场码</text></view>
                <view>④ 领取成功后<text>仅限本人使用</text></view>
            </view>
            <image class="os-code-img" mode="aspectFit" :src="shareInfo.share_qrcode"></image>
            <view class="os-tip">注：此码非入场码</view>
        </view>
    </view>
</template>

<script>
import { API } from '../../../js/api'
import { servers } from '../../../js/server'
export default {
    data(){
        return {
            shareInfo: {},
        }
    },
    onLoad(options){
        this.getShareCode({
            brand_id: options.brand_id,
            order_no: options.order_no,
        })
    },
    methods: {
        getShareCode({ brand_id, order_no }){
            servers.get({
                url: API.venue.takeUpShareQr,
                data: { brand_id, order_no, },
                failMsg: '加载失败！'
            })
            .then(res=> {
                console.warn('shareInfo', res)
                this.shareInfo = res || {};
            })
        }
    }
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    page{
        background-color: $themeColor;
    }
    .occupy-share{
        padding-top: 32upx;
        padding-left: 24upx;
        padding-right: 24upx;

    }
    .os-address{
        margin-bottom: 36upx;
        .oa-name{
            margin-bottom: 20upx;
            @include centerFlex(flex-start);
            >image{
                flex-shrink: 0;
                margin-right: 10upx;
                width: 34upx;
                height: 34upx;
            }
            >view{
                line-height: 40upx;
                font-size: 28upx;
                color: #fff;
                @include textHide(1);
            }
        }
        .oa-info{
            display: flex;
            align-items: baseline;
            >view{
                line-height: 40upx;
                font-size: 28upx;
                color: #fff;
                &:first-child{
                    flex-shrink: 0;
                }
                &+view{
                    flex-grow: 1;
                    word-break: break-all;
                }
            }
        }
    }
    .os-section{
        padding: 30upx 60upx 0;
        height: 640upx;
        overflow: hidden;
        border-radius: 10upx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;
        .os-des{
            margin-bottom: 16upx;
            >view{
                line-height: 52upx;
                font-size: 28upx;
                color: #333;
                >text{
                    color: $themeColor;
                }
            }
        }
        .os-code-img{
            margin-bottom: 12upx;
            width: 300upx;
            height: 300upx;
        }
    }
    .os-tip{
        font-size: 24upx;
        color: #9A9A9D;
    }
</style>