<template>
    <div class="code-box">
        <div class="code-box_mian" v-if="is_show_code">
            <div class="tip-text-2" v-if="store_des">{{store_des}}</div>
            <div class="store-name ET6 EC5">{{ store_name }}</div>
            <div class="qr-code-wrapper">
                <img :src="store_code" alt="店铺二维码" :class="{'ios-img-touch':!isWeChat}">
            </div>
            <div class="tip-text-3 ">{{hintText}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            is_show_code:{ //是否显示二维码，关注过则不显示，二维码字段为空也不显示
                type:Boolean,
                default:true
            },
            store_code:{ //二维码
                type:String,
                default:''
            },
            store_name:{//微信群名
                type:String,
                default:''
            },
            store_des:{ //描述语
                type:String,
                default:''
            }
        },
        computed:{
            // 是否是微信
            isWeChat(){
                return wx.CLIENT_ENV && wx.CLIENT_ENV === 'wechat';
            },
            hintText(){
                let defaultTxt = '长按二维码识别，或截图保存';
                if( !this.isWeChat ){
                    defaultTxt = window.wx && wx.CLIENT_TYPE === 'PC' ? '微信扫描图片二维码，识别并关注' :'长按保存图片后在微信打开扫码';
                }
                return defaultTxt;
            }

        },
        methods: {
        }
    };
</script>
<style scoped lang="scss">
    .code-box{
        padding: .32rem 0 0.6rem 0;
        text-align: center;
        background-color: #ffffff;
    }
    .code-box_mian{         
        width:5.3rem;
        height: 6.1rem;
        padding: .48rem 0.42rem 0.4rem 0.5rem;
        margin:0 auto;
        border-radius: 0.2rem;
        background:rgba(255,255,255,1);
        box-shadow:0rem -0.06rem 0.52rem 0rem rgba(0,0,0,0.1)
    }
    
    .tip-text-2 {
        font-size: 0.3rem;
        color:#333;
    }
    .store-name {
        height: 0.4rem;
        margin: 0.44rem auto 0;
        padding: 0 0.32rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color:#25324E;
    }
    .qr-code-wrapper {
        width: 3.46rem;
        height: 3.46rem;
        margin: 0.2rem auto 0;
        padding: 0.08rem;
        img {
            float: left;
            width: 100%;
            height: 100%;          
        }
        .ios-img-touch{
            -webkit-touch-callout: initial;
        }
    }
    .tip-text-3 {
        height: 0.32rem;
        margin: 0.3rem auto 0;
        font-size: 0.22rem;
        color: #B2B2B2;
    }
</style>