dykj-outsource-12123/pages/schedule/index.vue

303 lines
7.2 KiB
Vue
Raw Normal View History

2024-06-25 18:39:10 +08:00
<template>
2024-06-28 11:18:46 +08:00
<view style="background-color: #fff; height: 88vh; display: flow-root">
<view class="select">
<view style="margin-left: 1rem; font-weight: 700">以下数据来自</view>
<view class="icon">
<view class="">社会</view>
<view class=""><uni-icons type="forward" size="20"></uni-icons></view>
</view>
</view>
<view class="tow">
<view class="custom-tabs">
<view v-for="(item, index) in feedTabs" :key="item.text" @click="onTabChange(index, item)"
:class="{ active: tabIndex === index }" class="custom-tabs-bar">
<text class="tabbar-text">{{ item.label }}</text>
</view>
<view :style="{ left: cursorPosition + 'px' }" class="custom-tabs-cursor"></view>
</view>
<view class="content-area">
<view v-if="tabIndex === 0">
<view class="noData">
<image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
<view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
</view>
</view>
<view v-else-if="tabIndex === 1">
2024-06-28 11:21:08 +08:00
<view v-if="scheduleList.length > 0">
<view style="height: 20rpx;" />
<view class="schedule-card" v-for="(item, index) in scheduleList" :key="index">
<view class="card-left">
<view class="content-top">
<view style="display: flex; align-items: center;">
<image src="../../static/ax3.png" class="image"></image>
<text style="font-size: 36rpx;">{{item.title}}</text>
</view>
<view class="car-center-tag">
<text style="font-size: 20rpx;">评价</text>
</view>
2024-06-28 11:18:46 +08:00
</view>
2024-06-28 11:21:08 +08:00
<view class="content-bottom">
<view class="card-content">
<text>业务流水号</text>
<text>{{item.cardNmu}}</text>
</view>
<view class="card-content">
<text>申请时间</text>
<text>{{item.time}}</text>
</view>
<view class="card-content">
<text>受理进度</text>
<text>{{item.plan}}</text>
</view>
2024-06-28 11:18:46 +08:00
</view>
</view>
2024-06-28 11:21:08 +08:00
<view class="card-right">
<uni-icons type="down" size="30" color="#777777"></uni-icons>
2024-06-28 11:18:46 +08:00
</view>
</view>
</view>
2024-06-28 11:21:08 +08:00
<view class="noData" v-else>
2024-06-27 16:42:05 +08:00
<image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
2024-06-27 15:17:31 +08:00
<view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
2024-06-28 11:21:08 +08:00
</view>
2024-06-28 11:18:46 +08:00
</view>
<view v-else-if="tabIndex === 2">
<view class="noData">
<image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
<view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
</view>
</view>
<view v-else-if="tabIndex === 3">
<view class="noData">
<image src="../../static/wangban/oe.png" style="width: 7.8rem; height: 5rem"></image>
<view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
</view>
</view>
</view>
</view>
<TabBar />
</view>
2024-06-25 18:39:10 +08:00
</template>
2024-06-26 14:46:13 +08:00
<script setup>
2024-06-28 11:18:46 +08:00
import {
onMounted,
ref,
getCurrentInstance,
computed
} from 'vue';
import TabBar from '@/components/tabBar/index.vue';
const feedTabs = ref([{
label: '受理中',
rendered: true
},
{
label: '已办结',
rendered: false
},
{
label: '已取消',
rendered: false
},
{
label: '全部',
rendered: false
}
]);
const scheduleList = ref([{
title: '电子监控处理',
cardNmu: '230120240427907742',
time: '2024-04-27 13:07',
plan: '受理完成'
},
{
title: '电子监控处理',
cardNmu: '230120240417574655',
time: '2024-04-17 20:06',
plan: '受理完成'
},
{
title: '电子监控处理',
cardNmu: '230120240106416206',
time: '2024-04-27 16:47',
plan: '受理完成'
}
])
// 定义tab的索引值
2024-06-28 11:21:08 +08:00
const tabIndex = ref(0);
2024-06-28 11:18:46 +08:00
// 获取每个 tabbar 的位置(靠左位置)
const tabbarRect = ref([]);
// 根据索引值获取tabbar 的 left 值
const cursorPosition = computed(() => {
// 避免初始值为空数且的错误
if (tabbarRect.value.length === 0) return;
// 获取tabbar的宽度和left的值
const {
width,
left
} = tabbarRect.value[tabIndex.value];
return (width - 76) / 2 + left;
});
onMounted(() => {
// 1. 创建查询器
// 组件式 api 获取组件(页面)实例时,命名用
// getCurrentInstance 相当于选项式 API this
const querySelector = uni.createSelectorQuery().in(getCurrentInstance());
// 2. 查找元素
querySelector.selectAll('.custom-tabs, .tabbar-text').boundingClientRect(([parent, ...res]) => {
// console.log(parent, res)
// 将tabbar的宽度和距离左侧的距离计算出来
tabbarRect.value = res.map(({
width,
left
}) => {
return {
width,
left: left - parent.left
};
});
});
// 3. 执行查找
querySelector.exec();
});
// Vue 组合式 Api 事件回调就是一个普通的函数
function onTabChange(index, item) {
tabIndex.value = index;
// 触发事件
customTabsEmit('click', item);
}
2024-06-25 18:39:10 +08:00
</script>
2024-06-26 14:46:13 +08:00
<style lang="scss" scoped>
2024-06-28 11:18:46 +08:00
.select {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.6rem;
padding: 0.8rem 0rem;
background-color: #fff;
border-bottom: 1rpx solid #f2f2f3;
}
.icon {
display: flex;
align-items: center;
margin-right: 1rem;
}
.tow {
.custom-tabs {
display: flex;
justify-content: space-between;
background-color: #fff;
position: relative;
padding: 0 30rpx;
}
.custom-tabs-bar {
height: 100rpx;
line-height: 100rpx;
color: #000;
font-weight: 700;
padding-right: 30rpx;
position: relative;
&.active {
color: #49a1d7;
font-weight: 700;
}
}
.tabbar-text {
font-size: 1rem;
}
.custom-tabs-cursor {
position: absolute;
bottom: 3px;
left: 20px;
width: 80px;
height: 2px;
border-radius: 2px;
background-color: #49a1d7;
transition: all 0.3s ease-out;
}
.content-area {
height: 75vh;
background-color: #f7f8fa;
}
}
.schedule-card {
height: 250rpx;
padding: 0rpx 30rpx 20rpx;
background-color: #fff;
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
.card-left {
width: 86%;
margin: 10rpx 0 0 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.content-top {
display: flex;
align-items: center;
justify-content: space-between;
.car-center-tag {
width: 80rpx;
height: 44rpx;
border: 1rpx solid #849cb6;
display: flex;
align-items: center;
justify-content: center;
color: #849cb6;
border-radius: 5rpx;
}
}
.content-bottom {
height: 60%;
display: flex;
flex-direction: column;
justify-content: space-around;
.card-content {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 26rpx;
color: #808080;
}
}
}
.card-right {
width: 10%;
display: flex;
align-items: center;
justify-content: center;
}
}
.noData {
height: 70vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.image {
width: 100rpx;
height: 100rpx;
padding: 10rpx 40rpx 0 0;
}
</style>