nzhbsr/pages/transaction/bbjy.vue

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="vheight"></view>
		<!-- #endif -->
		<view class="usdtTitle flex">
			<view class="left flex">
				<image @click="alertShow = true" class="img margin-r-10" src="../../static/icon/hy02.png" mode="widthFix"></image>
				<view class="margin-r-10">{{ listOBj[actionList].name }}</view>
				<view :class="{ 'font-color-green': listOBj[actionList].bool, 'font-color-red': !listOBj[actionList].bool }">{{ listOBj[actionList].dcf }}</view>
			</view>
			<view class="right"><image class="img" src="../../static/icon/hy01.png" mode="widthFix"></image></view>
		</view>
		<view class="box  flex padding-t-20 padding-b-30">
			<view class="item" style="width: 65%;">
				<view class="itemTitle margin-b-20">{{$t('hy.jyfx')}}</view>
				<view class="buttomBox flex">
					<view @click="typeIndex = 1" class="buttom " :class="{ action: typeIndex == 1 }">{{$t('hy.mr')}}</view>
					<view @click="typeIndex = 2" class="buttom " :class="{ action: typeIndex == 2, 'bg-danger': typeIndex == 2 }">{{$t('hy.mc')}}</view>
				</view>
				<view class="tabType flex ">
					<view class="tab" @click="jyType = 1" :class="{ action: jyType == 1 }">{{$t('hy.xjwt')}}</view>
					<view class="tab" @click="jyType = 2" :class="{ action: jyType == 2 }">{{$t('hy.sjwt')}}</view>
				</view>
				<view class="inputBox margin-b-20 flex" v-if="jyType == 1">
					<input v-model="xzMoney" class="input" placeholder="請輸入價格" type="digit" />
					<view @click="xzMoney = listOBj[actionList].last" class="buttomZd font-color-yellow">{{$t('hy.djhq')}}</view>
				</view>
				<view class="inputBox margin-b-20 flex" v-if="jyType == 2" style="background-color: #f5f5f5;">
					<input class="input" placeholder="按市場最優價" type="digit" disabled />
				</view>
				<view class="itemTitle  margin-b-20" v-if="typeIndex == 2">
					交易個數
					<text @click="payNum = yue">全部交易</text>
				</view>
				<view class="inputBox flex margin-b-20" v-if="typeIndex == 2">
					<input v-model="payNum" class="input" placeholder="請輸入交易數量" type="digit" />
					<view class="rightInputBox flex">
						<image @click="payNum > 0 ? payNum-- : false" class="img" src="../../static/icon/hy04.png" mode="scaleToFill"></image>
						<view class="jg"></view>
						<image @click="payNum++" class="img" src="../../static/icon/hy03.png" mode="scaleToFill"></image>
					</view>
				</view>
				<!-- <view class="itemTitle margin-b-20">
					槓桿倍數
				</view>
				<view class="itemLeftList flex margin-b-20">
					<view class="ll" @click="changeGG(ind,ls)" :class="{action:ind==ggIndex}"
						v-for="(ls,ind) in ggList">
						{{ls.num}}
					</view>
				</view>
				<view class="inputBox flex margin-b-20">
					<input v-model="ggBs" class="input" placeholder="請輸入槓桿倍率" type="number">
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">
						止損價
					</view>
					<view class="inputBox flex">
						<input v-model="zsMoney" placeholder="請輸入止損價格" class="input" type="number">
					</view>
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">
						止盈價
					</view>
					<view class="inputBox flex">
						<input v-model="zyMoney" placeholder="請輸入止盈價格" class="input" type="number">
					</view>
				</view>
				<view class="flex margin-b-20">
					<view class="itemTitle">
						保證金
					</view>
					<view class="itemTitle">
						{{bzjMoney}}
					</view>
				</view> -->
				<view class="" v-if="typeIndex == 1" style="height: 160rpx;"></view>
				<view class="" v-if="typeIndex == 2" style="height: 120rpx;"></view>
				<view class="flex margin-b-20">
					<view class="itemTitle">{{$t('hy.ky')}}</view>
					<view class="itemTitle" v-if="typeIndex == 1">{{ userInfo.usdt }} USDT</view>
					<view class="itemTitle" v-if="typeIndex == 2">{{ yue }} {{ dqbz }}</view>
				</view>
				<view class="inputBox margin-b-20 flex" v-if="typeIndex == 1">
					<input class="input" :placeholder="$t('hy.jye')" type="digit" v-model="jye" />
					<view class="all" @click="jye = userInfo.usdt">{{$t('hy.qb')}}</view>
					<view class="">{{ dhbz }}</view>
				</view>
				<!-- <view class="flex margin-b-20">
					<view class="itemTitle">
						手續費
					</view>
					<view class="itemTitle">
						{{sxfMoney}}
					</view>
				</view> -->
				<view class="buttomSubmit" :class="{ 'bg-success': typeIndex == 1, 'bg-danger': typeIndex == 2 }" @click="UpOrderHandle()">
					{{ typeIndex == 1 ?$t('hy.mr'): $t('hy.mc')}}
				</view>
			</view>
			<view class="right-wrap">
				<view class="line flex">
					<view class="">{{$t('hy.jg')}}</view>
					<view class="">{{$t('hy.sl')}}</view>
				</view>
				<!-- 買入 -->
				<view class="" style="height: 250rpx;">
					<view class="line flex" v-for="item in gmList" style="color: #0ecb81;">
						<view class="">{{ (item.price*1).toFixed(5) }}</view>
						<view class="">{{( item.num*1).toFixed(5) }}</view>
					</view>
				</view>

				<!-- 當前價格 -->
				<view class="new-price">{{ listOBj[actionList].last }}</view>
				<!-- 賣出 -->
				<view class="" style="height: 250rpx;">
					<view class="line flex" v-for="item in mcList" style="color: #f7465c;">
						<view class="">{{ (item.price*1).toFixed(5) }}</view>
						<view class="">{{( item.num*1).toFixed(5) }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box margin-t-30 padding-t-30 padding-b-30">
			<view class="flex listTitleBox">
				<view class="leftBottom flex">
					<view @click="ddTypeChage(0)" class="titleType margin-r-30" :class="{ action: ddType == 0 }">{{$t('hy.xjwt')}}</view>
					<!-- <view @click="ddTypeChage(1)" class="titleType" :class="{action:ddType==1}">
						持倉
					</view> -->
				</view>
				<view class="rightBottom flex" @click="navto('/pages/transaction/bblist?type=' + dqbz)">
					<image class="img" src="../../static/icon/hy02.png" mode="widthFix"></image>
					<view class="more">{{$t('hy.qbdd')}}</view>
				</view>
			</view>
			<view v-for="(item, ind) in loadData[ddType].list" class="usdtList padding-t-30 padding-b-30">
				<view class="flex">
					<view class="name">
						<text v-if="item.type == 1" class="font-color-green">{{$t('hy.gm')}}</text>
						<text v-if="item.type == 2" class="font-color-red">{{$t('hy.cs')}}</text>
						<text>{{ item.symbol }}</text>
					</view>
					<view @click="clearorder(item)" v-if="ddType == 0" class="usdtListButtom">取消</view>
				</view>
				<view class="tip ">
					<text v-if="item.direction == 1">{{$t('hy.wtsj')}}：{{ item.wttime }}</text>
					<text v-if="item.direction == 2">{{$t('hy.kcsj')}}：{{ item.addtime }}</text>
				</view>
				<view class="flex" style="flex-wrap: wrap;">
					<view class="tipList">
						<view class="nameTip">{{$t('hy.jg')}}(USDT)</view>
						<view class="text">{{ item.xjprice }}</view>
					</view>
					<view class="tipList">
						<view class="nameTip">{{$t('hy.sl')}}(USDT)</view>
						<view class="text">{{ item.usdtnum }}</view>
					</view>
					<view class="tipList">
						<view class="nameTip">{{$t('hy.sjdz')}}(USDT)</view>
						<view class="text">{{ item.coinnum }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="alertBox" v-show="alertShow">
			<!-- #ifdef APP-PLUS -->
			<view class="vheight"></view>
			<!-- #endif -->
			<view class="reback"><image src="../../static/icon/reback.png" mode="" @click="alertShow = false"></image></view>
			<view class="list flex">
				<view class="type">{{$t('hy.cp')}}</view>
				<view class="type">{{$t('hy.ssjg')}}</view>
				<view class="type">{{$t('hy.jrdz')}}</view>
			</view>
			<view class="itemlist flex" @click="changeData(ls)" v-for="ls in listOBj">
				<view class="type name">{{ ls.name }}</view>
				<view class="type money" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.last }}</view>
				<view class="type bfb" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.dcf }}</view>
			</view>
			<!-- <view class="itemlist flex" @click="changeData(ls)" v-for="ls in listOBj" v-if="ls.name == 'BCH/USDT'">
				<view class="type name">{{ ls.name }}</view>
				<view class="type money" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.last }}</view>
				<view class="type bfb" :class="{ 'font-color-green': ls.bool, 'font-color-red': !ls.bool }">{{ ls.dcf }}</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import {
	levertadeLaverorder,
	closeorder,
	// clearorder,
	UpOrderHandle,
	bond
} from '@/api/heyue.js';
import { scoketNew, scoketOpen } from '@/utils/socket.js';
import { geLevertade } from '@/api/index.js';
import { getUser, bauhinia, upbbbuy, upbbsell, tradebill, clearorder,gcb } from '@/api/login.js';
export default {
	data() {
		return {
			// 兌換幣種
			dhbz: '',
			//當前幣種
			dqbz: '',
			// 當前幣種餘額
			yue: '',
			// 交易額
			jye: '',
			// 是否显示弹窗
			alertShow: false,
			//保存幣種類型
			spList: [],
			// 右侧允许的最长长度
			listLength: 20,
			// 当前选中的对象数据列表
			// actionList: 'BCH-USDT',
			actionList: 'BTC-USDT',
			// 價格列表
			listOBj: {
				'BCH-USDT': {},
				'BTC-USDT': {},
				'BCH-USDT': {},
				'GCB-USDT': {}
			},
			// 当前选中的杠杆倍数
			ggIndex: 0,
			ggList: [
				{
					num: 5
				},
				{
					num: 10
				},
				{
					num: 20
				},
				{
					num: 50
				},
				{
					num: 100
				}
			],
			//当前选中的交易类别
			typeIndex: 1,
			// 交易类型
			jyType: 1,
			//交易数量
			payNum: 0,
			// 杠杆倍数
			ggBs: 0,
			// 限价委托价格
			xzMoney: 0,
			// 止损价格
			zsMoney: 0,
			// 止盈价格
			zyMoney: 0,
			// 保證金
			bzjMoney: 0,
			// 手續費
			sxfMoney: 0,
			ddType: 0, //1委托订单2持仓订单3成交订单
			loadData: [
				{
					state: 1,
					text: '限价委托',
					loadingType: 'more',
					list: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 2,
					text: '持仓',
					loadingType: 'more',
					list: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			],
			setTimeoutObj: '',
			// 是否提交做多請求
			upDataLoding: false,
			gmList: [],
			mcList: [],
			gmobj: {},
			mcobj: {}
		};
	},
	watch: {
		ggBs(newValue, oldValue) {
			this.ggBs = newValue;
			this.bond();
		},
		payNum(newValue, oldValue) {
			this.payNum = newValue;
			this.bond();
		}
	},
	filters: {
		actionMoney: function(value) {
			let num = 0;
			if (+value > 10000000) {
				num = +(value / 10000000).toFixed(2) + '千萬';
			} else if (+value > 10000) {
				num = +(value / 10000).toFixed(2) + '萬';
			}

			return num;
		}
	},
	onLoad(opt) {
		if (opt.type) {
			this.actionList = opt.type;
			this.bauhinia(bauhinia);
		}
		if (opt.current) {
			this.typeIndex = opt.current;
		}
		// 初始化保存BCH对象
		this.levertadeLaverorder();
	},
	onShow: function() {
		this.geLevertade();
		this.initListData();
		
		console.log(this.userInfo);
	},
	onHide() {
		this.closeScoket();
		clearInterval(this.setTimeoutObj);
	},
	onReachBottom() {
		this.levertadeLaverorder();
	},
	onReady() {
		console.log(this.userInfo);
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	methods: {
		...mapMutations('user', ['login', 'setUserInfo']),
		gcb() {
			let that = this
			gcb().then(res => {
				console.log(res)
				// let data = res.data
				that.listOBj[res.data.name] = res.data
				const item = that.listOBj[res.data.name]
				item.instId = item.name
				item.name = item.instId.replace('-','/')
				item.dcf = (((item.last * 1 - item.sodUtc0 * 1) / (item.sodUtc0 * 1)) * 100).toFixed(2);
				item.bool = item.last - item.sodUtc0 > 0 ? true : false;
				// that.listOBj[data.name].name = name
				// that.listOBj[data.name].instId = data.name
				// console.log(data.name,'that.listOBj[data.name].instId')
				if(item.instId == that.actionList) {
					this.gmList = item.purchase
					this.mcList = item.sell
				}
				console.log(that.listOBj, 'that.listOBj')
			})
		},
		// 獲取幣種詳情
		bauhinia() {
			let obj = this;
			let a = obj.actionList.split('-');
			obj.dqbz = a[0];
			obj.dhbz = a[1];
			bauhinia({
				name: obj.dqbz
			})
				.then(res => {
					console.log(res);
					obj.yue = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 提交訂單
		UpOrderHandle() {
			const that = this;
			if (this.upDataLoding) {
				return;
			}
			uni.showLoading({
				title: '提交中',
				mask: true
			});
			this.upDataLoding = true;

			// {{typeIndex==1?'買入':'賣出'}}
			if (that.typeIndex == 1) {
				// 買入
				upbbbuy({
					symbol: that.listOBj[that.actionList].name,
					mprice: that.jyType == 2 ? that.listOBj[that.actionList].last : that.xzMoney,
					musdt: that.jye,
					buytype: that.jyType //1现价委托2市价委托
				})
					.then(res => {
						uni.hideLoading();
						that.jye = '';
						that.xzMoney = '';
						that.upDataLoding = false;
						uni.showModal({
							title: '提示',
							content: '交易成功',
							confirmText: '確認',
							showCancel: false
						});
						that.levertadeLaverorder();
					})
					.catch(err => {
						that.jye = '';
						that.xzMoney = '';
						this.upDataLoding = false;
					});
			}
			if (that.typeIndex == 2) {
				// 賣出
				upbbsell({
					symbol: that.listOBj[that.actionList].name,
					mprice: that.jyType == 2 ? that.listOBj[that.actionList].last : that.xzMoney,
					mnum: that.payNum,
					selltype: that.jyType //1现价委托2市价委托
				})
					.then(res => {
						uni.hideLoading();
						that.upDataLoding = false;
						that.mnum = '';
						that.xzMoney = '';
						uni.showModal({
							title: '提示',
							content: '交易成功',
							confirmText: '確認',
							showCancel: false
						});
						that.levertadeLaverorder();
					})
					.catch(err => {
						that.mnum = '';
						that.xzMoney = '';
						that.upDataLoding = false;
					});
			}
			// that.bond().then(() => {
			// 	UpOrderHandle({
			// 		direction: that.typeIndex,
			// 		type: that.jyType,
			// 		symbol: that.listOBj[that.actionList].name,
			// 		mprice: that.jyType == 2 ? that.listOBj[that.actionList].last : that.xzMoney,
			// 		ggan: that.ggBs,
			// 		num: that.payNum,
			// 		upbondmoney: that.bzjMoney,
			// 		fee: that.sxfMoney,
			// 		zyprice: that.zyMoney,
			// 		zsprice: that.zsMoney,
			// 	}).then((e) => {
			// 		uni.hideLoading()
			// 		that.upDataLoding = false;
			// 		uni.showModal({
			// 			title: '提示',
			// 			content: that.jyType == 1 ? "掛單成功" : "交易成功",
			// 			confirmText: '確認',
			// 			showCancel: false,
			// 		});
			// 		obj.levertadeLaverorder();
			// 	}).catch(() => {
			// 		uni.hideLoading()
			// 		that.upDataLoding = false;
			// 	})
			// }).catch(() => {
			// 	uni.hideLoading()
			// 	that.upDataLoding = false;
			// })
		},
		// 修改当前选中的数据对象
		changeData(item) {
			console.log(item, 'qh');
			this.actionList = item.instId;
			this.gmList = [];
			this.mcList = [];
			this.alertShow = false;
			this.bauhinia();
		},
		// 獲取保證金
		bond() {
			const taht = this;
			return new Promise((resolve, rejact) => {
				bond({
					name: taht.actionList.split('-')[0],
					num: taht.payNum,
					gann: taht.ggBs
				})
					.then(e => {
						taht.sxfMoney = e.data.fee;
						taht.bzjMoney = e.data.bong ? e.data.bong : 0;
						console.log(e);
						resolve();
					})
					.catch(() => {
						rejact();
						console.log(e);
					});
			});
		},
		//循環獲取數據
		initListData() {
			this.setTimeoutObj = setInterval(() => {
				this.levertadeLaverorder();
			}, 2000);
		},
		// 獲取幣種列表
		geLevertade() {
			uni.showLoading({
				title: '數據加載中...',
				mask: true
			});
			const that = this;
			geLevertade().then(e => {
				that.spList = e.list;
				// 开启长连接
				that.onScoket();
			});
		},
		// 开始请求长连接
		onScoket() {
			const that = this;
			that.scoket = scoketNew('wss://wsaws.okx.com:8443/ws/v5/public');
			that.scoket.scoketOpen().then(res => {
				uni.hideLoading();
				const requestList = that.spList.map(e => {
					return {
						channel: 'tickers',
						instId: e.coinname.toUpperCase() + '-USDT'
					};
				});
				that.scoket
					.scoketSend({
						op: 'subscribe',
						args: requestList
					})
					.then(res => {
						console.log(res, '发送成功');
					});
				that.scoket.scoketMessage(res => {
					try {
						if (res.data) {
							// 判断是否已经有这个对象
							// console.log(res.arg.instId, 'id', that.listOBj);
							that.listOBj[res.arg.instId] = res.data[0];
							const item = that.listOBj[res.arg.instId];
							// 转为数字
							item.last = +item.last;
							item.sodUtc0 = +item.sodUtc0;
							// 保存收益情况
							item.bool = item.last - item.sodUtc0 > 0 ? true : false;
							// 算出收益率
							item.dcf = +(((item.last - item.sodUtc0) / item.sodUtc0) * 100).toFixed(2) + '%';
							item.name = item.instId.replace('-', '/');
							if (that.actionList == item.instId) {
								that.gmList.unshift({
									price: (item.bidPx * 1).toFixed(5),
									num: (item.bidSz * 1).toFixed(5)
								});
								that.gmList = that.gmList.slice(0, 6);
								that.mcList.unshift({
									price: (item.askPx * 1).toFixed(5),
									num: (item.askSz * 1).toFixed(5)
								});
								that.mcList = that.mcList.slice(0, 6);
							}

							that.listOBj = Object.assign({}, that.listOBj);
							console.log(that.listOBj, 'that.listOBj');
						}
					} catch (e) {
						console.log(res, res.data, '报错');
					}
				});
			});
		},
		closeScoket() {
			this.scoket.scoketClose();
		},
		// 平倉
		closeorder(item) {
			const that = this;
			uni.showModal({
				title: '平倉',
				content: '是否立即平倉，確認後不可修改',
				confirmText: '確認',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '請求中...',
							mask: true
						});
						closeorder({
							id: item.id
						})
							.then(e => {
								uni.hideLoading();
								uni.showToast({
									title: '平倉成功',
									icon: 'success'
								});
								that.ddTypeInit();
							})
							.catch(() => {
								uni.hideLoading();
							});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 撤銷
		clearorder(item) {
			const that = this;
			uni.showModal({
				title: '取消',
				content: '是否立即取消，確認後不可修改',
				confirmText: '確認',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '請求中...',
							mask: true
						});
						clearorder({
							oid: item.id
						})
							.then(e => {
								uni.hideLoading();
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								});
								that.ddTypeInit();
							})
							.catch(() => {
								uni.hideLoading();
							});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		// 获取订单商品
		levertadeLaverorder(source) {
			//这里是将订单挂载到tab列表下
			let index = this.ddType;
			let navItem = this.loadData[index];
			let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			// if (navItem.loadingType === 'noMore') {
			// 	//防止重复加载
			// 	return;
			// }
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			// uni.showLoading({
			// 	title: '數據加載中',
			// 	mask: true
			// });
			tradebill({
				type: state
			})
				.then(({ data }) => {
					// console.log(res,'5555555')
					// uni.hideLoading()
					// let arr = list.map(e => {
					// 	e.direction = +e.direction;
					// 	e.bond = +e.bond
					// 	e.price = +e.price
					// 	e.wt_price = +e.wt_price
					// 	return e;
					// });
					navItem.list = data;
					navItem.loadingType = 'more';
					this.$set(navItem, 'loaded', true);
					this.getUser();
					this.gcb()
				})
				.catch(e => {
					// uni.hideLoading()
					console.log(e);
				});
		},
		// 修改杠杆倍数
		changeGG(ind, item) {
			this.ggBs = item.num;
			this.ggIndex = ind;
		},
		// 列表切换
		ddTypeChage(ind) {
			this.ddType = ind;
			this.levertadeLaverorder('tabChange');
		},
		// 初始化重新加載
		ddTypeInit() {
			// 初始化數據
			let item = this.loadData[this.ddType];
			item.loadingType = 'more';
			item.list = [];
			item.page = 1;
			item.limit = 10;
			item.loaded = false;
			this.levertadeLaverorder();
		},
		navto(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		getUser() {
			getUser().then(re => {
				this.setUserInfo(re.data);
			});
		}
	}
};
</script>

<style lang="scss">
.usdtTitle,
.box {
	padding: 0 20rpx;
	width: 750rpx;
	background-color: #ffffff;
}

.usdtTitle {
	border-bottom: 1px solid $border-color-light;
	line-height: 1;

	.left {
		font-size: 32rpx;
		font-weight: bold;

		.img {
			width: 36rpx;
		}
	}

	.right {
		.img {
			width: 48rpx;
		}
	}
}

.box {
	line-height: 1;
	align-items: flex-start;

	.itemTitle {
		font-weight: bold;
		font-size: $font-sm;
		text {
			display: inline-block;
			margin-left: 10rpx;
			color: red;
		}
	}

	.item {
		// flex-grow: 1;
		// width: 50%;
		flex-shrink: 0;
	}

	.buttomBox {
		font-size: $font-sm;

		.buttom {
			width: 350rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 10rpx;
			background-color: #f5f5f5;

			&.action {
				color: #ffffff;
				background-color: $color-green;
			}
		}
	}

	.tabType {
		justify-content: space-around;

		.tab {
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			color: #545d6f;
			font-size: $font-sm;
			font-weight: bold;

			&.action {
				color: $uni-color-warning;
			}
		}
	}

	.inputBox {
		height: 60rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border: 1px solid $border-color-light;

		.buttomZd {
			font-size: $font-sm;
		}

		.input {
			font-size: $font-sm;
			flex-grow: 1;
			// width: 50%;
		}
		.all {
			width: 60rpx;
			margin-right: 6rpx;
			font-size: $font-sm;
			color: red;
		}
		.rightInputBox {
			.jg {
				border: 1px solid $border-color-light;
				height: 50rpx;
				margin: 0 30rpx;
			}

			.img {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.itemLeftList {
		justify-content: space-around;

		.ll {
			border: 1px solid $border-color-light;
			width: 74rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: $font-sm;
			font-weight: bold;

			&.action {
				background-color: #f5f5f5;
			}
		}
	}

	.buttomSubmit {
		color: #ffffff;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: $font-sm;
		border-radius: 10rpx;
	}

	.itemName {
		.itemMinName {
			width: 20%;
			font-size: 22rpx;
			color: #5d6677;
		}
	}

	.itemList {
		.list {
			font-size: 20rpx;
			padding: 10rpx 0;

			.li {
				width: 20%;
			}
		}

		.llMax {
			padding: 30rpx 0;
			font-weight: bold;
			font-size: $font-lg;
		}
	}

	.listTitleBox {
		border-bottom: 1px solid $border-color-light;
		align-items: flex-start;

		.leftBottom {
			flex-shrink: 0;
			font-size: $font-lg;
			font-weight: bold;

			.action {
				border-bottom: 2px solid $uni-color-warning;
			}

			.titleType {
				padding-bottom: 20rpx;
			}
		}

		.rightBottom {
			font-size: $font-base;
			color: #707a8a;
			flex-shrink: 0;

			.img {
				width: 36rpx;
			}
		}
	}

	.usdtList {
		color: #707a8a;
		border-bottom: 1px solid $border-color-light;

		.name {
			font-size: $font-lg;
			font-weight: bold;
		}

		.usdtListButtom {
			font-size: $font-base;
			background-color: #f5f5f5;
			color: $uni-color-warning;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
		}

		.tip {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			font-size: $font-base;
		}

		.tipList {
			font-size: $font-sm;
			text-align: center;
			width: 33%;
			padding-top: 20rpx;

			.nameTip {
				padding-bottom: 20rpx;
			}
		}
	}
}

.alertBox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	text-align: center;
	color: #707a8a;

	.reback {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		padding-left: 10rpx;
		padding-top: 10rpx;

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

	.type {
		width: 30%;
		flex-grow: 1;
	}

	.itemlist {
		padding-top: 20rpx;

		.name {
			padding-left: 20rpx;
			text-align: left;
		}
	}

	.list {
		padding: 30rpx 0;
		border-bottom: 1px solid $border-color-light;

		.type {
			font-size: $font-lg;
			font-weight: bold;
		}
	}
}

.right-wrap {
	flex-grow: 1;
	padding: 0 10rpx;
	font-size: 24rpx;
	color: #707a8a;

	.line {
		view {
			padding: 10rpx 0;
		}
	}
}

.new-price {
	font-size: 36rpx;
	color: #0ecb81;
	padding: 20rpx;
}

.vheight {
	height: var(--status-bar-height);
}
</style>