Browse Source

Merge branch 'develop' of http://git.chelingzhu.com/chelingzhu-web/zxyj-mini-html into develop

lilei 4 years ago
parent
commit
5ad6469279
1 changed files with 68 additions and 31 deletions
  1. 68 31
      pages/checkOut/checkOut.vue

+ 68 - 31
pages/checkOut/checkOut.vue

@@ -1,33 +1,36 @@
 <template>
 	<view class="page-content">
-		<u-gap height="10" bg-color="#f8f8f8"></u-gap>
-		<u-field
-			class="field-item"
-			:value="store.name"
-			disabled
-			input-align="right"
-			label="收取门店"
-		>
-		</u-field>
-		<u-field
-			v-model="remarks"
-			label="备注"
-			input-align="right"
-			auto-height
-			:maxlength="10"
-			placeholder="请填写备注(最多10个字符)"
-			type="textarea"
-		>
-		</u-field>
-		<view class="num-cont">
-			<text class="u-required">支付数量</text>
-			<view class="num-input">
-				<u-input v-model="number" type="number" placeholder="请输入数量" />
-				<text>个乐豆</text>
+		<view class="content">
+			<u-field
+				class="field-item"
+				:value="store.name"
+				disabled
+				input-align="right"
+				label="收取门店"
+			>
+			</u-field>
+			<u-field
+				v-model="remarks"
+				label="备注"
+				input-align="right"
+				auto-height
+				:maxlength="10"
+				placeholder="请填写备注(最多10个字符)"
+			>
+			</u-field>
+			<view class="num-cont">
+				<text class="u-required">支付数量</text>
+				<view class="num-input">
+					<u-input v-model="number" input-align="right" type="number" placeholder="请输入数量" />
+					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
+				</view>
 			</view>
 		</view>
-		<u-gap height="50" bg-color="#f8f8f8"></u-gap>
 		<view class="pay-btn">
+			<view class="total">
+				<text>{{number||0}}</text>
+				<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
+			</view>
 			<u-button  @click="handlePay" type="error" >确认支付</u-button>
 		</view>
 		 <!-- 确认支付弹窗 -->
@@ -42,7 +45,8 @@
 					<view class="num-text">
 						<text>支付数量:</text>
 						<view>
-							<text class="num-big">{{number}}</text>乐豆
+							<text class="num-big">{{number}}</text>
+							<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
 						</view>
 					</view>
 					<view>
@@ -52,7 +56,6 @@
 				</view>
 				<view class="footer">
 					<input v-model="password" 
-					style="text-align: center;" 
 					type="password" 
 					placeholder="请输入支付密码" 
 					:maxlength="30"
@@ -89,10 +92,13 @@
 				number: '',  // 支付数量
 				showPayModal: false, // 支付弹窗
 				password: '', // 支付密码
-				partnerNo: '' // 销售商编号
+				partnerNo: '', // 销售商编号
+				currentGold: 0 //用户当前拥有乐豆数
 			}
 		},
 		onLoad(opts) {
+			this.currentGold = this.$store.state.vuex_userData.currentGold
+			console.log(this.currentGold,'currentGold')
 			console.log(opts)
 			this.partnerNo = opts.scene
 			// 查询销售商信息
@@ -117,6 +123,13 @@
 						icon: 'none'
 					})
 				} else {
+					if (this.number>this.currentGold) {
+						uni.showToast({
+							title: '您当前余额不足!',
+							icon: 'none'
+						})
+						return false
+					}
 					existPayPwd().then(res => {
 						console.log(res,'rrrrrr')
 						if(res.status == 200) {
@@ -176,22 +189,37 @@
 	.page-content{
 		width: 100%;
 		height: 100%;
-		background-color: #fff;
+		padding: 20upx;
+		background-color: #f8f8f8;
+		.content{
+			background-color: #fff;
+		}
 		.num-cont{
 			width: 100%;
-			padding: 30upx;
+			padding: 16upx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
 			.num-input{
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				>u-input {
 					width: 300upx;
-					border-bottom: 1px solid #f8f8f8;
 				}
 			}
 		}
 		.pay-btn{
 			padding: 0 30upx;
+			.total {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 48upx;
+				font-weight: 600;
+				color: red;
+				padding: 60upx 0;
+			}
 		}
 	}
 	.slot-content{
@@ -218,16 +246,25 @@
 					font-size: 36upx;
 					color: red;
 					padding-left: 30upx;
+					font-weight: 600;
 				}
 			}
 			.num-text{
 				align-items: center;
+				>view {
+					display: flex;
+					align-items: center;
+				}
 			}
 			
 		}
 		.footer{
 			width: 80%;
 			border-bottom: 1px solid #b1b1b1;
+			>input {
+				text-align: center;
+				padding: 10upx 0;
+			}
 		}
 		.fot-btn{
 			margin-top: 30upx;