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() {
				let operate_id = uni.getStorageSync('operate_id');
				getTicket({
					operate_id: operate_id
				}).then((res) => {
					if (res.code === 1) {
						this.navList = [...this.navList, ...res.data]
					}
				})
			},
			getList() {
				let operate_id = uni.getStorageSync('operate_id');
				ticketList({
					category_id: this.type,
					page: this.page,
					operate_id: operate_id,
					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>