@ -1,388 +0,0 @@ |
||||
<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 #0083f5; |
||||
color: #0083f5; |
||||
} |
||||
} |
||||
} |
||||
.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 #0083f5; |
||||
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> |
||||
@ -0,0 +1,25 @@ |
||||
<template> |
||||
<view> |
||||
<web-view :src="url"></web-view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
url: '' |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
this.url = decodeURIComponent(options.url); |
||||
}, |
||||
methods: { |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -1,130 +0,0 @@ |
||||
<template> |
||||
<view> |
||||
<view class="block"> |
||||
|
||||
</view> |
||||
<!-- <view class="QR"> |
||||
<image src="../../../static/img/qr.png"></image> |
||||
</view> --> |
||||
<view class="title"> |
||||
扫描二维码，加我好友 |
||||
</view> |
||||
<view class="btn" v-show="showBtn" @tap="printscreen"> |
||||
{{tis}} |
||||
</view> |
||||
<!-- <view class="logo"> |
||||
<image mode="widthFix" src="../../../static/img/qrlogo.png"></image> |
||||
</view> --> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
tis:"保存到相册", |
||||
showBtn:false |
||||
}; |
||||
}, |
||||
onLoad() { |
||||
// #ifdef APP-PLUS |
||||
this.showBtn = true; |
||||
// #endif |
||||
}, |
||||
methods:{ |
||||
// 截图，调用webview、Bitmap方法 |
||||
printscreen(){ |
||||
this.tis = "正在保存" |
||||
let ws=this.$mp.page.$getAppWebview(); |
||||
let bitmap = new plus.nativeObj.Bitmap(); |
||||
this.showBtn = false; |
||||
this.$nextTick(function(){ |
||||
setTimeout(()=>{ |
||||
ws.draw(bitmap,(e)=>{ |
||||
this.showBtn = true; |
||||
console.log('bitmap绘制图片成功'); |
||||
console.log("e: " + JSON.stringify(e)); |
||||
bitmap.save("_doc/Qr.jpg", { |
||||
overwrite: true, |
||||
quality: 100 |
||||
}, (i)=>{ |
||||
plus.gallery.save(i.target,(e)=>{ |
||||
uni.showToast({ |
||||
title:'保存成功' |
||||
}) |
||||
this.tis = "保存到相册" |
||||
bitmap.clear(); //销毁 |
||||
},(e)=>{ |
||||
bitmap.clear(); //销毁 |
||||
}); |
||||
},(e)=>{ |
||||
console.log('保存图片失败：' + JSON.stringify(e)); |
||||
}); |
||||
},(e)=>{ |
||||
console.log('bitmap绘制图片失败：'+JSON.stringify(e)); |
||||
}); |
||||
},200) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
page{ |
||||
background-color: #0083f5; |
||||
} |
||||
.block{ |
||||
width: 100%; |
||||
height: 30vh; |
||||
background-color: #fff; |
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
} |
||||
.QR{ |
||||
width: 60vw; |
||||
height: 60vw; |
||||
margin: -40vw auto 0 auto; |
||||
background-color: #fff; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
image{ |
||||
width: 50vw; |
||||
height: 50vw; |
||||
} |
||||
} |
||||
.title{ |
||||
width: 100%; |
||||
margin-top: 50upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
font-size: 36upx; |
||||
color: #fff; |
||||
} |
||||
.btn{ |
||||
|
||||
width: 50%; |
||||
height: 80upx; |
||||
border-radius: 80upx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 0 20upx; |
||||
margin: 0 auto; |
||||
margin-top: 50upx; |
||||
background-color: rgba(255,255,255,.8); |
||||
} |
||||
.logo{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
position: absolute; |
||||
bottom: 25upx; |
||||
image{ |
||||
width: 39.6%; |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 826 B |
|
Before Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 9.7 KiB |
|
Before Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 716 B |
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 7.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 1004 B |
|
Before Width: | Height: | Size: 831 B |
|
Before Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 7.1 KiB |