wwbsr/pages/pledge/detail.vue

<template>
    <v-page class="pledgeRonqi">
        <v-header
            class=""
            :border="false"
            :title="$t('pledge.e6')"
            :leftClick="() => _router.replace('/pages/pledge/index')"
        >
            <template #right>
                <v-link :to="{ path: '/pages/pledge/order' }">
                    <van-icon class="fn-20 pld-mt" name="orders-o" />
                </v-link>
            </template>
        </v-header>
        <view class="pledgeDetailMain">
            <view class="pledgeMain">
                <view class="lunbo">
                    <img
                        width="100%"
                        height="100%"
                        fit="cover"
                        :src="pledge.spread_img"
                    />
                </view>
            </view>
            <view class="pledgeIntroduce">
                <view class="pledgeDetailTitle">
                    <view class="pledgeTitleLine"></view>
                    <view class="pledgeTitleFont">{{
                        $t("pledge.introduce")
                    }}</view>
                </view>
                <view class="pledgeDetailContent">
                    {{ pledge.content }}
                </view>
            </view>
            <view class="pledgeDetailForm">
                <view class="pledgeDetailList">
                    <text class="detailTextLeft">{{
                        $t("pledge.bzkyzc")
                    }}</text>
                    <text class="detailTextRight"
                        >{{ pledge.coin_num }} {{ pledge.coin_name }}</text
                    >
                </view>
				<view class="pledgeDetailList">
				    <text class="detailTextLeft">{{$t('pledge.e5')}}</text>
				    <text class="detailTextRight">{{pledge.min_amount}}-{{pledge.max_amount}}</text>
				</view>
                <view class="pledgeDetailList">
                    <text class="detailTextLeft">{{$t('pledge.cycle')}}</text>
                    <text class="detailTextRight"
                        >{{ pledge.cycle }} {{ $t("exchange.f0") }}</text
                    >
                </view>
                <view class="pledgeDetailList">
                    <text class="detailTextLeft">{{$t('pledge.e7')}}</text>
                    <text class="detailTextRight">{{ pledge.min_rate }}%~{{ pledge.max_rate }}%</text>
                </view>
				<view class="pledgeDetailList">
				    <text class="detailTextLeft">{{$t('pledge.e8')}}</text>
				    <text class="detailTextRight">{{ pledge.min_power }}MH/s~{{ pledge.max_power }}MH/s</text>
				</view>
                <view class="pledgeDetailList">
                    <text class="detailTextLeft">{{$t('pledge.zynum')}}</text>
                    <view class="detailTextRight detailInput">
                        <input
                            class="pledgeZynum"
                            v-model="form.num"
                            type="text"
                            :placeholder="$t('pledge.zdyxt')"
							@input="inputAmount"
                            placeholder-style="text-align:right;"
                        />
                    </view>
                </view>
				<view class="pledgeDetailList">
				    <text class="detailTextLeft">{{$t('pledge.e9')}}</text>
				    <text class="detailTextRight">{{ min_result }}ETH-{{ max_result }}ETH</text>
				</view>
               <!-- <view class="pledgeDetailList">
                    <text class="detailTextLeft"
                        >{{ $t("pledge.maxnum") }}：{{ this.maxnum }}，{{
                            $t("pledge.minnum")
                        }}：{{ this.minnum }}</text
                    >
                </view> -->
            </view>
        </view>
        <view class="pledgeDetailFooter">
            <view class="van-button__text">
                <!-- <button ref="btn" @click="pledgeCreateOrder" class="pledgeLjzy">
                    {{ $t("pledge.ljzy") }}
                </button> -->
                <button ref="btn" @click="openPopup" class="pledgeLjzy">{{$t("pledge.ljzy")}}</button>
            </view>
			<view class="safe-area"></view>
            <uni-popup
                ref="popup"
                type="bottom"
                :animation="true"
                :isMaskClick="false"
            >
                <view class="x-popup">
                    <text class="x-popup__title">{{ $t("pledge.a1") }}</text>
                    <view class="x-form">
                        <view class="x-form__item">
                            <text class="x-form--label">{{ $t("pledge.a2") }}</text>
                            <view class="x-form__item-container">
                                <input class="x-form--input" type="number" @input="inputAmount" v-model="form.num"   />
                                <text class="x-form__append">{{ pledge.coin_name }}</text>
                            </view>
                            <!-- <text class="x-form--tips">≈ {{tusdt_num}} USDT + {{taxn_num}} {{two_coin_name}}</text> -->
                        </view>
                    </view>
					<view class="x-popup__tips">
					     <text>{{$t('pledge.e9')}}：{{ min_result }}ETH-{{ max_result }}ETH</text>
					 </view>
                   <!-- <view class="x-popup__tips">
                        <text>{{ $t("pledge.a3") }}：1 USDT ≈ {{ (1 / quotation).toFixed(4) }} {{two_coin_name}}</text>
                        <text>
                            {{ $t("pledge.a4") }}{{ 100 - proportion}}%USDT + {{proportion}}% {{two_coin_name}}，{{ $t("pledge.a5") }}
                        </text>
                    </view> -->
                    <!-- <view class="x-popup__btn" @click="tapSubmit"> 提交 </view> -->
                    <view class="x-popup__btn" @click="pledgeCreateOrder"> {{ $t("pledge.a6") }} </view>
                </view>
            </uni-popup>
        </view>
        <van-toast id="van-toast" />
    </v-page>
</template>

<script>
import Pledge from "@/api/pledge";
import app from "@/app";
// import UniPopup from "uni_modules/uni-popup/components/uni-popup/uni-popup";
export default {
    // components: { UniPopup },
    data() {
        return {
            pledge: {},
            app,
            taskHeight: 0,
            pledgenum: 0,
            minnum: 0,
            maxnum: 0,
			min_result:0,
			max_result:0,
            form: {
                id: "",
                num: "",
            },
			
			tusdt_num:0,
			taxn_num:0,
			quotation:0,
			proportion:0,
			two_coin_name:"",
        };
    },
    methods: {
        /**
         * 打开弹窗
         */
        openPopup() {
			if(this.form.num == '' || this.form.num == 0){
				this.$toast(this.$t("pledge.qtxhlfwndsz"));
				return;
			}
            this.$refs.popup.open("bottom");
			let param = this.getParam();
			this.getquotation(param);
        },
        /**
         * 关闭弹窗
         */
        tapSubmit() {
            this.$refs.popup.close();
        },
        getDetail(param) {
            let ajax = Pledge.getDetail({ id: param });
            ajax.then((res) => {
                this.pledge = res.data;
				console.log(res.data.spread_img,'spread_img')
                this.minnum = res.data.min_amount;
                this.maxnum = res.data.max_amount;
            }).catch(() => {});
        },
		inputAmount(){
			const {min_rate,max_rate,cycle,eth_price} = this.pledge
			if(Number(this.form.num)){
				this.min_result = (((Number(this.form.num)*min_rate*cycle)/eth_price)*0.01).toFixed(6)
				this.max_result = (((Number(this.form.num)*max_rate*cycle)/eth_price)*0.01).toFixed(6)
				
			}
		},
		setData(){
			let proportion = this.proportion;
			this.tusdt_num = this.form.num * ((100-proportion)/100);
			this.taxn_num = this.form.num * (proportion/100) / this.quotation;
			this.tusdt_num = this.tusdt_num.toFixed(2);
			this.taxn_num = this.taxn_num.toFixed(4);
		},
		getquotation(param) {
		    let ajax = Pledge.getquotation({ id: param });
		    ajax.then((res) => {
				// 支付比例
				let proportion = res.data.proportion;
		        console.log(res);
				
				this.quotation = res.data.price;
				this.proportion = proportion;
				// 支付usdt
				// if($proportion != 0){
				this.tusdt_num = this.form.num * ((100-proportion)/100);
				this.taxn_num = this.form.num * (proportion/100) / this.quotation;
				this.tusdt_num = this.tusdt_num.toFixed(2);
				this.taxn_num = this.taxn_num.toFixed(4);
				this.two_coin_name = res.data.two_coin_name;
				// }
		    }).catch(() => {});
		},
        getParam() {
			// // #ifdef H5
			// let url = window.location.href;
			// // #endif
   //          // #ifdef APP-PLUS
   //          // let url = 
   //          // #endif
   //          let idStr = url.split("?id=")[1];
   //          let id = idStr.split("&")[0];
            return this.id;
        },
        pledgeCreateOrder() {
			this.$refs.popup.close();
			
            this.form.id = this.getParam();
            let patten = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
            let num = this.form.num;
            if (!patten.test(num)) {
                let numTips = this.$t("common.enter") + this.$t("common.money");
                this.$toast(numTips);
                return;
            }
            //check MinMaxNum
            if (num > this.maxnum || num < this.mixnum) {
                this.$toast(this.$t("pledge.qtxhlfwndsz"));
                return;
            }

            let data = this.form;
            let ajax = Pledge.buygoods(data, { btn: this.$refs.btn });
            ajax.then((res) => {
                // this.$route.push('/order');
                // #ifdef H5
                this.$dialog
                    .confirm({
                        title: this.$t("option.c1"),
                        message: this.$t("pledge.goorder"),
                        cancel: true,
                        cancelButtonText: this.$t("common.cancelButtonText"),
                        confirmButtonText: this.$t("common.confirmButtonText"),
                    })
                    .then(() => {
                        this._router.replace("/pages/pledge/order");
                    })
                    .catch(() => {
                        if (this.query.from) {
                            this.$back();
                        } else {
                            this._router.replace("/pages/pledge/order");
                        }
                    });
                // #endif
                // #ifdef APP-PLUS
                if (this.query.from) {
                    this.$back();
                } else {
                    this._router.replace("/pages/pledge/order");
                }
                // #endif
                // this.$toast(this.$t('reg.c5'));
            }).catch(() => {});
        },
        jumpBack() {
            // this.$router.push({ path: "/pages/pledge/index" });
			uni.navigateTo({
				url:"/pages/pledge/index",
				fail() {
					uni.switchTab({
						url:"/pages/pledge/index"
					})
				}
			})
        },
    },
    onLoad(opt) {
        // let param = this.getParam();
		this.id = opt.id
        this.getDetail(this.id);
    },
    destroyed() {},
};
</script>
<style lang="scss" scoped>
.x-popup {
    background-color: #fff;
    padding: 34rpx;
    color: #333;
    .x-popup__title {
        font-size: 34rpx;
    }
    .x-form {
        .x-form__item {
            .x-form--label {
                text-align: left;
                display: block;
                margin-bottom: 8rpx;
            }
            .x-form__item-container {
                position: relative;
                display: block;
                .x-form--input {
                    background-color: rgba(rgb(165, 165, 165), 0.2);
                    height: 80rpx;
                    border-radius: 20rpx;
                    padding-right: 130rpx;
                    padding-left: 20rpx;
                }
                .x-form__append {
                    position: absolute;
                    top: 50%;
                    right: 20rpx;
                    transform: translateY(-50%);
                }
            }
            .x-form--tips {
                display: block;
                text-align: left;
                margin-top: 8rpx;
            }
        }
    }
    .x-popup__tips {
        background-color: rgba(rgb(165, 165, 165), 0.2);
        padding: 32rpx 16rpx;
        margin-top: 16rpx;
        text-indent: 1em;
        margin-bottom: 36rpx;
        text {
            display: block;
            text-align: left;
        }
    }
    .x-popup__btn {
        background-image: $gradient-red;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        border-radius: 20rpx;
    }
}
.lunbo {
    margin: 30upx;
    height: 300upx;
}
.pledgeDetailMain {
    // height: 1100upx;
    overflow: auto;
}
.pledgeTitleLine {
    width: 11upx;
    height: 40upx;
    background: #ffc119;
}
.pledgeTitleFont {
    font-size: 36upx;
    margin-left: 15upx;
    position: relative;
    top: -8upx;
}
.pledgeDetailTitle {
    display: flex;
    flex-direction: row;
    padding: 30upx 30upx 0;
}
.pledgeDetailContent {
    padding: 15upx 30upx 0upx 30upx;
    max-height: 276upx;
    overflow: auto;
}
.detailTextLeft {
}
.detailTextRight {
    position: absolute;
    right: 0px;
}
input::-ms-input-placeholder {
    text-align: right;
}
input::-webkit-input-placeholder {
    text-align: right;
}
.detailInput {
    top: 20upx;
    width: 250upx;
}
.pledgeZynum {
    text-align: right;
}
.pledgeDetailFooter {
    width: 750upx;
    text-align: center;
    // position: fixed;
    width: 690upx;
    bottom: 30upx;
    z-index: 100;
	padding-bottom:30upx;
    margin: 0 30upx;
}
.pledgeLjzy {
    background-color: #ffc119;
}
.safe-area{
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.pld-mt {
    margin-top: 30upx;
}
</style>