vlogList.vue

<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>