h5-uniapp/pages/my/safety/Authenticator.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.mine.safety.guge"></myNav>
		
		<view class="width-690 margin-0-auto flex align-start padding-c-40" style="
border-bottom:1px solid rgba(209,211,216,0.4);">
			<image class="width-36 height-36 margin-r-8" src="/static/imgs/my/sousuo@2x.png" mode=""></image>
			<text class="font-28">{{i18n.mine.safety.tips2}}</text>
		</view>
		
		<view class="width-690 margin-0-auto flex direction-column align-center padding-c-40" style="
		border-bottom:1px solid rgba(209,211,216,0.4);">
			<view class="width-690 flex align-start margin-b-20">
				<image class="width-36 height-36 margin-r-8" src="/static/imgs/my/anzhuang@2x.png" mode=""></image>
				<text class="width-640 font-28">{{i18n.mine.safety.tips3}}</text>
			</view>
			<image class="width-300 height-300 radiu-10 margin-b-20" :src="code_url?code_url:'/static/APEClogo@2x.png'" mode=""></image>
			<view class="width-690 height-86 flex align-center justify-center radiu-8" 
			:style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text">
				<text class="margin-r-52 font-32 numbold-font">{{secret}}</text>
				<image @click="copy(secret)" class="width-24 height-24" src="/static/imgs/my/fuzhi@2x.png" mode=""></image>
			</view>
		</view>
		
		<view class="width-690 margin-0-auto padding-c-40" style="
		border-bottom:1px solid rgba(209,211,216,0.4);">
			<view class="flex align-start margin-b-32">
				<image class="width-36 height-36 margin-r-8" src="/static/imgs/my/tianjia@2x.png" mode=""></image>
				<text class="width-640 font-28">{{i18n.mine.safety.tips4}}</text>
			</view>
			
			<view class="width-690">
				<view class="height-86 line-height-86">
					<text class="font-32 bold-font">{{i18n.mine.safety.gugeTitle}}</text>
				</view>
				<view :style="'background-color: '+theme.fu_bg+';color: '+theme.fu_text">
					<input class="width-690 height-86 padding-w-20 radiu-8 font-30 numbold-font" maxlength="6" type="number" v-model="Google_code" :placeholder="i18n.mine.safety.guge6"/>
				</view>
			</view>
		</view>
		
		<button @click="open" :class="Google_code.length==6?'lanBtn':'huiBtn'" class="cu-btn loginBtn">{{i18n.mine.safety.kaiqi}}</button>
		
	</view>
</template>

<script>
	import clipboard from "@/components/clipboard.js"
	export default {
		data() {
			return {
				Google_code:'',
				
				secret:'',
				code_url:'',
				
				flag:true,
				theme:''
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			getInfo(){
				this.post('/google/get_keys').then(res => {
					console.log('谷歌验证',res)
					if(res.code == 1){
						this.secret = res.data.secret
						this.code_url = res.data.code_url
					}
				})
			},
			open(){
				if (!this.flag) return
				
				if (this.Google_code == '') {
					this.tos(this.i18n.mine.safety.inputguge)
					return
				}
				if (this.Google_code.length != 6) {
					this.tos(this.i18n.mine.safety.guge6)
					return
				}
				uni.showLoading({
					title: this.i18n.mine.safety.loading,
					mask:true
				})
				this.flag = false
				this.post('/google/band_secret', {
					secret:this.secret,
					code:this.Google_code
				}).then(res => {
					console.log(res)
					uni.hideLoading()
					this.flag = true
					if (res.code == 1) {
						this.tos(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			},
			// 复制地址
			copy(data) {
				// #ifndef H5
				clipboard.setText(data);
				// #endif
				// #ifdef H5
					  let result
				      let textarea = document.createElement("textarea")
				      textarea.value = data
				      textarea.readOnly = "readOnly"
				      document.body.appendChild(textarea)
				      textarea.select() // 选中文本内容
				      textarea.setSelectionRange(0, data.length) 
				      result = document.execCommand("copy") 
				      textarea.remove()    
				// #endif
				this.tos(this.i18n.mine.share.copySuceed)
			},
		}
	}
</script>

<style lang="scss">
	.huiBtn{
		background: #D1D3D8 !important;
	}
	.lanBtn{
		background: linear-gradient(180deg, #52F3C9 0%, #3ECEB2 100%) !important;
	}
	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		border-radius: 12rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		position: absolute;
		bottom: 5%;
		left: 50%;
		margin-left: -300rpx;
	}
</style>