代码上传
This commit is contained in:
yangchunyu
parent
4837905e39
commit
cb9abe5d36
|
|
@ -20,6 +20,12 @@
|
|||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/components/myCar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/components/businessCenter",
|
||||
"style": {
|
||||
|
|
|
|||
164
pages/index/components/myCar.vue
Normal file
164
pages/index/components/myCar.vue
Normal 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>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<image src="../../static/on.png" style="width: 80rpx; height: 60rpx"></image>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="card-content">
|
||||
<view class="card-content" @click="myCar">
|
||||
<view class="card-content-top">
|
||||
<image style="width: 50rpx; height: 40rpx" src="../../static/c5.png" />
|
||||
<text style="margin-left: 30rpx">黑A00000</text>
|
||||
|
|
@ -191,6 +191,11 @@ const drivingLicence = () => {
|
|||
url: './components/drivingLicence'
|
||||
});
|
||||
};
|
||||
const myCar = ()=>{
|
||||
uni.navigateTo({
|
||||
url: './components/myCar'
|
||||
});
|
||||
}
|
||||
const closedclick = (id) => {
|
||||
if (id == 10) {
|
||||
uni.navigateTo({
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
</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">
|
||||
<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>
|
||||
|
|
@ -22,10 +23,41 @@
|
|||
</view>
|
||||
</view>
|
||||
<view v-else-if="tabIndex === 1">
|
||||
<view class="noData">
|
||||
<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>
|
||||
<view style="font-size: 0.75rem; margin-top: 0.5rem; color: #767676">暂无数据</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view v-else-if="tabIndex === 2">
|
||||
<view class="noData">
|
||||
|
|
@ -46,28 +78,67 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
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 }
|
||||
]);
|
||||
// 定义tab的索引值
|
||||
const tabIndex = ref(0);
|
||||
// 获取每个 tabbar 的位置（靠左位置）
|
||||
const tabbarRect = ref([]);
|
||||
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
|
||||
}
|
||||
]);
|
||||
|
||||
// 根据索引值获取tabbar 的 left 值
|
||||
const cursorPosition = computed(() => {
|
||||
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的索引值
|
||||
const tabIndex = ref(1);
|
||||
// 获取每个 tabbar 的位置（靠左位置）
|
||||
const tabbarRect = ref([]);
|
||||
|
||||
// 根据索引值获取tabbar 的 left 值
|
||||
const cursorPosition = computed(() => {
|
||||
// 避免初始值为空数且的错误
|
||||
if (tabbarRect.value.length === 0) return;
|
||||
// 获取tabbar的宽度和left的值
|
||||
const { width, left } = tabbarRect.value[tabIndex.value];
|
||||
const {
|
||||
width,
|
||||
left
|
||||
} = tabbarRect.value[tabIndex.value];
|
||||
return (width - 76) / 2 + left;
|
||||
});
|
||||
onMounted(() => {
|
||||
});
|
||||
onMounted(() => {
|
||||
// 1. 创建查询器
|
||||
// 组件式 api 获取组件（页面）实例时，命名用
|
||||
// getCurrentInstance 相当于选项式 API this
|
||||
|
|
@ -76,23 +147,29 @@ onMounted(() => {
|
|||
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 };
|
||||
tabbarRect.value = res.map(({
|
||||
width,
|
||||
left
|
||||
}) => {
|
||||
return {
|
||||
width,
|
||||
left: left - parent.left
|
||||
};
|
||||
});
|
||||
});
|
||||
// 3. 执行查找
|
||||
querySelector.exec();
|
||||
});
|
||||
// Vue 组合式 Api 事件回调就是一个普通的函数
|
||||
function onTabChange(index, item) {
|
||||
});
|
||||
// Vue 组合式 Api 事件回调就是一个普通的函数
|
||||
function onTabChange(index, item) {
|
||||
tabIndex.value = index;
|
||||
// 触发事件
|
||||
customTabsEmit('click', item);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select {
|
||||
.select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -100,13 +177,15 @@ function onTabChange(index, item) {
|
|||
padding: 0.8rem 0rem;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f2f2f3;
|
||||
}
|
||||
.icon {
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.tow {
|
||||
}
|
||||
|
||||
.tow {
|
||||
.custom-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -114,6 +193,7 @@ function onTabChange(index, item) {
|
|||
position: relative;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.custom-tabs-bar {
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
|
@ -127,9 +207,11 @@ function onTabChange(index, item) {
|
|||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.tabbar-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.custom-tabs-cursor {
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
|
|
@ -140,12 +222,80 @@ function onTabChange(index, item) {
|
|||
background-color: #49a1d7;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
.noData {
|
||||
|
||||
.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>
|
||||
BIN
static/R41.png
Normal file
BIN
static/R41.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/YM.png
Normal file
BIN
static/YM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue
Block a user