project_process_h5/pages/project/index.vue

<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="sousuo">
			<view class="iconfont icon-sousuo" style="margin: 0 30rpx 0 30rpx;"></view>
			<input class="sou-text" placeholder="请输入查询内容" v-model="keyword" @blur="changeKey"></input>
		</view>
		<!-- 筛选 -->
		<view class="select2">
			<view class="wei-title1 title1" v-if="select==3">
				<view>我创建的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title1" style="rgba(0, 0, 0, 1)" v-else @click="selectChange(3)">
				我创建的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<!-- <view class="wei-title1 title1" v-if="select==1">
				<view>我收藏的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title1" style="rgba(0, 0, 0, 1)" v-else @click="selectChange(1)">
				我收藏的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view> -->
			<view class="wei-title1 title2" v-if="select==3">
				<view>我分管的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title2" style="rgba(0, 0, 0, 1)" v-else @click="selectChange(3)">
				我分管的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title3" v-if="select==3">
				<view>我负责的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title3" style="rgba(0, 0, 0, 1)" v-else @click="selectChange(3)">
				我负责的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
			<view class="wei-title1 title4" v-if="select==4">
				<view>我协办的</view>
				<view class="wei-line1"></view>
			</view>
			<view class="title4" style="rgba(0, 0, 0, 1)" v-else @click="selectChange(4)">
				我协办的
				<view class="wei-line1" style="background: rgba(255, 255, 255, 1);"></view>
			</view>
		</view>
		<view class="search" style="margin: 20rpx 0 0 11px;width: 100%;background-color: rgba(255, 255, 255, 1);">
			<uni-data-select style="border: 1px solid; width: 100px;border-radius: 85px;"
				v-model="typeid"
				:localdata="zhuangtai"
				@change="changeType"
			  ></uni-data-select>
		</view>
		<!-- 数据列表 -->
		<view class="kuang">
			<view class="all-select">
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==3">超时在办</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(3)">超时在办</view>
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==2">预警在办</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(2)">预警在办</view>
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==1">正常在办</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(1)">正常在办</view>
				<view class="all-list" style="margin-left: 15rpx;" v-if="change==4">正常办结</view>
				<view class="all-list2" style="margin-left: 15rpx;" v-else @click="changeTime(4)">正常办结</view>
			</view>
			<!-- 数据列表循环 -->
			<view class="list" v-for="(item,index) in list" :key="index" @click="XiangPro(item)">
				<view class="list-proname">
					{{item.projectName}}
					<view class="list-kua">{{item.projectFrom}}</view>
					<view class="bu-shou yishou" v-if="item.collect==1" @click.stop="Qushoucang(item)">已收藏</view>
					<view class="bu-shou shou" v-else @click.stop="shoucang(item)">收藏</view>
					<view class="bu-shou norl" v-if="item.projectLevel=='正常'">正常</view>
					<view class="bu-shou jinji" v-else>紧急</view>
					<view class="bu-shou more">
						<view @click.stop="dianMore(item)">更多</view>
						<view class="xiala" v-if="item.isChecked">
							<view>复制</view>
							<view @click.stop="changePro(item)">编辑</view>
							<view @click.stop="deletePro(item)">删除</view>
							<view @click.stop="score(item)">评分</view>
						</view>
					</view>
				</view>
				<view class="list-dan">主办单位：{{item.organize}}</view>
				<view class="list-dan">主办人：{{item.leaderName}}</view>
				<view class="list-dan">项目周期：{{item.startTime}}-{{item.endTime}}</view>
				<view class="list-dan">任务：{{item.taskNum}}个</view>
				<view class="list-dan">预警次数：{{item.warnNum}}次</view>
				<view class="list-dan">提醒次数：{{item.remindNum}}次</view>
				<view class="list-dan" style="width: 620rpx;display: flex;">
					项目进度：
					<progress v-if="item.score!='/'" style="width: 380rpx;" :percent="item.progress" activeColor="rgba(0, 97, 255, 1)" border-radius="50" stroke-width="9" show-info font-size='12' active='true' />
					<image src="../../static/project/warn.png" style="width: 43rpx;height: 43rpx;margin-top: 10rpx;" @click.stop="cuiban(item)" v-if="item.state==1||item.state==2||item.state==3"></image>
				</view>
			</view>
			<view style="width: 100%;height: 100rpx;"></view>
		</view>
		
		<!-- 添加项目 -->
		<view class="serviceBtn" @click.stop="addProject"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',//搜索框内容
				select:3,
				change:1,
				list:[],
				page:1,
				size:10,
				totalCount:0,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getProject()
		},
		methods: {
			//最上层切换
			selectChange(a){
				this.select=a
				this.getProject()
			},
			//修改时间框
			changeTime(a){
				this.change=a
				this.getProject()
			},
			// 新建项目
			addProject(){
				uni.navigateTo({
					url:'/pages/project/addProject'
				})
			},
			//点击查看更多
			dianMore(item){
				item.isChecked=!item.isChecked
			},
			//编辑项目
			changePro(item){
				//传参对象，使用encodeURIComponent编码
				let str = JSON.stringify(item)
				//注意这里——————————————————————
				str = str.replace(/%/g, '%25')
				//这里———————————————————————————
				let query = encodeURIComponent(str)
				uni.navigateTo({
					url:'/pages/project/projectChange?data='+query
				})
			},
			//查看项目详情
			XiangPro(item){
				//传参对象，使用encodeURIComponent编码
				let str = JSON.stringify(item)
				//注意这里——————————————————————
				str = str.replace(/%/g, '%25')
				//这里———————————————————————————
				let query = encodeURIComponent(str)
				uni.navigateTo({
					url:'/pages/project/projectX?data='+query
				})
			},
			//收藏项目
			shoucang(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定收藏项目吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								title: '加载中',
								mask: true, // 是否显示透明蒙层，防止触摸穿透
							});
							let data={
								projectId:item.id,
								state:1//1收藏，0取消收藏
							}
							that.$Request.postT('/api/sysProject/collect',data).then(res => {
								if (res.code==200) {
									uni.showToast({
										title: '收藏成功',
										icon: 'none',
										duration:800
									});
									uni.hideLoading()
													
									setTimeout(function() {
										that.getProject()
									}, 1000)
								} else {
									uni.hideLoading();
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration:800
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//取消收藏项目
			Qushoucang(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消收藏吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								title: '加载中',
								mask: true, // 是否显示透明蒙层，防止触摸穿透
							});
							let data={
								projectId:item.id,
								state:0//1收藏，0取消收藏
							}
							that.$Request.postT('/api/sysProject/collect',data).then(res => {
								if (res.code==200) {
									uni.showToast({
										title: '取消收藏成功',
										icon: 'none',
										duration:800
									});
									uni.hideLoading()
													
									setTimeout(function() {
										that.getProject()
									}, 1000)
								} else {
									uni.hideLoading();
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration:800
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//评分
			score(item){
				uni.navigateTo({
					url:'/pages/project/sorce?proId='+item.id
				})
			},
			// 催办
			cuiban(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定催办项目吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								title: '加载中',
								mask: true, // 是否显示透明蒙层，防止触摸穿透
							});
							let data={
								projectIds:item.id,
							}
							that.$Request.postT('/api/sysProject/urge',data).then(res => {
								if (res.code==200) {
									uni.showToast({
										title: '催办成功',
										icon: 'none',
										duration:800
									});
									uni.hideLoading()
													
									setTimeout(function() {
										that.getProject()
									}, 1000)
								} else {
									uni.hideLoading();
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration:800
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//删除项目
			deletePro(item){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除项目吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.showLoading({
								title: '加载中',
								mask: true, // 是否显示透明蒙层，防止触摸穿透
							});
							let data={
								id:item.id,
							}
							that.$Request.postT('/api/sysProject/del',data).then(res => {
								if (res.code==200) {
									uni.showToast({
										title: '删除成功',
										icon: 'none',
										duration:800
									});
									uni.hideLoading()
													
									setTimeout(function() {
										that.getProject()
									}, 1000)
								} else {
									uni.hideLoading();
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration:800
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//查询项目名
			changeKey(e){
				this.keyword=e.detail.value
				this.getProject()
			},
			//查询项目列表
			getProject(){
				let that = this
				that.list=[]
				uni.showLoading({
					title: '加载中',
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				var data={
					"type": that.select,    // 1我关注的我收藏的、3我负责的、4我协办的、null
					"project": {
						"projectName": that.keyword,   // 项目名称
						"projectFrom": null,    // 项目来源
						"projectLevel":null,    // 项目等级
						"state": that.change,   // 1、正常在办，2、预警在办，3、超时在办，4、正常办结，5、超时办结
						"organize": null,   // 主办单位-单选
						"coOrganize": null,   // 协办单位-多选
						"sposonerName": null,    // 主办人
						"coSposonerName": null,    // 协办人
					},
					"t1": null,    // 创建开始时间
					"t2": null,    // 创建结束时间
					"t3": null,      // 周期开始时间
					"t4": null,      // 周期结束时间
					"t5": null,    // 完成开始时间
					"t6": null     // 完成结束时间
				}
				that.$Request.postJson('/api/sysProject/queryPage?page='+that.page+'&rows='+that.size,data).then(res => {
					if (res.code==200) {
						console.log(res,data,'项目')
						that.totalCount = res.data.project.total
						if (that.page == 1) {
							that.list = res.data.project.rows
						} else {
							that.list = that.list.concat(res.data.project.rows)
						}
						
						for (let i = 0; i < that.list.length; i++) {
						that.$set(that.list[i], "isChecked", false);
						}
						console.log(that.list,'数据')
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration:800
						});
					}
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
			},
			// 上拉加载
			onReachBottom: function() {
				if(this.list.length < this.totalCount){
					this.page = this.page + 1;
					this.getProject()
				} else {
					uni.showToast({
						title: '已经最后一页啦',
						icon: 'none'
					})
				}
			},
			onPullDownRefresh: function() {
				this.page = 1;
				this.getProject()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.serviceBtn{
			position: fixed;
			right: 50rpx;
			bottom: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 97rpx;
			height: 97rpx;
			background-image: url('../../static/project/add.png');
			background-size: 100%;
		}
	}
	/* 搜索框 */
	.sousuo{
		display: flex;
		align-items: center;
		margin: 20rpx 0 0 20rpx;
		width: 710rpx;
		height: 90rpx;
		border-radius: 98rpx;
		background: rgba(255, 255, 255, 1);
	}
	.sou-text{
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(166, 166, 166, 1);
		width: 100%;
	}
	.sou-text>>>.uni-input-input {
	    position: relative;
	    display: block;
	    height: 100%;
	    background: none;
	    color: inherit;
	    opacity: 1;
	    font: inherit;
	    line-height: inherit;
	    letter-spacing: inherit;
	    text-align: inherit;
	    text-indent: inherit;
	    text-transform: inherit;
	    text-shadow: inherit;
	    width: 185px;
	    height: 35px;
	    border-radius: 85px;
	    /* background: rgba(242, 242, 242, 1); */
	}
	/* 筛选 */
	.select2{
		margin: 20rpx 0 0 0;
		width: 100%;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
	}
	.wei-title1{
		color: rgba(0, 97, 255, 1);
	}
	.title1{
		margin: 41rpx 0 0 55rpx;
		font-size: 28rpx;
	}
	.title2{
		margin: -41px 0 0 228rpx;
		font-size: 28rpx;
	}
	.title3{
		margin: -41px 0 0 408rpx;
		font-size: 28rpx;
	}
	.title4{
		margin: -41px 0 0 588rpx;
		font-size: 28rpx;
	}
	.wei-line1{
		margin: 31rpx 0 0 15rpx;
		width: 79rpx;
		height: 8rpx;
		border-radius: 75rpx;
		background: rgba(0, 97, 255, 1);
	}
	/* 数据列表 */
	.kuang{
		margin: 20rpx 0 0 0;
		width: 100%;
		background: rgba(255, 255, 255, 1);
		min-height: 100vh; /* 设置最小高度为视口高度 */
	}
	.all-select{
		display: flex;
		margin: 31rpx 0 0  19rpx;
		width: 712rpx;
		height: 90rpx;
		border-radius: 7rpx;
		background: rgba(242, 247, 255, 1);
		align-items: center;
	}
	.all-list{
		width: 159rpx;
		height: 71rpx;
		border-radius: 7rpx;
		background: rgba(0, 97, 255, 0.1);
		border: 1rpx solid rgba(0, 97, 255, 1);
		font-size: 28rpx;
		line-height: 71rpx;
		color: rgba(0, 97, 255, 1);
		text-align: center;
	}
	.all-list2{
		width: 159rpx;
		height: 71rpx;
		border-radius: 7rpx;
		font-size: 28rpx;
		line-height: 71rpx;
		color: rgba(56, 56, 56, 1);
		text-align: center;
	}
	/* 数据列表循环 */
	.list{
		display: flex;
		flex-direction: column;
		margin: 20rpx 0 0 20rpx;
		width: 709rpx;
		height: 422rpx;
		border-radius: 7rpx;
		background: rgba(245, 248, 255, 1);
		box-shadow: 0px 4rpx 6rpx  rgba(0, 0, 0, 0.05);
		font-size: 24rpx;
		line-height: 35rpx;
	}
	.list-proname{
		margin: 13rpx 0 0 29rpx;
		font-size: 29rpx;
		font-weight: 500;
		display: flex;
	}
	.list-kua{
		margin-left: 5px;
		width: 60px;
		height: 29rpx;
		border-radius: 4rpx;
		border: 2rpx solid rgba(33, 107, 255, 1);
		font-size: 22rpx;
		line-height: 29rpx;
		color: rgba(33, 107, 255, 1);
		text-align: center;
	}
	.bu-shou{
		width: 73px;
		height: 44rpx;
		border-radius: 7rpx;
		font-size: 24rpx;
		line-height: 44rpx;
		text-align: center;
		color: rgba(255, 255, 255, 1);
	}
	.yishou{
		margin: 10rpx 0 0 222rpx;
		background: rgba(9, 101, 98, 1);
	}
	.shou{
		margin: 10rpx 0 0 222rpx;
		background: rgba(0, 97, 255, 1);
	}
	.jinji{
		margin: 10rpx 0 0 15rpx;
		background: rgba(254, 144, 51, 1);
	}
	.norl{
		margin: 10rpx 0 0 15rpx;
		background: rgba(166, 166, 166, 1);
		color: rgba(255, 255, 255, 1);
	}
	.more{
		margin: 10rpx 0 0 15rpx;
		background: rgba(0, 97, 255, 1);
	}
	.xiala{
		z-index: 4;
		position: relative;
		width: 87rpx;
		height: 174rpx;
		border-radius: 2rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 4rpx  rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 1);
	}
	.list-dan{
		margin: 9rpx 0 0 29rpx;
	}
	>>>.uni-progress-bar {
	    border-radius: 9rpx;  
	}  
	>>>.uni-progress-inner-bar {  
	    border-radius: 9rpx;  
	}
	>>>.uni-progress-info {
		margin-top: 0;
		margin-bottom: 0;
		min-width: 2em;
		margin-left: 15px;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 1);
	}
	>>>uni-progress {
	    // width: 42%;
		// margin: 25rpx 0 0 144rpx;
	}
</style>