You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
12 KiB
377 lines
12 KiB
<template>
|
|
<v-page class="income-page color-plain">
|
|
<!-- <v-header class="nav-tab border-b-0 color-black" :title="''"></v-header> -->
|
|
<swiper class="h-max w-max" :indicator-dots="false" indicator-color="white">
|
|
<template v-for="(item,indes) in imgList">
|
|
<swiper-item
|
|
class="swipe-item color-plain overflow-scroll"
|
|
:style="`background-image:url(${item.bg_img})`"
|
|
:key="item.peri_img"
|
|
v-if="numMap.num>0?item.type==1:item.type==2"
|
|
>
|
|
<view
|
|
class="padding-nav"
|
|
@touchstart="touchstart"
|
|
@touchmove="touchmove"
|
|
@touchend="touchend"
|
|
>
|
|
<view class="fn-right p-t-md p-x-25 h-20"></view>
|
|
<img class="bg-img" :src="item.peri_img" alt="" />
|
|
<view class="p-x-25 m-t-lg" :style="{height:20+'%'}" style="position: absolute; z-index: 12; bottom: 35%; width: 100%; box-sizing: border-box;">
|
|
<!-- <img class="w-max" :src="item.text_img" alt="" /> -->
|
|
<view class="imgtitle fn-center p-x-md" >
|
|
<p :class="$store.state.lang=='zh-CN'?'fn-28':'fn-24 '">{{item.title}}</p>
|
|
<!-- <p class="" v-for="it,i in imgTitleTip[indes]" :key="i">{{it}}</p> -->
|
|
</view>
|
|
</view>
|
|
<view class="p-x-50" :style="{height:40+'%'}" style="position: absolute; z-index: 12;bottom:2%;width: 100%;box-sizing: border-box">
|
|
<!-- <view class="p-t-lg fn-20 d-flex ">
|
|
<view>
|
|
{{ $t("contract.h0") }}
|
|
</view>
|
|
<view class="w-100"></view>
|
|
<view class="d-inline-block fn-13 lever m-l-lg">
|
|
<view class="lever-content">
|
|
{{query.label|| (query.side == 1 ? $t("contract.g0") : $t("contract.g1"))
|
|
}}{{ query.lever_rate }}X
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- <view class="price-box fn-center">
|
|
<text class="price fn-bold d-block" :class="numMap.num>0?'color-buy':'color-sell'">{{ numMap.type }}{{ numMap.num }}{{ numMap.dec }}%</text>
|
|
<text class="fn-14 d-block">（{{ $t("contract.h0")}})</text>
|
|
</view>
|
|
<view class="data-item m-y-sm p-t-md">
|
|
<view class="label fn-12">{{ $t("exchange.a2") }}</view>
|
|
<view class="num fn-22 blue">{{ query.pair_name }}</view>
|
|
</view>
|
|
<view class="data-item m-y-sm p-t-md">
|
|
<view class="label fn-12">{{ $t("contract.k0") }}</view>
|
|
<view class="num fn-22 blue">{{ data.price1 * 1 }}</view>
|
|
</view>
|
|
<view class="data-item m-y-sm p-t-md" v-if="query.newPrice">
|
|
<view class="label fn-12">{{ $t("contract.k1") }}</view>
|
|
<view class="num fn-22 blue">{{ data.price2 * 1 }}</view>
|
|
</view>
|
|
<view class="data-item m-y-sm p-t-md" v-else>
|
|
<view class="label fn-12">{{ $t("contract.j7") }}</view>
|
|
<view class="num fn-22 blue">{{ data.price2 }}</view>
|
|
</view> -->
|
|
<view class="price-box fn-center d-flex justify-center">
|
|
<text class="d-block color-black">{{ $t("contract.h0")}}</text>
|
|
<text class="m-l-xs p-x-xs rounded-xs" :class="query.side==1?'bg-buy':'bg-sell'">
|
|
<span v-if="query.side==1">{{ $t("contract.c0")}}</span>
|
|
<span v-else>{{ $t("contract.c2")}}</span>
|
|
</text>
|
|
</view>
|
|
<view class="price-box fn-center">
|
|
<text class="price fn-bold d-block" :class="numMap.num>0?'color-buy':'color-sell'">{{ numMap.type }}{{ numMap.num }}{{ numMap.dec }}%</text>
|
|
<!-- <view class="color-gray">
|
|
（{{ $t("contract.h0")}})
|
|
</view> -->
|
|
</view>
|
|
<view class="shuju d-flex color-black">
|
|
<view class="left w-33 ">
|
|
<text class="d-block fn-left fn-12 line-height-2 color-gray">{{ query.pair_name }}</text>
|
|
<text class="d-block fn-left fn-16">{{query.label|| (query.side == 1 ? $t("contract.g0") : $t("contract.g1"))
|
|
}}</text>
|
|
</view>
|
|
<view class="center w-33">
|
|
<text class="d-block fn-center fn-12 line-height-2 color-gray">{{ $t("contract.k0") }}</text>
|
|
<text class="d-block fn-center fn-16">
|
|
<span v-if="data.price1>100">{{ omitTo(data.price1* 1 ,2) }}</span>
|
|
<span v-if="data.price1>1&&data.price1<100">{{ omitTo(data.price1* 1 ,4) }}</span>
|
|
<span v-if="data.price1<1">{{ omitTo(data.price1* 1 ,6) }}</span>
|
|
</text>
|
|
</view>
|
|
<view class="right w-33 ">
|
|
<text class="d-block fn-right fn-12 line-height-2 color-gray">{{ $t("contract.k1") }}</text>
|
|
<text class="d-block fn-right fn-16 ">
|
|
<span v-if="data.price2>100">{{ omitTo(data.price2* 1 ,2) }}</span>
|
|
<span v-if="data.price2>1&&data.price2<100">{{ omitTo(data.price2* 1 ,4) }}</span>
|
|
<span v-if="data.price2<1">{{ omitTo(data.price2* 1 ,6) }}</span>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="code-body align-center d-flex justify-between">
|
|
<view class="w-f d-flex align-end">
|
|
<img class="img rounded-3 w-60 w-60" src="static/img/logo.png"/>
|
|
<view class="m-l-md">
|
|
<view class="fn-bold color-black fn-16">
|
|
Coins
|
|
</view>
|
|
<view class="fn-6 color-black">
|
|
全球合约领跑者
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
<v-qr
|
|
:text="detail.invite_url"
|
|
class="share-code w-65 h-65"
|
|
></v-qr>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="fn-center">{{ $t("contract.k6") }}</view> -->
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</template>
|
|
</swiper>
|
|
</v-page>
|
|
</template>
|
|
|
|
<script>
|
|
import Profile from "@/api/profile";
|
|
import Contract from "@/api/contract";
|
|
import math from "@/utils/class/math";
|
|
import { mapState } from "vuex";
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
detail: {},
|
|
query: {},
|
|
data: {},
|
|
dTime: null,
|
|
imgList: [],
|
|
imgTitleTip: [],
|
|
windowHeight:''
|
|
};
|
|
},
|
|
mounted() {
|
|
uni.getSystemInfo({
|
|
success: function (res) {
|
|
this.windowHeight=60
|
|
console.log(this.windowHeight)
|
|
}
|
|
});
|
|
},
|
|
created() {
|
|
this.generalizeInfo();
|
|
if (this.query.entrust_id) {
|
|
this.entrustShare();
|
|
} else if (this.query.position_side) {
|
|
this.positionShare();
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
logoMap: "logoMap",
|
|
}),
|
|
// 收益率
|
|
numMap() {
|
|
let strs = this.query.profitRate.replace("%", "").split(".");
|
|
return {
|
|
type: strs[0] >= 0 ? "+" : "",
|
|
num: strs[0],
|
|
dec: strs[1] ? `.${strs[1].substring(0, 3)}` : "",
|
|
};
|
|
},
|
|
},
|
|
onLoad(query) {
|
|
this.query = query;
|
|
},
|
|
methods: {
|
|
omitTo:math.omitTo,
|
|
generalizeInfo() {
|
|
Profile.generalizeInfo().then((res) => {
|
|
this.detail = res.data;
|
|
});
|
|
},
|
|
entrustShare() {
|
|
Contract.entrustShare({
|
|
symbol: this.query.symbol,
|
|
entrust_id: this.query.entrust_id,
|
|
}).then((res) => {
|
|
this.data = res.data;
|
|
this.imgList = res.data.share_imgs;
|
|
this.imgTitleTip=res.data.tip;
|
|
});
|
|
},
|
|
positionShare() {
|
|
Contract.positionShare({
|
|
symbol: this.query.symbol,
|
|
position_side: this.query.position_side,
|
|
lang:uni.getStorageSync('language')||'zh-CN'
|
|
}).then((res) => {
|
|
this.data = res.data;
|
|
this.imgList = res.data.share_imgs;
|
|
this.imgTitleTip=res.data.tip;
|
|
});
|
|
},
|
|
// -----长按事件----
|
|
touchstart() {
|
|
clearTimeout(this.dTime);
|
|
this.dTime = setTimeout(() => {
|
|
this.bitmap();
|
|
}, 600);
|
|
},
|
|
touchmove() {
|
|
clearTimeout(this.dTime);
|
|
},
|
|
touchend() {
|
|
clearTimeout(this.dTime);
|
|
},
|
|
bitmap() {
|
|
/* eslint-disable */
|
|
let self = this;
|
|
if (!plus) return;
|
|
let pages = getCurrentPages();
|
|
let page = pages[pages.length - 1];
|
|
let ws = page.$getAppWebview();
|
|
// 截图
|
|
let bitmap1 = new plus.nativeObj.Bitmap();
|
|
// 将webview内容绘制到Bitmap对象中
|
|
ws.draw(
|
|
bitmap1,
|
|
function (e) {
|
|
bitmap1.save("_doc/share.png", {}, function (i) {
|
|
plus.gallery.save(
|
|
i.target,
|
|
function (d) {
|
|
//销毁Bitmap图片
|
|
bitmap1.clear();
|
|
self.$toast(self.$t("common.b3"));
|
|
},
|
|
function (e) {
|
|
//销毁Bitmap图片
|
|
self.$toast(self.$t("common.b4"));
|
|
bitmap1.clear();
|
|
}
|
|
);
|
|
});
|
|
},
|
|
function (e) {
|
|
self.$toast(self.$t("common.b3"));
|
|
}
|
|
);
|
|
/* eslint-disable */
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.color-plain {
|
|
color: $white !important;
|
|
}
|
|
.nav-tab {
|
|
position: absolute;
|
|
width: 100%;
|
|
background: transparent;
|
|
/deep/ {
|
|
.van-hairline--bottom:after {
|
|
border-bottom-width: 0px;
|
|
}
|
|
.van-nav-bar {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .van-nav-bar__title {
|
|
color: $white;
|
|
}
|
|
::v-deep .van-nav-bar .van-icon {
|
|
color: $white;
|
|
}
|
|
.p-x-50 {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
.blue {
|
|
color: #00daff;
|
|
}
|
|
.income-page {
|
|
// background: #170043 center/100% 100%;
|
|
position: relative;
|
|
.top-tips {
|
|
word-spacing: 20px;
|
|
color: transparent;
|
|
}
|
|
.lever {
|
|
background: linear-gradient(to right, #00daff, #9e61ff);
|
|
padding: 1px;
|
|
border-radius: 4px;
|
|
.lever-content {
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
background: #170043;
|
|
}
|
|
}
|
|
.swipe-item {
|
|
background-position: top center;
|
|
background-size: 100% 100%;
|
|
}
|
|
.price-box {
|
|
margin-bottom: 10%;
|
|
.price {
|
|
font-size: 56px;
|
|
// background: linear-gradient(to right, #00daff, #9e61ff);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
}
|
|
}
|
|
.data-item {
|
|
position: relative;
|
|
&::before {
|
|
display: block;
|
|
position: absolute;
|
|
content: "";
|
|
width: 25px;
|
|
height: 3px;
|
|
background: $white;
|
|
top: 0;
|
|
}
|
|
}
|
|
.code-body {
|
|
width: 100%;
|
|
height: 6rem;
|
|
.img{
|
|
// width: 26%;
|
|
}
|
|
}
|
|
.bg-img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.imgtitle p{
|
|
color: #113062;
|
|
// background-image:-webkit-linear-gradient(top,#dff4ff,#85c3e3);
|
|
// -webkit-background-clip:text;
|
|
// -webkit-text-fill-color:transparent;
|
|
// font-family: '宋体';
|
|
}
|
|
.w-50{
|
|
width:25%;
|
|
}
|
|
.h-50{
|
|
// height:250%;
|
|
}
|
|
.share-code{
|
|
background-color: white;
|
|
padding: 5px;
|
|
}
|
|
.shuju{
|
|
margin-bottom: 6%;
|
|
.center{
|
|
border-left: 1px solid ;
|
|
border-right: 1px solid ;
|
|
}
|
|
}
|
|
.color-black{
|
|
color: black;
|
|
}
|
|
.w-33{
|
|
width: 33%;
|
|
}
|
|
.color-gray{
|
|
color: gray;
|
|
}
|
|
.rounded-3{
|
|
border-radius: 5px;
|
|
}
|
|
.w-f{
|
|
width: fit-content;
|
|
}
|
|
</style>
|
|
|