|
|
@@ -1,32 +1,36 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <u-navbar :title="topTitle" @leftClick="leftClick" titleStyle="color:#fff;" bgColor="#000" leftIconColor="#fff"
|
|
|
- :autoBack="false">
|
|
|
- </u-navbar>
|
|
|
- <swiper :style="'width: '+ windowWidth +'px; height:100vh; background-color: #000;'" class="swiper"
|
|
|
- :circular='false' @change="swiperChange" :current="swiperCurrent" :vertical="true" duration="200">
|
|
|
- <block v-for="content in videoInfo.updated_episode_num">
|
|
|
- <swiper-item :key="content">
|
|
|
- <view :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
|
|
|
- <!-- @controlstoggle="controlstoggle" -->
|
|
|
- <video v-if="isShowVideo(content)" autoplay :key="content" id="myVideo" :controls="controls"
|
|
|
- :loop="!isplay" preload="auto" :enable-progress-gesture="true" :show-center-play-btn="false"
|
|
|
- :show-loading="false" :show-fullscreen-btn="false" @ended="ended" @click="tapVides()"
|
|
|
- :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'"
|
|
|
- :src="currentVideoInfo.video_url" class="tsvideo">
|
|
|
- </video>
|
|
|
- <view v-if="isqp" class="userInfo">
|
|
|
- <!-- 2.点赞 -->
|
|
|
- <view style="opacity: 0.9; margin-top: 17px;">
|
|
|
- <image v-if="currentVideoInfo.is_zan" src="@/static/aixinRed.png" @click="myLike(2)"
|
|
|
- style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
|
- <image v-else src="@/static/aixin.png" @click="myLike(1)"
|
|
|
- style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
|
- <text
|
|
|
- style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;">{{currentVideoInfo.total_zan}}</text>
|
|
|
- </view>
|
|
|
- <!-- 3.分享 -->
|
|
|
- <!-- <view style="opacity: 0.9; margin-top: 17px;">
|
|
|
+ <view class="">
|
|
|
+ <view class="content">
|
|
|
+ <u-navbar :leftText="topTitle" @leftClick="leftClick" titleStyle="color:#fff;" bgColor="#000"
|
|
|
+ leftIconColor="#fff" :autoBack="false">
|
|
|
+ </u-navbar>
|
|
|
+ <swiper :style="'width: '+ windowWidth +'px; height:100vh; background-color: #000;'" class="swiper"
|
|
|
+ :circular='false' @change="swiperChange" :current="swiperCurrent" :vertical="true" duration="200">
|
|
|
+ <block v-for="content in swiperList" :key="content">
|
|
|
+ <swiper-item>
|
|
|
+ <view :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
|
|
|
+ <!-- @controlstoggle="controlstoggle" -->
|
|
|
+ <video v-if="isShowVideo(content)" autoplay :key="content" id="myVideo" :controls="controls"
|
|
|
+ :loop="!isplay" preload="auto" :enable-progress-gesture="true"
|
|
|
+ :show-center-play-btn="false" :show-loading="false" :show-fullscreen-btn="false"
|
|
|
+ :poster="videoInfo.cover_image" @ended="ended" @click="tapVides()"
|
|
|
+ :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'"
|
|
|
+ :src="currentVideoInfo.video_url" class="tsvideo">
|
|
|
+ </video>
|
|
|
+ <image v-else :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'"
|
|
|
+ :src="videoInfo.cover_image"></image>
|
|
|
+ <view v-if="isqp" class="userInfo">
|
|
|
+ <!-- 2.点赞 -->
|
|
|
+ <view style="opacity: 0.9; margin-top: 17px;">
|
|
|
+ <image v-if="currentVideoInfo.is_zan" src="@/static/aixinRed.png" @click="myLike(2)"
|
|
|
+ style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
|
+ <image v-else src="@/static/aixin.png" @click="myLike(1)"
|
|
|
+ style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
|
+ <text
|
|
|
+ style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;">{{currentVideoInfo.total_zan}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 3.分享 -->
|
|
|
+ <!-- <view style="opacity: 0.9; margin-top: 17px;">
|
|
|
<image src="@/static/share-fill.png"
|
|
|
style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
|
|
|
<text
|
|
|
@@ -35,143 +39,160 @@
|
|
|
style="position: absolute; background: none; width: 100%; height: 100%;"
|
|
|
@click.stop="share"></button>
|
|
|
</view> -->
|
|
|
- <!-- 4.追剧 -->
|
|
|
- <view class="comment" style="opacity: 0.9; margin-top: 17px;">
|
|
|
- <view v-if="videoInfo.is_binge_watch" @click="unBingewatch">
|
|
|
- <image src="@/static/scRed.png"
|
|
|
- style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
|
- <text
|
|
|
- style="color: #ff0000; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">已追</text>
|
|
|
- </view>
|
|
|
- <view v-else @click="bingewatch">
|
|
|
- <image src="@/static/sc.png"
|
|
|
- style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
|
|
- <text
|
|
|
- style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">追剧</text>
|
|
|
+ <!-- 4.追剧 -->
|
|
|
+ <view class="comment" style="opacity: 0.9; margin-top: 17px;">
|
|
|
+ <view v-if="videoInfo.is_binge_watch" @click="unBingewatch">
|
|
|
+ <image src="@/static/scRed.png"
|
|
|
+ style="width: 40px; height: 40px; position: absolute; right: 6px;">
|
|
|
+ </image>
|
|
|
+ <text
|
|
|
+ style="color: #ff0000; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">已追</text>
|
|
|
+ </view>
|
|
|
+ <view v-else @click="bingewatch">
|
|
|
+ <image src="@/static/sc.png"
|
|
|
+ style="width: 40px; height: 40px; position: absolute; right: 6px;">
|
|
|
+ </image>
|
|
|
+ <text
|
|
|
+ style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">追剧</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
+ </view>
|
|
|
+ <!-- 最底下的文字部分 -->
|
|
|
+ <view v-if="isqp" class="contentcd" @click.stop="sellxj()">
|
|
|
+ <text class="userName">《{{videoInfo.name}}》</text>
|
|
|
+ <text class="userName">更新到第{{videoInfo.updated_episode_num}}集</text>
|
|
|
+ <text class="userName">|</text>
|
|
|
+ <text class="userName">选集</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- 最底下的文字部分 -->
|
|
|
- <view v-if="isqp" class="contentcd" @click.stop="sellxj()">
|
|
|
- <text class="userName">《{{videoInfo.name}}》</text>
|
|
|
- <text class="userName">更新到第{{videoInfo.updated_episode_num}}集</text>
|
|
|
- <text class="userName">|</text>
|
|
|
- <text class="userName">选集</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </block>
|
|
|
- </swiper>
|
|
|
- <uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="true">
|
|
|
- <view v-if="fenji==1" class="pop-my" style=" border-top-left-radius: 10px; border-top-right-radius: 10px;">
|
|
|
- <view class="ju-top">
|
|
|
- <view style="display: flex; flex-direction: column; ">
|
|
|
- <view style="display: flex; flex-direction: column;">
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+ <uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="true">
|
|
|
+ <view v-if="fenji==1" class="pop-my"
|
|
|
+ style=" border-top-left-radius: 10px; border-top-right-radius: 10px;">
|
|
|
+ <view class="ju-top">
|
|
|
+ <view style="display: flex; flex-direction: column; ">
|
|
|
<view style="display: flex; flex-direction: column;">
|
|
|
- <view class="utabs-top">
|
|
|
- <u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
|
|
|
- :inactiveStyle="inactiveStyle" class="utabs-top" :list="list1"
|
|
|
- :current="current"></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="ju-top-title">
|
|
|
- {{videoInfo.name}}
|
|
|
+ <view style="display: flex; flex-direction: column;">
|
|
|
+ <view class="utabs-top">
|
|
|
+ <u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
|
|
|
+ :inactiveStyle="inactiveStyle" class="utabs-top" :list="list1"
|
|
|
+ :current="current"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="ju-top-title">
|
|
|
+ {{videoInfo.name}}
|
|
|
+ </view>
|
|
|
+ <view class="ju-top-update"> 已更新至{{videoInfo.updated_episode_num}}集 </view>
|
|
|
</view>
|
|
|
- <view class="ju-top-update"> 已更新至{{videoInfo.updated_episode_num}}集 </view>
|
|
|
+ <u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
|
|
|
+ :inactiveStyle="inactiveStyle" :current="tabcurrent" :list="labelList"
|
|
|
+ @click="labelListClick"></u-tabs>
|
|
|
</view>
|
|
|
- <u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
|
|
|
- :inactiveStyle="inactiveStyle" :current="tabcurrent" :list="labelList"
|
|
|
- @click="labelListClick"></u-tabs>
|
|
|
- </view>
|
|
|
- <view class="down" @click="down">
|
|
|
- <text class="down-text">收起</text>
|
|
|
- <image class="down-img" src="@/static/img/index/down.png">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <scroll-view class="scroll-my" :scroll-y="true" :scroll-top="scrollTop">
|
|
|
- <view class="ju-wrapper">
|
|
|
- <block v-for="content in labelList[tabcurrent].content">
|
|
|
- <view class="ju-content" :class="activeIndex ==content?'active':'' "
|
|
|
- @click="playTest(content)">
|
|
|
- <!-- <view :class="isShowUpdate(content)?'lock-wrapper-no':'lock-wrapper'" -->
|
|
|
- <view class="lock-wrapper" v-if="isShowUpdate(content)">
|
|
|
- <text class="update-title">待更新</text>
|
|
|
- </view>
|
|
|
- <text class="title">第{{content}}集 </text>
|
|
|
- <view class="lock-wrapper" v-if="isShowVip(content)">
|
|
|
- <image class="lock-img" src="@/static/shilu-login/2.png"></image>
|
|
|
- </view>
|
|
|
+ <view class="down" @click="down">
|
|
|
+ <text class="down-text">收起</text>
|
|
|
+ <image class="down-img" src="@/static/img/index/down.png">
|
|
|
+ </image>
|
|
|
</view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
- <view style="width: 1px; height: 1px; margin-top: 30px;"></view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view v-if="fenji==2"
|
|
|
- :style="'width: '+ windowWidth +'px;height:70vh; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
|
|
- <view class="charge-wrapper">
|
|
|
- <view class="top">
|
|
|
- <text class="charge-title">充值购买后可继续观看{{topTitle}} </text>
|
|
|
- <text class="charge-info">为保护创作者权益，当前内容需要付费观看。</text>
|
|
|
- <view class="charge-coin">
|
|
|
- <text class="ji">本集:</text>
|
|
|
- <text class="bi">{{videoInfo.charge_coin}}k币</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="ft14"
|
|
|
- style="display: flex;flex-direction: row;justify-content: flex-start;padding: 0 20px;">账户余额<text
|
|
|
- class="ft14" style="color: #FF9800;">{{user_info.total_coin}}</text>K币</view>
|
|
|
- <scroll-view class="scroll-charge" :scroll-y="true" :scroll-top="scrollTop">
|
|
|
- <view class="pay-box">
|
|
|
- <block v-for="(item,key) in payOptions" :key="key">
|
|
|
- <view v-if="item.type =='COIN'" @click="selectPayItem(item)"
|
|
|
- :class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items">
|
|
|
- <view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab"
|
|
|
- v-if="item.tip_text">{{item.tip_text}}</text></view>
|
|
|
- <text class="ft18 pay-box-items-txt" style="color: #FF9800;">{{item.price}}元</text>
|
|
|
- <view class="ft14 pay-box-items-txt" style="flex-direction: row;">
|
|
|
- {{item.price_text}} <text class="ft14"
|
|
|
- style="color: #FF9800;">+{{item.given}}K币</text> </view>
|
|
|
- <view class="ft14 pay-box-items-txt"
|
|
|
- style="flex-direction: row;justify-content: space-between;"
|
|
|
- :class=" item.id == pay_select_id ?'select-text' :'given-txt'">
|
|
|
- {{item.given_amount}} <text v-if="item.id == pay_select_id"
|
|
|
- class="ft14">✓️</text></view>
|
|
|
- </view>
|
|
|
- <view v-else @click="selectPayItem(item)"
|
|
|
- :class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items">
|
|
|
- <view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab"
|
|
|
- v-if="item.tip_text">{{item.tip_text}}</text></view>
|
|
|
- <view class="vip-center">
|
|
|
- <view class="">
|
|
|
- <text class="ft18 pay-box-items-txt"
|
|
|
- style="color: #FF9800;">{{item.price}}元</text>
|
|
|
- <view class="ft14 pay-box-items-txt">{{item.price_text}}</text></view>
|
|
|
- </view>
|
|
|
- <image class="vip-level-icon" src="/static/icon/vip.png"></image>
|
|
|
+ <scroll-view class="scroll-my" :scroll-y="true" :scroll-top="scrollTop">
|
|
|
+ <view class="ju-wrapper">
|
|
|
+ <block v-for="content in labelList[tabcurrent].content" :key="content">
|
|
|
+ <view class="ju-content" :class="activeIndex ==content?'active':'' "
|
|
|
+ @click="playVideo(content)">
|
|
|
+ <!-- <view :class="isShowUpdate(content)?'lock-wrapper-no':'lock-wrapper'" -->
|
|
|
+ <view class="lock-wrapper" v-if="isShowUpdate(content)">
|
|
|
+ <text class="update-title">待更新</text>
|
|
|
+ </view>
|
|
|
+ <text class="title">第{{content}}集 </text>
|
|
|
+ <view class="lock-wrapper" v-if="isShowVip(content)">
|
|
|
+ <image class="lock-img" src="@/static/shilu-login/2.png"></image>
|
|
|
</view>
|
|
|
- <view class="ft14 pay-box-items-txt"
|
|
|
- style="flex-direction: row;justify-content: space-between;"
|
|
|
- :class=" item.id == pay_select_id ?'select-text' :'given-txt'">
|
|
|
- {{item.given_amount}} <text v-if="item.id == pay_select_id"
|
|
|
- class="ft14">✓️</text></view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
- <view class="ft14" style="margin: 10px 0; padding: 0 20px;">付费须知</view>
|
|
|
- <view class="ft14" style="padding: 0 20px;">
|
|
|
- <text class="ft12">1、虚拟商品，一经购买不得退换</text>
|
|
|
- <text class="ft12">2、充值后K币可能有延迟，1小时未到账请在“我的”页面联系客服</text>
|
|
|
- <text class="ft12">3、未满18岁的未成年需要在监护人陪同下购买并观看短剧剧</text>
|
|
|
- <text class="ft12">4、购买成功后，“K币”仅在本小程序中使用</text>
|
|
|
- <text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
|
|
|
- </view>
|
|
|
+ <view style="width: 1px; height: 1px; margin-top: 30px;"></view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
+ <view v-if="fenji==2"
|
|
|
+ :style="'width: '+ windowWidth +'px;height:70vh; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
|
|
|
+ <view class="charge-wrapper">
|
|
|
+ <view class="top">
|
|
|
+ <text class="charge-title">充值购买后可继续观看{{popUpTitle}} </text>
|
|
|
+ <text class="charge-info">为保护创作者权益，当前内容需要付费观看。</text>
|
|
|
+ <view class="charge-coin">
|
|
|
+ <text class="ji">本集:</text>
|
|
|
+ <text class="bi">{{videoInfo.charge_coin}}k币</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="ft14"
|
|
|
+ style="display: flex;flex-direction: row;justify-content: flex-start;padding: 0 20px;">
|
|
|
+ 账户余额<text class="ft14" style="color: #FF9800;">{{user_info.total_coin}}</text>K币</view>
|
|
|
+ <scroll-view class="scroll-charge" :scroll-y="true" :scroll-top="scrollTop">
|
|
|
+ <view class="pay-box">
|
|
|
+ <block v-for="(item,key) in payOptions" :key="key">
|
|
|
+ <view v-if="item.type =='COIN'" @click="selectPayItem(item)"
|
|
|
+ :class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items">
|
|
|
+ <view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab"
|
|
|
+ v-if="item.tip_text">{{item.tip_text}}</text></view>
|
|
|
+ <text class="ft18 pay-box-items-txt"
|
|
|
+ style="color: #FF9800;">{{item.price}}元</text>
|
|
|
+ <view class="ft14 pay-box-items-txt" style="flex-direction: row;">
|
|
|
+ {{item.price_text}} <text class="ft14"
|
|
|
+ style="color: #FF9800;">+{{item.given}}K币</text>
|
|
|
+ </view>
|
|
|
+ <view class="ft14 pay-box-items-txt"
|
|
|
+ style="flex-direction: row;justify-content: space-between;"
|
|
|
+ :class=" item.id == pay_select_id ?'select-text' :'given-txt'">
|
|
|
+ {{item.given_amount}} <text v-if="item.id == pay_select_id"
|
|
|
+ class="ft14">✓️</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else @click="selectPayItem(item)"
|
|
|
+ :class="item.id == pay_select_id ?'pay-select' :'' " class="box pay-box-items">
|
|
|
+ <view style="height: 20px;align-self: flex-end;"><text class="ft12 top-lab"
|
|
|
+ v-if="item.tip_text">{{item.tip_text}}</text></view>
|
|
|
+ <view class="vip-center">
|
|
|
+ <view class="">
|
|
|
+ <text class="ft18 pay-box-items-txt"
|
|
|
+ style="color: #FF9800;">{{item.price}}元</text>
|
|
|
+ <view class="ft14 pay-box-items-txt">{{item.price_text}}</text></view>
|
|
|
+ </view>
|
|
|
+ <image class="vip-level-icon" src="/static/icon/vip.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="ft14 pay-box-items-txt"
|
|
|
+ style="flex-direction: row;justify-content: space-between;"
|
|
|
+ :class=" item.id == pay_select_id ?'select-text' :'given-txt'">
|
|
|
+ {{item.given_amount}} <text v-if="item.id == pay_select_id"
|
|
|
+ class="ft14">✓️</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <view class="ft14" style="margin: 10px 0; padding: 0 20px;">付费须知</view>
|
|
|
+ <view class="ft14" style="padding: 0 20px;">
|
|
|
+ <text class="ft12">1、虚拟商品，一经购买不得退换</text>
|
|
|
+ <text class="ft12">2、充值后K币可能有延迟，1小时未到账请在“我的”页面联系客服</text>
|
|
|
+ <text class="ft12">3、未满18岁的未成年需要在监护人陪同下购买并观看短剧剧</text>
|
|
|
+ <text class="ft12">4、购买成功后，“K币”仅在本小程序中使用</text>
|
|
|
+ <text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+ <u-overlay :show="centerShow" :duration="400" closeOnClickOverlay :z-index="999" @click="closeOverlay">
|
|
|
+ <view class="warp">
|
|
|
+ <view class="rect" @tap.stop>
|
|
|
+ <text class="rect-text">剧集暂未更新</text>
|
|
|
+ <view class="rect-button" @tap.stop @click="closeOverlay"><text class="rect-button-text">确定</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
+ </u-overlay>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -186,8 +207,10 @@
|
|
|
} from '@/common/apis/zju.js'
|
|
|
import {
|
|
|
getUserInfo
|
|
|
- } from "@/common/apis/my.js";
|
|
|
- import {userRanse} from "@/common/apis/common.js"
|
|
|
+ } from "@/common/apis/my.js";
|
|
|
+ import {
|
|
|
+ userRanse
|
|
|
+ } from "@/common/apis/common.js"
|
|
|
import {
|
|
|
getOptions,
|
|
|
getPayInfo
|
|
|
@@ -196,10 +219,11 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ centerShow: false, //暂未更新弹窗
|
|
|
limitPage: 15,
|
|
|
top_height: 0,
|
|
|
- episode: 1,
|
|
|
- ranse_id:0,
|
|
|
+ episode: 1,
|
|
|
+ ranse_id: 0,
|
|
|
swiperCurrent: 0,
|
|
|
videoContext: '',
|
|
|
currentVideoInfo: {},
|
|
|
@@ -218,8 +242,6 @@
|
|
|
labelList: [],
|
|
|
list1: [{
|
|
|
name: '当前剧集',
|
|
|
- }, {
|
|
|
- name: '相似好剧',
|
|
|
}],
|
|
|
sharedata: {
|
|
|
type: 2,
|
|
|
@@ -250,6 +272,9 @@
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
+ swiperList() {
|
|
|
+ return Number(parseInt(this.videoInfo.updated_episode_num, 10)) + 1
|
|
|
+ },
|
|
|
isShowVideo(item) {
|
|
|
return (item) => {
|
|
|
return this.swiperCurrent == item && this.isShow
|
|
|
@@ -265,8 +290,11 @@
|
|
|
return item > this.videoInfo.updated_episode_num
|
|
|
}
|
|
|
},
|
|
|
- topTitle() {
|
|
|
+ popUpTitle() {
|
|
|
return `《${this.videoInfo.name}》 第${this.episode}集`
|
|
|
+ },
|
|
|
+ topTitle() {
|
|
|
+ return `第${this.episode}集`
|
|
|
}
|
|
|
},
|
|
|
onReady: function(res) {
|
|
|
@@ -282,31 +310,31 @@
|
|
|
this.initTabs();
|
|
|
})
|
|
|
},
|
|
|
- async onLoad(e) {
|
|
|
+ async onLoad(e) {
|
|
|
// console.log('11111111111111111111',e)
|
|
|
let that = this;
|
|
|
uni.getSystemInfo({
|
|
|
success(res) {
|
|
|
that.top_height = res.statusBarHeight; //data中 声明 top_height:0
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
if (e.video_id) {
|
|
|
this.video_id = Number(e.video_id)
|
|
|
- }
|
|
|
- if(e.sequence && Number(e.sequence) > 0){
|
|
|
- this.swiperCurrent = Number(e.sequence) -1;
|
|
|
- }
|
|
|
- // 染色参数接收
|
|
|
- if(e.ranse_id && Number(e.ranse_id) > 0){
|
|
|
- try{
|
|
|
- this.ranse_id = Number(e.ranse_id);
|
|
|
- let res = await userRanse(this.ranse_id);
|
|
|
-
|
|
|
- }catch(e){
|
|
|
- console.log("player-errr:",e)
|
|
|
- }
|
|
|
+ }
|
|
|
+ if (e.sequence && Number(e.sequence) > 0) {
|
|
|
+ this.swiperCurrent = Number(e.sequence) - 1;
|
|
|
+ }
|
|
|
+ // 染色参数接收
|
|
|
+ if (e.ranse_id && Number(e.ranse_id) > 0) {
|
|
|
+ try {
|
|
|
+ this.ranse_id = Number(e.ranse_id);
|
|
|
+ let res = await userRanse(this.ranse_id);
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+ console.log("player-errr:", e)
|
|
|
+ }
|
|
|
}
|
|
|
uni.getSystemInfo({
|
|
|
success: res => {
|
|
|
@@ -349,16 +377,23 @@
|
|
|
// #endif
|
|
|
},
|
|
|
watch: {
|
|
|
- activeIndex(newVal, oldVal) {
|
|
|
- let index = this.labelList.findIndex(el => el.content.includes(newVal))
|
|
|
- this.tabcurrent = index
|
|
|
+ activeIndex: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ this.initTabs()
|
|
|
+ let index = this.labelList.findIndex(el => el.content.includes(newVal))
|
|
|
+ console.log(index, 'newValnewVal', this.labelList, newVal)
|
|
|
+ this.tabcurrent = index
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
onBackPress() {},
|
|
|
methods: {
|
|
|
+ closeOverlay() {
|
|
|
+ this.centerShow = false
|
|
|
+ // console.log('open');
|
|
|
+ },
|
|
|
bingewatch() {
|
|
|
storeshelf(this.video_id).then(res => {
|
|
|
- console.log(res, 'storeshelfstoreshelfstoreshelf')
|
|
|
this.videoInfo.is_binge_watch = !Boolean(this.videoInfo.is_binge_watch)
|
|
|
uni.showToast({
|
|
|
title: '追剧成功',
|
|
|
@@ -369,7 +404,6 @@
|
|
|
},
|
|
|
unBingewatch() {
|
|
|
delShelf(this.video_id).then(res => {
|
|
|
- console.log(res, 'delShelfdelShelfdelShelfdelShelfdelShelf')
|
|
|
this.videoInfo.is_binge_watch = !Boolean(this.videoInfo.is_binge_watch)
|
|
|
})
|
|
|
},
|
|
|
@@ -403,7 +437,6 @@
|
|
|
episode_id: this.currentVideoInfo.id,
|
|
|
zan: like
|
|
|
}).then(res => {
|
|
|
- console.log(res, 'VideoEpisodeZanVideoEpisodeZanVideoEpisodeZan')
|
|
|
this.$nextTick(() => {
|
|
|
this.currentVideoInfo.is_zan = !Boolean(this.currentVideoInfo.is_zan)
|
|
|
if (this.currentVideoInfo.is_zan) {
|
|
|
@@ -451,7 +484,8 @@
|
|
|
content: innit(start, index)
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+ // let index = this.labelList.findIndex(el => el.content.includes(this.activeIndex))
|
|
|
+ // this.tabcurrent = index
|
|
|
},
|
|
|
async getPayInfo(originIndex) {
|
|
|
this.user_info = await getUserInfo();
|
|
|
@@ -473,51 +507,62 @@
|
|
|
let params = {
|
|
|
video_id: this.payVideoInfo.video_id,
|
|
|
video_series_sequence: this.payVideoInfo.video_series_sequence,
|
|
|
- pay_proudct_id: item.id,
|
|
|
- is_first_pay:item.is_first_pay,
|
|
|
+ pay_proudct_id: item.id,
|
|
|
+ is_first_pay: item.is_first_pay,
|
|
|
}
|
|
|
let res = await getPayInfo(params);
|
|
|
- if (res) {
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- this.wxMinPay(res);
|
|
|
+ if (res) {
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ this.wxMinPay(res);
|
|
|
// #endif
|
|
|
}
|
|
|
|
|
|
- },wxMinPay(param){
|
|
|
- wx.requestPayment({
|
|
|
- timeStamp: param.timeStamp,
|
|
|
- nonceStr: param.nonceStr,
|
|
|
- package: param.package,
|
|
|
- signType: param.signType,
|
|
|
- paySign: param.paySign,
|
|
|
- success (res) {
|
|
|
- this.pay_success = true;
|
|
|
- uni.showToast({ title: '支付成功',icon:"none" });
|
|
|
- // console.log('success:' + JSON.stringify(res));
|
|
|
- },
|
|
|
- fail (e) {
|
|
|
- if(e.errMsg == "requestPayment:fail cancel"){
|
|
|
- uni.showToast({ title: '取消支付',icon:"none" });
|
|
|
- }else{
|
|
|
- uni.showToast({ title: '支付失败',icon:"none" });
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
},
|
|
|
- playTest(item) {
|
|
|
- console.log(item)
|
|
|
+ wxMinPay(param) {
|
|
|
+ wx.requestPayment({
|
|
|
+ timeStamp: param.timeStamp,
|
|
|
+ nonceStr: param.nonceStr,
|
|
|
+ package: param.package,
|
|
|
+ signType: param.signType,
|
|
|
+ paySign: param.paySign,
|
|
|
+ success(res) {
|
|
|
+ this.pay_success = true;
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付成功',
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ // console.log('success:' + JSON.stringify(res));
|
|
|
+ },
|
|
|
+ fail(e) {
|
|
|
+ if (e.errMsg == "requestPayment:fail cancel") {
|
|
|
+ uni.showToast({
|
|
|
+ title: '取消支付',
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付失败',
|
|
|
+ icon: "none"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ playVideo(item) {
|
|
|
if (this.isShowVip(item)) {
|
|
|
- console.log('111111111111111', item)
|
|
|
- this.fenji = 2
|
|
|
+ // this.fenji = 2
|
|
|
+ this.swiperCurrent = item - 1;
|
|
|
this.getPayInfo(item);
|
|
|
- this.activeIndex = ''
|
|
|
+ // this.activeIndex = ''
|
|
|
} else if (this.isShowUpdate(item)) {
|
|
|
- this.activeIndex = ''
|
|
|
- uni.showToast({
|
|
|
- title: '剧集暂未更新',
|
|
|
- duration: 1000,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
+ // this.activeIndex = ''
|
|
|
+ this.centerShow = true
|
|
|
+ // this.swiperCurrent = this.videoInfo.updated_episode_num + 1;
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '剧集暂未更新',
|
|
|
+ // duration: 500,
|
|
|
+ // icon: 'none'
|
|
|
+ // });
|
|
|
} else {
|
|
|
this.activeIndex = item;
|
|
|
this.swiperCurrent = item - 1;
|
|
|
@@ -528,7 +573,6 @@
|
|
|
},
|
|
|
labelListClick(item) {
|
|
|
this.tabcurrent = item.index
|
|
|
- console.log('itemitemitemitemitem', item);
|
|
|
},
|
|
|
share() {
|
|
|
var href = '/pages/video/index?video_id=' + this.video_id
|
|
|
@@ -589,37 +633,46 @@
|
|
|
this.current = 0
|
|
|
}
|
|
|
this.isqp = true
|
|
|
- console.log('显示swiper Index:', this.displayIndex)
|
|
|
+ // console.log('显示swiper Index:', this.displayIndex)
|
|
|
}
|
|
|
},
|
|
|
initSwiperData(originIndex) {
|
|
|
this.episode = originIndex;
|
|
|
this.isqp = true
|
|
|
- videoEpisodePlay({
|
|
|
- video_id: this.video_id,
|
|
|
- sequence: originIndex,
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- this.currentVideoInfo = res.data
|
|
|
- this.activeIndex = this.episode;
|
|
|
- this.isShow = true
|
|
|
- } else if (res.code == 500101) {
|
|
|
- console.log(this.currentVideoInfo, 'res.code == 500101res.code == 500101')
|
|
|
- this.currentVideoInfo.video_url = ""
|
|
|
- this.isShow = false
|
|
|
- this.isqp = false
|
|
|
- this.fenji = 2
|
|
|
- this.getPayInfo(originIndex);
|
|
|
- this.$refs.select.open('bottom');
|
|
|
- // this.currentVideoInfo = {}
|
|
|
- } else {
|
|
|
- this.isqp = false
|
|
|
- this.currentVideoInfo.video_url = ""
|
|
|
- this.isShow = false
|
|
|
- }
|
|
|
+ console.log(this.videoInfo.updated_episode_num, 'this.swiperCurrent', this.swiperCurrent)
|
|
|
+ if (this.swiperList != this.swiperCurrent + 1) {
|
|
|
+ videoEpisodePlay({
|
|
|
+ video_id: this.video_id,
|
|
|
+ sequence: originIndex,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.currentVideoInfo = res.data
|
|
|
+ this.activeIndex = this.episode;
|
|
|
+ this.isShow = true
|
|
|
+ this.down();
|
|
|
+ } else if (res.code == 500101) {
|
|
|
+ // console.log(this.currentVideoInfo, 'res.code == 500101res.code == 500101')
|
|
|
+ this.currentVideoInfo.video_url = ""
|
|
|
+ this.isShow = false
|
|
|
+ this.isqp = false
|
|
|
+ this.fenji = 2
|
|
|
+ this.getPayInfo(originIndex);
|
|
|
+ this.$refs.select.open('bottom');
|
|
|
+ // this.currentVideoInfo = {}
|
|
|
+ } else {
|
|
|
+ this.isqp = false
|
|
|
+ this.currentVideoInfo.video_url = ""
|
|
|
+ this.isShow = false
|
|
|
+ }
|
|
|
+ // console.log(res, 'getVideoEpisodePlaygetVideoEpisodePlay')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.isqp = false
|
|
|
+ this.centerShow = true
|
|
|
+ this.currentVideoInfo.video_url = ""
|
|
|
+ this.isShow = false
|
|
|
+ }
|
|
|
|
|
|
- console.log(res, 'getVideoEpisodePlaygetVideoEpisodePlay')
|
|
|
- })
|
|
|
},
|
|
|
/**
|
|
|
* swiper滑动时候
|
|
|
@@ -629,299 +682,16 @@
|
|
|
current
|
|
|
} = event.detail;
|
|
|
this.swiperCurrent = current
|
|
|
- console.log(this.swiperCurrent, 'this.swiperCurrentthis.swiperCurrent')
|
|
|
+ // console.log(this.swiperCurrent, 'this.swiperCurrentthis.swiperCurrent')
|
|
|
this.initSwiperData(current + 1)
|
|
|
},
|
|
|
controlstoggle(e) {
|
|
|
- console.log(e.detail.show);
|
|
|
+ // console.log(e.detail.show);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .vip-center {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .vip-level-icon {
|
|
|
- margin-right: 10rpx;
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-box {
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- flex-direction: row;
|
|
|
- padding: 0 20px;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-
|
|
|
- .top-lab {
|
|
|
- width: 40px;
|
|
|
- text-align: center;
|
|
|
- background-color: #ff5722;
|
|
|
- color: #fff;
|
|
|
- float: right;
|
|
|
- border-top: none;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-box-items {
|
|
|
- margin-top: 10px;
|
|
|
- width: 48%;
|
|
|
- flex-direction: column;
|
|
|
- border-radius: 10px;
|
|
|
- line-height: 25px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-box-items-txt {
|
|
|
- padding: 1rpx 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-box-items view text {
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .pay-select {
|
|
|
- border: solid 1px #ff5722;
|
|
|
- }
|
|
|
-
|
|
|
- .select-text {
|
|
|
- background-color: #ff5722;
|
|
|
- color: #fff;
|
|
|
- height: 30px;
|
|
|
- border-radius: 0rpx 0rpx 10rpx 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .given-txt {
|
|
|
- height: 30px;
|
|
|
- border-top: solid 1rpx #9e9e9e1f;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- background: #000000;
|
|
|
- }
|
|
|
-
|
|
|
- .userInfo {
|
|
|
- position: absolute;
|
|
|
- z-index: 99;
|
|
|
- bottom: 30%;
|
|
|
- right: 10px;
|
|
|
- width: 100rpx;
|
|
|
- text-align: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .contentcd {
|
|
|
- background-color: rgba(255, 255, 255, .3);
|
|
|
- width: 720rpx;
|
|
|
- z-index: 99;
|
|
|
- position: absolute;
|
|
|
- bottom: 70rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- padding: 15rpx;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- color: #ffffff;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .userName {
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #ffffff;
|
|
|
- margin: 0 6rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tsvideo {
|
|
|
- animation: showDivAni 2s 1;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes showDivAni {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .charge-wrapper {
|
|
|
- margin-top: 15px;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .top {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .charge-title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .charge-info {
|
|
|
- font-size: 15px;
|
|
|
- color: #868686;
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .charge-coin {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
-
|
|
|
- .ji {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .bi {
|
|
|
- font-size: 18px;
|
|
|
- color: $accent-color;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .down {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- width: 60px;
|
|
|
- height: 30px;
|
|
|
- margin-top: 5px;
|
|
|
- position: absolute;
|
|
|
- right: 0px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
-
|
|
|
- .down-text {
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .down-img {
|
|
|
- width: 35rpx;
|
|
|
- height: 35rpx;
|
|
|
- object-fit: contain;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ju-top {
|
|
|
-
|
|
|
- // background-color: ;
|
|
|
- .ju-top-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- margin-top: 9px;
|
|
|
- height: 22px;
|
|
|
- margin-left: 20px;
|
|
|
- // width: '+ (windowWidth*0.6) +' px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .ju-top-update {
|
|
|
- font-size: 12px;
|
|
|
- color: #000;
|
|
|
- margin-top: 9px;
|
|
|
- height: 22px;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pop-my {
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .scroll-my {
|
|
|
- height: fit-content;
|
|
|
- }
|
|
|
-
|
|
|
- .scroll-charge {
|
|
|
- height: 50vh;
|
|
|
- }
|
|
|
-
|
|
|
- .ju-wrapper {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- justify-content: start;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #FFFFFF;
|
|
|
- // margin: 6rpx;
|
|
|
-
|
|
|
- .ju-content.active {
|
|
|
- background-color: #ff7f02;
|
|
|
- }
|
|
|
-
|
|
|
- .ju-content {
|
|
|
- flex-grow: 1;
|
|
|
- position: relative;
|
|
|
- border-radius: 12rpx;
|
|
|
- background-color: #f6f6f6;
|
|
|
- width: 31%;
|
|
|
- height: 25rpx;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 45rpx 68rpx;
|
|
|
- margin: 6rpx;
|
|
|
-
|
|
|
- .lock-wrapper,
|
|
|
- .lock-wrapper-no {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 12rpx;
|
|
|
- background-color: rgba(0, 0, 0, .3);
|
|
|
-
|
|
|
- .lock-img {
|
|
|
- position: absolute;
|
|
|
- left: 3rpx;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .update-title {
|
|
|
- width: fit-content;
|
|
|
- height: fit-content;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 10px;
|
|
|
- padding: 6rpx;
|
|
|
- background-color: #868686;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .lock-wrapper-no {
|
|
|
- background-color: #f6f6f6;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .utabs-top /deep/ .u-tabs {
|
|
|
- align-items: flex-start;
|
|
|
- }
|
|
|
+ @import "./style/index.scss"
|
|
|
</style>
|
