print-package-H5/pages/device-info/index.vue

<template>
  <view class="content">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="设备信息"></uni-nav-bar>
    <view class="flex-col group_4">
      <view class="flex-col group_5">
        <view class="flex-col items-center group_6">
          <swiper class="swiper" @change="changeSwiper">
            <swiper-item v-for="(item, index) in info.imgItemList" :key="index">
              <image mode="aspectFit" :src="item.url" class="image" @click="preview(item.url)" />
            </swiper-item>
          </swiper>
          <view class="flex-col items-center text-wrapper">
            <text>{{ swiperCurrent + 1 }}/{{ info.imgItemList.length }}</text>
          </view>
        </view>
        <view class="flex-col section_1">
          <text class="text_5">{{ info.name || '设备' }}</text>
          <text class="text_6">
            {{ info.machineDescribe || '没有描述' }}
          </text>
        </view>
      </view>
    </view>
    <view class="apply-area" v-if="!applyAgree">
      <view class="flex-row section_4">
        <text class="text_14">申请通过后可查看设备实时生产信息</text>
        <view class="flex-col items-center button" @click="go2('apply-inspection', { factoryId: factoryId })">
          <text>申请验厂</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { getEquipmentInfo } from '@/apis/factoryApi.js'
export default {
  data() {
    return {
      info: { imgItemList: [] },
      id: null,
      swiperCurrent: 0
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
    }
  },
  onShow() {
    if (this.id) {
      getEquipmentInfo({ id: this.id }).then((res) => {
        if (res) {
          this.info = res
        }
      })
    }
  },
  computed: {
    applyAgree() {
      let expireTime = this.$store.state.shareExpireTime
      if (expireTime) {
        let now = new Date().getTime()
        if (now < expireTime) {
          return true
        }
      }
      return false
    }
  },
  methods: {
    go2,
    back,
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current
    },
    preview(url) {
      let urls = info.imgItemList.map((img) => img.url)
      uni.previewImage({
        current: url,
        urls: urls
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  .group_4 {
    flex: 1 1 auto;
    overflow-y: auto;
    .group_5 {
      .group_6 {
        width: 750rpx;
        height: 440rpx;
        .swiper {
          width: 100%;
          height: 100%;
          .image {
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
          }
        }
        color: rgb(255, 255, 255);
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
        position: relative;

        .text-wrapper {
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 20rpx;
          width: 64rpx;
          position: absolute;
          right: 32rpx;
          bottom: 60rpx;
        }
      }
      .section_1 {
        margin-top: -40rpx;
        padding: 32rpx 30rpx 100rpx 32rpx;
        background-image: linear-gradient(
          180deg,
          rgb(255, 255, 255) 0%,
          rgb(255, 255, 255) 0%,
          rgb(253, 253, 254) 30.62%,
          rgba(247, 248, 250, 0) 100%,
          rgba(247, 248, 250, 0) 100%
        );
        border-radius: 40rpx 40rpx 0px 0px;
        position: relative;
        .text_5 {
          color: rgb(0, 0, 0);
          font-size: 36rpx;
          font-weight: 500;
          line-height: 50rpx;
          white-space: nowrap;
        }
        .text_6 {
          margin-top: 20rpx;
          color: rgb(51, 51, 51);
          font-size: 26rpx;
          line-height: 37rpx;
          text-align: left;
        }
      }
    }
  }
}
.apply-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .section_4 {
    margin-top: -55rpx;
    padding: 16rpx 28rpx 16rpx 32rpx;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
    position: relative;
    .text_14 {
      align-self: center;
      color: rgb(51, 51, 51);
      font-size: 26rpx;
      line-height: 37rpx;
      white-space: nowrap;
    }
    .button {
      margin-left: 14rpx;
      padding: 23rpx 0;
      color: rgb(255, 255, 255);
      font-size: 30rpx;
      font-weight: 500;
      line-height: 42rpx;
      white-space: nowrap;
      background-color: rgb(0, 122, 255);
      border-radius: 10rpx;
      width: 260rpx;
      height: 88rpx;
    }
  }
}
</style>