<template> <view class="index-box"> <view class="swiper-box"> <image :src="detail.imageArr[0]" mode="aspectFill"></image> </view> <view class="course-detail-box"> <view class="course-name-box acea-row row-middle"> <view class="state-box colY" v-if="detail.courseState == 0">未开始</view> <view class="state-box colG" v-if="detail.courseState == 1">进行中</view> <view class="state-box colR" v-if="detail.courseState == 2">已结束</view> <view class="state-box default" v-if="detail.courseState == 3">已取消</view> <view class="name">{{detail.courseName}}</view> </view> <view class="desc">{{detail.courseIntroduce}}</view> </view> <view class="course-active-box"> <view class="title-box acea-row row-middle">活动时间及地点</view> <view class="address-box acea-row row-middle"> <!-- <text class="iconfont icon-dizhi"></text> --> <image src="../../static/dizhi.png" mode=""></image> <text>{{detail.coursePlace}}</text> </view> <view class="address-box acea-row row-middle"> <!-- <text class="iconfont icon-shijian"></text> --> <image src="../../static/time.png" mode=""></image> <text>{{detail.courseStartTime}} 至 {{detail.courseEndTime}}</text> </view> </view> <view class="btn-box" :class="isFixedTop?'fixed':''"> <!-- <view class="btn-item"> <image src="../../static/message.png"></image> <text>一键通知</text> </view> --> <view class="btn-item" @click="submitPlace()" v-if="detail.seatArrange == 1"> <image src="../../static/success.png"></image> <text>保存座位</text> </view> <view class="btn-item" @click="toAddMemeber()"> <image src="../../static/addMenber.png"></image> <text>添加学员</text> </view> </view> <view class="member-list-box"> <view class="title-box acea-row row-between"> <view>学员列表({{detail.courseMemberList.length || 0}})</view> <view class="title-box-r"> <view @click="showSort = !this.showSort" class="acea-row row-middle"> <image src="../../static/sort-icon.png" mode="" style="width: 48rpx;height:48rpx;margin-right: 10rpx;"></image> <text>排序</text> </view> <view class="sort-box" v-if="showSort"> <view class="sort-item" :class="sortNum == 1 ? 'bgR' : ''" @click.stop="sortClick(1)">未安排/已安排</view> <view class="sort-item" :class="sortNum == 2 ? 'bgR' : ''" @click.stop="sortClick(2)">签到情况</view> </view> </view> </view> <view class="member-list"> <view class="member-item" v-for="(item,index) in detail.courseMemberList" :key="index"> <view class="item-top acea-row row-between row-middle"> <view class="member-info acea-row row-middle"> <view class="img-box"><image :src="item.avatar" mode=""></image></view> <view class="name-box"> <view class="name">{{item.memberName}}</view> <view class="state" v-if="item.signState == 0">未签到</view> <view class="state colG" v-if="item.signState == 1">已签到</view> </view> </view> <view class="call" @click="call(item.memberPhone)">拨号</view> </view> <view class="item-btm acea-row row-middle"> <view class="dot"></view> <view class="mrl">座位安排</view> <input type="text" placeholder="请输入座位信息" :disabled="detail.seatArrange == 2" v-model="item.seat"> <!-- <view class="submit-btn">修改</view> --> </view> </view> </view> </view> </view> </template> <script> import { getCourseDetail , setMemberSeat } from '@/api/serverTeacher' import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export default{ computed: mapGetters(['userInfo']), data(){ return { id:'', tabInitTop:'', detail:{ courseStartTime:[], courseEndTime:[], }, isFixedTop:false, showSort:false, sortNum:null } }, onLoad() { //获取节点距离顶部的距离 uni.createSelectorQuery().select('.btn-box').boundingClientRect((res) => { if (res && res.top > 0) { var tabInitTop= res.top; this.tabInitTop= tabInitTop } }).exec(); this.id = this.$yroute.query.id; this.getDetail(); }, onShow(){ this.getDetail(); }, methods:{ sortClick(type){ this.sortNum = type console.log(type) }, onShareAppMessage: function(res) { return { title: this.detail.courseName, imageUrl:this.detail.imageArr[0], path: '/pages/course/detail?teacherId=' + this.userInfo.uid + '&courseId=' + this.id + '&validCode=' + this.detail.validCode, } }, onPageScroll(res) { let scrollTop = res.scrollTop; var isSatisfy = scrollTop >= this.tabInitTop? true : false; //只有处于吸顶的临界值才会不相等 if (this.isFixedTop === isSatisfy) { return false; } this.isFixedTop = isSatisfy }, getDetail(){ getCourseDetail(this.id).then(res=>{ if(res.success){ this.detail = res.data } }) }, toAddMemeber(){ if(this.detail.courseState == 2 || this.detail.courseState == 3){ uni.showToast({ title:'课程已结束!', icon:'none' }) return } this.$yrouter.push({ path: '/pages/serviceTeacher/addMember', query:{ id: this.id } }) }, submitPlace(){ let courseMemberList = this.detail.courseMemberList; if(this.detail.courseState == 2 || this.detail.courseState == 3){ uni.showToast({ title:'课程已结束!', icon:'none' }) return } setMemberSeat(courseMemberList).then((res)=>{ if(res.success){ uni.showToast({ title:'操作成功!' }); this.getDetail() } }) }, call(phone){ uni.makePhoneCall({ phoneNumber:phone, }) } } } </script> <style lang="less" scoped> .fixed{ position: -webkit-sticky; position: sticky; top: 0; z-index: 99; } .index-box{ padding-bottom: 100rpx; .swiper-box{ width: 100%; height: 340rpx; image{ width: 100%; height: 100%; } } .course-detail-box{ width: 750rpx; background: #F7F8FC; border-radius: 60rpx 60rpx 0px 0px; padding: 46rpx 40rpx; margin-top: -55rpx; position: relative; .course-name-box{ margin-bottom: 24rpx; .state-box{ height: 44rpx; line-height: 44rpx; padding: 0rpx 6rpx; background: #F4C076; color: #fff; border-radius: 4rpx; font-size: 26rpx; margin-right: 26rpx; border-radius: 10rpx; } .name{ font-size: 40rpx; color: #333; } } .desc{ font-size: 24rpx; color: #333; line-height: 40rpx; } } .course-active-box{ background: #fff; padding: 56rpx 40rpx; font-size: 28rpx; .title-box{ font-weight: bold; margin-bottom: 30rpx; } .title-box::before{ content: ''; display: block; width: 6rpx; height: 28rpx; background: #F4C076; margin-right: 20rpx; } image{ width: 28rpx; height: 28rpx; margin-right: 20rpx; } .address-box{ margin-bottom: 10rpx; color: #222; } } .btn-box{ width: 100%; display: flex; justify-content: space-around; padding: 0rpx 0 40rpx; background: #fff; .btn-item{ width: 206rpx; height: 80rpx; padding:0 20rpx; background: #FFFFFF; border: 1px solid #E4E4E4; box-shadow: 0px 4px 8px rgba(240, 240, 240, 0.5); border-radius: 66rpx; display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; image{ width: 40rpx; height: 40rpx; } } } .member-list-box{ width: 100%; padding: 0 20rpx; font-size: 28rpx; color: #222; .title-box{ margin: 40rpx 0 28rpx; .title-box-r{ position: relative; font-size: 28rpx; color: #222; .sort-box{ width: 230rpx; background: #fff; padding: 16rpx 20rpx 0; position: absolute; bottom: -150rpx; left: -180rpx; border-radius: 10rpx; box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16); .sort-item{ padding: 0rpx; font-size: 20rpx; height: 42rpx; line-height: 42rpx; text-align: center; color: #B9B9B9; background: #F5F6F7; border-radius: 24rpx; margin-bottom: 16rpx; } .bgR{ background: #EB5744; color: #fff; } } } } .member-list{ background-color: #fff; padding: 0 20rpx; border-radius: 20rpx; .member-item{ padding: 28rpx 0; .item-top{ image{ width: 144rpx; height: 144rpx; border-radius: 50px; margin-right: 20rpx; } .name{ font-size: 32rpx; line-height: 44rpx; margin-bottom: 12rpx; } .state{ width: 112rpx; height: 40rpx; background: #EB5744; border-radius: 23rpx; line-height: 40rpx; text-align: center; color: #fff; font-size: 24rpx; } .signIn-btn{ background: #67FC55; } .call{ width: 120rpx; height: 60rpx; line-height: 60rpx; text-align: center; background: #F4C076; border-radius: 30rpx; color: #fff; } } .item-btm{ width: 100%; height: 90rpx; border-radius: 10rpx; background: #F6F6F6; padding-left: 30rpx; margin-top: 50rpx; .dot{ width: 16rpx; height: 16rpx; background: #EB5744; border-radius: 50px; } .mrl{ margin: 0 40rpx 0 20rpx; } input{ width: 360rpx; } .submit-btn{ color: #EB5744; font-size: 28rpx; } } } } } .default{ background: #B5B5B5 !important; color: #fff !important; } .colY{ background: #E8C77D !important; color: #fff !important; } .colG{ background: #A5CF70 !important; color: #fff; } .colR{ background: #ED5E48 !important; color: #fff; } } </style>