wiki_enterprise_js/pages/tabBar/Enterprise.vue

<template>
	<view>
		<view v-if="user">
			<!-- 评分按钮及需求发布按钮 -->
			<view class="padding flex">
				<button class="cu-btn bg-red margin-tb-sm lg margin-right" @click="jumpScore">高企/科小评分</button>
				<button class="cu-btn bg-red margin-tb-sm lg" @click="jumpRelease">需求发布</button>
			</view>
			<!-- 往期发布需求标题栏 -->
		 <view class="select-box"> 
				<text class="select-content select-title">往期发布需求及结果</text>
				<view class="select-content" @click="changeData">
					<text class="select-content-left">{{publishingData}}</text>
					<icon class="iconfont icon-jiantou-xia triangle" type=""></icon>
				</view>
				<!-- 往期发布需求标题栏下的时间选择器 -->
				<view class="select-content" @click="changeTime">
					<text class="select-content-left">{{publishingTime}}</text>
					<icon class="iconfont icon-jiantou-xia triangle" type=""></icon>
				</view>
		 </view>
		 <!-- 往期发布需求标题栏的类型选择器 -->
		 <view class="publishing-box" :class="staA == 1 ? 'show' : ''">
			 <view v-for="(item,index) in statelist" :key="index" class="publishing-type" @click="changeDataValue(item,index)">{{item}}</view>
		 </view>
		 <!-- 往期发布需求标题栏的时间选择器 -->
		 <view class="publishing-box" :class="staB == 1 ? 'show' : ''">
		 			 <view v-for="(item,index) in timelist" :key="index" class="publishing-type" @click="changeTimeValue(item,index)">{{item}}</view>
		 </view>
			<!-- 往期发布需求及结果正体内容 -->
			<Demand :typeList="typeList" :num="num"></Demand>
		</view>
	<view v-else class="cu-modal" :class="'show'">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">提示</view>
			</view>
			<view class="padding-xl">
				您当前为游客状态，请先绑定企业基本信息
			</view>
			<view class="cu-bar bg-white justify-end">
				<view class="action">
					<button class="cu-btn line-green text-green" @click="jumpFirst">取消</button>
					<button class="cu-btn bg-green margin-left" @click="jumpEdit">确定</button>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '',
				path: '/pages/tabBar/Enterprise'
			}
		},
		data() {
			return {
				user: this.$store.state.user.bindMsg.bindStatus,
				staA:'0',
				staB:'0',
				num:1,
				typeList:[0,1],
				publishingData :"技术转移转化",
				publishingTime :"降序",
				statelist :['技术转移转化','工业设计咨询','科技金融建设','政策项目咨询','知识产权咨询','创新体系建设','创新创业咨询','信息技术服务','协同创新服务'],
				timelist :['升序','降序'],
			}
		},
		onReachBottom: function () {
			this.num ++
		},
		methods: {
			jumpFirst(){
				uni.switchTab({
					url:'/pages/tabBar/HomePage'
				})
			},
			jumpEdit(){
				uni.navigateTo({
					url:'/pages/Edit/Edit'
				})
			},
			jumpScore(){
				uni.navigateTo({
					url:'/pages/TestScore/TestScore'
				})
			},
			jumpRelease(){
				uni.navigateTo({
					url:'/pages/RequirementRelease/RequirementRelease'
				})
			},
			changeData () {
				if(this.staA != 1){
					this.staA = 1
				}else{
					this.staA = 0
				}
			},
			changeTime () {
				if(this.staB != 1){
					this.staB = 1
				}else{
					this.staB = 0
				}
			},
			changeDataValue(item,index){
				this.publishingData = item
				this.typeList[0] = index
				this.staA = 0
				this.num = 1
			},
			changeTimeValue(item,index){
				this.publishingTime = item
				this.typeList[1] = index
				console.log(this.typeList)
				this.staB = 0
				this.num = 1
			}
		},
		watch:{
			'$store.state.user.bindMsg'(val){
				const that = this
				that.user = val
				console.log(that.user)
			}
		}
	}
</script>

<style lang="scss" scoped>
.cu-btn{
	flex: 1;
	height: 50px;
}
.padding{
	padding: 5px 15px;
}
.select-box{
	height: 40px;
	background-color: $white;
	display: flex;
	justify-content: left;
	align-items: center;
	font-size: 12px;
}
.select-content{
	display: flex;
	flex: 3;
	margin-right: 15px;
}
.select-title{
	margin-left: 15px;
	flex: 4;
}
.triangle{
	margin-left: 6upx;
	display: inline-flex;
	align-items: center;
	font-size: 24upx;
	color: $gray;
}
.publishing-box{
	position: absolute;
	background-color: $white;
	display: none;
	z-index: 1000;
	.publishing-type{
		width: 750upx;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		border-top:1px solid #f5f6f9;
	}
}
.show{
	display: block !important;
}
.select-content-left{
	flex: 1;
}
</style>