samehome/pages/mine/mineDetails.vue

<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.MineDetails }}
			<view slot="right" class="right" @click="goto('mineRecord')">{{ i18n.Record }}
			</view>
		</navigation>
		<view class="content">
			<view class="card">
				<view class="top">
					<u-icon class="icon" :name="imgAddress+detail.mineDetails.imgMobile" size="80rpx" width="80rpx">
					</u-icon>
					<view class="title">{{ detail.mineDetails.name }}</view>
					<view class="coinValue">{{ detail.userCapital }} <text
							style="font-size: 26rpx;">{{detail.mineDetails.baseCoin}}</text> </view>
				</view>
				<view class="bottom">
					<view class="item">
						<view class="title">{{ i18n.LockBTC }}{{" "}}{{detail.mineDetails.baseCoin}}</view>
						<view class="value">{{ detail.mineDetails.baseAmount }}</view>
					</view>
					<view class="item">
						<view class="title">{{ i18n.dayproduce }}</view>
						<view class="value">{{ detail.mineDetails.price }} {{ detail.mineDetails.profitCoin }}</view>
					</view>
					<view class="item">
						<view class="title">{{ i18n.MinLockTime }}</view>
						<view class="value">{{ detail.mineDetails.day}}{{ i18n.days }}</view>
					</view>
				</view>

			</view>
		<!-- 	<input class="input" v-model="info.inviteCode" focus :placeholder="i18n.invuteCode"
				placeholder-style="color:#A1A0A8" :disabled="detail.inviteCode" /> -->
			<view class="allItem">
				<input class="input" v-model="info.amount" :placeholder="i18n.lockBTC.replace('BTC',detail.mineDetails.baseCoin)"
					placeholder-style="color:#A1A0A8" />
				<view class="all" @click="info.amount=detail.userCapital">{{ i18n.ALL }}</view>
			</view>

			<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="lockBTCBtned" @click="Lock">
				{{ i18n.LockBTCBtn.replace('BTC',detail.mineDetails.baseCoin) }}{
			</u-button>
		</view>


	</view>
</template>

<script>
	import uniCopy from '@/utils/uni-copy'
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		name: "mineDetails",
		data() {
			return {
                 id:null,
				info: {
					productId: null,
					amount: null,
					// inviteCode: null,
				},
				coinValue: 1000.001,
				codeValue: '',
				coinQuantity: '',
				detail: {
					mineDetails:{
						
					}
				},
				imgAddress: '',
			};
		},
		computed: {
			i18n() {
				return this.$t("mine");
			},
			lockBTCBtned() {
				if (!this.info.amount && !this.info.amount) {
					return true;
				} else {
					return false;
				}
			}
		},
		onLoad(res) {
			this.id=res.id
			this.getMineDetail(this.id)
			this.imgAddress = res.imgAddress
		},
		onShow() {},
		methods: {
			// �ύ�����ڿ���Ʒ����
			Lock() {
				api.mineSubmit(this.info).then(res => {
					uni.$u.toast(this.$t("login").Purchasesucceeded)
					setTimeout(()=>{
						this.getMineDetail(this.id)
					},1200)
				})
			},
			//��ȡ�ڿ���Ʒ����
			getMineDetail(id) {
				api.showMineDetails({
					mineId: id
				}).then(res => {
					this.detail = res
					this.info.productId = this.detail.mineDetails.id
				
				})
			},
			goto(page) {
				// console.log(page);
				let url = '';
				switch (page) {
					case 'mineRecord':
						url = '/pages/mine/mineRecord'
						break;
					default:
						break;
				}
				if (url) {
					// console.log(url);
					uni.navigateTo({
						url,
					});
				}

			},
			USDTRadioChange(e) {
				console.log(e);
			},

			copyAddress(value = "") {
				console.log(value)
				uniCopy({
					content: value,
					success: (res) => {
						uni.showToast({
							title: "复制成功",
							duration: 3000,
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.main {

		.right {
			position: absolute;
			right: 32rpx;
			font-size: 24rpx;
		}

		.content {
			overflow: hidden;
			margin-top: 200rpx;
			padding: 0 32rpx;

			.card {
				margin-top: 40rpx;
				height: 274rpx;
				padding: 0 24rpx;
				background-image: url(../../static/mine/bg_mine.png);
				background-repeat: no-repeat;
				background-size: 686rpx 274rpx;

				.top {
					display: flex;
					height: 132rpx;
					border-bottom: 2rpx solid rgba(255, 255, 255, 0.2);

					.icon {
						margin: 0 24rpx 0 16rpx;
					}

					.title {
						font-size: 28rpx;
						line-height: 136rpx;
					}

					.coinValue {
						flex: 1;
						text-align: right;
						font-size: 48rpx;
						line-height: 144rpx;
						padding-right: 20rpx;
					}
				}

				.bottom {
					display: flex;
					height: 140rpx;
					padding: 0 20rpx;

					.item {
						flex: 1;

						.title {
							font-size: 20rpx;
							line-height: 64rpx;
						}

						.value {
							font-size: 35rpx;
							line-height: 40rpx;
							font-weight: 600;
						}

						&:nth-child(1) {
							text-align: left;
						}

						&:nth-child(2) {
							text-align: center;
						}

						&:nth-child(3) {
							text-align: right;
						}
					}




				}

			}

			.input {
				margin-top: 32rpx;
				height: 112rpx;
				background: #323045;
				border-radius: 32rpx;
				padding-left: 32rpx;
				font-size: 26rpx;
				color: #fff;
			}

			.allItem {
				position: relative;

				.all {
					position: absolute;
					display: inline;
					font-size: 20rpx;
					color: #00E8A2;
					top: 44rpx;
					right: 30rpx;
				}
			}




			.button {
				margin-top: 60rpx;
				border-radius: 32rpx;
				height: 112rpx;
				line-height: 112rpx;
				color: #15141F !important;
				font-weight: bold;
			}

		}
	}
</style>