family-education/education_uni/subpkg/teacher/course/teacher_course_my_publish.vue

<template>
	<view class="courseWrapper">
		<view v-for="(item, index) in requirement" :key="index">
			<view class="requires" @click="requireDetail(item.courseId)">
				<uni-row class="demo-uni-row">
					<uni-col offset="1">
						<view class="requires-col1">课程号：{{item.courseId}}</view>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row">
					<uni-col offset="1" :span="16">
						<view class="requires-col2">科目：{{item.subject}}</view>
					</uni-col>
					<uni-col :span="7">
						<view>
							<button @click.stop="open(item)" size="mini" :type="item.buttonType">{{item.display}}</button>
						</view>
					</uni-col>
				</uni-row>
				<view class="requires-col3">
					<uni-row class="demo-uni-row">
						<uni-col :span="4" offset="12">
							<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>
		</view>
		
		<uni-popup ref="popup" type="message">
			<uni-popup-message :type="popupType" :message="showMessage" :duration="1000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				requirement: [],
				showMessage: '上架成功',
				popupType: 'success',
				publishCount: 0
			}
		},
		onShow() {
			this.getPublishCounts()
		},
		methods: {
			// 查询个人上架了多少课程
			async getPublishCounts() {
				const { data: result } = await uni.$http.get('/education/teacher-courses/showPersonCourse')
				this.publishCount = result.data.publishCounts
				let courses = []
				courses = result.data.list
				
				for (let i = 0; i < courses.length; i++) {
					if (courses[i].display === '上架') {
						courses[i].display = '下架'
						courses[i].buttonType = 'warn'
					} else {
						courses[i].display = '上架'
						courses[i].buttonType = 'primary'
					}
				}
				this.requirement = courses
			},
			async open(item) {
				if (item.display === '上架') {
					if (item.verifyStatus !== '已通过') return uni.$showMsg('审核通过才能上架')
					if (item.deal === '已成交') return uni.$showMsg('已成交的课程不能上架')
					if (item.locked === '已锁') return uni.$showMsg('正在锁定的需求不能上架')
					if (this.publishCount >= 4) return uni.$showMsg('最多上架4个课程')
				}
				const queryObj = {
					display: item.display,
					courseId: item.courseId
				}
				const { data: result } = await uni.$http.get('/education/teacher-courses/updatePersonDisplay', queryObj)
				if (result.code === 20000) {
					if (item.display === '上架') {
						item.display = '下架'
						this.showMessage = '上架成功'
						this.popupType = 'success'
						item.buttonType = 'warn'
						this.publishCount += 1
						
					} else if (item.display === '下架') {
						item.display = '上架'
						this.showMessage = '下架成功'
						this.popupType = 'error'
						item.buttonType = 'primary'
						this.publishCount -= 1
					}
					this.$refs.popup.open('top')
				}
			},
			requireDetail(id) {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_my_detail?courseId=' + encodeURIComponent(id)
				})
			},
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		padding: 20rpx;
		// background-color: #FFF;
	}
</style>

<style scoped lang="scss">
	.courseWrapper{
		width: 96%;
		height: 100%;
	}
	.requires {
		background-color: #FFF;
		border: 1px solid #41719C;
		border-radius: 30rpx;
		margin: 10rpx 0 20rpx;
		position: relative;
				
		.requires-col1 {
			margin-top: 15rpx;
		}
		
		.requires-col2 {
			margin: 15rpx 0;
		}
		
		.requires-col3 {
			padding-bottom: 15rpx;
		}
		
		button{
			position: absolute;
			right: 40rpx;
		}
	}

</style>