|
@@ -1,6 +1,61 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- 更多
|
|
|
+ <view class="one">
|
|
|
+ <video :src="info.vUrl" :poster="info.iUrl" :title="info.title" controls :show-center-play-btn="false"
|
|
|
+ :show-mute-btn="true" :enable-play-gesture="true" :vslide-gesture-in-fullscreen="true"></video>
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
+ <view class="two_1">
|
|
|
+ <view :class="['list',active==index?'active':'']" v-for="(item,index) in tabList" :key="index"
|
|
|
+ @tap="tabChange(index)">
|
|
|
+ <span>{{item.title}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two_2">
|
|
|
+ <view class="tab_1" v-if="active===0">
|
|
|
+ <view class="title">
|
|
|
+ <span>标题:</span>
|
|
|
+ <span>{{info.title}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="actor">
|
|
|
+ 待写
|
|
|
+ </view>
|
|
|
+ <view class="brief">
|
|
|
+ <span>简介:</span>
|
|
|
+ <span>{{info.brief}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">
|
|
|
+ 相关视频
|
|
|
+ </view>
|
|
|
+ <view class="other_2">
|
|
|
+ <view class="firmvideoList" v-for="(item,index) in firmvideoList" :key="index"
|
|
|
+ @tap="videoView(item)">
|
|
|
+ <image class="image" :src="item.img_url&&item.img_url.length>0?item.img_url[0].url:''"
|
|
|
+ mode="">
|
|
|
+ </image>
|
|
|
+ <view class="name textOver">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">
|
|
|
+ <uni-icons type="eye" color="var(--rgbfff)" size="12"></uni-icons>
|
|
|
+ {{item.view_num}}
|
|
|
+ </view>
|
|
|
+ <view class="other_2">
|
|
|
+ {{item.time_num}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tab_2" v-else-if="active===1">
|
|
|
+ 第二部分
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -8,15 +63,200 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ id: '',
|
|
|
+ info: {},
|
|
|
+ // 相关视频
|
|
|
+ firmvideoList: [],
|
|
|
+ tabList: [ // 选项卡
|
|
|
+ {
|
|
|
+ title: '详情'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '评论'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ active: 0,
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
+ onLoad(options) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `id`, options.id || '63fd915b134900004000482c')
|
|
|
+ that.search()
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ async search() {
|
|
|
+ const that = this;
|
|
|
+ let res;
|
|
|
+ res = await that.$api(`videos/${that.id}`, 'GET', {})
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ // 赋值名字
|
|
|
+ let data = res.data;
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: data.title
|
|
|
+ });
|
|
|
+ if (data.video_url && data.video_url.length > 0) data.vUrl = data.video_url[0].url;
|
|
|
+ if (data.img_url && data.img_url.length > 0) data.iUrl = data.img_url[0].url;
|
|
|
+ if (data && data.head_actor) data.head_actor_name = await that.searchNmae(data.head_actor)
|
|
|
+ that.$set(that, `info`, data);
|
|
|
+ // 查询相关视频,相同厂商
|
|
|
+ that.searchfirm(data.firm_id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 其他信息
|
|
|
+ async searchNmae(e) {
|
|
|
+ const that = this;
|
|
|
+ let res;
|
|
|
+ res = await that.$api(`scenedata/${e}`, 'GET', {});
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ if (res.data && res.data.title) return res.data.title
|
|
|
+ else return '暂无'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async searchfirm(firm_id) {
|
|
|
+ const that = this;
|
|
|
+ let res;
|
|
|
+ res = await that.$api('videos', 'GET', {
|
|
|
+ firm_id: firm_id,
|
|
|
+ skip: 0,
|
|
|
+ limit: 6
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ that.$set(that, `firmvideoList`, res.data)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 视频查看
|
|
|
+ videoView(e) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pagesVideo/video/index?id=${e._id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tabChange(e) {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `active`, e)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss">
|
|
|
+ .content {
|
|
|
+ background-color: var(--rgb111);
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .one {
|
|
|
+ padding: 0 2vw;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 210px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid var(--rgbf1f);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 0 2vw;
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ span {
|
|
|
+ background-color: var(--rgbfff);
|
|
|
+ color: var(--rgb000);
|
|
|
+ padding: 1vw 4vw;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ span {
|
|
|
+ background-color: var(--rgbfa4);
|
|
|
+ color: var(--rgbfff);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ .tab_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 96vw;
|
|
|
+ height: 58vh;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
+ .title {
|
|
|
+ font-size: 15px;
|
|
|
+ color: var(--rgbfff);
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .actor {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brief {
|
|
|
+ font-size: 15px;
|
|
|
+ color: var(--rgbfff);
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: 15px;
|
|
|
+ color: var(--rgbfff);
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_2 {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .firmvideoList {
|
|
|
+ width: 48%;
|
|
|
+ margin: 0 10px 5px 0;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0 0 5px var(--rgbf1f);
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--rgbfff);
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ color: var(--rgbfff);
|
|
|
+ font-size: 12px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .firmvideoList:nth-child(2n) {
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab_2 {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|