You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.7 KiB
150 lines
3.7 KiB
2 years ago
|
<template>
|
||
|
|
<view :style="{transform:`translateX(${ isShow? '0px':'calc(100vw - 90rpx)'})`,borderRadius:`${isShow? '0px':' 20rpx 0 0 20rpx'}`,padding:isShow?'':'0px'}" class="suspensionWindow">
|
||
|
|
<view v-if="!isShow" @click="showFn(true)" class="icon-conter">
|
||
|
|
<uni-icons style="transform: rotate(180deg);" color="#ffffff" custom-prefix="iconfont" type="iconyuechi" size="20"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<view v-else class="suspensionWindow_content">
|
||
|
|
<view class="suspensionWindow_title">授权操作码</view>
|
||
|
|
<view class="suspensionWindow_code">
|
||
|
|
<view @click="copy(operationCode)" class="suspensionWindow_code_text">{{operationCode}}</view>
|
||
|
|
<view v-if="operationCode" style="font-size: 20rpx;">点击复制</view>
|
||
|
|
<view @click="showFn(true)" v-else style="font-size: 30rpx;">重新获取</view>
|
||
|
|
</view>
|
||
|
|
<view class="suspensionWindow_time">
|
||
|
|
<view v-if="countdown">剩余 {{countdown}} 秒</view>
|
||
|
|
<view v-if="!countdown">已过期</view>
|
||
|
|
</view>
|
||
|
|
<uni-icons @click=" showFn(false)" style="position: absolute;right: 10rpx;" color="#ffffff" type="clear" size="30"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import account from '@/api/oilAccount'
|
||
|
|
export default{
|
||
|
|
props:{
|
||
|
|
// operationCode:{
|
||
|
|
// type:String,
|
||
|
|
// default:''
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
countdown:0,
|
||
|
|
operationCode:'',
|
||
|
|
timer:null,
|
||
|
|
isShow:false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onUnload() {
|
||
|
|
console.log('逐渐监听')
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
//显示控制
|
||
|
|
showFn(e){
|
||
|
|
clearInterval(this.timer);//清除定时器
|
||
|
|
this.timer = null;//赋值为null
|
||
|
|
this.operationCode = ''; //清除操作码
|
||
|
|
//如果要打开判断 操作码和计时器状态
|
||
|
|
if(e){
|
||
|
|
this.getCode()
|
||
|
|
}else{
|
||
|
|
this.isShow = e
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//计时器
|
||
|
|
countdownFn(e){
|
||
|
|
this.countdown = e //计数器
|
||
|
|
this.timer = setInterval(()=>{
|
||
|
|
if(!this.countdown){//计数器到0
|
||
|
|
clearInterval(this.timer);//清除定时器
|
||
|
|
this.timer = null;//赋值为null
|
||
|
|
this.operationCode = '' //清除操作码
|
||
|
|
}else{
|
||
|
|
console.log('11')
|
||
|
|
this.countdown-=1
|
||
|
|
}
|
||
|
|
},1000)
|
||
|
|
},
|
||
|
|
copy(text) {
|
||
|
|
uni.setClipboardData({
|
||
|
|
data: `${text}`,
|
||
|
|
success: () => { //复制成功的回调函数
|
||
|
|
uni.showToast({ //提示
|
||
|
|
title: '复制成功'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取操作码
|
||
|
|
getCode(e=false){
|
||
|
|
account.getRechargeCode({type:3}).then(res=>{
|
||
|
|
(res.code==20000)&&(this.operationCode = res.data.code);//操作码赋值
|
||
|
|
this.isShow = true//打开浮窗
|
||
|
|
this.countdownFn(120)//打开定时器
|
||
|
|
})
|
||
|
|
},
|
||
|
|
isShowFn(){
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.suspensionWindow_time{
|
||
|
|
/* flex: 1; */
|
||
|
|
min-width: 140rpx;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.suspensionWindow_code_text{
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 44rpx;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
.suspensionWindow_code{
|
||
|
|
/* height: 140rpx; */
|
||
|
|
position: relative;
|
||
|
|
transition: all .3s;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
.suspensionWindow_title{
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 28rpx;
|
||
|
|
/* flex: 1; */
|
||
|
|
}
|
||
|
|
.suspensionWindow_content{
|
||
|
|
display: flex;
|
||
|
|
/* justify-content: space-around; */
|
||
|
|
width: 100%;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.icon-conter{
|
||
|
|
width: 90rpx;
|
||
|
|
height:100% ;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.suspensionWindow{
|
||
|
|
position: fixed;
|
||
|
|
width: 100vw;
|
||
|
|
height: 110rpx;
|
||
|
|
bottom: env(safe-area-inset-bottom);
|
||
|
|
background-color: #FF4A4A;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
/* transform: translateX(calc(100vw - 90rpx)); */
|
||
|
|
transition: all .3s;
|
||
|
|
border-radius: 20rpx 0 0 20rpx ;
|
||
|
|
/* padding: 0 60rpx; */
|
||
|
|
/* justify-content: center; */
|
||
|
|
padding-right: 90rpx;
|
||
|
|
padding-left: 90rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|