jsh_erp_app/pages/index/index.vue

<template>
  <view class="container_box">
    <u-navbar height="40px" bgColor="transparent">
      <view class="u-nav-slot btn-left" slot="left" @click="meunClick">
        <image src="@/static/image/home/bulletpoint.png" mode=""></image>
      </view>
      <view slot="center" class="depot-label" @click="stashClick">
        <view class="name">{{ cangName }}</view>
        <u-icon name="arrow-down-fill" color="#999999" size="12"></u-icon>
      </view>
      <view class="u-nav-slot btn-right" slot="right" @click="noticeClick">
        <image src="@/static/image/home/notice-icon.png" mode=""></image>
        <u-badge
          type="error"
          :isDot="true"
          :show="noticeShow"
          :absolute="true"
          :offset="[-2, 1]"
        ></u-badge>
      </view>
    </u-navbar>
    <view class="container_main">
      <view class="header-box">
        <view class="user-content-box">
          <view class="user-info-box">
            <image src="@/static/image/home/avatar.png" mode=""></image>
            <view class="user-info-content">
              <view class="user-name">
                {{ userInfo.username }}
              </view>
              <view class="user-phone">
                {{ userInfo.phonenum }}
              </view>
            </view>
          </view>
          <view class="user-txt"> 您的移动仓库管家 </view>
        </view>
        <image
          src="@/static/image/home/home-top-img.png"
          class="header-bg"
          mode=""
        ></image>
      </view>
      <view class="container_cont">
        <view
          class="operate-item"
          v-for="(item, i) in operateList"
          :key="i"
          @click="operateClick(item)"
        >
          <view class="operate-img">
            <image :src="item.src" mode=""></image>
            <u-badge
              type="error"
              absolute
              max="99"
              :value="item.num"
              :offset="[-5, -5]"
            ></u-badge>
          </view>
          <view class="operate-text">{{ item.text }}</view>
        </view>
      </view>
    </view>
    <!-- 菜单弹框 -->
    <use-pop
      :userInfo="userInfo"
      v-model="meunShow"
      @close="meunShow = false"
    ></use-pop>

    <!-- 版本更新 -->
    <u-popup
      :show="showUpdatePop"
      :closeOnClickOverlay="false"
      :safeAreaInsetBottom="false"
      mode="center"
      :round="16"
    >
      <view class="reason-box">
        <image
          class="icon-img"
          src="https://qiuyu-shuzhi.oss-cn-beijing.aliyuncs.com/image/task-pop-img.png"
          mode=""
        ></image>
        <view class="reason-box-title">象力WMS邀请你升级至新版本</view>
        <view class="btn-box">
          <button class="reset-button cancel-btn" @click="updateShow = false">
            稍后再说
          </button>
          <button class="reset-button confirm-btn" @click="toUpdate">
            下载更新
          </button>
        </view>
      </view>
    </u-popup>
    <!-- 中心仓弹窗 -->
    <u-picker
      :show="stashShow"
      keyName="label"
      :defaultIndex="defaultIndex"
      :columns="stashColumns"
      @confirm="pickerConfirm"
      @cancel="stashShow = false"
    ></u-picker>
  </view>
</template>

<script>
import usePop from "./components/use-pop.vue";
import { downloadApkWithJsonPost } from "@/common/utils/app-update.js";
import { depotSpinnerList } from "@/common/request/apis/purchase";
// const Base64 = require('js-base64').Base64
import { mapGetters } from "vuex";
export default {
  components: {
    usePop,
  },
  data() {
    return {
      operateList: [
        {
          src: require("@/static/image/home/icon-jhrw.png"),
          text: "拣货任务",
          num: 0,
          url: "/pages/picking-task/index",
        },
        {
          src: require("@/static/image/home/icon-cgrk.png"),
          text: "采购入库",
          num: 0,
          url: "/pages/purchase/index",
        },
        {
          src: require("@/static/image/home/icon-chcx.png"),
          text: "存货查询",
          num: 0,
          url: "/pages/inventory-inquiry/index",
        },
        {
          src: require("@/static/image/home/icon-pdrw.png"),
          text: "盘点任务",
          num: 0,
          url: "/pages/inventory-task/index",
        },
        // {
        //   src: require("@/static/image/home/icon-fhrw.png"),
        //   text: "复核任务",
        //   num: 0,
        //   url: "",
        // },
        // {
        //   src: require("@/static/image/home/icon-hwlr.png"),
        //   text: "货物录入",
        //   num: 0,
        //   url: "/pages/goods-enter/index",
        // },
      ],
      meunShow: false,
      noticeShow: true,
      updateShow: true,
      // 选择仓库
      stashShow: false,
      cangName: "",
      stashColumns: [],
      defaultIndex: [],
    };
  },
  onLoad() {
    // JSON.parse(Base64.decode(that.$Route.query.classData))
    this.getDepotSpinnerList();
  },
  onShow() {
    if (!this.isLogin) {
      uni.$u.toast("请先登录！");
      setTimeout(() => {
        uni.redirectTo({
          url: "/pages/login/login",
        });
      }, 1500);
    }
  },
  computed: {
    ...mapGetters(["isLogin", "userInfo"]),
    showUpdatePop() {
      return this.$store.state.update.update && this.updateShow;
    },
  },
  methods: {
    toUpdate() {
      const params = this.$store.state.update.downloadApkParams;
      const url = this.$BASE_URL + "/pda/downloadApk";
      console.log(url, "url");
      console.log("params=======", params);
      downloadApkWithJsonPost(url, params);
    },
    meunClick() {
      if (!this.isLogin) {
        uni.$u.toast("请先登录！");
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/login/login",
          });
        }, 1500);
      } else {
        this.meunShow = true;
      }
    },
    operateClick(item) {
      if (!item.url) {
        return;
      }
      uni.navigateTo({
        url: item.url,
      });
    },
    noticeClick() {
      uni.navigateTo({
        url: "/pages/index/notice-page",
      });
    },
    // 仓库
    getDepotSpinnerList() {
      depotSpinnerList().then((res) => {
        if (res.code == 200) {
          console.log(1111, res);
          this.stashColumns = [res.data];
          this.cangName = res.data[0].label;
          this.$store.commit("setcangName", this.cangName);
          this.$store.commit("setDepotInfo", {
            depotName: res.data[0].label,
            id: res.data[0].value,
          });
        }
      });
    },
    pickerConfirm(val) {
      console.log("pickerConfirm======", val);
      this.cangName = val.value[0].label;
      this.stashShow = false;
      this.$store.commit("setcangName", val.value[0].label);
      this.$store.commit("setDepotInfo", {
        depotName: val.value[0].label,
        id: val.value[0].value,
      });
    },
    stashClick() {
      this.defaultIndex = this.getDefaultIndex(
        this.cangName,
        this.stashColumns
      );
      this.stashShow = true;
    },
    // 获取picker默认index
    getDefaultIndex(val, list) {
      let arr = [];
      let index = list[0].findIndex((item) => item.label == val);
      arr = [index];
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-center {
  display: flex;
  align-items: center;
  .cang-name {
    color: rgba(51, 51, 51, 1);
    text-align: center;
    font-family: "PingFang SC";
    font-size: 28rpx;
    font-weight: 600;
    margin-right: 10rpx;
  }
}
.btn-left {
  image {
    width: 48rpx;
    height: 48rpx;
  }
}
.btn-right {
  position: relative;
  image {
    width: 40rpx;
    height: 44rpx;
  }
}

.container_box {
  .container_main {
    .header-box {
      position: relative;
      height: 375rpx;

      .header-bg {
        width: 100%;
        height: 375rpx;
      }
    }
    .user-content-box {
      position: absolute;
      bottom: 32rpx;
      left: 32rpx;
      z-index: 99;

      .user-info-box {
        display: flex;

        image {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }

        .user-name {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #0f1828;
        }

        .user-phone {
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }
      }

      .user-txt {
        margin-top: 20rpx;
        width: 350rpx;
        height: 44rpx;
        padding: 0 26rpx;
        border-radius: 64rpx;
        background: linear-gradient(90deg, #5cc4e8 0%, #0256ff 100%);
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        letter-spacing: 2;
        text-align-last: justify;
        line-height: 44rpx;
        color: #ffffff;
      }
    }
  }
  .container_cont {
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .operate-item {
      width: 326rpx;
      height: 262rpx;
      border-radius: 16rpx;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 32rpx;
      .operate-img {
        position: relative;
        image {
          width: 128rpx;
          height: 128rpx;
        }
      }
      .operate-text {
        color: #333;
        font-family: "PingFang SC";
        font-size: 32rpx;
        font-weight: 500;
        margin-top: 20rpx;
      }
    }
  }
}

.reason-box {
  width: 700rpx;
  background: url("https://qiuyu-shuzhi.oss-cn-beijing.aliyuncs.com/image/task-pop-bg.png")
    no-repeat;
  background-size: 100% 100%;
  padding: 0 60rpx 46rpx;
  box-sizing: border-box;
  .icon-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    position: absolute;
    top: -100rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  .reason-box-title {
    padding-top: 150rpx;
    color: #1d212a;
    font-family: "PingFang SC";
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
  }
  .btn-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60rpx;
    .cancel-btn,
    .confirm-btn {
      width: 244rpx;
      height: 80rpx;
      border-radius: 16rpx;
      font-size: 32rpx;
    }
    .cancel-btn {
      border: 1px solid #bfc8db;
      color: #86909c;
    }
    .confirm-btn {
      background: #0256ff;
      color: #fff;
      font-weight: 500;
    }
  }
}
</style>