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.
419 lines
15 KiB
419 lines
15 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation :bgTransparent=true>{{ i18n.CharityDetails }}</navigation>
|
|
<view class="body">
|
|
<view class="titleBody">
|
|
<!-- 海报 -->
|
|
<u--image class="img" :showLoading="true" src="../../static/charity/Rectangle 2.png" width="750rpx"
|
|
height="762rpx"></u--image>
|
|
<!-- 文章标题 -->
|
|
<view class="title">New Balance Raff Simons Bright </view>
|
|
</view>
|
|
|
|
<view class="contentBody">
|
|
<view class="about">{{ i18n.About }}</view>
|
|
<!-- 文字内容 -->
|
|
<view class="content">Minimum deposit amount: 10 USDT. Deposit less than the minimum amount will not be
|
|
posted
|
|
and cannot be returned
|
|
This address is your latest deposit address. When the system receives deposit, it will be
|
|
automatically
|
|
credited to the account。The transfer needs to be confirmed by the entire blockchain network. When it
|
|
reaches 10 network confirmations, your USDT will be automatically deposit into the account。
|
|
Minimum deposit amount: 10 USDT. Deposit less than the minimum amount will not be posted and cannot
|
|
be
|
|
returned
|
|
This address is your latest deposit address. When the system receives deposit, it will be
|
|
automatically
|
|
credited to the account。The transfer needs to be confirmed by the entire blockchain network. When it
|
|
reaches 10 network confirmations, your USDT will be automatically deposit into the account。Minimum
|
|
deposit amount: 10 USDT. Deposit less than the minimum amount will not be posted and cannot be
|
|
returned
|
|
This address is your latest deposit address. When the </view>
|
|
<!-- 捐赠详情 -->
|
|
<view class="Participants">
|
|
<view class="title">{{ i18n.Participants }}</view>
|
|
<!-- 进度条 -->
|
|
<u-line-progress class="progressbar" :showText="false" :percentage="50" activeColor="#00E8A2"
|
|
height="32rpx">
|
|
</u-line-progress>
|
|
<!-- 百分比 -->
|
|
<view class="progress">50%</view>
|
|
<!-- 捐赠用户头像 -->
|
|
<view class="userIconList">
|
|
<u--image v-for="(item, index) in 10" :key="index" class="userIcon" :showLoading="true"
|
|
src="../../static/charity/Ellipse 502.png" width="64rpx" height="64rpx"></u--image>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="DonatePopupShow = true">{{
|
|
i18n.DonateNow
|
|
}}
|
|
</u-button>
|
|
|
|
<!-- DonateNow按钮通知弹出层 -->
|
|
<u-popup class="DonatePopup" :show="DonatePopupShow" round="40rpx" mode="bottom"
|
|
@close="DonatePopupShow = false" @open="DonatePopupShow = true" bgColor="#211F32">
|
|
<view class="content">
|
|
<view class="close" @click="DonatePopupShow = false"></view>
|
|
<u--form class="form" :model="coinInfo" :rules="rules" ref="form1" errorType="toast">
|
|
<!-- coin选择框 -->
|
|
<u-form-item class="input-item" prop="verificationCode" ref="item1">
|
|
<u-input class="input" v-model="coinInfo.verificationCode" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.PleaseChooseCoin">
|
|
</u-input>
|
|
<view class="selectCoinBtn" @click="USDTPopupShow = true">USDT
|
|
</view>
|
|
</u-form-item>
|
|
<view class="Available">{{ i18n.AvailableBlance }}:0USDT</view>
|
|
<!-- 数量 -->
|
|
<u-form-item class="input-item" prop="number" ref="item1">
|
|
<u-input class="input" v-model="coinInfo.number" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.Quantity">
|
|
</u-input>
|
|
</u-form-item>
|
|
<!-- 密码 -->
|
|
<u-form-item class="input-item" prop="password" ref="item1">
|
|
<u-input class="input" v-model="coinInfo.password" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.WithdrawalPassword">
|
|
</u-input>
|
|
</u-form-item>
|
|
|
|
</u--form>
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="DonatePopupDisabled"
|
|
@click="DonatePopupShow = false">{{ i18n.DonateNow }}
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- USDT按钮通知弹出层 -->
|
|
|
|
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom"
|
|
@close="USDTPopupShow = false" @open="USDTPopupShow = true" bgColor="#211F32">
|
|
<view class="content">
|
|
<view class="close" @click="USDTPopupShow = false"></view>
|
|
<scroll-view scroll-y="true" style="height: 580rpx;" scroll-with-animation="true"
|
|
@touchmove.stop.prevent="">
|
|
<radio-group class="radioGroup" @change="radioChange" v-model="radioValue">
|
|
<label class="checkBox" v-for="(item, index) in 40" :key="index">
|
|
<view class="icon">
|
|
<u-icon name="../../static/maskets/bye.png" size="52rpx" width="52rpx"></u-icon>
|
|
</view>
|
|
<view class="iconName">
|
|
<view class="top">USDT</view>
|
|
<view class="bottom">BTC</view>
|
|
</view>
|
|
|
|
<radio color="#00E8A2" shape="square"></radio>
|
|
</label>
|
|
|
|
</radio-group>
|
|
</scroll-view>
|
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UButton from '../../uview-ui/components/u-button/u-button'
|
|
export default {
|
|
name: "charityDetails",
|
|
data() {
|
|
return {
|
|
DonatePopupShow: false,
|
|
USDTPopupShow: false,
|
|
DonatePopupDisabled: true,
|
|
coinInfo: {},
|
|
rules: {},
|
|
radioValue: '',
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("charity");
|
|
},
|
|
},
|
|
onLoad() {
|
|
// console.log(this.$t('login.emailInputMessage'));
|
|
},
|
|
onShow() { },
|
|
methods: {
|
|
radioChange(e) {
|
|
// console.log(e);
|
|
}
|
|
},
|
|
components: { UButton }
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.body {
|
|
overflow: hidden;
|
|
|
|
.titleBody {
|
|
position: relative;
|
|
height: 762rpx;
|
|
|
|
.title {
|
|
position: absolute;
|
|
bottom: 48rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 800;
|
|
z-index: 20;
|
|
margin: 0 48rpx;
|
|
}
|
|
}
|
|
|
|
.contentBody {
|
|
padding: 0 48rpx;
|
|
|
|
.about {
|
|
margin: 32rpx 0;
|
|
font-size: 32rpx;
|
|
color: #A2A0A8;
|
|
}
|
|
|
|
.content {
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.Participants {
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
// .progressBody{
|
|
.progressbar {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 426rpx;
|
|
margin: 8rpx 0;
|
|
}
|
|
|
|
.progress {
|
|
margin-left: 20rpx;
|
|
display: inline-block;
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
|
|
.userIconList {
|
|
height: 104rpx;
|
|
|
|
.userIcon {
|
|
overflow: hidden;
|
|
border-radius: 64rpx;
|
|
display: inline-block;
|
|
margin-left: -20rpx;
|
|
margin-top: 34rpx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.button {
|
|
margin-top: 64rpx;
|
|
margin-bottom: 120rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
.DonatePopup {
|
|
.content {
|
|
height: 844rpx;
|
|
|
|
/deep/.u-button--disabled {
|
|
background-color: #A1A0A8 !important;
|
|
border-color: #A1A0A8 !important;
|
|
}
|
|
|
|
.close {
|
|
margin: 48rpx 346rpx;
|
|
width: 58rpx;
|
|
height: 20rpx;
|
|
background-image: url(../../static/charity/Turn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 58rpx 20rpx;
|
|
}
|
|
|
|
.form {
|
|
font-size: 32rpx;
|
|
margin: 0 32rpx;
|
|
|
|
.Available {
|
|
height: 44rpx;
|
|
margin: 32rpx 0;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.input-item {
|
|
overflow: hidden;
|
|
height: 124rpx;
|
|
line-height: 124rpx;
|
|
background: #323045;
|
|
margin-bottom: 48rpx;
|
|
border-radius: 32rpx;
|
|
padding: 0 40rpx;
|
|
|
|
/deep/.u-form-item__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.input {
|
|
height: 124rpx;
|
|
}
|
|
|
|
.selectCoinBtn {
|
|
position: relative;
|
|
width: 150rpx;
|
|
height: 54rpx;
|
|
right: 0rpx;
|
|
line-height: 56rpx;
|
|
font-size: 36rpx;
|
|
padding: 0;
|
|
color: #fff;
|
|
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/charity/ic_ma_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 12rpx;
|
|
right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
width: 654rpx;
|
|
margin: 0 48rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.USDTPopup {
|
|
.content {
|
|
height: 844rpx;
|
|
|
|
.close {
|
|
margin: 48rpx 346rpx;
|
|
width: 58rpx;
|
|
height: 20rpx;
|
|
background-image: url(../../static/charity/Turn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 58rpx 20rpx;
|
|
}
|
|
|
|
.radioGroup {
|
|
height: 580rpx;
|
|
|
|
.checkBox {
|
|
height: 84rpx;
|
|
width: 670rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 40rpx 32rpx;
|
|
|
|
.icon {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
background: #323045;
|
|
padding: 16rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.iconName {
|
|
width: 520rpx;
|
|
|
|
.top {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.bottom {
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/deep/.uni-radio-input {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 16rpx;
|
|
background: #323045;
|
|
}
|
|
|
|
/deep/.uni-radio-input-checked::before {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.button {
|
|
width: 654rpx;
|
|
margin: 40rpx 48rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|