kola-web
2 months ago
23 changed files with 782 additions and 90 deletions
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 633 B |
|
After Width: | Height: | Size: 874 B |
|
After Width: | Height: | Size: 595 B |
|
After Width: | Height: | Size: 901 B |
@ -0,0 +1,254 @@ |
|||||||
|
module.exports = |
||||||
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
|
/******/ // The module cache
|
||||||
|
/******/ var installedModules = {}; |
||||||
|
/******/ |
||||||
|
/******/ // The require function
|
||||||
|
/******/ function __webpack_require__(moduleId) { |
||||||
|
/******/ |
||||||
|
/******/ // Check if module is in cache
|
||||||
|
/******/ if(installedModules[moduleId]) { |
||||||
|
/******/ return installedModules[moduleId].exports; |
||||||
|
/******/ } |
||||||
|
/******/ // Create a new module (and put it into the cache)
|
||||||
|
/******/ var module = installedModules[moduleId] = { |
||||||
|
/******/ i: moduleId, |
||||||
|
/******/ l: false, |
||||||
|
/******/ exports: {} |
||||||
|
/******/ }; |
||||||
|
/******/ |
||||||
|
/******/ // Execute the module function
|
||||||
|
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); |
||||||
|
/******/ |
||||||
|
/******/ // Flag the module as loaded
|
||||||
|
/******/ module.l = true; |
||||||
|
/******/ |
||||||
|
/******/ // Return the exports of the module
|
||||||
|
/******/ return module.exports; |
||||||
|
/******/ } |
||||||
|
/******/ |
||||||
|
/******/ |
||||||
|
/******/ // expose the modules object (__webpack_modules__)
|
||||||
|
/******/ __webpack_require__.m = modules; |
||||||
|
/******/ |
||||||
|
/******/ // expose the module cache
|
||||||
|
/******/ __webpack_require__.c = installedModules; |
||||||
|
/******/ |
||||||
|
/******/ // define getter function for harmony exports
|
||||||
|
/******/ __webpack_require__.d = function(exports, name, getter) { |
||||||
|
/******/ if(!__webpack_require__.o(exports, name)) { |
||||||
|
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); |
||||||
|
/******/ } |
||||||
|
/******/ }; |
||||||
|
/******/ |
||||||
|
/******/ // define __esModule on exports
|
||||||
|
/******/ __webpack_require__.r = function(exports) { |
||||||
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { |
||||||
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
||||||
|
/******/ } |
||||||
|
/******/ Object.defineProperty(exports, '__esModule', { value: true }); |
||||||
|
/******/ }; |
||||||
|
/******/ |
||||||
|
/******/ // create a fake namespace object
|
||||||
|
/******/ // mode & 1: value is a module id, require it
|
||||||
|
/******/ // mode & 2: merge all properties of value into the ns
|
||||||
|
/******/ // mode & 4: return value when already ns object
|
||||||
|
/******/ // mode & 8|1: behave like require
|
||||||
|
/******/ __webpack_require__.t = function(value, mode) { |
||||||
|
/******/ if(mode & 1) value = __webpack_require__(value); |
||||||
|
/******/ if(mode & 8) return value; |
||||||
|
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; |
||||||
|
/******/ var ns = Object.create(null); |
||||||
|
/******/ __webpack_require__.r(ns); |
||||||
|
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); |
||||||
|
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); |
||||||
|
/******/ return ns; |
||||||
|
/******/ }; |
||||||
|
/******/ |
||||||
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||||
|
/******/ __webpack_require__.n = function(module) { |
||||||
|
/******/ var getter = module && module.__esModule ? |
||||||
|
/******/ function getDefault() { return module['default']; } : |
||||||
|
/******/ function getModuleExports() { return module; }; |
||||||
|
/******/ __webpack_require__.d(getter, 'a', getter); |
||||||
|
/******/ return getter; |
||||||
|
/******/ }; |
||||||
|
/******/ |
||||||
|
/******/ // Object.prototype.hasOwnProperty.call
|
||||||
|
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; |
||||||
|
/******/ |
||||||
|
/******/ // __webpack_public_path__
|
||||||
|
/******/ __webpack_require__.p = ""; |
||||||
|
/******/ |
||||||
|
/******/ |
||||||
|
/******/ // Load entry module and return exports
|
||||||
|
/******/ return __webpack_require__(__webpack_require__.s = 0); |
||||||
|
/******/ }) |
||||||
|
/************************************************************************/ |
||||||
|
/******/ ([ |
||||||
|
/* 0 */ |
||||||
|
/***/ (function(module, exports, __webpack_require__) { |
||||||
|
|
||||||
|
"use strict"; |
||||||
|
|
||||||
|
|
||||||
|
Component({ |
||||||
|
options: { |
||||||
|
addGlobalClass: true, |
||||||
|
pureDataPattern: /^_/ |
||||||
|
}, |
||||||
|
properties: { |
||||||
|
duration: { |
||||||
|
type: Number, |
||||||
|
value: 500 |
||||||
|
}, |
||||||
|
easingFunction: { |
||||||
|
type: String, |
||||||
|
value: 'default' |
||||||
|
}, |
||||||
|
loop: { |
||||||
|
type: Boolean, |
||||||
|
value: true |
||||||
|
}, |
||||||
|
videoList: { |
||||||
|
type: Array, |
||||||
|
value: [], |
||||||
|
observer: function observer() { |
||||||
|
var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; |
||||||
|
|
||||||
|
this._videoListChanged(newVal); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data: { |
||||||
|
nextQueue: [], |
||||||
|
prevQueue: [], |
||||||
|
curQueue: [], |
||||||
|
circular: false, |
||||||
|
_last: 1, |
||||||
|
_change: -1, |
||||||
|
_invalidUp: 0, |
||||||
|
_invalidDown: 0, |
||||||
|
_videoContexts: [] |
||||||
|
}, |
||||||
|
lifetimes: { |
||||||
|
attached: function attached() { |
||||||
|
this.data._videoContexts = [wx.createVideoContext('video_0', this), wx.createVideoContext('video_1', this), wx.createVideoContext('video_2', this)]; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
_videoListChanged: function _videoListChanged(newVal) { |
||||||
|
var _this = this; |
||||||
|
|
||||||
|
var data = this.data; |
||||||
|
newVal.forEach(function (item) { |
||||||
|
data.nextQueue.push(item); |
||||||
|
}); |
||||||
|
if (data.curQueue.length === 0) { |
||||||
|
this.setData({ |
||||||
|
curQueue: data.nextQueue.splice(0, 3) |
||||||
|
}, function () { |
||||||
|
_this.playCurrent(1); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
animationfinish: function animationfinish(e) { |
||||||
|
var _data = this.data, |
||||||
|
_last = _data._last, |
||||||
|
_change = _data._change, |
||||||
|
curQueue = _data.curQueue, |
||||||
|
prevQueue = _data.prevQueue, |
||||||
|
nextQueue = _data.nextQueue; |
||||||
|
|
||||||
|
var current = e.detail.current; |
||||||
|
var diff = current - _last; |
||||||
|
if (diff === 0) return; |
||||||
|
this.data._last = current; |
||||||
|
this.playCurrent(current); |
||||||
|
this.triggerEvent('change', { activeId: curQueue[current].id }); |
||||||
|
var direction = diff === 1 || diff === -2 ? 'up' : 'down'; |
||||||
|
if (direction === 'up') { |
||||||
|
if (this.data._invalidDown === 0) { |
||||||
|
var change = (_change + 1) % 3; |
||||||
|
var add = nextQueue.shift(); |
||||||
|
var remove = curQueue[change]; |
||||||
|
if (add) { |
||||||
|
prevQueue.push(remove); |
||||||
|
curQueue[change] = add; |
||||||
|
this.data._change = change; |
||||||
|
} else { |
||||||
|
this.data._invalidUp += 1; |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.data._invalidDown -= 1; |
||||||
|
} |
||||||
|
} |
||||||
|
if (direction === 'down') { |
||||||
|
if (this.data._invalidUp === 0) { |
||||||
|
var _change2 = _change; |
||||||
|
var _remove = curQueue[_change2]; |
||||||
|
var _add = prevQueue.pop(); |
||||||
|
if (_add) { |
||||||
|
curQueue[_change2] = _add; |
||||||
|
nextQueue.unshift(_remove); |
||||||
|
this.data._change = (_change2 - 1 + 3) % 3; |
||||||
|
} else { |
||||||
|
this.data._invalidDown += 1; |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.data._invalidUp -= 1; |
||||||
|
} |
||||||
|
} |
||||||
|
var circular = true; |
||||||
|
if (nextQueue.length === 0 && current !== 0) { |
||||||
|
circular = false; |
||||||
|
} |
||||||
|
if (prevQueue.length === 0 && current !== 2) { |
||||||
|
circular = false; |
||||||
|
} |
||||||
|
this.setData({ |
||||||
|
curQueue: curQueue, |
||||||
|
circular: circular |
||||||
|
}); |
||||||
|
}, |
||||||
|
playCurrent: function playCurrent(current) { |
||||||
|
this.data._videoContexts.forEach(function (ctx, index) { |
||||||
|
index !== current ? ctx.pause() : ctx.play(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
onPlay: function onPlay(e) { |
||||||
|
this.trigger(e, 'play'); |
||||||
|
}, |
||||||
|
onPause: function onPause(e) { |
||||||
|
this.trigger(e, 'pause'); |
||||||
|
}, |
||||||
|
onEnded: function onEnded(e) { |
||||||
|
this.trigger(e, 'ended'); |
||||||
|
}, |
||||||
|
onError: function onError(e) { |
||||||
|
this.trigger(e, 'error'); |
||||||
|
}, |
||||||
|
onTimeUpdate: function onTimeUpdate(e) { |
||||||
|
this.trigger(e, 'timeupdate'); |
||||||
|
}, |
||||||
|
onWaiting: function onWaiting(e) { |
||||||
|
this.trigger(e, 'wait'); |
||||||
|
}, |
||||||
|
onProgress: function onProgress(e) { |
||||||
|
this.trigger(e, 'progress'); |
||||||
|
}, |
||||||
|
onLoadedMetaData: function onLoadedMetaData(e) { |
||||||
|
this.trigger(e, 'loadedmetadata'); |
||||||
|
}, |
||||||
|
trigger: function trigger(e, type) { |
||||||
|
var ext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; |
||||||
|
|
||||||
|
var detail = e.detail; |
||||||
|
var activeId = e.target.dataset.id; |
||||||
|
this.triggerEvent(type, Object.assign(Object.assign(Object.assign({}, detail), { activeId: activeId }), ext)); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
/***/ }) |
||||||
|
/******/ ]); |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"component": true, |
||||||
|
"usingComponents": {} |
||||||
|
} |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
<view class="container"> |
||||||
|
<swiper |
||||||
|
class="video-swiper" |
||||||
|
circular="{{circular}}" |
||||||
|
easing-function="{{easingFunction}}" |
||||||
|
vertical |
||||||
|
current="1" |
||||||
|
duration="{{duration}}" |
||||||
|
bindanimationfinish="animationfinish"> |
||||||
|
<!-- curQueue 循环会导致video重新插入，objectFit 不可变更 --> |
||||||
|
<swiper-item wx:for="{{curQueue}}" wx:key="*this"> |
||||||
|
<video |
||||||
|
id="video_{{index}}" |
||||||
|
class="video_item" |
||||||
|
loop="{{loop}}" |
||||||
|
enable-play-gesture |
||||||
|
enable-progress-gesture |
||||||
|
show-center-play-btn="{{false}}" |
||||||
|
controls="{{false}}" |
||||||
|
src="{{item.url}}" |
||||||
|
data-id="{{item.id}}" |
||||||
|
object-fit="{{item.objectFit || 'cover'}}" |
||||||
|
data-index="{{index}}" |
||||||
|
bindplay="onPlay" |
||||||
|
bindpause="onPause" |
||||||
|
bindended="onEnded" |
||||||
|
binderror="onError" |
||||||
|
bindtimeupdate="onTimeUpdate" |
||||||
|
bindwaiting="onWaiting" |
||||||
|
bindprogress="onProgress" |
||||||
|
bindloadedmetadata="onLoadedMetaData" |
||||||
|
> |
||||||
|
</video> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
</view> |
||||||
|
|
||||||
@ -0,0 +1 @@ |
|||||||
|
.container{width:100%;height:100%}.video-swiper{width:100%;height:100%}.video_item{height:100%;width:100%} |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"mp-video-swiper": "@miniprogram-component-plus/video-swiper", |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"van-slider": "@vant/weapp/slider/index", |
||||||
|
"star": "/components/star/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,109 @@ |
|||||||
|
.page { |
||||||
|
background-color: #000; |
||||||
|
.swiper { |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
.swiper-item { |
||||||
|
position: relative; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
.video { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.play { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
width: 90rpx; |
||||||
|
height: 104rpx; |
||||||
|
} |
||||||
|
.swiper-item-footer { |
||||||
|
padding: 80rpx 30rpx calc(34rpx + env(safe-area-inset-bottom)); |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
background: linear-gradient(to top, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0) 100%); |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.progress { |
||||||
|
margin-top: 24rpx; |
||||||
|
.slider-btn { |
||||||
|
width: 200vw; |
||||||
|
height: 80rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.container { |
||||||
|
margin-top: 24rpx; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.user { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.avatar { |
||||||
|
width: 76rpx; |
||||||
|
height: 76rpx; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.name { |
||||||
|
margin-left: 16rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.options { |
||||||
|
padding-right: 26rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 64rpx; |
||||||
|
.o-item { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
background: transparent; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
line-height: 1; |
||||||
|
&::after { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
} |
||||||
|
.num { |
||||||
|
margin-top: 6rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
&.active { |
||||||
|
color: rgba(246, 74, 58, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.animate { |
||||||
|
position: fixed; |
||||||
|
z-index: 10000000; |
||||||
|
right: 1000000px; |
||||||
|
bottom: calc(env(safe-area-inset-bottom) + 110rpx); |
||||||
|
width: 200rpx; |
||||||
|
height: 400rpx; |
||||||
|
&.active { |
||||||
|
right: -20rpx; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,194 @@ |
|||||||
|
import dayjs from 'dayjs' |
||||||
|
const licia = require('miniprogram-licia') |
||||||
|
const app = getApp<IAppOption>() |
||||||
|
// 组件说明文档 https://github.com/wechat-miniprogram/miniprogram-component-plus/blob/master/docs/video-swiper.md
|
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
id: '', |
||||||
|
activeId: '', |
||||||
|
LikeTimes: 0, |
||||||
|
|
||||||
|
current: 0, |
||||||
|
videoList: [] as any, |
||||||
|
|
||||||
|
beforeLoading: false, |
||||||
|
beforeEnd: false, |
||||||
|
afterLoading: false, |
||||||
|
afterEnd: false, |
||||||
|
|
||||||
|
starShow: false, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
id: options.id, |
||||||
|
activeId: options.id, |
||||||
|
}) |
||||||
|
app.waitLogin({ type: [0, 1] }).then(() => { |
||||||
|
this.getLightList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getLightList() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=zd/activity/get-high-light-list', |
||||||
|
data: { activityId: this.data.id }, |
||||||
|
}).then((res) => { |
||||||
|
res.map((item: any) => { |
||||||
|
item.duration = dayjs(item.duration * 1000).format('mm:ss') |
||||||
|
return item |
||||||
|
}) |
||||||
|
this.setData({ |
||||||
|
videoList: res, |
||||||
|
}) |
||||||
|
this.playCurrentVideo() |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleChange(e: any) { |
||||||
|
const { beforeLoading, afterLoading, beforeEnd, afterEnd, videoList } = this.data |
||||||
|
const { current } = e.detail |
||||||
|
this.setData({ |
||||||
|
current, |
||||||
|
starShow: false, |
||||||
|
}) |
||||||
|
if (current === 0 && !beforeLoading && beforeEnd) { |
||||||
|
this.setData({ |
||||||
|
beforeLoading: true, |
||||||
|
}) |
||||||
|
// this.getList('before')
|
||||||
|
} |
||||||
|
if (current === videoList.length - 1 && !afterLoading && afterEnd) { |
||||||
|
this.setData({ |
||||||
|
afterLoading: true, |
||||||
|
}) |
||||||
|
// this.getList('after')
|
||||||
|
} |
||||||
|
this.playCurrentVideo() |
||||||
|
}, |
||||||
|
playCurrentVideo() { |
||||||
|
const { current, videoList } = this.data |
||||||
|
videoList.forEach((item: any, index: number) => { |
||||||
|
if (!item.ctx) { |
||||||
|
item.ctx = wx.createVideoContext(`video-${item.attachmentId}`) |
||||||
|
} |
||||||
|
item.drag = false |
||||||
|
if (index === current) { |
||||||
|
item.ctx.play() |
||||||
|
} else { |
||||||
|
item.ctx.pause() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handlePlay(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const key = `videoList[${index}].play` |
||||||
|
this.setData({ |
||||||
|
[key]: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handlePause(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const key = `videoList[${index}].play` |
||||||
|
this.setData({ |
||||||
|
[key]: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleTimeUpdate(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
if (videoList[index].drag) return |
||||||
|
const { currentTime, duration } = e.detail |
||||||
|
const progress = (currentTime / duration) * 100 |
||||||
|
const progressKey = `videoList[${index}].progress` |
||||||
|
const durationKey = `videoList[${index}].duration` |
||||||
|
this.setData({ |
||||||
|
[progressKey]: progress, |
||||||
|
[durationKey]: duration, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleTogglePlay(e) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
if (videoList[index].play) { |
||||||
|
videoList[index].ctx.pause() |
||||||
|
} else { |
||||||
|
videoList[index].ctx.play() |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDragStart(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const key = `videoList[${index}].drag` |
||||||
|
this.setData({ |
||||||
|
[key]: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleDragEnd(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
const duration = videoList[index].duration |
||||||
|
const drapProgress = e.detail |
||||||
|
const currentTime = (drapProgress / 100) * duration |
||||||
|
videoList[index].ctx.seek(currentTime) |
||||||
|
const dragKey = `videoList[${index}].drag` |
||||||
|
this.setData({ |
||||||
|
[dragKey]: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
_timer: null as any, |
||||||
|
handleLike(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
const currentVideo = videoList[index] |
||||||
|
const LikeTimes = Number(currentVideo.LikeTimes) + 1 |
||||||
|
const key = `videoList[${index}].LikeTimes` |
||||||
|
this.setData({ |
||||||
|
LikeTimes: this.data.LikeTimes + 1, |
||||||
|
[key]: LikeTimes, |
||||||
|
[`videoList[${index}].IsLike`]: true, |
||||||
|
starShow: true, |
||||||
|
}) |
||||||
|
const header = this.selectComponent('#animate') |
||||||
|
header.start() |
||||||
|
if (this._timer) { |
||||||
|
clearInterval(this._timer) |
||||||
|
} |
||||||
|
this._timer = setTimeout(() => { |
||||||
|
this.setData({ |
||||||
|
starShow: false, |
||||||
|
}) |
||||||
|
}, 2000) |
||||||
|
this.likePost() |
||||||
|
}, |
||||||
|
likePost: licia.debounce(function (this: any) { |
||||||
|
const { activeId, LikeTimes } = this.data |
||||||
|
this.setData({ |
||||||
|
LikeTimes: 0, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/like', |
||||||
|
data: { |
||||||
|
Id: activeId, |
||||||
|
LikeTimes, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, 1000), |
||||||
|
onShareAppMessage() { |
||||||
|
const { current, videoList } = this.data |
||||||
|
const currentVideo = videoList[current] |
||||||
|
this.setData({ |
||||||
|
[`videoList[${current}].ShareTimes`]: Number(currentVideo.ShareTimes) + 1, |
||||||
|
[`videoList[${current}].IsShare`]: true, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/share', |
||||||
|
data: { Id: this.data.activeId }, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
<navbar fixed custom-style="background:{{background}};color:#fff"> |
||||||
|
<van-icon name="arrow-left" slot="left" size="18px" color="#fff" bind:tap="handleBack" /> |
||||||
|
<view slot="title" style="color: #fff">视频</view> |
||||||
|
</navbar> |
||||||
|
<view class="page"> |
||||||
|
<swiper class="swiper" vertical="{{true}}" current="{{current}}" bindchange="handleChange"> |
||||||
|
<swiper-item class="swiper-item" wx:for="{{videoList}}" wx:key="Id"> |
||||||
|
<video |
||||||
|
id="video-{{item.attachmentId}}" |
||||||
|
class="video" |
||||||
|
src="{{item.videoUrl}}" |
||||||
|
poster="{{item.imgUrl}}" |
||||||
|
loop |
||||||
|
object-fit="contain" |
||||||
|
enable-play-gesture |
||||||
|
enable-progress-gesture |
||||||
|
show-center-play-btn="{{false}}" |
||||||
|
play-btn-position="center" |
||||||
|
controls="{{false}}" |
||||||
|
bindprogress="handleProgress" |
||||||
|
bindplay="handlePlay" |
||||||
|
bindpause="handlePause" |
||||||
|
bindtimeupdate="handleTimeUpdate" |
||||||
|
data-index="{{index}}" |
||||||
|
bind:tap="handleTogglePlay" |
||||||
|
></video> |
||||||
|
<image |
||||||
|
wx:if="{{!item.play}}" |
||||||
|
class="play" |
||||||
|
class="play" |
||||||
|
src="{{imageUrl}}icon82.png?t={{Timestamp}}" |
||||||
|
catch:tap="handleTogglePlay" |
||||||
|
data-index="{{index}}" |
||||||
|
></image> |
||||||
|
<view class="swiper-item-footer"> |
||||||
|
<view class="title">{{item.Title}}</view> |
||||||
|
<view class="progress"> |
||||||
|
<van-slider |
||||||
|
value="{{item.progress}}" |
||||||
|
active-color="#fff" |
||||||
|
bar-height="4" |
||||||
|
inactive-color="rgba(255, 255, 255, 0.29)" |
||||||
|
bind:drag-start="handleDragStart" |
||||||
|
bind:change="handleDragEnd" |
||||||
|
use-button-slot |
||||||
|
data-index="{{index}}" |
||||||
|
> |
||||||
|
<view class="slider-btn" slot="button"></view> |
||||||
|
</van-slider> |
||||||
|
</view> |
||||||
|
<view class="container"> |
||||||
|
<view class="user"> |
||||||
|
<image class="avatar" src="{{imageUrl}}logo1.png?t={{Timestamp}}"></image> |
||||||
|
<view class="name">基因知识库</view> |
||||||
|
</view> |
||||||
|
<view class="options"> |
||||||
|
<button class="o-item" open-type="share"> |
||||||
|
<image wx:if="{{item.IsShare}}" class="icon" src="{{imageUrl}}icon83.png?t={{Timestamp}}"></image> |
||||||
|
<image wx:else class="icon" src="{{imageUrl}}icon85.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num {{item.IsShare && 'active'}}">{{item.ShareTimes}}</view> |
||||||
|
</button> |
||||||
|
<view class="o-item" bind:tap="handleLike" data-index="{{index}}"> |
||||||
|
<image wx:if="{{item.IsLike}}" class="icon" src="{{imageUrl}}icon84.png?t={{Timestamp}}"></image> |
||||||
|
<image wx:else class="icon" src="{{imageUrl}}icon86.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num {{item.IsLike && 'active'}}">{{item.LikeTimes}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
</view> |
||||||
|
|
||||||
|
<star id="animate" class="animate {{starShow&&'active'}}"></star> |
||||||
Loading…
Reference in new issue