zy-wechat/components/showCertificat/showCertificat.vue

<template>
  <view class="showModel" v-show="disjunctor">
    <view class="showModel__wrap">
      <view class="showModel__header">
        领血证二维码
      </view>
      <view class="showModel__article">
        <view class="showModel__content">
          <view class="leftIcon" @click="toLeft">
            <view class="newicon newicon-xiala1" :class="{ disable: current === 0 }"></view>
          </view>
          <swiper class="swiper" :current="current" @change="changeCurrent">
            <swiper-item v-for="(qrCode, index) in qrCodes" :key="index">
              <image :src="qrCode.base64" mode="widthFix" class="qrCode"></image>
            </swiper-item>
          </swiper>
          <view class="rightIcon" @click="toRight">
            <view class="newicon newicon-xiala1" :class="{ disable: current === qrCodes.length - 1 }"></view>
          </view>
        </view>
      </view>
      <view class="showModel__footer">
        <view class="showModel__know" @click="know" hover-class="seimin-btn-hover">知道了</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    get,
    post,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        qrCodes: [],
        current: 0,
      };
    },
    props: {
      // 显示隐藏
      disjunctor: {
        type: Boolean,
        default: false,
      },
      // id
      id: {
        type: Number,
      },
    },
    methods: {
      // 左箭头点击
      toLeft(){
        this.current = Math.max(--this.current, 0);
      },
      // 右箭头点击
      toRight(){
        this.current = Math.min(++this.current, this.qrCodes.length - 1);
      },
      // 滑动二维码
      changeCurrent(event){
        this.current = event.detail.current;
      },
      // 关闭
      know() {
        this.$emit("know");
      },
      // 获取二维码
      getQrCode(){
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/transflow/scanInfo", {
          type: 'bloodTake',
          takeCodeList: 1,
          id: 0,
          orderIds: this.id.toString(),
        }).then((result) => {
            uni.hideLoading();
            if (result.state == 200) {
              this.qrCodes = result.data.data || [];
            } else {
              uni.showToast({
                icon: "none",
                title: result.msg || "接口获取数据失败！",
              });
            }
          })
      }
    },
    mounted() {
      this.getQrCode();
    }
  };
</script>

<style lang="less" scoped>
  /deep/ uni-swiper .uni-swiper-wrapper{
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
  }
  /deep/ uni-swiper uni-swiper-item{
    display: flex!important;
    align-items: center!important;
  }
  .showModel {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999999;

    .showModel__wrap {
      width: 560rpx;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 12rpx;

      .showModel__header {
        font-size: 36rpx;
        color: #000;
        height: 84rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .showModel__article {
        color: #000;
        margin: 0 auto 25rpx;
        width: 488rpx;
        background-color: rgb(249, 250, 251);
        border: 2rpx solid rgb(229, 233, 237);
        border-radius: 12rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &.p0 {
          padding: 0;
        }

        &.p1 {
          text-align: left;
        }

        .showModel__icon {
          font-size: 138rpx;
          margin-bottom: 32rpx;

          &.showModel__icon--success {
            color: rgb(52, 179, 73);
          }

          &.showModel__icon--warn {
            color: rgb(245, 165, 35);
          }

          &.showModel__icon--error {
            color: rgb(255, 58, 82);
          }
        }

        .showModel__content {
          font-size: 36rpx;
          word-break: break-all;
          width: 100%;
          display: flex;
          .leftIcon{
            width: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            view{
              transform: rotateZ(90deg);
              &.disable{
                color: #dbdbdb;
              }
            }
          }
          .rightIcon{
            width: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            view{
              transform: rotateZ(-90deg);
              &.disable{
                color: #dbdbdb;
              }
            }
          }
          .swiper{
            flex: 1;
            padding-top: 100%;
            position: relative;
            height: 0;
            .qrCode{
              width: 100%;
            }
          }
        }

        .showModel__info {
          font-size: 32rpx;
          color: rgb(102, 102, 102);
        }

        .specialCloseFlag {
          width: 90%;
          height: 100%;
          padding: 16rpx;
        }

        .radio-wrap {
          .radio-item {
            margin-top: 16rpx;

            /deep/ .uni-radio-input-checked {
              background-color: #49b856 !important;
              border-color: #49b856 !important;
            }
          }
        }
      }

      .showModel__footer {
        box-sizing: border-box;
        height: 100rpx;
        border-top: 2rpx solid rgb(229, 233, 237);
        display: flex;
        align-items: center;

        view {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 36rpx;
          color: rgb(102, 102, 102);
          position: relative;

          &:nth-of-type(2)::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 2rpx;
            height: 87rpx;
            background-color: rgb(229, 233, 237);
          }
        }

        .showModel__ok {
          flex: 1;
          color: rgb(73, 184, 86);
        }

        .showModel__cancel {
          flex: 1;
        }

        .showModel__know {
          flex: 1;
          color: rgb(73, 184, 86);
        }
      }
    }
  }
</style>