<template>
	<!-- 传入价格，通过改变数量改变价格的支付页面 -->
	<view class="wrap">
		<view class="top">
			<view class="name">
				皇冠大扶梯
			</view>
			<view class="number">
				<text>
					购买数量
				</text>
				
				<u-number-box 
					v-model="buyNumber" 
					bg-color='#3688FF' 
					color='#ffffff' 
					:input-height="60"
					size='28'>
				</u-number-box>
			</view>
			<view class="price">
				<text>
					总价
				</text>
				<text>
					¥6.00
				</text>
			</view>
			<view class="remark">
				<input placeholder="添加备注(20字以内)" maxlength="20" v-model.trim="remark" style="margin-bottom:20rpx;" />
			</view>
			<view class="tips">
				温馨提示：请核对以上付款金额、付款对象等信息与交易匹配。
			</view>
		</view>
		
		<view class="bottom">
			<text class="btn">立即支付</text>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      remark:'',//备注
      payType:'',//支付方式
      buyNumber:'',//购买数量
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.payType = 42
    //#endif

    //#ifdef MP-ALIPAY
    this.payType = 33
    //#endif
   
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.wrap{
	height: 100%;
	background: #ffffff;
}
.top{
	padding: 40rpx 24rpx;
}
.name{
	font-size: 32rpx;
	font-weight: bold;
	color: #191919;
	text-align: center;
}
.number{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-top: 80rpx;
	align-items: center;
}
.price{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-top: 48rpx;
	text:nth-child(2){
		font-size: 40rpx;
		color: $red;
	}
}
.remark{
	margin-top: 48rpx;
	color: $grey;
}
.tips{
	margin-top: 24rpx;
	color: $grey;
	font-size: 24rpx;
}
.bottom{
	position: fixed;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 0;
	box-shadow: 0px -4px 12px 2px rgba(0,0,0,0.08);
	background: #ffffff;
}
.btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 80rpx;
	background: #3688FF;
	border-radius: 8rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>
