✨ feat: 完成了网办进度

.gitignore

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

App.vue

@@ -1,17 +1,17 @@
 <script>
-	export default {
+export default {
-		onLaunch: function() {
+  onLaunch: function () {
-			console.log('App Launch')
+    console.log('App Launch');
-		},
+  },
-		onShow: function() {
+  onShow: function () {
-			console.log('App Show')
+    console.log('App Show');
-		},
+  },
-		onHide: function() {
+  onHide: function () {
-			console.log('App Hide')
+    console.log('App Hide');
-		}
+  }
-	}
+};
 </script>
 
 <style>
-	/*每个页面公共css */
+/*每个页面公共css */
 </style>

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": {

pages/index/components/businessCenter.vue

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

pages/my/components/install/index.vue

@@ -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>
-</style>
+.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>

pages/my/index.vue

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

pages/schedule/index.vue

@@ -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>
-</style>
+.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>