tabbar逻辑修改/部分页面样式完善

src/App.vue

@@ -41,7 +41,10 @@ watchEffect(() => {
 
 onLaunch(() => {
   console.log("App Launch");
+
+  // #ifdef APP-PLUS || H5
   uni.hideTabBar(); //隐藏自带tabbar
+  // #endif
 
   // #ifdef APP-PLUS
   plus.screen.lockOrientation("portrait-primary"); //设置不可横屏

src/api/mine/info.js

@@ -6,7 +6,7 @@ import request from "@/utils/request";
  */
 export function getKnowledgeBaseList(param) {
   return request({
-    url: "KnowledgeBase/getKnowledgeBaseList",
+    url: "/KnowledgeBase/getKnowledgeBaseList",
     method: "GET",
     data: param,
   });
@@ -17,7 +17,7 @@ export function getKnowledgeBaseList(param) {
  */
 export function getKnowledgeBaseDetails(param) {
   return request({
-    url: "KnowledgeBase/getKnowledgeBaseDetails",
+    url: "/KnowledgeBase/getKnowledgeBaseDetails",
     method: "GET",
     data: param,
   });

src/components/oa-tabbar/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <u-tabbar :value="proxy.$settingStore.tabbarValue" @change="tabbarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :activeColor="proxy.$settingStore.themeColor.color">
-    <u-tabbar-item :text="tab.text" :name="tab.pagePath" v-for="(tab, index) in tabbarList" :key="index" :dot="tab.dot">
+  <u-tabbar :value="tabbarValue" @change="tabbarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :activeColor="proxy.$settingStore.themeColor.color">
+    <u-tabbar-item :text="tab.text" v-for="(tab, index) in tabbarList" :key="index" :dot="tab.dot">
       <template #active-icon>
         <image style="width: 24px; height: 24px" :src="proxy.$settingStore.themeColor.tabList[index]"></image>
       </template>
@@ -12,11 +12,18 @@
 </template>
 <script setup>
 import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
-import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs } from "vue";
 
 const { proxy } = getCurrentInstance();
 
-const props = defineProps({});
+const props = defineProps({
+  tabbarValue: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const { tabbarValue } = toRefs(props);
 
 const tabbarList = ref([
   {
@@ -49,8 +56,7 @@ const tabbarList = ref([
 ]);
 
 function tabbarChange(e) {
-  proxy.$settingStore.tabbarValue = e;
-  proxy.$tab.switchTab(e);
+  proxy.$tab.switchTab(tabbarList.value[e].pagePath);
 }
 
 onLoad((option) => {});

src/config.js

@@ -29,7 +29,7 @@ export default {
       {
         title: "用户服务协议",
         content: "暂无数据",
-        url: "https://ruoyi.vip/protocol.html",
+        url: "http://file.usky.cn/statics/protocol.html",
       },
       {
         title: "隐私政策",

src/manifest.json

@@ -2,8 +2,8 @@
     "name" : "综合智慧云",
     "appid" : "__UNI__36DE3A0",
     "description" : "综合智慧云",
-    "versionName" : "2.0.2",
-    "versionCode" : 4,
+    "versionName" : "2.0.3",
+    "versionCode" : 5,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

src/pages.json

@@ -4,7 +4,7 @@
       "path": "pages/index",
       "style": {
         "navigationStyle": "custom",
-        "navigationBarTitleText": "",
+        "navigationBarTitleText": "工作台",
         "app-plus": {
           "bounce": "none",
           "titleNView": false
@@ -144,12 +144,11 @@
         {
           "path": "/avatar/index",
           "style": {
-            "navigationBarTitleText": "修改头像",
-            "navigationStyle": "custom",
-            "app-plus": {
-              "bounce": "none",
-              "titleNView": false
-            }
+            "navigationBarTitleText": "修改头像"
+            // "app-plus": {
+            //   "bounce": "none",
+            //   "titleNView": false
+            // }
           }
         },
         {

src/pages/info/fireBase/fireBase.vue

@@ -28,12 +28,14 @@
 
 <script setup>
 import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
-import { ref, onMounted, inject, shallowRef, reactive } from "vue";
+import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
 
 import { getKnowledgeBaseList } from "@/api/mine/info.js";
 
 const getData = ref([]);
 
+const { proxy } = getCurrentInstance();
+
 // 列表数据请求
 function getFireBaseList(params = {}) {
   getKnowledgeBaseList(params).then((res) => {
@@ -45,14 +47,14 @@ function getFireBaseList(params = {}) {
 // 页面跳转
 
 function goDetail(item) {
-  uni.navigateTo({
-    url: "/pages/info/fireBashDetail/fireBashDetail?id=" + item.id + "&title=" + item.title,
-    success: (res) => {},
-    fail: () => {},
-    complete: () => {},
-  });
+  proxy.$tab.navigateTo("/pages/info/fireBashDetail/fireBashDetail?id=" + item.id + "&title=" + item.title);
 }
 
+onShow(() => {
+  //调用系统主题颜色
+  proxy.$settingStore.systemThemeColor([1]);
+});
+
 onLoad((option) => {
   getFireBaseList({ company_code: uni.getStorageSync("selectedCode") });
 });

src/pages/info/info.vue

@@ -37,11 +37,13 @@
         <view class="uni-content">
           <view class="uni-item">
             <view class="uni-item-cont text-dfl" style="color: #000000">消防知识库</view>
-            <view class="uni-item-right text-sm" style="color: #666666">5月15日</view>
+            <view class="uni-item-right text-sm" style="color: #909399">5月15日</view>
           </view>
           <view class="uni-item" style="display: flex">
-            <view class="uni-item-cont text-df" style="color: #666666">您收到一条最新消息，请及时查看</view>
-            <view class="uni-item-right text-df" style="color: #666666">1</view>
+            <view class="uni-item-cont text-df" style="color: #909399">您收到一条最新消息，请及时查看</view>
+            <view class="uni-item-right text-df" style="margin: auto 0">
+              <u-badge numberType="overflow" max="99" :value="1"></u-badge>
+            </view>
           </view>
         </view>
       </view>
@@ -66,7 +68,7 @@
     </view>
   </scroll-view>
 
-  <oa-tabbar></oa-tabbar>
+  <oa-tabbar :tabbarValue="1"></oa-tabbar>
 </template>
 
 <script setup>

src/pages/login.vue

@@ -267,7 +267,6 @@ function login(data) {
     /** 获取用户信息 */
     proxy.$modal.closeLoading();
     useStore.GetInfo().then((res) => {
-      proxy.$settingStore.tabbarValue = "/pages/index";
       proxy.$tab.reLaunch("/pages/index");
     });
   });
@@ -276,12 +275,14 @@ function login(data) {
 // 用户协议
 function handleUserAgrement() {
   let site = getApp().globalData.config.appInfo.agreements[0];
-  proxy.$tab.navigateTo(`/pages/common/textview/index1?title=${site.title}&content=${site.content}`);
+  proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
+  // proxy.$tab.navigateTo(`/pages/common/textview/index1?title=${site.title}&content=${site.content}`);
 }
 // 隐私协议
 function handlePrivacy() {
   let site = getApp().globalData.config.appInfo.agreements[1];
-  proxy.$tab.navigateTo(`/pages/common/textview/index1?title=${site.title}&content=${site.content}`);
+  proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
+  // proxy.$tab.navigateTo(`/pages/common/textview/index1?title=${site.title}&content=${site.content}`);
 }
 
 /**

src/pages/mine/avatar/index.vue

@@ -1,18 +1,10 @@
 <template>
-  <view class="avatar-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="avatar-container" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
     <view class="uni-content-header"></view>
     <view class="page-body uni-content-info">
       <view class="cropper-content">
-        <view ref="uniCorpper" v-if="isShowImg" class="uni-corpper" :style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
-          <view class="uni-corpper-content" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px;left:' + cropperL + 'px;top:' + cropperT + 'px'">
+        <view ref="uniCorpper" v-if="isShowImg" class="uni-corpper" :style="'display: flex;' + 'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;'">
+          <view class="uni-corpper-content" :style="'margin: auto;' + 'width:' + cropperW + 'px;height:' + cropperH + 'px;left:' + cropperL + 'px;top:' + cropperT + 'px'">
             <image :src="imageSrc" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px'"></image>
             <view
               class="uni-corpper-crop-box"
@@ -42,9 +34,13 @@
           </view>
         </view>
       </view>
-      <view class="padding-sm">
-        <button type="default" class="margin-top-sm round text-dfl" @click="getImage" style="border: 1px rgb(0, 0, 0, 0.1) solid">选择头像</button>
-        <button type="primary" class="margin-top-sm round text-dfl" @click="getImageInfo">提交</button>
+
+      <view class="app-position-fixed">
+        <view class="app-flex">
+          <u-button class="app-buttom" style="margin-right: 15px" @click="getImage" shape="circle"> 选择头像 </u-button>
+
+          <u-button class="app-buttom" type="primary" @click="getImageInfo" shape="circle"> 提交 </u-button>
+        </view>
       </view>
       <canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
     </view>
@@ -66,6 +62,7 @@ const { proxy } = getCurrentInstance();
 const baseUrl = config.baseUrl;
 let sysInfo = uni.getSystemInfoSync();
 let SCREEN_WIDTH = sysInfo.screenWidth;
+let SCREEN_HEIGHT = sysInfo.screenHeight - (proxy.$settingStore.StatusBar + 44);
 let PAGE_X, // 手按下的x位置
   PAGE_Y, // 手按下y的位置
   PR = sysInfo.pixelRatio, // dpi
@@ -92,7 +89,7 @@ const array = reactive({
   isShowImg: false,
   // 初始化的宽高
   cropperInitW: SCREEN_WIDTH,
-  cropperInitH: SCREEN_WIDTH,
+  cropperInitH: SCREEN_HEIGHT,
   // 动态的宽高
   cropperW: SCREEN_WIDTH,
   cropperH: SCREEN_WIDTH,
@@ -157,6 +154,7 @@ function setData(obj) {
  */
 function getImage() {
   uni.chooseImage({
+    sizeType: "original",
     success: function (res) {
       setData({
         imageSrc: res.tempFilePaths[0],
@@ -171,13 +169,36 @@ function loadImage() {
     src: imageSrc.value,
     success: function success(res) {
       IMG_RATIO = 1 / 1;
+
       if (IMG_RATIO >= 1) {
         IMG_REAL_W = SCREEN_WIDTH;
-        IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO;
+        IMG_REAL_H = res.height > SCREEN_HEIGHT ? SCREEN_HEIGHT : res.height;
       } else {
         IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO;
-        IMG_REAL_H = SCREEN_WIDTH;
+        IMG_REAL_H = res.height > SCREEN_HEIGHT ? SCREEN_HEIGHT : res.height;
+      }
+
+      if (res.width == res.height) {
+        IMG_REAL_W = res.width > SCREEN_WIDTH ? SCREEN_WIDTH : res.width; //等比例获取宽度
+        IMG_REAL_H = res.width > SCREEN_WIDTH ? SCREEN_WIDTH : res.width;
       }
+
+      if (res.width > res.height) {
+        IMG_REAL_W = SCREEN_WIDTH; //等比例获取宽度
+        IMG_REAL_H = (SCREEN_WIDTH / res.width) * res.height; //等比例获取高度
+      }
+
+      if (res.width < res.height) {
+        IMG_REAL_W = res.width / (res.height / SCREEN_HEIGHT);
+        IMG_REAL_H = SCREEN_HEIGHT;
+
+        if (IMG_REAL_W > SCREEN_WIDTH) {
+          IMG_REAL_W = SCREEN_WIDTH; //等比例获取宽度
+          IMG_REAL_H = (SCREEN_WIDTH / res.width) * res.height; //等比例获取高度
+          IMG_REAL_H = IMG_REAL_H > SCREEN_HEIGHT ? SCREEN_HEIGHT : IMG_REAL_H;
+        }
+      }
+
       let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H;
       INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange;
       // 根据图片的宽高显示不同的效果   保证图片可以正常显示
@@ -187,8 +208,8 @@ function loadImage() {
         let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
         let cutR = cutL;
         setData({
-          cropperW: SCREEN_WIDTH,
-          cropperH: SCREEN_WIDTH / IMG_RATIO,
+          cropperW: IMG_REAL_W,
+          cropperH: IMG_REAL_H,
           // 初始化left right
           cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
           cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
@@ -210,7 +231,7 @@ function loadImage() {
         let cutB = cutT;
         setData({
           cropperW: SCREEN_WIDTH * IMG_RATIO,
-          cropperH: SCREEN_WIDTH,
+          cropperH: IMG_REAL_H,
           // 初始化left right
           cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
           cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
@@ -305,9 +326,8 @@ function getImageInfo() {
         let data = { name: "file", filePath: res.tempFilePath };
         uploadAvatar(data).then((response) => {
           useStore.$state.avatar = response.data.url;
-          updateUserProfile({
-            avatar: response.data.url,
-          }).then(() => {});
+          useStore.$state.userArr.avatar = response.data.url;
+          updateUserProfile(useStore.$state.userArr).then(() => {});
           uni.showToast({ title: "修改成功", icon: "success" });
           uni.navigateBack();
         });
@@ -364,20 +384,20 @@ function dragMove(e) {
         cutB: CUT_B + dragLength,
       });
       break;
-    case "rightBottom":
-      var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
-      var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;
-
-      if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B;
-      if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R;
-      let cutB = CUT_B + dragLengthY;
-      let cutR = CUT_R + dragLengthX;
-
-      setData({
-        cutB: cutB,
-        cutR: cutR,
-      });
-      break;
+    // case "rightBottom":
+    //   var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO;
+    //   var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO;
+
+    //   if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B;
+    //   if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R;
+    //   let cutB = CUT_B + dragLengthY;
+    //   let cutR = CUT_R + dragLengthX;
+
+    //   setData({
+    //     cutB: cutB,
+    //     cutR: cutR,
+    //   });
+    //   break;
     default:
       break;
   }
@@ -605,8 +625,16 @@ onShow(() => {
   .point-t {
     top: -3rpx;
     left: 50%;
-    margin-left: -3rpx;
+    // margin-left: -3rpx;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
     cursor: n-resize;
+    width: 36rpx;
+    height: 36rpx;
+    background-color: #69f;
+    position: absolute;
+    z-index: 1112;
+    opacity: 1;
   }
 
   .point-tr {
@@ -619,14 +647,8 @@ onShow(() => {
   .point-r {
     top: 50%;
     left: 100%;
-    margin-left: -3rpx;
-    margin-top: -3rpx;
-    cursor: n-resize;
-  }
-
-  .point-rb {
-    left: 100%;
-    top: 100%;
+    // margin-left: -3rpx;
+    // margin-top: -3rpx;
     -webkit-transform: translate3d(-50%, -50%, 0);
     transform: translate3d(-50%, -50%, 0);
     cursor: n-resize;
@@ -638,12 +660,36 @@ onShow(() => {
     opacity: 1;
   }
 
-  .point-b {
-    left: 50%;
+  .point-rb {
+    left: 100%;
     top: 100%;
     margin-left: -3rpx;
     margin-top: -3rpx;
+    // -webkit-transform: translate3d(-50%, -50%, 0);
+    // transform: translate3d(-50%, -50%, 0);
+    cursor: n-resize;
+    // width: 36rpx;
+    // height: 36rpx;
+    // background-color: #69f;
+    // position: absolute;
+    // z-index: 1112;
+    // opacity: 1;
+  }
+
+  .point-b {
+    left: 50%;
+    top: 100%;
+    // margin-left: -3rpx;
+    // margin-top: -3rpx;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
     cursor: n-resize;
+    width: 36rpx;
+    height: 36rpx;
+    background-color: #69f;
+    position: absolute;
+    z-index: 1112;
+    opacity: 1;
   }
 
   .point-bl {
@@ -657,9 +703,17 @@ onShow(() => {
   .point-l {
     left: 0%;
     top: 50%;
-    margin-left: -3rpx;
-    margin-top: -3rpx;
+    // margin-left: -3rpx;
+    // margin-top: -3rpx;
+    -webkit-transform: translate3d(-50%, -50%, 0);
+    transform: translate3d(-50%, -50%, 0);
     cursor: n-resize;
+    width: 36rpx;
+    height: 36rpx;
+    background-color: #69f;
+    position: absolute;
+    z-index: 1112;
+    opacity: 1;
   }
 
   .point-lt {

src/pages/mine/index.vue

@@ -162,7 +162,7 @@
     </view>
   </view>
 
-  <oa-tabbar></oa-tabbar>
+  <oa-tabbar :tabbarValue="2"></oa-tabbar>
 </template>
 
 <script setup>

src/pages/mine/setting/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="setting-container" :style="{ height: `${windowHeight}px` }">
-    <view class="menu-list">
+    <view class="menu-list margin-lr-0">
       <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleToEditInfo()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-user menu-icon"></view>
@@ -9,7 +9,7 @@
       </view>
     </view>
 
-    <view class="menu-list">
+    <view class="menu-list margin-top-0 margin-lr-0">
       <view class="list-cell list-cell-arrow" @click="proxy.$settingStore.handleAbout()">
         <view class="menu-item-box">
           <view class="iconfont ucicon-aixin menu-icon"></view>

src/static/scss/colorui.css

@@ -18,6 +18,7 @@ body {
   font-size: 28upx;
   color: #333333;
   font-family: Helvetica Neue, Helvetica, sans-serif;
+  overflow: hidden;
 }
 
 view,

src/static/scss/index.scss

@@ -4,12 +4,16 @@
 @import "./colorui.css";
 // public
 @import "./public.scss";
-// sidebar
-@import "./sidebar.scss";
 // iconfont
 @import "@/static/iconfont/iconfont.css";
+// sidebar
+@import "./sidebar.scss";
 
 
+.shadow-default {
+    box-shadow: 1px 1px 4px rgb(26 26 26 / 10%)
+}
+
 //padding
 .padding-15 {
     padding: 15px;
@@ -29,6 +33,10 @@
     margin-top: 15px
 }
 
+.margin-left-15 {
+    margin-left: 15px;
+}
+
 .margin-right-15 {
     margin-right: 15px;
 }

src/static/scss/public.scss

@@ -212,6 +212,7 @@ uni-input {
   bottom: 5px;
   //#endif
   padding: 0px 15px 0px 15px;
+  z-index: 50;
 
   .app-buttom {
     width: 100%;
@@ -219,4 +220,52 @@ uni-input {
     font-size: 14px;
     margin-bottom: 15px
   }
+
+  .app-flex {
+    display: flex;
+
+    .app-buttom {
+      width: 50%;
+      height: 40px;
+      font-size: 14px;
+    }
+  }
+}
+
+//公共scroll-view样式
+.scroll-height {
+  //#ifdef H5
+  height: calc(100vh - 44px);
+  //#endif
+
+  //#ifdef APP-PLUS
+  height: calc(100vh - constant(safe-area-inset-top));
+  height: calc(100vh - env(safe-area-inset-top));
+  //#endif
+}
+
+//公共消息通知悬浮窗
+.app-info-notice {
+  position: relative;
+  margin-top: -20px;
+  z-index: 50;
+  padding: 10px;
+
+  .info-title {
+    margin: auto auto auto 0;
+    color: #000000;
+  }
+
+  .info-time {
+    margin: auto 0 auto 0;
+    color: #909399
+  }
+
+  .info-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; //溢出用省略号显示
+
+    color: #909399
+  }
 }

src/store/modules/setting.js

@@ -14,7 +14,6 @@ const settingStore = defineStore("setting", {
         currentSize: "",//APP缓存
 
         themeColor: storage.get(constant.themeColor),//主题
-        tabbarValue: "/pages/index",//tabbar切换值
 
         barHeight: 0,//微信小程序顶部安全距离
         StatusBar: 0,//app顶部安全距离