bonus-material-app/src/pages/index/index.vue

<template>
  <view class="page-bg">
    <view class="upper-user">
      <view class="user-lef">
        <image src="/src/static/bg1.jpg" mode="" />
      </view>
      <view class="user-rig">
        <view>你好！{{ username }}</view>
        <view>欢迎使用材料站管理系统</view>
      </view>
    </view>
    <view class="sliders">
      <view>
        <h2>{{ todayDatas.dayLeaseNum || 0 }}</h2>
        <span>当日领料</span>
      </view>
      <view>
        <h2>{{ todayDatas.dayBackNum || 0 }}</h2>
        <span>当日退料</span>
      </view>
      <view>
        <h2>{{ todayDatas.dayInputNum || 0 }}</h2>
        <span>当日入库</span>
      </view>
      <view>
        <h2>{{ todayDatas.dayOutNum || 0 }}</h2>
        <span>当日出库</span>
      </view>
    </view>
    <view class="sections">
      <view v-for="(part, index) in isUsingList" :key="index" @click="jumpUrl(part.iconMark)">
        <image :src="`../../static/${part.iconMark}.png`" mode="" />
        <span>{{ part.iconName }}</span>
      </view>
    </view>
    <h4 style="width: 90%; margin: 3vh auto">业务统计</h4>
    <view class="wait-do">
      <view class="llsp">
        <h4>{{ waitList.leaseNum || 0 }}</h4>
        <h5>工器具领料</h5>
      </view>
      <view class="tlsp">
        <h4>{{ waitList.backNum || 0 }}</h4>
        <h5>工器具退料</h5>
      </view>
      <view class="bfsh">
        <h4>{{ waitList.scrapNum || 0 }}</h4>
        <h5>材料退料</h5>
      </view>
      <view class="sysh">
        <h4>{{ waitList.trialNum || 0 }}</h4>
        <h5>材料领料</h5>
      </view>
    </view>
    <!-- <h4
      style="
        width: 90%;
        margin: 3vh auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <span>通知公告</span>
      <text @click="seeMore" style="color: #5297ff; font-weight: normal; font-size: 12px"
        >查看更多>></text
      >
    </h4>
    <view
      class="single-notice"
      v-for="(notice, index) in noticeList"
      :key="index"
      @click="noticeDetail(notice.noticeId)"
    >
      <view class="notice-lef">
        <image src="/src/static/notice.png" mode="" />
      </view>
      <view class="notice-rig">
        <h4>{{ notice.noticeTitle }}</h4>
        <h5>{{ notice.createTime }}</h5>
      </view>
    </view>
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup">
        <view class="pop-top">
          <h4>公告({{ unreadIndex.value + 1 }}/{{ unreadList.value.length }})</h4>
          <uni-icons
            style="color: #aaaaaa; font-weight: bold"
            type="closeempty"
            @click="closePopup"
          />
        </view>
        <view
          class="unread-notice"
          v-for="(list, index) in unreadList"
          :key="index"
          v-show="index == unreadIndex"
        >
          <view class="tit">
            {{ list.noticeTitle }}
          </view>
          <view class="info">
            <view>发布人：{{ list.createBy }}</view>
            <view>发布时间：{{ list.createTime }}</view>
            <view>公告内容：{{ list.noticeContent }}</view>
          </view>
          <view
            class="read-one"
            v-show="unreadIndex.value < unreadList.value.length - 1"
            @click="readOneNotice(list.noticeId)"
          >
            我知道了
          </view>
        </view>
      </view>
    </uni-popup> -->
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { onShow, onNavigationBarButtonTap } from '@dcloudio/uni-app'

const { proxy } = getCurrentInstance()
const popup = ref(null)

const showLoading = ref(false)
const username = ref(uni.getStorageSync('userInfo').username)
const noticeList = ref([])
const todayDatas = reactive({
  dayLeaseNum: '',
  dayBackNum: '',
  dayInputNum: '',
  dayBackNum: '',
  dayOutNum: '',
})
const waitList = reactive({
  lldsp: '',
  tldsp: '',
  bfdsh: '',
  sydsh: '',
  leaseNum: '',
  backNum: '',
  scrapNum: '',
  trialNum: '',
})
const isUsingList = ref([
  // { iconMark: 'materialsLease', iconName: '材料领料' },
  // { iconMark: 'materialsBack', iconName: '材料退料' },
  { iconMark: 'toolsLease', iconName: '工器具领料' },
  { iconMark: 'toolsOut', iconName: '工器具出库' },
  { iconMark: 'toolsBack', iconName: '工器具退料' },
])
const percent = ref('')
const unreadList = ref([])
const unreadIndex = ref(0)
const store = ref([])

function seeMore() {
  uni.navigateTo({
    url: '/pages/moreNotice/moreNotice',
  })
}
function noticeDetail(id) {
  uni.navigateTo({
    url: `/pages/noticeDetail/noticeDetail?noticeId=${id}`,
  })
}
function jumpUrl(path) {
  if (path == 'toolsOut') {
    const params = {
      isOut: true,
      isNew: 0,
    }
    uni.navigateTo({
      url: '/pages/toolsLease/toolsLease?params=' + JSON.stringify(params),
    })
  } else {
    uni.navigateTo({
      url: `/pages/${path}/${path}`,
    })
  }
}
function extractTextFromHTML(htmlString) {
  return htmlString.replace(/<[^>]*>/g, '')
}
function openPopup() {
  popup.value && popup.value.open()
}
function closePopup() {
  const noticeArr = unreadList.value.map((item) => item.noticeId)
  uploadUnNotice(noticeArr)
  popup.value && popup.value.close()
}
function readOneNotice(noticeId) {
  uploadUnNotice([noticeId])
  unreadIndex.value++
}
function uploadUnNotice(arr) {
  proxy.$api.index
    .uploadNotice({
      noticeId: arr,
      userId: uni.getStorageSync('userInfo').userid,
    })
    .then((res) => {
      // 可根据需要处理
    })
    .catch((err) => {
      // 可根据需要处理
    })
}

// 页面显示时获取数据
onShow(() => {})

// 顶部按钮事件
onNavigationBarButtonTap((e) => {
  if (e.text == '权限') {
    uni.navigateTo({
      url: '/pages/authManage/authManage',
    })
  } else if (e.text == '扫一扫') {
    uni.scanCode({
      success: (res) => {
        const fixedRes = res.result.split('=')[1]
        uni.navigateTo({
          url: `/pages/indexScan/indexScan?scan=${fixedRes}`,
        })
      },
    })
  }
})
</script>

<style lang="scss" scoped>
.page-bg {
  background: url('../../static/bgd.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
}
.upper-user {
  width: 85%;
  /* margin: 8vh auto; */
  margin-bottom: 0;
  box-sizing: border-box;
  padding: 15rpx;
  padding-top: 8vh;
  display: flex;
  .user-lef {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .user-rig {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding-left: 20rpx;
    view {
      width: 100%;
      color: #fff;
    }
    view:first-child {
      font-size: 20px;
    }
    view:last-child {
      font-size: 14px;
      letter-spacing: 6rpx;
    }
  }
}
.sliders {
  width: 85%;
  /* height: 5vh; */
  margin: 4vh auto;
  margin-bottom: 2vh;
  border-radius: 15rpx 15rpx 0 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  border: 1px solid #b3d3ff;
  padding: 1.3vh 0;
  display: flex;
  view {
    width: 25%;
    height: 50px;
    border-right: 1px solid #cde2ff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    h2 {
      font-size: 22px;
    }
    span {
      font-size: 12px;
    }
  }
  view:last-child {
    border-right: none;
  }
}
.sections {
  width: 90%;
  margin: 15rpx auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-top: 2vh;
  view {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2vh;
    image {
      width: 70px;
      height: 70px;
      margin-bottom: 10rpx;
    }
    span {
      font-size: 20rpx;
    }
  }
}
.wait-do {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  view {
    width: 48%;
    height: 13vh;
    margin-bottom: 15rpx;
    border-radius: 15rpx;
    box-sizing: border-box;
    padding: 25rpx;
    h4 {
      margin-bottom: 5rpx;
      font-size: 22px;
    }
    h5 {
      font-weight: normal;
      font-size: 14px;
    }
  }
  .llsp {
    background: url('../../static/llsp.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .tlsp {
    background: url('../../static/tlsp.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .bfsh {
    background: url('../../static/bfsh.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .sysh {
    background: url('../../static/sysh.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.single-notice {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #dee3ea;
  box-sizing: border-box;
  padding: 20rpx 5%;
  display: flex;
  background-color: #fff;
  .notice-lef {
    width: 12%;
    height: 5.5vh;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .notice-rig {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding-left: 20rpx;
    h4 {
      font-size: 14px;
    }
    h5 {
      font-size: 12px;
      color: #8f9298;
      font-weight: normal;
    }
  }
}
.popup {
  width: 80vw;
  height: 90vh;
  background-color: #fff;
  border-radius: 15rpx;
  overflow-y: auto;
  background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
  .pop-top {
    width: 100%;
    height: 5vh;
    box-sizing: border-box;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .unread-notice {
    width: 85%;
    margin: 40rpx auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tit {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .info {
      width: 100%;
      view {
        margin-bottom: 15rpx;
      }
      view:last-child {
        margin-bottom: 0;
      }
    }
    .read-one {
      width: 40%;
      margin: 40rpx auto;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-radius: 15rpx;
      padding: 10rpx 0;
      background-color: #3788ff;
      color: #fff;
    }
  }
}
</style>