labsop_h5/src/view/user/index.vue

<template>
  <div class="app-container">
    <header>
      <!-- <img :src="userInfos.avatar" alt="" /> -->
      <van-image
        class="mr10"
        width="100px"
        height="100px"
        round
        :src="userInfos.avatar"
      />
      <div class="content">
        <p class="bold">
          <van-text-ellipsis :content="`${userInfos.nickName}(信用分:${userInfos.creditScore})`" />
          <van-icon
            name="setting"
            size="20"
            @click="onRouterPush('/user/edit')"
          />
        </p>
        <p class="flex justify-between">
          <van-text-ellipsis :content="userInfos.pgName" />
        </p>
        <p>
          <van-text-ellipsis :content="userInfos.deptName" />
        </p>
      </div>
    </header>
    <div class="main">
      <!-- <ul class="links">
        <li @click="onRouterPush('/training')">培训通知</li>
        <li>我的报名</li>
        <li>我的学习</li>
        <li>我的考试</li>
      </ul> -->
      <!-- <ul>
        <li>使用指引</li>
        <li>安全积分:{{ userInfos.creditScore }}分</li>
      </ul> -->
      <div class="card">
        <h4>经费统计</h4>
        <ul class="nav">
          <!-- <li>
            <span>123,000</span>
            <p>账户余额(¥)</p>
          </li> -->
          <li @click="onRouterPush('/my-cash-flow')">
            <span>{{ billInfo.totalFlowCount }}</span>
            <p>费用流水</p>
          </li>
          <li>
            <span>{{ billInfo.currentMonthFee }}</span>
            <p>本月支出</p>
          </li>
          <li>
            <span>{{ billInfo.totalFee }}</span>
            <p>累计支出</p>
          </li>
        </ul>
      </div>
      <div
        class="card"
        @click="showOperatingGuidelines"
      >
        <h4>点击查看操作指引</h4>
      </div>
    </div>
    <footer>
      <!-- <wx-open-subscribe template="-pVpM6TH1oz1cZntEhGzQjmMMODF9tLLzh_1yjjWYSk" @success="handleSubscribe">
        <component :is="'script'" type="text/wxtag-template">
          <button class="w100 ">订阅</button>
        </component>
      </wx-open-subscribe> -->
      <van-button
        class="w100 mt10"
        color="#1cb4fd"
        plain
        @click="onRouterPush('/user/password')"
      >
        修改密码
      </van-button>
      <van-button
        class="w100 mt10"
        @click="signOut"
        type="primary"
      >
        切换账号
      </van-button>
    </footer>

    <van-popup
      position="bottom"
      v-model:show="showPopup"
      :style="{ padding: '20px' }"
    >
      <div class="operation-guide">
        <div class="guide-header">
          <h3>操作指引</h3>
          <van-icon
            name="cross"
            @click="showPopup = false"
          />
        </div>

        <div class="steps-container">
          <div
            v-for="(item, index) in handleStepList"
            :key="item.step"
            class="step-item"
            :class="{ 'last-step': index === handleStepList.length - 1 }"
          >
            <div class="step-number-wrapper">
              <div class="step-number">{{ item.step }}</div>
              <div
                v-if="index < handleStepList.length - 1"
                class="step-line"
              ></div>
            </div>

            <div class="step-content">
              <h4 class="step-title">{{ item.title }}</h4>
              <p class="step-desc">{{ item.desc }}</p>
              <!-- <van-button 
                v-if="item.btn" 
                size="small" 
                type="primary" 
                class="step-btn"
                @click="handleStepAction(item)"
              >
                {{ item.btn }}
              </van-button> -->
            </div>
          </div>
        </div>

        <div class="guide-footer">
          <van-icon name="info-o" />
          <span>请按照步骤顺序完成操作</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { storeToRefs } from 'pinia'
  import to from 'await-to-js'
  import { showConfirmDialog } from 'vant'
  import { useRouter } from 'vue-router'

  import { useUserInfo } from '/@/stores/userInfo'
  import { Local } from '/@/utils/storage'
  import { useBillApi } from '/@/api/instr/finance/bill'

  const billApi = useBillApi()

  const router = useRouter()
  const storesUseUserInfo = useUserInfo()
  const { userInfos, sdkConfig, openId } = storeToRefs(storesUseUserInfo)

  const showPopup = ref<boolean>(false)
  const billInfo = ref<{
    totalFlowCount: number
    currentMonthFee: number
    totalFee: number
  }>({
    totalFlowCount: 0,
    currentMonthFee: 0,
    totalFee: 0,
  })

  const handleStepList = ref([
    {
      title: '第一步：入室培训和考试',
      desc: '请先完成入室必要培训，掌握安全操作知识，并通过考试',
      btn: '培训报名',
      step: 1,
    },
    {
      title: '第二步：提交入室申请',
      desc: '在线完成入室前的培训，掌握必要的安全操作知识，并通过考试',
      btn: '前往提交',
      step: 2,
    },
    {
      title: '第三步：上传入室资料',
      desc: '整理相关凭证并将入室资料上传到系统中',
      step: 3,
    },
    {
      title: '第四步：等待审核和房间分配',
      desc: '由平台老师进行审核，通过后分配操作室',
      step: 4,
    },
  ])

  const onRouterPush = (val: string) => {
    router.push(val)
  }
  const signOut = () => {
    showConfirmDialog({
      message: '确认切换账号?',
    }).then(() => {
      Local.remove('token')
      window.location.reload()
    })
  }
  const handleSubscribe = (errMsg: any, subscribeDetails: any) => {
    console.log(errMsg, subscribeDetails)
  }

  const showOperatingGuidelines = () => {
    showPopup.value = true
  }

  const handleStepAction = (item: any) => {
    // Implementation of handleStepAction
  }

  // 获取个人账单信息
  const getBillInfo = async () => {
    const [err, res]: ToResponse = await to(billApi.getMyOrderTotal())
    if (err) return
    billInfo.value = res?.data
  }

  onMounted(() => {
    getBillInfo()
  })
</script>

<style lang="scss" scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    header {
      background-color: #1c9bfd;
      color: #fff;
      padding: 10px;
      border-radius: 8px;
      margin-top: 10px;
      display: flex;
      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        overflow: hidden;
        .bold {
          display: flex;
          align-items: center;
          font-weight: bold;
          // flex-wrap: nowrap;
          white-space: nowrap;
          .van-text-ellipsis {
            flex: 1;
          }
        }
      }
    }
    .main {
      flex: 1;
      overflow-y: auto;
      > ul {
        display: flex;
        height: 60px;
        margin-top: 10px;
        li {
          flex: 1;
          background: #fff;
          color: #333;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          & + li {
            margin-left: 10px;
          }
        }
        &.links {
          li {
            color: #fff;
            background: #5eb7fc;
            &:nth-child(2) {
              background: #fd9c5e;
            }
            &:nth-child(3) {
              background: #53e3a7;
            }
            &:nth-child(4) {
              background: #888ac3;
            }
          }
        }
      }
      .card {
        margin-top: 10px;
        border-radius: 4px;
        background-color: #fff;
        padding: 10px;
        h4 {
          height: 18px;
          line-height: 18px;
          &::before {
            display: inline-block;
            content: '';
            width: 3px;
            height: 18px;
            background-color: #1c9bfd;
            margin-right: 4px;
            vertical-align: middle;
          }
        }
        .nav {
          display: flex;
          margin: 10px 0;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            flex: 0 0 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            span {
              font-size: 20px;
            }
            p {
              margin-top: 4px;
            }
            &:nth-child(n + 5) {
              margin-top: 10px;
            }
          }
        }
      }
    }
    footer {
      flex: 0 0 44px;
      margin-bottom: 20px;
    }
  }
  :deep(.van-popup--bottom) {
    padding: 20px !important;
  }

  .operation-guide {
    max-height: 70vh;
    overflow-y: auto;

    .guide-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }

      .van-icon {
        font-size: 18px;
        color: #999;
        cursor: pointer;

        &:hover {
          color: #666;
        }
      }
    }

    .steps-container {
      .step-item {
        display: flex;
        margin-bottom: 20px;

        &.last-step {
          margin-bottom: 0;
        }

        .step-number-wrapper {
          position: relative;
          margin-right: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .step-number {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #1c9bfd, #5eb7fc);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(28, 155, 253, 0.3);
          }

          .step-line {
            width: 2px;
            height: 40px;
            background: linear-gradient(to bottom, #1c9bfd, #e0e0e0);
            margin-top: 8px;
          }
        }

        .step-content {
          flex: 1;
          padding-top: 2px;

          .step-title {
            margin: 0 0 8px 0;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
          }

          .step-desc {
            margin: 0 0 12px 0;
            font-size: 14px;
            color: #666;
            line-height: 1.5;
          }

          .step-btn {
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 12px;
            background: linear-gradient(135deg, #1c9bfd, #5eb7fc);
            border: none;
            box-shadow: 0 2px 8px rgba(28, 155, 253, 0.3);

            &:active {
              transform: translateY(1px);
            }
          }
        }
      }
    }

    .guide-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;

      .van-icon {
        margin-right: 6px;
        color: #1c9bfd;
        font-size: 16px;
      }

      span {
        font-size: 13px;
        color: #666;
      }
    }
  }
</style>