yicangzongtai_app_240321/pages/research/business/material.vue

<template>
	<view class="material">
		<navbar :config="config"></navbar>
		<div class="zhan" :style="{ top:top + 'px' }"></div>
		<view class="background">
			<view class="content">
				<view v-if="itemList.length>=0">
					<view class="item" style="position: relative;" v-for="(item,index) in itemList" :key="item.id">
						<!-- 			<view class="image">
						<image src="../../../static/lidalogo.png" mode=""></image>
					</view> -->
						<view class="gratitude">
							<view class="top-box">
								<view class="title">
									{{item.title}}
								</view>
								<view class="iconfont " @click="downloadImg(item)">
									&#xe64b;
								</view>
							</view>

							<view class="detailed">
								{{item.detail}}
							</view>
							<view class="copy-file" @click="copy(item.detail)">
								复制文案
							</view>
							<view class="file-image">
								<image v-if="item.type==0" :src="item.filePath" mode=""></image>

								<!-- <j-video v-if="item.type==1" class="jvideo" :url="item.filePath" width="374rpx">
								</j-video> -->
								<video v-if="item.type==1" class="jvideo" style="width: 374rpx;height: 450rpx;" :src="item.filePath" @fullscreenchange="fullscreenchange"></video>
								<view class="relative" v-if="item.type==2">
									<!-- <audio @error="audioErr" style="position: relative;"  :src="item.filePath"
										duration="item.duration" :controls="true">
										</audio>
										<text class="absolute"  v-if="item.type==2">{{item.duration|secondsFormat}}</text> -->
										<!-- <div @click="audioPlay(item,index)">播放</div> -->
										<image v-show="!item.play" @click="audioPlay(item,index)" :src="imgUrl+'/play.png'" mode=""></image>
										<image v-show="item.play" @click="audioPlay(item,index)" :src="imgUrl+'/pause.png'" mode=""></image>
										
								</view>
							
									
								
								<!-- <audio v-if="item.type==2" :src="item.filePath" :poster="" :name="" :author="" :action="" controls></audio> -->

							</view>
						</view>

						<!-- 					<uni-popup ref="popup" type="bottom">
						<view class="forward">
							<view class="top">
								<view class="text">
									分享至
								</view>
								<view class="line">
								</view>
							</view>
							<view class="list">
								<view class="wx">
									<image src="" mode=""></image>
								</view>
								<view class="friend">
								</view>
								<view class="micro">
								</view>
								<view class="copylink">
								</view>
							</view>
						</view>
					</uni-popup> -->
					</view>
					<loadMore v-if="itemList.length>0" :status="status"></loadMore>

					<nodata v-else :config="{top:20,content:'暂无素材~'}"></nodata>


				</view>

			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	import jVideo from "../../../components/j-video/j-video.vue"
	import {
		material
	} from "../../../api/notice.js"
	export default {
		components: {
			jVideo
		},
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '宣传素材',
					color: '#fff',
					switchnextstep: true, //切换底部样式
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#0B844A"],
					// fixed:false,
					statusBarFontColor: '#ffffff'
				},
				value: "只有我在意这个“研究”究竟是什么含义嘛只有我 在意这个“研究”究竟是什么含义嘛只有我在意这 个“研究”究竟是什么含义嘛",
				itemList: [],
				params: {
					page: 1,
					limit: 10
				},
				status: "more",
				audioCtx: null, // 音频上下文
				contextArr:[],
				duration: 0, // 音频总时长
				currentTime: 0, // 音频当前播放的时长
				top: 0,
				imgUrl: this.$mConfig.staticUrl
			}
		},
		onLoad() {
			this.audioCtx = uni.createInnerAudioContext()
			this.audioCtx.obeyMuteSwitch = false
			this.getList()
			this.top = app.globalData.barHeight + 44
			
		},
		//下拉刷新
		onPullDownRefresh() {

			this.params.page = 1
			this.itemList = []
			this.getList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == "more") {
				this.params.page++
				this.getList()
			}

		},
		filters:{
			secondsFormat(s) {
			      var day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
			      var hour = Math.floor((s - day * 24 * 3600) / 3600);
			      var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
			      var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
			      if (hour) {
			        return hour + ":" + minute + ":" + second;
			      } else {
			        if (second < 10) {
			          if (minute < 10) {
			            return "0" + minute + ":" + second + "0";
			          } else {
			            return minute + ":" + second + "0";
			          }
			        } else {
			          return minute + ":" + second.toFixed(0);
			        }
			      }
			    }
		 
		},
		methods: {
			audioErr(e) {
				console.log(e)
				console.log('音频错误')
			},
			audioPlay(v,k) {
				this.contextArr.forEach((item,key) => {
					if(v.id == item.id) {
						if(!v.play) {
							item.audioCtx.play()
							this.itemList[k].play = true
						}else {
							item.audioCtx.pause()
							this.itemList[k].play = false
						}
					}
				})
				// if(!v.play) {
				// 	this.audioCtx.play()
				// 	this.itemList[k].play = true
				// }else {
				// 	this.audioCtx.pause()
				// 	this.itemList[k].play = false
				// }
				console.log(v.filePath)
				
			},
			fullscreenchange(e){
			
			},
			copy(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						uni.showToast({
							title: "复制成功",
						});
					},
				});
			},
			//下载图片
			downloadImg(item) {
				// console.log(item.filePath)
				uni.showModal({
					title: "是否下载素材",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});
							uni.downloadFile({

								url: item.filePath,
								success: (res) => {
									if (res.statusCode === 200) {
										if(item.type == 0) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.hideLoading();
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
													console.log(res.tempFilePath)
												},
												fail: function(err) {
													uni.hideLoading();
													uni.showToast({
														title: "保存失败，请稍后重试",
														icon: "none"
													});
													console.log(err)
												}
											});
										}else if(item.type == 1) {
											uni.saveVideoToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.hideLoading();
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
													console.log(res.tempFilePath)
												},
												fail: function(err) {
													uni.hideLoading();
													uni.showToast({
														title: "保存失败，请稍后重试",
														icon: "none"
													});
													console.log(err)
												}
											});
										}else {
											uni.saveFile({
												tempFilePath: res.tempFilePath,
												success() {
													uni.hideLoading();
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail() {
													uni.hideLoading();
													uni.showToast({
														title: "保存失败，请稍后重试",
														icon: "none"
													});
												}
											})
										}
				
									}
								}
							})
							// downloadTask.onProgressUpdate((res)=>{
							// 	console.log("下载进度"+res.progress)
							// 	uni.showLoading({
							// 	    title: '加载中'
							// 	});
							// })


						} else if (res.cancel) {
							console.log(777)
						}
					}
				})
			},
			//获取数据
			getList() {
				let _that = this;
				this.$http.get(material, this.params).then(res => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.itemList = this.itemList.concat(res.page.list)
						if (res.page.totalPage <= res.page.currPage) {
							this.status = "noMore";
						} else {
							this.status = 'more'
						}

								let context = []
						_that.itemList.forEach(item => {
							if (item.type == 2) {
								context.push({
									id: item.id,
									audioCtx: uni.createInnerAudioContext(),
									src: item.filePath
								})
								context.forEach(vv => {
									vv.audioCtx.src = vv.src
								})
								_that.audioCtx.src = item.filePath;
								_that.audioCtx.startTime = 0
								// _that.audioCtx.autoplay = true;
								_that.audioCtx.onCanplay(() => {
									 
									 this.$set(item,"duration", _that.audioCtx.duration)
									
									console.log('开始播放' + item.duration);
									//alert(_that.audioCtx.duration + "---" + audioObj.filePath)
								});
								this.$set(item,"play", false)
								_that.contextArr = context
							}
						})
						console.log(this.contextArr)
						console.log('contextArr数组')
					}

				})
			},
			showlink() {
				this.$refs.popup[0].open()
				// this.$refs.popup.open()
				console.log(666)
			},
			doCopy() {

			},


		},
		onUnload() {
			this.audioCtx.destroy();
			this.audioCtx = null;
		}
	}
</script>

<style lang="scss" scoped>
	.jvideo {
		border-radius: 18rpx;
	}
	.zhan {
		background: #0B844A;
		height: 20px;
		width: 100%;
		position: fixed;
	}
	.background {
		// background: #0B844A;
		position: relative;
		z-index: 10;
		.content {
			overflow: hidden;
			background-color: #ffffff;
			border-radius: 40rpx 40rpx 0 0;

			.item {
				display: flex;
				padding: 40rpx 30rpx 40rpx 30rpx;
				margin-bottom: 41rpx;
				border-bottom: 10rpx solid #f5f5f5;
				overflow: hidden;

				.forward {
					// 弹出框
					height: 565rpx;
					background-color: #ffffff;
					border-radius: 50rpx 50rpx 0 0;

					.top {
						padding: 37rpx 0 12rpx 0;
						text-align: center;

						.text {
							font-size: 36rpx;
							font-weight: 700;
							color: #1A1A1A;
							margin-bottom: 12rpx;
						}

						.line {
							margin: 0 auto;
							width: 64rpx;
							height: 8rpx;
							background-color: #cccccc;

						}
					}

				}

				.image {
					image {
						width: 76rpx;
						height: 76rpx;
					}
				}

				.gratitude {
					// flex-grow: 1;
					
					width: 100%;

					.top-box {
						display: flex;
					
						width: 100%;
					}

					.title {
						width: 600rpx;
						flex-grow: 1;
						font-size: 28rpx;
						color: #1a1a1a;
						font-weight: 400;
						line-height: 40rpx;
						margin-bottom: 18rpx;
						flex-basis: 0;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						

					}

					.iconfont {
						margin-left: 30rpx;
						font-size: 30rpx;
						color: #0B844A;
						// width: 50rpx;
					}

					.detailed {
						font-size: 28rpx;
						color: #999999;
						font-weight: 500;
					}

					.copy-file {
						margin-top: 18rpx;
						color: rgba(254, 144, 0, 1);
						text-decoration: underline;
					}
					
					.file-image {
						margin-top: 18rpx;

						image {
							width: 374rpx;
							height: 574rpx;
							border-radius: 18rpx;
						
						}
						.relative{
							position: relative;
							width: 100rpx;
							height: 100rpx;
							border: 1px solid #cccccc;
							display: flex;
							align-items: center;
							justify-content: center;
							.absolute{
								position: absolute;
								right: 30rpx;
								bottom: 30rpx;
								color: #888;
								font-size: 24rpx;
							}
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}
					}
				}

				.link {
					position: absolute;
					right: 30rpx;
					top: 57rpx;

					// line-height: 76rpx;
					image {
						width: 43rpx;
						height: 41rpx;
					}
				}

			}
		}
	}
</style>