|
@@ -11,33 +11,41 @@
|
|
|
<view @click.stop="lookRecord()" class="head-record iconfont"></view>
|
|
|
</template>
|
|
|
</headContent>
|
|
|
-
|
|
|
<view class="box">
|
|
|
<view class="exchange-box">
|
|
|
<view class="">
|
|
|
<view class="exchange-item">
|
|
|
- <view class="exchange-coin">
|
|
|
- <image class="coin-icon" src="../../static/logo.png" mode="aspectFit"></image>
|
|
|
- <text class="coin-name">USDTV</text>
|
|
|
- <text class="coin-ratio">0.09</text>
|
|
|
+ <view class="exchange-coin" @click.stop="activeType('left')">
|
|
|
+ <template v-if="active.left">
|
|
|
+ <image class="coin-icon" :src="active.left.logo" mode="aspectFit"></image>
|
|
|
+ <text class="coin-name">{{ active.left.name }}</text>
|
|
|
+ <text class="select-icon iconfont"></text>
|
|
|
+ <text class="coin-ratio" />
|
|
|
+ <!-- <text class="coin-ratio">{{ active.left.min_number }} - {{ active.left.max_number }}</text> -->
|
|
|
+ </template>
|
|
|
</view>
|
|
|
- <text class="max-title">最大</text>
|
|
|
+ <input class="coin-input iconfont" :placeholder=" active.left ? `${active.left.min_number}-${active.left.balance}` : ''" v-model="num" type="number">
|
|
|
+ <text class="max-title" @click.stop="active.left ? setMaxNum(active.left.balance) : ''">最大</text>
|
|
|
</view>
|
|
|
<view class="exchange-item">
|
|
|
- 可用余额:0.0914USDT
|
|
|
+ 可用余额:{{ active.left ? active.left.balance : '--' }} USDT
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="exchange-item">
|
|
|
- <view class="exchange-coin">
|
|
|
- <image class="coin-icon" src="../../static/logo.png" mode="aspectFit"></image>
|
|
|
- <text class="coin-name">USDTV</text>
|
|
|
+ <view class="exchange-coin" @click.stop="activeType('right')">
|
|
|
+ <template v-if="active.right">
|
|
|
+ <image class="coin-icon" :src="active.right.logo" mode="aspectFit"></image>
|
|
|
+ <text class="coin-name">{{ active.right.name }}</text>
|
|
|
+ <text class="select-icon iconfont"></text>
|
|
|
+ </template>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="exchange-switch">
|
|
|
- <image class="switch-icon" src="../../static/logo.png" mode="aspectFit"></image>
|
|
|
+ <view class="exchange-switch" @click.stop="exchangeSwitch">
|
|
|
+ <text class="switch-icon iconfont"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="exchange-btn">预览兑换结果</view>
|
|
|
+ <view class="exchange-btn" @click.stop="submitPreview">预览兑换结果</view>
|
|
|
|
|
|
<view class="exchange-hint">
|
|
|
<view class="hint-title">兑换规则</view>
|
|
@@ -52,14 +60,18 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <selectCoin ref="selectCoin"/>
|
|
|
+ <selectCoin ref="selectCoinRef" :active-val.sync="active[selectKey]" :selectList="selectList" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import share from "@/components/headModules/share.vue"
|
|
|
- import selectCoin from "./modules/select-coin.vue"
|
|
|
- import { Api_getBiTypeList , Api_getFlashRecord , Api_getSubmit} from "@/api/index.js"
|
|
|
+ import selectCoin from "./modules/select-coin.vue"
|
|
|
+ import {
|
|
|
+ Api_getBiTypeList,
|
|
|
+ Api_getFlashRecord,
|
|
|
+ Api_getSubmit
|
|
|
+ } from "@/api/index.js"
|
|
|
export default {
|
|
|
name: 'exchange',
|
|
|
components: {
|
|
@@ -68,32 +80,128 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ content: {
|
|
|
+ left: [],
|
|
|
+ right: []
|
|
|
+ },
|
|
|
+ selectKey: '',
|
|
|
+ selectList: [],
|
|
|
+ fromKey: true,
|
|
|
+ left: [],
|
|
|
+ right: [],
|
|
|
+ active: {
|
|
|
+ left: null,
|
|
|
+ right: null,
|
|
|
+ },
|
|
|
+ num:'',
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.getBiTypeList();
|
|
|
},
|
|
|
- methods:{
|
|
|
- getBiTypeList(){
|
|
|
- Api_getFlashRecord().then(res => {
|
|
|
- console.log('Api_getBiTypeList = ' , res)
|
|
|
+ watch: {
|
|
|
+ 'active.left': {
|
|
|
+ handler() {
|
|
|
+ this.setLeftList()
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getBiTypeList() {
|
|
|
+ Api_getBiTypeList().then(res => {
|
|
|
+ this.content = res;
|
|
|
+ this.setLeftList()
|
|
|
}).catch(err => {
|
|
|
- console.log('Api_getBiTypeList = ' , err)
|
|
|
+ console.log('Api_getBiTypeList = ', err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选择
|
|
|
+ activeType(key) {
|
|
|
+ this.selectKey = key;
|
|
|
+ this.selectList = this[key];
|
|
|
+ console.log('aaa ', this[key])
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.selectCoinRef.open()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 上下切换
|
|
|
+ exchangeSwitch() {
|
|
|
+ this.fromKey = !this.fromKey;
|
|
|
+ const l = JSON.parse(JSON.stringify(this.active.left));
|
|
|
+ this.active.left = this.active.right
|
|
|
+ this.active.right = l
|
|
|
+ this.setLeftList()
|
|
|
+ },
|
|
|
+ setMaxNum(num){
|
|
|
+ this.num = num
|
|
|
+ },
|
|
|
+ setLeftList() {
|
|
|
+ let rightList = null;
|
|
|
+ if (this.fromKey) {
|
|
|
+ rightList = JSON.parse(JSON.stringify(this.content.right))
|
|
|
+ this.left = this.content.left;
|
|
|
+ } else {
|
|
|
+ rightList = JSON.parse(JSON.stringify(this.content.left))
|
|
|
+ this.left = this.content.right;
|
|
|
+ };
|
|
|
+
|
|
|
+ this.active.left = this.active.left || this.left[0] || null
|
|
|
+ this.setRightList(rightList)
|
|
|
+ // this.right = right;
|
|
|
+ // this.active.right = this.right[0] || null
|
|
|
+ },
|
|
|
+ setRightList(right) {
|
|
|
+ this.right = []
|
|
|
+ right.forEach(el => {
|
|
|
+ if (el.name == this.active.left.name) {
|
|
|
+ if(this.active.right && this.active.right.name == el.name){
|
|
|
+ this.active.right = null;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.right.push(el)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ this.active.right = this.active.right || this.right[0] || null
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 提交预览
|
|
|
+ submitPreview(){
|
|
|
+ const obj = {
|
|
|
+ l_currency_id: this.active.left.id,
|
|
|
+ r_currency_id: this.active.right.id,
|
|
|
+ num:this.num,
|
|
|
+ price: this.active.left.price,
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ mask:true
|
|
|
+ })
|
|
|
+ Api_getSubmit(obj).then(res => {
|
|
|
+ this.getBiTypeList()
|
|
|
+ }).catch(err => {}).finally(() => {
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ lookRecord(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/content/exchange-record'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
- page{
|
|
|
+ page {
|
|
|
background-color: #EDEDEF;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
- .head-record{
|
|
|
- font-size: 60rpx;
|
|
|
- }
|
|
|
+ .head-record {
|
|
|
+ font-size: 60rpx;
|
|
|
+ }
|
|
|
|
|
|
.box {
|
|
|
padding: 36rpx 30rpx 0;
|
|
@@ -117,10 +225,13 @@
|
|
|
height: 84rpx;
|
|
|
background: #05c175;
|
|
|
border-radius: 29rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 84rpx;
|
|
|
+ transform: rotate(90deg);
|
|
|
|
|
|
.switch-icon {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -132,14 +243,17 @@
|
|
|
.exchange-coin {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
|
.coin-icon {
|
|
|
width: 52rpx;
|
|
|
height: 52rpx;
|
|
|
border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.coin-name {
|
|
|
+ flex-shrink: 0;
|
|
|
padding-left: 13rpx;
|
|
|
|
|
|
font-size: 32rpx;
|
|
@@ -150,19 +264,37 @@
|
|
|
}
|
|
|
|
|
|
.coin-ratio {
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC, PingFang SC-Bold;
|
|
|
- font-weight: 700;
|
|
|
- color: #1a1a1a;
|
|
|
- line-height: 40rpx;
|
|
|
- border-left: 1rpx solid #e6e6e6;
|
|
|
- padding-left: 24rpx;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ width: 1rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ // $border-color;
|
|
|
+ background-color: $border-color;
|
|
|
+ // flex-shrink: 0;
|
|
|
+ // font-size: 26rpx;
|
|
|
+ // font-family: PingFang SC, PingFang SC-Bold;
|
|
|
+ // font-weight: 700;
|
|
|
+ // color: #b7b4b4;
|
|
|
+ // line-height: 40rpx;
|
|
|
+ // border-left: 1rpx solid #e6e6e6;
|
|
|
+ // padding-left: 24rpx;
|
|
|
+ // margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-icon {
|
|
|
+ font-size: 26rpx;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .max-title {
|
|
|
+ .coin-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
|
|
|
+ .max-title {
|
|
|
+ flex-shrink: 0;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
|
font-weight: 400;
|
|
@@ -205,7 +337,8 @@
|
|
|
font-weight: 400;
|
|
|
color: #1a1a1a;
|
|
|
}
|
|
|
- .hint-content{
|
|
|
+
|
|
|
+ .hint-content {
|
|
|
padding: 24rpx 0 11rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-family: PingFang SC, PingFang SC-Regular;
|