增加兑换弹窗

pages/order/confirmation.vue

@@ -88,15 +88,15 @@
 		<view class="width94 comorder mart10">
 
 			<view class="width92 alijusstart paddtop20" @touchmove.stop>
-				<view class=" fcor333 fontwig6 font16" style="flex-shrink: 0;padding-right: 10px;">
+				<view class=" fcor333 fontwig6 font16" style="flex-shrink: 0;padding-right: 15px;">
 					积分抵扣
 				</view>
 				<view class="cj-slider">
-					<view class="flleft fotct font14 fcor666"  style="flex-shrink: 0;padding: 0 15px 0 0;">0</view>
+					<!-- <view class="flleft fotct font14 fcor666"  style="flex-shrink: 0;padding: 0 15px 0 0;">0</view> -->
 					<cj-slider  class="flex-1" v-if="isDiscount" v-model="priceValue" :min="0"
 						:max="availIntegal" :step="1" :blockWidth="40" @start="blockStart" @moving="blockMoving"
 						@end="blockEnd" />
-					<view class="flright fotrt font14 fcor666" style="flex-shrink: 0;padding-left: 15px;">{{availIntegal}}/{{user.gold || 0}}</view>
+					<view class="flright fotrt font14 fcor666" style="flex-shrink: 0;padding-left: 15px;">{{priceValue[1]}}/{{availIntegal}}</view>
 				</view>
 			</view>
 			
@@ -158,6 +158,7 @@
 					</view>
 					<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
 						style="align-items: center;" v-if="isUse">
+						<!-- || (Number(paytheprice)==0&&item.payTypeId==8) -->
 						<template v-if="item.payTypeId == 3">
 						<radio :checked="paytype==item.payTypeId" @click="changeRiado()" color="#0083f5" />
 						</template>
@@ -272,6 +273,33 @@
 				</view>
 			</view>
 		</wybPopup>
+		<wybPopup ref="exchangeInstructions" type="center" @hide="closeInstructions" :height="getHeight" width="600" radius="6" :showCloseIcon="false">
+			<view class="font16">
+				<view class="fotct paddtop10 paddbotm10 border-b-666 fontwig6 foc3da7e7" >
+					兑换须知
+				</view>
+				<view class="pd-main">
+					<view class="marb5">
+						1.油券售出不可退换，不同面额不能叠加使用。
+					</view>
+					<view class="marb5">
+						2.消费额低于券额不找零，高于券额需支付差额。
+					</view>
+					<view class="marb5">
+						3.油券仅限中国石化贵州省内直营加油站点使用。
+					</view>
+					<view class="marb5">
+						4.使用时请告知加油员“使用汇联通电子券支付”。
+					</view>
+				</view>
+				<view class="mart30">
+					<view @click="toAgreeInstructions()" :class="'width65 needKnowBtn fotct fontwig6 '+(isFinish? ' active ' : 'nactive') " style="margin: 0 auto;">
+						我已阅读并同意<text class="marglerig" v-if="!isFinish">{{countDown}}s</text>
+					</view>
+				</view>
+			</view>
+			
+		</wybPopup>	
 		<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" />
 	</view>
 </template>
@@ -347,6 +375,13 @@
 				oilUserNoPrice: 0, //油卡余额
 				UserCard: '', //车牌号列表
 				cardNoNumber: '', // 车牌号
+				
+				
+				getHeight:370,
+				countDown:3,
+				isFinish:false,
+				isAgree:false,//我已同意
+				Timer:null,
 			};
 		},
 		onLoad(option) {
@@ -361,6 +396,8 @@
 			this.identificationCode = app.globalData.identificationCode;
 			// #endif
 			this.getCouponById();
+			this.rpxTopx();
+			
 		},
 		onShow() {
 			let that = this;
@@ -400,6 +437,14 @@
 			}
 		},
 		methods: {
+			// px转rpx
+			rpxTopx() {
+			  let deviceWidth = uni.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
+			 
+			  let rpx = (750 / deviceWidth) * Number(this.getHeight)
+			 this.getHeight = Math.floor(rpx);
+
+			},
 			//查询支付方式
 			getThirdPartyByDetail() {
 				// #ifdef H5
@@ -463,7 +508,9 @@
 					if (res.return_code == '000000') {
 						app.globalData.userInfo = res.return_data;
 						this.user = res.return_data;
-						
+						/*  测试数据*/
+						// this.user.gold = 10000;
+						/* 测试数据 */
 						if (this.user.hltCardNo) {
 							this.getHuiLianTongCardBalance();
 						}
@@ -554,6 +601,42 @@
 			showPopup() {
 				this.$refs.popup.show();
 			},
+			// 兑换说明弹出框
+			showPopupNeedKnow(){
+				this.$refs.exchangeInstructions.show();
+				if(this.Timer){
+					clearInterval(this.Timer);
+				}
+				
+				if(!this.isFinish){
+					this.countDown = 3;
+					this.Timer = setInterval(()=>{
+						
+						if(this.countDown == 0){
+							clearInterval(this.Timer);
+							this.isFinish = true;
+							return;
+						}
+						
+						this.countDown--
+					},1000)
+				}
+				
+				
+				
+			},
+			// 点击同意
+			toAgreeInstructions(){
+				if(this.isFinish){
+					this.isAgree = true;
+					this.$refs.exchangeInstructions.close();
+				}
+			},
+			closeInstructions(){
+				if(this.Timer){
+					clearInterval(this.Timer);
+				}
+			},
 			//选择优惠券
 			radioChanges(item) {
 				this.paytheprice = this.orderPrice;
@@ -706,6 +789,9 @@
 				});
 			},
 			toPay() {
+				
+				
+				
 
 				if (this.paytheprice == 0) {
 					if (!this.user.isSetPayPwd) {
@@ -714,6 +800,10 @@
 						})
 						return;
 					}
+					if(!this.isAgree){
+						this.showPopupNeedKnow();
+						return;
+					}
 					this.$refs.paymentPassword.modalFun('show');
 					return;
 				}
@@ -727,17 +817,25 @@
 					return;
 				}
 
+				
+				if(!this.isAgree){
+					this.showPopupNeedKnow();
+					return;
+				}
+
 				/* 积分兑换*/
 				if(this.paytype == '8'){ 
 													
 					let title="";
+					
 					if(this.priceValue[1] >= this.availIntegal){ //积分划到最大了
-						title = "积分不足,是否充值积分?"
+						title = "积分不足,是否充值"+Number(this.paytheprice)+"元的积分?";
+						
 					}else{ //积分没有滑倒最大
 
-						let Remain = parseFloat(this.availIntegal - this.priceValue[1]);/* 剩余积分数量 */
+						let Remain = parseFloat((this.availIntegal - this.priceValue[1]).toFixed(2));/* 剩余积分数量 */
-						let price =	parseFloat(this.paytheprice*100); /* 需要的积分数量*/
+						let price =	parseFloat((this.paytheprice*100).toFixed(2)); /* 需要的积分数量*/
-						
+						// console.log(Remain,price)
 						if(Remain >=price){
 							uni.showToast({
 								title: '积分充足,请拖动滑杆进行抵扣',
@@ -746,7 +844,7 @@
 							})	
 							return
 						}else{
-							title = "积分不足,是否充值积分?"
+							title = "积分不足,是否充值"+Number(this.paytheprice) +"元的积分?"							
 						}
 					}
 					
@@ -769,6 +867,8 @@
 					return
 				}
 				
+				
+
 				if (this.orderDetails) {
 					this.wechatPay(this.orderDetails);
 					return;
@@ -1176,7 +1276,23 @@
 	page {
 		background-color: #f7f7f7;
 	}
-
+	
+	.needKnowBtn{
+		height: 40px;
+		line-height: 40px;
+		border-radius: 20px;
+		
+		
+	}
+	.active{
+		color:#ffffff;
+		background: linear-gradient(to right, #089bf5, #0083f5) no-repeat;
+	}
+	.nactive{
+		background:#6666;
+		color:gray;
+	}
+	
 	.comorder {
 		background-color: #FFFFFF;
 		border-radius: 8px;

physical-merchants/address/address.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="user-address backcor9 ">
+	<view class="user-address backcor9 font16">
 
 
 		<scroll-view scroll-y="true" class="address-contain paading10">