个人中心分包

pages/payment/changeNumPayment/changeNumPayment.vue

+<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>