kunpeng/pages/finance/details.vue

<template>
	<view class="container">
		<view class="logo">
			<image :src="logo"></image>
		</view>
		<view class="select-box flex_item">
			<view @tap="handleTap('picker')">{{title}}</view>
			<lb-picker ref="picker" v-model="value" mode="selector" :list="typeList" :dataset="{ name: 'type' }"
				@change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
			</lb-picker>
			<image src="../../static/img/img37.png"></image>
		</view>
		<view class="list" v-show="list.length > 0">
			<view class="list-box" v-for='(ls,index) in list' :key='index'>
				<view class="flex">
					<view class="list-tpl flex_item">
						<image src="../../static/img/img36.png"></image>
						<view class="tpl-name">{{ls.title}}</view>
					</view>
					<view class='num clamp'>{{ls.number}}</view>
				</view>
				<view class="tpl-time">{{ls.add_time}}</view>
			</view>
		</view>
		<view class="empty-box" v-show="list.length == 0"><empty></empty></view>
		<view class="flex submit-box">
			<view class="submit" @click="recharge">充币</view>
			<view class="tip"></view>
			<view class="submit" @click="withdraw">提币</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="cancel flex" @click="close">
					<view></view>
					<view class="tip">x</view>
				</view>
				<view class="list-boxs">
					<view class="popup-text">购买数量：</view>
					<view class="password"><input type="number" v-model="num" placeholder="请输入算力数量"></view>
					<view class="popup-text">币种选择：</view>
					<view class="content" @click="useOutClickSide">
						<easy-select ref="easySelect" :options='moneyTypeList' :value="name" @selectOne="selectOne"></easy-select>
					</view>
					<view class="confirm-btn" @click="pay"><text>确认充币</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		moneyLog,recharge
	} from '@/api/finance.js';
	import { moneyType } from '@/api/index.js';
	import LbPicker from '@/components/lb-picker'
	import empty from '@/components/empty';
	export default {
		components: {
			LbPicker,
			empty
		},
		data() {
			return {
				code: '',
				title: '筛选',
				type: '',
				value: '',
				index: 0,
				typeList: [],
				list: '',
				num:'',
				moneyTypeList:[],
				money:'',
				name:'',
				logo:'',
				price:'',
				mark:'',
				
				_address_qr:'',
				__money_address:'',
				ids:'',
				keysAddr:''
			};
		},
		onLoad(option) {
			this.code = option.code;
			this.logo = option.logo;
			this.name = option.name;
			this.price = option.price;
			
			this._address_qr = option._address_qr;
			this.__money_address = option.__money_address;
			this.mark = option.mark;
			this.ids = option.ids;
			this.keysAddr = option.keysAddr;
			this.moneyType();
			this.loadData();
		},
		onShow() {

		},
		methods: {
			async loadData() {
				let obj = this;
				moneyLog({
					page: 1,
					limit: 10000,
					type: obj.type,
				}, obj.code).then(({
					data
				}) => {
					obj.typeList = data.type_list;
					obj.list = data.list;
				});
			},
			// 所有币种
			async moneyType(){
				let obj = this;
				moneyType({}).then(({ data }) => {
					obj.moneyTypeList = data;
				});
			},
			pay(){
				let obj = this;
				recharge({
					num:obj.num,
					money_type:obj.code
				},obj.buyId).then(({ data }) => {
					obj.$api.msg(data.msg);
					obj.$refs.popup.close();
					obj.num='';
					obj.code = '';
					uni.navigateTo({
						url:'/pages/finance/recharge?LOGO='+data._address_qr+'&order_id='+data.order_id+'&ddress='+data.__money_address+'&id='+data.id
					})
				}).catch(e => {
					obj.$refs.popup.close();
				});
			},
			selectOne(options) {
				this.name = options.name;
				this.code = options.code;
			},
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				// this.title = e.item.title;
				// this.type = e.item.type;
			},
			handleConfirm(e) {
				this.title = e.item.title;
				this.type = e.item.type;
				this.loadData();
			},
			handleCancel(e) {},
			recharge(){
				uni.navigateTo({
					url:'/pages/finance/recharge?logo='+this.logo+'&name='+this.name+'&code='+this.code+'&_address_qr='+this._address_qr+'&__money_address='+this.__money_address+'&mark='+this.mark+'&ids='+this.ids+'&keysAddr='+this.keysAddr
				})
				// this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			withdraw(){
				uni.navigateTo({
					url:'/pages/finance/withdraw?logo='+this.logo+'&name='+this.name+'&code='+this.code+'&money='+this.price
				})
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background-color: #ffffff;

		.container {
			width: 100%;
			padding: 60rpx 30rpx 120rpx 30rpx;
		}
	}

	.logo {
		text-align: center;

		image {
			width: 119rpx;
			height: 119rpx;
		}
	}

	.select-box {
		position: absolute;
		right: 0;
		padding: 30rpx 30rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;

		image {
			width: 21rpx;
			height: 11rpx;
			margin-left: 15rpx;
		}

		.select-name {
			padding-right: 15rpx;
		}
	}

	.list {
		margin-top: 120rpx;
	}

	.list-box {
		padding: 60rpx 0rpx 30rpx 0rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		.tpl-time {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			width: 100%;
			text-align: right;
			padding-top: 25rpx;
		}
		.list-tpl {
			image {
				width: 39rpx;
				height: 43rpx;
			}
			.tpl-name {
				padding: 0rpx 15rpx 0rpx 30rpx;
			}
		}
		.num {
			font-size: 36rpx;
			font-weight: 400;
			color: #FB3A2F;
			width: 50%;
			text-align: right;
		}
	}
    .empty-box{
    	width: 100%;
    	height:500rpx;
		padding-top: 200rpx;
    }
	.submit-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #5771DF;
		color: #FFFFFF;

		.submit {
			padding: 20rpx 20%;
		}

		.tip {
			width: 2rpx;
			height: 37rpx;
			background: #FFFFFF;
		}

	}
	//弹窗
	.popup{
		background-color: #FFFFFF;
		border-radius: 25rpx;
		font-size: 30rpx;
		.cancel{
			text-align: center;
			width: 100%;
			line-height: 60rpx;
			.tip{
				background-color: #5771DF;
				color: #FFFFFF;
				width:70rpx;
				height: 70rpx;
				border-top-right-radius:25rpx ;
			}
		}
		.list-boxs{
			padding: 0rpx 80rpx;
			.password{
				padding: 50rpx 0rpx;
				width: 100%;
				input{
					width: 70%;
					height: 80rpx;
					border: 2rpx solid #999999;
					padding-left: 25rpx;
					box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.27);
					border-radius:11rpx;
				}
			}
			.confirm-btn{
				padding-bottom: 120rpx;
				padding-top: 30rpx;
				text{
					background-color: #5771DF;
					color: #FFFFFF;
					width: 70%;
					text-align: center;
					padding:25rpx 90rpx;
					border-radius: 15rpx;
				}
			}
		}
	}
</style>