circulation_ancientCoins_new/components/visitorList.vue

<template>
	<view class="visitor-list-com">
		<view class="nav">
			<view class="add PfScMedium" @click="addVisitor" v-if="add">
				<img :src="cssUrl + 'add_visitor.svg'">
				<text>增加预约人</text>
			</view>
			<view :class="'item ' + (userSelectIndex == 0 ? ' active' : '')" @click="selectUser(0)">全部</view>
			<view :class="'item' + (userSelectIndex == (key + 1) ? ' active' : '')" v-for="(item, key) in vistors"
				@click="selectUser(key + 1)">{{ item.name }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "visitorList",
	props: {
		add: {
			type: Boolean,
			default: () => false
		},
		has_visit: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			cssUrl: this.cssUrl,
			userSelectIndex: 0,
			vistors: false,
			visitor_id: 0
		}
	},
	methods: {
		addVisitor() {
			this.$nav.navToPath('/pages/modify_visitor/modify_visitor?type=1')
		},
		selectUser(key) {
			this.userSelectIndex = key
			var visitor_id = 0
			if (this.userSelectIndex > 0) visitor_id = this.vistors[this.userSelectIndex - 1].id
			this.visitor_id = visitor_id
			this.getVisitors()
			this.$emit('clickEvent', visitor_id)
		},
		getVisitors() {
			var param = new Object()
			param.page = 1
			param.limit = 10000

			var obj = new Object()
			obj.has_visit = this.has_visit ? 1 : 0
			if (this.visitor_id != 0) obj.visitor_id = this.visitor_id
			this.$http.req('api/user/get_visitors', obj, 'POST').then(data => {
				if (data == -1) return
				this.vistors = data
				this.$emit('dataEvent', this.vistors)
				this.$emit('prebookEvent', this.visitor_id)
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.visitor-list-com {
	width: 100%;
	height: auto;
	overflow: hidden;

	.nav {
		width: 100%;
		display: flex;
		height: 108rpx;
		display: flex;
		box-sizing: border-box;
		overflow-x: auto;
		align-items: center;
		padding: 0 18rpx;
		column-gap: 20rpx;

		.item {
			width: auto;
			flex-shrink: 0;
			padding: 0 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: rgba(201, 203, 209, 0.25);
			border-radius: 30rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #616266;
			min-width: 136rpx;
			text-align: center;

			&.active {
				border: 2rpx solid #5BD07A;
				color: #58CA7F;
				font-weight: 500;
				background: #F8FFF7;
			}
		}

		.add {
			width: 188rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 0;
			border-radius: 100rpx;
			background: #58CA7F;
			font-size: 24rpx;
			line-height: 30rpx;
			text-align: center;
			letter-spacing: 0rpx;
			color: #FFFFFF;
			padding: 0 12rpx;
			flex-shrink: 0;

			img {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
}
</style>