sound-chain/pages/index/index.vue

<!-- 首页 -->
<template>
  <s-layout
    title=""
    navbar="inner"
	:bgStyle="state.page"
	:navbarStyle="state.navigationBar"
	opacityBgUi=""
	showRecordTextButton
	showLeftLogoutButton
  >
	  <view class="home_page" :style="[{ marginTop: `-${sheep?.$platform?.navbar}px` }]">
		  <view class="home_data">
			  <view class="name">{{state.lastTaskInfo.name}}</view>
			  <view class="data_item">
				  <view class="label">拨打数量：</view>
				  <view class="val">{{$helper.priceFormat(state.lastTaskInfo.lingCount)}}</view>
			  </view>
			  <view class="data_item">
				  <view class="label">接通率：</view>
				  <view class="val">{{((state.lastTaskInfo.answerRate||0)*100).toFixed(2)*100/100}}%</view>
			  </view>
			  <!-- <view class="data_item">
				  <view class="label">高意向数量：</view>
				  <view class="val">{{$helper.priceFormat(state.lastTaskInfo.highIntentionCount)}}</view>
			  </view> -->
		  </view>
		  <view class="create_btn" @tap="sheep.$router.go('/pages/task/create')">新建任务</view>
		  <view v-if="state.showTask" class="task_list">
			  <view class="task_item" @tap="onTaskDetail(state.lastTaskInfo.id)">
				  <view v-if="state.lastTaskInfo.status === 0" class="close-icon" @tap.stop="state.showDel=true"></view>
				  <view class="title">
					  <view v-if="state.lastTaskInfo.status!==10" class="status" :class="{'status0':state.lastTaskInfo.status===0,'status1':state.lastTaskInfo.status===1||state.lastTaskInfo.status===2}">{{state.lastTaskInfo.status===2?'已执行':(state.lastTaskInfo.status===1?'执行中':(state.lastTaskInfo.status===0?'待执行':'已失效'))}}</view>
					  <view class="name">{{state.lastTaskInfo.name}} </view>
				  </view>
				  <view class="des">{{state.lastTaskInfo.typeName}}</view>
				  <view class="time">{{formatDate(state.lastTaskInfo.planTime,'YYYY-MM-DD HH:mm')}}</view>
			  </view>
		  </view>
		  <su-popup :show="state.showDel" round="20" type="center" :isMaskClick="false" :showClose="false" @close="state.showDel=false">
			<view class="tips_wrap">
				<view class="tips_cont">
					<view class="label">提示</view>
					<view class="cont">{{state.lastTaskInfo.name}}将失效</view>
				</view>
				<view class="group_btn">
					<view class="item_btn cancel_btn" @tap="state.showDel=false">取消</view>
					<view class="item_btn logout-btn" @tap="onTaskDel">确认</view>
				</view>
			</view>
		  </su-popup>
	  </view>
  </s-layout>
</template>

<script setup>
  import $helper from '@/common/helper'
  import { watch, computed, reactive } from 'vue'
  import { onShow, onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app'
  import sheep from '@/common'
  import taskApi from '@/common/api/member/task'
  import { formatDate } from '@/common/helper/utils'
  const state = reactive({
    navigationBar: {},
    page: {
		backgroundColor: '#FAFAFA',
		backgroundImage: '/static/homeTopBg.png'
	},
	lastTaskInfo:{
		id:1,
		name:'暂无任务',
		lingCount: 0,
		answerRate: 0,
		highIntentionCount:0,
		type:{
			name:'话术1'
		},
		planTime:'2025-7-9 19:00',
		status: 1
	},
	showTask: false,
	showDel: false
  })
  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  })
  const isLogin = computed(() => sheep.$store('user').isLogin)
  watch(isLogin,(newValue, oldValue)=>{
  	if(newValue){
		getLastTask()
	}else{
		state.showTask = false
		state.lastTaskInfo={
			name:'暂无任务',
			lingCount: 0,
			answerRate: 0,
			highIntentionCount:0,
			type:{
				name:'话术1'
			},
			planTime:'2025-7-9 19:00',
			status: 1
		}
	}
  }, {
  	deep: true // 深度监听
  })
  onShow(async () => {
    //onShow中获取,保证跳转后页面为最新状态
	if(!!uni.getStorageSync("token")){
		await getLastTask()
	}
  })
  onLoad((options) => {
	  
  })
  async function onTaskDel(){
	  let res = await taskApi.taskDel({
		  id: state.lastTaskInfo.id
	  })
	  if (res.code === 1) {
	    getLastTask()
	  	state.showDel = false
		uni.showToast({
		  title: '删除成功',
		  icon: 'none'
		})
	  }else{
	  }
  }
  // 详情
  function onTaskDetail(id) {
	if(!id){
		return
	}
    sheep.$router.go('/pages/task/details', {
      id,
    })
  }
  async function getLastTask(){
	  let res = await taskApi.lastTaskDetail()
	  if (res.code === 1&&res.data) {
	    state.lastTaskInfo = res.data
		state.showTask = true
	  }else{
		  state.showTask = false
	  }
  }
  // 下拉刷新
  onPullDownRefresh(() => {
	if(!!uni.getStorageSync("token")){
		getLastTask()
	}
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

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

<style lang="scss" scoped>
	.home_page{
		width: 690rpx;
		margin: 0 auto;
		background: url('/static/homeBg.png') no-repeat top/100% auto;
		.home_data{
			width: 690rpx;
			height: 1093rpx;
			.name{
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #222222;
				line-height: 80rpx;
				padding: 222rpx 30rpx 78rpx;
			}
			.data_item{
				margin-bottom: 60rpx;
				padding: 0 70rpx;
				.label{
					font-weight: 400;
					font-size: 32rpx;
					color: #222222;
					line-height: 40rpx;
				}
				.val{
					font-weight: bold;
					font-size: 68rpx;
					color: #35E89A;
					line-height: 88rpx;
					margin-top: 20rpx;
				}
			}
		}
		.create_btn{
			width: 630rpx;
			height: 104rpx;
			background: #222222;
			border-radius: 40rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 104rpx;
			text-align: center;
			margin: 40rpx auto 30rpx;
		}
		.task_list{
			.task_item{
				position: relative;
				background: #FFFFFF;
				border-radius: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				.close-icon{
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					background: url('/static/close-icon.png') no-repeat center/48rpx 48rpx;
				}
				.title{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.status{
						height: 40rpx;
						border-radius: 10rpx;
						padding: 0 10rpx;
						font-weight: 400;
						font-size: 20rpx;
						background: #E6E6E6;
						color: #999999;
						line-height: 40rpx;
						margin-right: 8rpx;
					}
					.status0{
						background: #FFEFBA;
						color: #E28F48;
					}
					.status1{
						background: #A3FFD7;
						color: #26B978;
					}
					.status2{
						background: #E6E6E6;
						color: #999999;
					}
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #222222;
						line-height: 48rpx;
					}
				}
				.des{
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					margin-bottom: 10rpx;
				}
				.time{
					font-weight: 400;
					font-size: 24rpx;
					color: #CCCCCC;
					line-height: 34rpx;
				}
			}
		}
	}
</style>