封装组件/修复单位信息采集BUG/完善主题样式

src/App.vue

@@ -50,14 +50,17 @@ onLaunch(() => {
   //初始化默认主题
   if (!proxy.$settingStore.$state.themeColor) {
     proxy.$settingStore.SET_THEMECOLOR(proxy.$constData.themeList[0]);
+  } else {
+    proxy.$settingStore.SET_THEMECOLOR(proxy.$settingStore.$state.themeColor);
   }
 
   // setToken(
-  //   "eyJhbGciOiJIUzUxMiJ9.eyIiOjEwMzIsInVzZXJfaWQiOjYzLCJ1c2VyX2tleSI6IjExYWI0ODcyMWNhODQ4MDBiM2IzNzU1MTkzMDViMjI2IiwidXNlcm5hbWUiOiJmaHMxIn0.Q1dNUsk-cIpHRCTJV9ekoprLd7Q0ggrfirX_zo8EtO-FydtmRxlHZaBYkYWbsyvEGNN6b3O_s8ZOChXwTExnDg"
+  //   "eyJhbGciOiJIUzUxMiJ9.eyIiOjEwMzIsInVzZXJfaWQiOjYzLCJ1c2VyX2tleSI6IjYwMjNkZjg1OTIyODRlYTM5MmEwMWEzMzgyOTViZmRhIiwidXNlcm5hbWUiOiJmaHMxIn0.6GsrVyPh7T3vWmX6iB1fPv3wi-noOtgGcrDwBPctB3LLGcWqw89He6DK7waMCWZFBsOy0HLRD2PJdQs489hAxw"
   // );
   // proxy.$tab.reLaunch("/pages/mine/index");
   // proxy.$tab.reLaunch("/pages/index");
   // proxy.$tab.reLaunch("/pages/info/info");
+  // proxy.$tab.reLaunch("/pages/business/mhxf/xunJian/collect/index");
 
   initApp();
 });

src/components/oa-timeLine-item/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <view class="oa-timeLine-item">
+    <view class="oa-timeLine-item-header">
+      <view class="oa-timeLine-item-header-icon">
+        <u-icon name="info-circle-fill" :color="iconColor" size="18"></u-icon>
+      </view>
+      <view class="oa-timeLine-item-header-cont">
+        <view class="title">
+          {{ titleValue }}
+        </view>
+        <view style="margin: auto"> </view>
+        <view class="time">
+          {{ timeValue }}
+        </view>
+      </view>
+    </view>
+
+    <view class="oa-timeLine-item-content">
+      <view class="oa-timeLine-item-content-icon">
+        <view class="icon"></view>
+      </view>
+      <view class="oa-timeLine-item-content-cont">
+        <slot class="content"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { toRefs } from "vue";
+
+const props = defineProps({
+  titleValue: {
+    type: String,
+    default: "",
+  },
+  timeValue: {
+    type: String,
+    default: "",
+  },
+  iconColor: {
+    type: String,
+    default: "#149eff",
+  },
+});
+
+const { titleValue, timeValue, iconColor } = toRefs(props);
+</script>
+
+<style lang="scss" scoped>
+.oa-timeLine-item {
+  .oa-timeLine-item-header {
+    display: flex;
+    height: 25px;
+    line-height: 25px;
+
+    .oa-timeLine-item-header-icon {
+      margin: auto 0;
+    }
+
+    .oa-timeLine-item-header-cont {
+      display: flex;
+      width: 100%;
+      margin-left: 15px;
+
+      .title {
+        font-size: 15px;
+        color: #000000;
+      }
+
+      .time {
+        font-size: 14px;
+        color: #b5b5b5;
+      }
+    }
+  }
+
+  .oa-timeLine-item-content {
+    display: flex;
+
+    .oa-timeLine-item-content-icon {
+      width: 18px;
+      display: flex;
+
+      .icon {
+        width: 2px;
+        background-color: #e4e7ed;
+        margin: -5px auto;
+      }
+    }
+
+    .oa-timeLine-item-content-cont {
+      width: 100%;
+      margin: 15px 0px 15px 15px;
+      padding: 15px;
+      background-color: #fff;
+      border-radius: 10px;
+    }
+  }
+}
+
+// .oa-timeLine-item:last-child {
+//   .oa-timeLine-item-content {
+//     .oa-timeLine-item-content-icon {
+//       .icon {
+//         margin-bottom: 15px;
+//       }
+//     }
+//   }
+// }
+</style>

src/components/oa-timeLine/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <view class="oa-timeLine">
+    <view class="oa-timeLine-btn" :style="{ color: fontColor }">
+      <span @click="activitiesSortClick()">排序</span>
+    </view>
+    <slot></slot>
+  </view>
+</template>
+
+<script setup>
+import { ref, toRefs } from "vue";
+
+const emit = defineEmits(["activitiesSortChange"]);
+
+const props = defineProps({
+  sort: {
+    type: String,
+    default: "DESC",
+  },
+  fontColor: {
+    type: String,
+    default: "#149eff",
+  },
+});
+
+const { sort, fontColor } = toRefs(props);
+
+const _sort = ref(sort.value);
+
+function activitiesSortClick() {
+  if (_sort.value == "ASC") {
+    _sort.value = "DESC";
+  } else {
+    _sort.value = "ASC";
+  }
+
+  emit("activitiesSortChange", _sort.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.oa-timeLine {
+  padding: 0px 15px;
+  padding-bottom: 15px;
+
+  .u-steps-item__wrapper {
+    background-color: #f1f1f1;
+  }
+
+  .oa-timeLine-btn {
+    margin: 0px -3.5px;
+    font-size: 13px;
+  }
+}
+
+.oa-timeLine-data {
+  padding: 0px 15px;
+  text-align: center;
+  color: #bdbdbd;
+  font-size: 14px;
+}
+</style>

src/main.js

@@ -15,6 +15,9 @@ import JsonExcel from "vue-json-excel";
 import uviewPlus from "@/uni_modules/uview-plus";
 import oaCalendar from "@/components/oa-calendar/uni-calendar";
 import oaTabbar from "@/components/oa-tabbar/index";
+import oaTimeLine from "@/components/oa-timeLine/index"
+import oaTimeLineItem from "@/components/oa-timeLine-item/index"
+
 
 
 export function createApp() {
@@ -23,6 +26,8 @@ export function createApp() {
   //挂载全局组件
   app.component('oa-calendar', oaCalendar)
   app.component('oa-tabbar', oaTabbar)
+  app.component('oa-timeLine', oaTimeLine)
+  app.component('oa-timeLine-item', oaTimeLineItem)
 
   // 挂载全局json导出
   app.component("downloadExcel", JsonExcel);

src/pages.json

@@ -122,17 +122,23 @@
         {
           "path": "/info/index",
           "style": {
-            "navigationBarTitleText": "个人资料",
-            "app-plus": {
-              "bounce": "none",
-              "titleNView": {
-                "type": "transparent",
-                "autoBackButton": true,
-                "backButton": { //自定义 backButton
-                  "background": "rgba(0,0,0,0)"
-                }
-              }
-            }
+            "navigationBarTitleText": "我的信息"
+            // "app-plus": {
+            //   "bounce": "none",
+            //   "titleNView": {
+            //     "type": "transparent",
+            //     "autoBackButton": true,
+            //     "backButton": { //自定义 backButton
+            //       "background": "rgba(0,0,0,0)"
+            //     }
+            //   }
+            // }
+          }
+        },
+        {
+          "path": "/secure/index",
+          "style": {
+            "navigationBarTitleText": "账号与安全"
           }
         },
         {
@@ -167,17 +173,6 @@
               "titleNView": false
             }
           }
-        },
-        {
-          "path": "/pwd/index",
-          "style": {
-            "navigationBarTitleText": "修改密码",
-            "navigationStyle": "custom",
-            "app-plus": {
-              "bounce": "none",
-              "titleNView": false
-            }
-          }
         }
       ]
     },

src/pages/business/mhxf/deviceManage/index.vue

@@ -1,6 +1,15 @@
-<template>
-  <u-sticky bgColor="#fff" style="border-bottom: 1px #ececec solid">
-    <u-tabs :list="list" @click="tabsClick" :current="current" :scrollable="list.length >= 5 ? true : false"></u-tabs>
+<template :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
+  <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
+    <u-tabs
+      :list="list"
+      :current="current"
+      @click="tabsClick"
+      :scrollable="list.length >= 5 ? true : false"
+      lineColor="#333"
+      :activeStyle="{ color: '#333' }"
+      :inactiveStyle="{ color: '#909399' }"
+      style="border-bottom: 1px solid #eaeef1"
+    ></u-tabs>
   </u-sticky>
 
   <view class="deviceManage" @touchstart="fingerstart" @touchend="fingerend">

src/pages/business/mhxf/informationSelect-test/index.vue

@@ -1,6 +1,14 @@
 <template>
   <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
-    <u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
+    <u-tabs
+      :list="list"
+      :current="current"
+      @click="tabsClick"
+      lineColor="#333"
+      :activeStyle="{ color: '#333' }"
+      :inactiveStyle="{ color: '#909399' }"
+      style="border-bottom: 1px solid #eaeef1"
+    ></u-tabs>
   </u-sticky>
 
   <view class="informationSelect" @touchstart="fingerstart" @touchend="fingerend" style="background-color: #ffffff">
@@ -733,7 +741,7 @@ uni-page-refresh,
   text-align: center;
   position: relative;
 }
-.whiteBackgroundColor {
+.bg-white {
   background-color: #ffffff;
 }
 body {

src/pages/business/mhxf/informationSelect/index.vue

@@ -1,6 +1,14 @@
 <template>
   <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
-    <u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
+    <u-tabs
+      :list="list"
+      :current="current"
+      @click="tabsClick"
+      lineColor="#333"
+      :activeStyle="{ color: '#333' }"
+      :inactiveStyle="{ color: '#909399' }"
+      style="border-bottom: 1px solid #eaeef1"
+    ></u-tabs>
   </u-sticky>
 
   <view class="informationSelect" @touchstart="fingerstart" @touchend="fingerend" style="background-color: #ffffff">
@@ -738,7 +746,7 @@ uni-page-refresh,
   text-align: center;
   position: relative;
 }
-.whiteBackgroundColor {
+.bg-white {
   background-color: #ffffff;
 }
 body {

src/pages/business/mhxf/needMatter/index.vue

@@ -1,6 +1,14 @@
 <template>
   <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
-    <u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
+    <u-tabs
+      :list="list"
+      :current="current"
+      @click="tabsClick"
+      lineColor="#333"
+      :activeStyle="{ color: '#333' }"
+      :inactiveStyle="{ color: '#909399' }"
+      style="border-bottom: 1px solid #eaeef1"
+    ></u-tabs>
   </u-sticky>
 
   <view class="needMatter" @touchstart="fingerstart" @touchend="fingerend">

src/pages/business/mhxf/unitInfoCollection/index.vue

@@ -450,8 +450,8 @@ const dataList = reactive({
       completeYear: "", //竣工年份
       buildHigh: "", //建筑高度
       fireproofCoat: 0, //是否有防火涂层
-      fireFacilitySystem: "", //消防设施设置
-      otherSystem: "", //其他设施
+      fireFacilitySystem: [], //消防设施设置
+      otherSystem: [], //其他设施
       otherFacilities: "", //其他设施名称
     },
     baseBuildAttach: {

src/pages/business/mhxf/xunJian/collect/components/collectDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <scroll-view scroll-y class="grayBackgroundColor">
-    <view class="whiteBackgroundColor" style="padding: 15px 15px 15px 15px">
+    <view class="bg-white" style="padding: 15px 15px 15px 15px">
       <u-form ref="form" labelPosition="left" :model="model" :rules="rules" labelWidth="82">
         <u-form-item label="地点号码：" prop="siteNubmber">
           <u-input v-model="model.siteNubmber" disabled></u-input>
@@ -100,7 +100,7 @@ onMounted(() => {});
 </style>
 
 <style scoped>
-.whiteBackgroundColor {
+.bg-white {
   background-color: #ffffff;
 }
 

src/pages/business/mhxf/xunJian/collect/components/collectRecord.vue

@@ -3,7 +3,7 @@
     <view class="example-body" v-if="show">
       <uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="~" @change="confirm" />
     </view>
-    <view v-for="(cu, index) in dataList.siteList" :key="index" class="whiteBackgroundColor" style="display: flex; padding: 15px 0px 15px 15px; margin-bottom: 15px">
+    <view v-for="(cu, index) in dataList.siteList" :key="index" class="bg-white" style="display: flex; padding: 15px 0px 15px 15px; margin-bottom: 15px">
       <view class="reportLeft">
         <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="cu.siteType == 1" shape="circle"></u-image>
 
@@ -103,7 +103,7 @@ onMounted(() => {
 </style>
 
 <style scoped>
-.whiteBackgroundColor {
+.bg-white {
   background-color: #ffffff;
 }
 

src/pages/business/mhxf/xunJian/collect/index.vue

@@ -10,7 +10,7 @@
         @change="swipeChange($event, index)"
         style="margin-bottom: 15px"
       >
-        <view class="whiteBackgroundColor" style="display: flex; padding: 15px 0px 15px 15px">
+        <view class="bg-white" style="display: flex; padding: 15px 0px 15px 15px">
           <view class="reportLeft">
             <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="cu.siteType == 1" shape="circle"></u-image>
 
@@ -205,7 +205,7 @@ onMounted(() => {});
 </style>
 
 <style scoped>
-.whiteBackgroundColor {
+.bg-white {
   background-color: #ffffff;
 }
 

src/pages/business/mhxf/xunJian/plan/components/content.vue

@@ -1,8 +1,8 @@
 <template>
-  <scroll-view scroll-y>
-    <view style="margin-bottom: 130px">
-      <view class="padding-15 margin-bottom-15 whiteBackgroundColor" v-for="(con, index) in contentList" :key="index">
-        <view class="siteHeader">
+  <scroll-view scroll-y :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
+    <view class="xunjian-plan-content">
+      <view class="bg-white padding-15 margin-bottom-15" v-for="(con, index) in contentList" :key="index">
+        <view class="flex margin-bottom-10">
           <uni-section :title="con.contentTitle" type="line"></uni-section>
 
           <view style="margin: auto"> </view>
@@ -19,9 +19,10 @@
                 }
               "
               :disabled="xunJianStore.contentArray.siteList.inspectionStatus == 2"
+              :activeColor="proxy.$settingStore.themeColor.color"
             >
               <u-row style="width: 100%; flex-wrap: wrap">
-                <u-col class="margin-bottom-15" v-for="option in con.contentOptionList" :key="option" span="6">
+                <u-col class="margin-bottom-15" v-for="option in con.contentOptionList" :key="option" :span="6">
                   <u-checkbox :label="option.optionName" :name="option.id" :checked="con.contentOptionListValue1.length > 0 ? con.contentOptionListValue1.indexOf(option.id) >= 0 : false">
                   </u-checkbox>
                 </u-col>
@@ -34,7 +35,7 @@
             </view>
           </view>
           <view class="margin-top-15" v-if="con.submissionMethod == 2">
-            <u-radio-group placement="row" v-model="con.contentOptionListValue">
+            <u-radio-group placement="row" v-model="con.contentOptionListValue" :activeColor="proxy.$settingStore.themeColor.color">
               <u-row style="width: 100%; flex-wrap: wrap">
                 <u-col class="margin-bottom-15" v-for="option in con.contentOptionList" :key="option" :span="6">
                   <u-radio :disabled="xunJianStore.contentArray.siteList.inspectionStatus == 2" :label="option.optionName" :name="option.id"> </u-radio>
@@ -65,12 +66,9 @@
       </view>
     </view>
     <view class="app-position-fixed">
-      <view>
-        <u-button class="app-buttom" v-if="xunJianStore.contentArray.siteList.inspectionStatus == 1" type="primary" shape="circle" @click="buttonClick(1)"> 上一步 </u-button>
-      </view>
-      <view>
-        <u-button class="app-buttom" v-if="xunJianStore.contentArray.siteList.inspectionStatus == 1" type="primary" shape="circle" @click="buttonClick(2)"> 提交 </u-button>
-      </view>
+      <u-button class="app-buttom" v-if="xunJianStore.contentArray.siteList.inspectionStatus == 1" type="primary" shape="circle" @click="buttonClick(1)"> 上一步 </u-button>
+
+      <u-button class="app-buttom" v-if="xunJianStore.contentArray.siteList.inspectionStatus == 1" type="primary" shape="circle" @click="buttonClick(2)"> 提交 </u-button>
     </view>
 
     <u-modal ref="uModal" :show="show" :title="title" :content="content" @confirm="confirm"></u-modal>
@@ -230,10 +228,13 @@ onMounted(() => {});
 </script>
 
 <style lang="scss">
-.siteHeader {
-  display: flex;
-  height: 18px;
-  line-height: 18px;
-  margin-bottom: 10px;
+.xunjian-plan-content {
+  //#ifdef H5
+  margin-bottom: 125px;
+  //#endif
+
+  //#ifdef APP-PLUS
+  margin-bottom: 130px;
+  //#endif
 }
 </style>

src/pages/business/mhxf/xunJian/plan/components/drawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-popup :show="scanBool" @close="close" @open="open" mode="bottom">
+  <u-popup :show="scanBool" @close="close" @open="open" mode="bottom" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
     <template #default>
       <view class="margin-bottom-15 margin-top-15">
         <h4 style="font-size: 16px; color: #149eff; text-align: center; margin-bottom: 10px">请选择计划</h4>

src/pages/business/mhxf/xunJian/plan/components/report.vue

@@ -1,6 +1,6 @@
 <template>
   <scroll-view scroll-y>
-    <view class="margin-bottom-15 whiteBackgroundColor" style="display: flex; padding: 15px 0px 15px 15px" v-for="cu in currentDateList" :key="cu">
+    <view class="margin-bottom-15 bg-white" style="display: flex; padding: 15px 0px 15px 15px" v-for="cu in currentDateList" :key="cu">
       <view class="reportLeft" @click="pulicClick(cu)">
         <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="cu.siteType == 1" shape="circle"></u-image>
 
@@ -73,6 +73,8 @@ const { proxy } = getCurrentInstance();
 
 function pulicClick(obj) {
   if (obj.inspectionStatus == 2) {
+    xunJianStore.contentArray = {};
+
     recordList({
       siteId: obj.id,
       planSonId: xunJianStore.planSonId,
@@ -92,6 +94,10 @@ function pulicClick(obj) {
             };
             xunJianStore.siteId = undefined;
             xunJianStore.siteNubmber = undefined;
+
+            uni.navigateTo({
+              url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
+            });
           });
         }
       } else {
@@ -101,11 +107,11 @@ function pulicClick(obj) {
     xunJianStore.contentArray = {};
     xunJianStore.siteId = obj.id;
     xunJianStore.siteNubmber = undefined;
-  }
 
-  uni.navigateTo({
-    url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
-  });
+    uni.navigateTo({
+      url: "/pages/business/mhxf/xunJian/plan/components/siteDetails",
+    });
+  }
 }
 
 /**

src/pages/business/mhxf/xunJian/plan/components/siteDetails.vue

@@ -1,31 +1,26 @@
 <template>
-  <scroll-view scroll-y>
-    <view style="margin-bottom: 75px">
-      <view class="padding-15 margin-bottom-15 whiteBackgroundColor" style="display: flex">
-        <view style="margin-right: 15px; display: flex">
-          <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="siteList.siteType == 1" shape="circle"></u-image>
-
-          <u-image style="margin: auto" width="40" height="40" src="@/static/images/xunjian/NFC.png" v-if="siteList.siteType == 2" shape="circle"></u-image>
-        </view>
-        <view>
-          <view style="font-size: 15px; margin-bottom: 2px">
-            {{ siteList.siteName }}
-          </view>
+  <scroll-view scroll-y :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
+    <view class="xunjian-plan-siteDetails">
+      <view class="flex bg-white padding-15 margin-bottom-15">
+        <u-image style="margin: auto 15px auto 0" width="40" height="40" src="@/static/images/xunjian/scan.png" v-if="siteList.siteType == 1" shape="circle"></u-image>
+        <u-image style="margin: auto 15px auto 0" width="40" height="40" src="@/static/images/xunjian/NFC.png" v-if="siteList.siteType == 2" shape="circle"></u-image>
+
+        <view style="margin: auto auto auto 0">
+          <view style="font-size: 15px; margin-bottom: 2px"> {{ siteList.siteName }} </view>
           <view style="font-size: 13px; color: #a1a1a1"> {{ siteList.contentCount }}项内容 </view>
         </view>
-        <view style="margin: auto"></view>
-        <view style="margin: auto 0">
+
+        <view style="margin: auto 0 auto 0">
           <!-- {{ siteList.siteStatus == null }} -->
           <view style="font-size: 15px; color: #30bb00">已定位</view>
           <!-- #f07d28 -->
         </view>
       </view>
 
-      <view class="padding-15 margin-bottom-15 whiteBackgroundColor">
-        <view class="siteHeader">
-          <uni-section title="上报现场" type="line"></uni-section>
-        </view>
-        <view style="display: flex; flex-wrap: wrap">
+      <view class="bg-white padding-15 margin-bottom-15">
+        <uni-section class="margin-bottom-10" title="上报现场" type="line"></uni-section>
+
+        <view class="flex flex-wrap">
           <view class="uploadView" v-for="record in siteList.recordPictureList" :key="record">
             <view class="uploadUimage">
               <u-image width="100%" height="100%" :src="record.pictureUrl"></u-image>
@@ -41,10 +36,9 @@
         </view>
       </view>
 
-      <view class="padding-15 margin-bottom-15 whiteBackgroundColor" style="height: 170px; max-height: 170px">
-        <view class="siteHeader">
-          <uni-section title="备注" type="line"></uni-section>
-        </view>
+      <view class="bg-white padding-15 margin-bottom-15" style="height: 170px; max-height: 170px">
+        <uni-section class="margin-bottom-10" title="备注" type="line"></uni-section>
+
         <view style="height: calc(100% - 25px)">
           <span v-if="siteList.inspectionStatus == 2">
             {{ siteList.remarks }}
@@ -54,21 +48,16 @@
         </view>
       </view>
 
-      <view class="padding-15 whiteBackgroundColor">
-        <view class="siteHeader">
-          <uni-section title="消防设施分布图" type="line"></uni-section>
-        </view>
-        <view>
-          <u-image width="100%" :src="siteList.pictureUrl"></u-image>
-        </view>
+      <view class="bg-white padding-15 margin-bottom-15">
+        <uni-section class="margin-bottom-10" title="消防设施分布图" type="line"></uni-section>
+
+        <u-image width="100%" :src="siteList.pictureUrl"></u-image>
       </view>
     </view>
     <view class="app-position-fixed">
-      <view>
-        <u-button v-if="siteList.inspectionStatus == 1" class="app-buttom" type="primary" @click="buttonClick()" shape="circle"> 下一步 </u-button>
+      <u-button v-if="siteList.inspectionStatus == 1" class="app-buttom" type="primary" @click="buttonClick()" shape="circle"> 下一步 </u-button>
 
-        <u-button v-if="siteList.inspectionStatus == 2" class="app-buttom" type="primary" @click="buttonClick()" shape="circle"> 查看巡检项 </u-button>
-      </view>
+      <u-button v-if="siteList.inspectionStatus == 2" class="app-buttom" type="primary" @click="buttonClick()" shape="circle"> 查看巡检项 </u-button>
     </view>
   </scroll-view>
 </template>
@@ -184,12 +173,15 @@ onShow(() => {
 onMounted(() => {});
 </script>
 
-<style scoped>
-.siteHeader {
-  display: flex;
-  height: 20px;
-  line-height: 20px;
-  margin-bottom: 10px;
+<style lang="scss" scoped>
+.xunjian-plan-siteDetails {
+  //#ifdef H5
+  margin-bottom: 70px;
+  //#endif
+
+  //#ifdef APP-PLUS
+  margin-bottom: 75px;
+  //#endif
 }
 </style>
 

src/pages/business/mhxf/xunJian/plan/index.vue

@@ -1,129 +1,97 @@
 <template>
   <scroll-view scroll-y>
-    <view>
-      <view>
-        <oa-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" :currentDate="currentDateList" />
+    <view class="xunjian-plan-container" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
+      <!-- 日历组件 -->
+      <oa-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" :currentDate="currentDateList" />
+
+      <!-- 分段器组件 -->
+      <view class="app-subsection">
+        <u-subsection :list="list" :current="tabPosition" inactiveColor="#303133" :activeColor="proxy.$settingStore.themeColor.color" @change="tabPositionChange"></u-subsection>
       </view>
-      <view>
-        <view class="padding-sm" style="display: flex; margin: 10px; padding: 10px 5rem">
-          <u-subsection :list="list" :current="tabPosition" inactiveColor="#303133" activeColor="#3c9cff" @change="tabPositionChange"></u-subsection>
-        </view>
-        <view>
-          <view id="planTimeline1" v-if="activities.length > 0">
-            <view style="margin: 0px -3.5px; font-size: 13px; color: #409eff" @click="activitiesSortClick()"> 排序 </view>
-            <view v-for="(activity, index) in activities" :key="index" v-show="tabPosition == 0">
-              <view style="display: flex; height: 25px; line-height: 25px">
-                <view style="margin: auto 0">
-                  <u-icon name="info-circle-fill" color="#409eff" size="18"></u-icon>
-                </view>
-                <view style="display: flex; width: 100%; margin-left: 15px">
-                  <view style="font-size: 15px; color: #000000">
-                    {{ activity.planName }}
-                  </view>
-                  <view style="margin: auto"> </view>
-                  <view style="font-size: 14px; color: #b5b5b5">
-                    {{ activity.timestamp }}
-                  </view>
-                </view>
-              </view>
 
-              <view style="display: flex">
-                <view style="width: 18px; display: flex">
-                  <view v-if="index != activities.length - 1" style="width: 2px; background-color: #e4e7ed; margin: -5px auto"></view>
-                </view>
-                <view style="width: 100%; margin: 15px 0px 15px 15px; padding: 15px; background-color: #fff; border-radius: 10px">
-                  <view style="display: flex" v-if="activity.planStatus == 2">
-                    <view>
-                      <view>巡检任务结束</view>
-                      <br />
-                      <view style="padding: 0; font-size: 14px; color: #409eff" @click="reportClick(activity)"> 点击查看 </view>
-                    </view>
-                    <view style="margin: auto"></view>
-                    <view style="display: flex">
-                      <c-progress-circle style="margin: auto" :progress="activity.completion / 100" color="#20a0ff" size="100rpx" boderWidth="100rpx"></c-progress-circle>
-                    </view>
-                  </view>
-                  <view style="display: flex" v-if="activity.planStatus == 1">
-                    <view>
-                      <view>巡检任务执行中，还需完成 {{ activity.undetectedSiteCount }}个 </view>
-                      <br />
-                      <view @click="reportClick(activity)" style="padding: 0; font-size: 14px; color: #409eff"> 点击巡检 </view>
-                    </view>
-                    <view style="margin: auto"></view>
-                    <view style="display: flex">
-                      <c-progress-circle style="margin: auto" :progress="activity.completion / 100" color="#20a0ff" size="100rpx" boderWidth="100rpx"></c-progress-circle>
-                    </view>
-                  </view>
-                  <view style="display: flex" v-if="activity.planStatus == 3">
-                    <view>
-                      <view>巡检任务结束</view>
-                      <br />
-                      <view>
-                        <span style="margin-right: 20px">
-                          合格：
-                          <span style="color: #00cdac">
-                            {{ activity.patrolledSiteCount }}
-                          </span>
-                        </span>
-                        <span>
-                          漏检：
-                          <span style="color: #f07d28">
-                            {{ activity.undetectedSiteCount }}
-                          </span>
-                        </span>
-                      </view>
-                    </view>
-                    <view style="margin: auto"></view>
-                    <view style="display: flex">
-                      <c-progress-circle style="margin: auto" :progress="activity.completion / 100" color="#20a0ff" size="100rpx" boderWidth="100rpx"></c-progress-circle>
-                    </view>
-                  </view>
-                </view>
-              </view>
+      <!-- 内容 -->
+      <oa-timeLine v-if="activities.length > 0" :fontColor="proxy.$settingStore.themeColor.color" :sort="activitiesSort" @activitiesSortChange="activitiesSortChange">
+        <oa-timeLine-item
+          v-for="(ac, index) in activities"
+          :key="index"
+          :titleValue="ac.planName"
+          :timeValue="ac.timestamp"
+          :iconColor="proxy.$settingStore.themeColor.color"
+          v-show="tabPosition == 0"
+        >
+          <view style="display: flex" v-if="ac.planStatus == 2">
+            <view>
+              <view>巡检任务结束</view>
+              <br />
+              <view style="padding: 0; font-size: 14px" :style="{ color: proxy.$settingStore.themeColor.color }" @click="reportClick(ac)"> 点击查看 </view>
             </view>
-
-            <view v-for="(activity, index) in activities" :key="index" v-show="tabPosition == 1">
-              <view style="display: flex; height: 25px; line-height: 25px">
-                <view style="margin: auto 0">
-                  <u-icon name="info-circle-fill" color="#409eff" size="18"></u-icon>
-                </view>
-                <view style="display: flex; width: 100%; margin-left: 15px">
-                  <view style="font-size: 15px; color: #000000">
-                    {{ activity.areaName }}
-                  </view>
-                  <view style="margin: auto"> </view>
-                  <view style="font-size: 14px; color: #b5b5b5">
-                    {{ activity.createTime }}
-                  </view>
-                </view>
+            <view style="margin: auto"></view>
+            <view style="display: flex">
+              <c-progress-circle style="margin: auto" :progress="ac.completion / 100" :color="proxy.$settingStore.themeColor.color" size="100rpx" boderWidth="100rpx"></c-progress-circle>
+            </view>
+          </view>
+          <view style="display: flex" v-if="ac.planStatus == 1">
+            <view>
+              <view>巡检任务执行中，还需完成 {{ ac.undetectedSiteCount }}个 </view>
+              <br />
+              <view style="padding: 0; font-size: 14px" :style="{ color: proxy.$settingStore.themeColor.color }" @click="reportClick(ac)"> 点击巡检 </view>
+            </view>
+            <view style="margin: auto"></view>
+            <view style="display: flex">
+              <c-progress-circle style="margin: auto" :progress="ac.completion / 100" :color="proxy.$settingStore.themeColor.color" size="100rpx" boderWidth="100rpx"></c-progress-circle>
+            </view>
+          </view>
+          <view style="display: flex" v-if="ac.planStatus == 3">
+            <view>
+              <view>巡检任务结束</view>
+              <br />
+              <view>
+                <span style="margin-right: 20px">
+                  合格：
+                  <span style="color: #00cdac">
+                    {{ ac.patrolledSiteCount }}
+                  </span>
+                </span>
+                <span>
+                  漏检：
+                  <span style="color: #f07d28">
+                    {{ ac.undetectedSiteCount }}
+                  </span>
+                </span>
               </view>
+            </view>
+            <view style="margin: auto"></view>
+            <view style="display: flex">
+              <c-progress-circle style="margin: auto" :progress="ac.completion / 100" :color="proxy.$settingStore.themeColor.color" size="100rpx" boderWidth="100rpx"></c-progress-circle>
+            </view>
+          </view>
+        </oa-timeLine-item>
 
-              <view style="display: flex">
-                <view style="width: 18px; display: flex">
-                  <view v-if="index != activities.length - 1" style="width: 2px; background-color: #e4e7ed; margin: -5px auto"></view>
-                </view>
-                <view style="width: 100%; margin: 15px 0px 15px 15px; padding: 15px; background-color: #fff; border-radius: 10px">
-                  <view style="display: flex">
-                    <view>
-                      <view>已检查{{ activity.contentCount }}项内容</view>
-                      <br />
-                      <view style="padding: 0; font-size: 14px; color: #409eff" @click="reportClick(activity)"> 点击查看 </view>
-                    </view>
-                    <view style="margin: auto"></view>
-                    <view style="display: flex; font-size: 15px; color: #30bb00">
-                      <view style="margin: auto">
-                        {{ activity.siteStatus == 0 ? "未定位" : "已定位" }}
-                      </view>
-                    </view>
-                  </view>
-                </view>
+        <oa-timeLine-item
+          v-for="(ac, index) in activities"
+          :key="index"
+          :titleValue="ac.areaName"
+          :timeValue="ac.createTime"
+          :iconColor="proxy.$settingStore.themeColor.color"
+          v-show="tabPosition == 1"
+        >
+          <view style="display: flex">
+            <view>
+              <view>已检查{{ ac.contentCount }}项内容</view>
+              <br />
+              <view style="padding: 0; font-size: 14px" :style="{ color: proxy.$settingStore.themeColor.color }" @click="reportClick(ac)"> 点击查看 </view>
+            </view>
+            <view style="margin: auto"></view>
+            <view style="display: flex; font-size: 15px; color: #30bb00">
+              <view style="margin: auto">
+                {{ ac.siteStatus == 0 ? "未定位" : "已定位" }}
               </view>
             </view>
           </view>
+        </oa-timeLine-item>
+      </oa-timeLine>
 
-          <view id="planTimeline" style="text-align: center; color: #bdbdbd; font-size: 14px" v-else> 暂无数据 </view>
-        </view>
-      </view>
+      <view id="planTimeline" style="text-align: center; color: #bdbdbd; font-size: 14px" v-else> 暂无数据 </view>
     </view>
 
     <view style="position: fixed; right: 0; bottom: 50px">
@@ -345,12 +313,8 @@ function currentApi() {
  * @排序按钮
  */
 const activitiesSort = ref("DESC");
-function activitiesSortClick() {
-  if (activitiesSort.value == "ASC") {
-    activitiesSort.value = "DESC";
-  } else {
-    activitiesSort.value = "ASC";
-  }
+function activitiesSortChange(val) {
+  activitiesSort.value = val;
   activitiesApi();
 }
 
@@ -383,8 +347,16 @@ onShow(() => {
 onMounted(() => {});
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .is-selected {
   color: #1989fa;
 }
+
+.xunjian-plan-container {
+  .app-subsection {
+    display: flex;
+    margin: 10px;
+    padding: 10px 5rem;
+  }
+}
 </style>

src/pages/mine/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <view class="mine-container">
+  <view :data-theme="'theme-' + proxy.$settingStore.themeColor.name" class="mine-container" :style="{ height: `calc(100vh - 50.67px)` }">
     <!--顶部个人信息栏-->
-    <view class="header-section" :class="'bg-' + proxy.$settingStore.themeColor.name" :style="{ paddingTop: proxy.$settingStore.StatusBar ? proxy.$settingStore.StatusBar + 20 + 'px' : '55px' }">
+    <view class="header-section" :class="'bg-' + themeColor.name" :style="{ paddingTop: proxy.$settingStore.StatusBar ? proxy.$settingStore.StatusBar + 20 + 'px' : '55px' }">
       <view class="flex padding justify-between">
         <view class="flex align-center">
           <view v-if="!avatar" class="cu-avatar xl round bg-white" @click="handleToAvatar(1)">
@@ -35,47 +35,32 @@
       <image class="mine-image" src="@/static/images/mine/arc.png"></image>
 
       <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToEditInfo()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-user menu-icon"></view>
-            <view>个人资料</view>
+            <view>我的信息</view>
           </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleToPwd">
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToSecure()">
           <view class="menu-item-box">
-            <view class="iconfont ucicon-password menu-icon"></view>
-            <view>修改密码</view>
+            <view class="iconfont ucicon-yanzheng menu-icon"></view>
+            <view>账号与安全</view>
           </view>
         </view>
-      </view>
-
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-aixin menu-icon"></view>
             <view>关于我们</view>
           </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleHelp()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-Help menu-icon"></view>
             <view>常见问题</view>
           </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
-          <view class="menu-item-box">
-            <view class="iconfont ucicon-qinglihuancun menu-icon"></view>
-            <view>清理缓存</view>
-            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ proxy.$settingStore.currentSize }}</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
-          <view class="menu-item-box">
-            <view class="iconfont ucicon-jianchagengxin menu-icon"></view>
-            <view>检查更新</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleSetting">
+
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleSetting()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-shezhi menu-icon"></view>
             <view>设置</view>
@@ -83,38 +68,38 @@
         </view>
       </view>
 
-      <view class="menu-list">
-        <!-- <view class="list-cell list-cell-arrow" @click="goMessagePush()">
+      <!-- <view class="menu-list">
+        <view class="list-cell list-cell-arrow" @click="goMessagePush()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-aixin menu-icon"></view>
             <view>推送设置</view>
           </view>
-        </view> -->
-        <!-- <view class="list-cell list-cell-arrow" @click="goBuilding()">
+        </view>
+        <view class="list-cell list-cell-arrow" @click="goBuilding()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-aixin menu-icon"></view>
             <view>建筑管理</view>
           </view>
-        </view> -->
-        <!-- <view class="list-cell list-cell-arrow" @click="goFunReport()">
+        </view>
+        <view class="list-cell list-cell-arrow" @click="goFunReport()">
           <view class="menu-item-box">
             <view class="iconfont ucicon-aixin menu-icon"></view>
             <view>功能报备</view>
           </view>
-        </view> -->
-      </view>
+        </view>
+      </view> -->
 
       <view class="cu-list menu">
         <view class="cu-item" style="margin-top: 0; margin-bottom: 0">
           <view class="content flex align-center">
-            <text class="iconfont ucicon-colorlens" :class="'text-' + proxy.$settingStore.themeColor.name"></text>
-            <view class="padding solid radius shadow-blur" :class="'bg-' + proxy.$settingStore.themeColor.name" style="margin-left: 10px"></view>
+            <text class="iconfont ucicon-colorlens" :class="'text-' + themeColor.name"></text>
+            <view class="padding solid radius shadow-blur" :class="'bg-' + themeColor.name" style="margin-left: 10px"></view>
             <view class="title" style="margin-left: 10px">
-              主题色：<text :class="'text-' + proxy.$settingStore.themeColor.name">{{ proxy.$settingStore.themeColor.title }}</text>
+              主题色：<text :class="'text-' + themeColor.name">{{ themeColor.title }}</text>
             </view>
           </view>
           <view class="action">
-            <button class="cu-btn round shadow" @click="colorModal = true" :class="'bg-' + proxy.$settingStore.themeColor.name">
+            <button class="cu-btn round shadow" @click="colorModal = true" :class="'bg-' + themeColor.name">
               <text class="iconfont ucicon-colorlens"></text>
               选择主题
             </button>
@@ -124,15 +109,15 @@
 
       <view class="cu-list menu">
         <view class="cu-item">
-          <view class="content text-center" @click="handleLogout">
+          <view class="content text-center" @click="proxy.$settingStore.handleLogout">
             <text class="text-black">退出登录</text>
           </view>
         </view>
       </view>
     </view>
 
-    <view class="cu-list menu-avatar padding-lr-sm padding-top-sm">
-      <!-- <view class="cu-item" @tap="goSiteManage" v-if="permissionLabel == 1">
+    <!-- <view class="cu-list menu-avatar padding-lr-sm padding-top-sm">
+      <view class="cu-item" @tap="goSiteManage" v-if="permissionLabel == 1">
         <view class="cu-avatar" style="background-image: url(@/static/images/setting/setting-icon2.png)"></view>
         <view class="content">
           <view class="">站点管理</view>
@@ -153,8 +138,8 @@
             <text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
           </view>
         </view>
-      </view> -->
-    </view>
+      </view>
+    </view> -->
 
     <!-- 选择颜色模态框 -->
     <view class="cu-modal" :class="{ show: colorModal }">
@@ -185,11 +170,11 @@ import config from "@/config";
 import storage from "@/utils/storage";
 import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
+import { publicStores, useStores } from "@/store/modules/index";
 
 import { uploadAvatar, updateUserProfile } from "@/api/system/user";
 import { getAuthorization } from "@/api/setting/index.js";
 
-import useStores from "@/store/modules/user.js";
 const useStore = useStores();
 
 const { proxy } = getCurrentInstance();
@@ -198,6 +183,10 @@ const avatar = computed(() => {
   return useStore.$state.avatar;
 });
 
+const themeColor = computed(() => {
+  return proxy.$settingStore.themeColor;
+});
+
 const windowHeight = computed(() => {
   return uni.getSystemInfoSync().windowHeight - 50;
 });
@@ -225,13 +214,6 @@ function getAuthorizationApi(params) {
   });
 }
 
-/**
- * @设置
- */
-function handleSetting() {
-  proxy.$tab.navigateTo("/pages/mine/setting/index");
-}
-
 /**
  * @推送设置
  */
@@ -301,65 +283,6 @@ function handleToAvatar(type) {
   }
 }
 
-/**
- * @退出登录
- */
-function handleLogout() {
-  proxy.$modal.confirm("确定注销并退出系统吗？").then(() => {
-    useStore.LogOut().then(() => {
-      proxy.$tab.reLaunch("/pages/index");
-    });
-  });
-}
-
-/**
- * @常见问题
- */
-function handleHelp() {
-  proxy.$tab.navigateTo("/pages/mine/help/index");
-}
-
-/**
- * @个人资料
- */
-function handleToEditInfo() {
-  proxy.$tab.navigateTo("/pages/mine/info/index");
-}
-
-/**
- * @修改密码
- */
-function handleToPwd() {
-  proxy.$tab.navigateTo("/pages/mine/pwd/index");
-}
-
-/**
- * @检查更新
- */
-function handleToUpgrade() {
-  proxy.$modal.showToast("模块建设中~");
-}
-
-/**
- * @关于我们
- */
-function handleAbout() {
-  proxy.$tab.navigateTo("/pages/mine/about/index");
-}
-
-/**
- * @清理缓存
- */
-function handleCleanTmp() {
-  // #ifdef H5
-  proxy.$modal.showToast("H5暂不支持此功能");
-  // #endif
-
-  // #ifdef APP-PLUS
-  proxy.$setting.clearCache();
-  // #endif
-}
-
 let startY = 0,
   moveY = 0,
   pageAtTop = true;
@@ -469,9 +392,7 @@ onNavigationBarButtonTap((e) => {
   .content-section {
     position: relative;
     margin-top: -85px;
-    // #ifdef H5
-    padding-bottom: 50px;
-    // #endif
+    padding-bottom: 50.67px;
     background-color: #f5f6f7;
 
     .mine-image {

src/pages/mine/info/index.vue

@@ -1,13 +1,79 @@
 <template>
-  <view class="info-container">
-    <!--头像 + 背景-->
-    <view class="user-section" :class="'bg-' + proxy.$settingStore.themeColor.name" :style="{ paddingTop: proxy.$settingStore.barHightTop }">
+  <view :data-theme="'theme-' + proxy.$settingStore.themeColor.name" class="info-container">
+    <u-sticky bgColor="#fff" style="box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)">
+      <u-tabs
+        :list="tabsList"
+        :current="tabsCurrent"
+        @click="tabsClick"
+        lineColor="#333"
+        :activeStyle="{ color: '#333' }"
+        :inactiveStyle="{ color: '#909399' }"
+        :scrollable="false"
+        style="border-bottom: 1px solid #eaeef1"
+      ></u-tabs>
+    </u-sticky>
+
+    <view class="content-section" v-show="tabsCurrent == 0">
+      <view class="menu-list margin-top-0 margin-lr-0">
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToAvatar(2)">
+          <view class="menu-item-box">
+            <view class="title">头像</view>
+            <image style="margin: 0 15px 0 auto" v-if="avatar" :src="avatar" class="cu-avatar radius"> </image>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改昵称')">
+          <view class="menu-item-box">
+            <view class="title">昵称</view>
+            <view class="content" style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.nickName }}</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改手机号')">
+          <view class="menu-item-box">
+            <view class="title">手机号码</view>
+            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.phonenumber }}</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改邮箱')">
+          <view class="menu-item-box">
+            <view class="title">邮箱</view>
+            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.email }}</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
+          <view class="menu-item-box">
+            <view class="title">性别</view>
+            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.sex == "0" ? "男" : "女" }}</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view class="title">我的名片</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="menu-list margin-top-0 margin-lr-0">
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view>个人实名认证</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view>更多</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- <view class="user-section" :class="'bg-' + proxy.$settingStore.themeColor.name" :style="{ paddingTop: proxy.$settingStore.barHightTop }">
       <image class="bg" src="@/static/images/mine/user-bg.png"></image>
       <view class="portrait-box">
-        <image v-if="!avatar" @click="handleToAvatar(1)" class="portrait" src="@/static/images/mine/missing-face.png"></image>
-        <image v-if="avatar" @click="handleToAvatar(2)" :src="avatar" class="portrait cu-avatar xl round"> </image>
+        <image v-if="!avatar" @click="proxy.$settingStore.handleToAvatar(1)" class="portrait" src="@/static/images/mine/missing-face.png"></image>
+        <image v-if="avatar" @click="proxy.$settingStore.handleToAvatar(2)" :src="avatar" class="portrait cu-avatar xl round"> </image>
       </view>
-    </view>
+    </view> -->
+
     <!-- <uni-list>
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码" :rightText="user.phonenumber" />
@@ -17,7 +83,7 @@
       <uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期" :rightText="user.createTime" />
     </uni-list> -->
 
-    <view class="example">
+    <!-- <view class="example">
       <uni-forms ref="form" :model="user" labelWidth="80px">
         <uni-forms-item label="用户昵称" name="nickName">
           <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
@@ -33,17 +99,37 @@
         </uni-forms-item>
       </uni-forms>
       <button type="primary" class="round text-dfl" @click="submit">修改资料</button>
-    </view>
+    </view> -->
   </view>
+
+  <u-modal :show="modalShow" :showConfirmButton="true" :showCancelButton="true" @cancel="modalShow = false" @confirm="handleConfirm">
+    <view class="slot-content" style="width: 100%">
+      <view class="margin-bottom-15" style="color: #909399">{{ modalTitle }}</view>
+
+      <view v-if="modalTitle === '修改昵称'">
+        <u--input v-model="userArr.nickName" :maxlength="5" :placeholder="modalTitle" border="bottom" clearable></u--input>
+      </view>
+
+      <view v-if="modalTitle === '修改手机号'">
+        <u--input type="number" v-model="userArr.phonenumber" :maxlength="11" :placeholder="modalTitle" border="bottom" clearable></u--input>
+      </view>
+
+      <view v-if="modalTitle === '修改邮箱'">
+        <u--input v-model="userArr.email" :placeholder="modalTitle" border="bottom" clearable></u--input>
+      </view>
+    </view>
+  </u-modal>
 </template>
 
 <script setup>
-import { onLoad, onShow, onHide, onReady, onLaunch, onNavigationBarButtonTap } from "@dcloudio/uni-app";
-import { ref, shallowRef, reactive, computed, getCurrentInstance, toRefs, onMounted, inject } from "vue";
+import config from "@/config";
+import storage from "@/utils/storage";
+import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
+import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
+import { publicStores, useStores } from "@/store/modules/index";
 
-import { getUserProfile, uploadAvatar, updateUserProfile } from "@/api/system/user";
+import { updateUserProfile, getUserProfile } from "@/api/system/user";
 
-import useStores from "@/store/modules/user.js";
 const useStore = useStores();
 
 const { proxy } = getCurrentInstance();
@@ -52,16 +138,36 @@ const avatar = computed(() => {
   return useStore.$state.avatar;
 });
 
+const user = computed(() => {
+  return useStore.$state.user;
+});
+
+const userArr = computed(() => {
+  return useStore.$state.userArr;
+});
+
+const postGroup = computed(() => {
+  return useStore.$state.postGroup;
+});
+
+const roleGroup = computed(() => {
+  return useStore.$state.roleGroup;
+});
+
 const data = reactive({
-  name: useStore.$state.name,
-  version: getApp().globalData.config.appInfo.version,
-
-  user: {
-    nickName: "",
-    phonenumber: "",
-    email: "",
-    sex: "",
-  },
+  tabsList: [
+    {
+      name: "个人信息",
+    },
+    // {
+    //   name: "其它信息",
+    // },
+    {
+      name: "企业/团队",
+    },
+  ],
+  tabsCurrent: 0,
+
   sexs: [
     {
       text: "男",
@@ -72,116 +178,91 @@ const data = reactive({
       value: "1",
     },
   ],
-  rules: {
-    nickName: {
-      rules: [
-        {
-          required: true,
-          errorMessage: "用户昵称不能为空",
-        },
-      ],
-    },
-    phonenumber: {
-      rules: [
-        {
-          required: true,
-          errorMessage: "手机号码不能为空",
-        },
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          errorMessage: "请输入正确的手机号码",
-        },
-      ],
-    },
-    email: {
-      rules: [
-        {
-          required: true,
-          errorMessage: "邮箱地址不能为空",
-        },
-        {
-          format: "email",
-          errorMessage: "请输入正确的邮箱地址",
-        },
-      ],
-    },
-  },
+
+  modalShow: false,
+  modalTitle: "",
 });
 
-const { user, sexs, rules } = toRefs(data);
+// .test(value)
+
+const { name, phone, tabsList, tabsCurrent, sexs, modalShow, modalTitle } = toRefs(data);
 
-const roleGroup = ref("");
-const postGroup = ref("");
 const form = ref(null);
 
-/**
- * @点击头像
- */
-function handleToAvatar(type) {
-  if (type == 1) {
-    uni.chooseImage({
-      count: 1, //默认9
-      sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
-      sourceType: ["album", "camera"], //从相册选择、摄像头
-      success: function (res) {
-        uploadApi(res);
-      },
-    });
-  } else if (type == 2) {
-    proxy.$tab.navigateTo("/pages/mine/avatar/index");
-  }
+function handleUserModal(title) {
+  modalShow.value = true;
+  modalTitle.value = title;
 }
 
-/**
- * @upload上传头像
- * @api接口请求
- */
-function uploadApi(res) {
-  let data = { name: "file", filePath: res.tempFilePaths[0] };
-  uploadAvatar(data).then((response) => {
-    useStore.$state.avatar = response.data.url;
-    updateUserProfile({
-      avatar: response.data.url,
-    }).then(() => {});
-  });
-}
+function handleConfirm() {
+  if (modalTitle.value == "修改昵称") {
+    if (!userArr.value.nickName) {
+      proxy.$modal.showToast("昵称不能为空");
+      return;
+    }
+  }
+
+  if (modalTitle.value == "修改手机号") {
+    if (!userArr.value.phonenumber) {
+      proxy.$modal.showToast("手机号码不能为空");
+      return;
+    }
+
+    if (/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(userArr.value.phonenumber)) {
+      proxy.$modal.showToast("请输入正确的手机号码");
+      return;
+    }
+  }
+
+  if (modalTitle.value == "修改邮箱") {
+    if (!userArr.value.email) {
+      proxy.$modal.showToast("邮箱不能为空");
+      return;
+    }
 
-function getUser() {
-  getUserProfile().then((response) => {
-    user.value = response.data.user;
-    roleGroup.value = response.roleGroup;
-    postGroup.value = response.postGroup;
+    if (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(userArr.value.email)) {
+      proxy.$modal.showToast("请输入正确的邮箱地址");
+      return;
+    }
+  }
+
+  updateUserProfile(userArr.value).then((response) => {
+    proxy.$tab.reLaunch("/pages/mine/index");
+    useStore.getUser();
   });
 }
 
-function submit(ref) {
-  form.value.validate().then((res) => {
-    updateUserProfile(user.value).then((response) => {
-      proxy.$modal.msgSuccess("修改成功，重新登录后生效!");
-      proxy.$tab.reLaunch("pages/mine/index");
-    });
-  });
+function submit(ref) {}
+
+/**
+ * @tabs点击事件
+ */
+function tabsClick(e) {
+  tabsCurrent.value = e.index;
 }
 
 onLoad((options) => {
-  getUser();
+  useStore.getUser();
 });
 
 onReady(() => {
-  form.value.setRules(rules.value);
+  //   form.value.setRules(rules.value);
 });
 
 onShow(() => {
   //调用系统主题颜色
   proxy.$settingStore.systemThemeColor([1]);
 });
+
+// 自定义导航事件
+onNavigationBarButtonTap((e) => {
+  if (e.float == "right") {
+    proxy.$tab.navigateTo("/pages/mine/setting/index");
+  }
+});
 </script>
 
-<style lang="scss">
-page {
-  background-color: #ffffff;
-}
-</style>
+<style lang="scss" scoped></style>
 
 <style lang="scss" scoped>
 :deep(.uni-page-head__title) {

src/pages/mine/pwd/index.vue

@@ -1,115 +0,0 @@
-<template>
-  <view class="pwd-retrieve-container">
-    <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="修改密码" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
-      <template #left>
-        <view class="u-nav-slot">
-          <u-icon name="arrow-left" size="19" color="#fff"></u-icon>
-        </view>
-      </template>
-    </u-navbar>
-
-    <view class="uni-content-header"></view>
-    <view class="uni-content-body">
-      <uni-forms ref="form" :value="user" labelWidth="80px">
-        <uni-forms-item name="oldPassword" label="旧密码">
-          <uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
-        </uni-forms-item>
-        <uni-forms-item name="newPassword" label="新密码">
-          <uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
-        </uni-forms-item>
-        <uni-forms-item name="confirmPassword" label="确认密码">
-          <uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
-        </uni-forms-item>
-        <button type="primary" class="round text-dfl" @click="submit">提交</button>
-      </uni-forms>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { updateUserPwd } from "@/api/system/user";
-
-import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
-import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, toRefs } from "vue";
-
-import useStores from "@/store/modules/user.js";
-const useStore = useStores();
-
-const { proxy } = getCurrentInstance();
-
-const data = reactive({
-  user: {
-    oldPassword: undefined,
-    newPassword: undefined,
-    confirmPassword: undefined,
-  },
-  rules: {
-    oldPassword: {
-      rules: [
-        {
-          required: true,
-          errorMessage: "旧密码不能为空",
-        },
-      ],
-    },
-    newPassword: {
-      rules: [
-        {
-          required: true,
-          errorMessage: "新密码不能为空",
-        },
-        {
-          minLength: 6,
-          maxLength: 20,
-          errorMessage: "长度在 6 到 20 个字符",
-        },
-      ],
-    },
-    confirmPassword: {
-      rules: [
-        {
-          required: true,
-          errorMessage: "确认密码不能为空",
-        },
-        {
-          validateFunction: (rule, value, data) => data.newPassword === value,
-          errorMessage: "两次输入的密码不一致",
-        },
-      ],
-    },
-  },
-});
-const { user, rules } = toRefs(data);
-
-const form = ref(null);
-
-function submit() {
-  form.value.validate().then((res) => {
-    updateUserPwd(user.value.oldPassword, user.value.newPassword).then((response) => {
-      proxy.$modal.msgSuccess("修改成功");
-    });
-  });
-}
-
-onShow(() => {
-  //调用系统主题颜色
-  proxy.$settingStore.systemThemeColor([1]);
-});
-
-onReady(() => {
-  form.value.setRules(rules.value);
-});
-</script>
-
-<style>
-page {
-  background-color: #ffffff;
-}
-</style>
-
-<style lang="scss">
-.uni-content-body {
-  padding-top: 36rpx;
-  padding: 15px;
-}
-</style>

src/pages/mine/secure/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <view :data-theme="'theme-' + proxy.$settingStore.themeColor.name" class="secure-container">
+    <view class="content-section">
+      <view class="menu-list margin-top-0 margin-lr-0">
+        <view></view>
+        <image style="width: 100%; height: 160px" src="@/static/images/index/banner2.jpg" mode="widthFix"></image>
+      </view>
+
+      <view class="menu-list margin-top-0 margin-lr-0">
+        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改手机号')">
+          <view class="menu-item-box">
+            <view class="title">手机号码</view>
+            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.phonenumber }}</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="handleUserModal('修改密码')">
+          <view class="menu-item-box">
+            <view class="title">密码</view>
+            <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ user.password ? "已设置" : "未设置" }}</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="menu-list margin-top-0 margin-lr-0">
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view class="title">指纹登录</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view class="title">人脸</view>
+          </view>
+        </view>
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view class="title">手势密码</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="menu-list margin-top-0 margin-lr-0">
+        <view class="list-cell list-cell-arrow" @click="proxy.$modal.showToast('模块建设中~')">
+          <view class="menu-item-box">
+            <view class="title">常用设备管理</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <u-modal :show="modalShow" :showConfirmButton="true" :showCancelButton="true" @cancel="modalShow = false" @confirm="handleConfirm">
+    <view class="slot-content" style="width: 100%">
+      <view class="margin-bottom-15" style="color: #909399">{{ modalTitle }}</view>
+
+      <view v-if="modalTitle === '修改手机号'">
+        <u--input v-model="userArr.phonenumber" :maxlength="11" :placeholder="modalTitle" border="bottom" clearable></u--input>
+      </view>
+
+      <view v-if="modalTitle === '修改密码'">
+        <u-input class="margin-bottom-15" v-model="oldPassword" placeholder="请输入旧密码" :password="oldPasswordBool" border="bottom">
+          <template #suffix>
+            <text :class="!oldPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="oldPasswordBool = !oldPasswordBool"></text>
+          </template>
+        </u-input>
+
+        <u-input class="margin-bottom-15" v-model="oldPassword" placeholder="请输入新密码" :password="newPasswordBool" border="bottom">
+          <template #suffix>
+            <text :class="!newPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="newPasswordBool = !newPasswordBool"></text>
+          </template>
+        </u-input>
+
+        <u-input v-model="confirmPassword" placeholder="请输入新密码" :password="confirmPasswordBool" border="bottom">
+          <template #suffix>
+            <text :class="!confirmPasswordBool ? 'iconfont ucicon-eye' : 'iconfont ucicon-eye-close'" @click="confirmPasswordBool = !confirmPasswordBool"></text>
+          </template>
+        </u-input>
+      </view>
+    </view>
+  </u-modal>
+</template>
+
+<script setup>
+import config from "@/config";
+import storage from "@/utils/storage";
+import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
+import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
+import { publicStores, useStores } from "@/store/modules/index";
+
+import { updateUserProfile, updateUserPwd } from "@/api/system/user";
+
+const useStore = useStores();
+
+const { proxy } = getCurrentInstance();
+
+const avatar = computed(() => {
+  return useStore.$state.avatar;
+});
+
+const user = computed(() => {
+  return useStore.$state.user;
+});
+
+const userArr = computed(() => {
+  return useStore.$state.userArr;
+});
+
+const data = reactive({
+  modalShow: false,
+  modalTitle: "",
+
+  oldPassword: undefined,
+  oldPasswordBool: true,
+  newPassword: undefined,
+  newPasswordBool: true,
+  confirmPassword: undefined,
+  confirmPasswordBool: true,
+});
+
+const { modalShow, modalTitle, oldPassword, oldPasswordBool, newPassword, newPasswordBool, confirmPassword, confirmPasswordBool } = toRefs(data);
+
+function handleUserModal(title) {
+  modalShow.value = true;
+  modalTitle.value = title;
+}
+
+function handleConfirm() {
+  if (modalTitle.value == "修改手机号") {
+    if (!userArr.value.phonenumber) {
+      proxy.$modal.showToast("手机号码不能为空");
+      return;
+    }
+
+    if (/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(userArr.value.phonenumber)) {
+      proxy.$modal.showToast("请输入正确的手机号码");
+      return;
+    }
+  }
+
+  if (modalTitle.value == "修改密码") {
+    if (!oldPassword.value) {
+      proxy.$modal.showToast("旧密码不能为空");
+      return;
+    }
+
+    if (!newPassword.value) {
+      proxy.$modal.showToast("新密码不能为空");
+      return;
+    }
+
+    if (newPassword.value.length > 6 && newPassword.value.length < 20) {
+      proxy.$modal.showToast("长度在 6 到 20 个字符");
+      return;
+    }
+
+    if (!confirmPassword.value) {
+      proxy.$modal.showToast("确认密码不能为空");
+      return;
+    }
+
+    if (confirmPassword.value != newPassword.value) {
+      proxy.$modal.showToast("两次输入的密码不一致");
+      return;
+    }
+  }
+
+  if (modalTitle.value == "修改手机号") {
+    updateUserProfile(userArr.value).then((response) => {
+      proxy.$tab.reLaunch("/pages/mine/index");
+      useStore.getUser();
+    });
+  } else if (modalTitle.value == "修改密码") {
+    form.value.validate().then((res) => {
+      updateUserPwd(oldPassword.value, newPassword.value).then((response) => {
+        proxy.$modal.msgSuccess("修改成功");
+      });
+    });
+  }
+}
+
+onLoad((options) => {});
+
+onReady(() => {});
+
+onShow(() => {
+  //调用系统主题颜色
+  proxy.$settingStore.systemThemeColor([1]);
+});
+
+// 自定义导航事件
+onNavigationBarButtonTap((e) => {
+  if (e.float == "right") {
+    proxy.$tab.navigateTo("/pages/mine/setting/index");
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/pages/mine/setting/index.vue

@@ -1,55 +1,57 @@
 <template>
   <view class="setting-container" :style="{ height: `${windowHeight}px` }">
     <view class="menu-list">
-      <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
+      <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToEditInfo()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-user menu-icon"></view>
-          <view>个人资料</view>
-        </view>
-      </view>
-      <view class="list-cell list-cell-arrow" @click="handleToPwd">
-        <view class="menu-item-box">
-          <view class="iconfont ucicon-password menu-icon"></view>
-          <view>修改密码</view>
+          <view>我的信息</view>
         </view>
       </view>
     </view>
 
     <view class="menu-list">
-      <view class="list-cell list-cell-arrow" @click="handleAbout">
+      <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-aixin menu-icon"></view>
           <view>关于我们</view>
         </view>
       </view>
-      <view class="list-cell list-cell-arrow" @click="handleHelp">
+      <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleHelp()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-Help menu-icon"></view>
           <view>常见问题</view>
         </view>
       </view>
-      <view class="list-cell list-cell-arrow" @click="handleCleanTmp">
+      <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleCleanTmp()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-qinglihuancun menu-icon"></view>
           <view>清理缓存</view>
           <view style="margin: 0 15px 0 auto; font-size: 14px; color: #909399">{{ proxy.$settingStore.currentSize }}</view>
         </view>
       </view>
-      <view class="list-cell list-cell-arrow" @click="handleToUpgrade">
+      <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToUpgrade()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-jianchagengxin menu-icon"></view>
           <view>检查更新</view>
         </view>
       </view>
     </view>
+
+    <!-- <view class="cu-list menu">
+      <view class="cu-item">
+        <view class="content text-center" @click="proxy.$settingStore.handleLogout">
+          <text class="text-black">退出登录</text>
+        </view>
+      </view>
+    </view> -->
   </view>
 </template>
 
 <script setup>
 import { onLoad, onShow, onHide, onLaunch, onNavigationBarButtonTap } from "@dcloudio/uni-app";
 import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
+import { publicStores, useStores } from "@/store/modules/index";
 
-import useStores from "@/store/modules/user.js";
 const useStore = useStores();
 
 const { proxy } = getCurrentInstance();
@@ -62,65 +64,6 @@ const windowHeight = computed(() => {
   return uni.getSystemInfoSync().windowHeight - 50;
 });
 
-/**
- * @个人资料
- */
-function handleToEditInfo() {
-  proxy.$tab.navigateTo("/pages/mine/info/index");
-}
-
-/**
- * @修改密码
- */
-function handleToPwd() {
-  proxy.$tab.navigateTo("/pages/mine/pwd/index");
-}
-
-/**
- * @常见问题
- */
-function handleHelp() {
-  proxy.$tab.navigateTo("/pages/mine/help/index");
-}
-
-/**
- * @检查更新
- */
-function handleToUpgrade() {
-  proxy.$modal.showToast("模块建设中~");
-}
-
-/**
- * @关于我们
- */
-function handleAbout() {
-  proxy.$tab.navigateTo("/pages/mine/about/index");
-}
-
-/**
- * @清理缓存
- */
-function handleCleanTmp() {
-  // #ifdef H5
-  proxy.$modal.showToast("H5暂不支持此功能");
-  // #endif
-
-  // #ifdef APP-PLUS
-  proxy.$setting.clearCache();
-  // #endif
-}
-
-/**
- * @退出登录
- */
-function handleLogout() {
-  proxy.$modal.confirm("确定注销并退出系统吗？").then(() => {
-    useStore.LogOut().then(() => {
-      proxy.$tab.reLaunch("/pages/login");
-    });
-  });
-}
-
 onLoad((options) => {});
 
 onShow(() => {

src/static/scss/colorui.css

@@ -2998,7 +2998,7 @@ scroll-view.cu-steps .cu-item {
 /*  -- 内外边距 -- */
 
 .margin-0 {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .margin-xs {
@@ -3948,4 +3948,4 @@ scroll-view.cu-steps .cu-item {
 .line-white,
 .lines-white {
   color: #ffffff;
-}
+}

src/static/scss/global.scss

@@ -1,90 +1,107 @@
 .text-center {
-	text-align: center;
+  text-align: center;
 }
 
 .font-13 {
-	font-size: 13px;
+  font-size: 13px;
 }
 
 .font-12 {
-	font-size: 12px;
+  font-size: 12px;
 }
 
 .font-11 {
-	font-size: 11px;
+  font-size: 11px;
 }
 
 .text-grey1 {
-	color: #888;
+  color: #888;
 }
+
 .text-grey2 {
-	color: #aaa;
+  color: #aaa;
 }
 
 .list-cell-arrow::before {
-    content: ' ';
-    height: 10px;
-    width: 10px;
-    border-width: 2px 2px 0 0;
-    border-color: #c0c0c0;
-    border-style: solid;
-    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
-    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
-    position: absolute;
-    top: 50%;
-    margin-top: -6px;
-    right: 30rpx;
-  }
-  
-  .list-cell {
-    position: relative;
+  content: ' ';
+  height: 10px;
+  width: 10px;
+  border-width: 2px 2px 0 0;
+  border-color: #c0c0c0;
+  border-style: solid;
+  -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+  transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+  position: absolute;
+  top: 50%;
+  margin-top: -6px;
+  right: 30rpx;
+}
+
+.list-cell {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  color: #333;
+  padding: 26rpx 30rpx;
+}
+
+.list-cell:first-child {
+  border-radius: 8rpx 8rpx 0 0;
+}
+
+.list-cell:last-child {
+  border-radius: 0 0 8rpx 8rpx;
+}
+
+.list-cell::after {
+  content: '';
+  position: absolute;
+  border-bottom: 1px solid #eaeef1;
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 100%;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+
+.menu-list {
+  margin: 0.625rem 0.625rem;
+
+  .menu-item-box {
     width: 100%;
-    box-sizing: border-box;
-    background-color: #fff;
-    color: #333;
-    padding: 26rpx 30rpx;
-  }
-  
-  .list-cell:first-child {
-    border-radius: 8rpx 8rpx 0 0;
-  }
-  
-  .list-cell:last-child {
-    border-radius: 0 0 8rpx 8rpx;
-  }
-  
-  .list-cell::after {
-    content: '';
-    position: absolute;
-    border-bottom: 1px solid #eaeef1;
-    -webkit-transform: scaleY(0.5) translateZ(0);
-    transform: scaleY(0.5) translateZ(0);
-    transform-origin: 0 100%;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    pointer-events: none;
-  }
-  
-  
-  .menu-list {
-    margin: 0.625rem 0.625rem;
-  
-    .menu-item-box {
-      width: 100%;
-      display: flex;
-      align-items: center;
-  
-      .menu-icon {
-        color: #007AFF;
-        font-size: 16px;
-        margin-right: 5px;
-      }
-      
-      .text-right {
-        margin-left: auto;
-        margin-right: 34rpx;
-        color: #999;
-      }
+    display: flex;
+    align-items: center;
+
+
+    .title {
+      width: 80%;
+      white-space: nowrap;
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+    }
+
+    .content {
+      width: 20%;
+      text-align: right;
+      white-space: nowrap;
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+    }
+
+    .menu-icon {
+      color: #007AFF;
+      font-size: 16px;
+      margin-right: 5px;
+    }
+
+    .text-right {
+      margin-left: auto;
+      margin-right: 34rpx;
+      color: #999;
     }
   }
+}

src/static/scss/handle.scss

@@ -0,0 +1,66 @@
+@import "./themes.scss";
+
+//切换主题时 获取不同的主题色值
+@mixin themeify {
+
+    @each $theme-name,
+    $theme-map in $themes {
+        //!global 把局部变量强升为全局变量
+        $theme-map: $theme-map !global;
+
+        //判断html的data-theme的属性值  #{}是sass的插值表达式
+        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
+        [data-theme="#{$theme-name}"] & {
+            @content;
+        }
+    }
+}
+
+
+//从主题色map中取出对应颜色
+@function themed($key) {
+    @return map-get($theme-map, $key);
+}
+
+//获取背景颜色
+@mixin background_color($color) {
+    @include themeify {
+        background-color: themed($color) !important;
+    }
+}
+
+//获取字体颜色
+@mixin font_color($color) {
+    @include themeify {
+        color: themed($color) !important;
+    }
+}
+
+//获取icon颜色
+@mixin fill_color($fill) {
+    @include themeify {
+        fill: themed($fill) !important;
+    }
+}
+
+//获取border
+@mixin border($border) {
+    @include themeify {
+        border: themed($border);
+    }
+}
+
+//获取border_color
+@mixin border_color($color) {
+    @include themeify {
+        border-color: themed($color) !important;
+    }
+}
+
+
+//获取box-shadow
+@mixin box_shadow($color) {
+    @include themeify {
+        box-shadow: themed($color);
+    }
+}

src/static/scss/index.scss

@@ -4,5 +4,39 @@
 @import "./colorui.css";
 // public
 @import "./public.scss";
+// sidebar
+@import "./sidebar.scss";
 // iconfont
-@import "@/static/iconfont/iconfont.css";
+@import "@/static/iconfont/iconfont.css";
+
+
+//padding
+.padding-15 {
+    padding: 15px;
+}
+
+//margin
+.margin-top-0 {
+    margin-top: 0px;
+}
+
+.margin-lr-0 {
+    margin-left: 0px;
+    margin-right: 0px
+}
+
+.margin-top-15 {
+    margin-top: 15px
+}
+
+.margin-right-15 {
+    margin-right: 15px;
+}
+
+.margin-bottom-10 {
+    margin-bottom: 10px
+}
+
+.margin-bottom-15 {
+    margin-bottom: 15px
+}

src/static/scss/public.scss

@@ -1,10 +1,3 @@
-//全局背景颜色 开始
-.whiteBackgroundColor {
-  background-color: #ffffff;
-}
-
-//全局背景颜色 结束
-
 /*
  * @日期选择器样式 开始
  */
@@ -44,24 +37,6 @@ th {
  * @日期选择器样式 结束
  */
 
-/*
- * @时间线样式 开始
- */
-#planTimeline {
-  padding: 0px 15px;
-}
-
-#planTimeline1 {
-  padding: 0px 15px;
-
-  .u-steps-item__wrapper {
-    background-color: #f1f1f1;
-  }
-}
-
-/*
- * @时间线样式 结束
- */
 
 /*
  * @抽屉样式 开始

src/static/scss/sidebar.scss

@@ -0,0 +1,117 @@
+@import './handle.scss';
+
+//全局按钮样式修改
+uni-button[type='primary'] {
+    @include font_color('fontColor');
+    @include background_color('backgroundColor');
+    border-width: 0px !important;
+}
+
+.u-button--primary {
+    @include background_color('backgroundColor');
+    @include border_color('backgroundColor');
+}
+
+//全局背景样式修改
+.theme-back {
+    @include background_color('backgroundColor');
+}
+
+/*
+ * 页面样式 开始
+ * @/pages/xunJian/plan/components/siteDetails.vue
+ * @/pages/xunJian/plan/components/content.vue
+ */
+
+.siteHeader {
+    .u-icon__icon {
+        font-size: 14px !important;
+        line-height: 14px !important;
+        margin: auto !important;
+    }
+}
+
+/*
+ * 页面样式 结束
+ * @/pages/xunJian/plan/components/siteDetails.vue
+ * @/pages/xunJian/plan/components/content.vue
+ */
+
+
+//标题栏样式 开始
+.uni-section .uni-section-header {
+    padding: 0 !important;
+
+    .uni-section-header__decoration {
+        height: 14px !important;
+        @include background_color('backgroundColor');
+    }
+
+    .uni-section-header__content {
+        uni-text {
+            font-size: 15px !important;
+            // color: #149eff !important;
+            @include font_color('backgroundColor');
+            font-weight: 600 !important;
+        }
+    }
+}
+
+//标题栏样式 结束
+
+
+//复选框样式 开始
+.u-checkbox-group {}
+
+//复选框样式 结束
+
+
+//日历样式 开始
+.uni-calendar {
+    .uni-calendar__content {
+        .uni-calendar__box {
+            .uni-calendar__weeks {
+                .uni-calendar__weeks-item {
+                    .uni-calendar-item--isDay-text {
+                        @include font_color('backgroundColor');
+                    }
+
+                    .uni-calendar-item--isDay {
+                        @include background_color('backgroundColor');
+                        @include font_color('fontColor');
+                    }
+
+                    .uni-calendar-item--checked {
+                        @include background_color('backgroundColor');
+                    }
+                }
+            }
+        }
+    }
+}
+
+//日历样式 结束
+
+.deviceManage {
+    @include background_color('backgroundColor');
+    @include font_color('fontColor');
+}
+
+//自定义头部导航样式 开始
+.u-navbar {
+    .u-navbar--fixed {
+        .u-navbar__content {
+            @include background_color('backgroundColor');
+        }
+    }
+}
+
+//自定义头部导航样式 结束
+
+
+//iconfont样式 开始
+.menu-list .menu-item-box .menu-icon {
+    @include font_color('backgroundColor');
+}
+
+//iconfont样式 结束

src/static/scss/themes.scss

@@ -0,0 +1,60 @@
+$themes: (
+  theme-rf: ( //浅蓝-主题
+    fontColor:#fff,
+    backgroundColor:#149eff,
+
+  ),
+  theme-blue: ( //海蓝-主题
+    fontColor:#fff,
+    backgroundColor:#0081ff,
+  ),
+  theme-red: ( //嫣红-主题
+    fontColor:#fff,
+    backgroundColor:#e54d42,
+  ),
+  theme-orange: ( //桔橙-主题
+    fontColor:#fff,
+    backgroundColor:#f37b1d,
+  ),
+  theme-yellow: ( //明黄-主题
+    fontColor:#fff,
+    backgroundColor:#fbbd08,
+  ),
+  theme-olive: ( //橄榄-主题
+    fontColor:#fff,
+    backgroundColor:#8dc63f,
+  ),
+  theme-green: ( //森绿-主题
+    fontColor:#fff,
+    backgroundColor:#39b54a,
+  ),
+  theme-cyan: ( //天青-主题
+    fontColor:#fff,
+    backgroundColor:#1cbbb4,
+  ),
+  theme-purple: ( //姹紫-主题
+    fontColor:#fff,
+    backgroundColor:#6739b6,
+  ),
+  theme-mauve: ( //木槿-主题
+    fontColor:#fff,
+    backgroundColor:#9c26b0,
+  ),
+  theme-pink: ( //桃粉-主题
+    fontColor:#fff,
+    backgroundColor:#e03997,
+  ),
+  theme-brown: ( //棕褐-主题
+    fontColor:#fff,
+    backgroundColor:#a5673f,
+  ),
+  theme-grey: ( //玄灰-主题
+    fontColor:#fff,
+    backgroundColor:#8799a3,
+  ),
+  theme-black: ( //墨黑-主题
+    fontColor:#fff,
+    backgroundColor:#333333,
+  ),
+
+);

src/store/modules/setting.js

@@ -1,18 +1,25 @@
 
+import { defineStore } from "pinia";
 import storage from "@/utils/storage";
 import constant from "@/utils/constant";
-import { defineStore } from "pinia";
+import modal from "@/plugins/modal.plugins.js";
+import tab from "@/plugins/tab.plugins.js";
+import setting from "@/plugins/setting.plugins.js";
+import { useStores } from "@/store/modules/index";
+
+import { uploadAvatar, updateUserProfile } from "@/api/system/user";
 
 const settingStore = defineStore("setting", {
     state: () => ({
         currentSize: "",//APP缓存
 
         themeColor: storage.get(constant.themeColor),//主题
-        tabbarValue: 0,
+        tabbarValue: "/pages/index",//tabbar切换值
 
-        barHeight: 0,
-        StatusBar: 0,
-        barHightTop: "",
+        barHeight: 0,//微信小程序顶部安全距离
+        StatusBar: 0,//app顶部安全距离
+        tabBarHeight: 0,//app底部安全距离
+        barHightTop: "",//app头部计算距离
 
     }),
     persist: {
@@ -65,6 +72,7 @@ const settingStore = defineStore("setting", {
             let systemInfo = uni.getSystemInfoSync();
             var statusBarHeight = systemInfo.statusBarHeight
             this.StatusBar = statusBarHeight
+            this.tabBarHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom
             this.barHightTop = this.StatusBar ? this.StatusBar + 44 + 'px' : '44px'
 
             //#ifdef MP
@@ -72,10 +80,113 @@ const settingStore = defineStore("setting", {
             let CustomBar = custom.bottom + custom.top - systemInfo.statusBarHeight;
             this.barHeight = CustomBar || 0
             //#endif
+        },
+
+        /**
+         * @常见问题
+         */
+        handleHelp() {
+            tab.navigateTo("/pages/mine/help/index");
+        },
+
+        /**
+         * @我的信息
+         */
+        handleToEditInfo() {
+            tab.navigateTo("/pages/mine/info/index");
+        },
+
+        /**
+         * @关于我们
+         */
+        handleAbout() {
+            tab.navigateTo("/pages/mine/about/index");
+        },
+
+        /**
+         * @清理缓存
+         */
+        handleCleanTmp() {
+            // #ifdef H5
+            modal.showToast("H5暂不支持此功能");
+            // #endif
+
+            // #ifdef APP-PLUS
+            setting.clearCache();
+            // #endif
+        },
+
+        /**
+         * @检查更新
+         */
+        handleToUpgrade() {
+            modal.showToast("模块建设中~");
+        },
+
+        /**
+         * @账号与安全
+         */
+        handleToSecure() {
+            tab.navigateTo("/pages/mine/secure/index");
+        },
+
+
+        /**
+         * @设置
+         */
+        handleSetting() {
+            tab.navigateTo("/pages/mine/setting/index");
+        },
+
+
+
+        /**
+         * @退出登录
+         */
+        handleLogout() {
+            const useStore = useStores();
+            modal.confirm("确定注销并退出系统吗？").then(() => {
+                useStore.LogOut().then(() => {
+                    tab.reLaunch("/pages/index");
+                });
+            });
+        },
 
-            console.log(systemInfo)
+
+        /**
+         * @点击头像
+         */
+        handleToAvatar(type) {
+            if (type == 1) {
+                uni.chooseImage({
+                    count: 1, //默认9
+                    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
+                    sourceType: ["album", "camera"], //从相册选择、摄像头
+                    success: function (res) {
+                        this.uploadApi(res);
+                    },
+                });
+            } else if (type == 2) {
+                tab.navigateTo("/pages/mine/avatar/index");
+            }
+        },
+
+        /**
+         * @upload上传头像
+         * @api接口请求
+         */
+        uploadApi(res) {
+            const useStore = useStores();
+            let data = { name: "file", filePath: res.tempFilePaths[0] };
+            uploadAvatar(data).then((response) => {
+                useStore.$state.avatar = response.data.url;
+                updateUserProfile({
+                    avatar: response.data.url,
+                }).then(() => { });
+            });
         },
 
+
         SET_THEMECOLOR(themeColor) {
             // storage.get(constant.name)
             this.themeColor = themeColor;

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import storage from "@/utils/storage";
 import constant from "@/utils/constant";
 import { login, logout, getInfo, getMobileTenantConfig } from "@/api/login";
+import { getUserProfile } from "@/api/system/user";
 import { getToken, setToken, removeToken } from "@/utils/auth";
 import { defineStore } from "pinia";
 import modal from "@/plugins/modal.plugins.js";
@@ -19,6 +20,11 @@ const useStores = defineStore("useStores", {
     loginBg: storage.get(constant.loginBackUrl),
     loginLogo: storage.get(constant.loginLogo),
     tenantId: storage.get(constant.tenantId),
+
+    user: {},
+    userArr: {},
+    postGroup: "", //岗位
+    roleGroup: "", //角色
   }),
   persist: {
     // 自定义数据持久化方式
@@ -67,6 +73,16 @@ const useStores = defineStore("useStores", {
       });
     },
 
+    // 获取用户信息
+    getUser() {
+      getUserProfile().then((response) => {
+        this.user = response.data.user;
+        this.userArr = JSON.parse(JSON.stringify(response.data.user));
+        this.postGroup = response.postGroup;
+        this.roleGroup = response.roleGroup;
+      });
+    },
+
     // 获取用户信息
     GetInfo() {
       return new Promise((resolve, reject) => {
@@ -81,7 +97,7 @@ const useStores = defineStore("useStores", {
               this.SET_ROLES(["ROLE_DEFAULT"]);
             }
 
-            this.SET_NAME(data.user.userName);
+            this.SET_NAME(data.user.nickName);
             this.SET_PHONE(data.user.phonenumber);
             this.SET_AVATAR(data.user.avatar);