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
		}
  },
  data() {
    return {
			cssUrl:this.cssUrl,
			userSelectIndex:0,
			vistors:false,
    }
  },
  methods: {
		addVisitor(){
			location.href = '/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.$emit('clickEvent', visitor_id)
		},
		getVisitors() {
			var param = new Object()
			param.page = 1
			param.limit = 10000
			this.$http.req('user/get_visitors', {}, 'GET').then(data=>{
				if(data == -1) return
				this.vistors = data
				this.$emit('clickEvent', 0)
			});
		}
  }
};
</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: 1rpx solid #5BD07A;
					color: #58CA7F;
					background: #F8FFF7;
				}
			}
			.add{
				width: auto;
				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{
					height: 44rpx;
					height: 44rpx;
				}
			}
		}
	}

</style>