Commit 29c87335 authored by mengcuiguang's avatar mengcuiguang

首页开发、列表开发

parent 0f90c789
<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%;
padding-top: 20rpx;
padding-bottom: 15rpx;
color: black;
background-color: #f9f8f6;
font-size: 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: red;
// 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: white;
font-weight: bold;
font-size: 40rpx;
// background-color: aqua;
// border-bottom-color: $main-color;
padding-left: 30rpx;
padding-right: 30rpx;
padding-top: 10rpx;
border-radius: 10rpx;
background-color: #7161fa;
}
.tabs-line {
transform: scale(1);
}
}
}
&-title {
display: inline-block;
// border-bottom-width: 2px;
// border-bottom-style: solid;
// border-bottom-color: transparent;
}
}
</style>
<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>
......@@ -48,21 +48,7 @@
"navigationBarTextStyle": "black"
}
}, {
"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",
"path": "pages/doc/doc",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
......@@ -94,13 +80,6 @@
}, {
"root": "pagesD",
"pages": [{
"path": "watchRecord/watchRecord",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#2196f3",
"navigationBarTextStyle": "black" //用于配置状态栏的字体颜色
}
}, {
"path": "payRecord/payRecord",
"style": {
"navigationStyle": "custom",
......
<template>
<view class="body">
<tabs-center class="center" :tabs="tabs" v-model="tabIndex" @change="handleChange" />
<view class="content">
<!-- <z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
<view style="width: 100%;height: 150rpx;border-radius:10rpx;" v-for="(item, i) in dataList" :key="i"
@click="handleInfo(item)"> -->
<view style="display: flex;margin-left: 10rpx;margin-bottom: 10rpx;">
<view style="flex-grow: 2;display: flex;align-items: center;">
<image style="border-radius:10rpx; width: 120rpx;height: 150rpx;margin-top: 10rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="aspectFill"></image>
<view style="margin: 20rpx;">
<view style="font-size: 30rpx; color: black;">123</view>
<view style="font-size: 24rpx;margin-top: 10rpx;color: gray;">12344</view>
</view>
</view>
<view style="display: flex;flex-direction: column;justify-content: center;">
<image @click="handleDel()" style="width: 30rpx;height: 30rpx;margin: 10rpx;"
src="../../static/index/ic_quit_white.png" mode="aspectFill"></image>
</view>
</view>
<view style="display: flex;margin-left: 10rpx;">
<view style="flex-grow: 2;display: flex;align-items: center;">
<image style="border-radius:10rpx; width: 120rpx;height: 150rpx;margin-top: 10rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="aspectFill"></image>
<view style="margin: 20rpx;">
<view style="font-size: 30rpx; color: black;">123</view>
<view style="font-size: 24rpx;margin-top: 10rpx;color: gray;">12344</view>
</view>
</view>
<view style="display: flex;flex-direction: column;justify-content: center;">
<image @click="handleDel()" style="width: 30rpx;height: 30rpx;margin: 10rpx;"
src="../../static/index/ic_quit_white.png" mode="aspectFill"></image>
</view>
</view>
<!-- </view>
</z-paging> -->
</view>
<view >
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog cancelText="取消" confirmText="删除" title="提示" content="是否要删除当前记录?"
@confirm="dialogToggle" @close="dialogClose">
</uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
navigateTo,
} from '@/utils/fun.js';
const app = getApp();
export default {
name: "recommend",
mixins: [common],
data() {
return {
tabIndex: 0,
dataList: [],
tabs: [{
title: '全部',
value: 0
}, {
title: '文字',
value: 1
}, {
title: '表格',
value: 2
}, {
title: '中文',
value: 3
}, {
title: '英文',
value: 4
}, {
title: '测试',
value: 5
}, {
title: 'test',
value: 6
}]
}
},
onLoad(e) {},
methods: {
hide() {},
show() {
},
queryList(page, size) {
this.post({
url: '/vedio/list',
data: {
page,
size,
tabIndex
},
showLoading: false,
success: ({
data
}) => {
this.$refs.paging.complete(data.list);
}
});
},
handleChange(e) {
this.tabIndex = e.value;
this.$refs.paging.clear();
this.$refs.paging.reload();
},
handleDel() {
this.$refs.alertDialog.open();
},
dialogToggle() {
this.$refs.alertDialog.close();
// this.$refs.paging.clear();
// this.$refs.paging.reload();
},
dialogClose() {
this.$refs.alertDialog.close();
}
}
}
</script>
<style lang="scss" scoped>
.body {
background-color: white;
}
</style>
\ No newline at end of file
......@@ -2,11 +2,10 @@
<view class="body">
<view style="height: 100%;">
<indexPage v-show="currentPage==0" ref="index" />
<recommendPage v-on:showEditBarH="showEditBarH" v-on:changeBottomBarColor="changeBottomBarColor"
v-show="currentPage==1" ref="recommend" />
<docPage v-show="currentPage==1" ref="doc" />
<userPage v-show="currentPage==2" ref="user" />
</view>
<view v-if="!isShowBlackBar" class="tabs-bar">
<view class="tabs-bar">
<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(0)">
<view style="margin: 16rpx 0 11rpx;">
......@@ -15,7 +14,7 @@
</image>
<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
</view>
剧场
首页
</view>
<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(1)">
......@@ -24,7 +23,7 @@
mode="heightFix"></image>
<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
</view>
推荐
文档
</view>
<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(2)">
......@@ -36,46 +35,6 @@
我的
</view>
</view>
<view v-if="isShowBlackBar" class="tabs-bar2">
<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(0)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
</view>
剧场
</view>
<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>
<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
</view>
推荐
</view>
<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(2)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
</view>
我的
</view>
</view>
<view v-if="showEditBar" 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>
......@@ -89,7 +48,7 @@
// 首页
import indexPage from "@/pages/index/index.vue";
import recommendPage from "@/pages/recommend/recommend.vue";
import docPage from "@/pages/doc/doc.vue";
import userPage from "@/pages/my/my.vue";
export default {
......@@ -97,16 +56,12 @@
mixins: [common],
components: {
indexPage,
recommendPage,
docPage,
userPage
},
data() {
return {
isFirstLoad: true,
currentPage: 0,
showEditBar: false,
isFullChoice: false,
isShowBlackBar: false
currentPage: 0
}
},
onLoad(options) {
......@@ -121,7 +76,7 @@
// if (this.currentPage == 0) {
// this.$refs.index.show();
// } else if (this.currentPage == 1) {
// this.$refs.recommend.show();
// this.$refs.doc.show();
// } else if (this.currentPage == 2) {
// this.$refs.user.show();
// }
......@@ -142,38 +97,18 @@
},
loadComponentData() {
if (this.currentPage == 0) {
this.changeBottomBarColor(false)
this.$refs.index.show();
this.$refs.recommend.hide();
this.$refs.doc.hide();
this.$refs.user.hide();
} else if (this.currentPage == 1) {
this.$refs.recommend.show();
this.$refs.doc.show();
this.$refs.index.hide();
this.$refs.user.hide();
} else if (this.currentPage == 2) {
this.changeBottomBarColor(false)
this.$refs.user.show();
this.$refs.index.hide();
this.$refs.recommend.hide();
this.$refs.doc.hide();
}
},
changeBottomBarColor(b) {
this.isShowBlackBar = b
},
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();
}
}
}
......@@ -183,37 +118,4 @@
.body {
height: 100%;
}
.editBar {
position: absolute;
bottom: 0;
width: 100%;
height: 120rpx;
background: white;
display: flex;
.editItem {
height: 120rpx;
line-height: 120rpx;
text-align: center;
width: 50%;
}
}
.tabs-bar2 {
display: flex;
background-color: black;
.tab {
flex: 1;
text-align: center;
font-size: 26rpx;
font-weight: bold;
color: white;
&.active {
color: #F8425A;
}
}
}
</style>
\ No newline at end of file
......@@ -2,28 +2,31 @@
<view class="body">
<scroll-view scroll-y style="height: 100%;">
<view class="content">
<image style="border-radius:10rpx; width: 100%;height: 360rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="scaleToFill"></image>
<image style="border-radius:10rpx; width: 100%;height: 420rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_main1.png" mode="scaleToFill"></image>
<view
style="font-size: 30rpx;font-weight: 777;margin-top: 20rpx;margin-bottom: 16rpx;margin-left: 40rpx;">
热门功能</view>
<view
style="display: flex;flex-direction: row;width: 100%;justify-content:space-between;height: 300rpx;">
<image style="border-radius:10rpx; width: 50%;height: 300rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="scaleToFill"></image>
style="display: flex;flex-direction: row;width: 100%;justify-content:space-between;height: 330rpx;">
<image style="border-radius:10rpx; width: 50%;height: 330rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_main2.png" mode="scaleToFill">
</image>
<view
style="display: flex;flex-direction: column;width: 50%;justify-content:space-between;margin-left: 10rpx;">
<image style="border-radius:10rpx; width: 100%;height: 150rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="scaleToFill"></image>
<image style="border-radius:10rpx; width: 50%;height: 150rpx;margin-top: 10rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="scaleToFill"></image>
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_main3.png" mode="scaleToFill">
</image>
<image style="border-radius:10rpx; width: 50%;height: 155rpx;margin-top: 10rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_main4.png" mode="scaleToFill">
</image>
</view>
</view>
<view
style="font-size: 30rpx;font-weight: 777;margin-top: 80rpx;margin-bottom: 16rpx;margin-left: 40rpx;">
其他</view>
<image style="border-radius:10rpx; width: 100%;height: 130rpx;"
src="https://content.volccdn.com/obj/feedcoop/skit/0641.jpg" mode="scaleToFill"></image>
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_main5.png" mode="scaleToFill"></image>
</view>
</scroll-view>
</view>
......
......@@ -17,7 +17,7 @@
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 24rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
解锁全部功能
</view>
<view v-else style="font-size: 24rpx;color: #5b1500;margin-top: 12rpx;">
到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}
......@@ -36,10 +36,10 @@
</view>
<view class="infobg" style="margin: 20rpx;">
<view class="item arrow" @click="handleWatchRecord">
<!-- <view class="item arrow" @click="handleWatchRecord">
观看记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
</view> -->
<view class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
......
<template>
<view style="background: white;">
<scroll-view scroll-y="true"
:style="'height: '+(windowHeight -120)+'px;margin-top:'+(titleBarHeight +statusBarHeight)+'px;'">
<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.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;height: 36rpx;">{{value.title}}</view>
<view class="text" style="font-size: 22rpx;color: gray;height: 30rpx;">
{{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;">
<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>
<script>
import common from '@/mixins/common';
import {
navigateTo,
} from '@/utils/fun.js';
const app = getApp();
export default {
name: "follow",
mixins: [common],
data() {
return {
titleBarHeight: app.globalData.titleBarHeight,
statusBarHeight: app.globalData.statusBarHeight,
windowHeight: 0,
dataList: [],
isEditStyle: false
}
},
watch: {
isEditStyle: {
handler(newValue, oldValue) {
this.$emit("showEditBarR", newValue)
}
},
},
onLoad(e) {},
methods: {
show() {
this.windowHeight = uni.getSystemInfoSync().windowHeight
this.loadData()
},
loadData() {
// 收藏记录
this.post({
url: '/vedio/collectList',
showLoading: false,
success: ({
data
}) => {
this.dataList = data.list;
if (this.dataList.length > 0) {
this.$emit("showEditR", true)
} else {
this.$emit("showEditR", false)
}
}
});
},
changeEditStyle(b) {
this.isEditStyle = b
if (!this.isEditStyle) {
this.noChoice()
}
},
goRecommend() {
this.$emit("goRecommend")
},
click(detail) {
navigateTo(`/pagesC/video/videoDetail?data=` + encodeURIComponent(JSON.stringify(detail)))
},
longClick(key) {
this.isEditStyle = true
this.dataList[key].isChecked = true
},
onChange(key) {
this.dataList[key].isChecked = !this.dataList[key].isChecked
},
cbClick(key) {
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++) {
if (this.dataList[i].isChecked) {
list.push(this.dataList[i].vedioId)
}
}
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
list
},
showLoading: false,
success: ({
data
}) => {
this.isEditStyle = false
uni.showToast({
title: "删除成功"
})
this.loadData()
}
});
},
}
}
</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 {
margin-top: 10rpx;
margin-left: 10rpx;
// position: absolute;
}
</style>
\ No newline at end of file
<template>
<view class="body">
<view class="tabContainer" :style="
'height:' +
titleBarHeight +
'px;line-height:' +
titleBarHeight +
'px;padding-top:' +
statusBarHeight +
'px;background-color:transparent'
">
<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'" />
</view>
<view v-show="showEditBar" style="width: 300rpx;background: white;z-index: 999;">
<view
style="font-size: 36rpx;text-align: center;align-items: center;height:100rpx;line-height: 100rpx;">
追剧
</view>
</view>
<view v-if="(!showEditBar && showTap)">
<u-tabs :list="tabs" :current="current" @change="handleChange" lineWidth="30" :scrollable="false"
:lineColor="current==0?'#f56c6c':'#ffffff'" :activeStyle="{
color: current==0?'#000000':'#ffffff',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
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" v-on:goRecommend="goRecommend" v-on:showEditR="showEditR"
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';
const app = getApp();
export default {
name: "recommend",
mixins: [common],
components: {
followPage,
recommendVideoPage
},
data() {
return {
current: 1,
tabIndex: 1,
tabs: [{
name: '追剧'
}, {
name: '推荐'
}],
showEditBar: false,
showEdit: false,
showTap: false,
titleBarHeight: app.globalData.titleBarHeight,
titleButtonWidth: app.globalData.titleButtonWidth,
statusBarHeight: app.globalData.statusBarHeight,
}
},
onLoad(e) {},
watch: {
showEditBar: {
handler(newValue, oldValue) {
this.$refs.follow.changeEditStyle(newValue);
}
},
},
methods: {
hide() {
this.$refs.recommendVideo.stop();
},
show() {
this.$nextTick(() => {
// 延迟渲染,否则位置错乱
this.showTap = true
})
if (this.current == 0) {
this.$refs.follow.show();
this.$refs.recommendVideo.stop();
this.$emit("changeBottomBarColor", false);
} else if (this.current == 1) {
this.$refs.recommendVideo.show();
this.$emit("changeBottomBarColor", true);
}
},
handleChange(event) {
this.current = event.index;
this.show()
},
swiperChange(event) {
this.current = event.detail.current
this.show()
},
showEditBarR(b) {
this.showEditBar = b
this.$emit("showEditBarH", b);
},
showEditR(b) {
this.showEdit = b
},
fullChoice() {
this.$refs.follow.fullChoice()
},
noChoice() {
this.$refs.follow.noChoice()
},
deleteCollect() {
this.$refs.follow.deleteCollect()
},
goRecommend() {
this.current = 1
},
}
}
</script>
<style lang="scss" scoped>
.body {
background: white;
width: 100%;
height: 100%;
}
.tabContainer {
width: 100%;
position: absolute;
z-index: 100;
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
}
.swiper {
height: 100%;
}
.recommendTitle {}
</style>
\ No newline at end of file
This diff is collapsed.
<template>
<view class="body">
<status-title :showBack="true">观看记录</status-title>
<z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
<view style="font-size: 30rpx;font-weight: 777;margin-left: 12rpx;margin-top: 10rpx;">最近观看</view>
<view v-for="(item, i) in dataList" :key="i">
<view style="display: flex;flex-direction: row;justify-content:space-between;margin: 20rpx;">
<view style="display: flex;align-items: center;" @click="handleInfo(item)">
<image class="img" :src="item.coverImage" mode="aspectFill"></image>
<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
<view style="font-size: 30rpx;color: black;">{{item.title}}</view>
<view style="font-size: 22rpx;color: gray;margin-top: 16rpx;">观看至第{{item.seeIndex}}</view>
</view>
</view>
<view style="display: flex;align-items: center;margin-right: 8rpx;">
<view style="display: flex;flex-direction: column;">
<image v-if="item.collect==0" @click="handleXing(item)"
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;padding-right: 4rpx;"
src="../../static/home_collect_img_0.png"></image>
<image v-else @click="handleXing(item)"
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;padding-right: 4rpx;"
src="../../static/home_collect_img_1.png"></image>
<view
style="font-size: 22rpx;color: gray;margin-top: 10rpx;display: flex;justify-content: center;">
追剧</view>
</view>
</view>
</view>
</view>
</z-paging>
</view>
</template>
<script>
import common from '@/mixins/common';
import {
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 {
dataList: []
};
},
methods: {
show() {
if (this.$refs.paging != null) {
this.$refs.paging.refresh();
}
},
queryList(page, size) {
this.post({
url: '/vedio/history',
showLoading: false,
success: ({
data
}) => {
this.$refs.paging.complete(data.list);
}
});
},
handleInfo(item) {
navigateTo(`/pagesC/video/videoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
},
handleXing(item) {
var that = this;
//0未收藏,1收藏
if (item.collect == 0) {
this.post({
url: '/vedio/collect',
data: {
vedioId: item.vedioId,
},
showLoading: false,
success: ({
data
}) => {
that.show();
}
});
} else {
this.post({
url: '/vedio/cancelCollect',
data: {
vedioId: item.vedioId,
},
showLoading: false,
success: ({
data
}) => {
that.show();
}
});
}
}
}
};
</script>
<style lang="scss">
@import '@/scss/uni.scss';
.body {
background-color: whitesmoke;
}
.img {
position: relative;
border-radius: 10rpx;
width: 180rpx;
height: 240rpx;
}
</style>
\ No newline at end of file
## 1.7.9(2022-04-02)
- 修复 弹出层内部无法滚动的bug
## 1.7.8(2022-03-28)
- 修复 小程序中高度错误的bug
## 1.7.7(2022-03-17)
- 修复 快速调用open出现问题的Bug
## 1.7.6(2022-02-14)
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5(2022-01-19)
- 修复 isMaskClick 失效的bug
## 1.7.4(2022-01-19)
- 新增 cancelText \ confirmText 属性 ,可自定义文本
- 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题
## 1.7.3(2022-01-13)
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2(2021-11-26)
- 优化 组件示例
## 1.7.1(2021-11-26)
- 修复 vuedoc 文字错误
## 1.7.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2(2021-08-24)
- 新增 支持国际化
## 1.6.1(2021-07-30)
- 优化 vue3下事件警告的问题
## 1.6.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.0(2021-06-23)
- 新增 mask-click 遮罩层点击事件
## 1.4.5(2021-06-22)
- 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
## 1.4.4(2021-06-18)
- 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
## 1.4.3(2021-06-08)
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容,再点击遮罩无法关闭的Bug
## 1.4.2(2021-05-12)
- 新增 组件示例地址
## 1.4.1(2021-04-29)
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题
## 1.4.0 (2021-04-29)
- 新增 type 属性的 left\right 值,支持左右弹出
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性,是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能,优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.9(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.2.8(2021-02-05)
- 调整为uni_modules目录规范
## 1.2.7(2021-02-05)
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('keyup', listener)
})
},
render: () => {}
}
// #endif
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits:['confirm','close'],
props: {
value: {
type: [String, Number],
default: ''
},
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
},
cancelText:{
type: String,
default: ''
},
confirmText:{
type: String,
default: ''
}
},
data() {
return {
dialogType: 'error',
focus: false,
val: ""
}
},
computed: {
okText() {
return this.confirmText || t("uni-popup.ok")
},
closeText() {
return this.cancelText || t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
this.val = val
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value
} else {
this.dialogType = this.type
}
},
mounted() {
this.focus = true
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input'){
this.$emit('confirm', this.val)
}else{
this.$emit('confirm')
}
if(this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if(this.beforeClose) return
this.popup.close()
},
close(){
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 25px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6C6C6C;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 16px;
color: #333;
}
.uni-button-color {
color: #007aff;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>
<template>
<view class="uni-popup-message">
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
<slot>
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
</slot>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
/**
* PopUp 弹出层-消息提示
* @description 弹出层-消息提示
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} message 消息提示文字
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
*/
export default {
name: 'uniPopupMessage',
mixins:[popup],
props: {
/**
* 主题 success/warning/info/error 默认 success
*/
type: {
type: String,
default: 'success'
},
/**
* 消息文字
*/
message: {
type: String,
default: ''
},
/**
* 显示时间,设置为 0 则不会自动关闭
*/
duration: {
type: Number,
default: 3000
},
maskShow:{
type:Boolean,
default:false
}
},
data() {
return {}
},
created() {
this.popup.maskShow = this.maskShow
this.popup.messageChild = this
},
methods: {
timerClose(){
if(this.duration === 0) return
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.popup.close()
},this.duration)
}
}
}
</script>
<style lang="scss" >
.uni-popup-message {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
}
.uni-popup-message__box {
background-color: #e1f3d8;
padding: 10px 15px;
border-color: #eee;
border-style: solid;
border-width: 1px;
flex: 1;
}
@media screen and (min-width: 500px) {
.fixforpc-width {
margin-top: 20px;
border-radius: 4px;
flex: none;
min-width: 380px;
/* #ifndef APP-NVUE */
max-width: 50%;
/* #endif */
/* #ifdef APP-NVUE */
max-width: 500px;
/* #endif */
}
}
.uni-popup-message-text {
font-size: 14px;
padding: 0;
}
.uni-popup__success {
background-color: #e1f3d8;
}
.uni-popup__success-text {
color: #67C23A;
}
.uni-popup__warn {
background-color: #faecd8;
}
.uni-popup__warn-text {
color: #E6A23C;
}
.uni-popup__error {
background-color: #fde2e2;
}
.uni-popup__error-text {
color: #F56C6C;
}
.uni-popup__info {
background-color: #F2F6FC;
}
.uni-popup__info-text {
color: #909399;
}
</style>
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}
import en from './en.json'
import zhHans from './zh-Hans.json'
import zhHant from './zh-Hant.json'
export default {
en,
'zh-Hans': zhHans,
'zh-Hant': zhHant
}
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
// #ifdef H5
export default {
name: 'Keypress',
props: {
disable: {
type: Boolean,
default: false
}
},
mounted () {
const keyNames = {
esc: ['Esc', 'Escape'],
tab: 'Tab',
enter: 'Enter',
space: [' ', 'Spacebar'],
up: ['Up', 'ArrowUp'],
left: ['Left', 'ArrowLeft'],
right: ['Right', 'ArrowRight'],
down: ['Down', 'ArrowDown'],
delete: ['Backspace', 'Delete', 'Del']
}
const listener = ($event) => {
if (this.disable) {
return
}
const keyName = Object.keys(keyNames).find(key => {
const keyName = $event.key
const value = keyNames[key]
return value === keyName || (Array.isArray(value) && value.includes(keyName))
})
if (keyName) {
// 避免和其他按键事件冲突
setTimeout(() => {
this.$emit(keyName, {})
}, 0)
}
}
document.addEventListener('keyup', listener)
// this.$once('hook:beforeDestroy', () => {
// document.removeEventListener('keyup', listener)
// })
},
render: () => {}
}
// #endif
export default {
data() {
return {
}
},
created(){
this.popup = this.getParent()
},
methods:{
/**
* 获取父元素实例
*/
getParent(name = 'uniPopup') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false
parentName = parent.$options.name;
}
return parent;
},
}
}
This diff is collapsed.
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.7.9",
"description": " Popup 组件,提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
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