feat(mineNavBar): 样式完成

components/mine-navbar/mineNavbar.vue

+<template>
+  <!--自定义头部-->
+  <view class="mine-navbar" :class="{'u-fixed': fixed}">
+    <u-navbar
+        :title="title"
+        :title-width="titleWidth"
+        :title-style="titleStyle"
+        :auto-back="autoBack"
+        :fixed="fixed"
+        :left-icon="leftIcon"
+        :left-text="leftText"
+        :left-icon-color="leftIconColor"
+        placeholder
+        bg-color="rgba(0, 0, 0, 0)"
+        @leftClick="$emit('leftClick', $event)"
+        @rightClick="$emit('rightClick', $event)">
+    </u-navbar>
+    <view class="bar-detail">
+      <view class="title">东风本田发动机有限公司</view>
+      <view class="inof-card">
+        <img  class="user-img" :src="headImg" />
+        <view class="use-info">
+          <view class="user-name">
+            <text class="name-text">张三</text>
+            <text class="name-text">·</text>
+            <text class="name-text">品质担当</text>
+          </view>
+          <view class="dept">
+            <text>发动机装配科</text>
+          </view>
+        </view>
+        <img class="qr-icon" :src="qrImg" @click="viewCode" />
+      </view>
+    </view>
+    <!-- 二维码弹出层-->
+    <view>
+      <u-popup :show="showCode" :custom-style="popStyle" mode="center" :round="10" @close="close">
+        <view style="text-align: center; margin: 0 40rpx;">
+          <img  class="user-img-popup" :src="headImg" />
+          <view>
+            <text class="user-title">
+              陈海毅 ｜ 发动机装配科
+            </text>
+          </view>
+          <view>
+            <canvas id="myQrcode" type="2d" style="width: 440rpx; height: 440rpx;" />
+          </view>
+        </view>
+        <view style="position: relative;left: 41%;top: 80rpx;" @click="close">
+          <image
+              :src="iconClose"
+              style="width: 60rpx;height: 60rpx;"
+          />
+        </view>
+      </u-popup>
+    </view>
+  </view>
+</template>
+
+<script>
+import drawQrcode from '../../utils/dist_weapp.qrcode.esm'
+/**
+ * @property {String}      title        导航栏标题，如设置为空字符，将会隐藏标题占位区域
+ * @property {String | Number}  titleWidth      导航栏标题的最大宽度，内容超出会以省略号隐藏
+ * @property {Object | String}  titleStyle      标题的样式，对象或字符串
+ * @property {Boolean}          autoBack      点击左侧区域(返回图标)，是否自动返回上一页（默认 true ）
+ * @property {String}      bgStyle        导航栏背景设置
+ * @property {Boolean}      fixed        导航栏是否固定在顶部 （默认 true ）
+ * @event {Function} leftClick    点击左侧区域
+ * @event {Function} rightClick    点击右侧区域
+ */
+export default {
+  name: "mineNavbar",
+  emits: ['leftClick', 'rightClick'],
+  props: {
+    // 标题内容
+    title: {
+      type: String,
+      default: ''
+    },
+    // 自动回退
+    autoBack: {
+      type: Boolean,
+      default: true
+    },
+    // 标题宽度
+    titleWidth: {
+      type: [String, Number],
+      default: '350rpx'
+    },
+    // navbar高度
+    height: {
+      type: [String, Number],
+      default: '44px'
+    },
+    // 标题样式
+    titleStyle: {
+      type: [String, Object],
+      default: () => ({
+        color: '#fff',
+        fontSize: '36rpx',
+        fontWeight: 500
+      })
+    },
+    // 左侧返回图标颜色
+    leftIconColor: {
+      type: String,
+      default: '#fff'
+    },
+    // 左侧图标
+    leftIcon: {
+      type: String,
+      default: 'arrow-left'
+    },
+    leftText: {
+      type: String,
+      default: ''
+    },
+    // 固定头部
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    // 背景
+    bgStyle: {
+      type: String,
+    }
+  },
+  data() {
+    return {
+      popStyle: {
+        background: 'url("/static/images/popBackground.png") center/contain no-repeat',
+        backgroundColor: 'transparent',
+        width: '600rpx',
+        height: '860rpx'
+      },
+      showCode: false,
+      headImg: require('../../static/images/profile.jpg'),
+      qrImg: require('../../static/images/qrImg.png'),
+      iconClose: require('../../static/images/iconClose.png')
+    }
+  },
+  computed: {
+    totalHeight() {
+      return uni.$u.addUnit(uni.$u.getPx(this.height) + uni.$u.sys().statusBarHeight, 'px')
+    }
+  },
+  onLoad() {
+
+  },
+  created() {
+
+  },
+
+  mounted() {
+
+  },
+  methods: {
+    // 创建二维码
+    createQrcode: function() {
+      var that = this
+      const query = wx.createSelectorQuery()
+      query.select('#myQrcode')
+          .fields({
+            node: true,
+            size: true
+          })
+          .exec((res) => {
+            var canvas = res[0].node
+
+            // 调用方法drawQrcode生成二维码
+            drawQrcode({
+              canvas: canvas,
+              canvasId: 'myQrcode',
+              width: 260,
+              padding: 30,
+              background: '#ffffff',
+              foreground: '#000000',
+              text: that.form.ownersId
+
+            })
+
+            // 获取临时路径（得到之后，想干嘛就干嘛了）
+            wx.canvasToTempFilePath({
+              canvasId: 'myQrcode',
+              canvas: canvas,
+              x: 0,
+              y: 0,
+              width: 260,
+              height: 260,
+              destWidth: 260,
+              destHeight: 260,
+              success(res) {
+                console.log('二维码临时路径：', res.tempFilePath)
+              },
+              fail(res) {
+                console.error(res)
+              }
+            })
+          })
+    },
+    close() {
+      this.showCode = false
+    },
+    // 点击二维码
+    viewCode() {
+      this.createQrcode()
+      this.showCode = true
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mine-navbar {
+  background-clip: border-box;
+  height: 440rpx;
+  background: url("/static/images/top-background.png") center/cover no-repeat;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 11;
+  .bar-detail{
+    margin-top: 78rpx;
+    margin-left: 32rpx;
+    .title{
+      margin-left: 8rpx;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 32rpx;
+      color: #FFFFFF;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+    }
+    .inof-card{
+      margin-top: 26rpx;
+      width: 708rpx;
+      height: 220rpx;
+      background: #FFFFFF;
+      border-radius: 20rpx;
+      display: flex;
+      align-items: center;
+      align-content: center;
+      flex-direction: row;
+      justify-content: space-between;
+      padding: 0 68rpx 0 22rpx;
+      .use-info{
+        .user-name{
+          text{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 500;
+            font-size: 40rpx;
+            color: #0B0B0B;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+        .dept{
+          margin-top: 20rpx;
+          text{
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #999999;
+            line-height: 40rpx;
+            text-align: left;
+            font-style: normal;
+            text-transform: none;
+          }
+        }
+      }
+
+      .user-img{
+        width: 140rpx;
+        height: 144rpx;
+        border-radius: 50%;
+      }
+      .qr-icon{
+        width: 68rpx;
+        height: 68rpx;
+      }
+    }
+  }
+  .user-img-popup{
+    width: 200rpx;
+    height: 200rpx;
+    border-radius: 50%;
+    margin-bottom: 38rpx;
+  }
+  .user-title{
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 40rpx;
+    color: #333399;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+
+.navbar-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: url('https://qf.91isoft.com/cwfile/tmt-pic/pet-app/%E9%A1%B6%E9%83%A8%E8%83%8C%E6%99%AF-img.png') center/cover no-repeat;
+}
+</style>
\ No newline at end of file

pages/mine/index.vue

 <template>
 
   <view class="mine-container">
-    <ya-navbar title="DHEC QMS" :left-icon="null" />
+    <mine-navbar title="DHEC QMS" />
     <scroll-view class="scroll-y" scroll-y style="margin: 30rpx 0 0 0;">
       <view style="height: 16rpx;background: #F0F0F0;" />
       <!--顶部个人信息栏-->
@@ -269,8 +269,9 @@ import { getPetOwners } from '../../api/system/pet'
 import { myAccountList } from '../../api/system/my_account'
 import config from '@/config'
 import { listBaseConfig } from '../../api/system/baseConfig'
-
+import {mineNavbar} from '../../components/mine-navbar/mineNavbar'
 export default {
+  components: { mineNavbar },
   data() {
     return {
       show: false,

permission.js

@@ -6,8 +6,9 @@ import store from '@/store'
 const loginPage = "/pages/login"
 
 // 页面白名单
+// todo 登录对接后将/pages/index去除
 const whiteList = [
-  '/pages/login', '/pages/common/webview/index'
+  '/pages/login', '/pages/common/webview/index', '/pages/index'
 ]
 
 // 检查地址白名单