question_uniapp/pages/questionnaire/details.vue

<template>
	<view class="page">
		<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back" :title="$t('toanswer.title')" :border="false"
		 :shadow="false" :fixed="true" backgroundColor="#fff" :statusBar="true"></uni-nav-bar>
		<view style="margin: 20rpx 3%; padding: 0rpx 10rpx 160rpx; ">
			<view class="cell_list" style="padding: 0rpx; margin-bottom: 30rpx;">
				<view class="cell_left txt">
					<image src="/static/images/q1.png" style="width: 140rpx; height: 140rpx; margin-right: 20rpx;"></image>
				</view>
				<view style="font-weight: 600; font-size: 30rpx; width: 70%; color: #333; line-height: 50rpx; text-align: left;">{{detail.title}}</view>
			</view>
			<uni-forms :modelValue="answerModel" :rules="rules" ref="form">
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">{{$t('toanswer.text2')}}</view>
						<view class="cell_right ">{{detail.max_quantity==0? $t('toanswer.text1') :detail.max_quantity}}</view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">>{{$t('toanswer.text3')}}</view>
						<view class="cell_right ">
							<uni-number-box :value="answerModel.num" :max="detail.max_quantity==0?Infinity:detail.max_quantity" :min="1" background="#2979FF" color="#fff" @change="changeNum" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="amount">
					<view class="cell_list">
						<view class="cell_left txt" style="width: 50%;">{{$t('toanswer.text4')}}</view>
						<view class="cell_right ">
							{{answerModel.price}}<view style="float: right; margin-left: 20rpx;  font-size: 24rpx; margin-right: 20rpx;">USDT</view>
						</view>
					</view>
					<view style="font-size: 28rpx; color: #999; font-weight: 500; line-height: 50upx; text-align: right;">
						{{$t('toanswer.text6')}}: {{parseFloat(user.money).toFixed(2)}} USDT</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">{{$t('toanswer.text5')}}</view>
						<view class="cell_right ">
							<span style="font-weight: 500;font-size: 32rpx;color: #1D61E7;">{{answerModel.interest_rate}} USDT</span></view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">{{$t('toanswer.text7')}}</view>
						<view class="cell_right ">{{detail.billing_cycle}} DAYS</view>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="cell_list">
						<view class="cell_left txt">{{$t('toanswer.text8')}}</view>
						<view class="cell_right ">{{answerModel.rate}}%</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view style="bottom: 0rpx; position: absolute; width:100vw; height: 160rpx;">
			<button type="primary" round style="width: 90%; margin: auto;" @click="submit">{{$t('buttonSubmit')}}</button>
		</view>
		
		<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
			<view style="width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;">
				<view style="font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">{{$t('setPin.text1')}}</view>
				<uni-easyinput type="password" :passwordIcon="true" v-model="pingcode" :placeholder="$t('setPin.text2')" />
				<button style="background-color: #1D61E7; color: #fff; margin: 40rpx auto;" @click="Confirm">{{$t('buttonConfirm')}}</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getUserInfo } from '@/config/utils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
import detailsVue from './details.vue';
	export default {
		data() {
			return {
				answerModel:{
					num: 1,
					price: 0.00,
					interest_rate: 0.00,
					rate: 0,
				},
				isSubmitting: false,
				pingcode: '',
				user: {},
				rules:{
					
				},
				detail: {}
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		//第一次加载
		onLoad(e) {
			uni.showLoading({
				title: this.$t('loading')
			})
			if(e.id){
				getUserInfo(this.$i18n.locale).then(res => {
					this.user = res;
				});
				this.$http.get('/api/product/detail?id='+e.id+'&lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.detail = res.data;
						this.answerModel.price = (parseFloat(this.answerModel.num) * parseFloat(this.detail.price)).toFixed(2);
						this.answerModel.interest_rate = (parseFloat(this.answerModel.num) * parseFloat(this.detail.interest_rate)).toFixed(2);
						this.answerModel.rate = ((parseFloat(this.answerModel.interest_rate) - parseFloat(this.answerModel.price)) * 100 / parseFloat(this.answerModel.price)).toFixed(2)
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading()
				});
			}
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			submit(){
				this.$refs.popup.open('dialog');
			},
			goto(url, type) {
			    if (type == 2) {
			        return uni.switchTab({ url: url })
			    }
			    if (type == 1) {
			        return uni.navigateBack({ delta: url });
			    }
			    uni.navigateTo({
			        url: url
			    })
			},
			changeNum(e){
				this.answerModel.num = e;
				this.answerModel.price = (parseFloat(this.answerModel.num) * parseFloat(this.detail.price)).toFixed(2);
				this.answerModel.interest_rate = (parseFloat(this.answerModel.num) * parseFloat(this.detail.interest_rate)).toFixed(2);
				this.answerModel.rate = ((parseFloat(this.answerModel.interest_rate) - parseFloat(this.answerModel.price)) * 100 / parseFloat(this.answerModel.price)).toFixed(2)
			},
			Confirm(){
				if (this.isSubmitting) return; // 如果正在提交，则不执行任何操作
				this.isSubmitting = true; // 设置正在提交的标志位为true
				let data = {
					product_id: this.detail.id,
					quantity: this.answerModel.num,
					trade_password: this.pingcode,
					lang: this.$i18n.locale
				}
				this.$http.post('/api/productOrder/create', data).then(res => {
					if(res.code == 0){
						this.pingcode = '',
						this.answerModel.num = 1;
						this.answerModel.price = this.detail.price;
						this.answerModel.interest_rate = this.detail.interest_rate;
						this.$refs.popup.close();
						uni.navigateBack();
						this.isSubmitting = false;
					}
				}).catch(err => {
					this.isSubmitting = false;
					this.$refs.popup.close();
					uni.showToast({
						title:err,
						icon:'none'
					})
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #fff;}
	.page{min-height: 96vh;position: relative;}
	::v-deep .uni-numbox__minus{border-radius: 50%; width: 50rpx; height: 50rpx;}
	::v-deep .uni-numbox__plus{border-radius: 50%; width: 50rpx; height: 50rpx;}
	::v-deep .uni-numbox__value{ background-color: #fff !important; color: #000 !important}
	.rechargeTitle{
		font-weight: 400;font-size: 32rpx;color: #999999;line-height: 46px; text-align: center; margin-top: 60rpx;
	}
	.rechargeNet{
		font-weight: 600;font-size: 40rpx;color: #333;line-height: 46rpx; text-align: center; margin-top: 40rpx;
	}
	.txt{
		font-size: 28rpx; color:#999; font-weight: 500;
	}
	.cell_right{
		font-size: 28rpx; color:#333; font-weight: 500;
	}
	.s{
		border-radius: 20rpx; border: 2rpx solid #1D61E7; padding: 4rpx 16rpx; color: #1D61E7; font-size: 56rpx; font-weight: 600;
	}
</style>