You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

480 lines
13 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="container">
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
<view class="wrap">
<!-- <topBanner v-if="banner_list.length>0" :banner_list="banner_list"></topBanner> -->
<view class="list">
<image v-if="showNear" @click="goContents" class="list-img" :src="base.imgHost('mycourse-content.png')">
</image>
<view>
<view v-if="list.length>0">
<view class="list-item" v-for="item in list">
<view class="list-item-status">
<view
:class="{'list-item-status-text':item.course_status===10,'list-item-status-textEnd':item.course_status!=10}">
{{item.date_status}}
</view>
<block v-for="state in statusList">
<view :class="state.class" v-if="state.id===item.course_signs[0]['status']">
{{state.text}}
</view>
</block>
<!-- <view :class="{
'list-item-status-status':item.course_signs[0]['status']===0||item.course_signs[0]['status']===3,
'list-item-status-statusSuccess':item.course_signs[0]['status']===1,
'list-item-status-statusFail':item.course_signs[0]['status']===2
}">{{item.course_signs[0]['status_text']==='备选'?'待审核':item.course_signs[0]['status_text']}}</view> -->
</view>
<view class="list-item-name">
<view>
<image :src="base.imgHost('me-icon1.png')"></image>
<text>
<block v-if="item.type">{{item.type_detail?item.type_detail.name+' | ':''}}
</block>
{{item.name}}
</text>
</view>
<view>
<image :src="base.imgHost('mybook-icon3.png')"></image>
<text>开课日期:{{item.start_date?item.start_date:'待定'}}</text>
</view>
</view>
<view class="list-item-buttom">
<view>
<u-button v-if="item.course_status===10" size="mini" :custom-style="{'color':'#b79373',
'border-color':'transparent','font-size': '26rpx',
'padding': 0}" :hair-line="false" @click="clickShareId(item)" shape="circle" open-type="share">
<image :src="base.imgHost('mycourse-share.png')"></image>
<text>分享</text>
</u-button>
</view>
<view class="list-item-btn">
<!-- 问卷调查按钮 -->
<text v-if="shouldShowSurvey(item)" @click="goSurvey(item)" style="margin-right:20rpx;color:#2018a0">问卷调查</text>
<!-- 审核通过 付费和不付费 -->
<text @click="toUrl(item,3)"
v-if="item.course_signs[0]['status']===1 && item.is_fee===0">进入</text>
<text @click="toUrl(item,1)"
v-if="item.course_signs[0]['status']===1 && item.is_fee===1">进入</text>
<!-- 待审核 备选 -->
<text @click="cancelSign(item)" style="margin-right:20rpx;color:#999999"
v-if="item.course_signs[0]['status']===0||item.course_signs[0]['status']===3">取消报名</text>
<text @click="editSign(item)" style="margin-right:20rpx"
v-if="item.course_signs[0]['status']===0">修改信息</text>
<text @click="toUrl(item,2)"
v-if="item.course_signs[0]['status']===0||item.course_signs[0]['status']===3">查看进度</text>
<!-- 审核不通过 放弃-->
<text @click="toUrl(item,2)" v-if="item.course_signs[0]['status']===2 || item.course_signs[0]['status']===5
||item.course_signs[0]['status']===4||item.course_signs[0]['status']===6">查看</text>
</view>
</view>
</view>
</view>
<view class="nodata" v-else>
<u-empty text="当前没有报名课程" mode="data"></u-empty>
</view>
</view>
</view>
</view>
<u-modal v-model="showCancel" title="取消报名" :show-cancel-button="true" confirm-text="确认取消报名" cancel-text="暂不取消"
negative-top="400" @confirm='submitCancel' content="取消后将无法再次报名本期课程,是否取消本次报名?"></u-modal>
</view>
</template>
<script>
import topBanner from '@/components/topBanner.vue'
export default {
components: {
topBanner
},
data() {
return {
banner_list: [],
list: [],
historyList: [],
shareObj: {},
showCancel: false,
cancelItem: null,
showNear: false,
statusList: [{
id: 0,
text: '待审核',
class: 'list-item-status-status'
}, {
id: 1,
text: '审核通过',
class: 'list-item-status-statusSuccess'
}, {
id: 2,
text: '审核不通过',
class: 'list-item-status-statusFail'
}, {
id: 3,
text: '待审核', //备选
class: 'list-item-status-status'
}, {
id: 4,
text: '已取消',
class: 'list-item-status-statusFail'
}, {
id: 5,
text: '已放弃',
class: 'list-item-status-statusFail'
}, {
id: 6,
text: '审核不通过', //黑名单
class: 'list-item-status-statusFail'
}]
}
},
onShareAppMessage(res) {
console.log("res", res)
console.log("this.shareObj", this.shareObj)
if (res.from === 'button') {
return {
path: "/packages/course/detail?id=" + this.shareObj.id, //这是为了传参 onload(data){let id=data.id;}
title: this.shareObj.name,
imageUrl: '/static/share.jpg'
}
}
return this.base.shareInfo
},
//发送到朋友圈
onShareTimeline(res) {
if (res.from === 'button') {
return {
path: "/packages/course/detail?id=" + this.shareObj.id, //这是为了传参 onload(data){let id=data.id;}
title: this.shareObj.name,
imageUrl: '/static/share.jpg'
}
}
return this.base.shareInfo
},
onLoad() {
console.log("selectOptions", this.selectOptions)
this.getMyCourse()
this.getMyCourseContents()
// this.getBannerList()
},
methods: {
async getMyCourse() {
const res = await this.$u.api.courseMy()
this.list = res.list.data
},
async getMyCourseContents() {
const res = await this.$u.api.myCourseContent()
if (res.list.length > 0) {
let arr = this.filterDataByToday(res.list)
console.log("arr",arr)
if(arr.length>0){
this.showNear = true
}
} else {
this.showNear = false
}
// this.list = res.list.data
},
filterDataByToday(arr) {
// 获取当前日期
let filteredData = []
const today = this.$moment().format('YYYY-MM-DD');
// 筛选出 date 字段大于或等于今天的数据
filteredData = arr.filter(item => {
const itemDate = this.$moment(item.date).format('YYYY-MM-DD');
return this.$moment(itemDate).isSameOrAfter(today);
});
return filteredData
},
goContents() {
uni.navigateTo({
url: '/packages/mycourse/courseContents?type=near'
})
},
clickShareId(item) {
this.shareObj = item
},
toUrl(item, type) {
// 付费审核通过
if (type === 1) {
uni.navigateTo({
url: '/packages/mycourse/detail?id=' + item.id
})
} else if (type === 2) {
// 审核不通过 或待审核 备选 或者放弃
uni.navigateTo({
url: '/packages/mycourse/courseStatus?id=' + item.id
})
} else if (type === 3) {
// 不付费的 审核通过
// 有群聊二维码 进详情,没有进状态
if (!this.base.isNull(item.qun_image_id)) {
//
uni.navigateTo({
url: '/packages/course/freeDetail?id=' + item.id
})
} else {
// 显示通讯录就进 审核详情
if(item.show_txl){
uni.navigateTo({
url: '/packages/mycourse/detail?id=' + item.id
})
}else{
// 不显示就 进审核状态
uni.navigateTo({
url: '/packages/mycourse/courseStatus?id=' + item.id
})
}
}
}
},
// 取消报名 弹窗
cancelSign(item) {
console.log("123", item)
this.showCancel = true
this.cancelItem = item
},
// 修改信息
editSign(item) {
uni.navigateTo({
url: '/packages/apply/index?type=edit&id=' + item.id
})
},
submitCancel(item) {
console.log("item", item)
let that = this
this.$u.api.courseUpdateSign({
id: this.cancelItem.course_signs[0].id,
status: 4
}).then(res => {
that.base.toast("已取消课程", 1500, function() {
setTimeout(function() {
that.cancelItem = null
that.showCancel = false
that.getMyCourse()
}, 1500)
})
})
},
async getBannerList() {
const res = await this.$u.api.otherBanner({
position: 2
})
if (res.length > 0) {
this.banner_list = res.sort((a, b) => {
a.sort - b.sort
})
}
},
shouldShowSurvey(item) {
// 检查是否有问卷调查且状态为1
if (!item.course_content_evaluation || item.course_content_evaluation.status != 1) {
return false;
}
// 获取当前时间
const now = new Date();
const currentTime = now.getTime();
// 检查start_time
if (!item.course_content_evaluation.start_time) {
return false;
}
const startTime = new Date(item.course_content_evaluation.start_time).getTime();
// 如果当前时间小于start_time不显示
if (currentTime < startTime) {
return false;
}
// 如果end_time有值需要检查是否在时间范围内
if (item.course_content_evaluation.end_time) {
const endTime = new Date(item.course_content_evaluation.end_time).getTime();
// 当前时间必须在start_time和end_time之间
return currentTime >= startTime && currentTime <= endTime;
} else {
// 如果end_time没有值只要当前时间大于start_time就显示
return currentTime >= startTime;
}
},
goSurvey(item) {
// 跳转到问卷调查页面需要传递course_id
const courseContentId = item.id;
uni.navigateTo({
url: '/packages/surveyFill/index?course_id=' + courseContentId
});
}
}
}
</script>
<style scoped lang="scss">
.container {
padding: 30rpx;
width: 100%;
height: 100vh;
padding-top: 0;
.cbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.nodata {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrap {
position: relative;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
.list {
margin-top: 30rpx;
&-img {
width: 100%;
height: 125rpx;
display: block;
margin: 0 auto;
margin-bottom: 30rpx;
}
&-title {
margin-bottom: 30rpx;
color: #333;
font-size: 42rpx;
}
&-item {
background-color: #fff;
padding: 30rpx;
margin-bottom: 30rpx;
border-radius: 20rpx;
// border-bottom: 2px solid #b79373
box-shadow: 0 -1rpx 20rpx #bed2ec;
&-status {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
padding-bottom: 20rpx;
border-bottom: 1px solid #f5f5f5;
&>view:last-child {
padding: 5rpx 20rpx;
border-radius: 28rpx 0 28rpx 28rpx;
color: #fff;
}
&-text {
color: #b08c6c;
font-size: 28rpx;
}
&-textEnd {
color: #999;
font-size: 28rpx;
}
&-status {
background-color: #bf976e;
font-size: 24rpx;
}
&-statusSuccess {
background-color: #00b318;
font-size: 24rpx;
}
&-statusFail {
background-color: #999999;
font-size: 24rpx;
}
}
&-name {
padding: 20rpx 0;
border-bottom: 1px solid #f5f5f5;
&>view {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 28rpx;
image {
width: 24rpx;
height: 24rpx;
margin-right: 20rpx;
}
text {
display: inline-block;
width: calc(100% - 44rpx);
font-size: 28rpx;
line-height: 1.5;
}
}
&>view:first-child {
margin-bottom: 20rpx;
}
}
&-hisname {
color: #888888
}
&-buttom {
display: flex;
justify-content: space-between;
align-items: center;
color: #b79373;
margin-top: 20rpx;
&>view:first-child {
display: flex;
align-items: center;
image {
width: 26rpx;
height: 26rpx;
margin: 0 10rpx;
}
}
}
&-btn {
color: #b08c6c;
// background: linear-gradient(to right, #5e5fbc, #0d0398);
// border-radius: 30rpx;
// color: #fff;
// text-align: center;
// padding: 10rpx 20rpx;
// width: 140rpx;
}
}
}
}
}
</style>