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>