family/education_uni/subpkg/student_require/student_require.vue

<template>
	<view>
		<uni-swipe-action>
			<view v-for="(item, index) in requirement" :key="item.requireId">
				<uni-swipe-action-item :threshold="0" :right-options="item.options" @click="bindClick(item)">
					<view class="requires" @click="requireDetail(item)">
						<uni-row class="demo-uni-row">
							<uni-col offset="1">
								<view class="requires-col1">需求号：{{item.requireId}}</view>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row">
							<uni-col offset="1">
								<view class="requires-col2">需求科目：{{item.subjectSmall}}</view>
							</uni-col>
						</uni-row>
						<view class="requires-col3">
							<uni-row class="demo-uni-row">
								<uni-col :span="11" offset="1">
									<view>需求金额：{{item.salary}}</view>
								</uni-col>
								<uni-col :span="4" >
									<view style="color: red;">{{item.verifyStatus}}</view>
								</uni-col>
								<uni-col :span="4" >
									<view style="color: red;">{{item.deal}}</view>
								</uni-col>
								<uni-col :span="4" >
									<view style="color: red;">{{item.locked}}</view>
								</uni-col>
							</uni-row>
						</view>
					</view>
				</uni-swipe-action-item>
			</view>
		</uni-swipe-action>
		
		<uni-fab  :pattern="pattern" horizontal="left" vertical="bottom"
					:direction="direction"  @fabClick="fabClick" />
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				// 分页对象
				queryObj: {
					pageNum: 1,
					pageSize: 8
				},
				isloading: false,
				requirement: [],	// 需求列表
				count: 0,	// 总数量
				publishCount: 0,	// 上架数量
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#000000',
					selectedColor: '#E2F0D9',
					buttonColor: '#E2F0D9',
					iconColor: '#000000'
				}
			};
		},
		created() {
			this.getPublishCounts()
		},
		methods: {
			...mapMutations('m_user', ['updateRequireDetail']),
			fabClick() {
				uni.navigateTo({
					url: '/subpkg/add_stu_require/add_stu_require'
				})
			},
			// 查询个人上架了多少课程
			async getPublishCounts(cb) {
				// 打开节流阀
				this.isloading = true
				
				const { data: result } = await uni.$http.get('/education/student-requirements/getPublishCounts', this.queryObj)
				
				this.isloading = false
				cb && cb()
				
				// console.log(result.data.list)
				this.publishCount = result.data.publishCounts
				this.count = result.data.count
				let courses = []
				courses = result.data.list
				
				for (let i = 0; i < courses.length; i++) {
					if (courses[i].display === '上架') {
						courses[i].display = '下架'
						courses[i].options = [{text: '下架', style: {backgroundColor: '#E2F0D9', color: 'black'}}]
					} else {
						courses[i].display = '上架'
						courses[i].options = [{text: '上架', style: {backgroundColor: '#E2F0D9', color: 'black'}}]
					}
				}
				
				this.requirement = [...this.requirement ,...courses]
				console.log(this.requirement)
			},
			// 下拉刷新的事件
			onPullDownRefresh() {
				if (this.isloading) return
				// 1.重置数据
				this.queryObj.pageNum = 1
				this.publishCount = 0
				this.requirement = []
				this.isloading = false
				
				// 2.重新发请求
				this.getPublishCounts(() => uni.stopPullDownRefresh())
			},
			// 触底的事件
			onReachBottom() {
				// 判断是否有下一页的数据
				if (this.queryObj.pageNum * this.queryObj.pageSize >= this.count)
				return uni.$showMsg('数据加载完毕！')
				
				// 是否有其他正在请求数据
				if (this.isloading) return
				
				// 页码自增
				this.queryObj.pageNum += 1
				this.getPublishCounts()
			},
			async bindClick(item) {
				console.log(item)
				
				if (item.display === '上架') {
					if (this.publishCount >= 4) return uni.$showMsg('最多发布4个需求')
					if (item.verifyStatus !== '已通过') return uni.$showMsg('审核通过才能上架')
					if (item.deal === '已成交') return uni.$showMsg('已成交的需求不能上架')
				}
				
				const queryObj = {
					display: item.display,
					requireId: item.requireId
				}
				const { data: result } = await uni.$http.get('/education/student-requirements/updatePersonDisplay', queryObj)
				const that = this
				if (result.code === 20000) {
					uni.$showMsg(item.display + '成功')
					
					
					this.queryObj.pageNum = 1
					this.publishCount = 0
					this.requirement = []
					
					const { data: result } = await uni.$http.get('/education/student-requirements/getPublishCounts', this.queryObj)
					this.publishCount = result.data.publishCounts
					this.count = result.data.count
					this.requirement = result.data.list
					for (let i = 0; i < this.requirement.length; i++) {
						if (this.requirement[i].display === '上架') {
							this.requirement[i].display = '下架'
							this.requirement[i].options = [{text: '下架', style: {backgroundColor: '#E2F0D9', color: 'black'}}]
						} else {
							this.requirement[i].display = '上架'
							this.requirement[i].options = [{text: '上架', style: {backgroundColor: '#E2F0D9', color: 'black'}}]
						}
					}
				}
			},
			requireDetail(item) {
				let stu_require = JSON.stringify(item)
				this.updateRequireDetail(stu_require)
				uni.navigateTo({
					url: '/subpkg/stu_require_detail/stu_require_detail'
				})
			}
		}
	}
</script>

<style lang="scss">
.requires {
	background-color: #FFF2CC;
	border: 1px solid #41719C;
	
	.requires-col1 {
		margin-top: 15rpx;
	}
	
	.requires-col2 {
		margin: 15rpx 0;
	}
	
	.requires-col3 {
		padding-bottom: 15rpx;
	}
}
</style>