✨ feat: 完成了网办进度
This commit is contained in:
sundongyu
parent
f1a7cb7699
commit
50a64ce5bb
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -9,6 +9,4 @@
|
|||
node_modules/
|
||||
uni_modules
|
||||
unpackage
|
||||
.node_modules/
|
||||
.eslintcache
|
||||
|
||||
|
|
|
|||
24
App.vue
24
App.vue
|
|
@ -1,17 +1,17 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log('App Launch');
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show');
|
||||
},
|
||||
onHide: function () {
|
||||
console.log('App Hide');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/*每个页面公共css */
|
||||
/*每个页面公共css */
|
||||
</style>
|
||||
|
|
|
|||
16
pages.json
16
pages.json
|
|
@ -7,11 +7,19 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/schedule/index",
|
||||
"path": "pages/index/components/businessCenter",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/schedule/index",
|
||||
"style": {
|
||||
"navigationBarBackgroundColor": "#2c66a9",
|
||||
"navigationBarTitleText": "网办进度",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/serve/index",
|
||||
"style": {
|
||||
|
|
@ -25,6 +33,12 @@
|
|||
"navigationBarTitleText": "我的",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/components/install/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
282
pages/index/components/businessCenter.vue
Normal file
282
pages/index/components/businessCenter.vue
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 自定义导航栏 -->
|
||||
<view 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="search">
|
||||
<uni-icons type="search" color="#959595" size="20" style="transform: translateY(0.05rem)"></uni-icons>
|
||||
<view>搜索</view>
|
||||
</view>
|
||||
<!-- 搜索标签 -->
|
||||
<view class="tag">
|
||||
<view v-for="(item, index) in tags" class="tag-box" :key="index">{{ item.text }}</view>
|
||||
</view>
|
||||
<!-- 留灰 -->
|
||||
<view style="height: 0.5rem; width: 100%; background-color: #f5f4f9; margin-top: 0.4rem"></view>
|
||||
<!-- 标题 -->
|
||||
<view class="headline" v-for="(item, index) in functionList" :key="index">
|
||||
<uni-section class="mb-10" titleColor="red" :title="item.texe" type="line"></uni-section>
|
||||
<view class="headline-box">
|
||||
<view class="card" v-for="(item, index) in item.content" style="width: 4rem">
|
||||
<view class="icon">
|
||||
<uni-icons type="image-filled" size="30" color="#3c9bff"></uni-icons>
|
||||
</view>
|
||||
<view
|
||||
class="text"
|
||||
:style="{
|
||||
width: item.txt.length == 8 || item.txt.length == 7 || item.txt.length == 6 ? '3.6rem' : '',
|
||||
transform: item.txt.length == 8 || item.txt.length == 7 || item.txt.length == 6 ? 'translateX(4.5px)' : ''
|
||||
}"
|
||||
>
|
||||
{{ item.txt }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const tags = ref([
|
||||
{
|
||||
text: '违法',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
text: '驾考',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '年检',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: '事故',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
text: '挪车',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
text: '选号牌',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: '二手车',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: '补换牌',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: '补换证',
|
||||
id: 8
|
||||
},
|
||||
{
|
||||
text: '租赁',
|
||||
id: 9
|
||||
}
|
||||
]);
|
||||
const functionList = ref([
|
||||
{
|
||||
texe: '机动车业务',
|
||||
uid: 0,
|
||||
content: [
|
||||
{
|
||||
txt: '新车注册登记',
|
||||
icon: '',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
txt: '新车选号',
|
||||
icon: '',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
txt: '在用车选号',
|
||||
icon: '',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
txt: '号牌号段公布',
|
||||
icon: '',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
txt: '备案非本人机动车',
|
||||
icon: '',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
txt: '机动车转籍申请',
|
||||
icon: '',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
txt: '异常选号资料修改',
|
||||
icon: '',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
txt: '申请新车临时号牌',
|
||||
icon: '',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
txt: '城市货车通行码申领',
|
||||
icon: '',
|
||||
id: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
texe: '驾驶证业务',
|
||||
uid: 1,
|
||||
content: [
|
||||
{
|
||||
txt: '考试预约',
|
||||
icon: '',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
txt: '取消考试预约',
|
||||
icon: '',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
txt: '考试信息公布',
|
||||
icon: '',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
txt: '考试费缴纳',
|
||||
icon: '',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
txt: '初学增驾工考试费缴纳',
|
||||
icon: '',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
txt: '电子学习驾驶证明',
|
||||
icon: '',
|
||||
id: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
texe: '违法处理业务',
|
||||
uid: 2,
|
||||
content: [
|
||||
{
|
||||
txt: '违法处理',
|
||||
icon: '',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
txt: '罚款缴纳',
|
||||
icon: '',
|
||||
id: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
// 返回上一级
|
||||
const gotoBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.van-nav-bar__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 4rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 94%;
|
||||
margin: 0.5rem auto;
|
||||
padding: 0.3rem 0rem;
|
||||
border-radius: 0.2rem;
|
||||
background-color: #f3f3f3;
|
||||
color: #959595;
|
||||
}
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.tag-box {
|
||||
display: inline;
|
||||
width: 3.2rem;
|
||||
border: 1rpx solid #2c66a8;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.2rem 0rem;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0rem 0.4rem 1.2rem;
|
||||
color: #2461a5;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.headline {
|
||||
.mb-10 {
|
||||
background-color: #fff;
|
||||
}
|
||||
.headline-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 1rem;
|
||||
.card {
|
||||
margin-top: 0.8rem;
|
||||
margin: 0.7rem 0.2rem 0rem 0.2rem;
|
||||
.icon {
|
||||
text-align: center;
|
||||
}
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 0.5rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.line[data-v-482a4163]) {
|
||||
background-color: #1c5aa1;
|
||||
width: 4px;
|
||||
height: 1.1rem;
|
||||
}
|
||||
:deep(.uni-section__content-title[data-v-482a4163]) {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,131 @@
|
|||
<template>
|
||||
<view style="background-color: #f5f9fa; height: 100vh">
|
||||
<!-- 导航栏 -->
|
||||
<view 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 v-for="item in serve" :key="item.id" class="userlist">
|
||||
<view :class="{ active: item.id === 5 }">
|
||||
<view class="userlist-box">
|
||||
<view style="margin: 0 0.8rem"><uni-icons color="#c1c1c3" :type="item.icon" size="26"></uni-icons></view>
|
||||
<view class="userlist-box-text" :style="{ 'border-bottom': item.id == 5 || item.id == 4 ? 'node' : '1rpx solid #eee' }">
|
||||
<view>{{ item.text }}</view>
|
||||
<view style="margin-right: 0.7rem"><uni-icons color="#c1c1c3" type="forward" size="24"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buttom">退出登录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const serve = ref([
|
||||
{
|
||||
text: '登录密码修改',
|
||||
icon: 'location-filled',
|
||||
id: 0
|
||||
},
|
||||
{
|
||||
text: '手势密码修改',
|
||||
icon: 'location-filled',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '删除帐号',
|
||||
icon: 'location-filled',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: '帐号迁移',
|
||||
icon: 'heart-filled',
|
||||
user: '',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
text: '大字版',
|
||||
icon: 'heart-filled',
|
||||
user: '',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
text: '分享12123给好友',
|
||||
icon: 'heart-filled',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: '清理缓存',
|
||||
icon: 'heart-filled',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: '关于',
|
||||
icon: 'heart-filled',
|
||||
id: 7
|
||||
}
|
||||
]);
|
||||
const gotoBack = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.van-nav-bar__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 4rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.userlist {
|
||||
background-color: #fff;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 700;
|
||||
.userlist-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.userlist-box-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 96%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttom {
|
||||
width: 90%;
|
||||
margin: 2rem auto 0rem;
|
||||
padding: 0.7rem 0rem;
|
||||
background-color: #ff6769;
|
||||
color: #fff;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.active {
|
||||
margin: 0.8rem 0rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,17 +6,19 @@
|
|||
<view style="font-size: 0.7rem; margin-top: 0.2rem">注册时间</view>
|
||||
</view>
|
||||
<view @click="set" class="user-icon">
|
||||
<view>图标</view>
|
||||
<view>
|
||||
<uni-icons type="gear" color="#fff" size="30"></uni-icons>
|
||||
</view>
|
||||
<view style="margin-top: 0.2rem; font-size: 0.9rem">设置</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="item in serve" :key="item.id" class="userlist">
|
||||
<view class="userlist-box">
|
||||
<view class="userlist-box-text">
|
||||
<view><uni-icons color="#00ba26" :type="item.icon" size="26"></uni-icons></view>
|
||||
<view><uni-icons color="#1f579a" :type="item.icon" size="26"></uni-icons></view>
|
||||
<view style="margin-left: 1rem">{{ item.text }}</view>
|
||||
</view>
|
||||
<view><uni-icons type="forward" size="26"></uni-icons></view>
|
||||
<view><uni-icons type="forward" color="#bfbfbf" size="24"></uni-icons></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -33,53 +35,59 @@ const serve = ref([
|
|||
},
|
||||
{
|
||||
text: '我的证件',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'location-filled',
|
||||
user: '',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
text: '证件号码',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'spinner-cycle',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
text: '有效期限',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'star-filled',
|
||||
user: '',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
text: '手机号码',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'star-filled',
|
||||
user: '',
|
||||
id: 4
|
||||
},
|
||||
{
|
||||
text: '邮寄地址',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'refresh-filled',
|
||||
id: 5
|
||||
},
|
||||
{
|
||||
text: '电子文书',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'refresh-filled',
|
||||
id: 6
|
||||
},
|
||||
{
|
||||
text: '信息申诉',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'refresh-filled',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
text: '交管小安',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'refresh-filled',
|
||||
id: 8
|
||||
},
|
||||
{
|
||||
text: '咨询反馈',
|
||||
icon: 'wallet-filled',
|
||||
icon: 'refresh-filled',
|
||||
id: 9
|
||||
}
|
||||
]);
|
||||
// 跳转设置页面
|
||||
const set = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/components/install/index'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -92,7 +100,7 @@ const serve = ref([
|
|||
color: #fff;
|
||||
letter-spacing: 1.5px; /* 设置字符间距为2像素 */
|
||||
.user-icon {
|
||||
border-left: 1rpx solid #3670b1;
|
||||
// border-left: 1rpx solid #3670b1;
|
||||
}
|
||||
}
|
||||
.userlist {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,122 @@
|
|||
<template>
|
||||
<view style="background-color: #f5f9fa; 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>
|
||||
<view v-else-if="tabIndex === 1">暂无数据</view>
|
||||
<view v-else-if="tabIndex === 2">暂无数据</view>
|
||||
<view v-else-if="tabIndex === 3">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { onMounted, ref, getCurrentInstance, computed } from '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([]);
|
||||
|
||||
// 根据索引值获取tabbar 的 left 值
|
||||
const cursorPosition = computed(() => {
|
||||
// 避免初始值为空数且的错误
|
||||
if (tabbarRect.value.length === 0) return;
|
||||
// 获取tabbar的宽度和left的值
|
||||
const { width, left } = tabbarRect.value[tabIndex.value];
|
||||
return (width - 80) / 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>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user