This commit is contained in:
yangchunyu 2024-06-26 15:00:14 +08:00
commit 375661cfc7
7 changed files with 628 additions and 95 deletions

2
.gitignore vendored
View File

@ -9,6 +9,4 @@
node_modules/
uni_modules
unpackage
.node_modules/
.eslintcache

24
App.vue
View File

@ -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>

View File

@ -1,63 +1,71 @@
{
"pages": [ //pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/components/drivingLicence",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/schedule/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/serve/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/my/index",
"style": {
"navigationBarBackgroundColor": "#2c66a9",
"navigationBarTitleText": "我的",
"navigationBarTextStyle": "white"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "12123",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/schedule/index",
"text": "网办进度"
},
{
"pagePath": "pages/serve/index",
"text": "服务网点"
},
{
"pagePath": "pages/my/index",
"text": "我的"
}
]
}
}
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/index/components/drivingLicence",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/schedule/index",
"style": {
"navigationBarBackgroundColor": "#2c66a9",
"navigationBarTitleText": "网办进度",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/serve/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/my/index",
"style": {
"navigationBarBackgroundColor": "#2c66a9",
"navigationBarTitleText": "我的",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/my/components/install/index",
"style": {
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "12123",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/schedule/index",
"text": "网办进度"
},
{
"pagePath": "pages/serve/index",
"text": "服务网点"
},
{
"pagePath": "pages/my/index",
"text": "我的"
}
]
}
}

View 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>

View File

@ -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>
<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>

View File

@ -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 {

View File

@ -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;
// tabbarleft
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>
<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>