Skip to content

U
uniapp_vedio
Commit d2ea13e0 authored by jyx's avatar jyx
Browse files
Options

添加删除功能

parent ff20d6cd
Hide whitespace changes
Inline Side-by-side
Showing with 297 additions and 308 deletions
vedio/components/icons2/iconfont2.scss 0 → 100644
View file @ d2ea13e0
@font-face {
font-family: "iconfont"; /* Project id 3284269 */
src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fenxiang:before {
content: "\e600";
}
.icon-31guanbi:before {
content: "\e601";
}
.icon-bianji1:before {
content: "\e602";
}
vedio/components/icons2/icons2.vue 0 → 100644
View file @ d2ea13e0
<template>
<text :class="'iconfont icon-' + icon" :style="'color:' + color + ';font-size:' + size + 'rpx;' + customStyle" @click="handleClick"></text>
</template>
<script>
export default {
name: 'icons',
props: {
icon: {
type: String,
default: ''
},
customStyle: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 28
},
color: {
type: String,
default: '#000000'
}
},
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
<style lang="scss">
@import './iconfont2.scss';
</style>
vedio/components/status-title2/status-title2.vue 0 → 100644
View file @ d2ea13e0
<template>
<!-- #ifndef H5 -->
<view class="status-title" :style="
'height:' +
titleBarHeight +
'px;line-height:' +
titleBarHeight +
'px;padding-top:' +
statusBarHeight +
'px;padding-right:' +
titleButtonWidth +
'px;background-color:' +
color + ';color:' +
fontColor
">
<view class="status-title-back" :style="'padding-left:' + titlePadding + 'px;'">
<icons2 v-if="showBack" :icon="iconClone" :color="iconColor"
:customStyle="'padding:' + titlePadding + 'px;'" @click="back" size="40" />
</view>
<view class="status-title-back2" :style="'padding-left:' + titlePadding + 'px;'">
<icons2 v-if="showEdit" :icon="iconEdit" :color="iconColor" :customStyle="'padding:' + titlePadding + 'px;'"
@click="isEdit = !isEdit" size="40" />
</view>
<view class="status-title-title">
<slot></slot>
</view>
</view>
<!-- #endif -->
</template>
<script>
import {
navigateBack,
reLaunch
} from '@/utils/fun';
const app = getApp();
export default {
name: 'status-title',
data() {
return {
titleBarHeight: app.globalData.titleBarHeight,
titlePadding: app.globalData.titlePadding,
titleButtonWidth: app.globalData.titleButtonWidth,
statusBarHeight: app.globalData.statusBarHeight,
iconClone: '',
iconEdit: '',
// isEdit: false
};
},
props: {
isEdit: {
type: Boolean,
default: false
},
handleBack: {
type: Boolean,
default: false
},
showBack: {
type: Boolean,
default: true
},
showEdit: {
type: Boolean,
default: false
},
color: {
type: String,
default: 'transparent'
},
fontColor: {
type: String,
default: 'black'
},
icon: {
type: String,
default: 'black'
},
iconColor: {
type: String,
default: 'black'
}
},
beforeMount() {
// #ifdef H5
document.title = this.$slots.default && this.$slots.default[0].text;
// #endif
// #ifndef H5
this.iconClone = getCurrentPages().length === 1 ? 'fenxiang' : 'fenxiang';
this.iconEdit = 'bianji1'
// #endif
},
methods: {
back() {
if (this.handleBack) {
this.$emit('onBack');
return
}
// #ifdef APP-PLUS
this.iconClone = getCurrentPages().length === 1 ? 'fenxiang' : 'fenxiang';
// #endif
if (this.iconClone === 'fenxiang') {
navigateBack();
} else {
reLaunch('index');
}
}
},
watch: {
icon: {
handler(newVal, oldVal) {
this.iconClone = newVal;
},
immediate: true
},
isEdit: {
handler(newVal, oldVal) {
this.$emit('update:isEdit', newVal);
if (newVal) {
this.iconEdit = "31guanbi"
} else {
this.iconEdit = "bianji1"
}
},
immediate: true
}
}
};
</script>
<style lang="scss">
.status-title {
position: relative;
z-index: 100;
display: flex;
// color: #ffffff;
color: black;
align-items: center;
overflow: hidden;
&-back {
box-sizing: border-box;
text-align: left;
}
&-back2 {
box-sizing: border-box;
text-align: left;
}
&-title {
flex: 1;
text-align: center;
font-size: 36rpx;
}
}
</style>
\ No newline at end of file
vedio/components/uni-transition/uni-transition.vue deleted 100644 → 0
View file @ ff20d6cd
<!-- 底部弹窗需要组件（分享） -->
<template>
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
@click="change">
<slot></slot>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: Array,
default () {
return []
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
isShow: false,
transform: '',
ani: { in: '',
active: ''
}
};
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
this.close()
}
},
immediate: true
}
},
computed: {
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transfrom = ''
for (let i in styles) {
let line = this.toLine(i)
transfrom += line + ':' + styles[i] + ';'
}
return transfrom
}
},
created() {
// this.timer = null
// this.nextTick = (time = 50) => new Promise(resolve => {
// clearTimeout(this.timer)
// this.timer = setTimeout(resolve, time)
// return this.timer
// });
},
methods: {
change() {
this.$emit('click', {
detail: this.isShow
})
},
open() {
clearTimeout(this.timer)
this.isShow = true
this.transform = ''
this.ani.in = ''
for (let i in this.getTranfrom(false)) {
if (i === 'opacity') {
this.ani.in = 'fade-in'
} else {
this.transform += `${this.getTranfrom(false)[i]} `
}
}
this.$nextTick(() => {
setTimeout(() => {
this._animation(true)
}, 50)
})
},
close(type) {
clearTimeout(this.timer)
this._animation(false)
},
_animation(type) {
let styles = this.getTranfrom(type)
// #ifdef APP-NVUE
if(!this.$refs['ani']) return
animation.transition(this.$refs['ani'].ref, {
styles,
duration: this.duration, //ms
timingFunction: 'ease',
needLayout: false,
delay: 0 //ms
}, () => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
})
// #endif
// #ifndef APP-NVUE
this.transform = ''
for (let i in styles) {
if (i === 'opacity') {
this.ani.in = `fade-${type?'out':'in'}`
} else {
this.transform += `${styles[i]} `
}
}
this.timer = setTimeout(() => {
if (!type) {
this.isShow = false
}
this.$emit('change', {
detail: this.isShow
})
}, this.duration)
// #endif
},
getTranfrom(type) {
let styles = {
transform: ''
}
this.modeClass.forEach((mode) => {
switch (mode) {
case 'fade':
styles.opacity = type ? 1 : 0
break;
case 'slide-top':
styles.transform += `translateY(${type?'0':'-100%'}) `
break;
case 'slide-right':
styles.transform += `translateX(${type?'0':'100%'}) `
break;
case 'slide-bottom':
styles.transform += `translateY(${type?'0':'100%'}) `
break;
case 'slide-left':
styles.transform += `translateX(${type?'0':'-100%'}) `
break;
case 'zoom-in':
styles.transform += `scale(${type?1:0.8}) `
break;
case 'zoom-out':
styles.transform += `scale(${type?1:1.2}) `
break;
}
})
return styles
},
_modeClassArr(type) {
let mode = this.modeClass
if (typeof(mode) !== "string") {
let modestr = ''
mode.forEach((item) => {
modestr += (item + '-' + type + ',')
})
return modestr.substr(0, modestr.length - 1)
} else {
return mode + '-' + type
}
},
// getEl(el) {
// console.log(el || el.ref || null);
// return el || el.ref || null
// },
toLine(name) {
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
}
}
}
</script>
<style>
.uni-transition {
transition-timing-function: ease;
transition-duration: 0.3s;
transition-property: transform, opacity;
}
.fade-in {
opacity: 0;
}
.fade-active {
opacity: 1;
}
.slide-top-in {
/* transition-property: transform, opacity; */
transform: translateY(-100%);
}
.slide-top-active {
transform: translateY(0);
/* opacity: 1; */
}
.slide-right-in {
transform: translateX(100%);
}
.slide-right-active {
transform: translateX(0);
}
.slide-bottom-in {
transform: translateY(100%);
}
.slide-bottom-active {
transform: translateY(0);
}
.slide-left-in {
transform: translateX(-100%);
}
.slide-left-active {
transform: translateX(0);
opacity: 1;
}
.zoom-in-in {
transform: scale(0.8);
}
.zoom-out-active {
transform: scale(1);
}
.zoom-out-in {
transform: scale(1.2);
}
</style>
vedio/mixins/common.js
View file @ d2ea13e0
......@@ -143,7 +143,7 @@ export default {
Object.assign(header, {
// token: uni.getStorageSync('token'),
token: 'EF05F562126806736038B218E12884F9483D433C42E9B84882577C78642C25CF5F433703067DF5142735505C42F58997',
token: 'A4A51158A9011FE1B2B0D8E35D657258483D433C42E9B84882577C78642C25CF5F433703067DF5142735505C42F58997',
pkgName: app.globalData.pkgName,
proChannel:uniChannel
})
......
vedio/pages/index/index.vue
View file @ d2ea13e0
......@@ -248,9 +248,15 @@
topList: [],
statusBarHeight: app.globalData.statusBarHeight,
};
},
onShow() {
this.show()
},
onHide() {
this.hide()
},
methods: {
onShow() {
show() {
// 匹配视频
this.showFirstDialog();
// 轮播图
......
vedio/pages/my/my.vue
View file @ d2ea13e0
......@@ -70,10 +70,10 @@
<view v-if="userBean.showVipInner && os === 'android' " class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleVedio">
我的追剧
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleVedio">
我的追剧
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view v-if="os === 'android' " class="item arrow" @click="handleDotRecord">
看点记录
......@@ -138,8 +138,14 @@
curl: '', // 客服链接
};
},
onShow() {
this.show()
},
onHide() {
this.hide()
},
methods: {
onShow() {
show() {
// this.os = wx.getSystemInfoSync().platform;
this.windowHeight = uni.getSystemInfoSync().windowHeight
// loadData() {
......@@ -155,9 +161,9 @@
},
hide() {
},
handleVedio(){
navigateTo(`/pages/recommend/follow`)
},
handleVedio() {
navigateTo(`/pages/recommend/follow`)
},
handleDotRecord() {
// 看点记录
......
vedio/pages/recommend/follow.vue
View file @ d2ea13e0
<template>
<view style="background-color: white;">
<status-title :showBack="true">我的追剧</status-title>
<scroll-view scroll-y="true"
:style="'height: '+(windowHeight -80)+'px;'">
<view class="flex space" style="display:flex; flex-wrap:wrap;height: 100%;width: 100%;background-color: white;">
<status-title2 :isEdit.sync="isEditStyle" :showEdit="true" :showBack="true">我的追剧</status-title2>
<scroll-view scroll-y="true" :style="'height: '+(windowHeight -80)+'px;padding-bottom:110rpx;'">
<view class="flex space"
style="display:flex; flex-wrap:wrap;height: 100%;width: 100%;background-color: white;">
<block v-for="(value,key) in dataList" :key="key">
<view class="mt-10"
style="width:31%; position: relative; border-radius:20rpx;margin-bottom: 10rpx;margin-left: 14rpx;"
......@@ -27,11 +27,20 @@
</view>
</scroll-view>
<!-- <view v-if="dataList.length<=0"
<view v-if="dataList.length<=0"
style="position: absolute;left: 50%;width: 240rpx;margin-left: -120rpx;top: 600rpx;text-align: center;">
<text style="color: gray;">暂无在追剧</text>
<view @click="goRecommend" class="button" style="margin-top: 20rpx;color: white;">去剧场</view>
</view> -->
<!-- <view @click="goRecommend" class="button" style="margin-top: 20rpx;color: white;">去剧场</view> -->
</view>
<view v-if="isEditStyle" class="editBar" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
{{!isFullChoice?'全选':'全不选'}}
</view>
<view class="editItem" @click="deleteCollect">
删除
</view>
</view>
</view>
</template>
......@@ -53,14 +62,13 @@
statusBarHeight: app.globalData.statusBarHeight,
windowHeight: 0,
dataList: [],
isEditStyle: false
isEditStyle: false,
isFullChoice: false,
}
},
watch: {
isEditStyle: {
handler(newValue, oldValue) {
this.$emit("showEditBarR", newValue)
}
handler(newValue, oldValue) {}
},
},
onLoad(e) {},
......@@ -111,12 +119,14 @@
this.$set(this.dataList, key, newData)
},
fullChoice() {
this.isFullChoice = !this.isFullChoice
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = true
}
this.$forceUpdate()
},
noChoice() {
this.isFullChoice = !this.isFullChoice
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = false
}
......@@ -171,4 +181,20 @@
margin-left: 10rpx;
// position: absolute;
}
.editBar {
position: absolute;
bottom: 0;
width: 100%;
height: 110rpx;
background: white;
display: flex;
.editItem {
height: 110rpx;
line-height: 110rpx;
text-align: center;
width: 50%;
}
}
</style>
\ No newline at end of file
vedio/pages/recommend/recommendVideo.vue
View file @ d2ea13e0
<template>
<view class="body">
<swiper style="height: 100%;width: 100%;" class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
<swiper style="height: 100%;width: 100%;" class="swiper" circular @change="swiperChange" :current="current"
:vertical="true" duration="300">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index" style="height: 100%;width: 100%;">
<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;width: 100%;">
<video style="height: 100%;width: 100%;" v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
:autoplay="true" :isplay="true" play-btn-position="center" :loop="!isplay" @ended="ended"
@controlstoggle="controlstoggle" :show-fullscreen-btn="false" :poster="list.coverImage"
:show-loading="true" @click="tapVideoHover()" :enable-progress-gesture="false" class="tsvideo"
<video style="height: 100%;width: 100%;" v-if="Math.abs(displayIndex-index)==0"
:id="''+list.vedioId" :controls="controls" :autoplay="true" :isplay="true"
play-btn-position="center" :loop="!isplay" @ended="ended" @controlstoggle="controlstoggle"
:show-fullscreen-btn="false" :poster="list.coverImage" :show-loading="true"
@click="tapVideoHover()" :enable-progress-gesture="false" class="tsvideo"
:src="list.recommendUrl" object-fit="cover" />
</view>
<view v-if="!isqp" class="userInfo flex">
......@@ -84,6 +86,12 @@
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight
},
onShow() {
this.show()
},
onHide() {
this.stop()
},
methods: {
reShare() {
var href = ''
......@@ -118,7 +126,7 @@
})
// #endif
},
onShow() {
show() {
if (this.isFirstLoad) {
this.isFirstLoad = false
this.queryList()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment