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.

478 lines
13 KiB

<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
})
}
},
getAvailableEvaluation(item){
const evalList = Array.isArray(item.course_content_evaluation)
? item.course_content_evaluation
: (item.course_content_evaluation ? [item.course_content_evaluation] : []);
if (!evalList.length) return null;
const nowTs = Date.now();
const parseTs = (s) => {
if (!s) return NaN;
const t = new Date(s).getTime();
return isNaN(t) ? NaN : t;
};
for (let i = 0; i < evalList.length; i += 1) {
const ev = evalList[i];
if (!ev || ev.status != 1) continue;
const startTs = parseTs(ev.start_time);
if (!(startTs > 0) || nowTs < startTs) continue;
if (ev.end_time) {
const endTs = parseTs(ev.end_time);
if (!(endTs > 0) || nowTs > endTs) continue;
}
return ev;
}
return null;
},
shouldShowSurvey(item) {
return !!this.getAvailableEvaluation(item);
},
goSurvey(item) {
const available = this.getAvailableEvaluation(item);
if (!available) {
this.base.toast('暂无可填写的问卷');
return;
}
uni.navigateTo({
url: '/packages/surveyFill/index?id=' + available.id
});
}
}
}
</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>