You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
11 KiB
389 lines
11 KiB
4 years ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<video id="myVideo" class="myVideo" :src="videoSrc" v-show="isPlayVideo" :show-fullscreen-btn="showFullscreenBtn" :direction="videoDirection" :show-play-btn="showPlayBtn" @pause="videoPause" @fullscreenchange="viderFullscreen">
|
||
|
|
<cover-image class="stopPlayVideoBtn" @click="stopPlayVideo" src="/static/img/close.png"></cover-image>
|
||
|
|
</video>
|
||
|
|
<view class="content">
|
||
|
|
|
||
|
|
<view class="label">
|
||
|
|
<view v-for="(label,index) in labelList" :class="{'on':index==labelIndex}" @tap="loadRatings(index)" :key="label.type">
|
||
|
|
{{label.name}}({{label.number}})
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list">
|
||
|
|
<view class="row" v-for="(row,Rindex) in ratingsList" :key="Rindex">
|
||
|
|
<view class="left">
|
||
|
|
<view class="face">
|
||
|
|
<image :src="row.face"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="name-date">
|
||
|
|
<view class="username">
|
||
|
|
{{row.username}}
|
||
|
|
</view>
|
||
|
|
<view class="date">
|
||
|
|
{{row.date}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="spec">
|
||
|
|
{{row.spec}}
|
||
|
|
</view>
|
||
|
|
<view class="first">
|
||
|
|
<view class="rat">
|
||
|
|
{{row.first.content}}
|
||
|
|
</view>
|
||
|
|
<view class="img-video">
|
||
|
|
<view class="box" v-for="item in row.first.video" @tap="playVideo(item.path)" :key="item.path">
|
||
|
|
<image mode="aspectFill" :src="item.img"></image>
|
||
|
|
<view class="playbtn">
|
||
|
|
<view class="icon bofang"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="box" v-for="item in row.first.img" @tap="showBigImg(item,row.first.img)" :key="item">
|
||
|
|
<image mode="aspectFill" :src="item"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="append" v-if="row.append">
|
||
|
|
<view class="date">
|
||
|
|
{{row.append.date}}天后追加
|
||
|
|
</view>
|
||
|
|
<view class="rat">
|
||
|
|
{{row.append.content}}
|
||
|
|
</view>
|
||
|
|
<view class="img-video">
|
||
|
|
<view class="box" v-for="item in row.append.video" @tap="playVideo(item.path)" :key="item.path">
|
||
|
|
<image mode="aspectFill" :src="item.img"></image>
|
||
|
|
<view class="playbtn">
|
||
|
|
<view class="icon bofang"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="box" v-for="item in row.append.img" @tap="showBigImg(item,row.append.img)" :key="item">
|
||
|
|
<image mode="aspectFill" :src="item"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
labelList:[
|
||
|
|
{name:'全部',number:25,type:'all'},
|
||
|
|
{name:'好评',number:23,type:'good'},
|
||
|
|
{name:'中评',number:1,type:'secondary'},
|
||
|
|
{name:'差评',number:1,type:'poor'},
|
||
|
|
{name:'有图',number:12,type:'img'},
|
||
|
|
{name:'视频',number:2,type:'video'},
|
||
|
|
{name:'追加',number:2,type:'append'}
|
||
|
|
],
|
||
|
|
labelIndex:0,
|
||
|
|
ratingsList:[
|
||
|
|
{id:1,username:"大黑哥",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"good",
|
||
|
|
first:{content:"好看，可以，不愧是专业的，才拿到手上就研究了半天才装上",
|
||
|
|
img:["https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg","https://ae01.alicdn.com/kf/HTB1sL7hTjDpK1RjSZFrq6y78VXaw.jpg","https://ae01.alicdn.com/kf/HTB111soTbvpK1RjSZPiq6zmwXXaB.jpg","https://ae01.alicdn.com/kf/HTB1O2TRTmzqK1RjSZPcq6zTepXa4.jpg"],
|
||
|
|
video:[{img:"https://ae01.alicdn.com/kf/HTB1AMEBTcfpK1RjSZFOq6y6nFXaK.jpg",path:"https://mp4.vjshi.com/2018-12-28/1083f3db90334f86e3fc3586b4472914.mp4"}]
|
||
|
|
},
|
||
|
|
append:{date:65,content:"用了一段时间，质量很好，体验很流畅，推荐购买",
|
||
|
|
img:["https://ae01.alicdn.com/kf/HTB1dKZtTgHqK1RjSZFEq6AGMXXaS.jpg","https://ae01.alicdn.com/kf/HTB18h3oTmzqK1RjSZFjq6zlCFXap.jpg"],
|
||
|
|
video:[{img:"https://ae01.alicdn.com/kf/HTB1AMEBTcfpK1RjSZFOq6y6nFXaK.jpg",path:"https://mp4.vjshi.com/2017-06-17/ed1d63669bea39f5ef078c4e194291d6.mp4"}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{id:2,username:"小黑狗",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"secondary",
|
||
|
|
first:{content:"好评，看图",
|
||
|
|
img:["https://ae01.alicdn.com/kf/HTB111soTbvpK1RjSZPiq6zmwXXaB.jpg","https://ae01.alicdn.com/kf/HTB1O2TRTmzqK1RjSZPcq6zTepXa4.jpg"],
|
||
|
|
video:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{id:3,username:"小黑狗",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"poor",
|
||
|
|
first:{content:"好评，看图",
|
||
|
|
img:["https://ae01.alicdn.com/kf/HTB111soTbvpK1RjSZPiq6zmwXXaB.jpg","https://ae01.alicdn.com/kf/HTB1O2TRTmzqK1RjSZPcq6zTepXa4.jpg"],
|
||
|
|
video:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{id:3,username:"小黑狗",face:"/static/img/face.jpg",date:'2019-04-21',spec:"规格: XL",grade:"secondary",
|
||
|
|
first:{content:"系统默认好评",
|
||
|
|
img:[],
|
||
|
|
video:[]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
videoDirection:0,
|
||
|
|
showFullscreenBtn:true,
|
||
|
|
showPlayBtn:true,
|
||
|
|
isPlayVideo:true,
|
||
|
|
videoSrc:''
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onReady: function (res) {
|
||
|
|
this.videoContext = uni.createVideoContext('myVideo')
|
||
|
|
},
|
||
|
|
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
||
|
|
onPullDownRefresh() {
|
||
|
|
setTimeout(function() {
|
||
|
|
uni.stopPullDownRefresh();
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
|
||
|
|
onReachBottom() {
|
||
|
|
uni.showToast({ title: '触发上拉加载' });
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loadRatings(index){
|
||
|
|
this.labelIndex = index;
|
||
|
|
uni.showToast({
|
||
|
|
title:"切换评论列表"
|
||
|
|
})
|
||
|
|
//实际应用中，请求对应类型的评论列表，覆盖this.ratingsList
|
||
|
|
/*
|
||
|
|
let type = this.labelList[index].type; // 评论类型
|
||
|
|
......
|
||
|
|
*/
|
||
|
|
},
|
||
|
|
playVideo(path) {
|
||
|
|
this.videoSrc = path;
|
||
|
|
// this.isPlayVideo = true;
|
||
|
|
this.$nextTick(function() {
|
||
|
|
this.videoContext.requestFullScreen({direction:0});
|
||
|
|
});
|
||
|
|
|
||
|
|
},
|
||
|
|
stopPlayVideo(){
|
||
|
|
this.videoContext.pause();
|
||
|
|
},
|
||
|
|
videoPause(){
|
||
|
|
// this.isPlayVideo = false;
|
||
|
|
this.videoSrc = '';
|
||
|
|
},
|
||
|
|
viderFullscreen(e){
|
||
|
|
if(e.detail.fullScreen){
|
||
|
|
this.videoContext.play();
|
||
|
|
}else{
|
||
|
|
this.stopPlayVideo();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
showBigImg(src,srclist){
|
||
|
|
uni.previewImage({
|
||
|
|
current:src,
|
||
|
|
urls: srclist
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page{
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.myVideo{
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
right: 100%;
|
||
|
|
}
|
||
|
|
.content{
|
||
|
|
view{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
width: 94%;
|
||
|
|
padding: 0 3%;
|
||
|
|
|
||
|
|
.label{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap:wrap;
|
||
|
|
view{
|
||
|
|
padding: 0 20upx;
|
||
|
|
height: 50upx;
|
||
|
|
border-radius: 40upx;
|
||
|
|
border:solid 1upx #ddd;
|
||
|
|
align-items: center;
|
||
|
|
color: #555;
|
||
|
|
font-size: 26upx;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
margin: 10upx 20upx 10upx 0;
|
||
|
|
&.on{
|
||
|
|
border:solid 1upx #f06c7a;
|
||
|
|
color: #f06c7a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
padding: 20upx 0;
|
||
|
|
.row{
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 30upx;
|
||
|
|
.left{
|
||
|
|
width: 10vw;
|
||
|
|
flex-shrink: 0;
|
||
|
|
margin-right: 10upx;
|
||
|
|
.face{
|
||
|
|
width: 100%;
|
||
|
|
image{
|
||
|
|
width: 10vw;
|
||
|
|
height: 10vw;
|
||
|
|
border-radius: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.name-date{
|
||
|
|
width: 100%;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: baseline;
|
||
|
|
.username{
|
||
|
|
font-size: 32upx;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
.date{
|
||
|
|
font-size:28upx;
|
||
|
|
color: #aaa;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.spec{
|
||
|
|
width: 100%;
|
||
|
|
color: #aaa;
|
||
|
|
font-size: 26upx;
|
||
|
|
}
|
||
|
|
.first{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.rat{
|
||
|
|
font-size: 30upx;
|
||
|
|
}
|
||
|
|
.img-video{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.box{
|
||
|
|
width: calc((84.6vw - 50upx)/4);
|
||
|
|
height: calc((84.6vw - 50upx)/4);
|
||
|
|
margin: 5upx 5upx;
|
||
|
|
position: relative;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
image{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 10upx;
|
||
|
|
}
|
||
|
|
.playbtn{
|
||
|
|
position: absolute;
|
||
|
|
.icon{
|
||
|
|
font-size: 80upx;
|
||
|
|
color: rgba(255,255,255,.9)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.append{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.date{
|
||
|
|
width: 100%;
|
||
|
|
height: 40upx;
|
||
|
|
border-left: 10upx solid #f06c7a;
|
||
|
|
padding-left: 10upx;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 32upx;
|
||
|
|
margin: 20upx 0;
|
||
|
|
}
|
||
|
|
.rat{
|
||
|
|
font-size: 30upx;
|
||
|
|
}
|
||
|
|
.img-video{
|
||
|
|
width: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.box{
|
||
|
|
width: calc((84.6vw - 10upx - (10upx * 4))/4);
|
||
|
|
height: calc((84.6vw - 10upx - (10upx * 4))/4);
|
||
|
|
margin: 5upx 5upx;
|
||
|
|
position: relative;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
image{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 10upx;
|
||
|
|
}
|
||
|
|
.playbtn{
|
||
|
|
position: absolute;
|
||
|
|
.icon{
|
||
|
|
font-size: 80upx;
|
||
|
|
color: rgba(255,255,255,.9);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
* <view class="list">
|
||
|
|
<view class="row">
|
||
|
|
|
||
|
|
<view class="right">
|
||
|
|
|
||
|
|
<view class="spec">
|
||
|
|
规格：XL
|
||
|
|
</view>
|
||
|
|
<view class="first">
|
||
|
|
<view class="rat">
|
||
|
|
好看，可以，不愧是专业的，才拿到手上就研究了半天才装上
|
||
|
|
</view>
|
||
|
|
<view class="img-video">
|
||
|
|
<view class="box">
|
||
|
|
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||
|
|
<view class="playbtn">
|
||
|
|
<view class="icon bofang"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="box">
|
||
|
|
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||
|
|
</view>
|
||
|
|
<view class="box">
|
||
|
|
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="append">
|
||
|
|
<view class="date">
|
||
|
|
65天后追加
|
||
|
|
</view>
|
||
|
|
<view class="rat">
|
||
|
|
好看，可以，不愧是专业的，才拿到手上就研究了半天才装上
|
||
|
|
</view>
|
||
|
|
<view class="img-video">
|
||
|
|
<view class="box">
|
||
|
|
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||
|
|
</view>
|
||
|
|
<view class="box">
|
||
|
|
<image src="https://ae01.alicdn.com/kf/HTB1wREwTXzqK1RjSZFvq6AB7VXaT.jpg"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
*
|
||
|
|
* */
|
||
|
|
</style>
|