<template>
	<view class="placeOrder">
		<view class="placetop">
			<view class="placetopone">
				<view style="display: flex;">
					<image :src="info.proImg"
						style="width: 102rpx;height: 102rpx;border-radius: 50%;margin-left: 28rpx;" mode=""></image>
					<view class="placetopInfo">
						<view>{{info.proName.length>12?info.proName.substring(0,12)+'...':info.proName}} </view>
						<view>{{info.avaTime}} </view>
						<view>{{info.proDetail}} </view>
					</view>
				</view>
				<view class="placetopmoney">
					<view>
						<text>￥12</text>
						<text>￥13</text>
					</view>
					<u-number-box v-model="Quantity">
						<view slot="minus" class="minus">
							<u-icon name="minus" color="#CCCCCC" bold size="40"></u-icon>
						</view>
						<text slot="input" style="width: 20px;text-align: center;">{{Quantity}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" color="#FF4B10" bold size="30"></u-icon>
						</view>
					</u-number-box>
				</view>
			</view>
			<view class="redMoney">
				<view class="">
					红包/低佣券
				</view>
				<view class="">
					有20张优惠券可选择
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad(e) {
			this.getInfo(e.id)
		},
		data() {
			return {
				info: null,
				Quantity: 1
			}
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			async getInfo(id) {
				let res = await this.api.getproductorderConfirm({
					productId: id,
				})
				if (res.code == 0) {
					this.info = res.data
					console.log(this.info, 'tiaoshi1')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.placeOrder {

		.placetop {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 30rpx;

			.placetopone {
				.df(space-between);

				.placetopInfo {
					margin-left: 18rpx;

					>view:first-child {
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}

					>view:nth-child(2),
					>view:last-child {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;

					}
				}

				.placetopmoney {

					>view:first-child {
						margin-bottom: 20rpx;

						>text:first-child {
							text-decoration: line-through;
							color: #999;
							font-weight: 400;
							font-size: 24rpx;
						}

						>text:last-child {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
					}

				}
			}

			.redMoney {
				.df(space-between);
				margin-top: 30rpx;
				.m(30rpx);

				>view:first-child {
					.df
				}
			}
		}
	}

	.m(@top, @right: 0, @bottom: 0, @left: 0) {
		margin: @top, @right, @bottom, @left
	}

	.df(@start: flex-start, @position: center) {
		display: flex;
		align-items: @position;
		justify-content: @start;
	}
</style>
<style lang="scss">
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #F0F0F0;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FFF1EC;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>