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="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>
	export default {
		data() {
			return {
				demandList: [],
				nowShow: 1
			}
		},
		onLoad() {
			let that = this
			this.getDemandList()
			this.allPro()
		},
		methods: {
			// 点击全部
			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: 50,
				}).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>