<template>
<view class="content">
<view style="padding-top: 30rpx;">
<view class="item" v-for="(item,index) in myVlogList" :key="index">
<video class="video" :src="item.productUrl" :poster="item.thumbImageUrl" @error="error" object-fit="fill"
play-btn-position="center" :id="index" @play="playing(index)"></video>
<view class="">
<!-- <button v-if="item.shareNumber===0" :data-productUrl="item.productUrl" :data-productId="item.productId" class="btnn"
open-type="share">分享下载</button> -->
<!-- v-else -->
<button class="btnn" @click="handPayment(item.productUrl,item.isPay,item.sellingPrice)">下载视频</button>
<text class="price">¥<text>{{item.sellingPrice}}</text></text>
</view>
<view style="clear: both;"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
openid:'',
myVlogList: [], //我的视频列表
merchantId: '', //景区id
merchantIdOrder:'',//下单用merchantId
merchantMessage:[],//景区基础参数
}
},
onLoad(options) {
this.merchantId = options.merchantId
this.merchantIdOrder=options.merchantIdOrder||'z0015605022691a5945bbe463141668c'
this.openid = uni.getStorageSync('openid') //获取openid
this.getMyVlogList()
this.mearchLoadList()//调用参数
},
onShow() {
},
onUnload() { //退出页面
},
onHide() {},
onReady() {},
onShareAppMessage(res) { //分享
let productId = res.target.dataset.productid
let productUrl= res.target.dataset.producturl
if (res.from === 'button') {
this.$request('wechatUser/myPage/updateVlogRecord', {
productId,
openid: uni.getStorageSync('openid')
}).then(res => {
if (res.code === '00') {
this.getMyVlogList()
}
})
return {
title: '胖丁旅行',
type: 4,
path: '/pages/vlog/share/share?url='+productUrl,
}
}else{
return {
title: '胖丁旅行',
type: 4,
path: '/pages/vlog/vlogIndex/vlogIndex',
}
}
},
methods: {
getMyVlogList() { //获取景区vlog列表
this.$request('wechatUser/myPage/getVlogRecord', {
openid: uni.getStorageSync('openid'),
productType:0
}).then(res => {
if (res.code === '00') {
res.data.forEach(item => { //获取当前景区视频列表
if (this.merchantId === item.merchantId) {
this.myVlogList = item.vlogList
}
})
}
})
},
playing(e) { //控制只播放当前video
this.myVlogList.forEach((item, index) => {
if (e !== index) {
uni.createVideoContext(index.toString()).pause()
}
})
},
handPayment(productUrl,isPay,sellingPrice){//当前视频是否需要支付下载费用
//isPay 0为未支付 1为已支付
if(isPay==0){//originalPrice 原价 sellingPrice售价 settlementPrice结算价
this.upLoad(sellingPrice,productUrl)
}else{
this.handleDownload(productUrl)
}
},
upLoad(sellingPrice,productUrl){//下单
var data = {
companyId:this.merchantMessage[0].companyId||'',//公司ID
orderMoney:sellingPrice,//订单总价
userId:this.openid,
orderProductVo:{},//下单信息
orderType:12,// vlogTYPE值
orderProductList:[],//景区下单信息
}
var orderProductListData = {
buyNum:1,//购买数量
merchantId:this.merchantMessage[0].merchantId||'',
orderType:12,// 12vlog
productId:this.merchantMessage[0].merchantExtendProjectId||'',
productName:this.merchantMessage[0].merchantExtendProjectName||'',
extendContent:'',
unitPrice:sellingPrice,//产品单价
orderImgList:[],////订单图片
couponList:[],//券信息
}
var imgList = {
imgUrl:productUrl,
imgType:1,
}
orderProductListData.orderImgList.push(imgList)
var extendContentData={
openid:this.openid,
projectAddress:this.merchantMessage[0].projectAddress||'',
projectPhone:this.merchantMessage[0].projectPhone||'',
}
orderProductListData.extendContent = JSON.stringify(extendContentData)
data.orderProductList.push(orderProductListData)
//data.orderProductVo = orderProductVo
this.$request('orderc/photo/photoCreateOrder',data).then((res)=>{
if(res.code=='00'){
uni.navigateTo({
url:'../../payment/orderPayment/orderPayment?orderId='+res.data.id+'&albumOrderdetail=1'
})
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
mearchLoadList(){//调用参数
var merchantIds = []
merchantIds.push(this.merchantIdOrder)
this.$request('scenic/merchantExtendProject/loadList',{
merchantIds:merchantIds,
merchantExtendProjectName:'vlog'
}).then((res)=>{
if(res.code=='00'){
this.merchantMessage = res.data
}else{
uni.showToast({
title: res.message,
icon: 'none'
})
}
})
},
handleDownload(url) { // 下载功能
uni.showLoading({
title: '下载中',
mask: true
})
let fileName = new Date().valueOf() //获取时间戳
uni.downloadFile({ //下载文件资源到本地
url,
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4', //filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH,时间戳为文件名
success: res => { //下载到本地成功
let filePath = res.filePath
uni.saveVideoToPhotosAlbum({ //保存视频到系统相册。
filePath,
success: file => { //保存成功
//删除本地缓存
let fileMgr = uni.getFileSystemManager()
fileMgr.unlink({
filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.mp4',
})
uni.showToast({
title: '下载成功',
icon: 'success',
mask: true
})
},
fail: err => {
uni.hideLoading()
//拒绝授权时显示
if (err.errMsg === 'saveVideoToPhotosAlbum:fail auth deny') {
uni.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: data => {
//打开权限设置
uni.openSetting({
success: setting => {
if (setting.authSetting['scope.writePhotosAlbum']) {
uni.showModal({
title: '提示',
content: '获取权限成功,再次点击下载即可保存',
showCancel: false,
})
} else {
uni.showModal({
title: '提示',
ontent: '获取权限失败，将无法保存到相册哦',
showCancel: false
})
}
},
})
}
})
}
}
})
},
fail: err => { //下载失败
uni.hideLoading()
if (err.errMsg == 'downloadFile:fail createDownloadTask:fail url not in domain list') {
uni.showToast({
title: '服务器错误，请联系相关管理员',
icon: 'none',
mask: true
})
}
}
})
},
error(e) { //视频播放出错触发函数
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
},
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 0 20rpx;
min-height: 100%;
width: 100%;
text-align: center;
background-color: #192033;
.item {
padding: 0 10rpx;
border-radius: 10rpx;
background-color: #192033;
padding-bottom: 40rpx;
.video {
height: 350rpx;
border-radius: 10rpx;
width: 100%;
}
view {
margin: 20rpx 0;
.btnn {
float: left;
width: 150rpx;
background-color: #FFE600;
font-weight: bold;
border-radius: 30rpx;
line-height: 30rpx;
font-size: 24rpx;
padding: 10rpx 15rpx;
}
.price {
float: right;
color: #DE6F26;
font-size: 22rpx;
text {
font-size: 32rpx;
margin-left: 5rpx;
font-weight: bold;
}
}
}
}
}
</style>