Identification/components/CustomNavbar.vue

<template>
  <view>
    <!-- 自定义导航栏 -->
    <view class="navBarBox">
      <!-- 状态栏占位 -->
      <view class="statusBar"></view>
      <!-- 真正的导航栏内容 -->
      <view class="navBar" :style="{ min_height: statusBarHeight + 'px'}">
        <view class="button" @click="getMore">更多设置</view>
        <view class="button" @click="toLogin">联机设置</view>
        <view class="button" @click="toOrder">画框预览</view>
        <view class="button" @click="resendData">补发数据</view>
        <view class="button" @click="resume">重新开始</view>
      </view>
    </view>
    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="popup-content">
        <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
          <view v-for="(item,index ) in featuresList" :id=" 'demo' + index + 1 " @click="item.click()"
                class="scroll-view-item" :class="index === featuresList.length - 1 ? 'last-item':'' ">{{
              item.name
            }}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <uni-popup ref="WLANpopup" background-color="#fff" type="center">
      <uni-popup-dialog message="成功消息" :duration="2080" :before-close="true" @close="close"
                        @confirm="dialogInputConfirm"
                        title="wifi热点设置">
        <view style="display: flex; flex-direction: row; margin-bottom: 10px;">
          <span style="font-size:14px;">WIFI名称:</span>
          <input type="text" id="jichu" v-model="WlANname"
                 style="width: calc(68% - 25px); border: 1px solid #c5c5c5; border-radius: 3px; padding: 0 8px; font-size: 12px; ">
        </view>
        <view style="display: flex; flex-direction: row;">
          <span style="font-size:14px;">WIFI密码:</span>
          <input type="text" id="jichu" v-model="WlANpower"
                 style="width: calc(68% - 25px); border: 1px solid #c5c5c5; border-radius: 3px; padding: 0 8px; font-size: 12px; ">
        </view>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 状态栏高度
      statusBarHeight: 0,
      WlANname: '',
      WlANpower: '',
      // 导航栏高度
      navBarHeight: 82 + 11,
      featuresList: [
        {
          name: '关闭补光灯',
          click: () => {
            console.log('关闭补光灯')
          }
        },
        {
          name: '开启补光灯',
          click: () => {
            console.log('开启补光灯')
          }
        },
        {
          name: '调试模式',
          click: () => {
            console.log('调试模式')
          }
        },
        {
          name: '自动勾框',
          click: () => {
            console.log('自动勾框')
          }
        },
        {
          name: '远程WIFI设置',
          click: () => {
            console.log('远程WIFI设置')
            this.$refs.WLANpopup.open()

          }
        },
        {
          name: 'SL wifi设置',
          click: () => {
            console.log('SL wifi设置')
          }
        },
        {
          name: '通知公告',
          click: () => {
            console.log('通知公告')
          }
        },
        {
          name: '密码修改',
          click: () => {
            console.log('密码修改')
          }
        },
        {
          name: '清除缓存',
          click: () => {
            console.log('清除缓存')
          }
        },
        {
          name: '退出登录',
          click: () => {
            console.log('退出登录')
          }
        },
      ]
    };
  },
  props: {},
  //第一次加载时调用
  created() {
    //获取手机状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
  },
  methods: {
    toLogin() {
      //跳转传参示例
      this.$Router.push({
        path: '/pages/login/login',
      });
    },
    toOrder() {
      //跳转传参示例
      this.$Router.push({
        path: '/pages/order/order',
      });
    },
    getMore() {
      this.$refs.popup.open('left')
    },
    close() {
      this.$refs.WLANpopup.close()
    },
    resendData() {
      console.log('补发数据')
    },
    resume() {
      console.log('重新开始')
    },
    dialogInputConfirm(val) {
      uni.showLoading({
        title: '3秒后会关闭'
      })
      console.log(this.WlANname, this.WlANpower)
      setTimeout(() => {
        uni.hideLoading()
        console.log(val)
        this.value = val
        // 关闭窗口后，恢复默认内容
        this.$refs.WLANpopup.close()
      }, 3000)
    },
  }
}
</script>

<style>
.navBarBox {
  width: 100vw;
}

.navBarBox .navBar {
  padding: 10rpx 50rpx;
  padding-bottom: 8rpx;

  color: white;
  width: 100%;
  display: flex;
  background: black;
  flex-direction: row;
  align-items: center;
}

.navBarBox .navBar .logo-image {
  width: 16rpx;
  height: 16rpx;
  margin-right: 10rpx;
}

.button {
  padding: 4rpx 30rpx;
  border-radius: 5px;
  font-size: 16px;
  margin: 0 10px;
  background: #910eea;
}

.button:hover {
  background: #910eea;
}

.popup-content {
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #fff;
}

.scroll-Y {
  height: 100vh;
}

.scroll-view-item {
  height: 50rpx;
  text-align: center;
  font-size: 15rpx;
  padding: 15px;
}

.scroll-view-item:active {
  height: 50rpx;
  color: white;
  background-color: rgba(43, 133, 228, 0.74);
  text-align: center;
  font-size: 15rpx;
}

.last-item {
  padding-top: 20rpx;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

</style>