HNKDBOSS-WEB/hn-shop-uniapp/pages/tiaoxingma/index copy01.vue

<template>
  <view class="activationcode">
    <!-- 头部 -->
    <view class="atco_header">
      <view class="r_flex_align">
        <view class="gs-logo-box r_flex_center">
          <image class="gs-logo" src="/static/background/gs-logo.png" style="width: 100%; height: 78%; background: #fff"></image>
        </view>
        <view class="r_margin_10"> 信飞通 </view>
      </view>

      <view class="">
        <text>扫码录入路由器</text>
      </view>
    </view>

    <i-dolphin :strokeWidth="1" class="settingt" theme="outline" size="100" fill="#fff" strokeLinejoin="bevel" strokeLinecap="square" />

    <!-- 表单 -->
    <view class="atco_content">
      <!-- HTML -->
      <view class="">
        {{ txmText }}
      </view>
      <!-- 激活按钮 -->
      <view @click="getCofig" class="actBottom" :class="[actTrueKey ? '' : 'act-true']">
        <text style="position: relative; z-index: 9">扫码</text>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/store'
import * as UserApi from '@/api/user'
import * as CaptchaApi from '@/api/captcha'
import * as Verify from '@/utils/verify'
import * as AppApi from '@/api/app'
import wx from 'weixin-js-sdk'
import WXJsSDK from './WXSDK.js'
export default {
  data() {
    return {
      actTrueKey: true,
      txmText: 'null',
      windowHeight: ''
    }
  },
  methods: {
    clickScanCode() {
      let url = window.location.href.split('#')[0]
      newApi.getSignature({url}).then((res) => {
        if (res.code == 0) {
          this.sdk.config({
            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
          })
          this.sdk.ready(() => {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            this.sdk.checkJsApi({
              jsApiList: ['scanQRCode'],
              success: (res) => {
                console.log('jweixin.ready', res)
                if (res.checkResult.getLocation == false) {
                  console.log('微信版本低')
                  return
                }
              }
            })
            this.sdk.error((err) => {
              this.sdk.error('接口调取失败', err)
            })
            this.sdk.scanQRCode({
              desc: 'scanQRCode desc',
              needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
              scanType: ['qrCode'], // 可以指定扫二维码还是条形码（一维码），默认二者都有
              success: (r) => {
                window.location.href = r.resultStr
              },
              error: function (error) {
                if (error.errMsg.indexOf('function_not_exist') > 0) {
                  alert('版本过低请升级')
                }
              }
            })
          })
        }
      })
    }
  },
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        this.windowHeight = res.windowHeight
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.wxCofig()
  },
  methods: {
    getCofig() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
          this.txmText = res
        }
      })
    },
    wxCofig() {
      WXJsSDK.init({
        APIs: ['scanQRCode']
      })
    },
    // 获取图形验证码
    getCaptcha() {
      const app = this
      CaptchaApi.image().then((result) => (app.captcha = result.data))
    }
  }
}
</script>

<style lang="scss" scoped>
.activationcode {
  position: relative;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  background: url('/static/background/zjx-bg.jpeg') #fff;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  overflow: hidden;
  font-size: 40rpx;
  background-image: linear-gradient(300deg, #b721ff 0%, #21d4fd 100%);
}

.atco_header {
  width: 100%;
  color: #fff;
  text-align: left;
  padding: 40rpx 80rpx;
  font-weight: 500;
  line-height: 70rpx;
}

.atco_content {
  position: relative;
  background: #fff;
  border-top-left-radius: 100rpx;
  border-top-right-radius: 100rpx;
  height: 100vh;
  padding: 80rpx 100rpx;
  font-size: 30rpx;
  overflow: hidden;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  .atco_title {
    padding-left: 20rpx;
    color: #000;
  }
}

// 页面头部
.header {
  margin-bottom: 50rpx;

  .title {
    color: #0081ff;
    font-size: 50rpx;
    font-weight: 900;
  }

  .sub-title {
    margin-top: 20rpx;
    color: #0080ffa9;
    font-size: 25rpx;
  }
}

.shiming {
  margin-top: 90rpx;
}

.settingt {
  position: absolute;
  right: 0rpx;
  top: 20rpx;
  color: #007aec5e;
}

// 输入框元素
.form-item {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  margin-bottom: 45rpx;
  margin-top: 15rpx;
  height: 86rpx;
  font-size: 28rpx;
  color: #333;
  border-radius: 10px;
  background: #fff;
  border-bottom: 2px solid #9399ff;
  border-right: 1px solid #9399ff;
  &--input {
    font-size: 28rpx;
    letter-spacing: 1rpx;
    flex: 1;
    height: 100%;
    color: #333;
    padding-left: 30rpx;
  }

  &--parts {
    display: flex;
    align-items: center;
    min-width: 100rpx;
    height: 100%;
  }

  // 图形验证码
  .captcha {
    height: 100%;

    .image {
      display: block;
      width: 192rpx;
      height: 100%;
    }
  }

  // 短信验证码
  .captcha-sms {
    font-size: 30rpx;
    line-height: 50rpx;
    padding-right: 40rpx;

    .activate {
      color: #0081ff;
    }

    .un-activate {
      color: #9e9e9e;
    }
  }
}

.actBottom {
  position: fixed;
  bottom: 100rpx;
  right: 0rpx;
  left: 0rpx;
  margin: 0 auto;
  font-size: 50rpx;
  color: #007aec;
  text-align: center;
  display: block;
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  border-radius: 50%;
  background: linear-gradient(145deg, #c5f4ff, #a6cde6);
  box-shadow: 7px 7px 14px #007aecbd, -7px -7px 14px #a6cde686;
  border: 1px solid #fff;
}
.renlian {
  width: 100%;
  background: #6f77fe;
  color: #fff !important;
  text-align: center;
  justify-content: center;
}
.act-true {
  color: #333;
  background: linear-gradient(145deg, #dddddd, #bababa);
  box-shadow: 7px 7px 14px #7a7a7a, -7px -7px 14px #ffffff;
}
// 提交按钮
.submit-button {
  width: 100%;
  height: 86rpx;
  margin-top: 70rpx;
  background: linear-gradient(to right, $main-bg, $main-bg2);
  color: $main-text;
  border-radius: 80rpx;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  letter-spacing: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
}
</style>