zh_order_food_xcx/pages-buy/ticket.vue

<template>
	<!-- 票务 -->
	<view class="ticket-box iPhone-bottom flex-common-css box-border-box">
		<view class="nav-box">
			<image class="head-bg" src="@/static/img/buy/ticket-bg.png" mode="scaleToFill"></image>
			<Nav :leftShow='false' :customNav='true' bgckgroundBox='transparent'>
				<template>
					<view slot="custom" class="align-items-center">
						<uni-icons type="left" size="20" @click="toBack()" color="#fff"></uni-icons>
						<view class="w-390 text-overflow-ellipsis-one fs-36 fw-400 fc-f">票务</view>
					</view>
				</template>
			</Nav>
			
			<view class="box-border-box plr-24 mb-32">
				<view class="head-search">
					<uni-icons class="s-icon" type="search" size="19"></uni-icons>
					<input v-model="search" type="text" placeholder="搜一搜带你玩周边">
					<view class="head-search-buttom text-align-center fs-28 fw-500 fc-f" @click="searchFun()">搜索</view>
				</view>
			</view>
			
			<view class="display-flex box-border-box plr-24 nav-list">
				<view class="text-align-center nav-item" v-for="(item,i) in navList" :key="i" @click="selectType(item.id)">
					<image class="nav-img" :src="item.img" mode="scaleToFill"></image>
					<view class="fs-24 w-96" :class="type == item.id?'fw-600 fc-41ABF5':'fw-400'">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		
		<view v-if="list.length === 0" class="scroll-view-css">
			<EnBlank :customSrc='true'>
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</view>
		
		<scroll-view v-else class="scroll-view-css box-border-box plr-24" scroll-y="true" @scrolltolower="scrolltolower">
			<view class="list-item display-flex" v-for="(item,i) in list" :key="i" @click="toDet(item)">
				<image :src="item.cover_img" mode="aspectFill"></image>
				<view class="flex-1 flex-direction flex-justify-space">
					<view class="w-470 text-overflow-ellipsis fw-600 fs-32 mb-48">{{item.title}}</view>
					<view class=" flex-justify-space align-items-flex-end">
						<view class="">
							<span class="fs-24 fw-400 fc-FB3D03">￥</span>
							<span class="fw-b fs-40 fc-FB3D03">{{item.price}}</span>
							<span class="text-line-through fs-24 fc-9 fw-400">￥{{item.line_price}}</span>
						</view>
						<view class="to-box fs-28 fw-400 fc-f text-align-center">马上抢</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {ticketList} from '@/api/ticket.js';
	import {getTicket} from '@/api/category.js';
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import tools from "@/service/tools";
	export default {
		components:{EnBlank},
		data(){
			return{
				type:0,
				navList:[
					{name:"全部",id:0,img:require('@/static/img/buy/t-all.png')},
				],
				
				page:1,
				total:0,
				list:[],
				search:'',
			}
		},
		onShow() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		mounted() {
			this.getTicket();
		},
		methods:{
			getTicket(){
				getTicket().then((res)=>{
					if(res.code === 1){
						this.navList = [...this.navList,...res.data]
					}
				})
			},
			getList(){
				ticketList({category_id:this.type,page:this.page,search:this.search}).then((res)=>{
					if(res.code === 1){
						this.list = [...this.list,...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			searchFun(){
				this.page = 1;
				this.list = [];
				this.getList();
			},
			selectType(id){
				if(this.type != id){
					this.type = id;
					this.page = 1;
					this.list = [];
					this.getList();
				}
			},
			toBack(){
				tools.leftClick()
			},
			scrolltolower(){
				if(this.list.length < this.total){
					this.page += 1;
					this.getList();
				}
			},
			toDet(item){
				uni.navigateTo({
					url:"/pages-buy/ticket-det?id=" + item.id
				})
			},
		},
	}
</script>

<style>
	body{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.w-470{
		width: 470rpx;
	}
	.ticket-box{
		.list-item{
			width: 100%;
			min-height: 200rpx;
			margin-bottom: 40rpx;
			background-color: #fff;
			image{
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}
			.to-box{
				width: 132rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: linear-gradient( 225deg, #41ABF5 0%, #5BD8FB 100%);
				border-radius: 200rpx;
			}
		}
		
		.nav-box{
			width: 100%;
			height: 452rpx;
			position: relative;
			.head-bg{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 452rpx;
				z-index: -1;
			}
			.head-search{
				width: 100%;
				position: relative;
				.s-icon{
					position: absolute;
					left: 24rpx;
					top: 20rpx;
				}
				input{
					width:100%;
					height: 72rpx;
					background: #FFFFFF;
					border-radius: 200rpx;
					box-sizing: border-box;
					padding: 0 130rpx 0 68rpx;
					font-size: 32rpx;
				}
				.head-search-buttom{
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient( 90deg, #2CE6F8 0%, #41ABF5 100%);
					border-radius: 200rpx;
					line-height: 60rpx;
					position: absolute;
					right: 6rpx;
					top: 6rpx;
				}
			}
			.nav-list{
				overflow-x: scroll;
				.nav-item{
					width: 96rpx !important;
					height: 126rpx;
					margin-right: 48rpx;
					.nav-img{
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto 12rpx auto;
						z-index: 10;
					}
					.w-96{
						width: 96rpx;
					}
				}
			}
		}
	}
</style>