<template>
|
<v-paging :ajax="getHistoryEntrust" class="h-max" ref="vPag">
|
<template #box="list">
|
<van-empty v-if="!$list(list).length" description="" />
|
<div
|
class="item bg-panel-4 m-md rounded-sm box-shadow"
|
v-for="item in $list(list)"
|
:key="item.id"
|
@click="showDetail(item)"
|
>
|
<div
|
class="head d-flex align-center border-b p-x-md p-y-xs justify-between"
|
>
|
<div class="d-flex">
|
<div>
|
<div class="color-light fn-20">{{ item.symbol }}/USDT</div>
|
<div class="fn-10">{{ item.created_at }}</div>
|
</div>
|
</div>
|
<div class="d-flex">
|
<span>{{ item.lever_rate }}X</span>
|
</div>
|
</div>
|
<div class="p-x-md p-y-xs">
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.a6')}}</div>
|
<div class="color-light">{{cals(item.side,item.order_type)}}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.a7')}}/{{$t('contract.a8')}}</div>
|
<div class="color-light">{{item.traded_amount}}/{{item.amount}}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.a9')}}/{{$t('contract.b0')}}</div>
|
<div class="color-light">{{item.avg_price||'--'}}/{{item.entrust_price||'--'}}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.b1')}}</div>
|
<div class="color-light">{{item.margin*1}}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.b2')}}</div>
|
<div class="color-light">{{item.fee*1}}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.c7')}}</div>
|
<div class="color-light">{{item.profit*1||'--'}}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between">
|
<div class="label fn-sm">{{$t('contract.b3')}}</div>
|
<div class="color-light">{{ status(item.status) }}</div>
|
</div>
|
<div class="row d-flex m-y-mini justify-between" v-if="item.profit">
|
<div class="label fn-sm">{{$t('contract.b4')}}</div>
|
<div class="color-light">
|
<!-- <v-button type="green-plain" class="m-l-xs rounded-xs" size="mini" plain
|
:to="{path:'/pages/income/index',query:{
|
symbol:item.symbol,
|
side:item.side,
|
profitRate:item.profit/item.margin*100+'',
|
lever_rate:item.lever_rate,
|
avg_price:item.avg_price,
|
pair_name:item.symbol+'/USDT',
|
newPrice: newPrice,
|
position_side: 2,
|
}}"
|
>{{$t('contract.c8')}}</v-button> -->
|
<v-button type="green-plain" class="m-l-xs rounded-xs" size="mini" plain @click="canvasImage(item)">{{$t('contract.c8')}}</v-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<van-popup
|
v-model="show"
|
closeable
|
close-on-popstate
|
position="bottom"
|
:style="{ height: '80%', width: '100%' }"
|
>
|
<div class="bg-panel-1 h-max" @touchstart.stop @touchmove.stop>
|
<div class="fn-center title-box p-md bg-panel-4 fn-lg">
|
{{$t('contract.c9')}}
|
</div>
|
<van-empty v-if="!order_details.length" :description="$t('contract.d0')" />
|
<div class="item bg-panel-4 m-md rounded-sm p-md" v-for="item in order_details" :key="item.id">
|
<div class="row d-flex m-y-xs justify-between">
|
<div class="label fn-sm">{{$t('contract.d1')}}</div>
|
<div class="color-light">{{item.unit_price}}</div>
|
</div>
|
<div class="row d-flex m-y-xs justify-between">
|
<div class="label fn-sm">{{$t('contract.d2')}}</div>
|
<div class="color-light">{{item.trade_amount}}</div>
|
</div>
|
<div class="row d-flex m-y-xs justify-between">
|
<div class="label fn-sm">{{$t('contract.b2')}}</div>
|
<div class="color-light">{{item.trade_buy_fee}}</div>
|
</div>
|
<div class="row d-flex m-y-xs justify-between">
|
<div class="label fn-sm">{{$t('contract.d3')}}</div>
|
<div class="color-light">{{item.created_at}}</div>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
<van-popup
|
class="share"
|
custom-style="width:100%;height:100%;background-color:transparent;padding-top:5%"
|
:show="canvasShow"
|
@close="canvasShow = false">
|
<view class="canvas" >
|
<canvas canvas-id="mycanvas" style="width: 80%;height: 1120rpx;border-radius: 10px;overflow: hidden;"></canvas>
|
</view>
|
<view class="foot" :style="[{'bottom':android=='iOS'?'60px':'0px'}]">
|
<view @click="saveImage" class="bg-lin w-8/12 rounded-xs autowidth fn-center p-y-ms m-t-lg">
|
{{$t('common.save')}}
|
</view>
|
<view @click="cancel" class="autowidth fn-center p-y-ms m-y-lg border-bb">
|
{{$t('common.cancel')}}
|
</view>
|
</view>
|
</van-popup>
|
</template>
|
</v-paging>
|
</template>
|
<script>
|
import Profile from "@/api/profile";
|
import Contract from "@/api/contract";
|
import math from "@/utils/class/math";
|
export default {
|
name: "contract-entrustment",
|
data() {
|
return {
|
show:false,
|
activeItem:{},
|
order_details:[],
|
newPrice: 0,
|
canvasShow:false,
|
myCanvas:'',
|
imgurl:'',
|
detail:''
|
};
|
},
|
props:['tabs'],
|
computed:{
|
android(){
|
// #ifdef APP-PLUS
|
return plus.os.name
|
// #endif
|
}
|
},
|
methods: {
|
omitTo:math.omitTo,
|
canvasImage(i){
|
var that=this
|
that.canvasShow=true
|
Contract.positionShare({
|
symbol: i.symbol,
|
position_side: i.side,
|
order_no:i.order_no,
|
lang:uni.getStorageSync('language')||'zh-CN'
|
}).then((ress) => {
|
if(ress.code==200){
|
that.sha(ress,i)
|
}
|
});
|
},
|
sha(ress,i){
|
console.log('ress',ress);
|
let arr=[];
|
ress.data.share_imgs.forEach((res)=>{
|
// if(i.profit>0&&res.type==1){
|
// arr.push(res)
|
// }else if(i.profit<0&&res.type==2){
|
arr.push(res)
|
// }
|
})
|
// console.log('arr',arr,Math.round(Math.random()*arr.length));
|
var share_imgs=arr[Math.round(Math.random()*arr.length)];
|
if(!share_imgs||!this.detail){
|
console.log('123123123',this.detail,share_imgs);
|
this.$toast(this.$t('recharge.a6'))
|
this.canvasShow=false
|
return
|
}
|
let windowHeight,windowWidth
|
uni.getSystemInfo({
|
success: function (res) {
|
windowHeight=res.windowHeight
|
windowWidth=res.windowWidth
|
}
|
});
|
let myCanvas = uni.createCanvasContext('mycanvas', this);
|
//画布背景
|
//参数：图片，左偏移，上偏移，宽，高
|
myCanvas.drawImage(share_imgs.bg_img,0,0,windowWidth,windowHeight);
|
myCanvas.drawImage(share_imgs.peri_img,-40,0,windowWidth,windowHeight*0.3);
|
myCanvas.drawImage('../../static/img/logo.png',25,windowHeight*0.6,50,50);
|
// myCanvas.drawImage(this.detail,windowWidth*0.58,windowHeight*0.59,65,65);
|
myCanvas.textAlign = 'left';
|
myCanvas.setFillStyle('#000000')
|
myCanvas.font = '16px Arial';//绘制文字
|
if(i.profit==0){
|
myCanvas.fillText(this.$t("common.c22")+' '+0,88,windowHeight*0.653);
|
myCanvas.font = '16px Arial';
|
}else{
|
myCanvas.fillText(this.$t("common.c22")+' '+i.profit,88,windowHeight*0.653);
|
myCanvas.font = '16px Arial';
|
}
|
|
myCanvas.fillText('KCS',88,windowHeight*0.63);
|
myCanvas.font = '14px Arial';
|
myCanvas.setFillStyle('#717171')
|
myCanvas.fillText(i.symbol+'/USDT',25,windowHeight*0.53);
|
myCanvas.fillText(this.$t("contract.k0"),uni.getStorageSync('language')=='zh-CN'?windowWidth*0.34:windowWidth*0.29,windowHeight*0.53);
|
myCanvas.fillText(this.$t("contract.j7"),uni.getStorageSync('language')=='zh-CN'?windowWidth*0.6:windowWidth*0.56,windowHeight*0.53);
|
myCanvas.setFillStyle('#000000')
|
myCanvas.fillText(this.cals(i.side,i.order_type),25,windowHeight*0.555);
|
myCanvas.fillText(ress.data.price1>1?this.omitTo(ress.data.price1,2):this.omitTo(ress.data.price1,4),uni.getStorageSync('language')=='zh-CN'?windowWidth*0.345:windowWidth*0.33,windowHeight*0.555);
|
myCanvas.fillText(ress.data.price2>1?this.omitTo(ress.data.price2,2):this.omitTo(ress.data.price2,4),uni.getStorageSync('language')=='zh-CN'?windowWidth*0.605:windowWidth*0.6,windowHeight*0.555);
|
|
myCanvas.textAlign = 'center';
|
myCanvas.setFillStyle('#000000')
|
myCanvas.font = '25px Arial';
|
this.drawText(myCanvas, share_imgs.title, windowWidth/2.5, windowHeight*0.34, 30, 265);// 调用行文本换行函数
|
// myCanvas.fillText(share_imgs.title,windowWidth/2.5,windowHeight*0.35);
|
myCanvas.textAlign = 'center';
|
myCanvas.font = '12px Arial';
|
myCanvas.fillText(this.$t('option.a4'),windowWidth/2.5,windowHeight*0.42);
|
myCanvas.setFillStyle(i.profit>0?'#00D094':'#ea3131')
|
myCanvas.font = 'bold 50px Arial';
|
myCanvas.fillText(this.omitTo(i.profit/i.margin*100,2)+'%',windowWidth/2.5,windowHeight*0.48);
|
myCanvas.draw(true,()=>{
|
uni.canvasToTempFilePath({
|
canvasId: 'mycanvas',
|
// destWidth: windowWidth, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
|
// destHeight: windowHeight*0.9,
|
success: (res) => {
|
// 在H5平台下，tempFilePath 为 base64
|
this.imgurl = res.tempFilePath;
|
console.log(this.imgurl)
|
// this.canvasShow = false;
|
uni.setStorageSync('person-card',this.imgurl);
|
},
|
fail: () => {
|
|
}
|
});
|
});
|
},
|
drawText (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
|
let lineWidth = 0;
|
let lastSubStrIndex = 0; //每次开始截取的字符串的索引
|
for (let i = 0; i < str.length; i++) {
|
lineWidth += ctx.measureText(str[i]).width;
|
if (lineWidth > canvasWidth) {
|
ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分
|
initHeight += 22; //22为 文字大小20 + 2
|
lineWidth = 0;
|
lastSubStrIndex = i;
|
titleHeight += 22;
|
}
|
if (i == str.length - 1) { //绘制剩余部分
|
ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
|
}
|
}
|
// 标题border-bottom 线距顶部距离
|
titleHeight = titleHeight + 10;
|
return titleHeight;
|
},
|
saveImage(){
|
// uni.showActionSheet({
|
// itemList: [this.$t('common.save')],
|
// success: (res) => {
|
// if(res.tapIndex == 0){
|
|
// }
|
// },
|
// fail: function (res) {
|
// console.log(res.errMsg);
|
// }
|
// });
|
// uni.saveImageToPhotosAlbum({
|
// filePath: this.imgurl,// 图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
|
// fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
|
// quality: 1,
|
// success: () => {
|
// this.canvasShow = false;
|
// uni.showToast({
|
// title: this.$t('common.b3'),
|
// duration: 2000
|
// });
|
// },
|
// fail: () => {
|
// uni.showToast({
|
// title: this.$t('common.b4'),
|
// duration: 2000
|
// });
|
// }
|
// });
|
//#ifdef APP-PLUS
|
uni.saveImageToPhotosAlbum({
|
filePath: this.imgurl,// 图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径
|
fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
|
quality: 1,
|
success: () => {
|
this.canvasShow = false;
|
uni.showToast({
|
title: this.$t('common.b3'),
|
duration: 2000
|
});
|
},
|
fail: () => {
|
uni.showToast({
|
title: this.$t('common.b4'),
|
duration: 2000
|
});
|
}
|
});
|
//#endif
|
//#ifdef H5
|
this.saveImg(this.imgurl)
|
//#endif
|
},
|
//h5保存图片
|
saveImg(url) {
|
console.log(url)
|
var oA = document.createElement("a");
|
oA.download = ''; // 设置下载的文件名，默认是'下载'
|
oA.href = url;
|
document.body.appendChild(oA);
|
oA.click();
|
oA.remove(); // 下载之后把创建的元素删除
|
},
|
generalizeInfo() {
|
Profile.qrcode().then((res) => {
|
this.detail = res.data;
|
// console.log(this.detail)
|
});
|
},
|
// 获取买卖盘
|
getMarketInfo() {
|
let data = {
|
symbol: this.symbolLeft,
|
};
|
Contract.getMarketInfo(data).then((res) => {
|
this.newPrice = res.data.swapTradeList[0].price;
|
});
|
},
|
getHistoryEntrust: Contract.getHistoryEntrust,
|
status(status) {
|
switch (status) {
|
case 0:
|
return this.$t('contract.b6');
|
case 1:
|
return this.$t('contract.b7');
|
case 2:
|
return this.$t('contract.b9');
|
case 3:
|
return this.$t('contract.b9');
|
}
|
},
|
cals(side, order_type) {
|
// side - order_type
|
let map = {
|
"1-1": this.$t('contract.c0'),
|
"1-2": this.$t('contract.c1'),
|
"2-1": this.$t('contract.c2'),
|
"2-2": this.$t('contract.c3'),
|
};
|
return map[`${side}-${order_type}`];
|
},
|
showDetail(item){
|
Contract.getEntrustDealList({
|
entrust_id:item.id,
|
symbol:item.symbol
|
},{loading:true}).then(res=>{
|
this.order_details= res.data
|
this.show = true
|
})
|
},
|
cancel(){
|
let windowHeight,windowWidth
|
uni.getSystemInfo({
|
success: function (res) {
|
windowHeight=res.windowHeight
|
windowWidth=res.windowWidth
|
}
|
});
|
this.canvasShow=false
|
let myCanvas = uni.createCanvasContext('mycanvas', this);
|
myCanvas.width=0
|
myCanvas.height=0
|
},
|
|
},
|
mounted() {
|
this.generalizeInfo()
|
if (this.symbolLeft) {
|
this.getMarketInfo();
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.m-y-mini{
|
margin-top: 5px;
|
margin-bottom: 5px;
|
}
|
.canvas{
|
canvas{
|
margin: 50px auto 0 auto;
|
transform: scale(0.8);
|
}
|
}
|
.foot{
|
width:100%;
|
position:fixed;
|
z-index: 100;
|
/* #ifdef H5 */
|
bottom: 0;
|
/* #endif */
|
background-color: #2c2f3a;
|
color: black;
|
}
|
.autowidth{
|
margin: 0 auto;
|
}
|
.bg-lin{
|
background: linear-gradient(to right,#f6c769,#f3b644);
|
}
|
.border-bb{
|
border-top: 3px solid #000;
|
color: #969696;
|
}
|
/deep/ .share.vant-popup-index{
|
z-index: 100;
|
}
|
</style>
|
