master/pages/demand/demand.vue

<template>
	<view class="page">
		<view class="main">
			<view class="top">
				<image src="../../static/img/supply2.png" @click="toPostDemand()" mode="widthFix"></image>
			</view>
			<view class="titleall-box">
				<view class="search-head">
					<view class="search">
						<image src="../../static/fdj1.png"></image>
						<text></text>
						<input type="text" v-model="keyWord" placeholder="搜索关键词" @input="selectPro()" />
					</view>
					<!-- 显示公司选项 -->
					<view class="btn" @click="selectPro()">
						<text>搜索</text>
					</view>
				</view>
				<mo-hu-search :show="selectShow" :list="comList" @select="select" label-name="name"
					value-name="id"></mo-hu-search>
				<view class="title-screen">
					<scroll-view scroll-x="true" class="scrollview-box">
						<!-- 下方的红线 -->
						<!-- <view ref="line" class="line" ></view> -->
						<view :class="['title-screen-box',{'red_line':nowShow === 1}]" @click="allPro(1,'全部')">
							<view>全部</view>
						</view>
						<view :class="['title-screen-box',{'red_line':nowShow === 2}]" @click="metalPro(2,'金属')">
							<view>金属</view>
						</view>
						<view :class="['title-screen-box',{'red_line':nowShow === 3}]" @click="devicePro(3,'专用设备')">
							<view>专用设备</view>
						</view>
						<view :class="['title-screen-box',{'red_line':nowShow === 4}]" @click="tranPro(4,'交通运输')">
							<view>交通运输</view>
						</view>
						<view :class="['title-screen-box',{'red_line':nowShow === 5}]" @click="elecPro(5,'电气机械')">
							<view>电气机械</view>
						</view>
						<view :class="['title-screen-box',{'red_line':nowShow === 6}]" @click="commuPro(6,'电子及通讯')">
							<view>电子及通讯</view>
						</view>
					</scroll-view>
					<view class="title-screen-box" style="background-color: #fff;margin-right: 0;text-align: center;">
						<view class="title-screen-box-btn">
							<image src="../../static/supply.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="recommend-info">
				<view class="goods-list">
					<view class="list" @click="ArticleDetails(item)" v-for="(item,index) in demandList" :key="index">
						<view class="title-tag">
							<view class="tag">
								{{item.subTitle}}
							</view>
							<view class="tag-small">
								{{item.subTitle}}
							</view>
						</view>
						<view class="price-info">
							<view class="user-price">
								<view class="goods-city">
									<image src="../../static/image/default_logo.jpg"></image>{{item.comanyName}}
								</view>
								<view class="goods-city-img">
									<image src="../../static/right2.png"></image>
								</view>
							</view>
							<view class="vip-price">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moHuSearch from '../../components/qj-fuzzy-search/index.vue'
	export default {
		components: {
			moHuSearch
		},
		data() {
			return {
				demandList: [],
				nowShow: 1,
				comList:[],
				selectShow:false,
				keyWord:''
			}
		},
		mounted() {
			let that = this
			this.getDemandList()
			this.allPro()
		},
		// onLoad() {
		// 	let that = this
		// 	this.getDemandList()
		// 	this.allPro()
		// },
		methods: {
			selectPro(){
				let that = this
				this.selectShow = true
				that.API.getDemandList({
					keyword:this.keyWord,
					pageSize: 10000,
				}).then(res => {
					console.log(res)
					let arr = res.data.list
					this.comList = arr.map(it=>{
						return {
							...it,
							name:it.title
						}
					})
				})
			},
			select(item) {
				// this.selectName = item.name;
				// this.selectId = item.id
				// this.categoryId = item.categoryId
				// console.log("栏目ID",this.categoryId)
				
				this.ArticleDetails(item)
				this.selectShow = false;
			},
			// 点击全部
			allPro(index, name) {
				let that = this
				this.nowShow = index
				console.log(name)
			},
			// 点击金属
			metalPro(index, name) {
				let that = this
				that.nowShow = index
				console.log(name)
			},
			// 点击专用设备
			devicePro(index, name) {
				let that = this
				that.nowShow = index
				console.log(name)
			},
			// 点击交通运输
			tranPro(index, name) {
				let that = this
				that.nowShow = index
				console.log(name)
			},
			// 点击电气机械
			elecPro(index, name) {
				let that = this
				that.nowShow = index
				console.log(name)
			},
			// 点击电子及通讯
			commuPro(index, name) {
				let that = this
				that.nowShow = index
				console.log(name)
			},
			// 获取全部需求数据
			getDemandList() {
				let that = this
				that.API.getDemandList({
					pageSize: 10000,
				}).then(res => {
					console.log(res)
					that.demandList = res.data.list
				})
			},
			ArticleDetails(it) {
				uni.navigateTo({
					url: `/pages/ArticleDetails/ArticleDetails?data=${JSON.stringify(it)}`
				})
			},
			// 去需求发布页面
			toPostDemand() {
				uni.navigateTo({
					url: '/pages/postDemand/postDemand'
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	@import 'demand.scss';
</style>