czg_team/new_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加视频播放页面

Browse Source
This commit is contained in:
YeMingfei666
2025-01-09 09:28:14 +08:00
parent b6eb3b0d35
commit 8572bebabb
16 changed files with 3098 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
components/cc-poster.vue Normal file
View File

@@ -0,0 +1,283 @@
<template>
<view style="background: #FFFFFF;">
<canvas v-if="!tempFilePath" :canvas-id="CanvasID"
:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
<image v-else lazy-load :src="tempFilePath" mode="widthFix" class="is-response"
@longpress="toSave(tempFilePath)"></image>
</view>
</template>
<script>
var _this;
export default {
name: 'wm-poster',
props: {
CanvasID: {
//CanvasID 等同于 canvas-id
Type: String,
default: 'PosterCanvas'
},
imgSrc: {
//展示图
Type: String,
default: ''
},
QrSrc: {
//二维码
Type: String,
default: ''
},
Title: {
//文本内容
Type: String,
default: '短剧'
},
TitleColor: {
//标题颜色
Type: String,
default: '#333333'
},
LineType: {
//标题显示行数 大于两行是否省略 （注超出2行显示会导致画布布局絮乱）
Type: [String, Boolean],
default: true
},
PriceTxt: {
//价格值
Type: String,
default: ''
},
PriceColor: {
//价格颜色
Type: String,
default: '#e31d1a'
},
OriginalTxt: {
//原价值
Type: String,
default: ''
},
OriginalColor: {
//默认颜色（如原价与扫描二维码颜色）
Type: String,
default: '#b8b8b8'
},
Width: {
//画布宽度 (高度根据图片比例计算 单位upx)
Type: String,
default: 750
},
CanvasBg: {
//canvas画布背景色
Type: String,
default: '#ffffff'
},
Referrer: {
//推荐人信息
Type: String,
default: '精选好剧'
},
ViewDetails: {
//描述提示文字
Type: String,
default: '长按或扫描识别二维码观看'
}
},
data() {
return {
tempFilePath: '',
canvasW: 0,
canvasH: 0,
canvasImgSrc: '',
ctx: null
};
},
methods: {
toSave(url) {
//#ifndef H5
uni.getImageInfo({
src: url,
success: function(image) {
console.log('图片信息：', JSON.stringify(image));
uni.saveImageToPhotosAlbum({
filePath: image.path,
success: function() {
console.log('save success');
uni.showToast({
title: '海报已保存相册',
icon: 'success',
duration: 2000
});
}
});
}
});
//#endif
},
async OnCanvas() {
uni.showLoading({
title: '海报生成中...'
})
_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
const C_W = uni.upx2px(_this.Width), //canvas宽度
C_P = uni.upx2px(30), //canvas Paddng 间距
C_Q = uni.upx2px(150); //二维码或太阳码宽高
let _strlineW = 0; //文本宽度
let _imgInfo = await _this.getImageInfo({
imgSrc: _this.imgSrc
}); //广告图
console.log('图片信息0：', JSON.stringify(""));
let _QrCode = await _this.getImageInfo({
imgSrc: _this.QrSrc
}); //二维码或太阳码
console.log('图片信息1：', JSON.stringify(""));
let r = [_imgInfo.width, _imgInfo.height];
let q = [_QrCode.width, _QrCode.height];
let imgW = C_W - C_P * 2;
if (r[0] != imgW) {
r[1] = Math.floor((imgW / r[0]) * r[1]);
r[0] = imgW;
}
if (q[0] != C_Q) {
q[1] = Math.floor((C_Q / q[0]) * q[1]);
q[0] = C_Q;
}
_this.canvasW = C_W;
_this.canvasH = r[1] + q[1] + 40;
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
//添加图片展示
_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
//添加图片展示 end
//设置文本
_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
let _strLastIndex = 0; //每次开始截取的字符串的索引
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
let _num = 1;
// for (let i = 0; i < _this.Title.length; i++) {
// _strlineW += _this.ctx.measureText(_this.Title[i]).width;
// if (_strlineW > r[0]) {
// if (_num == 2 && _this.LineType) {
// //文字换行数量大于二进行省略号处理
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
// _strlineW = 0;
// _strLastIndex = i;
// _num++;
// break;
// } else {
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
// _strlineW = 0;
// _strHeight += 20;
// _strLastIndex = i;
// _num++;
// }
// } else if (i == _this.Title.length - 1) {
// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
// _strlineW = 0;
// }
// }
//设置文本 end
//设置价格
_strlineW = C_P;
_strHeight += uni.upx2px(60);
if (_num == 1) {
_strHeight += 20; //单行标题时占位符
}
// if (_this.PriceTxt != '') {
// //判断是否有销售价格
// _this.ctx.setFillStyle(_this.PriceColor);
// _this.ctx.setFontSize(uni.upx2px(38));
// // _this.ctx.fillText('券后价 ￥' + _this.PriceTxt, _strlineW, _strHeight); //商品价格
// _strlineW += _this.ctx.measureText('券后价 ￥' + _this.PriceTxt).width + uni.upx2px(10);
// }
// // #ifdef H5
// if (_this.PriceTxt != '' && _this.OriginalTxt != '') {
// //判断是否有销售价格且原价
// _this.ctx.setFillStyle(_this.OriginalColor);
// _this.ctx.setFontSize(uni.upx2px(24));
// _this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight); //商品原价
// }
// #endif
_this.ctx.strokeStyle = _this.OriginalColor;
_this.ctx.moveTo(_strlineW, _strHeight - uni.upx2px(10)); //起点
_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight - uni.upx2px(
10)); //终点
_this.ctx.stroke();
//设置价格 end
//添加二维码
_strHeight += uni.upx2px(20);
let toTop = uni.upx2px(20);
// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _this.canvasH - q[1] - toTop, q[0], q[1]);
//添加二维码 end
//添加推荐人与描述
_this.ctx.setFillStyle(_this.TitleColor);
_this.ctx.setFontSize(uni.upx2px(30));
_this.ctx.fillText(_this.Title, C_P, _this.canvasH - q[1] - toTop + q[1] / 2);
_this.ctx.setFillStyle(_this.OriginalColor);
_this.ctx.setFontSize(uni.upx2px(24));
_this.ctx.fillText(_this.ViewDetails, C_P, _this.canvasH - q[1] - toTop + q[1] / 2 + 20);
//添加推荐人与描述 end
//延迟后渲染至canvas上
setTimeout(function() {
_this.ctx.draw(true, ret => {
_this.getNewImage();
});
}, 600);
},
async getImageInfo({
imgSrc
}) {
return new Promise((resolve, errs) => {
uni.getImageInfo({
src: imgSrc,
success: function(image) {
resolve(image);
},
fail(err) {
// errs(err);
_this.$emit('error', err);
}
});
});
},
getNewImage() {
uni.canvasToTempFilePath({
canvasId: _this.CanvasID,
quality: 1,
complete: res => {
_this.tempFilePath = res.tempFilePath;
_this.$emit('success', res);
// uni.showToast({
// title: '长按图片保存海报',
// mask: false,
// duration: 2000,
// icon: "none"
// });
}
},
this
);
}
},
mounted() {
_this = this;
this.OnCanvas();
}
};
</script>
<style></style>

337
components/my-video-list/list-item.vue Normal file
View File

@@ -0,0 +1,337 @@
<template>
<view class="item" @appear="appear" @disappear="disappear">
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles"
v-if="showVideo" @waiting="waiting()" object-fit="cover"
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
:autoplay="autoplay" @ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"></video>
<image class="poster" v-else @click="popupShow('pay')" :src="item.titleImg" mode="aspectFill"></image>
<view class="info">
<text class="color-fff" v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
<view v-if="item.content" v-html="item.content"></view>
<view class="u-m-t-20 color-fff" @click="popupShow('show')">
<text class="color-fff">
{{item.courseDetailsName}}（共{{total}}集）选集 >
</text>
</view>
</view>
<view class="right">
<view class="love u-flex u-flex-xy-center u-flex-col u-m-b-40 u-text-center" @click="dianzanClick">
<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
<text class="text color-fff">{{item.goodNum}}</text>
</view>
<view class="share u-m-b-40 u-flex u-flex-xy-center u-flex-col u-text-center" @click="share">
<image class="icon" src="@/static/images/share.png" mode=""></image>
<text class="text color-fff">分享</text>
</view>
<view class="zhuiju u-m-b-40 u-flex u-flex-xy-center u-flex-col u-text-center" @click="zhuijuClick">
<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
<text class="text color-fff">{{isCollect?'已追':'追剧'}}</text>
</view>
</view>
</view>
</template>
<script setup>
import {
computed,
onMounted,
ref
} from 'vue'
const props = defineProps({
item: {
type: Object,
defaulr: () => {
return {videoUrl:''}
}
},
instance: {
type: Object,
defaulr: () => {
return {
proxy: {}
}
}
},
current: {
//h5判断是否是当前项目
type: Number,
default: 0
},
index: {
type: Number,
default: 0
},
nowIndex:{
//app判断是否是当前项目
type: Number,
default: 0
},
total: {
type: Number,
default: 0
},
isCollect: {
type: [Number, Boolean],
default: 0
}
})
let autoplay = ref(props.item.videoUrl?true:false)
const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
'share', 'zhuijuClick', 'popupShow'
])
function controlstoggles() {
}
function waiting() {
}
function videoPlay() {
}
function ended() {
}
function dianzanClick() {
emits('dianzanClick')
}
function share() {
emits('share')
}
function zhuijuClick() {
emits('zhuijuClick')
}
function popupShow(key) {
emits('popupShow', key)
}
function appear() {
video && video.play()
emits('appear')
}
let video = null
function disappear() {
video && video.pause()
emits('disappear')
}
const showVideo=computed(()=>{
// #ifdef H5
return props.current === props.index && props.item.videoUrl
// #endif
// #ifdef APP
return props.nowIndex === props.index && props.item.videoUrl
// #endif
})
onMounted(() => {
console.log('onMounted');
try {
if(props.item.videoUrl){
video = uni.createVideoContext('myVideo' + props.item.courseDetailsId)
}
} catch (error) {
console.error('------')
//TODO handle the exception
}
})
</script>
<style lang="scss" scoped>
.item {
flex: 1;
height: 100%;
position: relative;
}
.box {
/* #ifdef H5 */
flex: 1;
/* #endif */
}
.u-flex-1 {
flex: 1;
width: 100%;
height: 100%;
}
.u-popup {
position: fixed !important;
}
::v-deep .u-popup {
position: fixed !important;
}
.video {
width: 750rpx;
flex: 1;
}
.poster {
/* #ifdef H5 */
position: absolute;
width: 100%;
height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* #endif */
/* #ifdef APP */
width: 750rpx;
flex: 1;
/* #endif */
}
.u-text-center {
text-align: center;
}
.u-flex-row {
flex-direction: row !important;
}
.info {
/* #ifdef H5 */
width: 80%;
/* #endif */
height: auto;
position: absolute !important;
bottom: 50px;
left: 10px;
color: #ffffff;
font-size: 15px;
z-index: 9999;
}
.u-flex-y-center {
align-items: center !important;
}
.swipers-items {
width: 750rpx;
flex: 1;
position: relative;
background-color: #000;
}
.right {
position: absolute !important;
right: 20rpx;
/* #ifdef H5 */
top: 50%;
transform: translateY(-50%);
/* #endif */
/* #ifdef APP */
top: 500px;
/* #endif */
z-index: 999;
color: #fff;
font-size: 24rpx;
.icon {
width: 60rpx;
height: 60rpx;
}
.share {
.text {
white-space: nowrap;
}
}
.zhuiju {}
}
.poster-popup {
position: fixed !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
justify-content: center;
align-items: center;
}
.ji-list {
.ji-item {
width: 210rpx;
margin-bottom: 20rpx;
margin-right: 30rpx;
height: 88rpx;
font-size: 28rpx;
color: #333;
border-radius: 12rpx;
background-color: #F5F7FF;
position: relative;
&.active {
background-color: $my-main-color;
color: #fff;
}
.lock {
position: absolute;
border-radius: 0px 6px 0px 6px;
background-color: #ccc;
padding: 2rpx 4rpx;
top: 0;
right: 0;
}
.playing {
position: absolute;
width: 32rpx;
height: 24rpx;
bottom: 5px;
right: 7px;
}
}
}
.ji-item:nth-of-type(3n) {
margin-right: 0;
}
.hot {
width: 40rpx;
height: 40rpx;
}
.pay-list {
.pay-list-item {
flex-direction: row;
justify-content: center;
background-color: #F2F2F2;
padding: 24rpx;
border-radius: 20rpx;
margin-bottom: 40rpx;
}
}
.zhifubao {
width: 56rpx;
height: 56rpx;
}
</style>

643
components/my-video-list/my-video-list.vue
View File

@@ -1,60 +1,292 @@
<template>
<view class="u-flex-1">
<!-- #ifdef H5 -->
<swiper @change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
<!-- #ifdef H5 -->
<view class=" w-full box" style="width: 100vw;">
<swiper v-if="videoList.length" @change="swiperChange" :current="current" :circular="true" vertical
class="u-flex-1" @transition="transition" :indicator-dots="false" :autoplay="false" :interval="0"
:duration="200">
<swiper-item v-for="(item,index) in videoList" :key="index">
<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles"
v-if="current === index && item.videoUrl" @waiting="waiting()" object-fit="cover"
@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
@ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"
:autoplay="item.autoPlay"></video>
<image class="poster" v-else @click="openShowPay(current,index,item.videoUrl)" :src="item.titleImg"
mode="aspectFill"></image>
<view class="info">
<text v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
<view v-if="item.content" v-html="item.content"></view>
<text class="u-m-t-20">
{{item.courseDetailsName}}（共{{list.length}}集）选集 >
</text>
</view>
<view class="right">
<view class="love u-m-b-40 u-flex-y-center u-flex-x-center u-text-center">
<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
<text class="text">{{item.goodNum}}</text>
</view>
<view class="share u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="share(item)">
<image class="icon" src="@/static/images/share.png" mode=""></image>
<text class="text">分享</text>
</view>
<view class="zhuiju u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="zhuijuClick">
<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
<text class="text">{{isCollect?'已追':'追剧'}}</text>
</view>
</view>
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
</swiper-item>
</swiper>
<!-- #endif -->
</view>
<!-- #endif -->
<!-- #ifdef APP -->
<list :bounce="false" :loadmoreoffset="wHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
@loadmore="loadmore" :scrollable="true">
<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
<view class="swipers-items" :style="boxStyle">
<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
:index="index" :instance="instance" :nowIndex="nowIndex" @appear="appear(item,index)"
@disappear="disappear(item,index)" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@zhuijuClick="zhuijuClick(item)" @popupShow="popupShow"></list-item-vue>
</view>
</cell>
</list>
<!-- #endif -->
<!-- 选集 -->
<up-popup :show="popup.show" :round="10" @close="popupClose('show')">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
<text class="color-333 u-font-32 ">{{info.title}}</text>
<text class="u-font-28 color-666 u-m-l-20">共{{list.length}}集</text>
</view>
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
</view>
<scroll-view scroll-y="true" class="u-m-t-30" style="height: 400px;box-sizing: border-box;"
:show-scrollbar="false">
<view class="ji-list u-flex u-flex-row u-flex-wrap">
<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
:class="{active:nowIndex==index,'mr-0':(index+1)%3==0}" v-for="(item,index) in list"
:key="index">
<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
<view class="lock u-flex-xy-center" v-if="!item.videoUrl">
<up-icon name="lock" :size="14" color="#fff"></up-icon>
</view>
<image v-if="nowIndex==index" class="playing" src="@/static/images/playIng.png" mode="">
</image>
</view>
</view>
</scroll-view>
</view>
</up-popup>
<!-- 支付 -->
<up-popup :show="popup.pay" :round="10" @close="popupClose('pay')">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
<text class="color-333 u-font-32 ">当前视频 没有播放权限</text>
</view>
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('pay')"></up-icon>
</view>
<view class="u-m-t-30">
<text class=" color-999 u-font-24">每日前10次付款均可获取抽奖机会，抽奖保底抽中付款金额等额红包，红包可直接提现。当前为第1次付款</text>
</view>
<view class="colo-333 pay-list font-bold u-font-28 u-m-t-20">
<view class="pay-list-item" v-if="info&&info.price" @click="payBtnClick">
<image class="hot" src="@/static/images/hot.png" mode=""></image>
<text class="u-font-28 font-bold">{{info.price}}元解锁全剧</text>
</view>
<view class="pay-list-item" @click="payBtnClick">
<image class="hot" src="@/static/images/hot.png" mode=""></image>
<text class="u-font-28 font-bold">{{nowDanjiPrice*jinbiBili}}金币解锁单集视频</text>
</view>
<view class="pay-list-item" @click="payBtnClick">
<!-- <image class="hot" src="@/static/images/hot.png" mode=""></image> -->
<text class="u-font-28 font-bold">{{nowDanjiPrice}}元解锁单集视频</text>
</view>
</view>
</view>
</up-popup>
<!-- 支付确认 -->
<up-popup :show="popup.payTips" :round="10" @close="popupClose('payTips')">
<view class="u-p-30">
<view class="u-flex u-flex-row u-row-between">
<view class="u-flex u-flex-row" style="align-items: baseline;">
<text class="color-333 u-font-32 ">购买后继续观看</text>
</view>
<up-icon name="close" :size="16" color="#333" bold @click="popupClose('payTips')"></up-icon>
</view>
<view class="u-flex u-m-t-24 u-flex-row u-row-between u-font-28">
<view class="u-flex u-flex-row u-flex-y-center">
<image src="@/static/images/zhifubao.png" class="zhifubao" mode=""></image>
<text class="u-m-l-20 u-flex-xy-center u-font-28">支付宝</text>
</view>
<view>
<up-radio-group>
<up-radio :icon-size="20" :size="26" :activeColor="color.main"></up-radio>
</up-radio-group>
</view>
</view>
<view class="u-m-t-10">
<text class="font-bold u-font-26 color-333">温馨提示</text>
<text class="u-m-t-10 u-font-24 color-999">一经购买不予退款，未满18岁需在监护人的指导、同意下进行付费操作</text>
</view>
<view class="u-flex u-flex-row u-m-t-30 u-flex-y-center u-font-28">
<view class="u-flex-y-center">
<up-checkbox usedAlone shape="circle" v-model="isAgree" :activeColor="color.main"></up-checkbox>
</view>
<view class="u-flex u-flex-row u-flex-y-center">
<text class="u-font-28 color-333">我已经阅读并同意</text>
<text class="color-main u-font-28">《付费须知说明》</text>
</view>
</view>
<view class="u-m-t-30 my-bg-main payConfirm">
<text class="u-font-28 color-fff">确认支付</text>
</view>
</view>
</up-popup>
<!-- 倍速 -->
<up-popup :show="popup.speed" :round="0" @close="popupClose('speed')">
<view class="u-p-20 u-flex u-flex-row u-row-between u-flex-y-center">
<text class="font-bold color-333 u-font-28">倍速:</text>
<view class="u-flex u-flex-row speed-list">
<text class="speed-list-item u-font-28" @click="changeSpeed(index)" :class="{active:index==speeds.active}"
v-for="(item,index) in speeds.list">{{item.num}}x</text>
</view>
</view>
</up-popup>
</template>
<script setup>
import {returnShareUrl} from '@/commons/config.js'
// #ifdef APP
const domModule = uni.requireNativePlugin('dom')
// #endif
import listItemVue from './list-item.vue';
import {
returnShareUrl
} from '@/commons/config.js'
import color from '@/commons/color.js'
import {
debounce
} from 'lodash';
import * as Api from '@/api/video/index.js'
import infoBox from '@/utils/infoBox.js'
import {
computed,
reactive,
ref,
watch
watch,
nextTick,
onMounted,
getCurrentInstance
} from 'vue';
const speeds = reactive({
list: [{
name: '0.5x',
num: 0.5
}, {
name: '1x',
num: 1
}, {
name: '1.25x',
num: 1.25
}, {
name: '1.5x',
num: 1.5
}],
active: 1
})
function changeSpeed(index){
speeds.active=index
uni.showToast({
title: '已切换' + speeds[index].num + '倍播放',
icon: 'none',
duration: 2000
})
}
const instance = getCurrentInstance()
let isAgree = ref(false);
const cutomStyle = {
background: 'rgb(255, 117, 129)',
height: '100rpx',
'border-radius': '100px'
}
const popup = reactive({
show: false,
pay: false,
payTips: false,
speed: false
})
function openBs() {
}
let cacheIndex = null
function appear(item, index) {
console.log(item.courseDetailsName + 'appear');
cacheIndex = index
}
function disappear(item, index) {
console.log('disappear');
if (index == nowIndex.value && cacheIndex != null) {
nowIndex.value = cacheIndex
console.log(nowIndex.value);
cacheIndex = null
}
}
//确认支付
function payConfirm() {
if (!isAgree.value) {
return infoBox.showToast('请阅读并同意 《付费须知说明》')
}
}
function payBtnClick() {
popupClose()
popupShow('payTips')
}
function jiClick(item, index) {
let newCurrent = (current.value + 1) % 3;
videoList.value[newCurrent] = item;
current.value = newCurrent;
popupClose('show')
// #ifdef APP
goListPosition(index)
// #endif
}
let refList = ref([])
function setRefList(index) {
refList.value[index] = null;
return (el) => {
if (el) {
refList.value[index] = el;
}
};
}
//滚动到指定位置
function goListPosition(index) {
console.log('index');
console.log(index);
const el = refList.value[index]
domModule.scrollToElement(el, {
animated: false
})
const item = props.list[index]
setVideoList(item)
insertHistory()
}
function popupClose(key) {
if (key) {
popup[key] = false
return
}
for (let i in popup) {
popup[i] = false
}
}
function popupShow(key = 'show') {
popup[key] = true
}
const props = defineProps({
list: {
type: Array,
@@ -62,42 +294,117 @@
[]
}
},
isCollect: {
type: Boolean,
default: false
info: {
tpye: Object,
default: () => {
return {
collect: 0,
current: {},
list: [],
price: 0,
title: ''
}
}
}
})
function posterError(){
}
function posterSuccess(){
}
const posterData=reactive({
posterShow:false
})
let videoList = ref(props.list.slice(0, 3))
watch(() => props.list.length, (newval) => {
init()
let jinbiBili = ref(0)
let wHeight = ref(0)
async function configInit() {
const res = await Api.getJinbiBili()
jinbiBili.value = res.value
const sysInfo = uni.getSystemInfoSync()
wHeight.value = sysInfo.screenHeight
}
let isCollect = ref(props.info.collect)
watch(() => props.collect, (newval) => {
isCollect.value = newval
})
function posterError() {
}
function posterSuccess() {
}
const posterData = reactive({
show: false,
// 用户姓名
name: '小明',
// 用户头像
logo: '/static/images/share.png',
// 商品名称
title: '精美时尚苹果手机一部',
// 商品价格
money: '5200.90',
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
img: '',
// 商品链接
url: 'https://www.apple.com.cn/iphone/'
})
let nowIndex = ref(0)
let current = ref(0)
let videoList = ref([])
function init() {
if (current.value === 0 && nowIndex.value == 0) {
videoList.value = [props.list[0], props.list[1], props.list[props.list.length - 1]]
} else {
videoList.value = props.list.slice(0, 3)
if (JSON.stringify(props.current) !== '{}') {
// #ifdef H5
setVideoList(props.info.current)
// #endif
// #ifdef APP
const index = props.list.findIndex(v => v.courseDetailsId == props.info.current.courseDetailsId)
console.log('index' + index);
goListPosition(index)
// #endif
}
}
const emits = defineEmits(['zhuijuClick'])
function zhuijuClick() {
emits(['zhuijuClick', 'swiperChange','share'])
const emits = defineEmits(['zhuijuClick', 'swiperChange', 'share', 'update'])
function zhuijuClick(item) {
isCollect.value = !isCollect.value
zhuiju({
courseId: item.courseId,
type: isCollect.value ? 1 : 0
})
emits('zhuijuClick')
}
const zhuiju = debounce((data) => {
Api.zhuiju(data)
}, 500)
let dianZanTimer = null
function dianzanClick(item, index) {
item.isGood = !item.isGood
const newval = item.goodNum + (item.isGood ? 1 : -1)
item.goodNum = newval < 0 ? 0 : newval
emits('update', {
index,
item
})
dianzan(item, index)
}
const dianzan = debounce((item, index) => {
Api.dianzan({
courseId: item.courseId,
courseDetailsId: item.courseDetailsId,
type: item.isGood ? 1 : 0
})
}, 500)
let showControls = ref(false)
@@ -105,7 +412,6 @@
showControls.value = true
}
let current = ref(0)
function controlstoggles() {
@@ -120,18 +426,37 @@
}
function share(item) {
emits('share',item)
const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
console.log(urls);
posterData.img = item.titleImg
posterData.show = true
}
let nowIndex = ref(0)
function posterHide() {
posterData.show = false
}
const insertHistory = debounce(() => {
const item = videoList.value[current.value]
Api.insertHistory({
courseId: item.courseId,
courseDetailsId: item.courseDetailsId
})
}, 1000)
function swiperChange(e) {
console.log(e);
const direction = e.detail.current > current.value ? 'down' : 'up'
console.log(e.detail.current);
current.value = e.detail.current
const item = videoList.value[e.detail.current]
insertHistory()
setVideoList(item)
}
function setVideoList(item) {
const listLen = props.list.length
const lastIndex = listLen - 1
const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
@@ -172,6 +497,9 @@
}
}
console.log(videoList.value);
if (!item.videoUrl) {
// popupShow('pay')
}
}
function transition(e) {
@@ -185,33 +513,81 @@
function waiting() {
}
configInit()
onMounted(() => {
nextTick(() => {
init()
})
})
watch(() => props.list.length, (newval) => {
// #ifdef H5
init()
// #endif
})
const nowDanjiPrice = computed(() => {
return videoList.value[current.value].price
})
function loadmore() {
console.log('loadmore');
}
const boxStyle = computed(() => {
return {
'height': wHeight.value + 'px',
'width': '750rpx',
}
})
</script>
<style lang="scss">
<style lang="scss" scoped>
.box {
/* #ifdef H5 */
flex: 1;
/* #endif */
}
.u-flex-1 {
flex: 1;
width: 100%;
height: 100%;
}
.u-popup {
position: fixed !important;
}
::v-deep .u-popup {
position: fixed !important;
}
.video {
width: 100%;
height: 100%;
}
.poster {
/* #ifdef H5 */
position: absolute;
width: 100%;
height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* #endif */
/* #ifdef APP */
width: 750rpx;
flex: 1;
/* #endif */
}
.u-text-center {
text-align: center;
}
.u-flex-row {
flex-direction: row !important;
}
.info {
width: 80%;
height: auto;
@@ -223,6 +599,17 @@
z-index: 9999;
}
.u-flex-y-center {
align-items: center !important;
}
.swipers-items {
width: 750rpx;
flex: 1;
position: relative;
background-color: #000;
}
.right {
width: 60rpx;
position: absolute !important;
@@ -246,4 +633,110 @@
.zhuiju {}
}
.poster-popup {
position: fixed !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
justify-content: center;
align-items: center;
}
.ji-list {
.ji-item {
width: 210rpx;
margin-bottom: 20rpx;
margin-right: 30rpx;
height: 88rpx;
font-size: 28rpx;
color: #333;
border-radius: 12rpx;
background-color: #F5F7FF;
position: relative;
&.active {
background-color: $my-main-color;
color: #fff;
}
&.mr-0 {
margin-right: 0;
}
.lock {
position: absolute;
border-radius: 0px 6px 0px 6px;
background-color: #ccc;
padding: 2rpx 4rpx;
top: 0;
right: 0;
}
.playing {
position: absolute;
width: 32rpx;
height: 24rpx;
bottom: 5px;
right: 7px;
}
}
}
.ji-item:nth-of-type(3n) {
margin-right: 0;
}
.hot {
width: 40rpx;
height: 40rpx;
}
.pay-list {
.pay-list-item {
flex-direction: row;
justify-content: center;
background-color: #F2F2F2;
padding: 24rpx;
border-radius: 20rpx;
margin-bottom: 40rpx;
}
}
.payConfirm {
border-radius: 100px;
height: 100rpx;
line-height: 100rpx;
text-align: center;
justify-content: center;
align-items: center;
}
.zhifubao {
width: 56rpx;
height: 56rpx;
}
.speed-list {
align-items: center;
background-color: #eeeeef;
padding: 5px 10px;
border-radius: 5px;
.speed-list-item {
border-radius: 3px;
width: 50px;
padding: 8px 0;
justify-content: center;
align-items: center;
text-align: center;
&.active {
background-color: #ffffff;
}
}
}
</style>

1206
components/tki-qrcode/qrcode.js Normal file
View File

File diff suppressed because it is too large Load Diff

205
components/tki-qrcode/tki-qrcode.vue Normal file
View File

@@ -0,0 +1,205 @@
<template xlang="wxml" minapp="mpvue">
<view class="tki-qrcode">
<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
<image v-if="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
</view>
</template>
<script>
import QRCode from "./qrcode.js"
let qrcode
export default {
name: "tki-qrcode",
props: {
cid: {
type: String,
default: 'tki-qrcode-canvas'
},
size: {
type: Number,
default: 200
},
unit: {
type: String,
default: 'upx'
},
show: {
type: Boolean,
default: true
},
val: {
type: String,
default: ''
},
background: {
type: String,
default: '#ffffff'
},
foreground: {
type: String,
default: '#000000'
},
pdground: {
type: String,
default: '#000000'
},
icon: {
type: String,
default: ''
},
iconSize: {
type: Number,
default: 40
},
lv: {
type: Number,
default: 3
},
onval: {
type: Boolean,
default: false
},
loadMake: {
type: Boolean,
default: false
},
usingComponents: {
type: Boolean,
default: true
},
showLoading: {
type: Boolean,
default: true
},
loadingText: {
type: String,
default: '二维码生成中'
},
},
data() {
return {
result: '',
}
},
methods: {
_makeCode() {
let that = this
if (!this._empty(this.val)) {
qrcode = new QRCode({
context: that, // 上下文环境
canvasId: that.cid, // canvas-id
usingComponents: that.usingComponents, // 是否是自定义组件
// loadingText: that.loadingText, // loading文字
text: that.val, // 生成内容
size: that.cpSize, // 二维码大小
background: that.background, // 背景色
foreground: that.foreground, // 前景色
pdground: that.pdground, // 定位角点颜色
correctLevel: that.lv, // 容错级别
image: that.icon, // 二维码图标
imageSize: that.iconSize, // 二维码图标大小
cbResult: function(res) { // 生成二维码的回调
that._result(res)
},
});
} else {
uni.showToast({
title: '二维码内容不能为空',
icon: 'none',
duration: 2000
});
}
},
_clearCode() {
this._result('')
qrcode.clear()
},
_saveCode() {
let that = this;
if (this.result != "") {
uni.saveImageToPhotosAlbum({
filePath: that.result,
success: function() {
// uni.showToast({
// title: '二维码保存成功',
// icon: 'success',
// duration: 2000
// });
}
});
}
},
_result(res) {
this.result = res;
this.$emit('result', res)
},
_empty(v) {
let tp = typeof v,
rt = false;
if (tp == "number" && String(v) == "") {
rt = true
} else if (tp == "undefined") {
rt = true
} else if (tp == "object") {
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
} else if (tp == "string") {
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
} else if (tp == "function") {
rt = false
}
return rt
}
},
watch: {
size: function(n, o) {
if (n != o && !this._empty(n)) {
this.cSize = n
if (!this._empty(this.val)) {
setTimeout(() => {
this._makeCode()
}, 100);
}
}
},
val: function(n, o) {
if (this.onval) {
if (n != o && !this._empty(n)) {
setTimeout(() => {
this._makeCode()
}, 0);
}
}
}
},
computed: {
cpSize() {
if (this.unit == "upx") {
return uni.upx2px(this.size)
} else {
return this.size
}
}
},
mounted: function() {
if (this.loadMake) {
if (!this._empty(this.val)) {
setTimeout(() => {
this._makeCode()
}, 0);
}
}
},
}
</script>
<style>
.tki-qrcode {
position: relative;
}
.tki-qrcode-canvas {
position: fixed;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
</style>