YXGJ/pages/index/cloud/workbench.vue

<template>
  <view class="work-panel">
    <view class="work-panel_header">
      <image class="image" src="/static/c+unselected.svg" mode="widthFix" />
      <view @click="onSearch" style="flex: 1">
        <My_search placeholder="搜索全站关键字" disabled></My_search>
      </view>
    </view>
    <!-- 用户信息 -->
    <UserInfo
      :userInfoValue="userInfoValue"
      @selfCardClick="selfCardClick"
    ></UserInfo>

    <view class="work-panel_signin" v-if="isSign">
      <text class="title">你已累计打卡{{ userInfoValue.signdays }}天</text>
      <navigator
        class="but"
        @click="toDailyYttendance"
        url="/packageA/dailyYttendance/index"
        hover-class="navigator-hover"
      >
        每日一签
      </navigator>
    </view>
    <view class="work-panel_applist">
      <template v-for="(item, index) in list">
        <navigator
          @click="switchPage(item)"
          class="app"
          url="#"
          :key="item.name"
        >
          <view class="bg" :style="item.color">
            <image
              class="image"
              :src="`/static/workbench/${item.name}.svg`"
              mode="widthFix"
            ></image>
          </view>
          <text class="name">{{ item.remark }}</text>
        </navigator>
      </template>
    </view>
    <view class="work-panel_options">
      <template v-for="(item, index) in list2">
        <navigator
          @click="switchPage(item)"
          class="option"
          :key="index"
          url="#"
          hover-class="navigator-hover"
          open-type="navigate"
        >
          <view class="box">
            <text class="left">{{ item.remark }}</text>
            <view class="right">
              <!-- <view class="tag">{{ item.count }}</view> -->
              <u-icon name="arrow-right" color="#999999"></u-icon>
            </view>
          </view>
        </navigator>
      </template>
    </view>
  </view>
</template>

<script>
import UserInfo from "./userInfo.vue";
export default {
  components: { UserInfo },
  data() {
    return {
      updatePage: true,
      list: [],
      list2: [],
      colors: [
        "background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%)",
        "background: linear-gradient( 225deg, #F1AA68 0%, #EA895B 100%)",
        "background: linear-gradient( 225deg, #EEA6A4 0%, #E0605A 100%)",
        "background: linear-gradient( 225deg, #80D3EF 0%, #5DAAE6 100%)",
        "background: linear-gradient( 225deg, #EEA6A4 0%, #E0605A 100%)",
        "background: linear-gradient( 225deg, #80D3EF 0%, #5DAAE6 100%)",
        "background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%)",
        "background: linear-gradient( 225deg, #F1AA68 0%, #EA895B 100%)",
        "background: linear-gradient( 225deg, #81AEF3 0%, #6787E7 100%)",
        "background: linear-gradient( 225deg, #F1AA68 0%, #EA895B 100%)",
      ],
      content: {
        pageNumber: 1,
        pageSize: 20,
        where: {
          condition: "",
          isnew: "",
          class: "",
        },
      },
      userInfoValue: {
        rolenames: "",
        name: "",
        remarks: "",
        joindays: 0,
        signdays: "",
      },
      roles: [],
      auth: uni.getStorageSync("authList").资料库,
    };
  },
  computed: {
    isSign() {
      if (!uni.getStorageSync("authList").资料库) return false;
      if (!uni.getStorageSync("authList").资料库.每日一签) return false;
      return true;
    },
  },
  methods: {
    selfCardClick() {
      this.$Http.refreshUserInfoData = function () {
        this.getUserInfo();
        delete this.$Http.refreshUserInfoData;
      }.bind(this);
    },
    async init(callBack) {
      this.getUserInfo().then(() => {
        callBack();
      });
      this.updatePage = false;
    },
    async getUserInfo() {
      return new Promise(async (resolve) => {
        let res = await this.$Http.basic({
          id: "20240510104102",
          content: {},
        });
        if (this.cutoff(res.msg)) return;
        this.userInfoValue = res.data;
        this.userInfoValue.headpic =
          (this.userInfoValue.attinfos.find(
            (v) => v.usetype == "headportrait"
          ) &&
            this.userInfoValue.attinfos.find((v) => v.usetype == "headportrait")
              .url) ||
          "";

        await this.$Http
          .basic({
            id: 20240510104102,
            content: {},
          })
          .then((res) => {
            let data = res.data;
            /*   let temp = uni.getStorageSync('authList').工作台导航
                    temp.中奖明细.count = data.count_awardmx
                    temp.通讯录.count = data.count_addressbook
                    temp.我的预约.count = data.count_appointment
                    temp.我的收藏.count = data.count_collect
                    temp.考试成绩.count = data.count_coursewaretest
                    temp.意见反馈.count = data.count_feedback */
            this.list2 = Object.values(uni.getStorageSync('authList').工作台导航);
            resolve();
          });
        this.list = Object.values(uni.getStorageSync("authList").工作台);
        this.list = this.dye(this.list, this.colors, 1);
      });
    },
    toDailyYttendance() {
      this.$Http.updateUserInfo = this.getUserInfo.bind(this);
    },
    onSearch() {
      uni.navigateTo({
        url: "/cloud/globalSearch/index",
      });
    },
  },
};
</script>

<style lang="scss">
.work-panel {
  padding: 10px 10px 80px 10px;

  .work-panel_header {
    display: flex;
    align-items: center;

    .image {
      width: 40px;
      height: 20px;
      margin-right: 10px;
    }
  }

  .work-panel_signin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 15px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;

    .title {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
    }

    .but {
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      background: linear-gradient(90deg, #c30d23 0%, #e3041f 100%);
      border-radius: 50px 50px 50px 50px;
      padding: 6px 15px;
    }
  }

  .work-panel_applist {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    box-sizing: border-box;

    .app {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 8px;
      padding: 15px;
      width: 25%;
      box-sizing: border-box;

      .bg {
        width: 44px;
        height: 44px;
        border-radius: 12px 12px 12px 12px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        align-content: center;
        background: linear-gradient(225deg, #81aef3 0%, #6787e7 100%);

        .image {
          align-self: center;
          width: 24px;
          height: 24px;
        }
      }

      .name {
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        margin-top: 10px;
        text-align: center;
      }
    }
  }

  .work-panel_options {
    background: #ffffff;
    border-radius: 8px;
    font-family: Source Han Sans SC, Source Han Sans SC;

    .option {
      padding: 15px 0 0 10px;

      &:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      &:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        .box {
          border: none;
        }
      }

      .box {
        padding-bottom: 15px;
        padding-right: 15px;
        border-bottom: 1px solid #dddddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;

        .left {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }

        .right {
          display: flex;
          align-items: center;
          align-content: center;

          .tag {
            background: #bbbbbb;
            border-radius: 50px 50px 50px 50px;
            padding: 3px 12px;
            margin-right: 10px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #ffffff;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>