211 lines
6.5 KiB
Vue
211 lines
6.5 KiB
Vue
<template>
|
|
<view class="minebg">
|
|
<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back" :border="false" :shadow="false" :fixed="true"
|
|
:title="$t('upgrade.title')" backgroundColor="rgba(0,0,0,0,1)"></uni-nav-bar>
|
|
<view style="font-size: 56rpx; color: #333; font-weight: 700; width: 80%;margin: 30rpx auto; text-align: center;">
|
|
{{$t('upgrade.text1')}}
|
|
</view>
|
|
<view class="v4">
|
|
<uni-row :gutter="10">
|
|
<uni-col :span="24">
|
|
<view class="wallet" style="padding: 20rpx ;">
|
|
<image class="i" src="/static/images/u4.png" mode="cover"></image>
|
|
<span class="s">{{$t('upgrade.text2')}}</span>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="24">
|
|
<view class="wallet" style="padding: 20rpx;">
|
|
<image class="i" src="/static/images/u4.png" mode="cover"></image>
|
|
<view class="s" style="line-height: 50rpx; width: 90%;">{{$t('upgrade.text3')}}</view>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="24">
|
|
<view class="wallet" style="padding: 20rpx;">
|
|
<image class="i" src="/static/images/u4.png" mode="cover"></image>
|
|
<span class="s">{{$t('upgrade.text4')}}</span>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="24">
|
|
<view class="wallet" style="padding: 20rpx;">
|
|
<image class="i" src="/static/images/u4.png" mode="cover"></image>
|
|
<span class="s">{{$t('upgrade.text5')}}</span>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="24" v-for="item in list" :key='item.id'>
|
|
<view :class="role_id==item.id?'u u1':'u'" @click="role_id=item.id">
|
|
<uni-row>
|
|
<uni-col :span="5">
|
|
<image v-if="item.id==2" style="width: 80rpx; height: 80rpx;" src="/static/images/u3.png" mode="cover"></image>
|
|
<image v-if="item.id==3" style="width: 80rpx; height: 80rpx;" src="/static/images/u1.png" mode="cover"></image>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view v-if="item.id==2" style="font-weight: 600;font-size: 30rpx;color: #3D3D3D;line-height: 80rpx;">{{$t('upgrade.text10')}} VIP</view>
|
|
<view v-if="item.id==3" style="font-weight: 600;font-size: 30rpx;color: #3D3D3D;line-height: 40rpx;">{{$t('upgrade.text10')}} <br>{{$t('upgrade.text11')}}</view>
|
|
</uni-col>
|
|
<uni-col :span="7">
|
|
<view style="font-weight: 600;font-size: 36rpx;color: #3D3D3D;line-height: 80rpx;">{{item.price}} USDT</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<view style="font-weight: 400; font-size: 30rpx; color: #3d3d3d; text-align: right; padding: 40rpx;">
|
|
{{$t('upgrade.text6')}}: <span style="color: #1D61E7;">{{parseFloat(user.money).toFixed(4)}}</span> USDT
|
|
</view>
|
|
<button style="background-color: #333333; color: #fff;" @click="open">{{$t('upgrade.text7')}}</button>
|
|
</view>
|
|
<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
|
|
<view style="width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;">
|
|
<view style="font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">{{$t('signup.text6')}}</view>
|
|
<uni-easyinput type="password" :passwordIcon="true" v-model="pingcode" :placeholder="$t('signup.text7')" />
|
|
<button style="background-color: #1D61E7; color: #fff; margin: 40rpx auto;" @click="submit">{{$t('buttonConfirm')}}</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex';
|
|
import { getUserInfo } from '@/config/utils';
|
|
export default {
|
|
data() {
|
|
return {
|
|
user:{},
|
|
list:[],
|
|
pingcode: '',
|
|
role_id: 3,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo'])
|
|
},
|
|
//第一次加载
|
|
onLoad(e) {
|
|
getUserInfo(this.$i18n.locale).then(res => {
|
|
this.user = res;
|
|
});
|
|
this.$http.get('/api/role/list?lang='+this.$i18n.locale).then(res => {
|
|
if(res.code == 0){
|
|
this.list = res.data.data;
|
|
}
|
|
});
|
|
},
|
|
onShow(){
|
|
|
|
},
|
|
methods: {
|
|
...mapMutations(['setUserInfo']),
|
|
open(){
|
|
let roleMoney = 0;
|
|
this.list.forEach(item => {
|
|
if(item.id == this.role_id){
|
|
roleMoney = item.price;
|
|
}
|
|
})
|
|
if(this.user.role_id > this.role_id){
|
|
uni.showToast({
|
|
title:this.$t('upgrade.text9'),
|
|
icon:'error'
|
|
});
|
|
return
|
|
}
|
|
if(parseFloat(this.user.money) < roleMoney){
|
|
uni.showToast({
|
|
title:this.$t('upgrade.text8'),
|
|
icon:'error'
|
|
});
|
|
return
|
|
}
|
|
this.$refs.popup.open('dialog');
|
|
},
|
|
goto(url, type) {
|
|
if (type == 2) {
|
|
return uni.switchTab({ url: url })
|
|
}
|
|
if (type == 1) {
|
|
return uni.navigateBack({ delta: url });
|
|
}
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
submit(){
|
|
let data = {
|
|
role_id: this.role_id,
|
|
trade_password: this.pingcode,
|
|
lang: this.$i18n.locale
|
|
};
|
|
this.$http.post('/api/role/buy', data).then(res => {
|
|
if(res.code == 0){
|
|
uni.showToast({
|
|
title:'Success'
|
|
});
|
|
this.$refs.popup.close();
|
|
this.pingcode = '';
|
|
this.user.role_id = this.role_id;
|
|
this.setUserInfo(this.user);
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/mine/index'
|
|
});
|
|
}, 1000);
|
|
}
|
|
});
|
|
},
|
|
onTokenJump(url) {
|
|
this.judgeLogin(() => {
|
|
uni.navigateTo({
|
|
url: url
|
|
});
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.uni-page-body{background-color: #fff !important;}
|
|
.page{min-height: 93vh;position: relative; background-color: #fff;}
|
|
.minebg{
|
|
width: 100vw;
|
|
min-height: 93vh;
|
|
background: url('/static/images/u2.png') #fff;
|
|
background-size: 100%;
|
|
background-repeat: repeat-x;
|
|
font-family: Poppins, Poppins;
|
|
}
|
|
.minebg .v4{
|
|
width: 94vw;margin: 20upx auto; border-radius: 30upx;
|
|
}
|
|
.minebg .v4 .wallet{
|
|
border-radius: 20rpx; padding: 20rpx 30rpx;
|
|
}
|
|
.minebg .v4 .wallet .title{
|
|
font-weight: 500; font-size: 28rpx; color: #999999; line-height: 36rpx;
|
|
}
|
|
.minebg .v4 .wallet .s{
|
|
font-weight: 500;font-size: 32rpx;color: #666666;line-height: 40rpx; float: left; margin-left: 20rpx;
|
|
display: block; width: 90%;
|
|
}
|
|
.minebg .v4 .wallet .i{
|
|
width: 40rpx; height: 40rpx; float: left;
|
|
}
|
|
.minebg .v4 .u{
|
|
padding: 40rpx 20rpx; border: 2rpx solid #eee; margin: 40rpx auto 0rpx auto; width: 94%;
|
|
}
|
|
.minebg .v4 .u1{
|
|
background: url('/static/images/u5.png') #F5F8FC;
|
|
background-size: 60rpx;
|
|
background-repeat: no-repeat;
|
|
background-position-x: right;
|
|
background-position-y: bottom;
|
|
}
|
|
</style>
|