|
|
@@ -32,9 +32,9 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="flex" style="margin: 0 20rpx;">
|
|
|
- <view class="t-icon t-icon-baocun" @click="saveVideo"></view>
|
|
|
- <view class="t-icon t-icon-fenxiang" @click="shareVideo"></view>
|
|
|
+ <view class="flex">
|
|
|
+ <view class="t-icon t-icon-baocun" @click="downLoadShow = true"></view>
|
|
|
+ <view class="t-icon t-icon-fenxiang" @click="actionShow = true"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -63,16 +63,21 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 按钮 -->
|
|
|
- <view class="btn" :style="{backgroundColor: index<current? '#23b46c':(index===current? '#ff5959':'#aaa') }">
|
|
|
- <view class="content-subtitle" v-if="index<current" @click="showVideo(index)">观看回放</view>
|
|
|
- <view class="content-subtitle" v-if="index===current" @click="showLive(index)">正在直播</view>
|
|
|
- <view class="content-subtitle" v-if="index>current">暂未开始</view>
|
|
|
+ <view class="btn" v-if="index<current" :style="{backgroundColor:'#23b46c'}" @click="showVideo(index)">
|
|
|
+ <view class="content-subtitle">观看回放</view>
|
|
|
+ </view>
|
|
|
+ <view class="btn" v-if="index===current" :style="{backgroundColor:'#ff5959'}" @click="showLive(index)">
|
|
|
+ <view class="content-subtitle">正在直播</view>
|
|
|
+ </view>
|
|
|
+ <view class="btn" v-if="index>current" :style="{backgroundColor:'#aaa'}">
|
|
|
+ <view class="content-subtitle" >暂未开始</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 缺省区域 -->
|
|
|
<!-- <view style="margin-top: 150rpx;">
|
|
|
<u-empty mode="data"></u-empty>
|
|
|
</view> -->
|
|
|
+ <!-- 分享 -->
|
|
|
<u-action-sheet :show="actionShow" @close="actionShow = false" title="—— 分享视频到 ——" :round="10">
|
|
|
<view class="flex-icon">
|
|
|
<view class="flex-box">
|
|
|
@@ -89,6 +94,17 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-action-sheet>
|
|
|
+ <!-- 下载 -->
|
|
|
+ <u-action-sheet :show="downLoadShow" @close="downLoadShow = false" title="—— 是否下载该视频 ——" :round="10">
|
|
|
+ <view class="flex-icon" style="padding: 50rpx 80rpx 70rpx 80rpx;">
|
|
|
+ <view class="confirm" @click="downLoadShow = false" style="background-color: #aaa;">
|
|
|
+ <view class="subtitle">取消</view>
|
|
|
+ </view>
|
|
|
+ <view class="confirm" @click="noMultipleClicks(saveVideo)" style="background-color: #23b46c;">
|
|
|
+ <view class="subtitle">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-action-sheet>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -109,8 +125,8 @@
|
|
|
//正在播放第几个视频
|
|
|
tempIndex: '',
|
|
|
actionShow: false,
|
|
|
- //下载临时路径
|
|
|
- tempFilePath: '',
|
|
|
+ downLoadShow: false,
|
|
|
+ noClick: true
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -121,30 +137,42 @@
|
|
|
},
|
|
|
methods: {
|
|
|
getToday() {
|
|
|
- this.today = (new Date()).format("yyyy-MM-dd")
|
|
|
+ this.today = (new Date()).format("yyyy-M-d")
|
|
|
+ },
|
|
|
+ // 处理多次点击
|
|
|
+ noMultipleClicks(methods) {
|
|
|
+ this.downLoadShow = false
|
|
|
+ uni.$showMsg('开始下载', 500)
|
|
|
+ //复制this对象指向当时的this,防止找不到原来的对象
|
|
|
+ let that = this;
|
|
|
+ if (that.noClick) {
|
|
|
+ that.noClick = false;
|
|
|
+ //点击方法
|
|
|
+ methods();
|
|
|
+ setTimeout(function() {
|
|
|
+ that.noClick = true;
|
|
|
+ }, 2000)
|
|
|
+ } else {
|
|
|
+ uni.$showMsg('正在下载中', 500)
|
|
|
+ }
|
|
|
},
|
|
|
//保存video
|
|
|
saveVideo() {
|
|
|
uni.downloadFile({
|
|
|
- url: this.classInfo.resource, //仅为示例，并非真实的资源
|
|
|
+ url: this.classInfo.resource,
|
|
|
success: (res) => {
|
|
|
if (res.statusCode === 200) {
|
|
|
- this.tempFilePath = res.tempFilePath
|
|
|
- console.log('下载成功');
|
|
|
+ uni.$showMsg('下载成功')
|
|
|
uni.saveVideoToPhotosAlbum({
|
|
|
- filePath: this.tempFilePath,
|
|
|
+ filePath: res.tempFilePath,
|
|
|
success: function() {
|
|
|
- console.log('保存成功')
|
|
|
+ uni.$showMsg('保存成功')
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
- //分享界面
|
|
|
- shareVideo() {
|
|
|
- this.actionShow = true
|
|
|
+
|
|
|
},
|
|
|
shareToWeixin() {
|
|
|
uni.share({
|
|
|
@@ -153,7 +181,7 @@
|
|
|
type: 4,
|
|
|
title: "来自醍摩豆家长端的分享",
|
|
|
summary: `今日孩子已上${this.classInfo.name}课程,快来围观吧！`,
|
|
|
- mediaUrl: this.tempFilePath,
|
|
|
+ mediaUrl: this.classInfo.resource,
|
|
|
success: function(res) {
|
|
|
console.log("success:" + JSON.stringify(res));
|
|
|
},
|
|
|
@@ -203,4 +231,18 @@
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import '@/subpkg/common/videopage.scss';
|
|
|
+ .confirm{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 70rpx;
|
|
|
+ width: 250rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ .subtitle {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
KELECHUAN