BiKing/pages/contract/grants/index.vue

<template>
	<view>
		<view class="contract-title" :rise-fall="stocksColor">
			<view class="contract-item" @click.stop="openDrawer">
				<view class="title-iocn">
					<text class="title-iocn-item"></text>
					<text class="title-iocn-item"></text>
					<text class="title-iocn-item"></text>
				</view>
				<!-- <image class="title-iocn" src="../../../static/logo.png" mode="aspectFit"></image> -->
				<text class="title-text">{{currencyVal.currency_name}}/{{currencyVal.legal_name}}</text>

			</view>
			<view class="contract-price" :class="$setColor(daymarket.now_price)">
				<text class="color">{{ daymarket.now_price }}</text>
				<text class="color" v-show="daymarket.change">{{ daymarket.change }}%</text>
			</view>
			<view class="contract-item">
				<text class="iconfont">&#xe625;</text>
			</view>
		</view>

		<view class="iframe-box">
			<template v-if="currencyVal.legal_id">
				<iframe
					:src="`https://doc.okenx.com/biking/kline.html?legal_id=${currencyVal.legal_id}&currency_id=${currencyVal.currency_id}&symbol=${currencyVal.currency_name}/${currencyVal.legal_name}`"
					frameborder="0"></iframe>
			</template>

		</view>
		<gap />
 

		<drawer ref="drawerRef" />
		<restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
		<lever ref="leverRef" :leverNum.sync="multiple" :leverName.sync="leverName" />
		<unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗？" />
		<unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="unopenSolt.title" cancelBtn
			:content="unopenSolt.closeLeverContent" />
		<popupHint ref="hintRef" title="赠金交易">
			<template #hintContent>
				<view class="">
					赠金交易是BiKing交易所的赠品交易系统，交易盈利部分可实时划转至合约钱包。
				</view>
				<view class="">
					赠金获取方式:
				</view>
				
				<view class="content-list">
					<text>1. 完成任务中心的各项任务</text>
					<text>2. 参与平台活动</text>
					<text>3. 不定期新老用户赠金空投</text>
				</view>
				<view class="">
					更多内容请点击<text class="explain">《赠金交易》</text>
				</view>
				
				<view class="hite-box"  @click.stop="readPact = !readPact">
					<text class="box">
						<text v-show="readPact" class="iconfont2">&#xe6c5;</text>
					</text>
					<text>不在提示</text>
				</view>
				<view class="confirm-btn" @click.stop="confirmHiteBtn">
					确定
				</view>
			</template>
		</popupHint>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		Api_setSubmitLever,
		Api_getLeverDeal,
		Api_getRegister,
		Api_setBatchClose,
		Api_setCloseLever
	} from "@/api/index.js"

	import lever from "../sustainability/lever.vue"
	import drawer from "./../modules/drawer.vue"
	import popupHint from "../modules/popup-hint.vue"
	import {
		startWebSocket
	} from "@/utils/websock.js"
	import restrictPopup from "./../modules/restrict.vue"
	export default {
		name: 'shortcut',
		components: {
			lever,
			drawer,
			restrictPopup,
			popupHint
		},
		data() {
			return {
				readPact: false,
				closeLeverItem: null,
				lableList: [
					'开仓',
					'当前持仓'
				],
				lableIndex: 1,
				leverName: '逐仓',
				multiple: 100, // 逐仓倍数
				caution_money: '',

				status: 1, // 状态，填1. 1市价交易,为0则是挂单交易
				scrollHeight: 0,
				unopenSolt: {
					title: '',
					content: ''
				}
			};
		},
		props: {
			leverTransaction: {
				type: Array,
				default: () => {
					return []
				}
			},
			pagesInfo: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			...mapGetters([
				'currencyVal',
				'daymarket',
				'stocksColor',
				'PageContentHeight',
				'tabBarHeight'
			]),
		},
		mounted() {
			// startWebSocket()
		},
		watch: {
			currencyVal: {
				handler(newCurrency) {
					if (newCurrency && newCurrency?.legal_id) {

					}
				},
				deep: true,
				immediate: true
			},
			PageContentHeight: {
				handler(newHeigth) {
					if (newHeigth) {
						this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
					}
				},
				deep: true,
				immediate: true
			},
		},
		created() {
			// this.openPactPopup()
		},
		methods: {
			openDrawer() {
				this.$nextTick(() => {
					this.$refs.drawerRef.open();
				})
			},
			openPactPopup() {
				const readPactObj = this.$getStorageSync('contractReadPact');
				if (readPactObj && !readPactObj.capitalPact) {
					this.readPact = false
					this.$nextTick(() => {
						this.$refs.hintRef.open()
					})
				}
			
			},
			// 提示弹框确认按钮
			confirmHiteBtn() {
				// t.readPact
				const readPactObj = this.$getStorageSync('contractReadPact') || {}
			
				readPactObj.capitalPact = this.readPact
				this.$setStorageSync('contractReadPact', readPactObj)
				this.$refs.hintRef.close();
			},
			// 阅读合约
			readPactInfo(id){
				this.$readArticleInfo(id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~../sustainability/index.scss";

	.contract-title {
		padding: 5rpx $pages-padding 0;
		min-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid $border-color;

		.contract-price {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 0 20rpx;
			font-size: 28rpx;
		}

		.contract-item {
			flex-shrink: 0;
			display: flex;
			align-items: center;

			.title-iocn {
				width: 28rpx;
				height: 24rpx;
				display: flex;
				flex-direction: column;
				// align-items: center;
				justify-content: space-between;

				.title-iocn-item {
					width: 100%;
					height: 5rpx;
					border-radius: 3rpx;
					background: #111111;

					&:first-child {
						width: 50%;
					}
				}
			}

			.title-text {
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #141213;
				line-height: 1.2;
				letter-spacing: 0.74rpx;
				padding-left: 19rpx;
			}

			.title-ratio {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #808080;
				line-height: 33rpx;
			}

			.ratio-icon {
				width: 31rpx;
				height: 33rpx;
				margin-left: 22rpx;
			}
		}
	}
	.iframe-box {
		width: 100%;
		height: 60vh;

		iframe {
			width: 100%;
			height: 100%;
		}
	}

 
</style>