我是个攻城狮
368 lines
11 KiB
Vue
368 lines
11 KiB
Vue
<template>
|
||
<Layout :index="-1" :banner="0" :img="'/static/img/pro.jpg'" :titles="'资产中心'" :title_content="'寻找您心仪的游戏'">
|
||
<view class="detail_bg ptm-120">
|
||
|
||
<view class="max-width">
|
||
<view class="detail_game_nav"> <text @tap="goPath('/game')">资产中心</text> > {{detail.name}}</view>
|
||
<view class="detail_game">
|
||
<view class="detail_swiper">
|
||
<view class="screen-swiper-box">
|
||
<swiper class="screen-swiper" indicator-dots="false" circular="true" :autoplay="!autoplay"
|
||
interval="3500" duration="500" :current="currentIndex" @change="handleSwiperChange">
|
||
<swiper-item v-if="detail.video">
|
||
<video id="myVideo" :src="detail.video.file_path" @play="BoFang()" @pause="ZanTing()" @error="videoErrorCallback" controls></video>
|
||
</swiper-item>
|
||
<swiper-item v-for="(item,index) in detail.image" :key="index">
|
||
<image class="swiperImage" :src="item.file_path" mode="aspectFit"></image>
|
||
</swiper-item>
|
||
|
||
</swiper>
|
||
</view>
|
||
<view class="zhishi" v-if="detail.video" >
|
||
<view @tap="next(0)" class="swiperZhishi" :class="{'xz':currentIndex==0}"><video class="swiperZhishi" :src="detail.video.file_path" mode="aspectFit" :controls="false" :show-center-play-btn="false"></video></view>
|
||
<image @tap="next(index+1)" :class="{'xz':currentIndex==index+1}" v-for="(item,index) in detail.image" :key="index" class="swiperZhishi" :src="item.file_path" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="zhishi" v-else>
|
||
<image @tap="next(index)" :class="{'xz':currentIndex==index}" v-for="(item,index) in detail.image" :key="index" class="swiperZhishi" :src="item.file_path" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<view class="details">
|
||
<!-- <image class="detail__tu" :src="detail.image[0].file_path" mode="heightFix"></image> -->
|
||
<view class="details_title">
|
||
<view class="details_t">{{detail.name}}</view>
|
||
<view class="game_star">
|
||
<text class="iconfont icon-star" :class="{'icon-h':detail.score>0}"></text>
|
||
<text class="iconfont icon-star" :class="{'icon-h':detail.score>1}"></text>
|
||
<text class="iconfont icon-star" :class="{'icon-h':detail.score>2}"></text>
|
||
<text class="iconfont icon-star" :class="{'icon-h':detail.score>3}"></text>
|
||
<text class="iconfont icon-star" :class="{'icon-h':detail.score>4}"></text>
|
||
<text class="star_text">{{detail.score+'.0'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="details_desc">
|
||
发行商:{{detail.issuing_company}}
|
||
</view>
|
||
<view class="details_desc">
|
||
研发商:{{detail.make_company}}
|
||
</view>
|
||
<view class="details_desc">
|
||
出版单位:{{detail.publish_company}}
|
||
</view>
|
||
<view class="details_desc">
|
||
游戏版号:{{detail.publish_no}}
|
||
</view>
|
||
<view class="details_desc" style="display: flex;flex-direction: row">
|
||
<view style="width: 40%;">版权登记及上链信息:</view>
|
||
<view style="width: 60%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:4;overflow: hidden;text-overflow: ellipsis;">{{detail.copyright}}</view>
|
||
</view>
|
||
<view class="details_desc" v-if="detail.asset_status=='financing'&&detail.financing_amount>0">
|
||
项目融资需求:{{detail.financing_amount}}万
|
||
</view>
|
||
<!-- <view class="details_desc" v-else-if="detail.is_financing==2">
|
||
项目融资需求:待定
|
||
</view>
|
||
<view class="details_desc" v-else>
|
||
项目融资需求:无需融资
|
||
</view> -->
|
||
|
||
<view class="details_desc">
|
||
发行日期：{{detail.issuing_time}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail_title">
|
||
<image class="detail__tj" src="../static/img/index/detail1.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="detail_desc">
|
||
<rich-text :nodes="detail.desc"></rich-text>
|
||
</view>
|
||
<view class="detail_title">
|
||
<image class="detail__tj" src="../static/img/index/detail2.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="detail_desc">
|
||
<rich-text :nodes="detail.team_desc"></rich-text>
|
||
</view>
|
||
|
||
<!-- <view class="detail_title" v-if="detail.evaluation">
|
||
<image class="detail__tj" src="../static/img/evaluation.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.evaluation">
|
||
<rich-text :nodes="detail.evaluation"></rich-text>
|
||
</view> -->
|
||
<!-- 游戏资产评估 -->
|
||
<view class="detail_title" v-if="!detail.evaluate_file||detail.evaluate_file==0">
|
||
<image class="detail__tj" src="../static/img/game/pg1.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="detail_desc" v-if="!detail.evaluate_file||detail.evaluate_file==0">
|
||
<text>未完成评估</text>
|
||
</view>
|
||
<view class="detail_title" v-if="detail.evaluate_file>0">
|
||
<image class="detail__tj" src="../static/img/game/pg1.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.evaluate_file>0">
|
||
<text>已完成评估</text>
|
||
</view>
|
||
<view class="detail_title" v-if="detail.asset_status=='talk'||detail.asset_status=='financing'||detail.asset_status=='frozen'">
|
||
<image class="detail__tj" src="../static/img/game/pg2.png" mode="heightFix"></image>
|
||
</view>
|
||
<!-- talk-洽谈对接中;financing-需要融资;frozen-质押冻结中;disposing-待处置;disposed-处置完成 -->
|
||
<view class="detail_desc" v-if="detail.asset_status=='talk'">
|
||
<text>洽谈对接中</text>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.asset_status=='financing'&&detail.financing_amount>0">
|
||
<text>需要融资{{detail.financing_amount}}万</text>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.asset_status=='financing'&&detail.financing_amount==0">
|
||
<text>需要融资</text>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.asset_status=='frozen'">
|
||
<text>质押冻结中</text>
|
||
</view>
|
||
<view class="detail_title" v-if="detail.asset_status=='disposing'||detail.asset_status=='disposed'">
|
||
<image class="detail__tj" src="../static/img/game/pg3.png" mode="heightFix"></image>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.asset_status=='disposing'">
|
||
<text>待处置</text>
|
||
</view>
|
||
<view class="detail_desc" v-if="detail.asset_status=='disposed'">
|
||
<text>处置完成</text>
|
||
</view>
|
||
<!-- <view class="detail_title">
|
||
<image class="detail__tj" src="../static/img/index/detail3.png" mode="heightFix"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</Layout>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
import Layout from './part/layoutNo.vue';
|
||
export default {
|
||
components:{
|
||
Layout
|
||
},
|
||
data(){
|
||
return {
|
||
id: '',
|
||
detail:[],
|
||
index: 2,
|
||
currentIndex: 0,
|
||
autoplay: false,
|
||
videoSrc: '',
|
||
imageSrc: '../static/img/index/detailbanner.png',
|
||
star:4
|
||
|
||
}
|
||
},
|
||
onReady: function(res) {
|
||
if(this.detail.video){
|
||
// #ifndef MP-ALIPAY
|
||
this.videoContext = uni.createVideoContext('myVideo')
|
||
// #endif
|
||
}
|
||
|
||
},
|
||
watch: {
|
||
//监听路由
|
||
$route(to, from) {
|
||
let obj = this.$Route.query;
|
||
this.id = obj.id;
|
||
// if(obj.hasOwnProperty('index')){
|
||
// this.index = Number(obj.index);
|
||
// this.banner = Number(obj.index);
|
||
// }
|
||
this.getData();
|
||
}
|
||
},
|
||
created() {
|
||
let obj = this.$Route.query;
|
||
this.id = obj.id;
|
||
// if(obj.hasOwnProperty('index')){
|
||
// this.index = Number(obj.index);
|
||
// this.banner = Number(obj.index);
|
||
// }
|
||
this.getData();
|
||
|
||
},
|
||
methods:{
|
||
handleSwiperChange(event) {
|
||
const current = event.detail.current;
|
||
this.currentIndex = current;
|
||
// console.log("当前轮播到第", current, "个索引");
|
||
},
|
||
next(e) {
|
||
this.currentIndex = e;
|
||
},
|
||
videoErrorCallback: function(e) {
|
||
uni.showModal({
|
||
content: e.target.errMsg,
|
||
showCancel: false
|
||
})
|
||
},
|
||
BoFang() {
|
||
if (this.autoplay == false) {
|
||
this.autoplay = true;
|
||
}
|
||
},
|
||
ZanTing() {
|
||
if (this.autoplay == true) {
|
||
this.autoplay = false;
|
||
}
|
||
},
|
||
getData(){
|
||
this._get('game.index/detail',{
|
||
id: this.id,
|
||
},res=>{
|
||
this.detail = res.data.detail;
|
||
// this.getVideoBase64(this.detail.video.file_path);
|
||
//console.log(this.detail,22222)
|
||
uni.setNavigationBarTitle({
|
||
title: this.detail.name + '-COG可信资产服务平台！'
|
||
});
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.zhishi{
|
||
display: flex;
|
||
.swiperZhishi{
|
||
width: 200px;
|
||
height: 148px;
|
||
opacity: 0.5;
|
||
}
|
||
.swiperZhishi{
|
||
width: 200px;
|
||
height: 148px;
|
||
opacity: 0.5;
|
||
border: 1px solid #111111;
|
||
}
|
||
.xz{
|
||
opacity: 1;
|
||
border: 1px solid #F48612;;
|
||
}
|
||
}
|
||
.detail_bg{
|
||
width: 100%;
|
||
min-height: 800px;
|
||
background-image: url(../static/img/index/gbgs.png);
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.detail_title{
|
||
margin-top: 80px;
|
||
margin-bottom: 32px;
|
||
.detail__tj{
|
||
width: 230px;
|
||
height: 82px;
|
||
}
|
||
}
|
||
.detail_desc{
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
line-height: 32px;
|
||
}
|
||
.detail_game{
|
||
width: 100%;
|
||
height: 741px;
|
||
display: flex;
|
||
background-color: #383838;
|
||
.detail_swiper{
|
||
width: 800px;
|
||
height: 741px;
|
||
.screen-swiper-box {
|
||
position: relative;
|
||
height: 593px;
|
||
width: 100%;
|
||
.screen-swiper {
|
||
width: 100%;
|
||
position: absolute;
|
||
height: 100%;
|
||
.swiperImage {
|
||
width: 100%;
|
||
position: absolute;
|
||
height: 100%;
|
||
}
|
||
#myVideo {
|
||
width: 100%;
|
||
position: absolute;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.details{
|
||
width: 800px;
|
||
height: 424px;
|
||
padding: 41px 53px;
|
||
.detail__tu{
|
||
width: 611px;
|
||
height: 159px;
|
||
}
|
||
.details_title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 13px 0 43px 0;
|
||
align-items: flex-end;
|
||
.details_t{
|
||
// width: 263px;
|
||
// height: 50px;
|
||
font-size: 50px;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
// line-height: 32px;
|
||
}
|
||
.game_star{
|
||
.icon-star{
|
||
color: #727272;
|
||
font-size: 20px;
|
||
}
|
||
.icon-h{
|
||
color: #F48612 !important;
|
||
}
|
||
.star_text{
|
||
font-size: 19px;
|
||
font-weight: 400;
|
||
color: #F48612;
|
||
line-height: 24px;
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
|
||
}
|
||
.details_desc{
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
line-height: 46px;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
.detail_game_nav{
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #878686;
|
||
padding: 20px 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.details_title{
|
||
flex-direction: column;
|
||
align-items: flex-start !important;
|
||
}
|
||
.detail_desc{
|
||
font-size: 12px !important;
|
||
line-height: 18px !important;
|
||
}
|
||
.detail__tj{
|
||
height: 30px !important;
|
||
}
|
||
}
|
||
</style>
|