liang
/
samehome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
127 Commits
1 Branch
0 Tags
16 MiB
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
samehome/pages/subscription/details.vue

544 lines
12 KiB
Raw Permalink Blame History

<template>
<view class="main">
<!-- nav -->
<navigation>{{ i18n.Subscription }}</navigation>
<!-- #ifdef APP-PLUS -->
<view class="body-app">
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="body">
<!-- #endif -->
<!-- 倒计时 -->
<view class="countDown">
<view class="item">
<view class="title">{{ i18n.Days }}</view>
<view class="value" v-if="deinfo.sysCoinInfo.status=='open'">{{day}}</view>
<view class="value" v-else>0</view>
</view>
<view class="item">
<view class="title">{{ i18n.Hours }}</view>
<view class="value" v-if="deinfo.sysCoinInfo.status=='open'">{{hr}}</view>
<view class="value" v-else>0</view>
</view>
<view class="item">
<view class="title">{{ i18n.Minutes }}</view>
<view class="value" v-if="deinfo.sysCoinInfo.status=='open'">{{min}}</view>
<view class="value" v-else>0</view>
</view>
<view class="item">
<view class="title">{{ i18n.Seconds }}</view>
<view class="value" v-if="deinfo.sysCoinInfo.status=='open'">{{sec}}</view>
<view class="value" v-else>0</view>
</view>
</view>
<!-- input -->
<view class="input-item">
<u-input class="input" v-model="SubscribeCount" color="#A1A0A8" fontSize="32rpx" border="none"
:placeholder="i18n.PleaseChooseCoin" @focus="SubscribeCount=''" :disabled="deinfo.sysCoinInfo.status!='open'">
</u-input>
<view class="selectCoin" @click="USDTPopupShow = true">{{deinfo.coins[0].code}}
</view>
</view>
<!-- total -->
<key-value-row :keyName="i18n.Total" :value="'≈'+coinPirce+deinfo.sysCoinInfo.coinCode" :size="'24rpx'"
:leftColor="'#A1A0A8'" :rightColor="'#A1A0A8'"></key-value-row>
<!-- 按钮 -->
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="SubscribeNowed||deinfo.sysCoinInfo.status!='open'" @click="subscribe">{{
i18n.SubscribeNow
}}
</u-button>
<!-- ProjectDetails -->
<view class="contentTitle">
<view class="ProjectDetails">{{ i18n.ProjectDetails }}</view>
<view class="videoBtn" v-show="deinfo.sysCoinInfo.videoWebsite!=''" @click="playVideo(deinfo.sysCoinInfo.videoWebsite)">{{ i18n.Video }}</view>
<view class="whiteBook" v-show="deinfo.sysCoinInfo.whitePaperWebsite!=''" @click="getContact('book')">{{ i18n.WhiteBook }}</view>
</view>
<!-- 文字内容 -->
<!-- FullNameOfToken: 'Tên đầy đủ của mã thông báo:',
TotalCirculation: 'Giá đăng ký:',
ICOPrice: 'Giá đăng ký:',
ICOTime: 'Thời gian đăng ký:', -->
<view class="content">{{des}}</view>
<view class="content">{{i18n.FullNameOfToken+deinfo.sysCoinInfo.fullName}}</view>
<view class="content">{{i18n.TotalCirculation+deinfo.sysCoinInfo.issueAmount}}</view>
<view class="content">{{i18n.ICOPrice+deinfo.sysCoinInfo.initalPrice}} USDT</view>
<view class="content">{{i18n.ICOTime+""+deinfo.sysCoinInfo.initialReleasePhase}}</view>
<video class="video" v-show="videoShow" id="video" :enable-progress-gesture="false" autoplay="true"
:src="videoUrl" controls x5-video-player-type="h5-page" @fullscreenchange="ifStopVideo"></video>
</view>
</view>
</template>
<script>
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
import UButton from '../../uview-ui/components/u-button/u-button'
import api from '@/utils/api'
import constant from '@/utils/constant.js';
export default {
name: "subscriptionDetails",
data() {
return {
// 计算的价格
coinPirce: 0,
toLiveBtn: '',
_interval: null,
des: '',
SubscribeCount: 0,
DonatePopupShow: false,
USDTPopupShow: false,
DonatePopupDisabled: true,
coinInfo: {},
rules: {},
radioValue: '',
baseURL: '',
deinfo: {
sysCoinInfo:{},
coins:[{}]
},
day: '',
hr: '',
min: '',
sec: '',
videoPlayer:null,
videoUrl:'',
videoShow:false
};
},
computed: {
i18n() {
return this.$t("subscription");
},
SubscribeNowed() {
if (this.SubscribeCount == 0 || !this.SubscribeCount || isNaN(this.SubscribeCount)) {
return true
} else {
return false
}
}
},
watch: {
SubscribeCount: {
handler(newName, oldName) {
this.SubscribeCount = newName
this.coinPirce = newName / this.deinfo.sysCoinInfo.initalPrice
this.coinPirce = parseFloat(this.coinPirce.toPrecision(10))
this.coinPirce = String(this.coinPirce)
this.coinPirce = this.coinPirce.substring(0, this.coinPirce.indexOf(".") + 9);
}
}
},
onLoad(res) {
this.baseURL = constant.BASE_URL
this.getDetail(res.id);
// console.log(this.$t('login.emailInputMessage'));
},
onShow() {
this.videoPlayer = uni.createVideoContext(`video`, this);
},
methods: {
ifStopVideo(e) {
if (e.detail.fullScreen) {
this.videoPlayer.play()
} else {
this.videoShow = false
this.videoPlayer.pause()
}
},
playVideo(data) {
this.videoUrl = data;
this.videoShow = true;
this.videoPlayer.requestFullScreen({
direction: 0
})
},
//提交申购订单
subscribe() {
api.exchangeCoin({
baseSymbol: this.deinfo.coins[0].code,
coinSymbol: this.deinfo.sysCoinInfo.coinCode,
baseAmount: this.SubscribeCount,
}).then(res => {
uni.$u.toast(this.$t("login").Successfulsubscription)
})
},
//当离开页面时，清除倒计时
beforeDestroy() {
clearInterval(this._interval)
},
// 倒计时事件
countdown(e) {
const that = this
that._interval = setInterval(() => {
if (e == 0) {
// 计时结束，清除缓存
clearInterval(that._interval)
} else {
e--
let day = parseInt(e / 60 / 60 / 24)
let hr = parseInt(e / 60 / 60 % 24)
let min = parseInt(e / 60 % 60)
let sec = parseInt(e % 60)
this.day = day > 9 ? day : '0' + day
this.hr = hr > 9 ? hr : '0' + hr
this.min = min > 9 ? min : '0' + min
this.sec = sec > 9 ? sec : '0' + sec
that.toLiveBtn = `${this.day}天${this.hr}时${this.min}分${this.sec}秒`
}
}, 1000);
},
radioChange(e) {
// console.log(e);
},
// 跳转视频和pdfe
getContact(e) {
let url;
if (e == 'video') {
url = this.deinfo.sysCoinInfo.videoWebsite
} else {
url = this.deinfo.sysCoinInfo.whitePaperWebsite
}
// #ifdef APP-PLUS
plus.runtime.openURL(url);
// #endif
// #ifdef H5
window.open(url, '_blank');
// #endif
},
// 申购详情
getDetail(e) {
api.subscription({
coinCode: e,
}).then(res => {
this.deinfo = res;
this.des = this.deinfo.sysCoinInfo.info
this.deinfo.lefttime=this.deinfo.lefttime/1000
this.countdown(this.deinfo.lefttime)
})
},
},
components: {
UButton,
KeyValueRow
}
}
</script>
<style lang="scss" scoped>
.main {
.body {
overflow: hidden;
margin-top: 200rpx;
padding: 0 48rpx;
.countDown {
margin-top: 60rpx;
height: 248rpx;
background-image: url(../../static/subscription/RoundedRectangle.png);
background-repeat: no-repeat;
background-size: 654rpx 248rpx;
color: #15141F;
padding: 36rpx 28rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
.item {
// width: 140rpx;
height: 174rpx;
font-weight: bold;
.title {
font-size: 32rpx;
text-align: center;
}
.value {
margin-top: 10rpx;
font-size: 96rpx;
text-align: center;
}
}
}
.input-item {
position: relative;
overflow: hidden;
height: 124rpx;
line-height: 124rpx;
background: #323045;
margin: 32rpx 0;
border-radius: 32rpx;
padding: 0 40rpx;
/deep/.u-form-item__body {
padding: 0;
}
.input {
width: 80%;
height: 124rpx;
background: #323045 !important;
}
.selectCoin {
position: absolute;
width: 150rpx;
height: 54rpx;
top: 36rpx;
right: 0rpx;
line-height: 56rpx;
font-size: 36rpx;
padding: 0;
color: #fff;
}
}
.button {
margin-top: 38rpx;
margin-bottom: 48rpx;
height: 112rpx;
line-height: 112rpx;
border-radius: 32rpx;
font-size: 32rpx;
color: #15141F !important;
font-weight: bold;
}
.contentTitle {
position: relative;
margin-bottom: 32rpx;
.ProjectDetails {
font-size: 32rpx;
color: #fff;
}
.videoBtn {
position: absolute;
top: 0;
right: 184rpx;
width: 134rpx;
height: 48rpx;
line-height: 48rpx;
background: #F2FE8D;
border-radius: 8rpx;
text-align: right;
color: #15141F;
font-size: 24rpx;
font-weight: bold;
box-sizing: border-box;
padding: 0 16rpx;
&::before {
display: block;
position: absolute;
content: '';
background-image: url(../../static/subscription/ic_play.png);
background-repeat: no-repeat;
background-size: 32rpx;
width: 32rpx;
height: 32rpx;
top: 8rpx;
left: 10rpx;
}
}
.whiteBook {
position: absolute;
top: 0;
right: 0rpx;
width: 164rpx;
height: 48rpx;
line-height: 48rpx;
background: #F2FE8D;
border-radius: 8rpx;
text-align: center;
color: #15141F;
font-size: 24rpx;
font-weight: bold;
box-sizing: border-box;
}
}
.content {
font-size: 24rpx;
color: #A1A0A8;
margin-bottom: 48rpx;
line-height: 40rpx;
}
}
.body-app{
overflow: hidden;
margin-top: 200rpx !important;
padding: 0 48rpx;
.countDown {
margin-top: 60rpx;
height: 248rpx;
background-image: url(../../static/subscription/RoundedRectangle.png);
background-repeat: no-repeat;
background-size: 654rpx 248rpx;
color: #15141F;
padding: 36rpx 28rpx;
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
.item {
// width: 140rpx;
height: 174rpx;
font-weight: bold;
.title {
font-size: 32rpx;
text-align: center;
}
.value {
margin-top: 10rpx;
font-size: 96rpx;
text-align: center;
}
}
}
.input-item {
position: relative;
overflow: hidden;
height: 124rpx;
line-height: 124rpx;
background: #323045;
margin: 32rpx 0;
border-radius: 32rpx;
padding: 0 40rpx;
/deep/.u-form-item__body {
padding: 0;
}
.input {
width: 80%;
height: 124rpx;
background: #323045 !important;
}
.selectCoin {
position: absolute;
width: 150rpx;
height: 54rpx;
top: 36rpx;
right: 0rpx;
line-height: 56rpx;
font-size: 36rpx;
padding: 0;
color: #fff;
}
}
.button {
margin-top: 38rpx;
margin-bottom: 48rpx;
height: 112rpx;
line-height: 112rpx;
border-radius: 32rpx;
font-size: 32rpx;
color: #15141F !important;
font-weight: bold;
}
.contentTitle {
position: relative;
margin-bottom: 32rpx;
.ProjectDetails {
font-size: 32rpx;
color: #fff;
}
.videoBtn {
position: absolute;
top: 0;
right: 184rpx;
width: 134rpx;
height: 48rpx;
line-height: 48rpx;
background: #F2FE8D;
border-radius: 8rpx;
text-align: right;
color: #15141F;
font-size: 24rpx;
font-weight: bold;
box-sizing: border-box;
padding: 0 16rpx;
&::before {
display: block;
position: absolute;
content: '';
background-image: url(../../static/subscription/ic_play.png);
background-repeat: no-repeat;
background-size: 32rpx;
width: 32rpx;
height: 32rpx;
top: 8rpx;
left: 10rpx;
}
}
.whiteBook {
position: absolute;
top: 0;
right: 0rpx;
width: 164rpx;
height: 48rpx;
line-height: 48rpx;
background: #F2FE8D;
border-radius: 8rpx;
text-align: center;
color: #15141F;
font-size: 24rpx;
font-weight: bold;
box-sizing: border-box;
}
}
.content {
font-size: 24rpx;
color: #A1A0A8;
margin-bottom: 48rpx;
line-height: 40rpx;
}
}
}
</style>