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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

在main.js中的写法：

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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