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' @click="nav(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="mation" type="center">
			<view class="popup">
				<view class="cancel flex" @click="close">
					<view class="tip">x</view>
				</view>
				<view class="list-boxs">
					<view class="textBox flex">
						<view class="font">交易前:</view>
						<view class="number">{{ before*1 }} {{code}}</view>
					</view>
					<view class="xian"></view>
					<view class="textBox flex">
						<view class="font">交易额:</view>
						<view class="number">{{ pm }}{{ number*1 }} {{code}}</view>
					</view>
					<view class="xian"></view>
					<view class="textBox flex">
						<view class="font">交易后:</view>
						<view class="number">{{ balance*1 }} {{code}}</view>
					</view>
					<view class="xian"></view>
					<scroll-view scroll-y="true"  class="textBox">
						<view class="font">流水详情：</view>
						<view class="text">
							{{ text }}
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<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:'',
				charge: '',
				
				_address_qr:'',
				__money_address:'',
				ids:'',
				keysAddr:'',
				text:'',
				balance:'',
				before: '',
				number: '',
				pm:'',
			};
		},
		onLoad(option) {
			console.log(option,'1111');
			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.charge = option.charge;
			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+'&=charge'+obj.charge
					})
				}).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+'&charge='+this.charge
				})
				// this.$refs.popup.open();
			},
			close() {
				// this.$refs.popup.close();
				this.$refs.mation.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
				});
			},
			nav(index) {
				const obj = this;
				obj.text = obj.list[index].mark;
				obj.balance = obj.list[index].balance;
				obj.number = obj.list[index].number;
				if(obj.list[index].pm == 1) {
					obj.pm = '+';
					obj.before = parseFloat(obj.balance) - parseFloat(obj.number);
					
				}else{
					obj.pm = '-';
					obj.before = parseFloat(obj.balance) + parseFloat(obj.number);
					
				}
				this.$refs.mation.open();
			}
		}
	};
</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{
		height: 618rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(31, 31, 31, 0.17);
		border-radius: 40rpx;
		width: 700rpx;
		.cancel{
			text-align: center;
			width: 100%;
			line-height: 60rpx;
			position: relative;
			.tip{
				color: #000000;
				width:70rpx;
				height: 70rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		.list-boxs{
			width: 90%;
			margin: 0 auto;
			margin-top: 100rpx;
			
			.textBox {
				padding: 24rpx 18rpx;
				.font {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4F4F4F;
				}
				.number {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FB3A2F;
				}
				.text {
					text-indent:2em;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #4F4F4F;
				}
			}
			.xian {
				width: 100%;
				height: 1px;
				background: #E7DFE8;
			}
			
		}
	}
</style>