zy-wechat/pages/scanning_big_Result/scanning_big_Result.vue

<template>
  <view class="Scanning_Result">
    <scroll-view class="Scanning_Result_inWrap" scroll-y>
      <view class="Scanning_top">
        <view class="Scanning_top_icon">
          <text class="cubeic-close icon_transport transport-shibai"></text>
        </view>
        <view class="Scanning_top_text" v-if="queryObj.bigScanSpecialMsg">
          <view class="text1"> 签到失败 </view>
          <view class="text1 f30" v-if="queryObj.qrcode !== undefined"> 扫描内容：{{queryObj.qrcode}} </view>
        </view>
      </view>

      <view class="Scanning_cont">
        <view class="Scanning_cont_center">
          {{ res.msg }}
          <view class="bigScanSpecialMsg" v-if="queryObj.bigScanSpecialMsg">
            <view class="bigScanSpecialMsgList" v-for="item in queryObj.bigScanSpecialMsg" :key="item.id">
              <view class="bigScanSpecialMsgListTitle">{{item.name}}</view>
              <view class="bigScanSpecialMsgListDesc">{{item.desc}}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="foot_btn">
      <view class="btn3" @click="showAlert(dataId)"> 知道了 </view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        res: {},
        queryObj: {}, //路由传递过来的数据
      };
    },
    methods: {
      // 知道了
      showAlert(id) {
        uni.navigateTo({
          url: "../receiptpage/receiptpage"
        });
      },
    },
    onLoad(options) {
      console.log(options, "result");
      this.queryObj = options;
      if(this.queryObj.bigScanSpecialMsg){
        this.queryObj.bigScanSpecialMsg = JSON.parse( this.queryObj.bigScanSpecialMsg);
      }
      this.res["msg"] = options.msg;
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
  };
</script>
<style lang="less">
  .Scanning_Result {
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    height: 100vh;

    .Scanning_Result_inWrap{
      flex: 1;
      min-height: 0;
    }

    .bigScanSpecialMsg{
      text-align: left;
      padding: 0 87rpx;
      .bigScanSpecialMsgList{
        margin-top: 50rpx;
        font-size: 32rpx;
        .bigScanSpecialMsgListTitle{
          color: red;
        }
        .bigScanSpecialMsgListDesc{
          line-height: 48rpx;
          margin-top: 15rpx;
        }
      }
    }

    .Scanning_top {
      .Scanning_top_icon {
        width: 140rpx;
        height: 140rpx;
        margin: 0 auto;
        padding-top: 116rpx;
        border-radius: 50%;
        line-height: 140rpx;

        .speNum{
          text-align: center;
          font-size: 140rpx;
        }

        .cubeic-ok {
          font-size: 140rpx;
          color: #35b34a;
        }

        .cubeic-close {
          font-size: 140rpx;
          color: #ff3b53;
        }
      }

      .Scanning_top_text {
        .text1 {
          font-size: 48rpx;
          text-align: center;
        }

        .success_tips {
          color: red;
          font-size: 30rpx;
        }
      }
    }

    .Scanning_cont {
      font-size: 32rpx;
      text-align: center;

      view {
        margin-bottom: 16rpx;
      }

      .Scanning_cont_center {
        text-align: center;
      }

      .text {
        margin-top: 24rpx;
        color: #35b34a;
      }

      .text1 {
        margin-top: 24rpx;
        color: #ff3b53;
      }
    }

    .foot_btn {
      line-height: 88rpx;
      height: 100rpx;
      display: flex;
      justify-content: center;

      .btn1,
      .btn2,
      .btn3 {
        height: 88rpx;
        flex: 1;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }
    }
  }
</style>