AstraZeneca_uniapp/pages/index/index.vue

<template>
  <view class="indexpage" style="width: 100%">
    <div class="indextop">
      <div class="topbox">
        <div class="pagetitle">阿斯利康码头预约</div>
        <div
          @click="
            jumpPage(
              userType == 'USER'
                ? '/pages/subPackages/noticeList/sj'
                : '/pages/subPackages/noticeList/qy'
            )
          "
        >
          <div class="sub" v-if="noticeNum != 0">{{ noticeNum }}</div>
          <img src="./image.png" style="width: 40rpx; height: 39rpx" alt="" />
        </div>
      </div>
      <image src="../../static/index/banner.png" class="banner"></image>
      <div class="bz">
        <div>
          <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/1.png"
            class="yyicon"
            alt=""
          />
          <div>预约</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/2.png"
            class="yyicon"
            alt=""
          />
          <div>签到</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/3.png"
            class="yyicon"
            alt=""
          />
          <div>装卸</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/4.png"
            class="yyicon"
            alt=""
          />
          <div>签收</div>
        </div>
        <div class="jiantou">---></div>
        <div>
          <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/5.png"
            class="yyicon"
            alt=""
          />
          <div>离场</div>
        </div>
      </div>
    </div>
    <div class="report">
      <div class="left">
        <img src="https://wxdock.astrazeneca.cn/dockPic/image/6.png" alt="" />
        <div class="line" style="margin-left: 20rpx" ></div>
      </div>
      <div class="right">
        <div>
<!--          <div class="info">-->
<!--            <div class="label chaochuyincang">-->
<!--              受暴雨天气影响，2024-07-13 8：00...-->
<!--            </div>-->
<!--            <div class="day">1天前</div>-->
<!--          </div>-->
          <div class="info">
            <div @click="jumpPage('/pages/subPackages/czlc/gonggaoCzlc')" class="label chaochuyincang" style="color: #8A0554;font-weight: bold;text-decoration:  #8A0554">
<!--              {{ noticeText }}-->
              预约指南
            </div>
            <div class="day">
<!--              {{ timeText }}-->

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu-list" v-if="userType == 'USER'">
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/choosecar/index?zxtype=送货预约')"
      >
        <div class="text">送货预约</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/7.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/7-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/choosecar/index?zxtype=取货预约')"
      >
        <div class="text">取货预约</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/8.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/8-1.png"
          class="icon"
          alt=""
        />
      </div>
      <!-- sj_yy/index -->
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/sj_history/index')"
      >
        <div class="text">预约历史</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/9.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/9-1.png"
          class="icon"
          alt=""
        />
      </div>
    </div>
    <div class="menu-list" v-else-if="userType == 'FRAME'">
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/scanCode/index')"
      >
        <div class="text">扫码核验</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/7.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/7-1.png"
          class="icon"
          alt=""
        />
      </div>
    </div>
    <div class="menu-list" v-else>

      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/choosecar/index?zxtype=送货预约')"
      >
        <div class="text">送货预约</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/8.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/8-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/yy_history/index')"
      >
        <div class="text">预约历史</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/9.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/9-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div
        class="menu-row"
        @click="jumpPage('/pages/subPackages/carmange/index')"
      >
        <div class="text">车辆管理</div>
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/10.png"
          class="back"
          alt=""
        />
        <img
          src="https://wxdock.astrazeneca.cn/dockPic/image/10-1.png"
          class="icon"
          alt=""
        />
      </div>
      <div
          class="menu-row"
          @click="jumpPage('/pages/subPackages/choosecar/index?zxtype=取货预约')"
      >
        <div class="text">取货预约</div>
        <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/7.png"
            class="back"
            alt=""
        />
        <img
            src="https://wxdock.astrazeneca.cn/dockPic/image/7-1.png"
            class="icon"
            alt=""
        />
      </div>
    </div>
  </view>
</template>
<script>
// import {demo} from "@/js_sdk/http"

import { driverMessageCount, bizMessageCount,getNotice } from "@/js_sdk/noticeList.js";
import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";
export default {
  data() {
    return {
      mapList: [],
      MeetingNum: 0,
      VenueNum: 0,
      userType: "",
      noticeNum: 0,
      noticeText:'',
      timeText:''
    };
  },
  onShareAppMessage() {},
  mounted() {
    // demo();
  },
  onShow() {
    this.userType = getUserLocalStorageInfo().userType;
    if (this.userType == "USER") {
      this.driverMessageCount();
    } else {
      this.bizMessageCount();
    }
    this.getNotice()
  },
  methods: {
    async getNotice(){
      let data = await getNotice()
      console.log(data)
      this.noticeText=data.data.content
      this.timeText = data.data.time
    },
    // /wx/dock/driverMessageCount
    async bizMessageCount() {
      let { data } = await bizMessageCount({
        bizId: getUserLocalStorageInfo().biz.id,
      });
      this.noticeNum = data;
      console.log(data);
    },
    async driverMessageCount() {
      let { data } = await driverMessageCount({
        userId: getUserLocalStorageInfo().user.id,
      });
      this.noticeNum = data;
      console.log(data);
    },
    jumpPage(path) {
      console.log(path);
      uni.navigateTo({
        url: path,
        fail: (fail) => {},
      });
    },
  },
};
</script>

<style lang="scss">
.indexpage {
  .pagetitle {
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
  }
  .sub {
    width: 28rpx;
    height: 28rpx;
    background: #f21912;
    border-radius: 50%;
    display: flex;
    font-size: 26rpx;
    align-items: center;
    justify-content: center;
    color: white;
    position: absolute;
    top: 0rpx;
    right: 25rpx;
  }
  .topbox {
    display: flex;
    padding: 8rpx 32rpx 18rpx 32rpx;
    justify-content: space-between;
    font-size: 32rpx;
    color: #333333;
  }
  .menu-list {
    margin-top: 24rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #ffffff;
    width: 100%;
    padding: 30rpx 32rpx 6rpx 32rpx;
    box-sizing: border-box;

    .menu-row {
      width: 330rpx;
      height: 128rpx;
      position: relative;
      margin-bottom: 24rpx;

      .text {
        position: absolute;
        left: 32rpx;
        top: 38rpx;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        z-index: 2;
      }

      .back {
        width: 330rpx;
        height: 128rpx;
        position: absolute;
        z-index: 1;
      }

      .icon {
        position: absolute;
        left: 230rpx;
        top: 32rpx;
        width: 68rpx;
        height: 68rpx;
        z-index: 2;
      }
    }
  }

  .report {
    margin-top: 24rpx;
    display: flex;
    padding: 24rpx 28rpx;
    background: #ffffff;

    .right {
      display: flex;
      align-items: center;
      margin-left: 16rpx;
    }

    .info {
      display: flex;
      align-items: center;
      margin-top: 12rpx;
      margin-bottom: 12rpx;
      display: flex;
      color: rgba(24, 23, 42, 1);
      .label {
        width: 345rpx;
      }
    }

    .left {
      display: flex;
      align-items: center;
    }

    .line {
      width: 2rpx;
      height: 80rpx;
      background: #e7eaf0;
    }

    image {
      height: 96rpx;
      width: 86rpx;
      margin-right: 16rpx;
    }

    .day {
      font-size: 24rpx;
      color: rgba(102, 102, 102, 1);
    }
  }

  .indextop {
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding-bottom: 24rpx;
  }

  .bz {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;

    .yyicon {
      height: 60rpx;
      width: 60rpx;
    }

    .jiantou {
      color: rgb(122, 134, 154);
      margin-left: 12rpx;
      margin-right: 12rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .jiaobiao {
    position: absolute;
    top: 10rpx;
    right: 30rpx;
    border-radius: 50%;
    background: red;
    font-size: 24rpx;
    height: 30rpx;
    width: 30rpx;
    text-align: center;
    line-height: 24rpx;
    color: white;
    line-height: 30rpx;
  }

  .banner {
    width: 686rpx;
    height: 300rpx;
    display: block;
    margin: auto;
    z-index: 1;
  }
}

page {
  background: rgba(245, 247, 250, 1);
}
</style>