139 lines
3.5 KiB
Plaintext
139 lines
3.5 KiB
Plaintext
<template>
|
||
<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="离线同步" :xloading="true" @right-click="onSort">
|
||
<template v-slot:right>
|
||
<x-icon name="arrow-up-down-line" color="#6B7280" font-size="17"></x-icon>
|
||
</template>
|
||
|
||
<view class="hr-body">
|
||
|
||
<view class="os-box">
|
||
<x-icon name="cloud-off-line" color="#92400E" font-size="15"></x-icon>
|
||
<text class="os-box-t">当前网络不可用，以下记录已暂存本机</text>
|
||
<view class="hr-offbar-cnt">
|
||
<text class="os-box-c">{{ pendingCount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<hr-sec title="待上传队列" :more="'共 ' + tasks.length + ' 条'"></hr-sec>
|
||
<hr-card variant="list">
|
||
<hr-lrow v-for="(t, i) in tasks" :key="i" :icon="t.icon" :theme="t.theme" :title="t.title"
|
||
:sub="t.sub" :value="t.status" :value-bold="true" :is-last="i == tasks.length - 1"
|
||
@click="onTaskClick(t)"></hr-lrow>
|
||
</hr-card>
|
||
|
||
<hr-tip style="margin-top:14px" theme="info" icon="ℹ"
|
||
text="提交失败的记录会自动进入本队列；网络恢复后按时间顺序自动重传，无需手动操作。"></hr-tip>
|
||
|
||
<view v-if="syncing" class="os-progress">
|
||
<view class="hr-row-between" style="margin-bottom:9px">
|
||
<text class="os-p-t">正在重传…</text>
|
||
<text class="os-p-v">{{ progress }}%</text>
|
||
</view>
|
||
<hr-progress :percent="progress"></hr-progress>
|
||
</view>
|
||
|
||
<view style="height:14px"></view>
|
||
</view>
|
||
|
||
<template v-slot:footer>
|
||
<view class="hr-fixedbar">
|
||
<view :class="syncing ? 'hr-btn hr-btn-disabled' : 'hr-btn hr-btn-primary'" style="flex:1"
|
||
@click="onRetryAll">
|
||
<text class="os-foot-t">{{ syncing ? '正在重传…' : '立即重试全部上传' }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</hr-page>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { ref, computed } from 'vue'
|
||
import { offlineTasks } from '@/mock/index.uts'
|
||
import { HrOfflineTask } from '@/mock/types.uts'
|
||
|
||
/**
|
||
* s19 离线同步
|
||
* 提交失败就地拦截 + 进离线队列；网络恢复后按时间顺序自动重传。
|
||
*/
|
||
const tasks = ref<HrOfflineTask[]>(offlineTasks)
|
||
const syncing = ref(false)
|
||
const progress = ref(0)
|
||
let timer : number = 0
|
||
|
||
const pendingCount = computed(() : number => {
|
||
return tasks.value.length
|
||
})
|
||
|
||
function onTaskClick(t : HrOfflineTask) : void {
|
||
uni.showModal({ title: t.title, content: t.sub, showCancel: false })
|
||
}
|
||
|
||
function onRetryAll() : void {
|
||
if (syncing.value) { return }
|
||
syncing.value = true
|
||
progress.value = 0
|
||
timer = setInterval(() => {
|
||
progress.value = progress.value + 10
|
||
if (progress.value >= 100) {
|
||
clearInterval(timer)
|
||
timer = 0
|
||
syncing.value = false
|
||
tasks.value = [] as HrOfflineTask[]
|
||
uni.showToast({ title: '全部同步完成', icon: 'success' })
|
||
}
|
||
}, 260)
|
||
}
|
||
|
||
function onSort() : void {
|
||
uni.showToast({ title: '按暂存时间排序', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.os-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
background-color: #FFFBEB;
|
||
border: 2rpx solid #FDE68A;
|
||
border-radius: 24rpx;
|
||
padding: 18rpx 32rpx 18rpx 32rpx;
|
||
}
|
||
|
||
.os-box-t {
|
||
flex: 1;
|
||
font-size: 26.8rpx;
|
||
font-weight: bold;
|
||
color: #92400E;
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.os-box-c {
|
||
font-size: 22.4rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.os-progress {
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.os-p-t {
|
||
font-size: 26.8rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.os-p-v {
|
||
font-size: 25.8rpx;
|
||
font-weight: bold;
|
||
color: #2563EB;
|
||
}
|
||
|
||
.os-foot-t {
|
||
font-size: 32.4rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
</style>
|