Commit a599d577 authored by jyx's avatar jyx

代码优化

parent b0e411d0
......@@ -125,7 +125,7 @@
&.active {
.tabs-title {
color: red;
color: black;
font-weight: bold;
font-size: 40rpx;
// background-color: aqua;
......
<!-- 底部弹窗(分享) -->
<template>
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
<view class="uni-popup__wrapper-box" @click.stop="clear">
<slot />
</view>
</uni-transition>
</view>
</template>
<script>
import uniTransition from '@/components/uni-transition/uni-transition.vue'
/**
* PopUp 弹出层
* @description 弹出层组件,为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @property {Boolean} animation = [ture|false] 是否开启动画
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
* @event {Function} change 打开关闭弹窗触发,e={show: false}
*/
export default {
name: 'UniPopup',
components: {
uniTransition
},
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
type: {
type: String,
default: 'center'
},
// maskClick
maskClick: {
type: Boolean,
default: true
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
maskClass: {
'position': 'fixed',
'bottom': 0,
'top': 0,
'left': 0,
'right': 0,
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
},
transClass: {
'position': 'fixed',
'left': 0,
'right': 0,
}
}
},
watch: {
type: {
handler: function(newVal) {
switch (this.type) {
case 'top':
this.ani = ['slide-top']
this.transClass = {
'position': 'fixed',
'left': 0,
'right': 0,
}
break
case 'bottom':
this.ani = ['slide-bottom']
this.transClass = {
'position': 'fixed',
'left': 0,
'right': 0,
'bottom': 0
}
break
case 'center':
this.ani = ['zoom-out', 'fade']
this.transClass = {
'position': 'fixed',
/* #ifndef APP-NVUE */
'display': 'flex',
'flexDirection': 'column',
/* #endif */
'bottom': 0,
'left': 0,
'right': 0,
'top': 0,
'justifyContent': 'center',
'alignItems': 'center'
}
break
}
},
immediate: true
}
},
created() {
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
},
methods: {
clear(e) {
// TODO nvue 取消冒泡
e.stopPropagation()
},
open() {
this.showPopup = true
this.$nextTick(() => {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.showTrans = true
}, 50);
})
this.$emit('change', {
show: true
})
},
close(type) {
this.showTrans = false
this.$nextTick(() => {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.$emit('change', {
show: false
})
this.showPopup = false
}, 300)
})
},
onTap() {
if (!this.maskClick) return
this.close()
}
}
}
</script>
<style lang="scss" scoped>
.uni-popup {
position: fixed;
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
bottom: 0;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
z-index: 99999999999;
/* #endif */
}
.uni-popup__mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: $uni-bg-color-mask;
opacity: 0;
}
.mask-ani {
transition-property: opacity;
transition-duration: 0.2s;
}
.uni-top-mask {
opacity: 1;
}
.uni-bottom-mask {
opacity: 1;
}
.uni-center-mask {
opacity: 1;
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
}
.top {
top: 0;
left: 0;
right: 0;
transform: translateY(-500px);
}
.bottom {
bottom: 0;
left: 0;
right: 0;
transform: translateY(500px);
}
.center {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
/* #endif */
bottom: 0;
left: 0;
right: 0;
top: 0;
justify-content: center;
align-items: center;
transform: scale(1.2);
opacity: 0;
}
.uni-popup__wrapper-box {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
}
.content-ani {
// transition: transform 0.3s;
transition-property: transform, opacity;
transition-duration: 0.2s;
}
.uni-top-content {
transform: translateY(0);
}
.uni-bottom-content {
transform: translateY(0);
}
.uni-center-content {
transform: scale(1);
opacity: 1;
}
</style>
<!-- 底部弹窗需要组件(分享) -->
<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>
......@@ -32,7 +32,7 @@
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
},
},
{
"path": "pages/my/my",
"style": {
......@@ -48,7 +48,21 @@
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/spread/spread",
"path": "pages/recommend/recommend",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/recommend/follow",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/recommend/recommendVideo",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
......@@ -70,20 +84,12 @@
}, {
"root": "pagesC",
"pages": [{
"path": "sign/sign",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}, {
"path": "spreadDetail/spreadDetail",
"path": "video/videoDetail",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black"
}
}]
}, {
"root": "pagesD",
......@@ -128,4 +134,4 @@
"scrollIndicator": "none"
}
}
}
}
\ No newline at end of file
......@@ -2,7 +2,7 @@
<view class="body">
<view style="height: 100%;">
<indexPage v-show="currentPage==0" ref="index" />
<spreadPage v-show="currentPage==1" ref="spread" />
<recommendPage v-on:showEditBarH="showEditBarH" v-show="currentPage==1" ref="recommend" />
<userPage v-show="currentPage==2" ref="user" />
</view>
<view class="tabs-bar">
......@@ -16,8 +16,8 @@
</view>
剧场
</view>
<view :class="currentPage == 1?'tab active': 'tab'"
:style="'padding-bottom:' + bottomSafePadding + 'px;'" @click="tabChange(1)">
<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(1)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
mode="heightFix"></image>
......@@ -35,9 +35,16 @@
我的
</view>
</view>
<view v-if="showEditBar" class="editBar">
<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()"
:style="'padding-bottom:' + bottomSafePadding + 'px;'">
{{!isFullChoice?'全选':'全不选'}}
</view>
<view class="editItem" @click="deleteCollect" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
删除
</view>
</view>
</view>
</template>
<script>
......@@ -50,7 +57,7 @@
// 首页
import indexPage from "@/pages/index/index.vue";
import spreadPage from "@/pages/spread/spread.vue";
import recommendPage from "@/pages/recommend/recommend.vue";
import userPage from "@/pages/my/my.vue";
export default {
......@@ -58,18 +65,20 @@
mixins: [common],
components: {
indexPage,
spreadPage,
recommendPage,
userPage
},
data() {
return {
isFirstLoad: true,
currentPage: 0
currentPage: 0,
showEditBar: false,
isFullChoice: false
}
},
onLoad(options) {
let index = options.index ?? ''
if (index != '' && index != undefined && this.buyerShowEnable == '1') {
if (index != '' && index != undefined) {
this.currentPage = index
}
},
......@@ -84,7 +93,7 @@
if (this.currentPage == 0) {
this.$refs.index.show();
} else if (this.currentPage == 1) {
this.$refs.spread.show();
this.$refs.recommend.show();
} else if (this.currentPage == 2) {
this.$refs.user.show();
}
......@@ -109,15 +118,14 @@
loadComponentData() {
if (this.currentPage == 0) {
this.$refs.index.show();
this.$refs.recommend.hide();
} else if (this.currentPage == 1) {
this.$refs.spread.show();
this.$refs.recommend.show();
} else if (this.currentPage == 2) {
this.$refs.user.show();
this.$refs.recommend.hide();
}
},
confirm(val) {
this.showCoupon = false
},
wxLogin() {
let that = this
uni.login({
......@@ -139,34 +147,29 @@
key: 'token',
data: data.session
});
// 0 展示商品 1 展示换脸
uni.setStorage({
key: 'fromType',
data: '' + data.fromType
});
//买家秀开关,1开,其它关
uni.setStorage({
key: 'buyerShowEnable',
data: data.buyerShowEnable
});
//推广开关,1开,其它关
uni.setStorage({
key: 'promotionEnable',
data: data.promotionEnable
});
app.globalData.token = data.session;
app.globalData.userId = data.userId;
app.globalData.userInfo = data;
that.fromType = data.fromType
that.buyerShowEnable = data.buyerShowEnable
that.promotionEnable = data.promotionEnable
}
});
}
});
},
showEditBarH(b) {
this.showEditBar = b
this.isFullChoice = false
},
fullChoice() {
this.isFullChoice = !this.isFullChoice
this.$refs.recommend.fullChoice();
},
noChoice() {
this.isFullChoice = !this.isFullChoice
this.$refs.recommend.noChoice();
},
deleteCollect() {
this.$refs.recommend.deleteCollect();
}
}
}
......@@ -176,4 +179,20 @@
.body {
height: 100%;
}
</style>
.editBar {
position: absolute;
bottom: 0;
width: 100%;
height: 120rpx;
background: white;
display: flex;
.editItem {
height: 120rpx;
line-height: 120rpx;
text-align: center;
width: 50%;
}
}
</style>
\ No newline at end of file
<template>
<view style="background: white;">
<view style="position: absolute;right: 20rpx;top: 26rpx;" @click="isEditStyle = !isEditStyle">
<image style="width: 60rpx;height: 60rpx;" mode="widthFix"
:src="isEditStyle?'/static/video/scRed.png':'/static/video/aixinRed.png'" />
</view>
<scroll-view scroll-y="true" :style="'height: '+(windowHeight -120)+'px;margin-top:50px;'">
<view class="flex space" style="display:flex; flex-wrap:wrap;">
<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;"
@click="click(value.id,key)" @longpress="longClick(key)">
<image class="integral-mall-goods" mode="aspectFill" :src="value.img"></image>
<view class="text" style="font-size: 26rpx;color: black;">{{value.name}}</view>
<view class="text" style="font-size: 22rpx;color: gray;">{{value.name}}</view>
<view v-if="isEditStyle" @click="cbClick(key)"
style="position: absolute;background: #000000; opacity: 0.6;;width: 100%;height: 100%;top: 0;border-radius:20rpx;">
<u-checkbox-group class="cb" @change="onChange(key)">
<u-checkbox active-color="red" shape="circle" :checked="value.isChecked" />
</u-checkbox-group>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
navigateTo,
} from '@/utils/fun.js';
export default {
name: "follow",
mixins: [common],
data() {
return {
windowHeight: 0,
dataList: [],
isEditStyle: false
}
},
watch: {
isEditStyle: {
handler(newValue, oldValue) {
this.$emit("showEditBarR", newValue)
}
},
},
onLoad(e) {},
methods: {
show() {
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.queryList()
},
queryList() {
let this_ = this
let data = {};
uni.request({
url: 'https://xjc.demo.hongcd.com/api/video/indexdata',
data: data,
success: data => {
let _data = data.data.new
for (let i = 0; i < _data.length; i++) {
_data[i].isChecked = false
}
this.dataList = _data
},
fail: (data, code) => {}
});
},
click(id, key) {
// this.isEditStyle = true
// this.dataList[key].isChecked = true
},
longClick(key) {
this.isEditStyle = true
this.dataList[key].isChecked = true
},
onChange(key) {
this.dataList[key].isChecked = !this.dataList[key].isChecked
},
cbClick(key) {
this.dataList[key].isChecked = !this.dataList[key].isChecked
},
fullChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = true
}
},
noChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = false
}
},
deleteCollect() {
console.log("deleteCollect")
},
}
}
</script>
<style lang="scss" scoped>
.integral-mall-goods {
width: 100%;
height: 320rpx;
background: #F2F2F2;
border-radius: 16upx;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cb {
left: 10rpx;
top: 10rpx;
position: absolute;
}
</style>
\ No newline at end of file
<template>
<view class="body">
<view class="tabContainer">
<tabs-center class="center" :tabs="tabs" v-model="current" @change="handleChange" />
</view>
<view v-if="showEditBar"
style="position: absolute;top:0;left:50%;width: 300rpx;margin-left:-150rpx;background: white;z-index: 999;">
<view style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">追剧
</view>
</view>
<swiper class="swiper" @change="swiperChange" :current="current">
<swiper-item class="swiper-item">
<followPage v-on:showEditBarR="showEditBarR" ref="follow" />
</swiper-item>
<swiper-item class="swiper-item">
<recommendVideoPage ref="recommendVideo" />
</swiper-item>
</swiper>
</view>
</template>
<script>
import common from '@/mixins/common';
import followPage from "@/pages/recommend/follow.vue"
import recommendVideoPage from "@/pages/recommend/recommendVideo.vue";
import {
navigateTo,
} from '@/utils/fun.js';
export default {
name: "recommend",
mixins: [common],
components: {
followPage,
recommendVideoPage
},
data() {
return {
current: 0,
tabIndex: 0,
tabs: [{
title: '追剧',
value: 0
}, {
title: '推荐',
value: 1
}],
showEditBar: false,
}
},
onLoad(e) {
},
methods: {
hide() {
this.$refs.recommendVideo.stop();
},
show() {
if (this.current == 0) {
this.$refs.follow.show();
this.$refs.recommendVideo.stop();
} else if (this.current == 1) {
this.$refs.recommendVideo.show();
}
},
handleChange(event) {
this.current = event.value;
this.show()
},
swiperChange(event) {
this.current = event.detail.current
this.show()
},
showEditBarR(b) {
this.showEditBar = b
this.$emit("showEditBarH", b);
},
fullChoice() {
this.$refs.follow.fullChoice()
},
noChoice() {
this.$refs.follow.noChoice()
},
deleteCollect() {
this.$refs.follow.deleteCollect()
}
}
}
</script>
<style lang="scss" scoped>
.body {
background: white;
width: 100%;
height: 100%;
}
.tabContainer {
position: absolute;
margin-top: 30rpx;
width: 400rpx;
left: 50%;
margin-left: -200rpx;
.v-tabs {
height: 70rpx;
}
}
.swiper {
height: 100%;
}
</style>
\ No newline at end of file
<template>
<view class="body">
<!-- <status-title :showBack="false">推荐</status-title> -->
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
<view v-if="Math.abs(displayIndex-index)!=0" style="z-index: 999;height: 100%;">
<video v-if="Math.abs(displayIndex-index)!=0" :id="list._id" :controls="controls" :autoplay="false"
:loop="false" @ended="ended" @controlstoggle="controlstoggle" @click="tapVideoHover()"
:style="'width:100%; height:100%;'" :src="list.src">
</video>
</view>
<!-- :poster="list.img" -->
<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;">
<video v-if="Math.abs(displayIndex-index)==0" :id="list._id" :controls="controls" :isplay="true"
:loop="!isplay" @ended="ended" @controlstoggle="controlstoggle" @click="tapVideoHover()"
:enable-progress-gesture="false" :style="'width:100%; height:100%;'" :src="list.src">
</video>
</view>
></image> -->
<view v-if="isqp" class="userInfo flex">
<!-- 点赞 -->
<view class="flex" @click.stop="cLike(list.like,list.id,list.mid);"
style="opacity: 0.9; margin-top: 10rpx;">
<image v-if="list.like*1==1" src="@/static/video/aixin.png"
style="width: 80rpx; height: 80rpx; position: absolute;right: 10rpx;"></image>
<image v-if="list.like*1==2" src="@/static/video/aixinRed.png"
style="width: 80rpx; height: 80rpx; position: absolute;right: 10rpx;"></image>
<text
style="margin-top: 100rpx;color: #FFFFFF;font-size: 30rpx; text-align: center;font-weight: bold;"
:class="{'likeNumActive':list.like}">{{list.like_n}}</text>
</view>
<!-- 分享 -->
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image src="@/static/video/share-fill.png"
style="width: 80rpx; height: 80rpx; position: absolute;right: 10rpx;"></image>
<text
style="margin-top: 100rpx; color: #FFFFFF;font-size: 30rpx; text-align: center; font-weight: bold;">分享</text>
<button open-type="share"
style="position: absolute;;background: none; width: 80rpx; height: 80rpx; right: 10rpx;"
@click.stop="reShare"></button>
</view>
</view>
<!-- 最底下的文字部分 -->
<view v-if="isqp" class="contentcd flex">
<text class="userName"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
<text class="wordss"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}</text><!-- k={{k}} -->
<text class="words" @click.stop="detail(list.id,0)"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.namets}}</text><!-- k={{k}} -->
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
navigateTo,
} from '@/utils/fun.js';
let audo = uni.createInnerAudioContext()
export default {
name: "recommendVideo",
mixins: [common],
data() {
return {
controls: true, // 控制按钮
originList: [], // 源数据
displaySwiperList: [], // swiper需要的数据
displayIndex: 0, // 用于显示swiper的真正的下标数值只有:0,1,2。
originIndex: 0, // 记录源数据的下标
windowWidth: 0,
windowHeight: 0,
current: 0,
oid: 0,
isplay: true, // 是否自动播放下一个视频
playCount: 2, // 剩余多少视频加载视频列表
nodate: true, // true 有数据
issp: '',
isqp: true, // 是否全屏
page: 1,
urls: "https://xjc.demo.hongcd.com/api/video/videoRecommend?page=1&uid=0",
dataList: [],
isFirstLoad: true,
videoContext: null
}
},
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight
},
methods: {
reShare() {
var href = '/pages/client/video' + '?fxpid=' + this.uid
// #ifdef H5
uni.setClipboardData({
data: href,
complete() {
uni.showToast({
title: "分享连接已复制到剪贴板"
})
}
})
// #endif
// #ifdef MP-WEIXIN
// #endif
// #ifdef APP-PLUS
uni.share({
provider: "weixin",
scene: "WXSenceTimeline",
type: 0,
href: href,
title: '分享标题',
summary: '分享总结',
imageUrl: '',
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
},
})
// #endif
},
show() {
if (this.isFirstLoad) {
this.isFirstLoad = false
this.queryRecommend()
} else {
this.videoContext?.play()
}
},
stop() {
audo.pause()
this.videoContext?.pause()
},
queryRecommend() {
uni.request({
url: this.urls,
success: (res) => {
if (res.data.isempty == 1) {
var msg = res.data.data
//2.这里把视频添加到视频列表
for (let i = 0; i < msg.length; i++) {
this.originList.push(msg[i])
}
if (this.page == 1) {
this.initSwiperData();
}
this.page = this.page + 1
} else {
this.nodate = false
}
}
})
},
tapVideoHover() {
// 控制是否全屏
this.isqp = !this.isqp
},
ended() {
// 1.播放当前视频结束时触发,自动切换下一个视频
if (this.isplay) {
if (this.displayIndex < 2) {
this.current = this.displayIndex + 1
} else {
this.current = 0
}
console.log('显示swiper Index:', this.displayIndex)
}
},
/**
* 初始一个显示的swiper数据
* @originIndex 从源数据的哪个开始显示默认0,如从其他页面跳转进来,要显示第n个,这个参数就是他的下标
*/
initSwiperData(originIndex = this.originIndex) {
console.log('--------当前数据 Index:', originIndex)
const originListLength = this.originList.length; // 源数据长度
const displayList = [];
displayList[this.displayIndex] = this.originList[originIndex];
displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
this.originList[
originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
];
displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
this.originList[
originIndex + 1 == originListLength ? 0 : originIndex + 1
];
this.displaySwiperList = displayList;
if (this.oid >= this.originList.length) {
this.oid = 0
}
if (this.oid < 0) {
this.oid = this.originList.length - 1
}
console.log('++++++++++++上一条播放数据 Index:', this.oid)
// audo.pause()
this.videoContext = uni.createVideoContext(this.originList[this.oid]._id, this)
this.videoContext.pause()
this.videoContext.stop()
setTimeout(() => {
console.log('qqqqqq:', this.originList[originIndex]._id)
this.videoContext = uni.createVideoContext(this.originList[originIndex]._id, this)
this.videoContext.play()
}, 500)
var pCount = this.originList.length - this.playCount
if (originIndex == pCount && this.nodate) {
this.queryRecommend()
}
},
/**
* swiper滑动时候
*/
swiperChange(event) {
const {
current
} = event.detail;
const originListLength = this.originList.length; // 源数据长度
// =============向后==========
if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
this.originIndex =
this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
//console.log('+++',this.originIndex)
this.oid = this.originIndex - 1
this.initSwiperData(this.originIndex);
}
// ======如果两者的差为-2或者1则是向前滑动============
else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
//console.log('---',this.originIndex)
this.oid = this.originIndex + 1
this.initSwiperData(this.originIndex);
}
this.isqp = true
},
controlstoggle(e) {
console.log(e.detail.show);
this.issp = e.detail.show
},
detail(vid, mid) {
},
cLike(sss, vid, mid) {
if (uni.getStorageSync("userinfo")) {
} else {
this.loginTips()
return false
}
},
loginTips() {
uni.showModal({
title: '温馨提示',
content: '请先登录',
showCancel: true,
confirmText: "登录",
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
});
},
}
}
</script>
<style lang="scss" scoped>
.body {
// background: yellow;
background: #000000;
width: 100%;
height: 100%;
}
.swiper {
height: 100%;
}
.userInfo {
position: absolute;
z-index: 99;
bottom: 30%;
right: 10px;
width: 100rpx;
flex-direction: column;
}
.likeIco,
.shareIco {
width: 60rpx;
height: 60rpx;
margin-top: 15px;
}
.likeNum,
.shareTex {
color: #ffffff;
font-size: 30rpx;
text-align: center;
margin: 5px;
}
.likeNumActive {
color: red;
}
.contentcd {
z-index: 99;
position: absolute;
bottom: 30px;
padding: 15rpx;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
}
.userName {
font-size: 30rpx;
color: #ffffff;
margin-top: 80upx;
margin-left: -12rpx;
}
.words {
margin-top: 16rpx;
font-size: 30rpx;
color: #ffffff;
margin-bottom: 20rpx;
}
.wordss {
margin-top: 10rpx;
font-size: 26rpx;
color: #ffffff;
}
</style>
\ No newline at end of file
<template>
<view class="body">
推荐
</view>
</template>
<script>
import common from '@/mixins/common';
import {
base64Compress,
imageCompress,
getToLocal
} from "@/utils/utils.js"
import {
navigateTo,
message,
alert,
loading
} from '@/utils/fun.js';
import {
openUrl
} from '@/utils/app+.js';
const app = getApp();
export default {
name: 'index',
mixins: [common],
data() {
return {
showlip: false
};
},
methods: {
show() {
// if (this.$refs.paging != null) {
// this.$refs.paging.refresh();
// }
},
loadData() {
this.post({
url: '/app/getVideoConfig',
data: {
session: app.globalData.token
},
showLoading: false,
success: ({
data
}) => {
// this.$refs.paging.complete(data.color);
// this.videoConfig = data
// this.dataList = data.color
// this.currentIndex = 0
// this.videoUrl = data.topVideo
// this.runingVideo = data.runingVideo
// this.currentImageUrl =
// 'https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg_companionx/ic_main_none_icon.png'
// this.jobId = ''
// this.isUpImg = false
// if (this.videoContext == '') {
// this.videoContext = uni.createVideoContext('homeVideo', this)
// }
// this.playVideo()
}
});
},
downloadApp() {
if (app.globalData.userInfo) {
openUrl(app.globalData.downUrl);
} else {
// navigateTo('user/login', {
// redirect: "index"
// });
}
}
}
};
</script>
<style lang="scss" scoped>
.body {
background-color: white;
}
</style>
<template>
<view class="body">
<status-title :showBack="true">每日签到</status-title>
<z-paging class="mt-30" ref="paging" v-model="dataList" @query="queryList" :loading-more-enabled="false">
<view class="sign-top flex">
<view class="flex1">
<u-text text="签到领大礼" size="22" bold></u-text>
<u-gap height="6"></u-gap>
<u-text text="连续签到365天免费拿全身玩偶~" size="16"></u-text>
</view>
<image mode="widthFix" src="../../static/sign/ic_sign_top.png"></image>
</view>
<view class="sign-wrap flex1">
<view class="flex">
<image mode="widthFix" style="width: 30rpx;margin-right: 10rpx;"
src="../../static/sign/ic_sign_prefix.png"></image>
<u-text text="达成以下任务即可完成签到:" color="#2D2D2D"></u-text>
</view>
<view class="item flex" v-for="(item, i) in dataList" :key="i">
<view class="flex1">
<view>杀戮空间的</view>
<u-line-progress class="mt-10" percentage="30" activeColor="#77CF8B" :showText="false">
</u-line-progress>
</view>
<view class="btn">去参与</view>
</view>
</view>
<view class="sign-wrap">
<u-text size="22" bold :text="signDay" align="center"></u-text>
</view>
</z-paging>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
navigateTo,
} from '@/utils/fun.js';
export default {
mixins: [common],
data() {
return {
signDay: "已连续签到-天",
dataList: [0, 1],
dataList2: []
}
},
methods: {
queryList(page, size) {
}
}
}
</script>
<style lang="scss">
.body {
background-color: #FFF6E4;
}
.sign-top {
width: 90%;
margin: 20rpx auto;
image {
margin-left: 30rpx;
width: 200rpx;
}
}
.sign-wrap {
padding: 20rpx;
margin: 20rpx auto;
width: 90%;
border-radius: 20rpx;
background-color: #fff;
.item {
justify-content: space-between;
align-items: center;
.btn {
background-color: #FFF6E4;
border-radius: 50rpx;
}
}
}
</style>
<template>
<view class="body">
<status-title :showBack="true"></status-title>
<image class="bgImage" :src="bgImgUrl"></image>
<view class="btn-wrap">
<button v-show="id==0" class="btn" @click="myShare" open-type="share">立即分享</button>
<u-gap :customStyle="id==0?'width:60rpx;':'width:0;'"></u-gap>
<button class="btn" @click="contact">咨询客服</button>
</view>
</view>
</template>
<script>
import {
redirectTo
} from '@/utils/fun.js';
import common from '@/mixins/common';
const app = getApp();
export default {
name: 'loading',
mixins: [common],
data() {
return {
id: '',
bgImgUrl: ''
}
},
onLoad(options) {
this.id = options.id;
if (this.id == 0) {
// 个人推广
this.bgImgUrl = 'https://mints-sh.oss-cn-shanghai.aliyuncs.com/system/ww/1671448082782.jpeg'
} else if (this.id == 1) {
// 成为代理
this.bgImgUrl = 'https://mints-sh.oss-cn-shanghai.aliyuncs.com/system/ww/1671620564204.jpeg'
} else if (this.id == 2) {
// 体验馆合作
this.bgImgUrl = 'https://mints-sh.oss-cn-shanghai.aliyuncs.com/system/ww/1671617578957.jpeg'
}
},
methods: {
myShare() {
// wx.downloadFile({
// url: this.bgImgUrl,
// success: (res) => {
// wx.showShareImageMenu({
// path: res.tempFilePath
// })
// }
// })
},
contact() {
// 联系我们
this.post({
url: '/app/customerServiceNumbers',
showLoading: false,
success: ({
data
}) => {
let datas = data.customerServiceNumbers.split(',')
let corpid = datas[0]
let curl = datas[1]
wx.openCustomerServiceChat({
extInfo: {
url: curl
},
corpId: corpid,
success(res) {},
fail(e) {
console.log(e)
}
})
}
});
},
}
};
</script>
<style lang="scss">
.body {
background-color: white;
position: relative;
}
.bgImage {
position: absolute;
width: 100%;
height: 100%;
}
.btn-wrap {
left: 50%;
margin-left: -250rpx;
width: 500rpx;
position: absolute;
bottom: 50rpx;
display: flex;
flex-direction: row;
}
.btn {
width: 220rpx;
height: 80rpx;
line-height: 72rpx;
text-align: center;
font-size: 34rpx;
font-weight: 700;
border: solid 4rpx #191919;
background-color: #fff;
color: #191919;
border-radius: 100rpx;
}
</style>
<template>
<view class="content">
<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
<swiper-item v-for="(list, index) in displaySwiperList" :key="index" :style="'width:100%; height:100%;'">
<view :style="'width:100%; height:100%;'">
<video v-if="Math.abs(displayIndex-index)==0 && list.src" :id="list._id" :controls="controls"
:loop="!isplay" :enable-progress-gesture="false" :show-center-play-btn="false"
:show-loading="true" :show-fullscreen-btn="false" @ended="ended"
@controlstoggle="controlstoggle" @click="tapVides()" @timeupdate="timeupdate"
:style="'width:100%; height:100%;'" :src="list.src" :poster="list.img" class="tsvideo">
</video>
<view v-if="isqp" class="userInfo">
<!-- 点赞 -->
<view @click.stop="cLike(list.like,list.pid,list.mid);"
style="opacity: 0.9; margin-top: 17rpx;">
<image v-if="list.like*1==1" src="@/static/video/aixin.png"
style="width: 80rpx; height: 80rpx; position: absolute; right: 6px;"></image>
<image v-if="list.like*1==2" src="@/static/video/aixinRed.png"
style="width: 80rpx; height: 80rpx; position: absolute; right: 6px;"></image>
<text
style="color: #FFFFFF; font-size: 30rpx; text-align: center; margin-top: 80rpx; font-weight: bold;"
:class="{'likeNumActive':list.like}">{{list.like_n}}</text>
</view>
<!-- 分享 -->
<view style="opacity: 0.9; margin-top: 17rpx;">
<image src="@/static/video/share-fill.png"
style="width: 80rpx; height: 80rpx; position: absolute; right: 10rpx;"></image>
<text
style="color: #FFFFFF; font-size: 30rpx; text-align: center; font-weight: bold; margin-top: 80rpx;">分享</text>
<button open-type="share"
style="position: absolute; background: none; width: 100%; height: 100%;"
@click.stop="share"></button>
</view>
</view>
<!-- 最底下的文字部分 -->
<view v-if="isqp" class="contentcd">
<text class="userName"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text><!-- i={{i}} -->
<text class="wordss"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}</text><!-- k={{k}} -->
<text class="words" @click.stop="sellxj()"
:style="'width: '+ (windowWidth - 90) +'px;'">{{list.namets}}</text><!-- k={{k}} -->
</view>
<!-- play-btn-position="center" -->
<view v-if="Math.abs(displayIndex-index)!=0 || !list.src" class="videoHover tsimg"
@click.stop="tapVideoHover(index,list.pays)"
:style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
<image :src="list.img"
:style="'width: 100%; height:'+heightxw+'%; background-color: #000; position: absolute;'"
mode="aspectFit"></image>
<image class="playState" src="@/static/video/play.png"></image>
</view>
</view>
</swiper-item>
</swiper>
<uni-popup type="bottom" ref="select">
<view v-if="fenji==1"
:style="'width: '+ windowWidth +'px; height: '+ (windowHeight/1.6) +'px; background-color: #202020; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<view :style="'width: '+ windowWidth +'px; height: 35px;'">
<view style="display: flex; flex-direction: row;">
<view style="display: flex; flex-direction: column;">
<view style="display: flex; flex-direction: row;">
<image src="@/static/video/layers.png"
style="width: 20px; height: 20px; margin-top: 10px; margin-left: 20px;"></image>
<view
:style="'font-size: 16px; font-weight: bold; color: #FFFFFF; margin-top: 9px; height: 22px; margin-left: 20px; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
当前播放第{{ Number(originIndex+1) }}个视频
</view>
</view>
<!-- <view :style="'font-size: 12px; color: #FFFFFF; margin-top: 2px; height: 18px; margin-left: 20px; opacity: 0.6; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">这是第{{ Number(k+1) }}个视频</view> -->
</view>
<image @click="down" src="@/static/video/down.png"
style="width: 30px; height: 30px; margin-top: 5px; position: absolute; right: 20px;">
</image>
</view>
</view>
<scroll-view :style="'width: '+ (windowWidth) +'px; height: '+ ((windowHeight/1.6)*0.85) +'px;'"
:scroll-y="true" :scroll-top="scrollTop">
<block v-for="(list,index) in originList">
<view @click="selectThisVideo(index,list.pays)"
:style="'width: '+ (windowWidth) +'px; display: flex; flex-direction: row;'">
<image :src="list.img" mode="aspectFill"
style="width: 70px; height: 80px; margin-top: 15px; margin-left: 15px; border-radius: 5px;">
</image>
<view style="display: flex; flex-direction: column; margin-top: 15px; margin-left: 10px;">
<view style="display: flex; flex-direction: row;">
<view style="font-size: 18px; color: #FFFFFF; font-weight: bold;">{{list.name}}
</view>
<image v-if="list.pays*1==1" src="@/static/video/lock.png"
style="width: 50rpx; height: 50rpx; margin-left: 20rpx;"></image>
</view>
<view
:style="'font-size: 16px; color: #FFFFFF; margin-top: 5px; width: '+ (windowWidth*0.7) +'px; overflow: hidden;'">
{{list.title}}
</view>
<view
:style="'font-size: 16px; color: #FFFFFF; margin-top: 5px; width: '+ (windowWidth*0.7) +'px; overflow: hidden; opacity: 0.6;'">
{{list.msg}}
</view>
</view>
</view>
</block>
<view style="width: 1px; height: 1px; margin-top: 30px;"></view>
</scroll-view>
</view>
<view v-if="fenji==2"
:style="'width: '+ windowWidth +'px; background-color: #202020; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
<view :style="'width: '+ windowWidth +'px; height: 35px;'">
<view style="display: flex; flex-direction: row;">
<view style="display: flex; flex-direction: column;">
<view style="display: flex; flex-direction: row;">
<image src="@/static/video/lock.png"
style="width: 20px; height: 20px; margin-top: 10px; margin-left: 20px;"></image>
<view
:style="'font-size: 16px; font-weight: bold; color: #FFFFFF; margin-top: 9px; margin-left: 20px; height: 22px; width: '+ (windowWidth*0.6) +'px; overflow: hidden;'">
当前视频 没有权限播放
</view>
</view>
</view>
<image @click="downbuy" src="@/static/video/down.png"
style="width: 30px; height: 30px; margin-top: 5px; position: absolute; right: 20px;">
</image>
</view>
</view>
<view class="flex space alcenter wrap"
style="padding:30rpx 30rpx 10rpx 30rpx;flex-direction: row; display:flex;">
<view class="ft14" style="color: #fff;">我的{{hbmc}}:{{userinfo.money*1}}</view>
<view class="ft14" style="color: #fff;" v-if="userinfo.group_id == 1">普通用户</view>
<view class="ft14" style="color: #fff;" v-if="userinfo.group_id == 2">VIP用户</view>
</view>
<view
style="padding:10rpx 30rpx; border: #FFFFFF solid; 1upx; margin:10upx 30upx; border-radius: 16upx;">
<view v-if="userinfo.group_id == 1" class="flex space alcenter wrap"
style="flex-direction: row; display:flex;">
<view class="ft14" IF style="color: #fff;">单集视频:{{originList[baymid].priced*1}}{{hbmc}}</view>
<view class="ft14" style="color: #fff;">整部视频:{{originList[baymid].priceq*1}}{{hbmc}}</view>
</view>
<view v-if="userinfo.group_id == 2" class="flex space alcenter wrap"
style="flex-direction: row; display:flex;">
<view class="ft14" style="color: #fff;">VIP单集视频:{{originList[baymid].vippriced*1}}{{hbmc}}
</view>
<view class="ft14" style="color: #fff;">VIP整部视频:{{originList[baymid].vippriceq*1}}{{hbmc}}
</view>
</view>
<view class="flex space alcenter wrap mt10" style="flex-direction: row; display:flex;">
<view @click="buyAct(1)" class="gdfgjh" style="width: 49%; float: left;">购买单集视频</view>
<view @click="buyAct(0)" class="gdfgjh" style="width: 49%; float: left;">购买整部视频</view>
</view>
</view>
<view
style="padding:10rpx 30rpx; border: #FFFFFF solid; 1upx; margin:10upx 30upx; border-radius: 16upx;">
<view class="ft14 ftw500" style="color: #fff; ">当前充值优惠活动:</view>
<view class="flex space alcenter wrap mt5" style="flex-direction: row; display:flex;">
<block v-for="(tm,index) in moneyList">
<view @click="congzs(tm.money)" class="pd5_15 mt10"
style="background: #fff; border-radius: 10upx; width: 49%;">
<view class="ft14 ftw500" style="color: #666;">充值¥{{tm.money*1}}</view>
<view class="ft12" style="color: #666;">{{hbmc}}{{tm.num*1}} +送{{tm.coupon*1}}</view>
</view>
</block>
</view>
</view>
<view
style="padding:10rpx 30rpx; border: #FFFFFF solid; 1upx; margin:10upx 30upx; border-radius: 16upx;">
<view class="ft14 ftw500" style="color: #fff; ">VIP用户权益:</view>
<view class="flex space alcenter wrap mt5" style="flex-direction: row; display:flex;">
<view v-if="originList[baymid].vippriced*1>0" class="ft12" style="color: #fff;">
VIP单集视频:{{originList[baymid].vippriced*1}} {{hbmc}}</view>
<view v-if="originList[baymid].vippriced*1==0 && originList[baymid].vippriceq*1>0" class="ft12"
style="color: #fff;">VIP当前单节视频免费</view>
<view v-if="originList[baymid].vippriceq*1>0" class="ft12" style="color: #fff;">
VIP整部视频:{{originList[baymid].vippriceq*1}} {{hbmc}}</view>
<view v-if="originList[baymid].vippriceq*1==0" class="ft12" style="color: #fff;">VIP当前整部免费
</view>
</view>
<view class="ft12 mt5" style="color: #ff0000;">开通VIP享受更多优惠福利</view>
<view @click="govip()" class="gdfgjh mt10">开通VIP</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import common from '@/mixins/common';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import {
navigateTo,
} from '@/utils/fun.js';
let audo = uni.createInnerAudioContext()
export default {
name: "videoDetail",
mixins: [common],
data() {
return {
sharedata: {
type: 2,
strShareUrl: "",
strShareTitle: "分享标题",
strShareSummary: "分享总结",
strShareImageUrl: ""
},
fenji: 1,
controls: true,
originList: [], // 源数据
displaySwiperList: [], // swiper需要的数据
displayIndex: 0, // 用于显示swiper的真正的下标数值只有:0,1,2。
originIndex: 0, // 记录源数据的下标
windowWidth: 0,
windowHeight: 0,
current: 0,
oid: 0,
isplay: true, //是否自动播放下一个视频
playCount: 2, //剩余多少视频加载视频列表
nodate: true, //true 有数据
duration: 500,
issp: '',
isqp: true,
page: 1,
urls: "https://xjc.demo.hongcd.com",
baymid: 0,
scrollTop: 0,
vid: 0,
mid: 0,
isbuylx: 0, //大于0单节购买 0全集
safeArea: 0,
ttuop: 0,
uid: 0,
heightxw: 100,
hbmc: '',
userinfo: [],
moneyList: []
};
},
onLoad(e) {
// this.hbmc = uni.getStorageSync("config").site.hbmc
this.hbmc = "AAA"
console.log('eeeeeee-----', e)
if (e.fxpid) {
if (e.fxpid > 0) {
uni.setStorage({
key: 'fxpid',
data: e.fxpid
})
}
}
if (uni.getStorageSync("userinfo")) {
this.cztc();
this.uid = uni.getStorageSync("userinfo").id
}
uni.getSystemInfo({
success: res => {
this.safeArea = res.safeAreaInsets.bottom;
if (this.safeArea > 0) {
this.heightxw = 97
}
}
})
uni.setStorage({
key: 'isbuy',
data: 1
})
if (e.vid) {
this.vid = e.vid
}
if (e.mid) {
this.mid = e.mid
}
// #ifdef MP-TOUTIAO
this.ttuop = 64
// #endif
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea - this.ttuop
console.log(this.windowHeight)
//this.Recommend();
},
onShow() {
this.gxdd()
if (uni.getStorageSync("userinfo")) {
this.ongrzlTap()
} else {
this.denglu()
}
},
onShareAppMessage: function(res) {
// #ifdef MP-WEIXIN
var href = '/pages/client/tuan/detail?vid=' + this.vid + '&fxpid=' + this.uid + '&mid=0'
console.log(res)
let that = this;
const obj = {
title: "发送给好友",
imageUrl: '',
path: href,
success: function(res) {
console.log(res, "转发成功")
},
fail: function(res) {
wx.showToast({
title: '发送失败',
icon: 'none'
})
}
}
return obj
// #endif
},
methods: {
cztc() {
let data = {};
data.token = uni.getStorageSync("userinfo").token;
data.uid = uni.getStorageSync("userinfo").id;
uni.request({
url: this.configs.webUrl + '/api/user/cztc',
data: data,
success: res => {
console.log(res.data)
this.moneyList = res.data
},
fail: (data, code) => {
//console.log('fail' + JSON.stringify(data));
}
});
},
share() {
var href = '/pages/client/tuan/detail?vid=' + this.vid + '&fxpid=' + this.uid + '&mid=0'
// #ifdef H5
uni.setClipboardData({
data: this.urls + '/h5/#' + href,
complete() {
uni.showToast({
title: "分享连接已复制到剪贴板"
})
}
})
// #endif
// #ifndef H5
uni.share({
provider: "weixin",
scene: "WXSenceTimeline",
type: 0,
href: href,
title: '分享标题',
summary: '分享总结',
imageUrl: '',
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
})
// #endif
},
gxdd() {
var isbuy = uni.getStorageSync("isbuy")
console.log('更新列表')
this.page = 1
this.Recommend();
},
buyAct(mid) {
if (mid == 1) {
mid = this.originList[this.baymid].mid
}
var info = this.originList[this.baymid]
if (uni.getStorageSync("userinfo")) {
this.isbuylx = mid
uni.setStorage({ //缓存配置信息
key: 'buydata',
data: info
})
uni.setStorage({
key: 'isbuy',
data: 1
})
this.downbuy()
uni.navigateTo({
url: '/pages/client/tuan/buy?id=' + this.vid + '&mid=' + mid
})
} else {
this.denglu()
return false
}
},
congzs(price) {
var mid = this.originList[this.baymid].mid
uni.navigateTo({
url: '/pages/client/vipcard/recharge?id=' + this.vid + '&mid=' + mid + '&price=' + price
})
},
govip() {
var mid = this.originList[this.baymid].mid
if (uni.getStorageSync("userinfo")) {
this.downbuy()
uni.navigateTo({
url: '/pages/client/vipcard/index?vid=' + this.vid + '&mid=' + mid
})
} else {
this.denglu()
return false
}
},
timeupdate(event) {
// console.log(11111)
// console.log(this.displayIndex)
if (event.detail.currentTime > 0 && this.originList[this.originIndex].pays == 1) {
uni.createVideoContext(this.originList[this.originIndex]._id, this).seek(0);
uni.createVideoContext(this.originList[this.originIndex]._id, this).pause();
this.fenji = 2
this.baymid = this.originIndex
this.$refs.select.open('bottom');
}
},
selectThisVideo(index, pays) {
this.down();
if (pays == 1) {
this.baymid = index
this.fenji = 2
this.$refs.select.open('bottom');
} else {
this.duration = 20;
this.originIndex = index
this.initSwiperData(index);
setTimeout(() => {
this.duration = 500;
}, 500)
}
},
down() {
this.$refs.select.close();
},
downbuy() {
this.$refs.select.close();
},
sellxj() {
this.fenji = 1
this.$refs.select.open('bottom');
this.$nextTick(() => {
let num1 = (this.windowHeight / 1.6) * 0.85;
let num2 = num1 / 4.78;
this.scrollTop = num2 * Number(this.k);
})
},
tapVideoHover(index, pays) {
this.baymid = index
this.fenji = 2
this.$refs.select.open('bottom');
},
tapVides() {
this.isqp = !this.isqp
},
ongrzlTap() {
let data = {};
data.token = uni.getStorageSync("userinfo").token;
data.uid = uni.getStorageSync("userinfo").id;
uni.request({
url: this.urls + '/api/user/index',
data: data,
success: res => {
if (res.data.code == 1) {
let ionfo = res.data.data
this.userinfo = ionfo
} else {
uni.showToast({
title: res.data.msg,
icon: "none"
});
}
},
fail: (data, code) => {
//console.log('fail' + JSON.stringify(data));
}
});
},
Recommend() {
this.originList = []
var uid = 0;
if (uni.getStorageSync("userinfo")) {
uid = uni.getStorageSync("userinfo").id
}
uni.request({
//url: this.urls+'/api/video/videoinfo?page='+this.page+'&uid='+uid,
url: this.urls + '/api/video/videoinfo?page=' + this.page + '&uid=' + uid + '&vid=' + this
.vid + '&mid=' + this.mid + '&token=' + uni.getStorageSync("userinfo").token,
success: (res) => {
if (res.data.isempty == 1) {
// #ifdef MP-WEIXIN
if (res.data.videodata) {
uni.setNavigationBarTitle({
title: res.data.videodata.name
});
}
// #endif
var msg = res.data.data
var midlog = res.data.midlog
//2.这里把视频添加到视频列表
if (this.page == 1) {
this.originList = res.data.data
for (let i = 0; i < msg.length; i++) {
if (this.mid > 0) { //等于0 上一个页面视频id未0 相当于没有上传
if (msg[i].mid == this.mid) { //判断判断上一个页面视频id
this.originIndex = i
}
} else {
if (msg[i].mid == midlog) { //判断当前历史记录最新视频id
this.originIndex = i
}
}
}
this.initSwiperData(this.originIndex);
} else {
for (let i = 0; i < msg.length; i++) {
this.originList.push(msg[i])
}
}
this.page = this.page + 1
} else {
this.nodate = false
}
}
})
},
ended() {
//console.log('isplay----',this.isplay)
// 1.播放当前视频结束时触发,自动切换下一个视频
if (this.isplay) {
if (this.displayIndex < 2) {
this.current = this.displayIndex + 1
} else {
this.current = 0
}
this.isqp = true
console.log('显示swiper Index:', this.displayIndex)
}
},
/**
* 初始一个显示的swiper数据
* @originIndex 从源数据的哪个开始显示默认0,如从其他页面跳转进来,要显示第n个,这个参数就是他的下标
*/
initSwiperData(originIndex = this.originIndex) {
this.isqp = false
//console.log('--------当前数据 Index:',originIndex)
const originListLength = this.originList.length; // 源数据长度
const displayList = [];
displayList[this.displayIndex] = this.originList[originIndex];
displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
this.originList[
originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
];
displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
this.originList[
originIndex + 1 == originListLength ? 0 : originIndex + 1
];
this.displaySwiperList = displayList;
audo.pause()
if (this.oid >= this.originList.length) {
this.oid = 0
}
if (this.oid < 0) {
this.oid = this.originList.length - 1
}
//console.log('++++++++++++上一条播放数据 Index:',this.oid)
uni.createVideoContext(this.originList[this.oid]._id, this).stop();
if (this.originList[originIndex].pays == 1) {
this.isqp = true
this.baymid = this.originIndex
this.fenji = 2
this.$refs.select.open('bottom');
} else {
setTimeout(() => {
this.isqp = true
console.log('qqqqqq:', this.originList[originIndex]._id)
//audo.play()
uni.createVideoContext(this.originList[originIndex]._id, this).play();
this.bfjl(this.originList[originIndex].mid)
}, 500)
}
var pCount = this.originList.length - this.playCount
if (originIndex == pCount && this.nodate) {
this.Recommend()
}
},
/**
* swiper滑动时候
*/
swiperChange(event) {
const {
current
} = event.detail;
const originListLength = this.originList.length; // 源数据长度
// =============向后==========
if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
this.originIndex =
this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
//console.log('+++',this.originIndex)
this.oid = this.originIndex - 1
this.initSwiperData(this.originIndex);
}
// ======如果两者的差为-2或者1则是向前滑动============
else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
//console.log('---',this.originIndex)
this.oid = this.originIndex + 1
this.initSwiperData(this.originIndex);
}
},
detail(vid, mid) {
var fxpid = 1
if (uni.getStorageSync("userinfo")) {
fxpid = uni.getStorageSync("userinfo").id
}
uni.navigateTo({
url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
})
},
bfjl(mid) { //更新播放记录
let this_ = this
if (uni.getStorageSync("userinfo")) {
let data = {
'vid': this_.vid,
'mid': mid
};
data.uid = uni.getStorageSync("userinfo").id
uni.request({
url: this_.urls + '/api/video/bfjl',
data: data,
success: data => {
},
fail: (data, code) => {}
});
}
},
controlstoggle(e) {
console.log(e.detail.show);
this.issp = e.detail.show
},
cLike(sss, vid, mid) {
if (uni.getStorageSync("userinfo")) {
} else {
this.denglu()
return false
}
const video = this.displaySwiperList[this.displayIndex];
if (sss == 1) {
this.displaySwiperList[this.displayIndex].like = 2
video.like_n += 1;
} else {
this.displaySwiperList[this.displayIndex].like = 1
video.like_n -= 1
}
console.log(vid)
let this_ = this
let data = {
'vid': vid,
'mid': mid
};
data.token = uni.getStorageSync("userinfo").token
data.uid = uni.getStorageSync("userinfo").id
uni.request({
url: this_.urls + '/api/user/tapLove',
data: data,
success: data => {
// uni.showToast({
// icon:'none',
// title:data.data.msg
// })
// if(data.data.msg=='取消成功'){
// video.like_n -= 1
// }else{
// video.like_n += 1;
// }
},
fail: (data, code) => {}
});
},
denglu() {
uni.showModal({
title: '温馨提示',
content: '请先登录',
showCancel: true,
confirmText: "登录",
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: "/pages/login/login"
})
} else if (res.cancel) {
//uni.navigateBack();
}
}
});
}
},
created() {
},
};
</script>
<style lang="scss" scoped>
page {
background: #000000;
}
.content {
height: 100%;
}
.title {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
}
.swiper {
width: 100%;
height: 100%;
}
.wrap_content {
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
background: gray;
color: aqua;
height: 100%;
font-size: 80px;
margin: 0rpx 40rpx;
}
.container {
background-color: #000000;
}
.item {
/* width : 750rpx; */
background-color: #000000;
position: relative;
}
.videoHover {
position: absolute;
top: 0px;
left: 0;
flex: 1;
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
/* border-style: dashed;
border-color: #DD524D;
border-width: 1px; */
}
.playState {
width: 160rpx;
height: 160rpx;
opacity: 0.2;
}
.userInfo {
position: absolute;
z-index: 99;
bottom: 30%;
right: 10rpx;
width: 100rpx;
text-align: center;
flex-direction: column;
}
.userAvatar {
border-radius: 500%;
margin-bottom: 15px;
border-style: solid;
border-width: 2px;
border-color: #ffffff;
}
.userAvatar {
width: 100rpx;
height: 100rpx;
}
.likeIco,
.shareIco,
.commentIco {
width: 60rpx;
height: 60rpx;
margin-top: 15px;
}
.likeNum,
.commentNum,
.shareTex {
color: #ffffff;
font-size: 30rpx;
text-align: center;
margin: 5px;
}
.likeNumActive {
color: red;
}
.contentcd {
width: 720rpx;
z-index: 99;
position: absolute;
bottom: 70rpx;
/* justify-content: center; */
padding: 15rpx;
flex-direction: column;
justify-content: flex-start;
color: #ffffff;
}
.userName {
font-size: 30rpx;
color: #ffffff;
margin-top: 80upx;
margin-left: -12rpx;
}
.words {
margin-top: 16rpx;
font-size: 30rpx;
color: #ffffff;
margin-bottom: 20rpx;
}
.wordss {
margin-top: 10rpx;
font-size: 26rpx;
color: #ffffff;
}
.root {
background-color: #000000;
}
.gdfgjh {
font-size: 30rpx;
font-weight: 600;
line-height: 90rpx;
background: #fff;
border-radius: 18rpx;
padding: 0 20rpx;
text-align: center;
margin-bottom: 20rpx;
}
.tsvideo {
/* animation:showDivAni 1s 1; */
}
@keyframes showDivAni {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.tsimg {
/* animation:fadenum12 10s 1; */
}
@keyframes fadenum12 {
0% {
opacity: 1;
}
10% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
</style>
\ No newline at end of file
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