1

components/contract-set/contract-set.vue

@@ -0,0 +1,104 @@
+<template>
+	<uni-popup ref="popupRef" type="top">
+		<view class="set-box" :style="{'top':contractTop + 'px'}">
+			<view class="set-foot"></view>
+			<view class="set-item" @click.stop="setInfo(1)">
+				<text class="set-item-icon iconfont">&#xe629;</text>
+				<text class="">偏好设置</text>
+			</view>
+			<view class="set-item" @click.stop="setInfo(2)">
+				<text class="set-item-icon iconfont">&#xe6c1;</text>
+				<text class="">合约计算器</text>
+			</view>
+		</view>
+
+	</uni-popup>
+</template>
+
+<script>
+	import {
+		mapGetters
+	} from 'vuex'
+	export default {
+		name: "contract-set",
+
+		data() {
+			return {
+				contractTop: 0
+			};
+		},
+		computed: {
+			...mapGetters([
+				"navBarHeight"
+			])
+		},
+		watch: {
+			navBarHeight: {
+				handler(newH) {
+					this.contractTop = newH + uni.upx2px(78)
+				},
+				immediate: true
+			}
+		},
+		mounted() {
+			// this.$refs.popupRef.open()
+			// this.open()
+		},
+		methods: {
+			open(val) {
+				this.$nextTick(() => {
+					this.$refs.popupRef.open();
+				})
+			},
+			close() {
+				this.$refs.popupRef.close()
+			},
+			setInfo(type) {
+				this.close();
+				this.$emit('confirm', type)
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.set-box {
+		min-width: 200rpx;
+		background-color: #fff;
+		position: absolute;
+		right: 0;
+		border-radius: 10rpx;
+		padding-top: 20rpx;
+		.set-foot {
+			width: 0px;
+			height: 0px;
+			border: 12rpx solid transparent;
+			border-top-color: #fff;
+			transform: rotate(180deg);
+			position: absolute;
+			right: 20rpx;
+			top: -20rpx;
+		}
+
+		// <view class="set-item">
+		// 	<text class="set-item-icon iconfont">&#xe629;</text>
+		// 	<text class="iconfont">偏好设置</text>
+		// </view>
+		.set-item {
+			display: flex;
+			padding: 20rpx;
+			display: flex;
+			align-items: center;
+			font-size: 26rpx;
+			&:nth-child(n - 1){
+				border-bottom: 1rpx solid $border-color2;
+			}
+			.set-item-icon {
+				font-size: 30rpx;
+				margin-right: 16rpx;
+			}
+		}
+
+	}
+</style>

components/contract-set/preference.vue

@@ -0,0 +1,130 @@
+<template>
+	<uni-popup ref="popupRef" type="bottom">
+		<view class="popups-box">
+			<view class="popups-title">
+				偏好设置-合约设置
+				<text class="close-icon iconfont" @click.stop="close()">&#xeca0;</text>
+			</view>
+			<view class="set-hint">
+				<text class="iconfont">&#xe8ec;</text>
+				<text>开启订单确认功能后，每次提交订单</text>
+			</view>
+			<view class="set-list">
+				<view class="set-item">
+					<text class="set-item-text">限价下单二次确认</text>
+					<u-switch :size="40" v-model="value1" activeColor="#05C175"></u-switch>
+				</view>
+				<view class="set-item">
+					<text class="set-item-text">市价下单二次确认</text>
+					<u-switch :size="40" v-model="value2" activeColor="#05C175"></u-switch>
+				</view>
+			</view>
+		</view>
+	</uni-popup>
+</template>
+
+<script>
+	import {
+		mapGetters
+	} from 'vuex'
+	export default {
+		name: "contract-set",
+
+		data() {
+			return {
+				contractTop: 0,
+				value1:'',
+				value2:''
+			};
+		},
+		computed: {
+			...mapGetters([
+				"navBarHeight"
+			])
+		},
+		watch: {
+			navBarHeight: {
+				handler(newH) {
+					this.contractTop = newH + uni.upx2px(78)
+				},
+				immediate: true
+			}
+		},
+		mounted() {
+			// this.$refs.popupRef.open()
+			// this.open()
+		},
+		methods: {
+			open(val) {
+				this.$nextTick(() => {
+					this.$refs.popupRef.open();
+				})
+			},
+			close() {
+				this.$refs.popupRef.close()
+			},
+			setInfo(type) {
+				this.close();
+				this.$emit('confirm', type)
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.popups-box {
+		width: 100%;
+		background-color: #fff;
+		border-radius: 40rpx 40rpx 0 0;
+
+		.popups-title {
+			text-align: center;
+			width: 100%;
+			height: 100rpx;
+			line-height: 100rpx;
+			position: relative;
+			font-size: 32rpx;
+			font-weight: bold;
+			border-radius: 40rpx 40rpx 0 0;
+
+			.close-icon {
+				position: absolute;
+				right: 30rpx;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+
+	}
+	.set-hint{
+		width: 100%;
+		padding: 30rpx $pages-padding;
+		font-size: 24rpx;
+		color: $Theme-Color;
+		display: flex;
+		align-items: center;
+		.iconfont{
+			margin-right: 10rpx;
+		}
+	}
+	// <view class="set-item">
+	// 	<text class="set-item-text">限价下单二次确认</text>
+	// 	<u-switch :size="$createElement(0)"></u-switch>
+	// </view>
+	.set-list{
+		
+			width: 100%;
+			padding: 0 $pages-padding;
+	}
+	.set-item{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 40rpx 0;
+		// 
+		.set-item-text{
+			font-size: 28rpx;
+		}
+	}
+</style>

components/headContent/headContent.vue

@@ -1,12 +1,12 @@
 <template>
-	<view :class="['head' , borderBottom ? 'head-border' : '']" >
+	<view :class="['head' ]" >
 		<!-- 状态栏 -->
 		<view class="status-bar status-bar-fixed" :style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
 		<view class="status-bar" :style="{'height':`${statusBarHeight}px`}"></view>
 		
 		
 		<template v-if="showHead">
-			<view :class="['head-content' , fixed ? 'content-fixed' : '']" :style="{'background-color': bgColor}">
+			<view :class="['head-content', borderBottom ? 'head-border' : '' , fixed ? 'content-fixed' : '']" :style="{'background-color': bgColor}">
 				<view class="status-bar"  v-if="fixed" :style="{'height':`${statusBarHeight}px` , 'background-color': statusBarBg}"></view>
 				<view class="content-box" :style="{'height':headHeight}">
 					<view class="left" v-if="showleftRight" >

components/headModules/collect.vue

@@ -0,0 +1,29 @@
+<template>
+	<view class="head-icon" >
+		<text @click.stop="activeStatus = !activeStatus" :class="['iconfont' , activeStatus ? 'active-collect' : '']">&#xe625;</text>
+	</view>
+</template>
+
+<script>
+	export default {
+	 
+		data() {
+			return {
+				activeStatus:false
+			};
+		},
+		methods:{
+			// getService(){
+			// 	uni.navigateTo({
+			// 		url:'/pages/content/customer-service'
+			// 	})
+			// }
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.active-collect{
+	color: $Theme-Color !important;
+}
+</style>

components/headModules/reverse-back.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="reverse-back-box" @click.stop="reverseBackBtn">
 		<text class="iconfont" :style="{'color': iconColor}">&#xe8b5;</text>
+		<slot name="extend"></slot>
 	</view>
 </template>
 
@@ -33,7 +34,7 @@
 
 <style lang="scss" scoped>
 	.reverse-back-box {
-		width: 50rpx;
+		min-width: 50rpx;
 		height: 50rpx;
 		display: flex;
 		align-items: center;

main.js

@@ -17,9 +17,11 @@ Vue.use(initialize);
 // 全局加载组件
 import reverseBack from "@/components/headModules/reverse-back.vue"
 import closeIocn from "@/components/headModules/close.vue"
+import headCollect from "@/components/headModules/collect.vue"
 
 Vue.component('reverseBack', reverseBack)
 Vue.component('closeIocn', closeIocn)
+Vue.component('headCollect', headCollect)
 
 
 // 如此配置即可

pages.json

@@ -40,6 +40,12 @@
 				"navigationBarTitleText": "合约"
 			}
 		},
+		{
+			"path": "pages/contract/calculator",
+			"style": {
+				"navigationBarTitleText": "合约计算器"
+			}
+		},
 		{
 			"path": "pages/contract/history/fast-history",
 			"style": {
@@ -60,6 +66,10 @@
 			"path": "pages/contract/sustainability/lever",
 			"style": {}
 		},
+		{
+			"path": "pages/contract/sustainability/details",
+			"style": {}
+		},
 		{
 			"path": "pages/property/modules/contract/capital-switch",
 			"style": {}

pages/contract/calculator.vue

@@ -0,0 +1,493 @@
+<template>
+	<view>
+		<headContent borderBottom>
+			<template #left>
+				<reverse-back />
+			</template>
+			<template #content>
+				<view class="haed-title">
+					合约计算器
+				</view>
+			</template>
+		</headContent>
+		<view class="pages-lable">
+			<text @click.stop="lableIndex = 0" :class="['lable-val' , lableIndex === 0 ? 'active-lable-val' : '']">收益</text>
+			<text @click.stop="lableIndex = 1" :class="['lable-val' , lableIndex === 1 ? 'active-lable-val' : '']">平仓价格</text>
+			<text @click.stop="lableIndex = 2" :class="['lable-val' , lableIndex === 2 ? 'active-lable-val' : '']">强平价格</text>
+		</view>
+		<view class="pages-content">
+			<view class="currency">
+				BTC/USDT 永续 <text class="currency-moer iconfont">&#xe8b5;</text>
+			</view>
+			<view class="type-box hold-position"  v-show="[ 2].includes(lableIndex)">
+				<view class="type-btn" @click.stop="storehouse === 1 ? storehouse = 2 : storehouse = 1">
+					<text>{{ storehouse === 1 ? '逐仓' : '全仓'}}</text>
+					<text :class="['iconfont' , true ? 'active-iconfont' : '']">&#xe672;</text>
+				</view>
+				<view class="type-btn" @click.stop="oddEven === 1 ? oddEven = 2 : oddEven = 1">
+					<!-- oddEven:1 , // 1 单向持仓 2  -->
+					<text>{{ oddEven === 1 ? '单向持仓' : '双向持仓' }}</text>
+					<text :class="['iconfont' , storehouse === 2 ? 'active-iconfont' : '']">&#xe672;</text>
+				</view>
+			</view>
+			
+			<!-- 收益 / 强行平仓才有 -->
+			<view class="type-box more-empty">
+				<view :class="['type-btn' , more_empty === 1 ? 'active-more' : '']">
+					<text>做多</text>
+				</view>
+				<view :class="['type-btn' , more_empty === 1 ? 'active-few' : '']">
+					<text>做空</text>
+				</view>
+			</view>
+
+			<view class="content-nums">
+				<!-- @click.stop="changeLeverNum('minus')" -->
+				<text class="nums-alter iconfont">-</text>
+				<view class="nums-box">
+					<!--  @input="patternNumChange" @focus="setCursorNum"
+					  	@blur="cursorNum = 0" :cursor="cursorNum" -->
+					<input ref="numsInpRef" class="nums-inp" v-model="pattern.num">
+
+				</view>
+				<!-- @click.stop="changeLeverNum('add')" -->
+				<text class="nums-alter iconfont">+</text>
+			</view>
+			<view class="content-nums-item">
+				<text v-for="item in LeverArr" :key="`lever_${item}`" @click.stop="changeLeverItem(item)"
+					:class="['nums-item', pattern.num == item ? 'active-nums-item' : '']">{{item}}</text>
+			</view>
+			<view class="selected">
+				当前杠杆倍数已选：{{ pattern.num }}
+			</view>
+
+			<view class="inp-item">
+				<text class="inp-item-lable">开仓价格</text>
+				<view class="inp-item-val">
+					<input class="inp-item-inp" type="text" placeholder-class="placeholder-class" placeholder="0.0">
+					<text class="inp-item-tag">USDT</text>
+				</view>
+			</view>
+
+			<view class="inp-item">
+				<text class="inp-item-lable">平仓价格</text>
+				<view class="inp-item-val">
+					<input class="inp-item-inp" type="text" placeholder-class="placeholder-class" placeholder="0.0">
+					<text class="inp-item-tag">USDT</text>
+				</view>
+			</view>
+
+			<view class="inp-item">
+				<text class="inp-item-lable">开仓数量</text>
+				<view class="inp-item-val">
+					<input class="inp-item-inp" type="text" placeholder-class="placeholder-class" placeholder="0.0">
+					<text class="inp-item-tag">张</text>
+				</view>
+			</view>
+
+			<view class="result">
+				<text class="result-lable">计算结果</text>
+				<view class="result-item">
+					<text class="result-item-lable">保证金</text>
+					<text>0 <text class="item-lable-tag">USDT</text> </text>
+				</view>
+				<view class="result-item">
+					<text class="result-item-lable">收益</text>
+					<text>0 <text class="item-lable-tag">USDT</text> </text>
+				</view>
+				<view class="result-item">
+					<text class="result-item-lable">收益率</text>
+					<text>0.0</text>
+				</view>
+				<view class="result-hint">
+					<text class="result-hint-star">*</text>
+					<text>以上计算结果仅供参考</text>
+				</view>
+			</view>
+			
+			
+			
+			<view class="count-btn">计算</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				lableIndex: 0,
+				more_empty: 1, // 1: 做多 ， 2: 做空
+				pattern: {
+					num: '', // 杠杆
+				},
+				
+				storehouse:1 , // 1 逐仓 2 全仓 
+				oddEven:1 , // 1 单向持仓 2 双向全仓 
+				
+				LeverArr: ['5X', '10X', '20X', '50X', '100X'],
+			};
+		},
+		watch: {
+			"pattern.num": {
+				handler(newVal, oldVal) {
+					if (newVal !== oldVal) {
+						let numStr = newVal
+						console.log('numStr = ', numStr)
+						if (numStr.indexOf('X') >= 0) {
+							numStr = numStr.split('X')[0]
+						}
+						numStr = newVal.replace(/[^0-9]/ig, "");
+						console.log('numStr = ', numStr)
+						if (numStr > 100) {
+							numStr = 100
+						} else if (numStr < 1) {
+							numStr = 1
+						}
+						setTimeout(() => {
+							this.$set(this.pattern, 'num', `${numStr}X`);
+						}, 0)
+					}
+
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			changeLeverItem(e) {
+				this.pattern.num = e;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// <view class="pages-lable">
+	// 			<text class="lable-val">收益</text>
+	// 			<text class="lable-val">平仓价格</text>
+	// 			<text class="lable-val">强平价格</text>
+	// 		</view>
+	.pages-lable {
+		width: 100%;
+		height: 90rpx;
+		border-bottom: 1rpx solid $border-color;
+		padding: 0 80rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: stretch;
+
+		.lable-val {
+			display: flex;
+			align-items: center;
+			font-size: 28rpx;
+		}
+
+		.active-lable-val {
+			position: relative;
+			color: $Theme-Color;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 50%;
+				bottom: 0;
+				transform: translateX(-50%);
+				width: 30rpx;
+				height: 8rpx;
+				border-radius: 4rpx;
+				background-color: $Theme-Color;
+			}
+		}
+	}
+
+	.pages-content {
+		padding: 0 $pages-padding;
+
+		.currency {
+			width: 100%;
+			height: 90rpx;
+			font-size: 26rpx;
+			padding-bottom: 14rpx;
+			line-height: 1;
+			font-weight: bold;
+			display: flex;
+			align-items: center;
+
+			.currency-moer {
+				font-size: 28rpx;
+				color: $Theme-Color;
+				transform: rotate(-180deg);
+			}
+		}
+
+		// <view class="type-box">
+		// 	<view class="type-btn">
+		// 		<text>逐仓</text>
+		// 		<text class="iconfont">&#xe672;</text>
+		// 	</view>
+		// 	<view class="type-btn">
+		// 		<text>逐仓</text>
+		// 		<text class="iconfont">&#xe672;</text>
+		// 	</view>
+		// </view>
+		// <view class="type-box">
+		// 	<view class="type-btn">
+		// 		<text>做多</text>
+		// 	</view>
+		// 	<view class="type-btn">
+		// 		<text>做空</text>
+		// 	</view>
+		// </view>
+		.type-box {
+			width: 100%;
+			height: 70rpx;
+			margin-bottom: 30rpx;
+			display: flex;
+			align-items: stretch;
+			justify-content: space-between;
+
+			.type-btn {
+				flex: 1;
+				flex-shrink: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: $bg_01;
+				border-radius: 8rpx;
+				font-size: 30rpx;
+				position: relative;
+				color: $SizeColor;
+
+				.iconfont {
+					position: absolute;
+					right: 20rpx;
+					top: 50%;
+					transform: translateY(-50%);
+					font-size: 24rpx;
+					color: $SizeColor1;
+				}
+
+				.active-iconfont {
+					color: $Theme-Color;
+				}
+			}
+
+		}
+
+		.hold-position {
+			.type-btn+.type-btn {
+				margin-left: 10rpx;
+			}
+		}
+
+		.more-empty {
+			.active-more {
+				background-color: $Theme-Color;
+				color: #fff;
+			}
+
+			.active-few {
+				background-color: $Theme-Color3;
+				color: #fff;
+			}
+		}
+
+		.content-nums {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: stretch;
+			padding: 0 0 20rpx;
+
+			.nums-alter {
+				flex-shrink: 0;
+				width: 80rpx;
+				height: 80rpx;
+				text-align: center;
+				line-height: 80rpx;
+				border: 1px solid $border-color6;
+				font-size: 26rpx;
+				color: $Theme-Color;
+
+				&:last-child {
+					border-radius: 0 10rpx 10rpx 0;
+				}
+
+				&:first-child {
+					border-radius: 10rpx 0 0 10rpx;
+				}
+			}
+
+			.nums-box {
+				flex: 1;
+				border-top: 1px solid $border-color6;
+				border-bottom: 1px solid $border-color6;
+				position: relative;
+
+				.nums-inp {
+					width: 100%;
+					height: 100%;
+					text-align: center;
+					font-size: 28rpx;
+					font-weight: bold;
+				}
+
+				.nums-t {
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		.content-nums-item {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: stretch;
+
+			.nums-item {
+				width: calc((100% - 40rpx) / 5);
+				height: 60rpx;
+				border: 1rpx solid $border-color4;
+				border-radius: 6rpx;
+				text-align: center;
+				line-height: 58rpx;
+				font-size: 26rpx;
+			}
+
+			.active-nums-item {
+				background-color: $Theme-Color;
+				border-color: $Theme-Color;
+				color: #fff;
+			}
+		}
+
+		.selected {
+			font-size: 20rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+		}
+
+		// <view class="inp-item">
+		// 	<text class="inp-item-lable">开仓价格</text>
+		// 	<view class="inp-item-val">
+		// 		<input class="inp-item-inp" type="text">
+		// 		<text class="inp-item-tag">USDT</text>
+		// 	</view>
+		// </view>
+		.inp-item {
+			width: 100%;
+			margin-bottom: 30rpx;
+
+			.inp-item-lable {
+				display: inline-block;
+				font-size: 24rpx;
+				line-height: 1;
+				margin-bottom: 16rpx;
+			}
+
+			.inp-item-val {
+				width: 100%;
+				height: 76rpx;
+				border: 1rpx solid $border-color;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 20rpx;
+				border-radius: 8rpx;
+				font-size: 26rpx;
+
+				.inp-item-inp {
+					font-size: 26rpx;
+				}
+
+				.placeholder-class {
+					font-size: 26rpx;
+					color: $SizeColor1;
+				}
+
+				.inp-item-tag {
+					font-size: 24rpx;
+					font-weight: bold;
+					color: $SizeColor;
+				}
+			}
+		}
+
+
+		// <view class="result">
+		// 	<text class="result-lable">计算结果</text>
+		// 	<view class="result-item">
+		// 		<text>保证金</text>
+		// 		<text>0 <text>USDT</text> </text>
+		// 	</view>
+		// 	<view class="result-item">
+		// 		<text>收益</text>
+		// 		<text>0 <text>USDT</text> </text>
+		// 	</view>
+		// 	<view class="result-item">
+		// 		<text>收益率</text>
+		// 		<text>0.0</text>
+		// 	</view>
+		// 	<view class="result-item">
+		// 		<text>*</text>
+		// 		<text>以上计算结果仅供参考</text>
+		// 	</view>
+		// </view>
+		.result {
+			width: 100%;
+
+			// display: flex;
+			.result-lable {
+				font-size: 28rpx;
+			}
+
+			.result-item {
+				display: flex;
+				justify-content: space-between;
+				padding: 30rpx 0 10rpx;
+				color: $SizeColor;
+				font-size: 26rpx;
+
+				.result-item-lable {
+					font-size: 28rpx;
+				}
+
+				.item-lable-tag {
+					color: #000;
+					font-size: 24rpx;
+					font-weight: bold;
+					padding-left: 20rpx;
+				}
+			}
+			// <view class="result-hint">
+			// 	<text class="result-hint-star">*</text>
+			// 	<text>以上计算结果仅供参考</text>
+			// </view>
+			.result-hint{
+				font-size: 22rpx;
+				color: $SizeColor;
+				padding: 20rpx 0;
+				.result-hint-star{
+					padding-right: 6rpx;
+				}
+			}
+		}
+		
+		.count-btn{
+			width: 100%;
+			height: 90rpx;
+			background-color: $btnBgColor;
+			border-radius: 10rpx;
+			text-align: center;
+			line-height: 90rpx;
+			font-size: 30rpx;
+			color: #fff;
+			margin-bottom: 30rpx;
+		}
+	}
+</style>

pages/contract/index.vue

@@ -15,7 +15,7 @@
 		<!-- 永续合约 -->
 		<template v-if="contractIndex === 0">
 			<sustainability ref="sustainabilityRef" :currency-info="currencyVal" :leverTransaction="lever_transaction"
-				:pagesInfo="pagesInfo" :rate-profits-total="rate_profits_total" @refreshData="init"/>
+				:pagesInfo="pagesInfo" :rate-profits-total="rate_profits_total" @refreshData="init" @setContract="setContract"/>
 		</template>
 		<!-- 永续合约 -->
 		<template v-if="contractIndex === 1">
@@ -26,6 +26,11 @@
 			<grants />
 		</template>
 		<notarize />
+		
+		<!-- 永续合约设置 -->
+		<contract-set ref="contractSetRef" @confirm="openSet"/>
+		<!-- 偏好设置 -->
+		<preference ref="preferenceRef"/>
 	</view>
 </template>
 
@@ -34,6 +39,7 @@
 	import sustainability from "./sustainability/index.vue"
 	import grants from "./grants/index.vue"
 	import shortcut from "./shortcut/index.vue"
+	import preference from "@/components/contract-set/preference.vue"
 	import {
 		Api_getLeverDeal,
 		Api_getRegister
@@ -51,7 +57,8 @@
 			notarize,
 			sustainability,
 			grants,
-			shortcut
+			shortcut,
+			preference
 		},
 		data() {
 			return {
@@ -80,9 +87,7 @@
 		watch: {
 			currencyVal: {
 				handler(newCurrency) {
-					if (newCurrency && newCurrency?.legal_id) {
-						this.init()
-					}
+					this.init();
 				},
 				deep: true,
 				immediate: true
@@ -93,20 +98,20 @@
 			this.contractIndex = [0,1,2].includes(nu) ? nu : this.contractIndex
 			this.$removeStorageSync('contractIndex')
 			
-			this.init()
+			// this.init()
 		},
 		onHide() {
 			this.close()
 		},
 		methods: {
 			close() {
+				//  关闭 socket 实时更新
+				this.$store.dispatch('websocket/closeSocket')
 				//  关闭 socket 实时更新
 				this.$store.commit('websocket/set_socket_update_status', false)
 				this.$store.dispatch('websocket/getQuotationNew', {
 					suspend: true
 				})
-				//  关闭 socket 实时更新
-				this.$store.dispatch('websocket/closeSocket')
 				
 			},
 			init() {
@@ -119,8 +124,10 @@
 				this.$store.dispatch('websocket/getQuotationNew')
 				// 运行 socket 实时更新
 				this.$store.commit('websocket/set_socket_update_status', true)
+				if (this.currencyVal && this.currencyVal?.legal_id) {
+					this.setSocket();
+				}
 				
-				this.setSocket();
 			},
 			// 获取持仓信息（当前持仓）
 			getRegister() {
@@ -166,6 +173,30 @@
 				}).catch(err => {
 					console.log('获取shibai ')
 				})
+			},
+			setContract(){
+				// setContract
+				this.$nextTick(() => {
+					this.$refs.contractSetRef.open()
+				})
+			},
+			// 永续合约 设置
+			openSet(type){
+				switch(type){
+					case 1:
+						// 偏好设置
+						this.$nextTick(() => {
+							this.$refs.preferenceRef.open()
+						})
+						break;
+					case 2:
+						// 合约计算器
+						uni.navigateTo({
+							url:'/pages/contract/calculator'
+						})
+						break;
+					// 
+				}
 			}
 
 		}

pages/contract/sustainability/details.vue

@@ -0,0 +1,472 @@
+<template>
+	<view :rise-fall="stocksColor">
+		<headContent borderBottom>
+			<template #left>
+				<reverse-back>
+					<template #extend>
+						<view class="details-nav">
+							<view class="title-iocn">
+								<text class="title-iocn-item"></text>
+								<text class="title-iocn-item"></text>
+								<text class="title-iocn-item"></text>
+							</view>
+							<text class="nav-name">
+								{{ currencyVal.currency_name }}/ {{ currencyVal.legal_name }}
+							</text>
+						</view>
+					</template>
+				</reverse-back>
+			</template>
+			<template #right>
+				<headCollect />
+			</template>
+		</headContent>
+ 
+		<view class="top-index fixed-top-index" :style="{'top': navBarHeight + 'px'}">
+			<view :class="['index-val' , $setColor(daymarket.open)]">
+				<text class="index-val-num color">{{ daymarket.open }}</text>
+				<text class="index-val-percent color">{{ daymarket.change }}%</text>
+			</view>
+			<view class="index-type">
+				标记价格 <text class="iconfont">&#xeb6d;</text>
+			</view>
+		</view>
+		<view style="width:100%;height:90rpx;"></view>
+		<view class="info-content">
+			<view class="info-item">
+				<text class="info-lable">标记价格</text>
+				<text class="info-val">{{ daymarket.now_price }}</text>
+			</view>
+			<view class="info-item">
+				<text class="info-lable">24H高</text>
+				<text class="info-val">{{ daymarket.high }}</text>
+			</view>
+			<view class="info-item">
+				<text class="info-lable">24H低</text>
+				<text class="info-val">{{ daymarket.low }}</text>
+			</view>
+			<view class="info-item">
+				<text class="info-lable">24H额(BTC)</text>
+				<text class="info-val">{{ daymarket.volume }}</text>
+			</view>
+			<view class="info-item">
+				<text class="info-lable">24H量(BTC)</text>
+				<text class="info-val">{{ daymarket.volume * daymarket.open }}</text>
+			</view>
+		</view>
+
+		<view class="iframe-content">
+			<!-- 	<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> -->
+		</view>
+		<gap />
+		<view class="val-content">
+			<view class="val-content-lable">
+				<text @click.stop="valLableIndex = 0" :class="['lable-text' , valLableIndex === 0 ? 'active-lable-text' : '']">交易深度</text>
+				<text @click.stop="valLableIndex = 1" :class="['lable-text' , valLableIndex === 1 ? 'active-lable-text' : '']">实时成交</text>
+			</view>
+			<swiper class="swiper-content" :current="valLableIndex"
+				:style="{'height': swiperHeight ? `${swiperHeight}px` : '' }" disable-touch>
+				<swiper-item class="swiper-item-box">
+					<view class="val-content-type">
+						<text class="left-type">买</text>
+						<text class="right-type">卖</text>
+					</view>
+					<view class="val-content-list">
+						<text>数量(张)</text>
+						<text>价格(USDT)</text>
+						<text>数量(张)</text>
+					</view>
+					<u-list class="swiper-list" :style="{'height': scrollLeftHeight ? `${scrollLeftHeight}px` : '' }">
+						<view class="depth-content">
+							<view class="depth-val">
+								<template v-for="(item , index) in asks">
+									<view class="depth-item depth-item-left">
+										<text class="depth-item-bg" :style="{'width': item[2] + '%' }"></text>
+										<view class="depth-item-val">
+											<text>{{ item[1] }}</text>
+											<text class="item-val-price">{{ item[0] }}</text>
+										</view>
+									</view>
+								</template>
+							</view>
+							<view class="depth-val">
+								<template v-for="(item , index) in bids">
+									<view class="depth-item depth-item-right">
+										<text class="depth-item-bg" :style="{'width': item[2] + '%' }"></text>
+										<view class="depth-item-val">
+											<text class="item-val-price">{{ item[0] }}</text>
+											<text>{{ item[1] }}</text>
+										</view>
+									</view>
+								</template>
+
+							</view>
+						</view>
+					</u-list>
+				</swiper-item>
+				<swiper-item>
+					<view class="val-content-list">
+						<text>时间</text>
+						<text>价格(USDT)</text>
+						<text>数量(张)</text>
+					</view>
+					<u-list class="swiper-list" :style="{'height': scrollRightHeight ? `${scrollRightHeight}px` : '' }">
+						<empty />
+					</u-list>
+				</swiper-item>
+			</swiper>
+
+
+		</view>
+		<view class="details-footer">
+			<view class="footer-btn" @click.stop="consumeBtn">买入/做多</view>
+			<view class="footer-btn"  @click.stop="consumeBtn">卖出/做空</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapGetters
+	} from 'vuex'
+	export default {
+		data() {
+			return {
+				valLableIndex: 0,
+				swiperHeight: 0,
+				scrollLeftHeight: 0,
+				scrollRightHeight:0
+			};
+		},
+		computed: {
+			...mapGetters([
+				"currencyVal",
+				"stocksColor",
+				'bids',
+				'asks',
+				'daymarket',
+				'tabBarHeight',
+				'PageContentHeight',
+				'navBarHeight',
+				'contractAccount'
+			])
+		},
+		watch: {
+			PageContentHeight: {
+				handler(newH) {
+					this.swiperHeight = newH - uni.upx2px(90) - uni.upx2px(94)
+					this.scrollLeftHeight = this.swiperHeight - uni.upx2px(66) - uni.upx2px(60) - uni.upx2px(96)
+					this.scrollRightHeight = this.swiperHeight - uni.upx2px(60)  - uni.upx2px(96)
+				},
+				immediate: true
+			}
+		},
+		mounted() {
+
+		},
+		methods:{
+			consumeBtn(){
+				const pages = getCurrentPages();
+				console.log('pages = ' , pages)
+				if (pages.length >= 2 && pages[pages.length - 2].route === 'pages/contract/index') {
+					uni.navigateBack({
+						delta:1
+					});
+				} else {
+					uni.reLaunch({
+						url:'/pages/contract/index'
+					})
+				}
+			}
+		}
+		
+	}
+</script>
+
+<style lang="scss" scoped>
+ 
+	.details-nav {
+		display: flex;
+		align-items: center;
+		border-left: 1rpx solid $border-color4;
+		padding-left: 20rpx;
+
+		.nav-name {
+			padding-left: 10rpx;
+			font-size: 38rpx;
+			font-weight: bold;
+		}
+	}
+
+	.title-iocn {
+		width: 28rpx;
+		height: 24rpx;
+		display: flex;
+		flex-direction: column;
+		// align-items: center;
+		justify-content: space-between;
+
+		.title-iocn-item {
+			width: 100%;
+			height: 4rpx;
+			border-radius: 2rpx;
+			background: #111111;
+
+			&:first-child {
+				width: 50%;
+			}
+		}
+	}
+// <view class="top-index fixed-top-index" :style="{'top': navBarHeight + 'px'}">
+// 			<view :class="['index-val' , $setColor(27)]">
+// 				<text class="index-val-num color">27</text>
+// 				<text class="index-val-percent color">0.29%</text>
+// 			</view>
+// 			<view class="index-type">
+// 				标记价格 <text class="iconfont">&#xeb6d;</text>
+// 			</view>
+// 		</view>
+	.top-index {
+		width: 100%;
+		height: 94rpx;
+		padding: 16rpx $pages-padding;
+		border-bottom: 1rpx solid $border-color;
+		display: flex;
+		justify-content: space-between;
+		background-color: #fff;
+	 
+		.index-val-num {
+			font-size: 30rpx;
+			font-weight: bold;
+		}
+		.index-val-percent{
+			font-size: 24rpx;
+			padding-left: 10rpx;
+		}
+		.index-type{
+			width: 240rpx;
+			height: 100%;
+			border: 1rpx solid $border-color6;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 24rpx;
+			padding: 0 20rpx;
+			border-radius: 10rpx;
+			.iconfont{
+				font-size: 20rpx;
+				color: $Theme-Color;
+			}
+		}
+
+	}
+
+	.fixed-top-index {
+
+		position: fixed;
+		z-index: 1;
+		left: 0;
+	}
+
+	.iframe-content {
+		width: 100%;
+		height: 660rpx;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.info-content {
+		display: flex;
+		align-items: stretch;
+		flex-wrap: wrap;
+		padding: 26rpx $pages-padding 0;
+		border-bottom: 1rpx solid $border-color;
+
+		.info-item {
+			min-height: 70rpx;
+			width: calc(100% / 3);
+			flex-shrink: 0;
+			display: flex;
+			flex-direction: column;
+			font-size: 20rpx;
+			margin-bottom: 26rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+
+			&:nth-child(3n),
+			&:nth-child(3n - 1) {
+				text-align: right;
+			}
+
+		}
+	}
+
+	.val-content {
+		width: 100%;
+
+		.val-content-lable {
+			width: 100%;
+			display: flex;
+			align-items: stretch;
+			padding: 0 $pages-padding;
+			height: 96rpx;
+			border-bottom: 1rpx solid $border-color;
+
+			.lable-text {
+				height: 100%;
+				font-size: 28rpx;
+				line-height: 90rpx;
+				margin-right: 50rpx;
+			}
+
+			.active-lable-text {
+				position: relative;
+				color: $Theme-Color;
+
+				&::before {
+					content: '';
+					position: absolute;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+					width: 40rpx;
+					height: 7rpx;
+					border-radius: 4rpx;
+					background-color: $Theme-Color;
+				}
+			}
+		}
+
+		.val-content-type {
+			width: 100%;
+			height: 66rpx;
+			border-bottom: 1rpx solid $border-color;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 $pages-padding;
+			font-size: 28rpx;
+			font-weight: bold;
+
+			.left-type {
+				color: $mai_01;
+			}
+
+			.right-type {
+				color: $mai_02;
+			}
+		}
+
+		.val-content-list {
+			width: 100%;
+			padding: 0 $pages-padding;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 60rpx;
+			font-size: 26rpx;
+		}
+
+		.depth-content {
+			padding: 0 $pages-padding;
+			width: 100%;
+			display: flex;
+
+			.depth-val {
+				width: 50%;
+				flex-shrink: 0;
+
+				.depth-item {
+					height: 80rpx;
+					position: relative;
+
+					.depth-item-bg {
+						height: 100%;
+						position: absolute;
+						top: 0;
+					}
+
+					.depth-item-val {
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						font-size: 26rpx;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						font-weight: bold;
+					}
+				}
+
+				.depth-item-left {
+					.depth-item-val {
+						padding-right: 10rpx;
+					}
+
+					.depth-item-bg {
+						right: 0;
+						background-color: $mai_03;
+					}
+
+					.item-val-price {
+						color: $Theme-Color;
+					}
+				}
+
+				.depth-item-right {
+					.depth-item-val {
+						padding-left: 10rpx;
+					}
+
+					.depth-item-bg {
+						left: 0;
+						background-color: $mai_04;
+					}
+
+					.item-val-price {
+						color: $Theme-Color2;
+					}
+				}
+
+			}
+		}
+	}
+
+	.details-footer {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		height: 90rpx;
+		width: 100%;
+		padding: 5rpx 40rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: stretch;
+
+		background-color: #fff;
+		.footer-btn {
+			flex: 1;
+			height: 80rpx;
+			color: #fff;
+			text-align: center;
+			line-height: 80rpx;
+			font-size: 30rpx;
+			border-radius: 6rpx;
+
+			&:first-child {
+				background-color: $Theme-Color;
+			}
+
+			&:last-child {
+				margin-left: 20rpx;
+				background-color: $Theme-Color2;
+			}
+		}
+	}
+</style>

pages/contract/sustainability/index.vue

@@ -8,12 +8,12 @@
 					<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>
+				<text class="title-text">{{ currencyVal.currency_name }}/{{ currencyVal.legal_name }}</text>
 			</view>
 			<view class="contract-item">
 				<text class="title-ratio">资金费率:{{ rateProfitsTotal.profits_total }}%</text>
-			<!-- 	<image class="ratio-icon" src="../../../static/logo.png" mode="aspectFit"></image>
-				<image class="ratio-icon" src="../../../static/logo.png" mode="aspectFit"></image> -->
+				<image class="ratio-icon" @click.stop="lookDetails" src="../../../static/images/icon_05.png" mode="aspectFit"></image>
+				<image class="ratio-icon"  @click.stop="setContract" src="../../../static/images/icon_06.png" mode="aspectFit"></image>
 			</view>
 		</view>
 
@@ -378,7 +378,7 @@
 				Api_getRegister({
 					status: 0,
 					legal_id: this.currencyVal.legal_id,
-					currency_id: this.currencyVal.legal_id,
+					currency_id: this.currencyVal.currency_id,
 					page: 1,
 					limit: 10000
 				}).then(res => {
@@ -436,6 +436,19 @@
 					this.$refs.freightSpaceRef.confirm();
 				})
 			},
+			
+			lookDetails(){
+				if(this.currencyVal && this.currencyVal.currency_id && this.currencyVal.legal_id){
+					uni.navigateTo({
+						url:'/pages/contract/sustainability/details'
+					})
+				}
+			},
+			// 合约设置
+			setContract(){
+				this.$emit('setContract')
+			}
+			
 
 		},
 	}

static/fontsize/fontsize1/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">设置</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c1;</span>
+                <div class="name">计算器</div>
+                <div class="code-name">&amp;#xe6c1;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe617;</span>
                 <div class="name">人民币单价 (1)</div>
@@ -546,9 +558,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1683904856534') format('woff2'),
-       url('iconfont.woff?t=1683904856534') format('woff'),
-       url('iconfont.ttf?t=1683904856534') format('truetype');
+  src: url('iconfont.woff2?t=1684137225748') format('woff2'),
+       url('iconfont.woff?t=1684137225748') format('woff'),
+       url('iconfont.ttf?t=1684137225748') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -574,6 +586,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-shezhi"></span>
+            <div class="name">
+              设置
+            </div>
+            <div class="code-name">.icon-shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jisuanqi"></span>
+            <div class="name">
+              计算器
+            </div>
+            <div class="code-name">.icon-jisuanqi
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-renminbidanjia"></span>
             <div class="name">
@@ -1312,6 +1342,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shezhi"></use>
+                </svg>
+                <div class="name">设置</div>
+                <div class="code-name">#icon-shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jisuanqi"></use>
+                </svg>
+                <div class="name">计算器</div>
+                <div class="code-name">#icon-jisuanqi</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-renminbidanjia"></use>

static/fontsize/fontsize1/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3999574 */
-  src: url('iconfont.woff2?t=1683904856534') format('woff2'),
-       url('iconfont.woff?t=1683904856534') format('woff'),
-       url('iconfont.ttf?t=1683904856534') format('truetype');
+  src: url('iconfont.woff2?t=1684137225748') format('woff2'),
+       url('iconfont.woff?t=1684137225748') format('woff'),
+       url('iconfont.ttf?t=1684137225748') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-shezhi:before {
+  content: "\e629";
+}
+
+.icon-jisuanqi:before {
+  content: "\e6c1";
+}
+
 .icon-renminbidanjia:before {
   content: "\e617";
 }

static/fontsize/fontsize1/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "5401274",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "15644341",
+      "name": "计算器",
+      "font_class": "jisuanqi",
+      "unicode": "e6c1",
+      "unicode_decimal": 59073
+    },
     {
       "icon_id": "11641853",
       "name": "人民币单价 (1)",

store/getters.js

@@ -3,6 +3,7 @@ const getters = {
 	stocksColor: state => state.app.stocksColor,
 	headHeight: state => state.app.headHeight,
 	statusBarHeight: state => state.app.statusBarHeight,
+	navBarHeight: state => state.app.navBarHeight,
 	windowInfo: state => state.app.windowInfo,
 	PageContentHeight: state => state.app.PageContentHeight,
 	maxPageHeight: state => state.app.maxPageHeight,

store/modules/app.config.js

@@ -4,11 +4,12 @@
  } from "@/utils/common.js"
  const state = {
  	token: getToken(),
- 	headHeight: '100rpx',
- 	statusBarHeight: 0,
+ 	headHeight: '100rpx',  // 头部标题的高度
+ 	statusBarHeight: 0,		// 头部状态栏的高度
+	navBarHeight:0,	// 头部标题 + 头部状态栏  的高度
 	windowInfo:{},
-	PageContentHeight:0,
-	maxPageHeight:0,
+	PageContentHeight:0,	// 页面内容的高度，去掉了 （头部标题 + 头部状态栏）
+	maxPageHeight:0,		// 页面的高度，包含（头部标题 + 头部状态栏）
 	tabBarHeight:50,  // 50 是tabbar 的高度，在pages里面设置 
  	// 涨跌颜色
  	stocksColor: 'green_rise', // green_rise：绿涨红跌 ， red_rise：绿跌红涨 
@@ -22,6 +23,8 @@
  		state.windowInfo = info;
 		const headH = state.headHeight.split('rpx')[0];
 		const contentHeight = info.windowHeight - state.statusBarHeight - uni.upx2px(headH);
+		state.navBarHeight = uni.upx2px(headH) + state.statusBarHeight;
+		console.log('state.navigationBarHeight = ' , state.navBarHeight)
  		state.PageContentHeight = contentHeight;
 		state.maxPageHeight = info.windowHeight;
  	},

store/modules/websocket.js

@@ -3,7 +3,7 @@ let socket_api = 'https://doc.okenx.com:2000'
 // import io from '@/js_sdk/hyoga-uni-socket_io/uni-socket.io.js';
 import io from '@hyoga/uni-socket.io';
 
-let socket = null
+let socket = []
 
 import {
 	Api_getQuotationNew
@@ -77,13 +77,25 @@ const actions = {
 		commit,
 		state
 	}, data) {
+		return false
+		 console.log('打开socket' , )
 		const socketUrl = 'https://doc.okenx.com:2000';
-		socket = io(socketUrl, {
+		socket[socket.length - 1] = io(socketUrl, {
 			query: {},
 			transports: ['websocket', 'polling'],
 			timeout: 5000,
 		}); 
-		socket.on(data.type, (msg) => {
+		socket[socket.length - 1].on(data.type, (msg) => {
+			// console.log('socket = ' , socket , msg)
+			// if(!socket){
+			// 	try{
+			// 		socket.disconnect()
+			// 		socket.closeSocket()
+			// 	}catch{}
+			// 		socket = null;
+			// 	return false
+			// }
+			
 			if (state.currencyVal.legal_id == msg.legal_id && state.currencyVal.currency_id == msg
 				.currency_id) {
 
@@ -112,7 +124,16 @@ const actions = {
 		commit,
 		state
 	}, data) {
-		socket && socket.disconnect();
+		console.log('关闭socket' , socket)
+		try{
+			socket.disconnect()
+			// socket.forEach(el => {
+			// 	el.disconnect()
+			// });
+			// socket
+					// socket.close()
+		}catch{}
+		socket = null;
 	},
 	
 	

uni.scss

@@ -32,6 +32,16 @@ $SizeColor:  rgba(132,132,132,0.9);
 $SizeColor1:  rgba(203,203,203,0.9);
 $SizeColor2:  #a6a5a5;
 $btnBgColor:#dedcdc;
+
+$mai_01:#06c174;
+$mai_02:rgba(255,0,0,1);
+$mai_03:#E5F8F6;
+$mai_04:#FEEBED;
+
+
+
+$bg_01: #f1eded;
+
 /* 颜色变量 */
 
 /* 行为相关颜色 */