cbz/page_index/pages/bidding/bidding.vue

<template>
	<view class="content">
		<view class="navbar">
			<u-navbar title="招标" @leftClick="leftClick" bgColor="rgba(0,0,0,0)" :placeholder="true" :autoBack="true">
			</u-navbar>
			<view class="search">
				<u-input v-model="serach_value" type="text" :border="true" placeholder="热搜关键词" shape="circle"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
					<template slot="suffix">
						<view>搜索</view>
					</template>
				</u-input>
			</view>
		</view>
		<view class="box">
			<view class="hflex acenter jbetween">
				<view class="hflex acenter jbetween tabs">
					<block v-for="(item,index) in tabs" :key="index">
						<view class="tabs_item hflex acenter" @click="changeTab(item.index)" :class="tab_active == item.index ? 'tab_active' : ''">
							{{item.name}}
							<block v-if="index != 0">
								<u-icon name="arrow-down-fill" color="#666666" size="6" v-if="tab_active != item.index"></u-icon>
								<u-icon name="arrow-up-fill" color="#506DFF" size="6" v-if="tab_active == item.index"></u-icon>
							</block>
						</view>
					</block>
				</view>
				<view class="hflex acenter " @click="screen">
					<view class="tabs_item" :class="screen_show? 'tab_active' : ''">筛选</view>
					<image src="/static/images/comment/screen.png" class="screen_icon" v-show="!screen_show"></image>
					<image src="/static/images/comment/screen_active.png" class="screen_icon" v-show="screen_show"></image>
				</view>
			</view>
			<view class="drop" v-show="screen_show">
				<view class="drop_bg">
					<view class="drop_list">
						<view class="hflex acenter jbetween">
							<view class="drop_title">披露方式</view>
							<view class="hflex acenter" @click="expend('mode')">
								<view class="drop_right">{{mode?'':'展开'}}</view>
								<u-icon name="arrow-down-fill" color="#666666" size="6" v-if="!mode"></u-icon>
								<u-icon name="arrow-up-fill" color="#666666" size="6" v-else></u-icon>
							</view>
						</view>
						<view class="hflex acenter fwrap" :class="mode?'':'hide'">
							<block v-for="(item,index) in modeList" :key="index">
								<view class="drop_item" :class="mode_active == index?'drop_active':''" @click="selectMode(index)">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="drop_list">
						<view class="hflex acenter jbetween">
							<view class="drop_title">转让底价</view>
							<view class="hflex acenter" @click="expend('price')">
								<view class="drop_right">{{price?'':'展开'}}</view>
								<u-icon name="arrow-down-fill" color="#666666" size="6" v-if="!price"></u-icon>
								<u-icon name="arrow-up-fill" color="#666666" size="6" v-else></u-icon>
							</view>
						</view>
						<view class="hflex acenter fwrap" :class="price?'':'hide'">
							<block v-for="(item,index) in priceList" :key="index">
								<view class="drop_item" :class="price_active == index?'drop_active':''" @click="selectPrice(index)">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="drop_list">
						<view class="hflex acenter jbetween">
							<view class="drop_title">交易类型</view>
							<view class="hflex acenter" @click="expend('type')">
								<view class="drop_right">{{type?'':'展开'}}</view>
								<u-icon name="arrow-down-fill" color="#666666" size="6" v-if="!type"></u-icon>
								<u-icon name="arrow-up-fill" color="#666666" size="6" v-else></u-icon>
							</view>
						</view>
						<view class="hflex acenter fwrap" :class="type?'':'hide'">
							<block v-for="(item,index) in typeList" :key="index">
								<view class="drop_item" :class="type_active.indexOf(index) == -1?'':'drop_active'" @click="selectType(index)">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="drop_list">
						<view class="hflex acenter jbetween">
							<view class="drop_title">所在地区</view>
							<view class="hflex acenter" @click="expend('region')">
								<view class="drop_right">{{region?'':'展开'}}</view>
								<u-icon name="arrow-down-fill" color="#666666" size="6" v-if="!region"></u-icon>
								<u-icon name="arrow-up-fill" color="#666666" size="6" v-else></u-icon>
							</view>
						</view>
						<view class="hflex acenter fwrap" :class="region?'':'hide'">
							<block v-for="(item,index) in regionList" :key="index">
								<view class="drop_item" :class="region_active == index?'drop_active':''" @click="selectRegion(index)">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="drop_list">
						<view class="hflex acenter jbetween">
							<view class="drop_title">披露截止时间</view>
							<view class="hflex acenter" @click="expend('time')">
								<view class="drop_right">{{time?'':'展开'}}</view>
								<u-icon name="arrow-down-fill" color="#666666" size="6" v-if="!time"></u-icon>
								<u-icon name="arrow-up-fill" color="#666666" size="6" v-else></u-icon>
							</view>
						</view>
						<view class="hflex acenter fwrap" :class="time?'':'hide'">
							<block v-for="(item,index) in timeList" :key="index">
								<view class="drop_item" :class="time_active == index?'drop_active':''" @click="selectTime(index)">{{item.name}}</view>
							</block>
						</view>
					</view>
					<view class="drop_bottom hflex acenter jbetween">
						<view class="left" @click="reset">清空</view>
						<view class="right" @click="confirm">确定</view>
					</view>
				</view>
			</view>
			<view class="list">
				<block v-for="(item,index) in pageList" :key="index">
					<view class="list_item" @click="toDetail(item.id)">
						<view class="top">
							<view v-if="item.type == 0" class="top_icon">已中标</view>
							<view v-if="item.type == 1" class="top_icon1">招标中</view>
							<view class="item_name">{{item.name}}</view>
						</view>
						<view class="hflex acenter cell">
							<image src="/static/images/comment/company.png" class="item_icon"></image>
							<view class="text_style1">招标单位</view>
							<view class="text_style1">{{item.company}}</view>
						</view>
						<view class="hflex acenter cell">
							<u-icon name="clock-fill" color="#888888" size="14"></u-icon>
							<view class="text_style1">发布时间</view>
							<view class="text_style1">{{item.date}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				serach_value: '',
				tabs: [
					{
						index: 0,
						name: '默认',
					},
					{
						index: 1,
						name: '披露起始时间',
					},
					{
						index: 2,
						name: '披露截止时间',
					}
				],
				tab_active: 0,
				screen_show: false,
				pageList: [
					{
						id: 1,
						type: 0,
						name: '珠海兴业绿色建筑科技有限公司2022年密封胶材料供应商年度框架招标项目',
						company: '中铁大桥局第七工程有限公司',
						date: '2022-07-12',
					},
					{
						id: 1,
						type: 1,
						name: '珠海兴业绿色建筑科技有限公司2022年密封胶材料供应商年度框架招标项目',
						company: '中铁大桥局第七工程有限公司',
						date: '2022-07-12',
					},
					{
						id: 1,
						type: 0,
						name: '珠海兴业绿色建筑科技有限公司2022年密封胶材料供应商年度框架招标项目',
						company: '中铁大桥局第七工程有限公司',
						date: '2022-07-12',
					},
					
				],
				type: false,
				type_active: [],
				typeList: [
					{
						name: '全部'
					},
					{
						name: '制造加工类'
					},
					{
						name: '采购商品类'
					},
					{
						name: '资产转让类'
					},
					{
						name: '交通运费类'
					},
					{
						name: '船舶转让类'
					},
					{
						name: '工程招标类'
					}
				],
				mode: false,
				mode_active: -1,
				modeList: [
					{
						name: '全部',
					},
					{
						name: '预披露',
					},
					{
						name: '正式披露',
					}
				],
				price: false,
				price_active: -1,
				priceList: [
					{
						name: '全部',
					},
					{
						name: '100万以下',
					},
					{
						name: '100万-500万',
					}
				],
				region: false,
				region_active: -1,
				regionList: [
					{
						name: '全国',
					},
					{
						name: '北京市',
					},
					{
						name: '天津市',
					}
				],
				time: false,
				time_active: -1,
				timeList: [
					{
						name: '全部',
					},
					{
						name: '三天内',
					},
					{
						name: '十天内',
					}
				],
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 返回
			leftClick() {
				$api.jump(-1)
			},
			// 切换tabs
			changeTab(index) {
				that.tab_active = index
			},
			// 筛选
			screen() {
				that.screen_show = !that.screen_show
			},
			// 查看详情
			toDetail(id) {
				$api.jump('/page_index/pages/bidding/bidDetail?id=' + id)
			},
			expend(e) {
				if(e == 'type') {
					that.type = !that.type
				} 
				if(e == 'mode') {
					that.mode = !that.mode
				} 
				if(e == 'price') {
					that.price = !that.price
				} 
				if(e == 'region') {
					that.region = !that.region
				} 
				if(e == 'time') {
					that.time = !that.time
				} 
			},
			selectMode(index) {
				that.mode_active = index
			},
			selectPrice(index) {
				that.price_active = index
			},
			selectType(index) {
				if(that.type_active.length == 0) {
					that.type_active.push(index)
				} else {
					for(var i=0;i<that.type_active.length;i++) {
						if(that.type_active[i] == index) {
							that.type_active.splice(i,1)
							return
						}
					}
					that.type_active.push(index)
				}
			},
			selectRegion(index) {
				that.region_active = index
			},
			selectTime(index) {
				that.time_active = index
			},
			reset() {
				that.mode_active = -1
				that.price_active = -1
				that.type_active = []
				that.region_active = -1
				that.time_active = -1
			},
			confirm() {
				
				that.screen_show = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background-color: #e8eff5;
		.navbar {
			
			.search {
				// background: #fff;
				width: 100%;
				height: 88rpx;
				box-sizing: border-box;
				padding: 12rpx 30rpx;
				.u-input {
					background-color: #fff;
					height: 64rpx;
					padding: 0 0 0 18rpx !important;
					border: 1rpx solid #506Dff;
					margin-bottom: 12rpx;
				}
				.u-input__content__subfix-icon {
					width: 128rpx;
					height: 64rpx;
					background-color: #506Dff;
					border-radius: 32rpx;
					color: #fff;
					font-size: 28rpx;
					text-align: center;
					line-height: 64rpx;
				}
			}
		}
		.box {
			margin-top: 24rpx;
			width: 100%;
			min-height: calc(100vh - 296rpx);
			background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
			border-radius: 40rpx 40rpx 0px 0px;
			box-sizing: border-box;
			padding: 30rpx;
			.tabs {
				width: 526rpx;
			}
			.tabs_item {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
				padding-right: 8rpx;
				.u-icon{
					padding-left: 8rpx;
				}
			}
			.tab_active {
				color: #506DFF;
			}
			.screen_icon {
				width: 24rpx;
				height: 24rpx;
			}
			.drop {
				position: absolute;
				left: 0;
				top: 345rpx;
				width: 750rpx;
				z-index: 9;
				min-height: calc(100vh - 345rpx);
				background: rgba(0,0,0,0.5);
				backdrop-filter: blur(5px);
				
				.drop_bg {
					width: 100%;
					background-color: #fff;
					.drop_list {
						box-sizing: border-box;
						padding: 0 30rpx;
						.drop_title {
							
							margin: 24rpx 0 20rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #3D4249;
							line-height: 40rpx;
						}
						.drop_right {
							font-size: 20rpx;
							font-weight: 400;
							color: #555555;
							line-height: 28rpx;
							padding-right: 8rpx;
						}
						.hide {
							width: 100%;
							height: 80rpx;
							overflow: hidden;
						}
						.drop_item {
							width: 208rpx;
							height: 76rpx;
							background: #F4F8FB;
							border-radius: 4rpx;
							font-size: 28rpx;
							text-align: center;
							font-weight: 400;
							color: #555555;
							line-height: 76rpx;
							margin: 0 34rpx 20rpx 0;
						}
						.drop_item:nth-child(3n+3) {
							margin: 0 0 20rpx;
						}
						.drop_active {
							background: #E8F2FF;
							font-weight: 500;
							color: #506DFF;
						}
					}
					
					.drop_bottom {
						margin-top: 32rpx;
						width: 100%;
						height: 100rpx;
						background: #FFFFFF;
						box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.05);
						.left {
							width: 50%;
							height: 100%;
							font-size: 36rpx;
							font-weight: 400;
							color: #BDBDBD;
							line-height: 100rpx;
							text-align: center;
						}
						.right {
							width: 50%;
							height: 100%;
							font-size: 36rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 100rpx;
							text-align: center;
							background: #506DFF;
						}
					}
				}
			}
			.list {
				margin-bottom: 60rpx;
				.list_item {
					margin: 20rpx auto 0;
					width: 690rpx;
					background: #FFFFFF;
					border-radius: 10px;
					box-sizing: border-box;
					padding: 20rpx;
					.cell {
						padding: 12rpx 0;
					}
					.top { 
						vertical-align:middle;
						.item_name {
							// width: calc(100% - 74rpx);
							font-size: 30rpx;
							font-weight: 400;
							color: #222222;
							// float: right;
							line-height: 42rpx;
						}
						.top_icon {
							width: 64rpx;
							height: 28rpx;
							float: left;
							margin: 7rpx 10rpx 0 0;
							background: url('/static/images/comment/green_bg.png') no-repeat;
							background-size: 100%;
							font-size: 16rpx;
							font-weight: normal;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: center;
						}
						.top_icon1 {
							width: 64rpx;
							height: 28rpx;
							float: left;
							margin: 7rpx 10rpx 0 0;
							background: url('/static/images/comment/blue_bg.png') no-repeat;
							background-size: 100%;
							font-size: 16rpx;
							font-weight: normal;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: center;
						}
					}
					
					.text_style1 {
						font-size: 22rpx;
						font-weight: 400;
						color: #585F6A;
						line-height: 32rpx;
						padding-left: 12rpx;
					}
					.item_icon {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
		
	}
</style>