Commit fb5f7626 authored by mengcuiguang's avatar mengcuiguang

代码优化

parent 6137e34b
<template>
<view class="body">
<!-- <scroll-view :scroll-y="true"> -->
<z-paging style="height: 100%;">
<z-paging style="height: 100%;background-color: #f5f5f5;">
<view
:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+10+'px;'">
<image class="avatar" src="@/static/logo-about.png"></image>
<view>
<view style="font-size: 32rpx;color: black;margin-left: 20rpx;">用户ID:{{userBean.idcode}}</view>
</view>
<!-- <button text="微信用户一键登录" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">123123</button> -->
</view>
<view v-if="userBean.showVipInner && os === 'android' "
style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
<view style="display: flex;flex-direction: column;justify-content: center;">
<view style="font-size: 36rpx;color: #5b1500;font-weight: 777;">
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
</view>
<view v-else style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}
</view>
<view v-if="userBean.expireTime<=0" @click="handleCoinPay"
style="width: 210rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;margin-top: 30rpx;">
立即开通
</view>
<view v-else style="width: 210rpx;height: 60rpx;padding-bottom: 4rpx;margin-top: 30rpx;">
</view>
</view>
<image style="border-radius:10rpx; width: 130rpx;height: 100rpx;margin-right: 20rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png" mode="scaleToFill"></image>
</view>
<view v-if="os === 'android' "
style="display: flex;height: 200rpx;margin: 20rpx;background: #f5ca86;border-radius: 20rpx;">
<view
style="display: flex;height: 180rpx;margin:40rpx 20rpx ;background: #f5ca86;border-radius: 20rpx;">
<view style="flex-grow: 2; margin-left: 20rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
......@@ -47,16 +19,17 @@
<image
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_my_coin.png"></image>
<view style="font-size: 36rpx;font-weight: 777;">看点充值</view>
</view>
<view style="font-size: 28rpx;color: #5b1500;margin-top: 20rpx;">海量看点狂洒中,好剧等你来解锁</view>
<view style="font-size: 36rpx;">看点余额:{{userBean.point}}</view>
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 28rpx;color: #5b1500;margin-top: 20rpx;">海量看点狂洒中,好剧等你来解锁</view>
<view v-else style="font-size: 28rpx;color: #5b1500;margin-top: 20rpx;">到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}</view>
</view>
</view>
<view style="width: 220rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
<view style="font-size: 30rpx;color: #5b1500;margin-bottom: 20rpx;">{{userBean.point}}</view>
<view @click="handleCoinPay"
<view v-if="userBean.expireTime<=0" @click="handleCoinPay"
style="width: 160rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;">
去充值
</view>
......@@ -67,7 +40,7 @@
<view class="infobg" style="margin: 20rpx;">
<view v-if="userBean.showVipInner && os === 'android' " class="item arrow" @click="handlePayRecord">
<view class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
......
......@@ -21,53 +21,19 @@
{
"path": "pages/home",
"style": {
"navigationStyle": "default",
"navigationStyle": "default",
"navigationBarTitleText": "巨爽短剧",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000"
}
}, {
"path": "pages/index/index",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000"
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/my/my",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000"
}
}, {
"path": "pages/brower/brower",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
}, {
"path": "pages/recommend/recommend",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff"
}
}, {
"path": "pages/recommend/follow",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "#000000"
}
}, {
"path": "pages/recommend/recommendVideo",
"style": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "#ffffff"
}
}
],
// 分包配置
......@@ -85,7 +51,7 @@
"root": "pagesC",
"pages": [{
"path": "ttvideo/ttVideoDetail",
"style": {
"style": {
"backgroundColor": "#000000",
"navigationStyle": "default",
"navigationBarBackgroundColor": "#000000",
......@@ -139,14 +105,6 @@
"pages/home": {
"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
"packages": ["pagesA", "pagesC", "pagesD"] //进入页面后预下载分包
},
"pages/recommend/recommend": {
"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
"packages": ["pagesC"] //进入页面后预下载分包
},
"pages/my/my": {
"network": "all", //在指定网络下预下载,可选值为:all(不限网络)、wifi(仅wifi下预下载)
"packages": ["pagesD"] //进入页面后预下载分包
}
},
"globalStyle": {
......
......@@ -219,7 +219,7 @@
<style lang="scss">
.body {
height: 100%;
background-color: white;
background-color: #f5f5f5;
}
.editBar {
......
<template>
<view class="body">
<z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
<view class="content">
<swiper class="banner" :style="'margin-top:'+statusBarHeight+'px;'" :indicator-dots="true"
:autoplay="true" :interval="2000" :duration="500">
<swiper-item v-for="banner in bannerList" :key="banner.vedioId" @click="handleBanner(banner)">
<image class="banner-img" :src="banner.tabImage" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view
style="display: flex;flex-direction: column;background-color:white;border-radius:10rpx;margin-top: 20rpx;">
<view style="font-size: 30rpx;font-weight: 777;margin-left: 12rpx;margin-top: 18rpx;">排行榜</view>
<scroll-view scroll-x="true" style="white-space: nowrap; margin-top: 18rpx;">
<block v-for="(item, index) in topList" :key="item.vedioId">
<view @click="handleTop(item)"
style="display:inline-block;background-color:white;border-radius:10rpx;width: 200rpx;margin: 5rpx 10rpx 15rpx 10rpx;">
<view style="position: relative;">
<view style="position: relative;">
<view style="position: absolute;z-index: 10;margin-left: 20rpx;">
<view style="position: relative;">
<view style="
position: absolute;
z-index: 10;
width: 50rpx;
text-align: center;
margin-top: 8rpx;
font-size: 24rpx;
color: white;">
{{index+1}}
</view>
<image v-if="index==0"
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/y43.png"></image>
<image v-else-if="index==1"
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/y42.png"></image>
<image v-else-if="index==2"
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/y41.png"></image>
<image v-else
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/y4.png"></image>
</view>
</view>
<image style="border-radius:10rpx; width: 200rpx;height: 260rpx;"
:src="item.coverImage" mode="aspectFill"></image>
</view>
<view style="
position: absolute;
bottom: 10rpx;
background-color: black;
width: 100%;
opacity: 0.5;
">
<view style="display: flex;align-items: center;margin-left: 10rpx;">
<image
style="width: 20rpx;height: 20rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/ic_index_play.png"></image>
<view style="font-size: 22rpx;color: white;">{{item.showNum}}</view>
</view>
</view>
</view>
<view style="font-size: 26rpx;margin-top: 10rpx;">{{item.title}}</view>
<view style="font-size: 22rpx;margin-top: 10rpx;"
v-if="item.orderTags!=null&&item.orderTags.length>0">
<scroll-view scroll-x="true">
<block v-for="t in item.orderTags" :key="item.orderTags">
<view style="display:inline-block;margin-right: 4rpx;">{{t}} </view>
</block>
</scroll-view>
</view>
</view>
</block>
</scroll-view>
</view>
<view
style="font-size: 30rpx;font-weight: 777;margin-top: 20rpx;margin-bottom: 10rpx;margin-left: 4rpx;">
推荐</view>
<view style="column-count: 2;column-gap: 20rpx;margin-top: 20rpx;">
<view class="item-wrap" v-for="(item, i) in dataList" :key="i" v-if="i % 2 == 0"
@click="handleInfo(item)">
<view style="position: relative;">
<image class="img" :src="item.coverImage" mode="aspectFill"></image>
<view style="
position: absolute;
bottom: 10rpx;
width: 95%;
padding: 10rpx;
background-color: black;
opacity: 0.5;
">
<view style="display: flex;flex-direction: row;justify-content:space-between;">
<view style="display: flex;align-items: center;">
<image
style="width: 20rpx;height: 20rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/ic_index_play.png"></image>
<view style="font-size: 22rpx;color: white;">{{item.showNum}}</view>
</view>
<view style="font-size: 22rpx;color: white;font-weight: 777;">{{item.vedioTotal}}
</view>
</view>
</view>
</view>
<view style="font-size: 30rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.title}}</view>
<!-- <view style="font-size: 22rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.vedioDesc}}</view> -->
</view>
<view class="item-wrap" v-for="(item, i) in dataList" :key="i" v-if="i % 2 == 1"
@click="handleInfo(item)">
<view style="position: relative;">
<image class="img" :src="item.coverImage" mode="aspectFill"></image>
<view style="
position: absolute;
bottom: 10rpx;
width: 95%;
padding: 10rpx;
background-color: black;
opacity: 0.5;
">
<view style="display: flex;flex-direction: row;justify-content:space-between;">
<view style="display: flex;align-items: center;">
<image
style="width: 20rpx;height: 20rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="../../static/index/ic_index_play.png"></image>
<view style="font-size: 22rpx;color: white;">{{item.showNum}}</view>
</view>
<view style="font-size: 22rpx;color: white;font-weight: 777;">{{item.vedioTotal}}
</view>
</view>
</view>
</view>
<view style="font-size: 30rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.title}}</view>
<!-- <view style="font-size: 22rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.vedioDesc}}</view> -->
</view>
</view>
</view>
</z-paging>
<view v-if="newRecordBean!=null"
style="width: 97%;height: 150rpx;margin: 10rpx;opacity: 0.8;background-color: black;z-index: 20;position: absolute;bottom: 0;border-radius:10rpx;">
<view style="display: flex;margin-left: 10rpx;">
<view style="flex-grow: 2;display: flex;align-items: center;">
<image style="border-radius:10rpx; width: 100rpx;height: 130rpx;margin-top: 10rpx;"
:src="newRecordBean.coverImage" mode="aspectFill"></image>
<view style="margin: 20rpx;">
<view style="font-size: 30rpx; color: white;">{{newRecordBean.title}}</view>
<view style="font-size: 24rpx;margin-top: 6rpx;color: white;">上次观看至第{{newRecordBean.seeIndex}}
</view>
<view style="font-size: 22rpx;"
v-if="newRecordBean.orderTags!=null&&newRecordBean.orderTags.length>0">
<scroll-view scroll-x="true">
<block v-for="t in newRecordBean.orderTags" :key="newRecordBean.orderTags">
<view style="display:inline-block;margin-right: 4rpx;">{{t}} </view>
</block>
</scroll-view>
</view>
</view>
</view>
<view style="display: flex;flex-direction: column;align-items: flex-end;">
<image @click="handleBottomClose()"
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin: 10rpx;"
src="../../static/index/ic_quit_white.png" mode="aspectFill"></image>
<view @click="handleBottomPlay(newRecordBean)" style="
width: 160rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background-color: red;
border-radius:30rpx;
color: white;
font-size: 24rpx;
margin-right: 20rpx;">
继续观看
</view>
</view>
</view>
</view>
<!-- <uni-popup type="center" ref="select">
<view>
<view style="font-size: 30rpx;font-weight: 777;color: white;">刚刚看的</view>
<view style="text-align: center;">
<view>
<video :id="recommendBean.vedioId" :loop="true" :enable-progress-gesture="false"
:show-loading="true" :show-fullscreen-btn="false"
style="width:100%; height:100%;background: #f56c6c;" :src="recommendBean.vedioUrl"
:poster="recommendBean.coverImage" play-btn-position="center" object-fit="contain" />
</view>
<view>123</view>
<view @click="handleVipPay"
style="width: 350rpx;height: 80rpx;background-color: #f2575b;border-radius:20rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;">
立即试看
</view>
</view>
</view>
</uni-popup> -->
</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: [],
bannerList: [],
newRecordBean: null,
topList: [],
statusBarHeight: app.globalData.statusBarHeight,
};
},
methods: {
show() {
// 匹配视频
this.showFirstDialog();
// 轮播图
this.post({
url: '/vedio/topTabs',
showLoading: false,
success: ({
data
}) => {
this.bannerList = data.list;
}
});
// 排行榜
this.post({
url: '/vedio/orders',
showLoading: false,
success: ({
data
}) => {
this.topList = data.list;
}
});
// 最近观看剧
this.post({
url: '/vedio/newest',
data: {},
showLoading: false,
success: ({
data
}) => {
if (data.vedio != null) {
this.newRecordBean = data.vedio;
}
}
});
if (this.$refs.paging != null) {
this.$refs.paging.refresh();
}
},
hide() {
},
queryList(page, size) {
// 推荐列表
this.post({
url: '/vedio/list',
data: {
page,
size
},
showLoading: false,
success: ({
data
}) => {
this.$refs.paging.complete(data.list);
}
});
},
handleBanner(item) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
},
handleInfo(item) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
},
handleTop(item) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
},
handleBottomPlay(item) {
navigateTo(`/pagesC/video/newVideoDetail?data=` + encodeURIComponent(JSON.stringify(item)));
},
handleBottomClose() {
this.newRecordBean = null;
this.post({
url: '/vedio/colseNewest',
data: {},
showLoading: false,
success: ({
data
}) => {}
});
},
showFirstDialog() {
let that = this;
// 匹配用户展示视频
let showFirstVedio = uni.getStorageSync('showFirstVedio') || '';
if (showFirstVedio == '') {
uni.setStorage({
key: 'showFirstVedio',
data: 'true'
});
setTimeout(() => {
that.post({
url: '/vedio/firstVedio',
data: {},
showLoading: false,
success: ({
data
}) => {
if (data.vedioMsg != null) {
navigateTo(`/pagesC/video/newVideoDetail?data=` +
encodeURIComponent(
JSON.stringify(data.vedioMsg)));
}
}
});
}, 800);
}
}
}
};
</script>
<style lang="scss">
.body {
background-color: whitesmoke;
position: relative;
}
.item-wrap {
width: 100%;
border-radius: 10rpx;
background-color: #fff;
break-inside: avoid;
margin-bottom: 20rpx;
height: 470rpx;
}
.img {
position: relative;
border-radius: 10rpx;
width: 100%;
height: 390rpx;
}
</style>
\ No newline at end of file
<template>
<view class="body">
<!-- <scroll-view :scroll-y="true"> -->
<z-paging style="height: 100%;">
<view
:style="'display: flex;flex-direction: row;align-items: center;margin: 20rpx;padding-left: 10rpx;margin-top:'+statusBarHeight+'px;'">
<image class="avatar" src="@/static/logo-about.png"></image>
<view>
<view style="font-size: 32rpx;color: black;margin-left: 20rpx;">用户ID:{{userBean.idcode}}</view>
</view>
<!-- <button text="微信用户一键登录" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">123123</button> -->
</view>
<view v-if="userBean.showVipInner && os === 'android' "
style="display: flex;flex-direction: row;background: #f5ca86;margin: 20rpx;padding: 40rpx;border-radius:20rpx;align-items: center;justify-content:space-between;">
<view style="display: flex;flex-direction: column;justify-content: center;">
<view style="font-size: 36rpx;color: #5b1500;font-weight: 777;">
{{userBean.expireTime<=0 ? '开通VIP会员' : 'VIP会员'}}
</view>
<view v-if="userBean.expireTime<=0" style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
解锁全部短剧
</view>
<view v-else style="font-size: 30rpx;color: #5b1500;margin-top: 12rpx;">
到期时间:{{userBean.expireTime*1000 | formatDate('yyyy-MM-dd')}}
</view>
<view v-if="userBean.expireTime<=0" @click="handleCoinPay"
style="width: 210rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;margin-top: 30rpx;">
立即开通
</view>
<view v-else style="width: 210rpx;height: 60rpx;padding-bottom: 4rpx;margin-top: 30rpx;">
</view>
</view>
<image style="border-radius:10rpx; width: 130rpx;height: 100rpx;margin-right: 20rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/bg_my_vip.png" mode="scaleToFill"></image>
</view>
<view v-if="os === 'android' "
style="display: flex;height: 200rpx;margin: 20rpx;background: #f5ca86;border-radius: 20rpx;">
<view style="flex-grow: 2; margin-left: 20rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
<view style="display: flex;align-items: center;">
<image
style="width: 50rpx;height: 50rpx;display: flex;align-items: right;margin-right: 10rpx;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_my_coin.png"></image>
<view style="font-size: 36rpx;font-weight: 777;">看点充值</view>
</view>
<view style="font-size: 28rpx;color: #5b1500;margin-top: 20rpx;">海量看点狂洒中,好剧等你来解锁</view>
</view>
</view>
<view style="width: 220rpx;">
<view
style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
<view style="font-size: 30rpx;color: #5b1500;margin-bottom: 20rpx;">{{userBean.point}}</view>
<view @click="handleCoinPay"
style="width: 160rpx;height: 60rpx;background-color: #5b1500;border-radius:30rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;padding-bottom: 4rpx;">
去充值
</view>
</view>
</view>
</view>
<view class="infobg" style="margin: 20rpx;">
<view v-if="userBean.showVipInner && os === 'android' " class="item arrow" @click="handlePayRecord">
我的订单
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view v-if="os === 'android' " class="item arrow" @click="handleDotRecord">
看点记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view v-if="os === 'android' " class="item arrow" @click="handleUseDotRecord">
消费记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handleWatchRecord">
观看记录
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
<view class="item arrow" @click="handlePhone">
联系客服
<view class="item_bd ellipsis" style="margin-left: 58rpx;"></view>
</view>
</view>
<view style="display: flex;justify-content: center;margin-top: 20rpx;font-size: 26rpx;color: gray;">
{{ versionName }}
</view>
</z-paging>
<!-- </scroll-view> -->
<coin-popup :show="showAnimate" @close="showAnimate = false" @paySuccess="paySuccess">
</coin-popup>
</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 {
statusBarHeight: app.globalData.statusBarHeight,
userBean: {},
showAnimate: false,
windowHeight: 0,
os: 'android',
versionName: app.globalData.versionName,
corpid: '', // 企业ID
curl: '', // 客服链接
};
},
methods: {
show() {
this.os = wx.getSystemInfoSync().platform;
this.windowHeight = uni.getSystemInfoSync().windowHeight
// loadData() {
this.post({
url: '/user/baseMsg',
showLoading: false,
success: ({
data
}) => {
this.userBean = data;
}
});
},
hide() {
},
handleDotRecord() {
// 看点记录
navigateTo(`/pagesD/dotRecord/dotRecord`)
},
handleUseDotRecord() {
// 看点消费记录
navigateTo(`/pagesD/useDotRecord/useDotRecord`)
},
handleWatchRecord() {
navigateTo(`/pagesD/watchRecord/watchRecord`)
},
handleCoinPay() {
this.showAnimate = true;
},
handlePayRecord() {
navigateTo(`/pagesD/payRecord/payRecord`)
},
handleVipPay() {
navigateTo(`/pagesA/vipPay/vipPay`)
},
handlePhone() {
// if (this.corpid != '' && this.curl != '') {
// wx.openCustomerServiceChat({
// extInfo: {
// url: this.curl
// },
// corpId: this.corpid,
// success(res) {},
// fail(e) {
// console.log(e)
// }
// })
// } else {
// let that = this
// // 联系我们
// this.post({
// url: '/vedio/customerServiceNumbers',
// showLoading: false,
// success: ({
// data
// }) => {
// let datas = data.customerServiceNumbers.split(',')
// that.corpid = datas[0]
// that.curl = datas[1]
// wx.openCustomerServiceChat({
// extInfo: {
// url: that.curl
// },
// corpId: that.corpid,
// success(res) {},
// fail(e) {
// console.log(e)
// }
// })
// }
// });
// }
wx.makePhoneCall({
phoneNumber: '4000969950',
success: function(res) {
console.log('拨打电话成功!');
},
fail: function(res) {
console.log('拨打电话失败!');
}
})
},
paySuccess(largeType) {
// largeType=vip 开通vip
// largeType=point 购买看点
if(wx.getSystemInfoSync().platform=='ios'){
message.notify('支付成功');
}
this.post({
url: '/user/baseMsg',
showLoading: false,
success: ({
data
}) => {
this.userBean = data;
}
});
},
getPhoneNumber(e) {
console.log(e.detail.code) // 动态令牌
console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
console.log(e.detail.errno) // 错误码(失败时返回)
}
}
};
</script>
<style lang="scss">
@import '@/scss/uni.scss';
.body {
background-color: whitesmoke;
}
.avatar {
background-color: #d8d8d8;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
//box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>
\ No newline at end of file
<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;margin-left: 5rpx;">
{{value.title}}
</view>
<view class="text" style="font-size: 22rpx;color: gray;height: 30rpx;margin-left: 5rpx;">
{{value.vedioDesc}}
</view>
<view v-if="isEditStyle" @click.stop="cbClick(key)" style="position: absolute;background: #000000; opacity: 0.6;width: 92%;height: 96%;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/ttVideoDetail?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
<template>
<view class="body">
<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="height: 100%;" @click="tapVideoHover()">
<!-- <video v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
:autoplay="true" :isplay="true" play-btn-position="center" :loop="!isplay" @ended="ended"
@controlstoggle="controlstoggle" :show-fullscreen-btn="false" :poster="list.coverImage"
:show-loading="true" @click="tapVideoHover()" :enable-progress-gesture="false" class="tsvideo"
:src="list.recommendUrl" object-fit="cover" /> -->
<tt-video-player v-if="Math.abs(displayIndex-index)==0" :id="list.vedioId"
:album-id="list.douyinAlbumId" :episode-id="list.douyinEpisodeId" :cloud-type="1" version="1"
object-fit="contain" :controls="controls" :poster="data.coverImage" :loop="!isplay"
:autoplay="true" :enable-progress-gesture="false" :show-loading="true" @play="startPlay"
:show-fullscreen-btn="false" @controlstoggle="controlstoggle" @ended="ended" />
</view>
<view v-if="!isqp" class="userInfo flex">
<!-- 点赞 -->
<view class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image @click.stop="collect(list.vedioId,index)" v-if="list.collect==0"
src="@/static/home_collect_img_0.png" />
<image @click.stop="cancelCollect(list.vedioId,index)" v-if="list.collect==1"
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>
</view>
<!-- 分享 -->
<view v-show="false" class="flex" style="opacity: 0.9; margin-top: 10rpx;">
<image src="@/static/video/share-fill.png" />
<text
style="margin-top: 110rpx; color: #FFFFFF;font-size: 26rpx; 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" @click.stop="detail(list)">
<text class="userName">{{list.title}}</text>
<text class="words">{{'第'+list.recommendIndex+'集'}}</text>
<view class="wordss2">
<image src="@/static/video/layers.png" />
<text
class="wordss">{{'共'+list.vedioTotal+'集' + ((list.completeStatus==0)?' 已完结':' 更新中')}}</text>
<text class="wordsss">{{(list.completeStatus==0)?'下一集':'看全部'}}</text>
</view>
</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: false, // 控制按钮
originList: [], // 源数据
displaySwiperList: [], // swiper需要的数据
displayIndex: 0, // 用于显示swiper的真正的下标数值只有:0,1,2。
originIndex: 0, // 记录源数据的下标
windowWidth: 0,
windowHeight: 0,
current: 0,
oid: 0,
isplay: true, // 是否自动播放下一个视频
playCount: 2, // 剩余多少视频加载视频列表
isqp: false, // 是否全屏
urls: "https://xjc.demo.hongcd.com/api/video/videoRecommend?page=1&uid=0",
isFirstLoad: true,
videoContext: null
}
},
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth
this.windowHeight = uni.getSystemInfoSync().windowHeight
},
methods: {
reShare() {
var href = ''
// #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.queryList()
} else {
tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).play();
// this.videoContext?.play()
}
},
stop() {
// audo.pause()
// this.videoContext?.pause()
tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).pause();
},
queryList() {
// 推荐
this.post({
url: '/vedio/autoList',
showLoading: false,
success: ({
data
}) => {
var msg = data.list
for (let i = 0; i < msg.length; i++) {
this.originList.push(msg[i])
}
this.initSwiperData();
}
});
},
tapVideoHover() {
if (this.controls) return
this.isqp = true
this.controls = true
},
startPlay() {
if (tt.canIUse('preloadResourceVideo')) {
this.preloadplaylet()
}
},
preloadplaylet() {
var preIndex = 0
if (this.displayIndex < 2) {
preIndex = this.displayIndex + 1
} else {
preIndex = 0
}
// 抖音预加载
tt.preloadResourceVideo({
albumId: this.displaySwiperList[preIndex].douyinAlbumId,
episodeId: this.displaySwiperList[preIndex].douyinEpisodeId,
cloudType: 1,
version: 1,
success: () => {
console.log("短剧预加载成功" + this.displaySwiperList[preIndex].douyinEpisodeId);
},
fail: (error) => {
console.log("短剧预加载失败", error);
},
});
},
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].vedioId, this)
// this.videoContext.pause()
// this.videoContext.stop()
tt.createVideoContext('' + this.originList[this.oid].vedioIndex, this).pause();
setTimeout(() => {
console.log('qqqqqq:', this.originList[originIndex].vedioId)
// this.videoContext = uni.createVideoContext("" + this.originList[originIndex].vedioId, this)
// this.videoContext.play()
tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).play();
}, 500)
var pCount = this.originList.length - this.playCount
if (originIndex == pCount) {
this.queryList()
}
},
/**
* 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.controls = false
this.isqp = false
},
controlstoggle(e) {
if (!this.controls) return
this.isqp = e.detail.show
},
detail(detail) {
navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) +
`&playNext=1`)
},
collect(vedioId, index) {
this.originList[index].collect = 1
// 收藏
this.post({
url: '/vedio/collect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {
uni.showToast({
title: "收藏成功"
})
}
});
},
cancelCollect(vedioId, index) {
this.originList[index].collect = 0
// 取消收藏
this.post({
url: '/vedio/cancelCollect',
data: {
vedioId
},
showLoading: false,
success: ({
data
}) => {
uni.showToast({
title: "取消收藏"
})
}
});
},
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: #000000;
width: 100%;
height: 100%;
}
.swiper {
height: 100%;
}
.userInfo {
position: absolute;
z-index: 99;
bottom: 30%;
right: 10px;
width: 90rpx;
flex-direction: column;
image {
width: 70rpx;
height: 70rpx;
position: absolute;
right: 10rpx;
}
}
.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;
width: 100%;
position: absolute;
bottom: 0;
color: #ffffff;
flex-direction: column;
align-items: flex-start;
}
.userName {
font-size: 36rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss {
font-size: 30rpx;
color: #ffffff;
margin-left: 10rpx;
}
.wordss2 {
width: 100%;
height: 80rpx;
opacity: 0.6;
background: black;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 20rpx;
image {
margin-left: 10rpx;
width: 30rpx;
height: 30rpx;
}
.wordsss {
margin-right: 10rpx;
margin-left: auto;
font-size: 26rpx;
color: #ffffff;
padding: 4rpx 12rpx;
border-radius: 30rpx;
background: darkgrey;
}
}
.words {
margin-top: 20rpx;
margin-left: 10rpx;
font-size: 30rpx;
color: #ffffff;
}
.tsvideo {
width: 100%;
height: 100%;
animation: showDivAni 1s 1;
}
@keyframes showDivAni {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</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