{{template "header" }}
<style>
    body{background: #fff;}
    .el-descriptions{
        margin: 10px 0px;
    }
</style>
<div id="app" style="width:100%">
    <el-descriptions  direction="vertical" :column="4" border v-for="item in order_list">
        <el-descriptions-item label="商品" :span="3"><{item.商品}></el-descriptions-item>
        <el-descriptions-item ><el-button @click="postMessage(item)">发送</el-button></el-descriptions-item>
        <el-descriptions-item label="用户名" :span="2"><{item.用户名}></el-descriptions-item>
        <el-descriptions-item label="手机号" :span="2"><{item.手机}></el-descriptions-item>
        <el-descriptions-item label="联系地址"><{item.联系地址}></el-descriptions-item>
    </el-descriptions>

</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        delimiters:["<{","}>"],
        data: {
            order_list:[
                {
                    用户名:"kooriookami",
                    手机:"18100000000",
                    联系地址:"江苏省苏州市吴中区吴中大道 1188 号",
                    商品:"REVAN芮范2024夏季新品设计师款度假风牛仔印花两件套RM32401305",
                    url:"http://www.baidu.com",
                    img:"https://tse2-mm.cn.bing.net/th/id/OIP-C.NgP62UVQDAui3hJ3j5c7nwHaHa?rs=1&pid=ImgDetMain",
                    price:"100"
                },
                {
                    用户名:"kooriookami",
                    手机:"18100000000",
                    联系地址:"江苏省苏州市吴中区吴中大道 1188 号",
                    商品:"REVAN芮范2024夏季新品设计师款度假风牛仔印花两件套RM32401305",
                    url:"http://www.baidu.com",
                    img:"https://tse2-mm.cn.bing.net/th/id/OIP-C.NgP62UVQDAui3hJ3j5c7nwHaHa?rs=1&pid=ImgDetMain",
                    price:"100"
                },
                {
                    用户名:"kooriookami",
                    手机:"18100000000",
                    联系地址:"江苏省苏州市吴中区吴中大道 1188 号",
                    商品:"REVAN芮范2024夏季新品设计师款度假风牛仔印花两件套RM32401305",
                    url:"http://www.baidu.com",
                    img:"https://tse2-mm.cn.bing.net/th/id/OIP-C.NgP62UVQDAui3hJ3j5c7nwHaHa?rs=1&pid=ImgDetMain",
                    price:"100"
                },
            ]
        },
        methods: {
            getOrders(){
                //通过GET参数获取到 访客ID，企业ID，客服账号。通过这些信息与自己系统内的订单接口对接
                let visitorId=getQuery("visitor_id");
                let entId=getQuery("ent_id");
                let kefuName=getQuery("kefu_name");
                console.log(visitorId,entId,kefuName);
            },
            postMessage(item){
                // 发送消息到父窗口
                window.parent.postMessage({type: 'FROM_IFRAME1', data: item}, '*');
            }
        },
        mounted:function(){
        },
        created: function () {
            this.getOrders();
        }
    })
</script>