XLJK-web/xinlijiankang-uniapp-main/pages/lecturer/sckc.vue

<template>
	<view class="ayuu">
		<view class="hdtgyyqb">
			<view class="flztoa scuuerm">
				<view :class="['sczhbry',Inv==0?'sctyxer':'']" @click="Inv=0">
					<text>直播课程</text>
					<view class="scmmtui"></view>
				</view>
				<view :class="['sczhbry',Inv==1?'sctyxer':'']" @click="Inv=1">
					<text>录制课程</text>
					<view class="scmmtui"></view>
				</view>
			</view>
			<view class="scmbberr"></view>


			<view v-show="Inv == 0">
				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>课程名称</text></view>
						<view class="hdtcuutxta"><input type="text" value=""
								placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入姓名" /></view>
					</view>
				</view>
				<view class="scjhrw"></view>

				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>课程时间</text></view>
						<view class="hdtcuutxta"  @click="showa = true"><text>请选择课程时间</text></view>
					</view>
					<image  @click="showa = true" src="/static/user/hdr1.png" style="width: 48rpx;min-width: 48rpx;height: 48rpx;" mode="">
					</image>
				</view>
				<view class="scjhrw"></view>

				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>课程分类</text></view>
						<view class="hdtcuutxta"><text>请选择课程分类</text></view>
					</view>
					<image src="/static/user/hdr1.png" style="width: 48rpx;min-width: 48rpx;height: 48rpx;" mode="">
					</image>
				</view>
				<view class="scjhrw"></view>

				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>金额</text></view>
						<view class="hdtcuutxta"><input type="text" value=""
								placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入金额" /></view>
					</view>

				</view>
				<view class="scjhrw"></view>

				<view class="sczbfmty">
					<text>直播封面</text>
				</view>
				<view class="fzddrew cpsahngc">
					<u-upload :action="action" :file-list="fileList" :max-count="1" width="642" height="392"
						upload-text="上传直播封面">
					</u-upload>
				</view>

			</view>

			<view v-show="Inv == 1">
				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>课程名称</text></view>
						<view class="hdtcuutxta">
                            <input type="text" v-model.trim="title" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入课程名称" />
                        </view>
					</view>
				</view>
				<view class="scjhrw"></view>

				<view class="flztoa hdtcuur" @click="show = true">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>课程分类</text></view>
						<view class="hdtcuutxta"><text>{{classStr || '请选择课程分类'}}</text></view>
					</view>
					<image src="/static/user/hdr1.png" style="width: 48rpx;min-width: 48rpx;height: 48rpx;" mode=""></image>
				</view>
				<view class="scjhrw"></view>

				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>金额</text></view>
						<view class="hdtcuutxta"><input type="digit" v-model.trim="price" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入金额" /></view>
					</view>

				</view>
				<view class="scjhrw"></view>
				<view class="flztoa">
					<view class="fsxto">
						<view class="sczbfmty">
							<text>课程封面</text>
						</view>
						<view class="fzddrew cpsahngc">
							<!-- <u-upload :action="action" :file-list="fileList" :max-count="1" width="294rpx"
								height="198rpx" upload-text="上传课程封面" name="upfile" @on-success="upSuccess">
							</u-upload> -->
                            <view v-if="!img" class="choose-outer" @click="choodeImage">
                                <text class="up-label">+</text>
                                <text class="up-title">上传课程封面</text>
                            </view>
                            <image v-if="img"  @click="choodeImage" :src="img" mode="aspectFill" style="width: 294rpx; height: 198rpx; border-radius: 15rpx;"></image>   
						</view>
					</view>
					<view class="fsxto">
						<view class="sczbfmty">
							<text>上传视频</text>
						</view>
						<view class="fzddrew cpsahngc">
                                <!-- <u-upload :action="action"  @click.stop="" :file-list="fileList" :max-count="1" width="294rpx"
                                	height="198rpx" upload-text="上传课程视频">
                                </u-upload> -->
                                <view v-if="!one_video_url" class="choose-outer" @click="chooseVideo">
                                    <text class="up-label">+</text>
                                    <text class="up-title">上传视频课程</text>
                                </view> 
                                <video v-if="one_video_url"  :src="one_video_url" style="width: 294rpx; height: 198rpx; border-radius: 15rpx;"></video>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-show="Inv == 1">
			<view class="hdtgyyqb" v-for="(item,index) in chapter" :key="index">
				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>章节</text></view>
						<view class="hdtcuutxta"><input type="text" v-model.trim="item.catalog_title" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入章节名称" /></view>
					</view>
				</view>
				<view class="scjhrw"></view>

				<view class="flztoa hdtcuur">
					<view class="fzctob">
						<view class="hdtcuutxt"><text>课程名称</text></view>
						<view class="hdtcuutxta"><input type="text" v-model.trim="item.title"
								placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入课程名称" /></view>
					</view>
				</view>
				<view class="scjhrw"></view>
				<view class="fzctob">
					<view class="fsxto">
						<view class="sczbfmty">
							<text>上传视频</text>
						</view>
						<view class="fzddrew cpsahngc">
							<!-- <u-upload :action="action"  @click.stop="" :file-list="fileList" :max-count="1" width="294rpx"
								height="198rpx" upload-text="上传课程视频">
							</u-upload> -->
							<view v-if="!item.video_url" class="choose-outer" @click="choosezjVideo(index)">
							    <text class="up-label">+</text>
							    <text class="up-title">上传视频课程</text>
							</view> 
							<video v-if="item.video_url"  :src="item.video_url" style="width: 294rpx; height: 198rpx; border-radius: 15rpx;"></video>
						</view>
					</view>
                    

				</view>

			</view>
		</view>

		<view v-show="Inv == 1">
			<view class="hdtgyyqb" @click="addzj">
				<view class="fzddrew" style="padding: 30rpx 0;">
					<u-icon name="plus" size="36"></u-icon>
					<text style="margin-top: 20rpx;">添加章节</text>
				</view>
			</view>
		</view>


		<view class="fzddrew scjjhrt">
			<view class="fzddrew fkdibr" @click="subCourse">
				<text>上传课程</text>
			</view>
		</view>
        
        
        



		<u-popup v-model="show" mode="bottom" :closeable="false" :border-radius="20" :safe-area-inset-bottom="true">
			<view class="" style="padding: 50rpx;30rpx">
				<view class="flztoa" style="margin-bottom: 40rpx;">
					<text  @click="show = false;" style="color: #999999;">取消</text>
					<text style="font-size: 36rpx;font-weight: bold;">选择标签</text>
					<text  @click="ensureLabel">确定</text>
				</view>
				
				<!-- <view class="tanckku">
						<uni-data-checkbox :multiple="true" mode="tag" v-model="radioa" :localdata="sex"
							selectedColor="#374B6E !important" style="margin-top: 24rpx;"></uni-data-checkbox>
				</view> -->
				<scroll-view scroll-y style="height: 500rpx;">
					<view class="label-outer">
						<view :class="index == curlabel?'label-act':'class-label'" @click="changeLabel(index)" v-for="(item,index) in labellist" :key="index">{{item.title}}</view>
					</view>	
				</scroll-view>
				
			</view>
		</u-popup>
		
		<u-popup v-model="showa" mode="bottom" :closeable="false" :border-radius="20" :safe-area-inset-bottom="true">
			<view class="">
				<view class="flztoa" style="padding: 50rpx 30rpx;" >
					<text  @click="showa = false;" style="color: #999999;">取消</text>
					<text style="font-size: 36rpx;font-weight: bold;">选择时间</text>
					<text  @click="showa = false;">确定</text>
				</view>
				<view class="" style="background: #E4E4E4;width: 100%;height: 1rpx;"></view>
				<view class="flztoa yebbfrt">
					<view class="yeuddw" style="color: #FF0000;"><text>1月</text></view>
					<view class="yeuddw"><text>2月</text></view>
					<view class="yeuddw"><text>3月</text></view>
					<view class="yeuddw"><text>4月</text></view>
				</view>
				
				<view class="fzctob">
					<view class="fsxto rixdbyy">
						<view class="rixdrt"><text>18日</text></view>
						<view class="rixdrt"><text>19日</text></view>
						<view class="rixdrt" style="color: #FF0000;"><text>今天20日</text></view>
						<view class="rixdrt"><text>明天21日</text></view>
						<view class="rixdrt"><text>22日</text></view>
						<view class="rixdrt"><text>23日</text></view>
						<view class="rixdrt"><text>24日</text></view>
					</view>
					
					<view class="fsxto sjbbaq">
						<view class="flztoa rixdrt" style="color: #FF0000;">
							<text>18日</text>
							<image src="/static/lecturer/yyddw01.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
							</view>
						<view class="rixdrt"><text>19日</text></view>
						<view class="rixdrt"><text>今天20日</text></view>
						<view class="rixdrt"><text>明天21日</text></view>
						<view class="rixdrt"><text>22日</text></view>
						<view class="rixdrt"><text>23日</text></view>
						<view class="rixdrt"><text>24日</text></view>
					</view>
				</view>
				 
				
			</view>
		</u-popup>
	</view>
</template>
<style>
	page {
		background: #FAFAFA ;
	}
</style>
<script>
	export default {
		data() {
			return {
				Inv: 1,
				show: false,
				showa: false,
				timestamp: 86400,
				sex: [{
					text: '心里咨询',
					value: '1',
				}, {
					text: '心里咨询',
					value: '2',
				}, {
					text: '心里咨询',
					value: '3',
				}, {
					text: '心里咨询',
					value: '4',
				}],
				labellist:[],
                curlabel:'-1',  // 当前选中分类标签的index
				classStr:'',   // 分类str
				action:'https://xlzx.vvv5g.com/app/index.php?i=2&c=entry&a=wxapp&m=yzd_edu&do=UploadImg',   // 图片上传地址
                title:'' , // 录播视频标题
                price:'',  // 录播视频价格
                img:'',   // 录播课程图片
                one_video_url:'',   // 最上面的录播视频
                one_video_time:'',  // 最上面的录播视频时长
                one_video_title:'',     // 最上面视频的名称
                chapter:[
                    {
                        "catalog_title":"",
                        "title":"",
                        "video_url":"",
                        "video_title":"",
                        "video_time":""
                    }
                ]
			}
		},
		onLoad() {
            // console.log(this.formatSeconds(61.253))
			this.getClassType()
		},
		methods: {
            // 选择图片上传
            choodeImage(){
               uni.chooseImage({
                   count:1,
                   sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: (res)=> {
                        // this.img = res.tempFilePaths[0]
                        uni.showLoading({title:'上传中...'})
                        uni.uploadFile({
                        	url: 'https://xlzx.vvv5g.com/app/index.php?i=2&c=entry&a=wxapp&m=yzd_edu&do=UploadImg', //仅为示例，非真实的接口地址
                        	filePath: res.tempFilePaths[0],
                        	name: 'upfile',
                        	success: (uploadFileRes) => {
                                uni.hideLoading()
                        		console.log(uploadFileRes, '111111111111111')
                                this.img = uploadFileRes.data
                        	}
                        });
                    }
               })
            },
            // 选择章节视频
            choosezjVideo(index){
                uni.chooseVideo({
                	sourceType: ['camera', 'album'],
                	success: res=> {
                		console.log(res)
                        this.chapter[index].video_time = this.formatSeconds(res.duration)
                        // this.chapter[index].video_url = res.tempFilePath
                        // this.chapter[index].video_title = res.tempFilePath.substring(res.tempFilePath.lastIndexOf("/")+1)
                        // return
                        uni.showLoading({title:'上传中...'})
                		uni.uploadFile({
                			url: 'https://xlzx.vvv5g.com/app/index.php?i=2&c=entry&a=wxapp&m=yzd_edu&do=UploadFile', //仅为示例，非真实的接口地址
                			filePath: res.tempFilePath,
                			name: 'upfile',
                			success: (uploadFileRes) => {
                                uni.hideLoading()
                				console.log(uploadFileRes, '111111111111111')
                                this.chapter[index].video_url = uploadFileRes.data
                                this.chapter[index].video_title = uploadFileRes.data.substring(uploadFileRes.data.lastIndexOf("/")+1)
                                console.log(this.chapter)
                			}
                		});
                	}
                });
            },
			changeTab(Inv) {
				that.navIdx = Inv;

			},
            // 更改选择的分类标签
			changeLabel(index){
				this.curlabel = index
                this.classStr = this.labellist[this.curlabel].title
			},
            // 确定
			ensureLabel(){
				this.show = false
				// let choosedArr = this.labellist.filter(item=>item.toggle)
				// let classArr = []
				// choosedArr.map(item=>{
				// 	classArr.push(item.title)
				// })
			},
			upSuccess(e){
				console.log(e,'+++++++++')
			},
			// 获取课程分类
			getClassType(){
				this.$post({
					data:{
						do:'CourseType',
						data:{
							user_id:uni.getStorageSync('id'),
							type_id:0,
							pw:375
						}
					}
				}).then(res=>{
					console.log(res,'课程分类')
					this.labellist = res.data
					
				})
			},
			// 选择视频
			chooseVideo(){
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: res=> {
						console.log(res)
                        this.one_video_time = this.formatSeconds(res.duration)
                        uni.showLoading({title:'上传中...'})
						uni.uploadFile({
							url: 'https://xlzx.vvv5g.com/app/index.php?i=2&c=entry&a=wxapp&m=yzd_edu&do=UploadFile', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'upfile',
							success: (uploadFileRes) => {
                                uni.hideLoading()
								console.log(uploadFileRes, '111111111111111')
                                this.one_video_url = uploadFileRes.data
                                this.one_video_title = uploadFileRes.data.substring(uploadFileRes.data.lastIndexOf("/")+1)
							}
						});
					}
				});
			},
            // 添加章节
            addzj(){
                this.chapter.push({
                    "catalog_title":"",
                    "title":"",
                    "video_url":"",
                    "video_title":"",
                    "video_time":""
                })
            },
            // 提交课程
            subCourse(){
                if(this.Inv==1){
                    if(!this.title){
                        uni.showToast({
                            title:'请输入课题名称',
                            icon:'none'
                        })
                        return
                    }
                    if(this.curlabel<0){
                        uni.showToast({
                            title:'请选择课程分类',
                            icon:'none'
                        })
                        return
                    }
                    if(this.price!=0 && this.price==''){
                        uni.showToast({
                            title:'请输入课程价格',
                            icon:'none'
                        })
                        return
                    }
                    if(!this.img){
                        uni.showToast({
                            title:'请上传课程封面',
                            icon:'none'
                        })
                        return
                    }
                    if(!this.one_video_url){
                        uni.showToast({
                            title:'请上传课程视频',
                            icon:'none'
                        })
                        return
                    }
                    let flag = this.chapter.every(item=>item.catalog_title!=''&&item.title!=''&&item.video_url!='')
                    if(!flag){
                        uni.showToast({
                            title:'请完善章节信息',
                            icon:'none'
                        })
                        return
                    }
                    this.$post({
                        data:{
                            do:'CourseOption',
                            data:{
                                "group_state":0,
                                "group_img":"",
                                "lecturer_id":uni.getStorageSync('id'),
                                "update_state":1,
                                "state":1,
                                "type":1,
                                "course_id":"",
                                "term":1,
                                "term_day":"",
                                title:this.title,
                                img:this.img,
                                type_id:this.labellist[this.curlabel].id,
                                price:this.price,
                                user_id:uni.getStorageSync('id'),
                                one_video:{
                                    video_url:this.one_video_url,
                                    video_title:this.one_video_title,
                                    video_time:this.one_video_time
                                },
                                chapter:this.chapter
                            }
                        }
                    }).then(res=>{
                        console.log(res,'ssssssssssssssssssssss')
                        uni.showToast({
                            title:'添加成功',
                            mask:true
                        })
                        setTimeout(()=>{
                            uni.navigateBack()
                        },1500)
                    })
                }
                
            },
            
            
            // 秒数处理为时分秒
            formatSeconds(value) {
              //  秒
              let second = parseInt(value)
              //  分
              let minute = 0
              //  小时
              let hour = 0
              //  天
              //  let day = 0
              //  如果秒数大于60，将秒数转换成整数
              if (second >= 60) {
                //  获取分钟，除以60取整数，得到整数分钟
                minute = parseInt(second / 60)
                //  获取秒数，秒数取佘，得到整数秒数
                second = parseInt(second % 60)
                //  如果分钟大于60，将分钟转换成小时
                if (minute > 60) {
                  //  获取小时，获取分钟除以60，得到整数小时
                  hour = parseInt(minute / 60)
                  //  获取小时后取佘的分，获取分钟除以60取佘的分
                  minute = parseInt(minute % 60)
                  //  如果小时大于24，将小时转换成天
                  //  if (hour > 23) {
                  //    //  获取天数，获取小时除以24，得到整天数
                  //    day = parseInt(hour / 24)
                  //    //  获取天数后取余的小时，获取小时除以24取余的小时
                  //    hour = parseInt(hour % 24)
                  //  }
                }
              }
                let h = parseInt(hour)>9?parseInt(hour):'0'+parseInt(hour)
                let m = parseInt(minute)>9?parseInt(minute):'0'+parseInt(minute)
                let s = parseInt(second)>9?parseInt(second):'0'+parseInt(second)
                let result = '' + s;
                  if (minute > 0) {
                    result = '' + m + ':' + result
                  }
                  if (hour > 0) {
                    result = '' + h + ':' + result
                  }
                  //  if (day > 0) {
                  //    result = '' + parseInt(day) + '天' + result
                  //  }
              
              
              result = result.includes(':')?result:'00:'+result
              console.log('result：', result)
              return result
            }
		}


	}
</script>

<style lang="scss" scoped>
	.yebbfrt{
		padding: 34rpx 60rpx;
	}
	.yeuddw{
		font-size: 22rpx;
		font-family: PingFang SC-常规体, PingFang SC;
		font-weight: normal;
		color: #000000;
		line-height: 30rpx;
	}
	.rixdbyy {
		width: 218rpx;
		min-width: 218rpx;
		background: #F6F6F6;
		padding: 50rpx 30rpx;
	}
	.rixdrt{
		height: 30rpx;
		font-size: 22rpx;
		font-family: PingFang SC-常规体, PingFang SC;
		font-weight: normal;
		color: #000000;
		line-height: 30rpx;
		margin-bottom: 76rpx;
	}
	.sjbbaq{
		width: 100%;
		padding: 50rpx 32rpx;
	}
	
	.label-outer{
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	
	.label-outer>view{
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.label-outer>view:nth-of-type(3n+3){
		margin-right: 0rpx;
	}
	.class-label{
		width: 192rpx;
		height: 72rpx;
		background: #F4F4F4;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
		overflow: hidden;
	}
	.label-act{
		width: 192rpx;
		height: 72rpx;
		background: #374B6E;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #ffffff;
		overflow: hidden;
	}
    
    
    .choose-outer{
        width: 290rpx; 
        height: 198rpx; 
        border: 2px dotted #CCCCCC; 
        border-radius: 15rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .up-label{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50rpx;
        width: 60rpx;
        height: 60rpx;
        background: #E4E4E4;
        color: #FFFFFF;
        border-radius: 15rpx;
    }
    .up-title{  
        font-size: 28rpx;
        color: #999999;
        margin-top: 20rpx;
    }
</style>