<template>
    <div class="page">
        <div v-if="!loading" class="success-main">
            <h2 class="success-tit1">恭喜您！</h2>
            <h2 class="success-tit1">店铺{{ shopData.name || "" }}</h2>
            <h3 class="success-tit1">已经开通成功</h3>

            <div class="qrcode">
                <my-image class="img" :src="qrCode" @click="viewImg"></my-image>
                <p class="text">{{ shopData.name || "" }}二维码</p>
            </div>

            <div class="success-box">
                <button class="success-btn" @click="viewShop">
                    查看店铺
                </button>
                <button class="success-btn plain" @click="jump('/pages/custom/course')">
                    查看教程
                </button>
                <p class="success-text">
                    <a @click="jump({ path: '/pages/manage/index',isTabBar:true })"
                        >返回功能菜单页</a
                    >
                </p>
            </div>
        </div> 
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            loading: false,
            shopData: {},
            qrCode: "",
        };
    },
    filters: {},
    onLoad() {
        this.fn.getToken();
        this.getData();
        this.getQrCode();
    },
    async onShow() {},

    // onPullDownRefresh() {
    //     this.getList();
    // },

    // 函数
    methods: {
        getQrCode(){
            this.api.get('/Shop/GetQrCode',{width:300})
                .then(res=>{
                    this.qrCode = res.data;
                })
        },
        getData() {
            this.api.get("/Shop/GetInfo", {}, { pass: true }).then((res) => {
                if (res.success && res.data) {
                    this.shopData = res.data;
                } else {
                    this.fn
                        .showModal({
                            content: res.message,
                            showCancel: false,
                        })
                        .then((res) => {
                            if (res.confirm) {
                                this.router.back();
                            }
                        });
                }
            });
        },
        checkboxChange(e) {
            console.log(e);
        },

        viewImg() {
            uni.previewImage({
                urls: [this.qrCode],
                longPressActions: true,
            });
        },

        viewShop(){
            uni.navigateToMiniProgram({
                appId:'wx7d16ba51271496b8',
                path:'/pages/goods/index?shopId='+this.shopData.id,
                extraData:{
                    shopId:this.shopData.id
                }
            })
        }
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>


<style lang="scss" scoped>
.success-page {
    min-height: 100vh;
    background-color: #fff;
}
.success-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: px(100);
}
.success-btn {
    color: #fff;
    background-color: rgb(0, 188, 38);
    font-size: px(44);
    width: 100%;
    &.plain{
        background-color: transparent;
        color: #333;
        border: 1px solid #efefef;
    }
}
.success-tit1 {
    font-size: px(56);
    font-weight: bold;
    // color: rgb(0, 188, 38);
    padding-bottom: px(40);
    text-align: center;
}
.success-tit2 {
    font-size: px(54);
    font-weight: bold;
    // color: rgb(0, 188, 38);
    padding-bottom: px(120);
    text-align: center;
}
.success-shop-name {
    font-size: px(44);
    text-align: center;
    margin-top: px(100);
}
.success-box {
    padding: px(40);
    width: 100%;
    margin-top: px(80);
    .success-btn {
        margin-bottom: px(40);
    }
    .success-text {
        width: 100%;
        text-align: center;
        color: #409eff;
        margin-bottom: px(60);
        display: flex;
        align-items: center;
        justify-content: center;
        .success-checkbox {
            transform: scale(0.8);
        }
    }
}
.success-load {
    height: 100%;
    padding-top: px(300);
    .success-text {
        width: px(700);
        margin: 0 auto;
        line-height: 1.6;
        text-align: center;
        font-size: px(44);
    }
}
.success-link {
    color: #409eff;
}
.qrcode {
    padding-top: px(100);
    .img {
        width: px(550);
        height: px(550);
        display: block;
        margin: 0 auto;
        /deep/ img {
            width: px(550);
            height: px(550);
        }
    }
    .text {
        margin-top: px(30);
        font-size: px(40);
        color: #666;
        text-align: center;
    }
}
</style>