sound-chain/pages/task/details.vue

<!-- 任务详情 -->
<template>
  <s-layout
	class="task_details_page"
    title="任务详情"
    navbar="inner"
	:bgStyle="state.page"
	:navbarStyle="state.navigationBar"
	showBackButton
	:showExportButton="state.taskInfo.status===10"
	@export="handleExport"
  >
   <view class="task_cont">
	   <scroll-view class="task_scroll" :scroll-y="!state.showIntentionSelect" @scrolltolower="scrolltolower">
		   <view class="task_details">
			  <view class="task_details_cont">
				  <view class="top">
					  <view class="name_box">
						  <view class="name">{{state.taskInfo.name}} </view>
						  <view class="time">{{formatDate(state.taskInfo.planTime,'YYYY-MM-DD HH:mm')}}</view>
					  </view>
					  <view class="verbal">{{state.taskInfo.typeName}}</view>
				  </view>
				  <view class="cont">
					  <view class="detail_item">
						  <view class="label">高意向数量</view>
						  <view class="num">{{state.taskInfo.highIntentionCount}}</view>
					  </view>
					  <view class="detail_item">
						  <view class="label">拨打数量</view>
						  <view class="num">{{state.taskInfo.lingCount||0}}</view>
					  </view>
				  </view>
				  <view class="bottom">
					  <view class="detail_item">
						  <view class="label">接通率：</view>
						  <view class="num">{{((state.taskInfo.answerRate||0)*100).toFixed(2)*100/100}}%</view>
					  </view>
					  <view class="detail_item">
						  <view class="label">未接通率：</view>
						  <view class="num">{{((state.taskInfo.notAnswerRate||0)*100).toFixed(2)*100/100}}%</view>
					  </view>
					  <view class="detail_item">
						  <view class="label">号码无效率：</view>
						  <view class="num">{{((state.taskInfo.invalidRate||0)*100).toFixed(2)*100/100}}%</view>
					  </view>
				  </view>
			  </view>
		  </view>
		  <s-empty v-if="state.pagination.total === 0&&state.loadStatus != 'loading'" icon="/static/order-empty.png" text="暂无记录" />
		  <view v-else class="task_list">
			  <view class="intention_select_vaule">
					  <view class="select_vaule" @tap="state.showIntentionSelect=true;state.showIntentionNames=JSON.parse(JSON.stringify(state.intentionNames))">{{state.intentionNames.length?state.intentionNames.join(','):'全部意向'}}</view>
			  </view>
			  <view v-if="state.showIntentionSelect" class="intention_select">
					<view class="intention_select_bg">
						<view class="select_cont">
							<view class="select_vaule" @tap="state.showIntentionSelect=false">{{state.intentionNames.length?state.intentionNames.join('，'):'全部意向'}}</view>
							<view class="intention_list">
								<view class="intention_item" :class="{'select_item':!state.intentionNames.length}" @tap="state.intentionNames=[]">全部意向</view>
								<view class="intention_item" :class="{'select_item':state.intentionNames.includes(item)}" v-for="(item, index) in state.intentionList" :key="index" @tap="onIntention(item)">{{item}}</view>
							</view>
							<view class="group_btn">
								<view class="cancel_btn" @tap="state.showIntentionSelect=false;state.intentionNames=JSON.parse(JSON.stringify(state.showIntentionNames))">取消</view>
								<view class="confirm_btn" @tap="onConfirm">确认</view>
							</view>
						</view>
					</view>
			  </view>
			  <view class="task_item" :class="{'show_down':item.showDown}" v-for="(item, index) in state.pagination.list" :key="index">
				  <view class="task_title" @tap="onDown(item)">
					  <view class="left">
						  <view class="title">
							  <view class="name">{{item.phone}}</view>
							  <!-- <image v-if="item.callStatus===2" class="status_icon" src="/static/status_icon1.png"></image> -->
							  <div v-if="item.intentionName" class="intention">{{item.intentionName}}</div>
						  </view>
						  <view v-if="item.callTime" class="time">{{formatDate(item.callTime)}}</view>
					  </view>
					  <view class="right">
						  <image v-if="item.callStatus===2&&item.recordName" class="down_icon" src="/static/down_icon.png"></image>
					  </view>
				  </view>
				  <div class="concern" v-if="!!item.concern">
					  <div class="label">客户关注点：</div>
					  <div class="concern_list">
						  <div class="concern_item" v-for="(name,index) in item.concern.split(',')" :key="index">{{name}}</div>
					  </div>
				  </div>
				  <view class="down_box">
					<view class="sound_play">
						<slider :value="item.currentTime" step="1" block-size="8" block-color="#24D688" backgroundColor="#BBDECF" activeColor="#24D688" min="0" :max="item.duration" @changing="sliderChanging($event,item,index)" />
						<view class="slider_time">
							<view class="play_time">{{Math.floor(item.currentTime/60)}}:{{Math.floor(item.currentTime%60)>=10?Math.floor(item.currentTime%60):'0'+Math.floor(item.currentTime%60)}}</view>
							<view class="total_time">{{Math.floor(item.duration/60)}}:{{item.duration%60>=10?item.duration%60:'0'+item.duration%60}}</view>
						</view>
						<view class="play_tool">
							<image class="play_tool_icon" src="/static/play_tool_icon1.png" @tap="changePlay(-15,item,index)"></image>
							<image v-if="item.isPlaying" class="play_tool_icon" src="/static/play_tool_icon4.png" @tap="pauseAudio"></image>
							<image v-else class="play_tool_icon" src="/static/play_tool_icon2.png" @tap="playAudio(item,index)"></image>
							<image class="play_tool_icon" src="/static/play_tool_icon3.png" @tap="changePlay(15,item,index)"></image>
						</view>
					</view>
					<!-- <view class="ai_analyse">
						<view class="label">AI分析：</view>
						<view class="cont">星光五菱，这个名宇一听就让人心生向往！最近在海吉星买水果的路上，偶遇一辆五菱新车，名为五这辆车真的是太酷了！两种类型可选，纯电和动，
	  满足不同的需求。后脸造型有气势，一看就知道不是普通的车</view>
					</view> -->
				  </view>
			  </view>
			  <!-- 加载更多 -->
			  <uni-load-more
				v-if="state.pagination.total > 0"
				:status="state.loadStatus"
				:content-text="{
				  contentdown: '上拉加载更多',
				}"
				@tap="loadMore"
			  />
		  </view>
		  
		</scroll-view>
	</view>
  </s-layout>
</template>

<script setup>
  import _ from 'lodash-es';
  import $helper from '@/common/helper';
  import { ref, computed, reactive } from 'vue';
  import { onShow, onLoad, onUnload, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/common';
  import taskApi from '@/common/api/member/task'
  import { formatDate, isWxBrowser } from '@/common/helper/utils'
  const state = reactive({
	navigationBar: {},
    page: {
		backgroundColor: '#FFFFFF',
		backgroundImage: '/static/homeTopBg.png'
	},
	pagination: {
	  list: [],
	  total: 0,
	  page: 1,
	  pageCount: 10,
	},
	sliderValue: 10,
	sliderMaxValue: 210,
	taskInfo: {},
	innerAudioContext: null,
	isPlaying: false,
	currentIndex: 0,
	intentionNames:[],
	showIntentionSelect:false,
	intentionList: [],
	showIntentionNames:[]
  })
  onShow(async () => {
    //onShow中获取列表,保证跳转后页面为最新状态
    await getTaskDetail(state.taskInfo.id);
  });
  onLoad((options) => {
    state.taskInfo.id = options.id
	getPhoneList()
	getIntentionList()
  })
  onUnload(()=>{
  	  if (state.innerAudioContext) {
  	    try {
  	      state.innerAudioContext.pause();
  	      state.innerAudioContext.destroy()
  	      state.innerAudioContext = null
  	    } catch (e) {
  	      //TODO handle the exception
  	    }
  	  }
  })
	async function handleExport(){
	  if(isWxBrowser()){
		  uni.showToast({
			title:'请在浏览器打开导出',
			icon: 'none'
		  })
	  }else{
		  uni.showLoading({
			title:'导出中'
		  })
		  let res = await taskApi.phoneExport({
			intentionNames: state.intentionNames,
			taskId: state.taskInfo.id,
			page: state.pagination.page,
			pageCount: state.pagination.pageCount,
		})
		  uni.hideLoading()
		  const { code, data, msg } = res
		  if (code === 1) {
			  let url = 'https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/' + data.filePyth
			  let a = document.createElement('a')
			  a.href = url
			  a.download = data.filePyth.substr(data.filePyth.lastIndexOf('/') + 1)
			  document.body.appendChild(a)
			  a.click()
		  } else {
			  uni.showToast({
				title: msg,
			  })
		  }
	  }
	}
	function onIntention(val){
		if(state.intentionNames.includes(val)){
			state.intentionNames = state.intentionNames.filter(item=>item!=val)
		}else{
			state.intentionNames.push(val)
		}
		
	}
	function onConfirm(){
		if (state.innerAudioContext) {
		  try {
		    state.innerAudioContext.pause()
		    state.innerAudioContext.destroy()
		    state.innerAudioContext = null
			state.currentIndex = 0
		  } catch (e) {
		    //TODO handle the exception
		  }
		}
		state.pagination.list = []
		state.pagination.total = 0
		state.pagination.page = 1
		getPhoneList()
		state.showIntentionSelect=false
	}
	async function getTaskDetail(id) {
		let res = await taskApi.taskDetail(id)
		if (res.code === 1) {
			state.taskInfo = res.data
		} else {
			sheep.$router.back()
		}
	}
	async function getIntentionList () {
		let res = await taskApi.intentionList(state.taskInfo.id)
		let { data, code, msg } = res
		if (code === 1) {
			state.intentionList = data
		} else {
			uni.showToast({
			  title: msg,
			  icon: 'none'
			})
		}
	}
	async function getPhoneList () {
		state.loadStatus = 'loading'
		let response = await taskApi.phoneList({
			intentionNames: state.intentionNames,
			taskId: state.taskInfo.id,
			page: state.pagination.page,
			pageCount: state.pagination.pageCount,
		})
		let { data, code, msg } = response
		if (code === 1) {
			state.pagination.list = _.concat(state.pagination.list, data.records)
			state.pagination.total = data.total
			state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';	
		} else {
			uni.showToast({
			  title: msg,
			  icon: 'none'
			})
		}
	}
  function initAudio() {
	  state.innerAudioContext = uni.createInnerAudioContext()
	  // 监听事件
	  state.innerAudioContext.onPlay(() => {
	    state.pagination.list[state.currentIndex].isPlaying = true
	  })
	  
	  state.innerAudioContext.onPause(() => {
	    state.pagination.list[state.currentIndex].isPlaying = false
	  })
	  
	  state.innerAudioContext.onTimeUpdate(() => {
	    state.pagination.list[state.currentIndex].currentTime = state.innerAudioContext.currentTime
	  })
  }
  function playAudio(item,index){
	  if(!state.innerAudioContext){
		  initAudio()
	  }
	  state.innerAudioContext.pause()
	  state.pagination.list[state.currentIndex].isPlaying = false
	  state.innerAudioContext.src = item.recordName
	  if(item.currentTime){
		  state.innerAudioContext.seek(item.currentTime>=item.duration?0:item.currentTime)
	  }
	  state.currentIndex = index
	  state.innerAudioContext.play()
  }
  function pauseAudio(){
	  state.innerAudioContext.pause()
  }
  function seekAudio(currentTime){
	  state.innerAudioContext.seek(currentTime)
	  state.innerAudioContext.play()
  }
  function onDown(item){
	  if(item.callStatus===2){
		  item.showDown=!item.showDown
		  if(item.showDown){
			item.currentTime = item.currentTime||0  
		  }
	  }
  }
  function sliderChanging(event,item,index){
	  item.currentTime = event.detail.value
	  if(item.isPlaying&&index===state.currentIndex){
		  seekAudio(item.currentTime)
	  }
  }
  function changePlay(val,item,index){
	  let currentTime = item.currentTime + val
	  if(currentTime<0){
		  currentTime = 0
	  }
	  if(currentTime>item.duration){
		  currentTime = item.duration
	  }
	  item.currentTime = currentTime
	  if(item.isPlaying&&index===state.currentIndex){
		  seekAudio(item.currentTime)
	  }
  }
  // 加载更多
  function loadMore() {
    if (state.loadStatus === 'noMore') {
      return
    }
    state.pagination.page++
    getPhoneList()
  }
  
  // 上拉加载更多
  onReachBottom(() => {
    loadMore()
  })
  function scrolltolower(){
  	  loadMore()
  }
  
  // 下拉刷新
  onPullDownRefresh(() => {
	if (state.innerAudioContext) {
	  try {
	    state.innerAudioContext.pause();
	    state.innerAudioContext.destroy()
	    state.innerAudioContext = null
		state.currentIndex = 0
	  } catch (e) {
	    //TODO handle the exception
	  }
	}
	state.pagination.list = []
	state.pagination.total = 0
	state.pagination.page = 1
    getPhoneList()
    setTimeout(function () {
      uni.stopPullDownRefresh()
    }, 800);
  });

  onPageScroll((e) => {});
</script>

<style lang="scss" scoped>
	.task_cont{
		flex: 1;
		overflow: hidden;
		.task_scroll{
			height: 100%;
		}
	}
	.task_details{
		padding-top: 20rpx;
	}
	.task_details_cont{
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;
		.top{
			margin-bottom:30rpx;
			.name_box{
				display: flex;
				justify-content: space-between;
				.name{
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
					line-height: 48rpx;
					flex: 1;
					margin-right: 20rpx;
					padding-bottom: 20rpx;
				}
				.time{
					font-weight: 400;
					font-size: 24rpx;
					color: #86B29F;
					line-height: 34rpx;
				}
			}
			.verbal{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height:40rpx;
			}
		}
		.cont{
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap:20rpx;
			.detail_item{
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 336rpx;
				height: 152rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				.num{
					margin-bottom: 10rpx;
					font-weight: bold;
					font-size: 40rpx;
					line-height: 48rpx;
				}
				.label{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
					margin-bottom: 20rpx;
				}
			}
			.detail_item:nth-child(1){
				background: url('/static/num_bg1.png') no-repeat center/cover;
				.num{
					color: #FFA64E;
				}
			}
			.detail_item:nth-child(2){
				background: url('/static/num_bg2.png') no-repeat center/cover;
				.num{
					color: #24D688;
				}
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			.detail_item{
				display: flex;
				align-items: center;
				flex: 1;
				font-size: 24rpx;
				line-height: 34rpx;
				.num{
					color: #222222;
				}
				.label{
					color: #666666;
				}
			}
			.detail_item:nth-child(1){
				.num{
					color: #1677FF;
				}
			}
			.detail_item:nth-child(2){
				.num{
					color: #FF4E4E;
				}
			}
			.detail_item:nth-child(3){
				.num{
					color: #CCCCCC;
				}
			}
		}
	}
	.task_list{
		min-height: calc(100% - 384rpx);
		padding-top: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		box-sizing: border-box;
		.intention_select_vaule,
		.intention_select{
			padding: 0 30rpx;
			height: 50rpx;
			.select_vaule{
				display: inline-block;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #222222;
				min-width: 176rpx;
				max-width: 300rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 48rpx 0 16rpx;
				box-sizing: border-box;
				cursor: pointer;
				white-space: nowrap; /* 防止文本换行 */
				overflow: hidden; /* 隐藏溢出的文本 */
				text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
			}
		}
		.intention_select_vaule{
			padding-bottom: 30rpx;
			.select_vaule{
				background: #FAFAFA url('/static/down_icon@2x.png') no-repeat right 8rpx center/32rpx 32rpx;
			}
		}
		.intention_select{
			height: 100%;
			width: 100%;
			position: absolute;
			left: -30rpx;
			top: 0;
			z-index: 10;
			.select_vaule{
				background: #FAFAFA url('/static/up_icon@2x.png') no-repeat right 8rpx center/32rpx 32rpx;
			}
			.intention_select_bg{
				height: 100%;
				width: 100%;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 30rpx 30rpx 0 0;
				overflow: hidden;
			}
			.select_cont{
				width: 100%;
				background: #FFFFFF;
				border-radius: 0 0 30rpx 30rpx;
				box-sizing: border-box;
				padding: 30rpx 0 0 0;
				.select_vaule{
					margin: 0 30rpx 16rpx;
				}
				.intention_list{
					display: flex;
					flex-wrap: wrap;
					gap: 30rpx 20rpx;
					padding: 14rpx 30rpx 60rpx;
					box-sizing: border-box;
					max-height: 400rpx;
					overflow-y: auto;
					.intention_item{
						padding: 0 32rpx;
						height: 58rpx;
						line-height: 58rpx;
						border-radius: 20rpx;
						border: 2rpx solid #F2F2F2;
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
					}
					.select_item{
						background: #EDFFF7;
						border: 2rpx solid #EDFFF7;
						color: #24D688;
					}
				}
				.group_btn{
					display: flex;
					align-items: center;
					.cancel_btn,
					.confirm_btn{
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
						text-align: center;
						font-weight: 400;
						font-size: 28rpx;
					}
					.cancel_btn{
						background: #F7F7F7;
						border-radius: 0rpx 0rpx 0rpx 30rpx;
						color: #222222;
					}
					.confirm_btn{
						background: #24D688;
						border-radius: 0rpx 0rpx 30rpx 0rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.task_item{
			padding: 30rpx 20rpx;
			width: 690rpx;
			background: #FAFAFA;
			border-radius: 30rpx;
			box-sizing: border-box;
			margin: 0 auto 30rpx;
			.task_title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 10rpx;
				.left{
					.title{
						display: flex;
						align-items: center;
						.status_icon{
							width: 120rpx;
							height: 48rpx;
						}
						.name{
							font-weight: bold;
							font-size: 32rpx;
							color: #222222;
							line-height: 48rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							margin-right: 10rpx;
						}
						.intention{
							height: 48rpx;
							background: rgba(53, 232, 154, 0.5);
							border-radius: 24rpx;
							//font-weight: bold;
							font-size: 24rpx;
							color: #222222;
							line-height: 50rpx;
							padding: 0 24rpx;
						}
					}
					.time{
						font-weight: 400;
						font-size: 24rpx;
						color: #CCCCCC;
						line-height: 34rpx;
						margin-top: 10rpx;
					}
				}
				.right{
					.down_icon,
					.up_icon{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
			.concern{
				display: flex;
				align-items: flex-start;
				padding: 0 10rpx;
				padding-top: 20rpx;
				.label{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					height: 38rpx;
					line-height: 38rpx;
					margin-right: 10rpx;
					white-space: nowrap;
				}
				.concern_list{
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;
					.concern_item{
						height: 38rpx;
						line-height: 38rpx;
						padding: 0 16rpx;
						background: rgba(36,214,136,0.05);
						border-radius: 20rpx;
						border: 2rpx solid #24D688;
						box-sizing: border-box;
						font-weight: 400;
						font-size: 24rpx;
						color: #24D688;
					}
				}
			}
			.down_box{
				padding-top: 46rpx;
				display: none;
				.sound_play{
					:deep(uni-slider){
						margin: 0 8px;
						.uni-slider-handle-wrapper{
							height: 4rpx;
							border-radius: 4rpx;
							.uni-slider-tap-area{
								padding: 20rpx 0;
							}
						}
					}
					.slider_time{
						display: flex;
						justify-content: space-between;
						font-weight: 400;
						font-size: 20rpx;
						color: #CCCCCC;
						line-height: 30rpx;
						margin-bottom: 30rpx;
					}
					.play_tool{
						display: flex;
						justify-content: center;
						.play_tool_icon{
							width: 48rpx;
							height: 48rpx;
							margin: 0 30rpx;
						}
					}
				}
				.ai_analyse{
					width: 650rpx;
					background: #DFF7EC;
					border-radius: 30rpx;
					padding: 20rpx 20rpx 50rpx;
					box-sizing: border-box;
					margin-top: 30rpx;
					.label{
						font-weight: 500;
						font-size: 28rpx;
						color: #222222;
						line-height: 40rpx;
						margin-bottom: 16rpx;
					}
					.cont{
						font-weight: 400;
						font-size: 24rpx;
						color: #222222;
						line-height: 40rpx;
					}
				}
			}
		}
		.show_down{
			background: #EDFFF7;
			.down_box{
				display: block;
			}
		}
	}
	.show_slist{
		height: calc(100% - 322rpx);
		overflow: hidden;
	}
</style>