128 lines
3.6 KiB
Vue
128 lines
3.6 KiB
Vue
<script setup lang='ts'>
|
|
import water from "./components/water.vue"
|
|
import { ref } from "vue"
|
|
import axios from "axios"
|
|
|
|
const showIframe = ref(false)
|
|
// const iframeSRC = ref("")
|
|
|
|
if(!localStorage.getItem('order4')){
|
|
console.error('请到缓存设置指令: order1~4; ', '场景指令: scene--URI, 视频指令: mp4--URI', '例如: order1 secen--http://shop.lihai.cn/#/admin');
|
|
}
|
|
|
|
const orderList = ref([]);
|
|
|
|
const loadOrderList = ()=>{
|
|
axios.get('https://chat.lihaink.cn/index/demo1').then((res)=>{
|
|
orderList.value = res.data.data;
|
|
console.log(orderList);
|
|
})
|
|
}
|
|
loadOrderList()
|
|
|
|
const changeImg = (e: number)=>{
|
|
// switch(e){
|
|
// case 1: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/62";break;
|
|
// case 2: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/110";break;
|
|
// case 3: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/84";break;
|
|
// case 4: iframeSRC.value = "https://goview.lihaink.cn/#/chart/preview/74";break;
|
|
// }
|
|
// showIframe.value = true;
|
|
// switch(e){
|
|
// case 1: nowOrder.value = localStorage.getItem('order1');break;
|
|
// case 2: nowOrder.value = localStorage.getItem('order2');break;
|
|
// case 3: nowOrder.value = localStorage.getItem('order3');;break;
|
|
// case 4: nowOrder.value = localStorage.getItem('order4');;break;
|
|
// }
|
|
submitOrder(e)
|
|
}
|
|
|
|
const nowOrder = ref<string|null>("")
|
|
const url = ref("")
|
|
|
|
const submitOrder = (e: number)=>{
|
|
// if(!nowOrder.value) return console.log('请到缓存设置指令: order'+e, '场景指令: scene--URI, 视频指令: mp4--URI');
|
|
nowOrder.value = `${orderList.value[e].type==1?'scene':'mp4'}--${orderList.value[e].uri}`;
|
|
if(url.value==`https://chat.lihaink.cn/index/push?name=${nowOrder.value}`) return console.log('当前指令已经发送过,请切换其他指令');
|
|
url.value = `https://chat.lihaink.cn/index/push?name=${nowOrder.value}`
|
|
axios.get(`https://chat.lihaink.cn/index/push?name=${btoa(nowOrder.value)}`).then(()=>{
|
|
console.log('发送成功', e);
|
|
}).catch((err)=>{
|
|
console.log('发送失败', err);
|
|
})
|
|
}
|
|
|
|
const back = ()=>{
|
|
showIframe.value = false
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full white">
|
|
<!-- <div v-if="showIframe" class="w-full h-full" style="box-sizing: border-box;padding-top: 10px;">
|
|
<div class="btn" @click="back">返回</div>
|
|
<iframe class="iframe" :src="iframeSRC"></iframe>
|
|
</div> -->
|
|
<div class="img-list w-full h-full">
|
|
<div id="img1" class="img-list-item" @click="changeImg(1)">
|
|
<water cid="img1"/>
|
|
<img :src="orderList[0]?.image"/>
|
|
</div>
|
|
<div id="img2" class="img-list-item" @click="changeImg(2)">
|
|
<water cid="img2"/>
|
|
<img :src="orderList[1]?.image"/>
|
|
</div>
|
|
<div id="img3" class="img-list-item" @click="changeImg(3)">
|
|
<water cid="img3"/>
|
|
<img :src="orderList[2]?.image"/>
|
|
</div>
|
|
<div id="img4" class="img-list-item" @click="changeImg(4)">
|
|
<water cid="img4"/>
|
|
<img :src="orderList[3]?.image"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.white{
|
|
background-color: #101014;
|
|
color: #fff;
|
|
.btn{
|
|
margin-left: 20px;
|
|
margin-bottom: 7px;
|
|
border: 1px solid #51d6a9;
|
|
border-radius: 3px;
|
|
width: 50px;
|
|
text-align: center;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
}
|
|
.iframe{
|
|
width: 100%;
|
|
height: calc(100vh - 35px - 10px);
|
|
}
|
|
.img-list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
.img-list-item{
|
|
box-sizing: border-box;
|
|
height: 50%;
|
|
width: 50%;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
/* border: 1px solid darkblue; */
|
|
/* background-color: aquamarine; */
|
|
}
|
|
}
|
|
}
|
|
</style>
|