Skip to content

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

优化页面逻辑

parent 002ae124
Show whitespace changes
Inline Side-by-side
Showing with 50 additions and 312 deletions
vedio/components/tabs-center/tabs-center.vue deleted 100644 → 0
View file @ 002ae124
<template>
<view class="tabs">
<scroll-view class="tabs-scroll" scroll-x :scroll-into-view="'item_' + currentView">
<view class="tabs-wrap">
<block v-for="(item, index) in tabs" :key="item.title">
<view :id="'item_' + index" :class="'tabs-bar ' + (valueClone === index ? 'active' : '')"
@click="handleTabClick" :data-index="index">
<view class="tabs-title flex1">
<view style="z-index: 1;position: relative;">{{ item.title }}</view>
<view class="tabs-line" v-show="(valueClone === index)"></view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "tabs-center",
data() {
return {
currentView: 0,
valueClone: 0
};
},
props: {
tabs: {
type: Array,
default: () => []
},
value: {
type: Number,
default: 0
}
},
watch: {
value: {
handler: function(activeTab) {
this.valueClone = this.value;
const len = this.tabs.length;
if (len === 0) {
return;
}
let currentView = activeTab - 1;
if (currentView < 0) {
currentView = 0;
}
if (currentView > len - 1) {
currentView = len - 1;
}
this.currentView = currentView;
},
immediate: true,
deep: true
}
},
methods: {
handleTabClick(e) {
const index = e.currentTarget.dataset.index;
this.valueClone = index;
this.$emit('change', this.tabs[index]);
}
}
};
</script>
<style lang="scss">
@import '@/scss/uni.scss';
.tabs {
display: block;
width: 100%;
color: #222222;
font-size: 36rpx;
// margin-top: 36rpx;
.tabs-scroll {
display: block;
width: 100%;
line-height: 50rpx;
}
&-wrap {
white-space: nowrap;
}
&-line {
position: relative;
bottom: 18rpx;
// z-index: -1;
height: 12rpx;
width: auto;
// border-radius: 8rpx;
// background-color: $main-color;
// background-color: #03E7C9 !important;
// background: -webkit-linear-gradient(left, #02F3A3, #00D6E5);
// /* Safari 5.1-6.0 */
// background: -o-linear-gradient(right, #02F3A3, #00D6E5);
// /* Opera 11.1-12.0 */
// background: -moz-linear-gradient(right, #02F3A3, #00D6E5);
// /* Firefox 3.6-15 */
// background: linear-gradient(to right, #02F3A3, #00D6E5);
/* 标准语法 */
// transform: scale(0);
// transition-duration: 300ms;
// left: 50%;
// margin-left: -40rpx;
}
&-bar {
position: relative;
display: inline-block;
padding: 0 30rpx;
min-width: 50rpx;
background-color: transparent;
// padding-bottom: 18rpx;
text-align: center;
&.active {
.tabs-title {
color: black;
font-weight: bold;
font-size: 40rpx;
// background-color: aqua;
// border-bottom-color: $main-color;
}
.tabs-line {
transform: scale(1);
}
}
}
&-title {
display: inline-block;
// border-bottom-width: 2px;
// border-bottom-style: solid;
// border-bottom-color: transparent;
}
}
</style>
vedio/components/tabs/tabs.vue deleted 100644 → 0
View file @ 002ae124
<template>
<view class="tabs">
<scroll-view class="tabs-scroll" scroll-x :scroll-into-view="'item_' + currentView">
<view class="tabs-wrap">
<block v-for="(item, index) in tabs" :key="item.title">
<view :id="'item_' + index" :class="'tabs-bar ' + (valueClone === index ? 'active' : '')"
@click="handleTabClick" :data-index="index">
<view class="tabs-title">{{ item.title }}</view>
<view class="tabs-line"></view>
</view>
</block>
</view>
</scroll-view>
</view>
</template>
<script>
// components/tabs/tabs.js
export default {
data() {
return {
currentView: 0,
valueClone: 0
};
},
props: {
tabs: {
type: Array,
default: () => []
},
value: {
type: Number,
default: 0
}
},
watch: {
value: {
handler: function(activeTab) {
this.valueClone = this.value;
const len = this.tabs.length;
if (len === 0) {
return;
}
let currentView = activeTab - 1;
if (currentView < 0) {
currentView = 0;
}
if (currentView > len - 1) {
currentView = len - 1;
}
this.currentView = currentView;
},
immediate: true,
deep: true
}
},
methods: {
handleTabClick(e) {
const index = e.currentTarget.dataset.index;
this.valueClone = index;
this.$emit('change', this.tabs[index]);
}
}
};
</script>
<style lang="scss">
@import '@/scss/uni.scss';
.tabs {
display: block;
width: 100%;
color: #868686;
font-size: 36rpx;
margin-top: 36rpx;
.tabs-scroll {
display: block;
width: 100%;
line-height: 60rpx;
}
&-wrap {
white-space: nowrap;
}
&-line {
position: absolute;
bottom: 0;
z-index: 1;
width: 80rpx;
height: 8rpx;
border-radius: 8rpx;
// background-color: $main-color;
// background-color: #03E7C9 !important;
background: -webkit-linear-gradient(left, #03E6CA, #5DC6FD);
/* Safari 5.1-6.0 */
background: -o-linear-gradient(right, #03E6CA, #5DC6FD);
/* Opera 11.1-12.0 */
background: -moz-linear-gradient(right, #03E6CA, #5DC6FD);
/* Firefox 3.6-15 */
background: linear-gradient(to right, #03E6CA, #5DC6FD);
/* 标准语法 */
transform: scale(0);
transition-duration: 300ms;
left: 50%;
margin-left: -40rpx;
}
&-bar {
position: relative;
display: inline-block;
padding: 0 30rpx;
min-width: 110rpx;
background-color: transparent;
padding-bottom: 18rpx;
text-align: center;
&.active {
.tabs-title {
color: black;
font-weight: bold;
// border-bottom-color: $main-color;
}
.tabs-line {
transform: scale(1);
}
}
}
&-title {
display: inline-block;
// border-bottom-width: 2px;
// border-bottom-style: solid;
// border-bottom-color: transparent;
}
}
</style>
vedio/pages/recommend/follow.vue
View file @ 48ec5df5
......@@ -6,20 +6,27 @@
<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.stop="click(value.id,key)" @longpress.stop="longClick(key)">
@click.stop="click(value)" @longpress.stop="longClick(key)">
<image class="integral-mall-goods" mode="aspectFill" :src="value.coverImage"></image>
<view class="text" style="font-size: 26rpx;color: black;">{{value.title}}</view>
<view class="text" style="font-size: 22rpx;color: gray;">{{value.vedioDesc}}</view>
<view v-if="isEditStyle" @click.stop="cbClick(key)" style="position: absolute;background: #000000; opacity: 0.6;width: 92%;height: 100%;top: 0;border-radius:20rpx;
padding-left: 20rpx;padding-top: 20rpx;">
<u-checkbox-group @change="onChange(key)">
<u-checkbox active-color="red" shape="circle" :checked="value.isChecked" />
</u-checkbox-group>
<image v-if="value.isChecked" src="@/static/ic_selected.png"
style="width: 50rpx;height: 50rpx;" />
<image v-if="!value.isChecked" src="@/static/ic_unselected.png"
style="width: 50rpx;height: 50rpx;" />
</view>
</view>
</block>
</view>
</scroll-view>
<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>
</template>
......@@ -66,15 +73,25 @@
data
}) => {
this.dataList = data.list;
if (this.dataList.length > 0) {
this.$emit("showEdit", true)
} else {
this.$emit("showEdit", false)
}
}
});
},
changeEditStyle(b) {
this.isEditStyle = b
if (!this.isEditStyle) {
this.noChoice()
}
},
click(id, key) {
this.isEditStyle = true
this.dataList[key].isChecked = true
goRecommend() {
this.$emit("goRecommend")
},
click(detail) {
navigateTo(`/pagesC/video/videoDetail?data=` + encodeURIComponent(JSON.stringify(detail)))
},
longClick(key) {
this.isEditStyle = true
......@@ -84,22 +101,28 @@
this.dataList[key].isChecked = !this.dataList[key].isChecked
},
cbClick(key) {
this.dataList[key].isChecked = !this.dataList[key].isChecked
let newData = this.dataList[key]
newData.isChecked = !newData.isChecked
this.$set(this.dataList, key, newData)
},
fullChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = true
}
this.$forceUpdate()
},
noChoice() {
for (let i = 0; i < this.dataList.length; i++) {
this.dataList[i].isChecked = false
}
this.$forceUpdate()
},
deleteCollect() {
let list = []
for (let i = 0; i < this.dataList.length; i++) {
list.push(this.dataList[i])
if (this.dataList[i].isChecked) {
list.push(this.dataList[i].vedioId)
}
}
// 取消收藏
......@@ -116,6 +139,7 @@
uni.showToast({
title: "删除成功"
})
this.loadData()
}
});
},
......
vedio/pages/recommend/recommend.vue
View file @ 48ec5df5
......@@ -10,7 +10,8 @@
statusBarHeight +
'px;background-color:transparent'
">
<view v-if="current==0" :style="'position: absolute;left: 20rpx;top:'+ (statusBarHeight + 10) + 'px'"
<view v-if="(current==0 && showEdit)"
:style="'position: absolute;left: 20rpx;top:'+ (statusBarHeight + 10) + 'px'"
@click.stop="showEditBar = !showEditBar">
<image style="width: 50rpx;height: 50rpx;" mode="widthFix"
:src="showEditBar?'/static/video/close.png':'/static/video/edit.png'" />
......@@ -31,15 +32,14 @@
color: '#606266',
transform: 'scale(1)'
}" />
</view>
</view>
<swiper class="swiper" @change="swiperChange" :current="current" :disable-touch="showEditBar">
<swiper-item class="swiper-item">
<followPage v-on:showEditBarR="showEditBarR" ref="follow" />
<followPage v-on:showEditBarR="showEditBarR" v-on:goRecommend="goRecommend" v-on:showEdit="showEdit"
ref="follow" />
</swiper-item>
<swiper-item class="swiper-item">
......@@ -79,14 +79,14 @@
name: '推荐'
}],
showEditBar: false,
showEdit: false,
showTap: false,
titleBarHeight: app.globalData.titleBarHeight,
titleButtonWidth: app.globalData.titleButtonWidth,
statusBarHeight: app.globalData.statusBarHeight,
}
},
onLoad(e) {
},
onLoad(e) {},
watch: {
showEditBar: {
handler(newValue, oldValue) {
......@@ -124,6 +124,9 @@
this.showEditBar = b
this.$emit("showEditBarH", b);
},
showEditR(b) {
this.showEdit = b
},
fullChoice() {
this.$refs.follow.fullChoice()
},
......@@ -132,7 +135,10 @@
},
deleteCollect() {
this.$refs.follow.deleteCollect()
}
},
goRecommend() {
this.current = 1
},
}
}
</script>
......
vedio/pages/recommend/recommendVideo.vue
View file @ 48ec5df5
......@@ -21,9 +21,9 @@
<view class="flex" @click.stop="cLike(list.collect,list.id,list.mid);"
style="opacity: 0.9; margin-top: 10rpx;">
<image @click="collect(list.vedioId,index)" v-if="list.collect==0"
src="@/static/video/aixin.png" />
src="@/static/home_collect_img_0.png" />
<image @click="cancelCollect(list.vedioId,index)" v-if="list.collect==1"
src="@/static/video/aixinRed.png" />
src="@/static/home_collect_img_1.png" />
<text
style="margin-top: 110rpx;color: #FFFFFF;font-size: 26rpx; text-align: center;font-weight: bold;"
:class="{'likeNumActive':list.collect!=0}">{{list.hot}}</text>
......
vedio/pagesC/video/videoDetail.vue
View file @ 48ec5df5
......@@ -14,9 +14,9 @@
<!-- 点赞 -->
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image @click.stop="collect(data.vedioId,index)" v-if="data.collect==0"
src="@/static/video/aixin.png" />
src="@/static/home_collect_img_0.png" />
<image @click.stop="cancelCollect(data.vedioId,index)" v-if="data.collect==1"
src="@/static/video/aixinRed.png" />
src="@/static/home_collect_img_1.png" />
<text
style="margin: 0 auto;margin-top: 110rpx;color: #FFFFFF;font-size: 26rpx;font-weight: bold;"
:class="{'likeNumActive':data.collect!=0}">{{data.hot}}</text>
......
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