wwbsr/pages/flash/index.vue

<template>
	<v-page>
		<v-header class="nav-head" :title="$t('flash.a1')">
			<template #right>
				<v-link to="./record">
					<van-icon class="fn-20 m-t-xs" name="todo-list-o" />
				</v-link>
			</template>
		</v-header>
		<view class="layout-main p-x-lg p-t-lg">
			<view class="panel-box  rounded p-x-md bg-panel-3 box-shadow p-t-md p-b-lg">
				<view style="position: relative;">
					<view class="label fn-sm color-gray-6">{{$t('flash.a2')}}</view>
					<view >
						<view class="d-flex  rounded-xs">
						    <v-picker :list="fromList" @change="changeFromIndex" :value="fromList[fromIndex]&&fromList[fromIndex].expend_coin_name" range-value="expend_coin_name" range-label="expend_coin_name"  class="form-input p-y-xs w-80 m-r-xs ">
						        <view class="d-flex align-center justify-between">
								   {{fromList[fromIndex]&&fromList[fromIndex].expend_coin_name}}
						            <van-icon name="arrow-down" />
						        </view>
						    </v-picker>
						    <view class="border-b flex-fill d-flex align-center">
						        <v-input :placeholder="`${fromList[fromIndex]&&fromList[fromIndex].convert_min}-${fromList[fromIndex]&&fromList[fromIndex].convert_max}`" v-model="form.amount" type="number" class="flex-fill color-light form-input w-max p-y-xs d-flex" />
								<view class="all color-theme-1 m-l-md flex-shrink" @click="form.amount = fromList[fromIndex]&&fromList[fromIndex].balance">{{ $t("assets.c3") }}</view>
							</view>
						</view>
						<view class="label fn-sm color-gray-6 p-y-xs">{{$t('flash.a3')}}：{{fromList[fromIndex]&&fromList[fromIndex].balance}}</view>
					</view>
					
					<view class="label fn-sm color-gray-6" style="padding-top:40px;">{{$t('flash.a4')}}</view>
					<view class="d-flex  rounded-xs">
					    <v-picker :list="toList" @change="changeToIndex" :value="toList[toIndex]&&toList[toIndex].value" range-value="value" range-label="label"  class="form-input p-y-xs w-80 m-r-xs ">
					        <view class="d-flex align-center justify-between" v-if="toList[toIndex]&&toList[toIndex].label">
					          {{toList[toIndex].label}}
					            <van-icon name="arrow-down" />
					        </view>
					    </v-picker>
					    <view class="border-b flex-fill">
					        <v-input  disabled  type="number" class="color-light form-input w-max p-y-xs d-flex" />
						</view>
					</view>
					<!-- <view class="exchange d-flex justify-center align-center bg-panel-3 box-shadow link-active"
						@click="swap">
						<van-icon style="transform:rotateZ(90deg)" class="fn-22 color-light" name="exchange" />
					</view> -->
				</view>
				
				<view  class="btn d-flex justify-center align-center fn-15" style="margin-top:60rpx;" @click="show()">{{$t('flash.a5')}}</view>
			</view>
		</view>
		<van-popup
		  :show="showPopup"
		  round
		  closeable
		  custom-style="min-height: 20%"
		  position="bottom"
		  @close="showPopup=false"
		>
			<view class="fn-15" style="padding:60rpx 40rpx 80rpx;">
				<view class="fn-15 d-flex justify-center" style="font-weight: bold;">{{$t('flash.b1')}}</view>
				<div class="item  m-md rounded-sm">
					<div class="p-x-md p-y-xs">
						<div class="row d-flex m-y-mini justify-between p-y-xs">
							<div class="label ">{{$t('flash.b2')}}</div>
							<div class="color-light d-flex align-center">
								<div style="color: green;">{{data.amount}}</div>
							</div>
						</div>
						<div class="row d-flex m-y-mini justify-between p-y-xs">
							<div class="label ">{{$t('flash.b3')}}</div>
							<div class="color-light d-flex align-center">
								<div style="color: green;">{{data.realtime}}</div>
							</div>
						</div>
						<div class="row d-flex m-y-mini justify-between p-y-xs">
							<div class="label">{{$t('flash.b4')}}</div>
							<div class="color-light">{{$t('flash.b5')}}</div>
						</div>
						<div class="row d-flex m-y-mini justify-between p-y-xs">
							<div class="label">{{$t('flash.b6')}}</div>
							<div class="color-light">{{$t('flash.b7')}}</div>
						</div>
						<div class="row d-flex m-y-mini justify-between p-y-xs">
							<div class="label">{{$t('flash.b8')}}</div>
							<div class="color-light">1{{data.expend_coin_name}}≈{{data.unit}}{{data.receipt_coin_name}}</div>
						</div>
					</div>
				</div>
				<view class="d-flex align-center justify-around" v-if="data.status == 1">
					<view  class="btn d-flex justify-center align-center fn-15" style="margin-top:60rpx;background: #DD3F62;width:100%" @click="setStore()">
						<view>{{$t('flash.b9')}}</view>
						<view v-if="countdowns" style="margin-left:20rpx">{{countdowns}}sec</view>
					</view>
				</view>
				<view class="d-flex align-center justify-around" v-if="data.status == 0">
					<view  class="btn d-flex justify-center align-center fn-15" style="margin-top:60rpx;background: #ccc;width:100%">{{$t('flash.c1')}}</view>
				</view>
				<view class="d-flex align-center justify-around" v-if="data.status == 3">
					<view   class="btn d-flex justify-center align-center fn-15" style="margin-top:60rpx;background: #ccc;width:40%" @click="showPopup=false">{{$t('flash.c2')}}</view>
					<view  class="btn d-flex justify-center align-center fn-15" style="margin-top:60rpx;background: #DD3F62;width:40%" @click="show()">{{$t('flash.c3')}}</view>
				</view>
			</view>
		</van-popup>
	</v-page>
</template>

<script>
	import Convert from "@/api/convert.js";
	import {
		mapGetters
	} from "vuex";
	import lodash from "lodash";
	export default {
		data() {
			return {
				showPopup:false,
				form: {
					from_account: 1,
					to_account: 2,
					amount: ''
				},
				fromList:[],
				fromIndex:0,
				toIndex:0,
				toList:[],
				data:[],
				ttl:0,
				timer: null, //重复执行
				countdowns:0
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				Convert.walletList().then(res=>{
					this.fromList = res.data
					this.fromIndex = 0
					for (let i in this.fromList) {
						if(this.fromList[i].receipt_coin_name&&this.fromList[i].receipt_coin_name.length){
							this.fromList[i].toList = []
							for (let j in this.fromList[i].receipt_coin_name) {
								this.fromList[i].toList.push({
									value:j,
									label:this.fromList[i].receipt_coin_name[j]
								})
							}
						}
					}
					this.toList = this.fromList[this.fromIndex].toList
					this.toIndex = 0
				})
			},
			changeFromIndex(value,index){
				this.fromIndex = index
				this.toList = this.fromList[this.fromIndex].toList
				this.toIndex = 0
			},
			changeToIndex(value,index){
				this.toIndex = index
			},
			show(){
				let convert_min = this.fromList[this.fromIndex].convert_min*1;
				let convert_max = this.fromList[this.fromIndex].convert_max*1;
				let expend_coin_name = this.fromList[this.fromIndex].expend_coin_name;
				let label = this.toList[this.toIndex].label;
				let amount = this.form.amount * 1;
				if(amount == null || amount==undefined || amount==''){
					this.$toast(this.$t('flash.c4'))
					return false;
				}
				if(amount < convert_min|| amount>convert_max){
					this.$toast(this.$t('flash.c4'))
					return false;
				}
				if(expend_coin_name === label){
					this.$toast(this.$t('flash.c5'))
					return false;
				}
				Convert.getPriceRate({expend_coin_name:expend_coin_name,receipt_coin_name:label,amount:amount}).then((res)=>{
					if(res.code == 200){
						this.data = res.data
						this.ttl = res.data.ttl
						this.countdowns = this.ttl
						if(res.data.status==1 && res.data.ttl){
							this.showtime(this.ttl)
						}
						this.showPopup = true
					}
				})
			},
			 showtime (ttl) {
				this.timer = setInterval(()=>{
					ttl-=1
					this.countdowns = ttl
					if(ttl<=0){
						this.data.status = 3;
						clearInterval(this.timer)
					}
				},1000)
			},
			
			setStore(){
				let data = {
					expend_coin_name:this.fromList[this.fromIndex].expend_coin_name,
					receipt_coin_name:this.toList[this.toIndex].label,
					amount:this.form.amount * 1,
					co:this.data.co
				};
				Convert.setStore(data).then((res)=>{
					if(res.code == 200){
						this.getList()
						this.showPopup = false
						this.$toast(this.$t('flash.c6'))
					}
				})
			}

		}

		
	}
</script>

<style lang="scss" scoped>
	.panel-box {
		position: relative;
	
		.line {
			position: absolute;
			height: 100%;
			width: 1px;
			background: $border-color;
			transform: scale(0.5);
			top: 0;
	
			&::before,
			&::after {
				content: "";
				display: inline-block;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 12px;
				height: 12px;
				border-radius: 50%;
			}
	
			&::before {
				top: 0;
				background: $blue;
			}
	
			&::after {
				bottom: 0;
				background: $red;
			}
		}
	
		.exchange {
			position: absolute;
			left: 50%;
			top: 56%;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			transform: translate(-50%,-50%);
		}
	}
	.btn{
		background: #DD3F62;
		border-radius: 20rpx;
		min-height:80rpx;
		color: #fff;
	}
</style>