sundongyu/dykj-outsource-12123
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码上传

Browse Source
This commit is contained in:
yangchunyu 2024-06-28 11:18:46 +08:00
parent 4837905e39
commit cb9abe5d36
6 changed files with 466 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pages.json
View File

@ -20,6 +20,12 @@
"navigationStyle": "custom" "navigationStyle": "custom"
} }
}, },
{
"path": "pages/index/components/myCar",
"style": {
"navigationStyle": "custom"
}
},
{ {
"path": "pages/index/components/businessCenter", "path": "pages/index/components/businessCenter",
"style": { "style": {

164
pages/index/components/myCar.vue Normal file
View File

@ -0,0 +1,164 @@
<template>
<view style="background-color: #2c66a9; width: 100%; height: 5vh"
:style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }">
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
<view class="van-nav-bar__content">
<view class="page-icon" @click="gotoBack">
<uni-icons color="#fff" type="back" size="26"></uni-icons>
<view>返回</view>
</view>
<view class="page-navbar">我的机动车</view>
</view>
</view>
<view class="content">
<view class="card-car" v-if='true'>
<view class="car-top">
<image src="../../../static/R41.png" class="image"></image>
<view class="car-top-text">
<text style="font-size: 40rpx; font-weight: 600; color: ;">黑A1K5V1</text>
<text style="color: #808080;">*爽</text>
</view>
</view>
<view class="car-center">
<text style="margin-left: 40rpx; font-size: 38rpx; color: #3b3b3b;">机动车状态</text>
<view class="car-center-tag">
<text style="font-size: 20rpx;">正常</text>
</view>
</view>
<view class="car-bottom">
<uni-icons type="down" size="26" color="#b5b5b5"></uni-icons>
</view>
</view>
<view class="noData" v-else>
<view style="display: flex;flex-direction: column; align-items: center;">
<image src="../../../static/wangban/oe.png" style="width:250rpx; height: 200rpx"></image>
<text style="margin-top: 60rpx; font-weight: 600;">未查询到机动车信息</text>
</view>
<view class="warning" style="margin-top: 40rpx;">
若车...<a href="#" style="color: #2d65a5;">反馈</a>
</view>
</view>
<view class="warning" style="margin-top: 80rpx;">
本人车辆信息缺失或有误，请点击<a href="#" style="color: #2d65a5;">此处反馈</a>
</view>
</view>
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="van-nav-bar">
<view class="van-nav-bar__content" style="cursor: pointer;">
<view class="page-navbar">备案非本人机动车</view>
</view>
</view>
</view>
</template>
<script setup>
import {
ref,
onMounted
} from "vue";
const {
safeAreaInsets
} = uni.getSystemInfoSync();
const gotoBack = () => {
uni.navigateBack({
delta: 1,
});
};
const grade = ref(0);
</script>
<style lang="scss">
.van-nav-bar__content {
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
background-color: #2c66a9;
color: #fff;
letter-spacing: 1.5px;
position: relative;
.page-icon {
display: flex;
align-items: center;
position: absolute;
left: 0;
}
.page-navbar {
font-size: 1.1rem;
}
}
.content {
width: 689rpx;
padding: 20rpx 30rpx;
height: 85.7vh;
background-color: #f5f9fa;
.card-car {
border-radius: 10rpx;
background-color: #fff;
.car-top {
height: 160rpx;
border-bottom: 1rpx solid #f3f3f3;
display: flex;
align-items: center;
.car-top-text {
display: flex;
flex-direction: column;
}
}
.car-center {
height: 110rpx;
border-bottom: 1rpx solid #f3f3f3;
display: flex;
align-items: center;
justify-content: space-between;
.car-center-tag {
width: 100rpx;
height: 40rpx;
background-color: #c8eedd;
display: flex;
align-items: center;
justify-content: center;
margin-right: 40rpx;
color: #71d1a8;
border-radius: 5rpx;
}
}
.car-bottom {
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.image {
width: 120rpx;
height: 80rpx;
padding: 0 40rpx;
}
.warning {
display: inline-block;
font-size: 25rpx;
color: #929196;
width: 100%;
text-align: center;
}
.noData {
height: 85.7vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>

7
pages/index/index.vue
View File

@ -8,7 +8,7 @@
<image src="../../static/on.png" style="width: 80rpx; height: 60rpx"></image> <image src="../../static/on.png" style="width: 80rpx; height: 60rpx"></image>
</view> </view>
<view class="card"> <view class="card">
<view class="card-content"> <view class="card-content" @click="myCar">
<view class="card-content-top"> <view class="card-content-top">
<image style="width: 50rpx; height: 40rpx" src="../../static/c5.png" /> <image style="width: 50rpx; height: 40rpx" src="../../static/c5.png" />
<text style="margin-left: 30rpx">黑A00000</text> <text style="margin-left: 30rpx">黑A00000</text>
@ -191,6 +191,11 @@ const drivingLicence = () => {
url: './components/drivingLicence' url: './components/drivingLicence'
}); });
}; };
const myCar = ()=>{
uni.navigateTo({
url: './components/myCar'
});
}
const closedclick = (id) => { const closedclick = (id) => {
if (id == 10) { if (id == 10) {
uni.navigateTo({ uni.navigateTo({

428
pages/schedule/index.vue
View File

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

BIN
static/R41.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/YM.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB