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.
239 lines
8.7 KiB
239 lines
8.7 KiB
<template>
|
|
<view class="layout-page" :style="themeStyle">
|
|
<v-header :title="$t('currency.a0')">
|
|
<!-- <template #right>
|
|
<v-link to="/pages/currency/list" class="d-flex align-center">
|
|
<van-icon class="fn-20 m-t-xs" name="todo-list-o" />
|
|
</v-link>
|
|
</template> -->
|
|
</v-header>
|
|
<view class="main">
|
|
<view class="head fn-16">
|
|
<text @click="active=1;money=''" class="m-x-md" :class="active==1?'bor-b fn-bold':''">{{$t("currency.a1")}}</text>
|
|
<text @click="active=2;money=''" class="m-x-md" :class="active==2?'bor-b fn-bold':''">{{$t("currency.a2")}}</text>
|
|
</view>
|
|
<view class="content p-y-lg">
|
|
<text class="color-theme-1 shadow-panel-nei-5 bg-panel-3 rounded p-x-xl p-y-xs">USDT</text>
|
|
<view class="d-flex justify-between align-center">
|
|
<text v-if="active==1" class="d-block m-t-lg fn-bold color-light fn-16 p-y-md">{{$t("currency.a3")}}</text>
|
|
<text v-if="active==2" class="d-block m-t-lg fn-bold color-light fn-16 p-y-md">{{$t("currency.a4")}}</text>
|
|
<text class="m-t-lg color-theme-1 fn-12">
|
|
<img src="static/img/fill4.png" alt="" class="h-12" />
|
|
<span class="m-l-xs" v-if="!showPrice&&active==1" @click="showPrice=true">{{$t("currency.a5")}}</span>
|
|
<span class="m-l-xs" v-if="showPrice&&active==1" @click="showPrice=false">{{$t("currency.a6")}}</span>
|
|
<span class="m-l-xs" v-if="!showPrice&&active==2" @click="showPrice=true">{{$t("currency.a55")}}</span>
|
|
<span class="m-l-xs" v-if="showPrice&&active==2" @click="showPrice=false">{{$t("currency.a66")}}</span>
|
|
</text>
|
|
</view>
|
|
<view v-if="active==1">
|
|
<v-input
|
|
:placeholder="showPrice?$t('currency.a7'):$t('currency.a8')"
|
|
v-model="money"
|
|
type="number"
|
|
class="h-30 m-t-lg rounded-xs border-b p-b-ms"
|
|
>
|
|
<template #right v-if="showPrice">
|
|
<span class="fn-bold color-theme-1 fn-16"> USDT </span>
|
|
</template>
|
|
<template #left v-if="!showPrice">
|
|
<span class="fn-bold color-theme-1 fn-16"> ￥ </span>
|
|
</template>
|
|
</v-input>
|
|
</view>
|
|
<view v-else>
|
|
<v-input
|
|
:placeholder="showPrice?$t('currency.a9'):$t('currency.b0')"
|
|
v-model="money"
|
|
type="number"
|
|
class="h-30 m-t-lg rounded-xs border-b p-b-ms"
|
|
>
|
|
<template #right v-if="showPrice">
|
|
<span class="fn-bold color-theme-1 fn-16"> USDT </span>
|
|
</template>
|
|
<template #left v-if="!showPrice">
|
|
<span class="fn-bold color-theme-1 fn-16"> ￥ </span>
|
|
</template>
|
|
</v-input>
|
|
</view>
|
|
<view class="d-flex justify-between m-t-lg fn-12 align-center">
|
|
<text class="w-100">{{$t("currency.b1")}} ≈￥{{price_cny}}</text>
|
|
</view>
|
|
</view>
|
|
<button tag="button" v-if="active==1" @click="buy" class="rounded-xs m-x-lg color-white bg-theme-1">{{$t("currency.b2")}}</button>
|
|
<button v-else @click="sell" class="rounded-xs m-x-lg color-white bg-theme-1">{{$t("currency.b3")}}</button>
|
|
</view>
|
|
<van-dialog id="van-dialog" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import Otc from "@/api/otc";
|
|
import Exchange from "@/api/exchange";
|
|
import Wallet from "@/api/wallet";
|
|
import Profile from "@/api/profile";
|
|
import { mapGetters } from "vuex";
|
|
export default{
|
|
data(){
|
|
return{
|
|
active:1,
|
|
money:"",
|
|
showPrice:false,
|
|
price_cny:'',
|
|
usdt_balance:'',
|
|
detail:{}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['themeStyle']),
|
|
isLogin() {
|
|
return Boolean(uni.getStorageSync("token"));
|
|
},
|
|
},
|
|
watch:{
|
|
active(){
|
|
this.getCurrencyExCny()
|
|
}
|
|
},
|
|
methods:{
|
|
getAuthInfo(){
|
|
Profile.getAuthInfo().then(res=>{
|
|
this.detail = res.data
|
|
})
|
|
},
|
|
// 获取汇率
|
|
getCurrencyExCny() {
|
|
Otc.legalPrice({
|
|
coin_name: 'USDT',
|
|
type:this.active==1?'buy':'sell'
|
|
}).then((res) => {
|
|
this.price_cny = res.data.price;
|
|
}).catch((err)=>{
|
|
setTimeout(()=>{
|
|
this._router.push('/pages/auth/index')
|
|
},2000)
|
|
})
|
|
},
|
|
//获取u余额
|
|
fundAccount() {
|
|
Wallet.fundAccount().then((res) => {
|
|
this.usdt_balance = res.data.otc_account_usd;
|
|
});
|
|
},
|
|
buy(){
|
|
if(this.showPrice&&this.money==''){
|
|
this.$toast(this.$t("currency.a7"))
|
|
return
|
|
}
|
|
if(!this.showPrice&&this.money==''){
|
|
this.$toast(this.$t("currency.a8"))
|
|
return
|
|
}
|
|
this.submit()
|
|
},
|
|
sell(){
|
|
if(this.showPrice&&this.money==''){
|
|
this.$toast(this.$t("currency.a9"))
|
|
return
|
|
}
|
|
if(!this.showPrice&&this.money==''){
|
|
this.$toast(this.$t("currency.b0"))
|
|
return
|
|
}
|
|
let money=!this.showPrice?this.money/this.price_cny:this.money
|
|
if(money>this.usdt_balance){
|
|
this.$toast(this.$t("currency.b4"))
|
|
return
|
|
}
|
|
this.submit()
|
|
},
|
|
submit(){
|
|
let that=this
|
|
if(that.detail.status!=2){
|
|
that.$dialog
|
|
.confirm({
|
|
message:that.$t("currency.b5"),
|
|
confirmButtonText: that.$t("currency.b6"),
|
|
cancelButtonText: that.$t("common.cancel")
|
|
})
|
|
.then(() => {
|
|
that._router.push('/pages/auth/index')
|
|
});
|
|
return
|
|
}
|
|
let data={
|
|
currency:'USDT',
|
|
type:this.active==1?'buy':'sell',
|
|
amount:this.money,
|
|
number:this.money,
|
|
unitPrice:this.price_cny,
|
|
pay_type:this.showPrice?0:1
|
|
}
|
|
that.$dialog
|
|
.confirm({
|
|
message: that.active==1?that.$t("currency.b7")+'？':that.$t("currency.b8")+'？',
|
|
confirmButtonText: that.$t("common.confirm"),
|
|
cancelButtonText: that.$t("common.cancel")
|
|
})
|
|
.then(() => {
|
|
Otc.legalBuy(data).then((res) => {
|
|
uni.setStorageSync('otc',res.data)
|
|
that._router.push('/pages/service/otc')
|
|
});
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getCurrencyExCny()
|
|
this.fundAccount()
|
|
this.getAuthInfo()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main{
|
|
position: relative;
|
|
.head{
|
|
padding:20px 0 80px 0;
|
|
}
|
|
.content{
|
|
position: relative;
|
|
width: 92%;
|
|
left: 4%;
|
|
top: -50px;
|
|
box-sizing: border-box;
|
|
.border-b1{
|
|
border-bottom:2px solid #ff9a22;
|
|
}
|
|
}
|
|
}
|
|
.w-100{
|
|
width: 100%;
|
|
}
|
|
.bg-lin{
|
|
background: linear-gradient(to right,#f6c769,#f3b644);
|
|
}
|
|
/deep/ uni-button:after{
|
|
border: 0;
|
|
}
|
|
/deep/ uni-button{
|
|
font-size: 16px;
|
|
}
|
|
.bor-b{
|
|
position: relative;
|
|
font-size: 18px;
|
|
color: $light;
|
|
}
|
|
.bor-b:after{
|
|
content: "";
|
|
position: absolute;
|
|
left: 30%;
|
|
bottom: -5px;
|
|
width: 40%;
|
|
height: 2px;
|
|
background-color: $theme-1;
|
|
border-radius: 5px;
|
|
}
|
|
.p-x-xl{
|
|
padding: 8px 40px!important;
|
|
}
|
|
</style>
|
|
|