horzi_rai_wxa/pages-purchaser/newResources/newResources.vue

<template>
  <view class="container new-resources">
    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
      <view class="content-box">
        <van-icon name="arrow-left" size="20px" @click="goHandler" />
        <text>买方研选新资源</text>
      </view>
    </view>
    <image class="img-bg" :src="imgList.HbImg"> </image>
    <image @click="goPage" class="img-btn" :style="{ width: '368rpx', bottom: '15%' }" :src="imgList.ButtonImg"> </image>
    <Loading />
  </view>
</template>

<script>
import { Research } from "@/config/api.js";

export default {
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
      imgList: {},
    };
  },
  methods: {
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    // 获取图片
    async getImageList() {
      const res = await Research.researchHB();
      if (res.Ret === 200) {
        this.imgList = res.Data;
      }
    },
    // 点击返回
    goHandler() {
      uni.navigateBack({
        fail() {
          uni.switchTab({
            url: "/pages/index/index",
          });
        },
      });
    },
    goPage() {
      uni.switchTab({
        url: "/pages/purchaser/purchaser",
      });
    },
  },
  onLoad() {
    this.getImageList();
    this.initNavBar();
  },
  onShareAppMessage() {
    return {
      title: "买方研选新资源",
      path: "/pages-purchaser/newResources/newResources",
    };
  },
};
</script>

<style scoped lang="scss">
.new-resources {
  position: relative;
  width: 100%;
  height: 100vh;
  .nav-bar-wrap {
    position: fixed;
    background: rgba(0, 0, 0, 0.62);
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 9;
    .content-box {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      color: #fff;
      font-size: 34rpx;
      /deep/ .van-icon-arrow-left {
        position: absolute;
        left: 39rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
      }
    }
  }
  .img-bg {
    width: 100%;
    height: 100vh;
  }
  .img-btn {
    position: absolute;
    height: 82rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    bottom: 232rpx;
  }
}
</style>