Vue3（十）电影院案例

效果图：

　　

 

 

代码：

<template>
    <div class="move_box">
        <div class="move_leftbox">
            <h4 style="text-align:center">屏幕</h4>
            <div class="img_box">
                <div class="img_itembox" v-for="(m, i) in moves" :key="m.id" @click="selectDesk(i)">
                    <template v-if="m.state == 'true'">
                        <div class="img_option move_img"></div>
                    </template>

                    <template v-else-if="m.state == 'false'">
                        <img src="../assets/selected.png" alt="" class="move_img">
                    </template>

                    <template v-else-if="m.state == 'on'">
                        <img src="../assets/be_selected.png" alt="" class="move_img">
                    </template>
                </div>
            </div>
        </div>
        <div class="move_rightbox">
            <img src="../assets/jiongma.png" alt="" class="move_bigimg" />
            <div class="move_rightitem">
                <img src="../assets/jiongma.png" alt=""
                    style="width:120px;float: left;margin-right: 20px;margin-bottom: 10px;">
                <div style="text-align:left">中文名：囧妈</div>
                <br>
                <div style="text-align:left">英文名：Lost in Russia</div>
                <br>
                <div style="text-align:left">剧情：喜剧</div>
                <br>
                <div style="text-align:left">版本：中文2D</div>
                <br>
                <div style="text-align:left">中国内地/126分钟</div>
                <br>
                <br>
                <div style="text-align:left">影院：<span style="font-weight:600">万达影城</span></div>
                <br>
                <div style="text-align:left">影厅：<span style="font-weight:600">8号影厅</span></div>
                <br>
                <div style="text-align:left">场次：<span style="font-weight:600">2021.05.18 (周二) 20:00</span></div>
                <br>
                <hr>
                <br>
                <div style="text-align:left">单价：<span style="font-weight:600">￥38.00</span></div>
                <br>
                <div style="text-align:left">总价：<span style="font-weight:600">￥{{ total }}.00</span></div>
                <br>
                <hr>
                <br>
                <div class="btn_box">结帐下单</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
const moves = reactive([
    { id: 1, state: "true" }, { id: 2, state: "true" }, { id: 3, state: "true" },
    { id: 4, state: "true" }, { id: 5, state: "true" }, { id: 6, state: "true" },
    { id: 7, state: "true" }, { id: 8, state: "true" }, { id: 9, state: "true" },
    { id: 10, state: "true" },

    { id: 11, state: "true" }, { id: 12, state: "false" }, { id: 13, state: "true" },
    { id: 14, state: "false" }, { id: 15, state: "false" }, { id: 16, state: "false" },
    { id: 17, state: "true" }, { id: 18, state: "false" }, { id: 19, state: "true" },
    { id: 20, state: "true" },

    { id: 21, state: "false" }, { id: 22, state: "false" }, { id: 23, state: "false" },
    { id: 24, state: "true" }, { id: 25, state: "false" }, { id: 26, state: "true" },
    { id: 27, state: "true" }, { id: 28, state: "true" }, { id: 29, state: "true" },
    { id: 30, state: "true" },

    { id: 31, state: "true" }, { id: 32, state: "true" }, { id: 33, state: "true" },
    { id: 34, state: "true" }, { id: 35, state: "false" }, { id: 36, state: "true" },
    { id: 37, state: "true" }, { id: 38, state: "true" }, { id: 39, state: "true" },
    { id: 40, state: "true" },

    { id: 41, state: "true" }, { id: 42, state: "true" }, { id: 43, state: "true" },
    { id: 44, state: "false" }, { id: 45, state: "false" }, { id: 46, state: "false" },
    { id: 47, state: "true" }, { id: 48, state: "true" }, { id: 49, state: "true" },
    { id: 50, state: "false" },

    { id: 51, state: "true" }, { id: 52, state: "true" }, { id: 53, state: "true" },
    { id: 54, state: "true" }, { id: 55, state: "true" }, { id: 56, state: "true" },
    { id: 57, state: "true" }, { id: 58, state: "true" }, { id: 59, state: "true" },
    { id: 60, state: "true" },

    { id: 61, state: "true" }, { id: 62, state: "true" }, { id: 63, state: "true" },
    { id: 64, state: "true" }, { id: 65, state: "true" }, { id: 66, state: "true" },
    { id: 67, state: "true" }, { id: 68, state: "true" }, { id: 69, state: "true" },
    { id: 70, state: "true" },

    { id: 71, state: "true" }, { id: 72, state: "true" }, { id: 73, state: "true" },
    { id: 74, state: "true" }, { id: 75, state: "false" }, { id: 76, state: "true" },
    { id: 77, state: "false" }, { id: 78, state: "true" }, { id: 79, state: "true" },
    { id: 80, state: "true" },

    { id: 81, state: "true" }, { id: 82, state: "true" }, { id: 83, state: "true" },
    { id: 84, state: "false" }, { id: 85, state: "false" }, { id: 86, state: "false" },
    { id: 87, state: "true" }, { id: 88, state: "true" }, { id: 89, state: "true" },
    { id: 90, state: "true" },

    { id: 91, state: "true" }, { id: 92, state: "true" }, { id: 93, state: "true" },
    { id: 94, state: "true" }, { id: 95, state: "true" }, { id: 96, state: "true" },
    { id: 97, state: "true" }, { id: 98, state: "true" }, { id: 99, state: "true" },
    { id: 100, state: "true" },

    { id: 101, state: "true" }, { id: 102, state: "true" }, { id: 103, state: "true" },
    { id: 104, state: "false" }, { id: 105, state: "true" }, { id: 106, state: "true" },
    { id: 107, state: "false" }, { id: 108, state: "true" }, { id: 109, state: "true" },
    { id: 110, state: "true" },

    { id: 111, state: "true" }, { id: 112, state: "true" }, { id: 113, state: "true" },
    { id: 114, state: "true" }, { id: 115, state: "true" }, { id: 116, state: "true" },
    { id: 117, state: "false" }, { id: 118, state: "true" }, { id: 119, state: "true" },
    { id: 120, state: "true" },

    { id: 121, state: "true" }, { id: 122, state: "true" }, { id: 123, state: "true" },
    { id: 124, state: "true" }, { id: 125, state: "true" }, { id: 126, state: "true" },
    { id: 127, state: "true" }, { id: 128, state: "true" }, { id: 129, state: "true" },
    { id: 130, state: "true" },

    { id: 131, state: "true" }, { id: 132, state: "false" }, { id: 133, state: "true" },
    { id: 134, state: "false" }, { id: 135, state: "false" }, { id: 136, state: "true" },
    { id: 137, state: "true" }, { id: 138, state: "true" }, { id: 139, state: "true" },
    { id: 140, state: "true" },

    { id: 141, state: "false" }, { id: 142, state: "false" }, { id: 143, state: "true" },
    { id: 144, state: "false" }, { id: 145, state: "true" }, { id: 146, state: "true" },
    { id: 147, state: "true" }, { id: 148, state: "true" }, { id: 149, state: "true" },
    { id: 150, state: "true" },

    { id: 151, state: "true" }, { id: 152, state: "true" }, { id: 153, state: "true" },
    { id: 154, state: "true" }, { id: 155, state: "true" }, { id: 156, state: "true" },
    { id: 157, state: "true" }, { id: 158, state: "true" }, { id: 159, state: "true" },
    { id: 160, state: "true" },

    { id: 161, state: "true" }, { id: 162, state: "true" }, { id: 163, state: "true" },
    { id: 164, state: "true" }, { id: 165, state: "true" }, { id: 166, state: "true" },
    { id: 167, state: "true" }, { id: 168, state: "true" }, { id: 169, state: "true" },
    { id: 170, state: "true" },

    { id: 171, state: "false" }, { id: 172, state: "false" }, { id: 173, state: "true" },
    { id: 174, state: "false" }, { id: 175, state: "false" }, { id: 176, state: "false" },
    { id: 177, state: "false" }, { id: 178, state: "false" }, { id: 179, state: "true" },
    { id: 180, state: "false" },

    { id: 181, state: "true" }, { id: 182, state: "true" }, { id: 183, state: "true" },
    { id: 184, state: "true" }, { id: 185, state: "true" }, { id: 186, state: "true" },
    { id: 187, state: "true" }, { id: 188, state: "true" }, { id: 189, state: "true" },
    { id: 190, state: "true" },

    { id: 191, state: "true" }, { id: 192, state: "false" }, { id: 193, state: "true" },
    { id: 194, state: "true" }, { id: 195, state: "false" }, { id: 196, state: "false" },
    { id: 197, state: "true" }, { id: 198, state: "true" }, { id: 199, state: "true" },
    { id: 200, state: "true" },

    { id: 201, state: "true" }, { id: 202, state: "true" }, { id: 203, state: "true" },
    { id: 204, state: "true" }, { id: 205, state: "true" }, { id: 206, state: "true" },
    { id: 207, state: "true" }, { id: 208, state: "true" }, { id: 209, state: "true" },
    { id: 210, state: "true" },

    { id: 211, state: "true" }, { id: 212, state: "true" }, { id: 213, state: "true" },
    { id: 214, state: "true" }, { id: 215, state: "true" }, { id: 216, state: "true" },
    { id: 217, state: "true" }, { id: 218, state: "true" }, { id: 219, state: "true" },
    { id: 220, state: "true" },

    { id: 221, state: "true" }, { id: 222, state: "true" }, { id: 223, state: "true" },
    { id: 224, state: "true" }, { id: 225, state: "true" }, { id: 226, state: "true" },
    { id: 227, state: "true" }, { id: 228, state: "true" }, { id: 229, state: "true" },
    { id: 230, state: "true" },

    { id: 231, state: "true" }, { id: 232, state: "true" }, { id: 233, state: "true" },
    { id: 234, state: "true" }, { id: 235, state: "true" }, { id: 236, state: "true" },
    { id: 237, state: "true" }, { id: 238, state: "true" }, { id: 239, state: "true" },
    { id: 240, state: "true" },
])
let info = ref(0);
let total = ref(0);
function selectDesk(i: any) {
    console.log("开始" + info.value)
    info.value++
    if (moves[i].state == "on") {
        moves[i].state = "true"
        info.value--
        info.value--
        console.log("弃票", info.value)
    } else if (info.value > 5 && moves[i].state != "false") {
        alert("您最多只能一次性购买五张票卷！")
        moves[i].state = "true"
        info.value--
        console.log(info.value)
    } else if (moves[i].state == "true") {
        moves[i].state = "on"
        total.value += 38
    }  else if (moves[i].state == "false") {
        info.value--
        alert("当前座位已被购买！")
        console.log("选择已购的座位", info.value)
    }

    // else if (info.value > 5 && moves[i].state == "false") {
    //     alert("当前座位已被购买！")
    //     info.value--
    //     info.value--
    //     console.log("选择已购的座位", info.value)
    // }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.move_box {
    width: 1200px;
    border: 1px #333 solid;
    border-radius: 5px;
    margin: 0 auto;
    display: flow-root;
}

.move_rightitem {
    padding: 20px;
    height: 520px;
    background: rgb(3, 3, 3, 0.3);
}

.move_bigimg {
    width: 558px;
    height: 560px;
    object-fit: cover;
    filter: blur(4px);
    position: absolute;
    z-index: -1;
    right: 0;
}

.move_leftbox {
    width: 50%;
    padding: 30px 20px;
    float: left;
    height: 500px;
    border-right: 2px #333 solid;
    text-align: center;
}

.move_rightbox {
    width: 46.5%;
    float: right;
    height: 560px;
    position: relative;
　　color:#fff;

}

.img_box {
    position: relative;
    margin: 10px;
}

.move_img {
    width: 30px;
    cursor: pointer;
    float: left;
    margin: 1px;
}

.img_option {
    background-image: url("../assets/optional.png");
    width: 30px;
    height: 30px;
    background-size: 100%;
    display: block;
}

.active {
    background-image: url("../assets/be_selected.png");
    width: 30px;
    height: 30px;
    background-size: 100%;
    display: block;
}

.move_img:hover {
    box-shadow: 0 0 10px 1px lightgrey;
    border-radius: 20%;
}

.btn_box {
    margin: 0 auto;
    color: #fff;
    width: 160px;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    background: rgb(9, 9, 9, 0.6);
}

.btn_box:hover {
    background: rgb(9, 9, 9, 1);
}
</style>