第一次提交

2023-03-14 15:39:40 +08:00
parent d659190a9e
commit 0708de8d86
354 changed files with 15675 additions and 2683 deletions
--- a/oilAccount/components/suspensionWindow.vue
+++ b/oilAccount/components/suspensionWindow.vue
@@ -0,0 +1,149 @@
+<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>