yichael_zhongchuan_manager/components/manager/project.vue

<template>
	<view class="m_right">
		<view class="m_right_hander">
			<button size="mini" class="m_btn_red">添加项目</button>
		</view>
		<view class="m_right_container">
			<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
				<thead class="m-table-hander">
					<tr>

						<th>
							<icon type="" @click="checkAll" style="color:#EA252C;" class="font_family" :class="checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
						</th>
						<th>项目名称</th>
						<th>项目创建人</th>
						<th>项目创建时间</th>
						<th>项目描述</th>
						<th>项目推荐</th>
						<th>上线</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in tabledata" :key="index">
						<th>
							<icon type="" style="color:#EA252C;" class="font_family" :class="item.checke?'icon-fuxuankuang_weixuanzhong4':'icon-fuxuankuang-true'"></icon>
						</th>
						<th>{{item.ProjectName}}</th>
						<th>{{item.CreateUserName}}</th>
						<th>{{item.CreateTime}}</th>
						<th>{{ITEM.ProjectReviewImage}}</th>
						<th></th>
						<th style="position: relative;"><button type="default" size="mini" class="m_online">上线</button></th>
						<th style="position: relative;"><button type="default" size="mini" class="m_delete">删除</button></th>
					</tr>

				</tbody>
			</table>
		</view>
		<view class="m_right_footer">
			<view class="m_paging">
				<text class="m_paging_item m_paging_upper" v-show="pageIndex>1&&pageCount>0">上一页</text>
				<text class="m_paging_item" :key="i" v-for="i in pageCount" @click="paging(i)" :class="i==pageIndex?'p_act':''">
					{{i}}
				</text>
				<text class="m_paging_item m_paging_lower" v-show="pageIndex!=pageCount&&pageCount>0">下一页</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "project",
		data() {
			return {
				checke: false,
				queryList: {
					UserID: "",
					BeginNum: 0,
					EndNum: 15,
				},
				pageIndex: 1,
				pageSize: 16,
				pageCount: 12,
				tabledata: []
			}
		},
		created() {
			this.getList();
		},
		methods: {
			paging(obj) {
				this.pageIndex = obj;
				this.queryList.BeginNum = (this.pageIndex - 1) * this.pageSize;
				this.queryList.EndNum = this.pageIndex * this.pageSize - 1;
				this.getlist();
			},
			checkAll() {
				this.checke = !this.checke;
				this.tabledata.forEach(p => p.checke = this.checke);
			},
			getList() {
				this.queryList.UserID = this.$UserId;
				uni.request({
					url: this.$Api + "/backstage/getprojects",
					data: this.queryList,
					method: "POST",
					dataType: "json",
					success: res => {
						var {
							data
						} = res;
						if (data.code == 100) {
							if (data.AllNumOfList > 0) {
								this.tabledata = res.Projects
								this.tabledata.forEach(p => p.checke == false);
								var tempCount = parseInt(data.AllNumOfList / this.pageSize);
								if (tempCount * this.pageSize == data.AllNumOfList)
									this.pageCount = tempCount;
								else
									this.pageCount = tempCount + 1;

								this.checke = false;
							} else {
								this.tabledata = [];
							}
						} else {
							this.tabledata = [];
							this.pageCount = 0;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../assets/icon/iconfont.css';

	.m_right {
		width: 100%;
		margin-top: 5rpx;
		padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		.m_right_hander {
			text-align: right;
			height: 250rpx;
			position: relative;

			.m_btn_red {
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #EA252C;
				color: #fff;
			}
		}

	}

	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;
	}

	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}

	tbody tr:hover {
		// color: #fff;
		background: #FDEBEC;
		// opacity: 0.08;
	}

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}

	.m_online {
		background: #437FFA;
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		color: rgb(255, 255, 255);
	}

	.m_offline {
		background: #FD813B;
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		color: rgb(255, 255, 255);
	}

	.m_right_footer {
		margin-top: 80rpx;
	}

	.m_paging {
		text-align: right;

		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}

	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}

	.m_act1 {
		color: #FF0019;
	}
</style>