660 lines
14 KiB
Vue
660 lines
14 KiB
Vue
<template>
|
|
<view class="container">
|
|
<web-view :webview-styles="webviewStyles" style="visibility: hidden; height: 1px; width: 100%;" src="/static/web3/transfer-web.html" @message="handleWebViewMessage"
|
|
:fullscreen="false" :update-title="false"></web-view>
|
|
<view class="paymoney">
|
|
<view class="titcont">
|
|
<view class="image">
|
|
<image :src="BASE_URL + detail.img" mode=""></image>
|
|
</view>
|
|
<view class="cont">
|
|
{{detail.title_cn}}
|
|
</view>
|
|
</view>
|
|
<view class="money">
|
|
<view class="moneytit">
|
|
支付金額
|
|
</view>
|
|
<view class="moneynum">
|
|
${{detail.usdt}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="paymentmethod">
|
|
<view class="p_tit">
|
|
付款方式
|
|
</view>
|
|
<view class="moneybi">
|
|
<view class="m_item">
|
|
<view class="m_left">
|
|
<view class="img">
|
|
<image src="/static/usdt.png" mode="heightFix"></image>
|
|
</view>
|
|
<view class="">
|
|
USDT
|
|
</view>
|
|
</view>
|
|
<view class="m_right">
|
|
<label class="radio">
|
|
<radio value="r1" checked="true" color="#4e5bd9" size="20" />
|
|
</label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 轉賬密碼彈框 -->
|
|
<view class="modal" v-if="modalNamezz">
|
|
<view class="modal-content">
|
|
<view class="modal-header">
|
|
<view class="zz_content">請輸入驗證信息</view>
|
|
</view>
|
|
<view class="modal-body">
|
|
<view class="modal-item zf_mod_item">
|
|
<text class="modal-label">郵箱:</text>
|
|
<view class="">{{userInfos.email}}</view>
|
|
</view>
|
|
<view class="modal-item">
|
|
<text class="modal-label">支付密碼:</text>
|
|
<u--input color="#fff" style="width: 70%;" :value="zhifuMimaZz" :password="showPassword2"
|
|
border="none" @input="handleInput2"></u--input>
|
|
<img :src="!showPassword2 ? showpwdImg : hidepwdImg" @tap="changePassword()"
|
|
style="width: 50rpx;height: 50rpx;"></img>
|
|
</view>
|
|
<view class="modal-item zf_mod_item">
|
|
<text class="modal-label">郵箱驗證碼:</text>
|
|
<u--input color="#fff" style="width: 70%;" v-model="emailCode" border="none"></u--input>
|
|
<view class="sendcode" @click="tosendemail">{{emaiTip}}</view>
|
|
</view>
|
|
<view class="modal-item zf_mod_item">
|
|
<text class="modal-label">谷歌驗證碼:</text>
|
|
<u--input color="#fff" style="width: 70%;" v-model="googleCode" border="none"></u--input>
|
|
<view class="sendcode" @click="googleemail">{{googleTip}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="modal-footer">
|
|
<button class="modal-button cancel" @tap="offModalBtnZz">取消</button>
|
|
<button class="modal-button confirm" @tap="modalBtnZz">確定</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 購買 -->
|
|
<view class="buy">
|
|
<view class="label" style="padding-left: 10rpx;">
|
|
<checkbox-group @change="checkboxChange">
|
|
<checkbox :checked="isDisable" style="font-size: 30rpx;" value="1">我已閱讀並同意</checkbox>
|
|
</checkbox-group>
|
|
</view>
|
|
<view style="font-size: 27rpx;color: rgba(255,255,255,0.8);line-height: 40rpx;">
|
|
<text style="color: #5A27DC;">《眾籌採購算力服務器協議、算力服務器租賃協議》</text>
|
|
</view>
|
|
<view class="buypurchase">
|
|
<view class="purchase" @click="purchase">
|
|
購買
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-modal :show="show" :title="title" @cancel="cancel" @confirm="confirm" :showCancelButton="true"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
BASE_URL
|
|
} from '@/request/config.js'
|
|
import {
|
|
_accountdetail,
|
|
_guidedetail,
|
|
_walletinfo,
|
|
_userInfos
|
|
} from "@/request/api.js"
|
|
import {
|
|
_buyguide,
|
|
_buyaccount,
|
|
_payorderres
|
|
} from "@/request/api2.js"
|
|
import {
|
|
publicjiemi
|
|
} from "@/common/jiemi.js"
|
|
import MD5 from "blueimp-md5";
|
|
export default {
|
|
data() {
|
|
return {
|
|
emailCode:"",
|
|
googleCode:"",
|
|
emaiTip:"發送",
|
|
googleTip:"發送",
|
|
webviewStyles: {
|
|
progress: false,
|
|
width: "0px",
|
|
height: "0px"
|
|
},
|
|
webviewInstance: null,
|
|
show: false,
|
|
title: '確定購買碼？',
|
|
BASE_URL,
|
|
id: null,
|
|
detail: {},
|
|
name: '',
|
|
showpwdImg: "static/icon/eye_on.png",
|
|
hidepwdImg: "static/icon/eye_off.png",
|
|
showPassword2: true,
|
|
zhifuMimaZz: '',
|
|
modalNamezz: false,
|
|
isDisable: false,
|
|
payMoneyStyle: 'USDT',
|
|
toAdress: '',
|
|
userMoneyAdress: "", //用戶錢包地址
|
|
userInfos: {},
|
|
outMoney: '',
|
|
obj: {},
|
|
order_id: ''
|
|
};
|
|
},
|
|
onReady() {
|
|
// 获取当前页面
|
|
const currentWebview = this.$scope.$getAppWebview();
|
|
// 获取web-view组件对象
|
|
this.webviewInstance = currentWebview.children()[0];
|
|
},
|
|
onLoad(options) {
|
|
// 获取传递的参数
|
|
this.id = options.id;
|
|
console.log('options.id', options.id);
|
|
this.name = options.name;
|
|
console.log('namemeee', options.name);
|
|
},
|
|
async mounted() {
|
|
this.getUserInfos();
|
|
if (this.name == 'account') {
|
|
const res = await _accountdetail({
|
|
id: this.id
|
|
})
|
|
this.detail = res.data
|
|
} else {
|
|
const res = await _guidedetail({
|
|
id: this.id
|
|
})
|
|
this.detail = res.data
|
|
}
|
|
},
|
|
methods: {
|
|
async tosendemail(){
|
|
if (this.emaiTip == "發送") {
|
|
let num = 60;
|
|
let emaiTimer = setInterval(() => {
|
|
this.emaiTip = num + 's';
|
|
num--;
|
|
if (num < 0) {
|
|
this.emaiTip = "發送";
|
|
clearInterval(emaiTimer)
|
|
}
|
|
}, 1000)
|
|
let res = await _emailSend({
|
|
email: this.userInfos.email,
|
|
event: "check"
|
|
});
|
|
if (res.code === 1) {
|
|
uni.showToast({
|
|
title: '發送成功',
|
|
icon: 'none'
|
|
});
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} else {
|
|
return
|
|
}
|
|
},
|
|
googleemail() {
|
|
let num = 60;
|
|
let googleTimer = setInterval(() => {
|
|
this.googleTip = num + 's';
|
|
num--;
|
|
if (num < 0) {
|
|
this.googleTip = "發送";
|
|
clearInterval(googleTimer)
|
|
}
|
|
}, 1000)
|
|
},
|
|
// 接收WebView消息
|
|
handleWebViewMessage(event) {
|
|
let _that = this;
|
|
let obj = event.detail.data;
|
|
this.obj = event.detail.data;
|
|
console.log('this.objthis.obj:', obj);
|
|
console.log('收到WebView消息:', obj);
|
|
if (obj.length > 0) {
|
|
uni.hideLoading();
|
|
if (obj[0].type == 'USDT') {
|
|
if (obj[0].status == 'success') {
|
|
uni.showToast({
|
|
title: `USDT轉帳成功`,
|
|
icon: 'none'
|
|
})
|
|
_that.payorderres(obj[0].hash)
|
|
} else {
|
|
uni.showToast({
|
|
title: `USDT轉帳失敗`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
if (obj[0].type == 'BNB') {
|
|
if (obj[0].status == 'success') {
|
|
uni.showToast({
|
|
title: `BNB轉帳成功`,
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: `BNB轉帳失敗`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
_that.emailCode = "";
|
|
_that.googleCode = "";
|
|
_that.emaiTip = "發送";
|
|
_that.googleTip = "發送";
|
|
_that.zhifuMimaZz = "";
|
|
_that.payMoneyStyle = 'USDT';
|
|
_that.modalNamezz = false;
|
|
}
|
|
},
|
|
async getUserInfos() {
|
|
let res = await _userInfos();
|
|
if (res.code === 1) {
|
|
this.userInfos = res.data.userinfo;
|
|
this.userMoneyAdress = this.userInfos.wallet.address;
|
|
}
|
|
},
|
|
purchase() {
|
|
if (this.isDisable) {
|
|
this.show = true
|
|
} else {
|
|
uni.showToast({
|
|
title: "請先同意協議書",
|
|
icon: "none"
|
|
})
|
|
}
|
|
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
offModalBtnZz() {
|
|
this.modalNamezz = false;
|
|
this.zhifuMimaZz = "";
|
|
this.emailCode = "";
|
|
this.googleCode = "";
|
|
this.emaiTip = "發送";
|
|
this.googleTip = "發送";
|
|
},
|
|
changePassword() {
|
|
this.showPassword2 = !this.showPassword2;
|
|
},
|
|
handleInput2(event) {
|
|
this.zhifuMimaZz = event;
|
|
},
|
|
async confirm() {
|
|
// 攻略
|
|
if (this.name == 'account') {
|
|
let res = await _buyaccount({
|
|
id: this.id
|
|
})
|
|
console.log('account',res.data);
|
|
if(res.code === 1){
|
|
this.outMoney = res.data.usdt;
|
|
this.toAdress = res.data.to;
|
|
this.order_id = res.data.order_id;
|
|
this.modalNamezz = true;
|
|
this.show = false;
|
|
}else{
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
}
|
|
} else {
|
|
// 賬號
|
|
let res = await _buyguide({
|
|
id: this.id
|
|
})
|
|
console.log('guide', res.data);
|
|
if(res.code === 1){
|
|
this.outMoney = res.data.usdt;
|
|
this.toAdress = res.data.to;
|
|
this.order_id = res.data.order_id;
|
|
this.modalNamezz = true;
|
|
this.show = false;
|
|
}else{
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
async modalBtnZz() {
|
|
let _that = this;
|
|
if (!_that.zhifuMimaZz || !this.emailCode || !this.googleCode) return uni.showToast({
|
|
title: '請填寫正確資訊',
|
|
icon: 'none'
|
|
})
|
|
const params = {
|
|
code: this.emailCode,
|
|
googlecode: this.googleCode,
|
|
paykey: MD5(this.zhifuMimaZz + (Math.floor(Date.now() / 1000))),
|
|
timestamp: Math.floor(Date.now() / 1000),
|
|
}
|
|
|
|
let res = await _walletinfo(params);
|
|
if (res.code === 1) {
|
|
uni.showLoading({
|
|
title: '打款中......'
|
|
});
|
|
if (_that.payMoneyStyle == 'USDT') {
|
|
let userSiyao = await publicjiemi(2, _that.zhifuMimaZz, _that.userMoneyAdress);
|
|
const params = {
|
|
type: 'USDT',
|
|
fromAdress: _that.userMoneyAdress,
|
|
toAdress: _that.toAdress,
|
|
coin: _that.outMoney,
|
|
privateKey: userSiyao
|
|
};
|
|
console.log('params', params);
|
|
if (_that.webviewInstance) {
|
|
_that.webviewInstance.evalJS(`
|
|
usdtTransfer(${JSON.stringify(params)});
|
|
`);
|
|
}
|
|
} else if (_that.payMoneyStyle == 'BNB') {
|
|
let userSiyao = await publicjiemi(2, _that.zhifuMimaZz, _that.userMoneyAdress);
|
|
const params = {
|
|
type: 'BNB',
|
|
fromAdress: _that.userMoneyAdress,
|
|
toAdress: _that.toAdress,
|
|
coin: _that.outMoney,
|
|
privateKey: userSiyao
|
|
};
|
|
if (_that.webviewInstance) {
|
|
_that.webviewInstance.evalJS(`
|
|
bnbTransfer(${JSON.stringify(params)});
|
|
`);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
async payorderres(hash) {
|
|
let res = await _payorderres({
|
|
type: this.name,
|
|
oid: this.order_id,
|
|
tx: hash
|
|
})
|
|
console.log('回调resssss', res)
|
|
if (res.code == 1) {
|
|
uni.navigateTo({
|
|
url: `/pages/game/paysuccess?name=${this.name}`
|
|
})
|
|
}
|
|
},
|
|
checkboxChange(e) {
|
|
this.isDisable = !this.isDisable
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.container {
|
|
border-top: 1px solid dimgrey;
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
background-color: #292d5b;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.paymoney {
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
|
|
.titcont {
|
|
padding: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #f4f6f8;
|
|
|
|
.image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.cont {
|
|
width: 500rpx;
|
|
font-size: 27rpx;
|
|
}
|
|
}
|
|
|
|
.money {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 10rpx;
|
|
margin: 30rpx 0 10rpx 0;
|
|
|
|
.moneytit {
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.moneynum {
|
|
color: #FD5C5C;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.paymentmethod {
|
|
border-radius: 20rpx;
|
|
height: 240rpx;
|
|
background-color: #fff;
|
|
margin-top: 30rpx;
|
|
|
|
.p_tit {
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #ccc;
|
|
}
|
|
|
|
.moneybi {
|
|
padding: 30rpx;
|
|
|
|
.m_item {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background-color: #ececf8;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.m_left {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-right: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.buy {
|
|
width: 100vw;
|
|
background-color: #fff;
|
|
height: 220rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
.buypurchase {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.purchase {
|
|
margin-top: 10rpx;
|
|
width: 620rpx;
|
|
height: 80rpx;
|
|
background-color: #4f5ad8;
|
|
border-radius: 40rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
z-index: 999;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: #b6b5c8;
|
|
border-radius: 20px 20px 0 0;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
animation: slideUp 0.3s ease-out;
|
|
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-close {
|
|
font-size: 24px;
|
|
color: #999;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-body {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.modal-item {
|
|
display: flex;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.modal-label {
|
|
color: #666;
|
|
font-size: 14px;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.modal-value {
|
|
flex: 1;
|
|
font-weight: bold;
|
|
color: #333;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
text-align: right;
|
|
overflow: hidden;
|
|
/* 超出部分隱藏 */
|
|
text-overflow: ellipsis;
|
|
/* 超出部分顯示省略號 */
|
|
white-space: nowrap;
|
|
/* 不換行 */
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-button {
|
|
width: 48%;
|
|
height: 44px;
|
|
border-radius: 22px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.modal-button.cancel {
|
|
background-color: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
|
|
.modal-button.cancel:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.modal-button.confirm {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
}
|
|
|
|
.modal-button.confirm:hover {
|
|
background-color: #45a049;
|
|
}
|
|
}
|
|
</style> |