Google.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <view>
  3. <headContent borderBottom>
  4. <template #left>
  5. <reverse-back />
  6. </template>
  7. <template #content>
  8. <view class="haed-title">
  9. 绑定谷歌验证
  10. </view>
  11. </template>
  12. </headContent>
  13. <view class="content-box">
  14. <text class="lable-text">1. 安装谷歌验证器</text>
  15. <text class="lable-hint">首先您需要在手机上安装谷歌验证器</text>
  16. <text class="lable-hint">(GoogleAuthenticator)</text>
  17. <view class="app-box">
  18. <image class="app-icon" src="@/static/images/google.png" mode="aspectFit"></image>
  19. <text class="app-btn">立即安装</text>
  20. </view>
  21. <text class="lable-text">2. 绑定谷歌验证器</text>
  22. <text class="lable-hint">使用谷歌验证器App扫描该二维码或输入密钥</text>
  23. <text class="lable-hint">(GoogleAuthenticator)</text>
  24. <view class="qrcode">
  25. <tki-qrcode ref="qrcodeRef" :size="100" :showLoading="false" :val="codeurl" />
  26. </view>
  27. <view class="copy-box">
  28. <text class="copy-num">{{secret}}</text>
  29. <text v-show="secret" class="copy-icon iconfont" @click.stop="copySecret(secret)">&#xe65f;</text>
  30. </view>
  31. <view class="copy-hint">
  32. 请将16位密钥记录在纸上,并保存在安全的地方,如果遇到手机丢失,您可以通过密钥恢复您的谷歌验证。
  33. </view>
  34. <text class="bind-btn" @click.stop="bind">绑定</text>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. import {
  40. Api_getGoogle
  41. } from "@/api/index.js"
  42. export default {
  43. name: 'Google',
  44. data() {
  45. return {
  46. val: '',
  47. account:'',
  48. secret: "G64DR7OMCFV3KQIM", // 密钥
  49. codeurl: "otpauth://totp/Biking?secret=G64DR7OMCFV3KQIM"
  50. };
  51. },
  52. onLoad(opt) {
  53. this.account = opt?.account
  54. this.getGoogle()
  55. },
  56. mounted() {
  57. this.$refs.qrcodeRef._makeCode()
  58. },
  59. methods: {
  60. getGoogle() {
  61. Api_getGoogle().then(res => {
  62. this.secret = res.secret
  63. this.codeurl = res.codeurl
  64. this.$nextTick(() => {
  65. this.$refs.qrcode._makeCode()
  66. })
  67. })
  68. },
  69. openUrl(){
  70. const url = 'https://www.baidu.com/'
  71. plus.runtime.openWeb(url);
  72. },
  73. copySecret(secret) {
  74. uni.setClipboardData({
  75. data: secret,
  76. success: res => {
  77. uni.showToast({
  78. title:'复制成功',
  79. icon:'none'
  80. })
  81. }
  82. });
  83. },
  84. bind(){
  85. // this.type = opt?.type;
  86. // this.account = opt?.account;
  87. uni.navigateTo({
  88. url:`/pages/login/safety-verification?type=2&account=${this.account}`
  89. })
  90. }
  91. }
  92. }
  93. </script>
  94. <style lang="scss" scoped>
  95. .content-box {
  96. width: 100%;
  97. padding: 20rpx $pages-padding;
  98. display: flex;
  99. flex-direction: column;
  100. .lable-text {
  101. font-size: 32rpx;
  102. font-weight: bold;
  103. line-height: 1.6;
  104. }
  105. .lable-hint {
  106. font-size: 28rpx;
  107. line-height: 1.4;
  108. color: $SizeColor3;
  109. }
  110. .app-box {
  111. width: 100%;
  112. display: flex;
  113. flex-direction: column;
  114. justify-content: center;
  115. align-items: center;
  116. padding: 50rpx 0;
  117. .app-icon {
  118. width: 100rpx;
  119. height: 100rpx;
  120. }
  121. .app-btn {
  122. background-color: $Theme-Color;
  123. width: 200rpx;
  124. height: 70rpx;
  125. text-align: center;
  126. line-height: 70rpx;
  127. font-size: 28rpx;
  128. color: #fff;
  129. border-radius: 10rpx;
  130. margin-top: 40rpx;
  131. }
  132. }
  133. .qrcode {
  134. text-align: center;
  135. padding: 60rpx 0;
  136. }
  137. .copy-box {
  138. width: 100%;
  139. background-color: $bg_02;
  140. height: 80rpx;
  141. display: flex;
  142. justify-content: center;
  143. align-items: center;
  144. .copy-num {
  145. font-size: 26rpx;
  146. font-weight: bold;
  147. }
  148. .copy-icon {
  149. font-size: 28rpx;
  150. color: $Theme-Color;
  151. padding-left: 30rpx;
  152. }
  153. }
  154. .copy-hint {
  155. padding: 10rpx 0;
  156. font-size: 26rpx;
  157. color: $Theme-Color;
  158. }
  159. .bind-btn {
  160. font-size: 28rpx;
  161. width: 100%;
  162. height: 80rpx;
  163. background-color: $Theme-Color;
  164. border-radius: 10rpx;
  165. text-align: center;
  166. line-height: 80rpx;
  167. color: #fff;
  168. margin-top: 20rpx;
  169. }
  170. }
  171. </style>