74 lines
3.1 KiB
HTML
74 lines
3.1 KiB
HTML
|
{{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>
|