1.修改支付页面样式

App.vue

@@ -1,19 +1,20 @@
 <script>
-	export default {
+	export default {
-		globalData: {
+		globalData: {
-			//正式
+			//正式
-			// url: 'https://pay.bxb.cn/crest',
+			// url: 'https://pay.bxb.cn/crest',
-			// imgUrl: 'https://xuan-pay-private.obs.cn-southwest-2.myhuaweicloud.com',
+			// imgUrl: 'https://xuan-pay-private.obs.cn-southwest-2.myhuaweicloud.com',
-			//测试
+			//测试
-			url: 'https://paycs.dctpay.com/crest',
+			url: 'https://paycs.dctpay.com/crest',
-			imgUrl: 'https://xuan-pay-private.obs.cn-southwest-2.myhuaweicloud.com',
+			imgUrl: 'https://xuan-pay-private.obs.cn-southwest-2.myhuaweicloud.com',
-			userInfo: "",
+			userInfo: "",
-			openId: '',
+			openId: '',
-			code: '',
+			appId: 'wxa075e8509802f826',
-			token: ''
+			code: '', //code获取openid
+			snNo: '' // 设备sn号
 		},
 		onLaunch: function() {
-			console.log('App Launch')
+			console.log('App Launch');
 		},
 		onShow: function() {
 			console.log('App Show')

Utils/Api.js

@@ -11,3 +11,15 @@ export const getQrCodeDetail = params => {
 export const recognizeBankCard = params => {
 	return POST('GET', `${base}/ocr/recognizeBankCard`, params).then(res => res.data);
 }
+//H5 code 转化openid
+export const getAccessToken = params => {
+	return POST('GET', `${base}/wechat/getAccessToken`, params).then(res => res.data);
+}
+//创建  JSAPI 订单
+export const createJSAPIOrder = params => {
+	return POST('POST', `${base}/tradeOrder/createJSAPIOrder`, params).then(res => res.data);
+}
+// 支付 JSAPI 订单
+export const jsapiPay = params => {
+	return POST('POST', `${base}/pay/jsapiPay`, params).then(res => res.data);
+}

pages/index/index.vue

@@ -1,33 +1,44 @@
 <template>
 	<view>
 		<view class="width100 height220 backcor008">
-			<view class="paddtop40 font24 fcorfff fotct fontlet">商户名称</view>
+			<view class="paddtop40 font24 fcorfff fotct fontlet">{{storeList.storeName}}</view>
 			<view class="paddtop25 font14 fcorfff fotct fontlet">-请输入金额-</view>
 			<view class="idcard fcorfff font40 fontlet">
 				{{plateNumberStr==''?'¥0.00':'¥'+plateNumberStr}}
 			</view>
 			<view class="width40w mart10 line1"></view>
 		</view>
+		<!-- 商家优惠 -->
+		<view class="height50 width100  mart10 backcorfff">
+			<view class="width50 flleft fcor666 font16 alijusstart" style="padding-left: 5%;">
+				商家优惠
+			</view>
+			<view class="width40 flright fotrt paddtright15 font15 fcor666 alijusend" style="align-items: center;">
+				商家优惠活动
+			</view>
+		</view>
+		<view class="width90 line1 mart5 marb5"></view>
 		<!-- 积分抵扣 -->
-		<view class="fotct mart20 fcor666 font14 fontspec" style="margin-left: 30%;">抵扣金额 : ¥{{priceValue[1] / 10 /10}}
+		<view class="fotct mart10 fcor666 font14 fontspec" style="margin-left: 30%;">抵扣金额 : ¥{{priceValue[1] / 10 /10}}
 		</view>
 		<view class="width90 alicntend">
 			<view class="width30 font16 fcor666 alijusstart">
-				<image mode="widthFix" src="../../static/index1.png" class="iconw25 marglerig"></image> 积分抵扣
+				积分抵扣
 			</view>
 			<view class="cj-slider">
 				<view class="flleft fotct font14 fcor666" style="width: 15%;">0</view>
-				<cj-slider style="width: 60%;margin: 0px;" :disabled="cjstu" v-model="priceValue" :min="0" :max="0"
+				<cj-slider style="width: 60%;margin: 0px;" :disabled="cjstu" v-if="isDiscount" v-model="priceValue"
-					:step="100" :blockWidth="40" @start="blockStart" @moving="blockMoving" @end="blockEnd" />
+					:min="0" :max="20000" :step="100" :blockWidth="40" @start="blockStart" @moving="blockMoving"
-				<view class="flright fotrt font14 fcor666" style="width: 25%;">0</view>
+					@end="blockEnd" />
+				<view class="flright fotrt font14 fcor666" style="width: 25%;">20000</view>
 			</view>
 		</view>
-		<view class="width90 line1 mart10 marb5"></view>
+		<view class="width90 line1 mart15 marb5"></view>
 
 		<!-- 优惠券抵扣 -->
 		<view class="height50 width100 backcorfff" @click="showPopup()">
 			<view class="width50 flleft fcor666 font16 alijusstart" style="padding-left: 5%;">
-				<image mode="widthFix" src="../../static/index2.png" class="iconw25 marglerig"></image> 优惠券抵扣
+				优惠券抵扣
 			</view>
 			<!-- <view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
 					style="align-items: center;" v-if="deductionPrice == 0">
@@ -39,7 +50,7 @@
 				<image style="width: 40rpx;height: 40rpx;" src="../../static/jt.png"></image>
 			</view>
 		</view>
-		<view class="width90 line1 mart5 marb5"></view>
+		<view class="width90 line1 mart10 marb5"></view>
 		<!-- //待支付 -->
 		<view class="height50 width100 backcorfff">
 			<view class="width50 flleft fcor666 font16 alijusstart" style="padding-left: 5%;">
@@ -101,12 +112,16 @@
 	import cjSlider from '../../components/cj-slider/cj-slider.vue';
 	import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
 	import {
-		getQrCodeDetail
+		getQrCodeDetail,
+		getAccessToken,
+		createJSAPIOrder,
+		jsapiPay
 	} from '../../Utils/Api.js';
 	// #ifdef H5
 	var jweixin = require('jweixin-module');
 	// var unipay = require('uni-pay');
 	// #endif
+	let app = getApp();
 	export default {
 		components: {
 			passwordInput,
@@ -121,7 +136,7 @@
 				discountPrice: 0, //优惠金额
 				payPrice: 0, //支付金额
 				reNum: 0, // 是否重复
-				priceValue: [0, 0], // 可以指定默认值
+				priceValue: [0, 20000], // 可以指定默认值
 				discountList: [], //优惠券数据
 				memDiscountId: [], //选择中的值
 				numKeybordList: [
@@ -135,7 +150,9 @@
 					default: false
 				},
 				cjstu: true, //禁止拖动
-				suNo: '' //sn号
+				suNo: '', //sn号
+				storeList: '', //门店信息
+				isDiscount: true,
 			}
 		},
 		mounted() {
@@ -144,11 +161,32 @@
 		onLoad: function() {
 			var arr1 = window.location.href;
 			var arr2 = arr1.split('=');
-			var arr3 = arr2[1].split('#/');
+			if (arr2[1].length == 12) {
-			if (arr3[0]) {
+				var arr3 = arr2[1].split('#/');
-				this.suNo = arr3[0];
+				app.globalData.snNo = arr3[0];
-				this.getQrCodeDetail();
+				uni.setStorage({
+					key: "snNumber",
+					data: arr3[0]
+				})
+				this.jumpWeb();
+			} else {
+				var arr4 = arr2[1].split('&');
+				app.globalData.code = arr4[0];
+				let that = this;
+				uni.getStorage({
+					key: 'snNumber',
+					success(e) {
+						app.globalData.snNo = e.data;
+						that.getQrCodeDetail();
+					}
+				})
+			}
+			if (app.globalData.code) {
+				this.getAccessToken();
 			}
+			// if (app.globalData.snNo) {
+			// 	this.getQrCodeDetail();
+			// }
 		},
 		computed: {
 			//获取输入金额值
@@ -169,13 +207,28 @@
 
 		},
 		methods: {
+			//H5 获取openId
+			getAccessToken(item) {
+				let params = {
+					code: app.globalData.code
+				}
+				getAccessToken(params).then(res => {
+					if (res.return_code == '000000' && res.return_data.openid) {
+						app.globalData.openId = res.return_data.openid;
+					} else {
+						this.jumpWeb();
+					}
+				});
+			},
 			//查询门店详情
 			getQrCodeDetail() {
 				let datas = {
-					serialNumber: this.suNo
+					serialNumber: app.globalData.snNo
 				}
 				getQrCodeDetail(datas).then(res => {
-					if (res.return_code == '000000') {}
+					if (res.return_code == '000000') {
+						this.storeList = res.return_data.qrCode
+					}
 				})
 			},
 			//显示弹出
@@ -185,9 +238,20 @@
 			//选择优惠券
 			radioChanges(item) {
 
+			},
+			//重定向方法
+			jumpWeb() {
+				var userAgent = navigator.userAgent.toLowerCase();
+				if (userAgent.match(/Alipay/i) == "alipay") {
+
+				} else if (userAgent.match(/MicroMessenger/i) == "micromessenger") {
+					location.href =
+						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fpaycs.dctpay.com%2FscanPay%2Findex.html%23%2F&response_type=code&scope=snsapi_base&#wechat_redirect';
+				}
 			},
 			//提交支付
 			confirm() {
+
 				let lenth = this.plateNumberList.length - 1;
 				// if (!this.payPrice) {
 				// 	uni.showToast({
@@ -225,14 +289,59 @@
 				}
 				var userAgent = navigator.userAgent.toLowerCase();
 				if (userAgent.match(/Alipay/i) == "alipay") {
-					alert("支付宝浏览器");
+					this.createJSAPIOrder('ALIPAY');
 				} else if (userAgent.match(/MicroMessenger/i) == "micromessenger") {
-					alert("微信浏览器");
+					this.createJSAPIOrder('WECHAT');
 				}
 			},
+			// 创建订单
+			createJSAPIOrder(item) {
+				// "微信：WECHAT  支付宝：ALIPAY   银联：UQRCODEPAY",
+				let datas = {
+					"qrCodeSN": app.globalData.snNo,
+					"payUserId": app.globalData.openId,
+					"payMode": item,
+					"totalAmount": this.payPrice
+				}
+				createJSAPIOrder(datas).then(res => {
+					if (res.return_code == '000000') {
+						this.jsapiPay(res.return_data.outTradeNo);
+					} else {
+						uni.showToast({
+							title: res.return_msg,
+							duration: 2000,
+							icon: 'none'
+						})
+					}
+				})
+			},
+			//唤起支付参数
+			jsapiPay(item) {
+				let datas = {
+					outTradeNo: item
+				}
+				jsapiPay(datas).then(res => {
+					if (res.return_code == '000000') {
+						this.payRequest(res.return_data.payParam.acc_resp_fields);
+					} else {
+						uni.showToast({
+							title: res.return_msg,
+							duration: 2000,
+							icon: 'none'
+						})
+					}
+				})
+			},
 			//删除金额
 			deleteVal() {
 				this.plateNumberList.pop();
+				this.priceValue[1] = 0;
+				this.reload();
+			},
+			//刷新组件
+			reload() {
+				this.isDiscount = false;
+				this.$nextTick(() => (this.isDiscount = true))
 			},
 			blockStart() {
 				if (this.payPrice > 0) {
@@ -282,10 +391,10 @@
 				})
 				jweixin.config({
 					// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-					appId: self.return_data.appId, // 必填，公众号的唯一标识
+					appId: self.app_id, // 必填，公众号的唯一标识
-					timestamp: self.return_data.timeStamp, // 必填，生成签名的时间戳
+					timestamp: self.time_stamp, // 必填，生成签名的时间戳
-					nonceStr: self.return_data.nonceStr, // 必填，生成签名的随机串
+					nonceStr: self.nonce_str, // 必填，生成签名的随机串
-					signature: self.return_data.sign, // 必填，签名，见附录1
+					signature: self.sign_type, // 必填，签名，见附录1
 					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
 				});
 				uni.hideLoading();
@@ -296,14 +405,14 @@
 						fail: function(res) {}
 					});
 					jweixin.chooseWXPay({
-						appId: self.return_data.appId,
+						appId: self.app_id,
-						timestamp: self.return_data
+						timestamp: self
-							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+						.time_stamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
-						nonceStr: self.return_data.nonceStr, // 支付签名随机串，不长于 32 位
+						nonceStr: self.nonce_str, // 支付签名随机串，不长于 32 位
-						package: self.return_data
+						package: self
 							.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
-						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
+						signType: self.sign_type, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
-						paySign: self.return_data.sign, // 支付签名
+						paySign: self.pay_sign, // 支付签名
 						success: function(res) {
 							// 支付成功后的回调函数
 							uni.showToast({