BlockChainH5/pages/market/transfer.vue

<template>
	<view v-if="!loding">
		<!-- 产品信息 -->
		<view class="goods">
			<image class="cover" :src="info.goods.cover" mode="aspectFill"></image>
			<view class="content">
				<view class="title nowrap">数字权证</view>
				<view class="text nowrap">锚定商品：{{info.goods.goods_name}}</view>
				<view class="text nowrap">提供企业：{{info.goods.company.name}}</view>
				<view class="text nav-goods nowrap" @click="onGoods">查看锚定商品信息<uni-icons type="arrowright" size="12" color="#8b64fd"></uni-icons></view>
			</view>
			<view class="info">
				<view class="info-item">
					<label>权证销售单价</label>
					￥{{info.goods.price}}
				</view>
				<view class="info-item">
					<label>拥有数量</label>
					{{info.account.balance}}
				</view>
				<view class="info-item">
					<label>转让价格</label>
					<input class="info-input" type="digit" v-model="pirce" placeholder="输入转让价格" maxlength="5" @blur="calculatePirce" />
				</view>
				<view class="info-item info-flex">
					<label>转让数量</label>
					<uni-number-box class="info-number" v-model='stock' :min="1" :max="info.account.balance" @change="countPrice"></uni-number-box>
				</view>
				<view class="info-item">
					<label>预估转让收益</label>
					<view class="price">{{forecast}}</view>
				</view>
			</view>
		</view>
		<button class="buy-btn" type="default" @click="onCreate">确认转让</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { marketsCreateInfo, marketsCreate } from '@/apis/interfaces/market'
	export default {
		data() {
			return {
				loding	: true,
				pirce	: '',
				stock	: 1,
				info	: {},
				forecast: '0.00'
			};
		},
		onShow() {
			marketsCreateInfo(this.$Route.query.symbol).then(res =>{
				this.info	= res
				this.loding	= false
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods:{
			// 查看锚定产品
			onGoods(){
				this.$Router.push({name: 'marketGoods', params: { id: this.info.goods.goods_id }})
			},
			// 转让数量
			countPrice(e){
				this.stock = e
				this.calculatePirce()
			},
			// 计算预估收益
			calculatePirce(){
				this.forecast = (this.pirce * this.stock).toFixed(2)
			},
			// 提交转让市场
			onCreate(){
				if(this.pirce === ''){
					this.$refs.uToast.show({
						title: '请校验转让价格',
						type: 'error',icon:false,
						duration: 3000
					})
				}else{
					marketsCreate({
						symbol	: this.$Route.query.symbol,
						qty		: this.stock,
						price	: this.pirce || 0
					}).then(res => {
						uni.setStorageSync('refresh', true)
						uni.showModal({
							title		: '提示',
							content		: res,
							showCancel	: false,
							success     : () => {
								this.$Router.back()
							}
						})
					}).catch(err => {
						console.log(err)
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
				}				
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 转让权证
	.buy-btn{
		margin: 0 $margin;
		background: $mian-color;
		color: white;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0;
		border-radius: $radius/2;
		font-size: $title-size;
		font-weight: bold;
		&::after{
			border: none;
		}
	}
	// 产品信息
	.goods{
		min-height: 168rpx;
		position: relative;
		background: white;
		border-radius: $radius/2;
		margin: $margin;
		padding: $padding;
		.cover{
			position: absolute;
			left: $padding;
			top: $padding;
			width: 168rpx;
			height: 168rpx;
		}
		.content{
			padding-left: calc(168rpx + #{$padding});
			.title{
				position: relative;
				font-size: $title-size-lg;
				color: $text-color;
				font-weight: bold;
				line-height: 52rpx;
				padding-right: 60rpx;
				text{
					position: absolute;
					right: 0;
					top: 0;
					width: 60rpx;
					text-align: right;
					font-weight: normal;
				}
			}
			.text{
				font-size: $title-size-sm;
				color: $text-gray;
				height: 40rpx;
				line-height: 40rpx;
				&.nav-goods{
					color: $mian-color;
				}
			}
		}
		.info{
			margin-top: $margin;
			border-top: solid 1rpx $border-color;
			padding-top: $padding;
			.info-item{
				padding-left: 200rpx;
				height: 90rpx;
				line-height: 90rpx;
				position: relative;
				text-align: right;
				font-size: $title-size-lg;
				&.info-flex{
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}
				@extend .nowrap;
				label{
					position: absolute;
					left: 0;
					top: 0;
					width: 200rpx;
					text-align: left;
					color: $text-gray;
				}
				.info-input{
					height: 80rpx;
					line-height: 80rpx;
					font-size: $title-size-lg;
				}
				.price{
					color: $text-price;
					font-weight: bold;
				}
			}
		}
	}
	// 购买产品
	.popup {
		width: 100%;
		background-color: #fff;
		padding-bottom: $padding;
		.title {
			font-size: 36rpx;
			text-align: center;
			padding: 50rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
		}
		.btn {
			background-color: $text-price;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			font-size: $title-size;
			margin: $padding * 2;
			border-radius: $radius/2;
		}
		.des {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: $padding $padding * 2;
			color: $text-gray;
			font-size: $title-size-lg;
			text{
				color: $text-color;
			}
			.price{
				color: $mian-color;
				font-weight: bold;
			}
		}
	}
</style>