uniapp——实现在线选座功能——技能提升

首先声明一点：下面的内容是从一个uniapp的程序中摘录的，并非本人所写，先做记录，以免后续遇到相似需求抓耳挠腮。

效果图

代码——html部分

<template><view><cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">在线选座</block></cu-custom><anil-seat title="皮皮鲁与鲁西西之罐头小人"info="2021年10月22日 国语 奇幻 喜剧 儿童"room-name="5号厅":seat-data="seatData" :max="4" @confirm="onConfirmSeat"></anil-seat></view>
</template>

上面代码中的cu-custom组件是全局注册到main.js中的组件：

在main.js中的写法：

// 此处为引用自定义顶部
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom);

cu-custom组件

<template><view><view class="cu-custom" :style="[{height:CustomBar + 'px'}]"><view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]"><view class="action" @tap="BackPage" v-if="isBack"><text class="cuIcon-back"></text><slot name="backText"></slot></view><view class="content" :style="[{top:StatusBar + 'px'}]"><slot name="content"></slot></view><slot name="right"></slot></view></view></view>
</template><script>export default {data() {return {StatusBar: this.StatusBar,CustomBar: this.CustomBar};},name: 'cu-custom',computed: {style() {var StatusBar= this.StatusBar;var CustomBar= this.CustomBar;var bgImage = this.bgImage;var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;if (this.bgImage) {style = `${style}background-image:url(${bgImage});`;}return style}},props: {bgColor: {type: String,default: ''},isBack: {type: [Boolean, String],default: false},bgImage: {type: String,default: ''},},methods: {BackPage() {uni.navigateBack({delta: 1});}}}
</script>

anil-seat组件

由于内容过多，暂不进行展示，有需要的可以评论区留下邮箱。

代码——js+css部分

<script>import anilSeat from '@/components/anil-seat/components/anil-seat/anil-seat.vue'import {seatData} from '@/common/seat-data.js'export default {components: {anilSeat},data() {return {seatData: seatData};},methods: {onConfirmSeat (items) {console.log(items)}}}
</script><style lang="scss">
page {background-color: #eee;height: 100%;
}
</style>

完成！！！多多积累，多多收获！！！