li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
560 lines
17 KiB
Vue
560 lines
17 KiB
Vue
<template>
|
|
<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100%;min-height: 100vh;">
|
|
<!-- 头部 -->
|
|
<view class="width-750 relative flex align-center justify-center"
|
|
:style="{height: `calc(${statusBar}px + 220rpx)`}">
|
|
<view class="width-750 fixed1"
|
|
:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 220rpx)`}">
|
|
<view class="width-750 height-110 padding-w-30 flex align-center justify-center">
|
|
<view @click="_goback" class="cuIcon-back font-40 color-white"
|
|
style="position: absolute;left: 30rpx;"></view>
|
|
<text class="font-36 color-white weight-bold">{{i18n.releaseTrade.title}}</text>
|
|
<view class="flex align-center" style="position: absolute;right: 30rpx;">
|
|
<view @click.stop="show=true" class="switchbox">
|
|
<text class="nummedium-font">{{faby}}</text>
|
|
<image class="width-34 height-34 margin-l-5" src="/static/imgs/index/change@2x.png" mode="">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="height-110 flex align-center padding-w-30">
|
|
<view class="flex-9 flex align-center">
|
|
<view @click="changeType(1)" class="flex-1" :class="currtype==1?'onfont':'offfont'">
|
|
{{i18n.releaseTrade.text1}}
|
|
</view>
|
|
<view @click="changeType(2)" class="flex-1" :class="currtype==2?'onfont':'offfont'">
|
|
{{i18n.releaseTrade.text2}}
|
|
</view>
|
|
</view>
|
|
<view class="flex-3 flex align-center justify-end">
|
|
<image @click="router.push('/pages/index/fastRecord')" class="width-54 height-54"
|
|
src="/static/imgs/index/jilu@2x.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 身体 -->
|
|
<view class="width-750 padding-b-40">
|
|
<!-- 币种 -->
|
|
<view class="height-72 bj-0165EE">
|
|
<view class="height-72 flex align-center"
|
|
:style="'background-color: '+theme.bg+';color: '+theme.text"
|
|
style="border-radius: 20rpx 20rpx 0 0;">
|
|
<view class="width-100b height-100b">
|
|
<scroll-view scroll-x="true">
|
|
<view class="flex align-center">
|
|
<view @click.stop="setiscurr(item)" v-for="(item,index) in currlist"
|
|
class="height-72 padding-w-30 flex direction-column align-center justify-center relative">
|
|
<text :class="currid==item.id?'select':'noselect'">{{item.name}}</text>
|
|
<view v-if="currid==item.id" class="width-48 height-4 bj-0165EE"
|
|
style="position: absolute;bottom: 0;"></view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 数量 -->
|
|
<view class="width-690 margin-0-auto border-bottom">
|
|
<view class="height-96 flex align-center justify-between">
|
|
<text class="font-30">{{currtype==1?i18n.releaseTrade.text3:i18n.releaseTrade.text4}}</text>
|
|
</view>
|
|
<view class="height-96 flex align-center">
|
|
<input class="flex-1 font-30" type="text" v-model="number"
|
|
:placeholder="currtype==1?i18n.releaseTrade.tos1:i18n.releaseTrade.tos2"/>
|
|
</view>
|
|
</view>
|
|
<!-- 限额 -->
|
|
<view class="width-690 margin-0-auto border-bottom margin-t-23">
|
|
<view class="height-96 flex align-center justify-between">
|
|
<text class="font-30">{{i18n.releaseTrade.text5}}</text>
|
|
</view>
|
|
<view class="height-96 flex align-center">
|
|
<input class="input" type="number" :placeholder="i18n.releaseTrade.tos3" v-model="min" />
|
|
<view class="width-105 text-center">~</view>
|
|
<input class="input" type="number" :placeholder="i18n.releaseTrade.tos4" v-model="max" />
|
|
<view class="width-105 text-right">
|
|
<text class="font-30 nummedium-font">{{faby}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 单价 -->
|
|
<view class="width-690 margin-0-auto border-bottom margin-t-23">
|
|
<view class="height-96 flex align-center justify-between">
|
|
<text class="font-30">{{i18n.releaseTrade.text6}}</text>
|
|
</view>
|
|
<view class="height-96 flex align-center justify-between">
|
|
<input class="flex-1 padding-r-30 font-30" type="text" v-model="price"
|
|
:placeholder="i18n.releaseTrade.tos5" />
|
|
<text class="font-30 nummedium-font">{{faby}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 交易密码 -->
|
|
<view class="width-690 margin-0-auto border-bottom margin-t-23">
|
|
<view class="height-96 flex align-center justify-between">
|
|
<text class="font-30">{{i18n.releaseTrade.text7}}</text>
|
|
</view>
|
|
<view class="height-96 flex align-center">
|
|
<input class="flex-1 font-30" type="text" v-model="paypwd"
|
|
:placeholder="i18n.releaseTrade.tos6" password />
|
|
</view>
|
|
</view>
|
|
<!-- 支付方式 -->
|
|
<view class="width-690 margin-0-auto margin-t-23">
|
|
<view class="height-96 flex align-center justify-between">
|
|
<text
|
|
class="font-30">{{currtype==1?i18n.releaseTrade.text8:i18n.releaseTrade.text9}}</text>
|
|
<view class="flex align-center font-30">
|
|
<text>{{fabyname}}</text>
|
|
<!-- <u-icon name="arrow-right" color="#8B99A2" size="24"></u-icon> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 收款账户 -->
|
|
<view v-if="currtype==2" class="width-690 margin-0-auto margin-t-23">
|
|
<view @click="show1=true" class="height-96 flex align-center justify-between">
|
|
<text class="font-30">{{i18n.releaseTrade.text10}}</text>
|
|
<view class="flex align-center font-30">
|
|
<text v-if="collecid!=''">{{collecdata.card_num|changestyle}}</text>
|
|
<u-icon name="arrow-right" size="24"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view @click.stop="openshow" class="buybtn margin-0-auto margin-t-100">
|
|
<text>{{i18n.releaseTrade.text11}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 确认发布弹窗 -->
|
|
<u-popup v-model="fbshow" mode="bottom" border-radius="20">
|
|
<view class="height-600 padding-w-30"
|
|
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
|
<view class="height-105 padding-t-22 padding-b-38 flex align-center justify-center">
|
|
<text class="font-30 weight-bold">{{currtype==1?i18n.releaseTrade.text12:i18n.releaseTrade.text13}}</text>
|
|
<view @click="fbshow=false" style="position: absolute;right: 30rpx;" class="font-26 color-C3C3C3">
|
|
{{i18n.releaseTrade.text14}}
|
|
</view>
|
|
</view>
|
|
<view class="height-106 flex align-center justify-center font-48 color-FF4040 numbold-font">
|
|
<!-- <u-icon name="rmb" color="#FF4040" size="42"></u-icon> -->
|
|
<text class="font-36 color-FF4040">{{fabysym}}</text>
|
|
<text class="margin-l-5">{{(number*price).toFixed(2)}}</text>
|
|
</view>
|
|
<view class="height-66 margin-t-42 flex align-center justify-between font-30">
|
|
<text>{{i18n.releaseTrade.text15}}</text>
|
|
<text class="nummedium-font">{{price}} {{faby}}</text>
|
|
</view>
|
|
<view class="height-66 flex align-center justify-between font-30">
|
|
<text>{{i18n.releaseTrade.text16}}</text>
|
|
<text class="nummedium-font">{{number}} {{curr}}</text>
|
|
</view>
|
|
<!-- <view class="height-192">
|
|
<view v-for="(item,index) in 2" class="height-96 flex align-center justify-between">
|
|
<view class="flex align-center">
|
|
<image class="width-46 height-46 radiu-23" src="/static/logo.png" mode=""></image>
|
|
<text class="font-30 color-333333 margin-l-22">RM</text>
|
|
</view>
|
|
<image class="width-34 height-34 radiu-17" :src="iscurr==index?XZ:WX" mode=""></image>
|
|
</view>
|
|
</view> -->
|
|
<view @click.stop="closeshow" class="buybtn margin-t-86">
|
|
<text>{{i18n.releaseTrade.text17}}</text>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 法币弹窗 -->
|
|
<u-popup v-model="show" mode="bottom" border-radius="20">
|
|
<view class="padding-w-30 padding-b-36"
|
|
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
|
<view class="height-96 line-height-96 text-center relative">
|
|
<text class="font-30 weight-bold">{{i18n.releaseTrade.text18}}</text>
|
|
<text @click.stop="show=false" class="font-26 color-C3C3C3 absolute"
|
|
style="right: 0;">{{i18n.releaseTrade.text14}}</text>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="height-450">
|
|
<view @click="setFaby(item)" v-for="(item,index) in fabylist"
|
|
class="height-96 flex align-center justify-between">
|
|
<view class="flex align-center">
|
|
<image class="width-48 height-48 radiu-24" :src="item.pay_image" mode=""></image>
|
|
<text class="font-28 margin-l-16">{{item.curr_name}}</text>
|
|
</view>
|
|
<image class="width-36 height-36" :src="fabyid==item.id?XZ:WX" mode=""></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 收款账户弹窗 -->
|
|
<u-popup v-model="show1" mode="bottom" border-radius="20">
|
|
<view class="padding-w-30 padding-b-36"
|
|
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
|
<view class="height-96 line-height-96 text-center relative">
|
|
<text class="font-30 weight-bold">{{i18n.releaseTrade.text19}}</text>
|
|
<text @click.stop="show1=false" class="font-26 color-C3C3C3 absolute"
|
|
style="right: 0;">{{i18n.releaseTrade.text14}}</text>
|
|
</view>
|
|
<scroll-view scroll-y="true" class="height-450">
|
|
<view @click="setcollec(item)" v-for="(item,index) in collec"
|
|
:style="'background-color: '+theme.fu_bg+';color: '+theme.text"
|
|
class="height-96 flex align-center justify-between margin-b-10 radiu-10 padding-w-20">
|
|
<view class="flex-1 padding-r-24 height-96 flex direction-column justify-around">
|
|
<view class="flex align-center">
|
|
<text>{{item.username}}</text>
|
|
<text class="font-28 margin-l-16">{{item.card_num|changestyle}}</text>
|
|
</view>
|
|
<view class="font-24 color-C3C3C3">{{item.bank_name}}</view>
|
|
</view>
|
|
<image class="width-36 height-36" :src="collecid==item.id?XZ:WX" mode=""></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 去实名 -->
|
|
<u-popup style="z-index: 5000;" border-radius="18" mode="center" v-model="TSShow">
|
|
<view class="width-600 padding-b-20"
|
|
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
|
<view class="width-100b height-220 padding-w-30 padding-c-40 flex direction-column align-center justify-between">
|
|
<image class="width-64 height-64" src="/static/imgs/quantify/tongzhi@2x.png" mode=""></image>
|
|
<view class="font-28 weight-bold text-center padding-w-20">{{i18n.releaseTrade.text20}}
|
|
</view>
|
|
</view>
|
|
<view class="width-100b height-90 flex align-center justify-center">
|
|
<view @click="TSShow=false,router.push('/pages/my/safety/real')" class="qcbtn3">
|
|
{{i18n.releaseTrade.text21}}</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
|
currtype: 1, //1我要买，2我要卖
|
|
fbshow: false, //发布弹窗
|
|
iscurr: 0,
|
|
XZ: '/static/imgs/quantify/xuanzhong@2x.png',
|
|
WX: '/static/imgs/quantify/weixuanzhong@2x.png',
|
|
|
|
show: false, //法币弹窗
|
|
faby: '', //法币
|
|
fabyid: '', //法币id
|
|
fabyname: '', //法币国家名称
|
|
fabylist: [], //法币列表
|
|
fabysym: '',
|
|
curr: '', //币种
|
|
currid: '', //当前币种id
|
|
currlist: [], //币种列表
|
|
flag: true,
|
|
number: '', //数量
|
|
min: '', //最小
|
|
max: '', //最大
|
|
price: '', //价格
|
|
paypwd: '', //交易密码
|
|
show1: false,
|
|
collec: [], //收款账户列表
|
|
collecid: '', //当前收款账户id
|
|
collecdata: '', //当前收款账户对象
|
|
TSShow: false,
|
|
|
|
theme: '',
|
|
|
|
}
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync("theme") == "dark") {
|
|
this.theme = this.$store.state.darkTheme
|
|
} else {
|
|
this.theme = this.$store.state.lightTheme
|
|
}
|
|
this.getCurrlist()
|
|
this.getFabylist()
|
|
this.getcollection()
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t('message');
|
|
}
|
|
},
|
|
filters: {
|
|
changestyle(e) {
|
|
let str = e
|
|
var reg = /^(\d{4})\d+(\d{4})$/;
|
|
str = str.replace(reg, "$1 ＊＊＊＊ $2");
|
|
return str
|
|
}
|
|
},
|
|
methods: {
|
|
// 发布我要卖
|
|
getquick_sell() {
|
|
if (!this.flag) {
|
|
return
|
|
} else {
|
|
this.flag = false
|
|
let obj = {
|
|
num: this.number,
|
|
price: this.price,
|
|
min_price: this.min,
|
|
max_price: this.max,
|
|
pay_pwd: this.paypwd,
|
|
country_id: this.fabyid,
|
|
curr_id: this.currid,
|
|
payment: 1,
|
|
collection_id: this.collecid
|
|
}
|
|
this.post('/marketotc/quick_sell', obj).then(res => {
|
|
console.log('发布返回', res)
|
|
this.flag = true
|
|
uni.hideLoading()
|
|
if (res.code == 1) {
|
|
this.tos(res.msg)
|
|
this.number = ''
|
|
this.price = ''
|
|
this.min = ''
|
|
this.max = ''
|
|
this.paypwd = ''
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/index/fastRecord'
|
|
})
|
|
}, 500)
|
|
} else {
|
|
uni.hideToast()
|
|
if (res.data.jump == 1) {
|
|
this.number = ''
|
|
this.price = ''
|
|
this.min = ''
|
|
this.max = ''
|
|
this.paypwd = ''
|
|
this.TSShow = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 发布我要买
|
|
getquick_buy() {
|
|
if (!this.flag) {
|
|
return
|
|
} else {
|
|
this.flag = false
|
|
let obj = {
|
|
num: this.number,
|
|
price: this.price,
|
|
min_price: this.min,
|
|
max_price: this.max,
|
|
pay_pwd: this.paypwd,
|
|
country_id: this.fabyid,
|
|
curr_id: this.currid,
|
|
payment: 1,
|
|
}
|
|
this.post('/marketotc/quick_buy', obj).then(res => {
|
|
console.log('发布返回', res)
|
|
this.flag = true
|
|
uni.hideLoading()
|
|
if (res.code == 1) {
|
|
this.tos(res.msg)
|
|
this.number = ''
|
|
this.price = ''
|
|
this.min = ''
|
|
this.max = ''
|
|
this.paypwd = ''
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages/index/fastRecord'
|
|
})
|
|
}, 500)
|
|
} else {
|
|
uni.hideToast()
|
|
if (res.data.jump == 1) {
|
|
this.number = ''
|
|
this.price = ''
|
|
this.min = ''
|
|
this.max = ''
|
|
this.paypwd = ''
|
|
this.TSShow = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
closeshow() {
|
|
this.fbshow = false
|
|
uni.showLoading({
|
|
title: '',
|
|
mask: true
|
|
})
|
|
if (this.currtype == 1) {
|
|
this.getquick_buy()
|
|
} else {
|
|
this.getquick_sell()
|
|
}
|
|
},
|
|
openshow() {
|
|
if (this.number == '') return this.tos(this.i18n.releaseTrade.tos7)
|
|
if (this.min == '' || this.max == '') return this.tos(this.i18n.releaseTrade.tos8)
|
|
if (this.price == '') return this.tos(this.i18n.releaseTrade.tos5)
|
|
if (this.paypwd == '') return this.tos(this.i18n.releaseTrade.tos6)
|
|
this.fbshow = true
|
|
},
|
|
// 选择账户
|
|
setcollec(item) {
|
|
if (this.collecid != item.id) {
|
|
this.collecid = item.id
|
|
this.collecdata = item
|
|
this.show1 = false
|
|
}
|
|
},
|
|
// 获取收款账户列表
|
|
getcollection() {
|
|
this.post('/marketotc/get_collection').then(res => {
|
|
console.log('收款账户列表', res)
|
|
if (res.code == 1 && res.data && res.data.length > 0) {
|
|
this.collec = res.data
|
|
this.collecid = res.data[0].id
|
|
this.collecdata = res.data[0]
|
|
} else {
|
|
// 如果没有收款账户或数据为空，设置默认值
|
|
this.collec = []
|
|
this.collecid = ''
|
|
this.collecdata = ''
|
|
}
|
|
})
|
|
},
|
|
// 选择法币
|
|
setFaby(item) {
|
|
this.faby = item.curr_name
|
|
this.fabyid = item.id
|
|
this.fabyname = item.pay_name
|
|
this.fabysym = item.symbol
|
|
this.show = false
|
|
},
|
|
// 获取法币列表
|
|
getFabylist() {
|
|
this.post('/marketotc/get_country').then(res => {
|
|
console.log('法币列表', res)
|
|
if (res.code == 1) {
|
|
this.fabylist = res.data
|
|
this.faby = res.data[0].curr_name
|
|
this.fabyid = res.data[0].id
|
|
this.fabyname = res.data[0].pay_name
|
|
this.fabysym = res.data[0].symbol
|
|
}
|
|
})
|
|
},
|
|
// 选择币种
|
|
setiscurr(item) {
|
|
if (this.currid != item.id) {
|
|
this.currid = item.id
|
|
this.curr = item.name
|
|
}
|
|
},
|
|
// 获取币种列表
|
|
getCurrlist() {
|
|
this.post('/marketotc/get_curr').then(res => {
|
|
console.log('币种列表', res)
|
|
if (res.code == 1) {
|
|
this.currlist = res.data
|
|
this.currid = res.data[0].id
|
|
this.curr = res.data[0].name
|
|
}
|
|
})
|
|
},
|
|
// 选择买或卖
|
|
changeType(i) {
|
|
if (this.currtype != i) {
|
|
this.currtype = i
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.fixed1 {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 1000;
|
|
background: #06C38D;
|
|
}
|
|
|
|
.onfont {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.offfont {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1rpx solid rgba(191, 195, 199, 0.2);
|
|
}
|
|
|
|
.buybtn {
|
|
width: 690rpx;
|
|
height: 96rpx;
|
|
background: #06C38D;
|
|
opacity: 1;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.select {
|
|
font-size: 28rpx;
|
|
font-family: "Bold" !important;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: #06C38D;
|
|
}
|
|
|
|
.noselect {
|
|
font-size: 26rpx;
|
|
font-family: "Medium" !important;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: #8B99A2;
|
|
}
|
|
|
|
.input {
|
|
width: 240rpx;
|
|
height: 66rpx;
|
|
// background: #F6F8FB;
|
|
border: 1rpx solid #E5E5E5;
|
|
opacity: 1;
|
|
border-radius: 10rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
// color: #D1D3D8;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.qcbtn3 {
|
|
width: 320rpx;
|
|
height: 86rpx;
|
|
background: #06C38D;
|
|
border-radius: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|