sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.虚拟币---转换 

2024.3.07 sws
master
sws 2024-03-07 17:57:01 +08:00
parent f5d4bcfcf3
commit cb33a2190f
8 changed files with 204 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
common/css/page.css
View File

@ -237,6 +237,9 @@ button:before {
.radius {
border-radius: 10rpx !important;
}
.radius-md {
border-radius: 16rpx !important;
}
.radius-lg {
border-radius: 32rpx !important;
}

72
pages/plugins/coin/convert/convert.css
View File

@ -0,0 +1,72 @@
.coin-dropdown {
--height: 72rpx;
display: inline-block;
height: var(--height);
line-height: var(--height);
padding: 0 52rpx 0 20rpx;
background: #F6F6F6;
border-radius: 36rpx;
width: 168rpx;
}
.coin-dropdown-icon {
right: -36rpx;
top: 2rpx;
padding: 0;
}
.coin-list-img {
--size: 40rpx;
width: var(--size);
height: var(--size) !important;
}
.coin-num {
--height: 72rpx;
display: inline-block;
}
.num.input-br {
border: 2rpx solid #F6F6F6;
}
.coin-num .num {
height: var(--height);
line-height: var(--height);
padding: 0 20rpx 0 20rpx;
border-radius: 36rpx;
width: 196rpx;
}
.coin-center-convert {
--size: 82rpx;
left: 50%;
transform: translateX(-50%);
margin-top: -54rpx;
width: var(--size);
height: var(--size);
border: 2rpx solid #e1e1e1;
border-radius: 50%;
background-color: #fff;
}
.convert-icon {
transition: all 0.5s ease-in-out;
}
.convert_true {
transform: rotate3d(1, 0, 0, 180deg);
}
.convert_false {
transform: rotate3d(1, 0, 0, 0deg);
}
.convert-btn {
background: linear-gradient(107deg, #31B4FC 0%, #0842E2 100%);
transition: all 0.3s ease-in-out;
}
.convert-btn:active {
background: linear-gradient( 107deg, #FC6F31 0%, #E22C08 100%);
}

110
pages/plugins/coin/convert/convert.vue
View File

@ -2,7 +2,64 @@
<view :class="theme_view">
<view>
<scroll-view :scroll-y="true" class="scroll-box" lower-threshold="60" @scroll="scroll_event">
123
<view class="padding-main pr">
<view class="padding-lg bg-white radius-md margin-bottom-main">
<view class="br-f5 margin-bottom-main radius-md padding-lg flex-row jc-sb">
<view>
<picker class="coin-dropdown text-size-md pr" @change="coin_event_old" :value="coin_index_old" :range="coin_list_old" range-key="name">
<view class="picker pr">
<view class="flex-row align-c">
<image :src="coin_list_old[coin_index_old]['img']" mode="widthFix" class="coin-list-img round" />
<span class="padding-left-sm flex-1 flex-width single-text">{{ coin_list_old[coin_index_old]['name'] }}</span>
</view>
<view class="coin-dropdown-icon pa padding-left-xxl">
<iconfont name="icon-arrow-bottom" size="24rpx" color="#000"></iconfont>
</view>
</view>
</picker>
<view class="margin-top-main text-size-xs flex-row align-c"> <text class="margin-right-sm">余额:</text><text class="cr-blue">23.234</text> </view>
</view>
<view class="coin-num pr flex-col">
<input type="digit" class="num input-br text-size" placeholder-class="text-size-sm cr-grey-9" placeholder="金额" />
<view class="margin-top-main tr text-size-xs">$21.00</view>
</view>
</view>
<view class="coin-center-convert pa flex-row jc-c align-c" @tap="coin_center_convert_event">
<iconfont name="icon-convert2" class="pa convert-icon" :class="convert_bool ? 'convert_true' : 'convert_false'" color="#1D7DEF" size="36rpx"></iconfont>
</view>
<view class="br-f5 margin-bottom-main radius-md padding-lg flex-row jc-sb">
<view>
<picker class="coin-dropdown text-size-md pr" @change="coin_event_new" :value="coin_index_new" :range="coin_list_new" range-key="name">
<view class="picker pr">
<view class="flex-row align-c">
<image :src="coin_list_new[coin_index_new]['img']" mode="widthFix" class="coin-list-img round" />
<span class="padding-left-sm flex-1 flex-width single-text">{{ coin_list_new[coin_index_new]['name'] }}</span>
</view>
<view class="coin-dropdown-icon pa padding-left-xxl">
<iconfont name="icon-arrow-bottom" size="24rpx" color="#000"></iconfont>
</view>
</view>
</picker>
<view class="margin-top-main text-size-xs flex-row align-c"> <text class="margin-right-sm">余额:</text><text class="cr-blue">23.234</text> </view>
</view>
<view class="coin-num pr flex-col">
<input type="digit" class="num text-size" placeholder-class="text-size-sm cr-grey-9" disabled placeholder="金额" />
<view class="margin-top-main tr text-size-xs">$21.00</view>
</view>
</view>
<view class="flex-row align-c">
<iconfont name="icon-recharge" color="#333" size="32rpx"></iconfont>
<view class="margin-left-sm">1XRP = 2.45546 <text class="cr-grey-9">($21.00)</text></view>
</view>
</view>
<view class="padding-main bg-white radius-md margin-bottom-xxxxl flex-row align-c">
<text class="padding-right">支付密码</text>
<input type="number" class="text-size flex-1 flex-width" placeholder-class="text-size-sm cr-grey-9" placeholder="请输入支付密码" />
</view>
<view class="padding-main radius-md margin-bottom-main">
<button type="default" class="convert-btn cr-white round" @tap="popup_goods_search_event">立即转换</button>
</view>
</view>
</scroll-view>
</view>
</view>
@ -21,6 +78,32 @@
return {
theme_view: app.globalData.get_theme_value_view(),
wallet_static_url: wallet_static_url,
// 虚拟币状态
coin_index_old: 0,
coin_list_old: [
{
name: 'BTC',
img: wallet_static_url + 'user-head-bg.png',
},
{
name: 'USDT-polygon',
img: wallet_static_url + 'user-head-bg.png',
},
],
coin_index_new: 0,
coin_list_new: [
{
name: 'BTC',
img: wallet_static_url + 'user-head-bg.png',
},
{
name: 'USDT-polygon',
img: wallet_static_url + 'user-head-bg.png',
},
],
// 是否转换
convert_bool: false,
};
},
@ -65,6 +148,31 @@
// 获取数据
get_data() {},
// 虚拟币切换1
coin_event_old(e) {
this.setData({
coin_index_old: parseInt(e.detail.value || 0),
});
},
// 虚拟币切换2
coin_event_new(e) {
this.setData({
coin_index_new: parseInt(e.detail.value || 0),
});
},
// 虚拟货币调换
coin_center_convert_event() {
var old_index = this.coin_index_old;
var new_index = this.coin_index_new;
this.setData({
coin_index_new: old_index,
coin_index_old: new_index,
convert_bool: !this.convert_bool,
});
},
// 页面滚动监听
scroll_event(e) {
uni.$emit('onPageScroll', e.detail);

17
pages/plugins/coin/recharge/recharge.css
View File

@ -19,17 +19,18 @@
border-radius: 12px;
}
.coin-dropdown-icon {
right: -36rpx;
top: 2rpx;
padding: 0;
}
.recharge-qrcode {
background-color: #fff;
border-radius: 40rpx;
text-align: center;
padding: 30rpx 38rpx;
}
.coin-dropdown-icon {
right: -36rpx;
top: 2rpx;
padding: 0;
}
/*
* 内容
@ -71,7 +72,13 @@
.recharge-btn {
background: linear-gradient(107deg, #31B4FC 0%, #0842E2 100%);
transition: all 0.3s ease-in-out;
}
.recharge-btn:active {
background: linear-gradient(107deg, #FC6F31 0%, #E22C08 100%);
}
.recharge-content-tips .item::before {
content: '';
width: 12rpx;

7
pages/plugins/coin/recharge/recharge.vue
View File

@ -88,8 +88,7 @@
wallet_static_url: wallet_static_url,
status_bar_height: bar_height,
// 是否显示虚拟币
is_unit_arrow: false,
// 虚拟币状态
coin_index: 0,
coin_list: [
{
@ -181,13 +180,13 @@
price_change() {
this.setData({});
},
//
// 虚拟币切换
coin_event(e) {
this.setData({
coin_index: parseInt(e.detail.value || 0),
});
},
// 充币网络
// 充币网络切换
recharge_event(e) {
this.setData({
recharge_web_index: parseInt(e.detail.value || 0),

76
pages/plugins/coin/user/user.vue
View File

@ -86,83 +86,11 @@
],
coin_data: [
{
img: wallet_static_url + 'title-bg.png',
img: wallet_static_url + 'user-head-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
{
img: wallet_static_url + 'title-bg.png',
name: 'BTC',
price: '¥20000',
num: '200000',
},
}
],
};
},

6
static/icon/iconfont.css
View File

@ -18,15 +18,15 @@
content: "\e71e";
}
.icon-zhuanzhang:before {
.icon-transfer-count:before {
content: "\e71b";
}
.icon-shoukuan:before {
.icon-collection:before {
content: "\e71c";
}
.icon-zhuanhuan2:before {
.icon-convert2:before {
content: "\e71d";
}

BIN
static/icon/iconfont.ttf
View File

Binary file not shown.