|
|
@@ -0,0 +1,591 @@
|
|
|
+<template>
|
|
|
+ <!-- 教研室详情 -->
|
|
|
+ <view class="activityDetailNew">
|
|
|
+ <statusBar :item="navbar"></statusBar>
|
|
|
+ <!-- 消息提示 -->
|
|
|
+ <msgPop></msgPop>
|
|
|
+
|
|
|
+ <view class="top">
|
|
|
+ <template>
|
|
|
+ <view>
|
|
|
+
|
|
|
+ <!-- 只渲染当前视频 -->
|
|
|
+ <video :src="currentVideoUrl" controls @ended="playNextVideo"
|
|
|
+ autoplay="true"></video>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="decontent">
|
|
|
+ <view class="actit">
|
|
|
+ {{actItemList.acName}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="acinfo">
|
|
|
+ <view class="acinfoAddress">
|
|
|
+ <view class="acinfoTit">
|
|
|
+ <text>时</text>
|
|
|
+ <text>间</text>
|
|
|
+ </view>：
|
|
|
+ <text class="inf">{{actItemList.begin_at}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="acinfoAddress">
|
|
|
+ 地点：<text class="inf">{{actItemList.address}}</text>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="">
|
|
|
+ 主办单位：<text class="inf">暂无字段</text>
|
|
|
+ </view> -->
|
|
|
+ <view class="acinfoAddress">
|
|
|
+ <view class="acinfoTit">
|
|
|
+ <text>活</text>
|
|
|
+ <text>动</text>
|
|
|
+ <text>形</text>
|
|
|
+ <text>式</text>
|
|
|
+ </view>： <text style="color:rgba(0, 86, 168, 1) ;">{{actItemList.acshape}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ navbar: {
|
|
|
+ title: '查看回放',
|
|
|
+ btn: 1
|
|
|
+ },
|
|
|
+ // 用户openid
|
|
|
+ oid: '',
|
|
|
+ // 活动id
|
|
|
+ acId: '',
|
|
|
+ stuNum: 0,
|
|
|
+ // 报名跳转链接
|
|
|
+ // enrollImg: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/file-1719281192664.png',
|
|
|
+ DigenrollImg: false,
|
|
|
+ // 参与活动跳转链接
|
|
|
+ GetInvolved: false,
|
|
|
+ // 页面数据
|
|
|
+ actItemList: {},
|
|
|
+ //回放视频
|
|
|
+ videoList: [],
|
|
|
+ currentVideoIndex: 0, // 当前视频索引
|
|
|
+ currentVideoUrl: '',
|
|
|
+ // 用户收藏列表
|
|
|
+ collArr: [],
|
|
|
+ //报名成功弹窗
|
|
|
+ showPopupConfirm: false,
|
|
|
+ //过期日期
|
|
|
+ dTime: '',
|
|
|
+ // 查看回放弹框控制
|
|
|
+ PlaybackDig: false,
|
|
|
+ // 用户订阅列表
|
|
|
+ // subArr: [],
|
|
|
+ uLoading: false,
|
|
|
+ //弹窗是否过期显示的内容
|
|
|
+ popupMessage: '',
|
|
|
+ // 收藏按钮节流
|
|
|
+ stopTimer: 0,
|
|
|
+
|
|
|
+ //控制弹窗
|
|
|
+ showPopup: false,
|
|
|
+ // 是否已加入
|
|
|
+ isSign: 0,
|
|
|
+ // 判断显示报名弹窗还是取消报名弹窗
|
|
|
+ isAdd: 0,
|
|
|
+
|
|
|
+ // 报名列表
|
|
|
+ applyUserlist: [],
|
|
|
+ pic_coll2: 'https://teacherapi.cocorobo.cn/teaching-file/static/mine/Collect_yellow.png',
|
|
|
+
|
|
|
+ imgLoading: 'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/file-1712113517547.png'
|
|
|
+ // nodes: [{
|
|
|
+ // name: 'div',
|
|
|
+ // attrs: {
|
|
|
+ // class: 'div-class',
|
|
|
+ // style: 'line-height: 60px; color: red; text-align:center;'
|
|
|
+ // },
|
|
|
+ // children: [{
|
|
|
+ // type: 'text',
|
|
|
+ // text: 'Hello uni-app!'
|
|
|
+ // }]
|
|
|
+ // }],
|
|
|
+ // strings: '<div style="text-align:center;"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
|
|
|
+ // pic_sub: 'https://teacherapi.cocorobo.cn/teaching-file/static/yym/Vector (Stroke) (1).png',
|
|
|
+ // pic_sub2: 'https://teacherapi.cocorobo.cn/teaching-file/static/dingyue_blue.png',
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ // 开始播放第一个视频
|
|
|
+ this.playNextVideo();
|
|
|
+ },
|
|
|
+
|
|
|
+ // onUnload() {
|
|
|
+ // this.$store.dispatch('asyncDelAll')
|
|
|
+ // },
|
|
|
+ computed: {
|
|
|
+ isExpired() {
|
|
|
+ let dTime = this.dTime.split(',')
|
|
|
+ let bint = new Date(dTime[0]).getTime()
|
|
|
+ let now = new Date().getTime()
|
|
|
+ // console.log("过期时间",bint);
|
|
|
+ // console.log("当前日期",now);
|
|
|
+ return bint < now
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ playNextVideo() {
|
|
|
+ // 播放下一个视频
|
|
|
+ if (this.currentVideoIndex < this.videoList.length) {
|
|
|
+ this.currentVideoUrl = this.videoList[this.currentVideoIndex];
|
|
|
+ this.currentVideoIndex++;
|
|
|
+ } else {
|
|
|
+ // 当播放到最后一个视频后，回到第一个视频
|
|
|
+ this.currentVideoIndex = 0;
|
|
|
+ this.currentVideoUrl = this.videoList[this.currentVideoIndex];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ gotoLink(e) {
|
|
|
+
|
|
|
+ let link = e.currentTarget.dataset.link;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/skipone/skipone?url=" + encodeURIComponent(link),
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 查看回放
|
|
|
+ lookPlayback() {
|
|
|
+ if (!(!!this.actItemList.playback)) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "暂无回放",
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.PlaybackDig = true
|
|
|
+ // uni.navigateTo({
|
|
|
+ // // url: "/pages/skipone/skipone?item=" + encodeURIComponent(JSON.stringify('https://www.yuketang.cn/v2/web/forbidden'))
|
|
|
+ // url: "/pages/skipone/skipone?item=" + encodeURIComponent(JSON.stringify(this.actItemList
|
|
|
+ // .playback))
|
|
|
+ // });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取页面数据
|
|
|
+ getdata() {
|
|
|
+ this.uLoading = true
|
|
|
+ let data = {
|
|
|
+ oid: this.$store.state.user.openid,
|
|
|
+ acId: this.acId,
|
|
|
+ }
|
|
|
+ this.$request('/selectActivityID', "POST", data).then(res => {
|
|
|
+ console.log('页面数据', res[0][0]);
|
|
|
+ this.dTime = res[0][0].begin_at;
|
|
|
+ // console.log('this.dTime',this.dTime);
|
|
|
+
|
|
|
+ let video = res[0][0].videolink;
|
|
|
+ this.videoList = video.split(',')
|
|
|
+ console.log("this.playbacks", this.videoList)
|
|
|
+
|
|
|
+ let srrt = this.datejudge(res[0][0].begin_at)
|
|
|
+ console.log('srrt', srrt);
|
|
|
+ res[0][0].begin_at = srrt
|
|
|
+ this.uLoading = false
|
|
|
+ this.actItemList = res[0][0]
|
|
|
+ this.actItemList.brief = this.actItemList.brief.replace(/<img/gi,
|
|
|
+ '<img style="max-width:100%;height:auto;margin:0 auto;display:block"'
|
|
|
+ )
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 处理时间
|
|
|
+ datejudge(e) {
|
|
|
+ const dates = e.split(",");
|
|
|
+
|
|
|
+ const date1 = new Date(dates[0]);
|
|
|
+ const date2 = new Date(dates[1]);
|
|
|
+
|
|
|
+ const year1 = date1.getFullYear();
|
|
|
+ const month1 = date1.getMonth();
|
|
|
+ const day1 = date1.getDate();
|
|
|
+
|
|
|
+ const year2 = date2.getFullYear();
|
|
|
+ const month2 = date2.getMonth();
|
|
|
+ const day2 = date2.getDate();
|
|
|
+
|
|
|
+ if (year1 === year2 && month1 === month2 && day1 === day2) {
|
|
|
+ const modifiedDate = dates[1].substring(11); // 保留时间部分（小时和分钟）
|
|
|
+ dates[1] = modifiedDate;
|
|
|
+ }
|
|
|
+
|
|
|
+ const result = dates.join("-");
|
|
|
+ return result
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad(query) {
|
|
|
+ this.acId = query.acId
|
|
|
+ this.oid = this.$store.state.user.openid
|
|
|
+
|
|
|
+ // 获取页面数据
|
|
|
+ this.getdata()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ video {
|
|
|
+ width: 100%; /* 设置视频宽度为父元素宽度的百分比 */
|
|
|
+ max-width: 100%; /* 确保视频不超过其原始尺寸的最大宽度 */
|
|
|
+ }
|
|
|
+ .activityDetailNew {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ /deep/ .u-image {
|
|
|
+ height: 300px !important;
|
|
|
+ // align-items: center !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-image__image {
|
|
|
+ height: 300px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ellone {
|
|
|
+
|
|
|
+ /deep/ .u-image {
|
|
|
+ height: 400px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-image__image {
|
|
|
+ height: 600px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-modal__content {
|
|
|
+ flex-direction: column !important;
|
|
|
+ align-items: center;
|
|
|
+ height: 450px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .popup-container2 {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 520rpx;
|
|
|
+ height: 260rpx;
|
|
|
+ z-index: 1000;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ // display: none;
|
|
|
+ box-shadow: 0rpx 3rpx 10rpx 5rpx rgba(0, 0, 0, .1);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .popup {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 24px;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ .imgShade {
|
|
|
+ width: 170rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 10rpx #0056A8 solid;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 0 10rpx #0056A8;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .cancel-btn {
|
|
|
+ width: 50%;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ color: #000;
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom-left-radius: 16rpx;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-btn {
|
|
|
+ width: 50%;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #0081FE;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ width: 750rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img1 {
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img2 {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .decontent {
|
|
|
+ width: 750rpx;
|
|
|
+ border-top-right-radius: 30rpx;
|
|
|
+ border-top-left-radius: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ border-bottom: 1rpx rgba(231, 231, 231, 1) solid;
|
|
|
+
|
|
|
+ .actit {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ line-height: 56rpx;
|
|
|
+
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: rgba(0, 0, 0, 0.4);
|
|
|
+ font-size: 24rpx;
|
|
|
+ // height: 32rpx;
|
|
|
+ // line-height: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avaList {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ border-bottom: 1rpx rgba(231, 231, 231, 1) solid;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .ava {
|
|
|
+ // width: 353rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cost {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: rgba(246, 135, 23, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .acinfo {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+ border-bottom: 1rpx rgba(231, 231, 231, 1) solid;
|
|
|
+
|
|
|
+ // padding-bottom: 30rpx;
|
|
|
+ .acinfoAddress {
|
|
|
+ // padding: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ .acinfoTit {
|
|
|
+ width: 150rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ // text-align: justify;
|
|
|
+ .justified-text {
|
|
|
+ text-align: justify;
|
|
|
+ text-justify: inter-word;
|
|
|
+ /* 兼容性写法，用于处理中英文混排时的对齐效果 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inf {
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .acbrief {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .britit {
|
|
|
+ width: 100%;
|
|
|
+ height: 48rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: rgba(0, 0, 0, 0.8);
|
|
|
+ margin: 30rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bricon {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: (0, 0, 0, 0.8);
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .briImg {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnBlock {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 175rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 30rpx;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ border-top: 1rpx rgba(231, 231, 231, 1) solid;
|
|
|
+
|
|
|
+ // padding-bottom: 78rpx;
|
|
|
+ .icos {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .ico {
|
|
|
+ width: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .imgBlock {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .icoimg {
|
|
|
+ width: 42rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icotxt {
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: rgba(4, 0, 0, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightBtn {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btnt {
|
|
|
+ width: 454rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 17px;
|
|
|
+ height: 96rpx;
|
|
|
+ background-color: rgba(0, 86, 168, 1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnt1 {
|
|
|
+ width: 454rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 17px;
|
|
|
+ height: 96rpx;
|
|
|
+ background-color: rgb(217, 217, 217);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
