|
|
@@ -1,8 +1,485 @@
|
|
|
<template>
|
|
|
-</template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 状态栏占位 -->
|
|
|
+ <!-- <view class="status_bar"></view> -->
|
|
|
+ <!-- <view class="topbar-box">
|
|
|
+ <view class="topbar">
|
|
|
+ <view class="topbar-left"><image src="../../static/img/img16.png" mode=""></image></view>
|
|
|
+ <view class="topbar-center"></view>
|
|
|
+ <view class="topbar-right"></view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <!-- <uni-nav-bar left-icon="back" class="nav-bar" @clickLeft="back">
|
|
|
+ <view class="topbar-center">
|
|
|
+ <view :class="{ action: current === 0 }" @click="changeCurrent(0)">商品</view>
|
|
|
+ <view :class="{ action: current === 1 }" @click="changeCurrent(1)">参数</view>
|
|
|
+ <view :class="{ action: current === 2 }" @click="changeCurrent(2)">介绍</view>
|
|
|
+ </view>
|
|
|
+ </uni-nav-bar> -->
|
|
|
+ <!-- <view class="list-box"></view> -->
|
|
|
+ <view class="good-img">
|
|
|
+ <image :src="list.logo"></image>
|
|
|
+ </view>
|
|
|
+ <view class="param-box">
|
|
|
+ <view class="param-price">{{ list.cost_money * 1 }}{{ list._cost_money_type }}</view>
|
|
|
+ <view class="param-name">{{ list.name }}</view>
|
|
|
+ <view class="param-list">
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">使用周期</view>
|
|
|
+ <view class="item-val">{{ list.first_step_time + list.second_step_time }}天 + {{list.third_step_time}}天</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">电费</view>
|
|
|
+ <view class="item-val">{{list.elect_fee|keept}}元/天</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">预计日产出</view>
|
|
|
+ <view class="item-val">{{list._day_get | daiding}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">算力</view>
|
|
|
+ <view class="item-val" v-if="list.get_money_type == 'BZZ'">{{+list.step}}节点</view>
|
|
|
+ <view class="item-val" v-else>{{ +list.step}}TB</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">管理费</view>
|
|
|
+ <view class="item-val">{{ list.service_ratio }}%</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">上架期</view>
|
|
|
+ <view class="item-val">{{ list.stand_time }}天</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">宽带费</view>
|
|
|
+ <view class="item-val">{{ list.broadband || 0 }}元/月</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">IP地址费</view>
|
|
|
+ <view class="item-val">{{ list.ip_address || 0 }}元/月</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-item">
|
|
|
+ <view class="item-title">质押币</view>
|
|
|
+ <view class="item-val">{{ list.pledge || 0 }}个</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view class="explain"><rich-text :nodes="list.detail"></rich-text></view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="list"> -->
|
|
|
+ <!-- <view class="list-title">{{ list.name }}</view>
|
|
|
+ <view class="flex list-item">
|
|
|
+ <view class="item-name">价格</view>
|
|
|
+ <view class="item-tpl">{{ list.cost_money * 1 }}{{ list._cost_money_type }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex list-item" v-if="list.stand_money > 0">
|
|
|
+ <view class="item-name">质押FIL数量(用户自行支付)</view>
|
|
|
+ <view class="item-tpl">{{ list.stand_money * 1 }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex list-item">
|
|
|
+ <view class="item-name">托管运维费</view>
|
|
|
+ <view class="item-tpl">{{ list.service_ratio }}%</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex list-item">
|
|
|
+ <view class="item-name">上架期</view>
|
|
|
+ <view class="item-tpl">{{ list.stand_time }}天</view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="flex list-item">
|
|
|
+ <view class="item-name">封装期</view>
|
|
|
+ <view class="item-tpl">{{list.first_step_time}}</view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="flex list-item">
|
|
|
+ <view class="item-name">合约期</view>
|
|
|
+ <view class="item-tpl">{{ list.first_step_time + list.second_step_time + list.third_step_time }}天</view>
|
|
|
+ </view> -->
|
|
|
+ <!-- <view class="tpl" v-if="list.stand_money > 0">需完成应质押的FIL后,才能开始进入50天封装期</view> -->
|
|
|
+
|
|
|
+ <!-- <view class="list-title">IPFS独享算力包-1T</view> -->
|
|
|
+ <!-- 产品说明 -->
|
|
|
+ <!-- <view class="tips">说明:</view> -->
|
|
|
|
|
|
+ <!-- <view class="explain"><rich-text :nodes="list.detail"></rich-text></view> -->
|
|
|
+ <!-- <view class="num-box flex">
|
|
|
+ <view class="num-title">购买数量({{ list.step * 1 }}T)</view>
|
|
|
+ <uni-number-box class="step" :value="num" :disabled="false" @eventChange="numberChange"></uni-number-box>
|
|
|
+ </view>
|
|
|
+ <view class="flex money-box">
|
|
|
+ <view class="money-name">购买总数</view>
|
|
|
+ <view class="money-num">{{ list.step * 1 * num}}T</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex money-box">
|
|
|
+ <view class="money-name">金额</view>
|
|
|
+ <view class="money-num">{{ money * 1 }}{{ list._cost_money_type }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="pay-box">支付方式:{{ list._cost_money_type }}</view>
|
|
|
+ <view class="flex money-box">
|
|
|
+ <view class="money-name">交易密码</view>
|
|
|
+ <view class="money-num"><input class="input-box" type="password" v-model="password" placeholder="请输入交易密码" /></view>
|
|
|
+ </view>
|
|
|
+ <view class="check_box flex_item">
|
|
|
+ <view><radio style="transform: scale(0.75)" @click="Getcheckbox" color="#6786FB" :checked="checked" /></view>
|
|
|
+ <view class="">
|
|
|
+ 请阅读并同意
|
|
|
+ <text @click="ToIndex">《矿机租赁协议》</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <!-- </view> -->
|
|
|
+ <view class="submit-box">
|
|
|
+ <view class="submit" @click="buy">{{ type == 3 ? '立即质押' : '立即购买' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
<script>
|
|
|
+import { miningDateils, buyMining } from '@/api/market.js';
|
|
|
+import uniNumberBox from '@/components/uni-number-box.vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ uniNumberBox
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ type: '',
|
|
|
+ num: 1,
|
|
|
+ step: 0,
|
|
|
+ password: '',
|
|
|
+
|
|
|
+ price: '',
|
|
|
+ list: {},
|
|
|
+ checked: false,
|
|
|
+ current: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ Keept(value) {
|
|
|
+ if(!value) {
|
|
|
+ return '0.00'
|
|
|
+ }
|
|
|
+ value = Math.round(value* 100)/100;
|
|
|
+ return value
|
|
|
+ },
|
|
|
+ daiding(value) {
|
|
|
+ let num = parseFloat(value)
|
|
|
+ if(num === 0){
|
|
|
+ return '待定'
|
|
|
+ }else {
|
|
|
+ return value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id;
|
|
|
+ this.type = option.type;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ money() {
|
|
|
+ return this.num * this.price * this.step;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ methods: {
|
|
|
+ async loadData() {
|
|
|
+ let obj = this;
|
|
|
+ miningDateils({}, obj.id).then(({ data }) => {
|
|
|
+ obj.list = data;
|
|
|
+ // obj.money = obj.list.cost_money;
|
|
|
+ obj.price = obj.list.cost_money;
|
|
|
+ obj.step = obj.list.step;
|
|
|
+ console.log(obj.list);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //阅读并同意
|
|
|
+ Getcheckbox() {
|
|
|
+ let obj = this;
|
|
|
+ obj.checked = !obj.checked;
|
|
|
+ },
|
|
|
+ ToIndex() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/finance/xieyi'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ let obj = this;
|
|
|
+ if (obj.password == '') {
|
|
|
+ obj.$api.msg('请输入交易密码!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (obj.checked == false) {
|
|
|
+ obj.$api.msg('请阅读并同意协议!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ buyMining(
|
|
|
+ {
|
|
|
+ num: obj.num * obj.step,
|
|
|
+ trade_psw: obj.password
|
|
|
+ },
|
|
|
+ obj.id
|
|
|
+ )
|
|
|
+ .then(data => {
|
|
|
+ obj.$api.msg(data.msg);
|
|
|
+ obj.password = '';
|
|
|
+ obj.num = 1;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ obj.password = '';
|
|
|
+ obj.num = 1;
|
|
|
+ if (e.msg == '交易密码错误') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(e);
|
|
|
+ var reg = new RegExp('购买矿机所需的');
|
|
|
+ if (e.msg.match(reg) == -1) {
|
|
|
+ } else {
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/finance/recharge'
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ numberChange(data) {
|
|
|
+ let obj = this;
|
|
|
+ obj.num = data.number;
|
|
|
+ },
|
|
|
+ buy() {
|
|
|
+ // let list = JSON.stringify(this.list)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/market/pay?&id=' + this.id + '&type=' + this.type
|
|
|
+ });
|
|
|
+ // console.log(this.list,'--------------***********')
|
|
|
+ // console.log('buy click')
|
|
|
+ },
|
|
|
+ changeCurrent(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ uni.navigateBack({
|
|
|
+ url: '/pages/calculation/buyCalculation'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+page {
|
|
|
+ min-height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-box {
|
|
|
+ // background-color: #5771df;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+}
|
|
|
+.list {
|
|
|
+ // margin: 0rpx 31rpx;
|
|
|
+ // padding: 45rpx 35rpx;
|
|
|
+ // background-color: #ffffff;
|
|
|
+ // border-radius: 15rpx;
|
|
|
+ // position: relative;
|
|
|
+ // top: -100rpx;
|
|
|
+ .list-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 35rpx;
|
|
|
+ }
|
|
|
+ .list-item {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ padding-bottom: 35rpx;
|
|
|
+ .item-tpl {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .tpls {
|
|
|
+ color: #faba38;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tpl {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #faba38;
|
|
|
+ padding-bottom: 98rpx;
|
|
|
+ }
|
|
|
+ .num-box {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 83rpx;
|
|
|
+ }
|
|
|
+ .money-box {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 102rpx;
|
|
|
+ .money-num {
|
|
|
+ font-weight: bold;
|
|
|
+ .input-box {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-box {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #5771df;
|
|
|
+ padding-bottom: 25rpx;
|
|
|
+ }
|
|
|
+ .explain {
|
|
|
+ // word-wrap: break-word;
|
|
|
+ // font-size: 26rpx;
|
|
|
+ // font-weight: 500;
|
|
|
+ // color: #666666;
|
|
|
+ // line-height: 38rpx;
|
|
|
+ width: 662rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 141rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.submit-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 25rpx 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ // border-top: 1px solid rgba(0,0,0,0.1);
|
|
|
+ .submit {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 662rpx;
|
|
|
+ height: 91rpx;
|
|
|
+ line-height: 91rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: linear-gradient(90deg, #60BAB0, #60BAB0, #45969B);
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ // padding: 25rpx 0rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.check_box {
|
|
|
+ padding: 25rpx 25rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+ text {
|
|
|
+ color: #6786fb;
|
|
|
+ }
|
|
|
+}
|
|
|
+.status_bar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ z-index: 999;
|
|
|
+ height: var(--status-bar-height);
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+// .topbar-box {
|
|
|
+// background-color: #bfa;
|
|
|
+// height: 100rpx;
|
|
|
+// width: 100%;
|
|
|
+// position: fixed;
|
|
|
+// top: var(--status-bar-height);
|
|
|
+// .topbar {
|
|
|
+// .topbar-left {
|
|
|
+
|
|
|
+// }
|
|
|
+// .topbar-center {
|
|
|
+
|
|
|
+// }
|
|
|
+// .topbar-right {
|
|
|
+
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+.nav-bar {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: var(--status-bar-height);
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ .topbar-center {
|
|
|
+ // width: 450rpx;
|
|
|
+ height: 41px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ color: #9d989e;
|
|
|
+ font-weight: bold;
|
|
|
+ view {
|
|
|
+ margin: 0 40rpx;
|
|
|
+ }
|
|
|
+ .action {
|
|
|
+ color: #000;
|
|
|
+ border-bottom: 3px #cc6551 solid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.good-img {
|
|
|
+ width: 330rpx;
|
|
|
+ height: 330rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.param-box {
|
|
|
+ width: 660rpx;
|
|
|
+ margin: 0 auto 20rpx;
|
|
|
+ .param-price {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #dc4423;
|
|
|
+ padding: 34rpx 0;
|
|
|
+ }
|
|
|
+ .param-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+ .param-list {
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f7f8fc;
|
|
|
+ color: #000;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ // margin: 0 19rpx;
|
|
|
+ .list-item {
|
|
|
+ width: 33%;
|
|
|
+ padding: 5rpx 0 0 5rpx;
|
|
|
+ text-align: center;
|
|
|
+ // height: 122rpx;
|
|
|
+ .item-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ color: #8c8b90;
|
|
|
+ }
|
|
|
+ .item-val {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding-bottom: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|