修改页面布局，增加全屏退出全屏功能
This commit is contained in:
parent
4c2d88ed99
commit
ab7c61231b
|
|
@ -7,7 +7,58 @@
|
|||
:visible.sync="informationdialogshow"
|
||||
@close="onclose"
|
||||
>
|
||||
<div class="head-container search-box flex row-between">
|
||||
<div slot="title" class="flex row-between flex-y-center">
|
||||
<div class="flex" style="width: 500px">
|
||||
<div class="el-dialog__title" style="margin-right: 10px">
|
||||
{{ title }}
|
||||
</div>
|
||||
<el-dropdown @command="changePostPay">
|
||||
<el-button plain type="success" size="mini">
|
||||
{{ postPay ? "后付费" : "先付费" }}
|
||||
<i class="el-icon-caret-bottom"></i>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :command="false">先付费</el-dropdown-item>
|
||||
<el-dropdown-item :command="true">后付费</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span @click="toggleFullScreen" class="flex flex-xy-center cur-pointer full-screen" >
|
||||
<svg v-if="!isFullScreen" t="1724396447139" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8943" width="128" height="128"><path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" fill="#666666" p-id="8944"></path></svg>
|
||||
<svg v-else t="1724396479520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9141" width="128" height="128"><path d="M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z" fill="#666666" p-id="9142"></path></svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-1" style="padding-right: 50px">
|
||||
<div class="flex-1">
|
||||
<el-input
|
||||
v-model="goods.query.productId"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="请输入商品名称"
|
||||
style="width: 100%"
|
||||
class="filter-item"
|
||||
suffix-icon="el-icon-search"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex; justify-content: flex-end; margin-left: 10px"
|
||||
>
|
||||
<div style="width: 100px; margin-left: 20px">
|
||||
<el-select v-model="layout.sel" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in layout.list"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="head-container search-box flex row-between" v-if="false">
|
||||
<div>
|
||||
<el-dropdown @command="changePostPay">
|
||||
<el-button plain type="success" size="mini">
|
||||
|
|
@ -69,8 +120,12 @@
|
|||
>
|
||||
<template v-else>
|
||||
<div class="flex cur-pointer" @click="refChooseUserOpen">
|
||||
|
||||
<img v-if="vipUser.headImg" class="headimg" :src="vipUser.headImg" alt="" />
|
||||
<img
|
||||
v-if="vipUser.headImg"
|
||||
class="headimg"
|
||||
:src="vipUser.headImg"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else class="headimg flex flex-x-y-center">
|
||||
<i-icon class="el-icon-user"></i-icon>
|
||||
</div>
|
||||
|
|
@ -899,9 +954,8 @@
|
|||
<order-note ref="refOrderNote" @confirm="refOrderNoteConfirm"></order-note>
|
||||
|
||||
<!-- 支付时的键盘弹窗 -->
|
||||
<money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
|
||||
|
||||
</money-keyboard>
|
||||
<money-keyboard ref="refMoneyKeyboard" :title="moneyKeyboard.title">
|
||||
</money-keyboard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -983,13 +1037,15 @@ export default {
|
|||
chooseTable,
|
||||
payType,
|
||||
orderNote,
|
||||
moneyKeyboard
|
||||
moneyKeyboard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moneyKeyboard:{
|
||||
show:true,
|
||||
title:'支付'
|
||||
//是否全屏
|
||||
isFullScreen:false,
|
||||
moneyKeyboard: {
|
||||
show: true,
|
||||
title: "支付",
|
||||
},
|
||||
//true后付款false先付款
|
||||
postPay: true,
|
||||
|
|
@ -1339,9 +1395,42 @@ export default {
|
|||
this.getCategory();
|
||||
},
|
||||
methods: {
|
||||
toggleFullScreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
this.enterFullScreen();
|
||||
} else {
|
||||
this.exitFullScreen();
|
||||
}
|
||||
},
|
||||
enterFullScreen() {
|
||||
let element = document.documentElement;
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen();
|
||||
} else if (element.mozRequestFullScreen) { /* Firefox */
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
|
||||
element.webkitRequestFullscreen();
|
||||
} else if (element.msRequestFullscreen) { /* IE/Edge */
|
||||
element.msRequestFullscreen();
|
||||
}
|
||||
this.isFullScreen=true
|
||||
},
|
||||
exitFullScreen() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) { /* Firefox */
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) { /* IE/Edge */
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
this.isFullScreen=false
|
||||
|
||||
},
|
||||
//打开输入钱的键盘
|
||||
openMoneyKeyboard(){
|
||||
this.$refs.refMoneyKeyboard.open()
|
||||
openMoneyKeyboard() {
|
||||
this.$refs.refMoneyKeyboard.open();
|
||||
},
|
||||
changePostPay(val) {
|
||||
this.postPay = val;
|
||||
|
|
@ -1368,7 +1457,7 @@ export default {
|
|||
masterId: this.masterId,
|
||||
orderId: this.createOrder.data.id,
|
||||
payType: this.order.payType,
|
||||
vipUserId:this.vipUser.id
|
||||
vipUserId: this.vipUser.id,
|
||||
});
|
||||
this.payOrderSuccess();
|
||||
},
|
||||
|
|
@ -1607,7 +1696,7 @@ export default {
|
|||
},
|
||||
//获取挂起订单
|
||||
async getCacheOrder() {
|
||||
const res = await $getCacheOrder({tableId:this.table.tableId});
|
||||
const res = await $getCacheOrder({ tableId: this.table.tableId });
|
||||
console.log(res);
|
||||
this.prveOrder.list = res;
|
||||
},
|
||||
|
|
@ -2236,6 +2325,18 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.full-screen{
|
||||
margin-left: 10px;
|
||||
svg{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
&:hover{
|
||||
path{
|
||||
fill: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-add {
|
||||
color: rgb(34, 191, 100);
|
||||
|
|
@ -2385,13 +2486,15 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
.col-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
.flex-x-y-center{
|
||||
.flex-x-y-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__body{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -2856,8 +2959,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
|
||||
.diancan {
|
||||
display: flex;
|
||||
height: 80vh;
|
||||
|
||||
height: calc(100vh - 75px) ;
|
||||
.choose-user {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
|
@ -3087,9 +3189,8 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.07);
|
||||
.img-box{
|
||||
.img-box {
|
||||
width: 136px;
|
||||
|
||||
}
|
||||
img {
|
||||
width: 136px;
|
||||
|
|
@ -3148,15 +3249,13 @@ input[type="number"]::-webkit-outer-spin-button {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
&.layout-text.sell-out{
|
||||
&.layout-text.sell-out {
|
||||
.info {
|
||||
color: #c8c8c8;
|
||||
|
||||
.name {
|
||||
color: #c8c8c8;
|
||||
|
||||
color: #c8c8c8;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue