Scan-Pay-H5/pages/index/index.vue

<template>
	<view>
		<view class="width100 height220 backcor008">
			<view class="paddtop40 font24 fcorfff fotct fontlet">商户名称</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="fotct mart20 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"
					:step="100" :blockWidth="40" @start="blockStart" @moving="blockMoving" @end="blockEnd" />
				<view class="flright fotrt font14 fcor666" style="width: 25%;">0</view>
			</view>
		</view>
		<view class="width90 line1 mart10 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">
					未使用
					<image style="width: 40rpx;height: 40rpx;" src="../../static/img/jt.png"></image>
				</view> -->
			<view class="width40 flright fotrt paddtright15 font15 fcor666 alijun" style="align-items: center;">
				暂无优惠券
				<image style="width: 40rpx;height: 40rpx;" src="../../static/jt.png"></image>
			</view>
		</view>
		<view class="width90 line1 mart5 marb5"></view>
		<!-- //待支付 -->
		<view class="height50 width100 backcorfff">
			<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">
						未使用
						<image style="width: 40rpx;height: 40rpx;" src="../../static/img/jt.png"></image>
					</view> -->
			<view class="width40 flright fotrt paddtright15 font20 fcoreb5 alijusend" style="align-items: center;">
				¥ {{payPrice}}
			</view>
		</view>
		<view class="width90 line1 mart5 marb5"></view>
		<!-- //键盘 -->
		<view class="numkeyboard">
			<view class="num-area">
				<view class="row" v-for="(item,index) in numKeybordList" :key="index">
					<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
						v-for="(ite,idx) in item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
						:key="idx" @tap="input(ite)">{{ite}}</view>
				</view>
			</view>
			<view class="btn-area">
				<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
					@tap="deleteVal">
					删除
				</view>
				<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
					@tap="confirm">
					完成
				</view>
			</view>
		</view>

		<!-- 优惠券弹窗 scrollY="true"  -->
		<wybPopup ref="popup" type="bottom" width="500" radius="6" :showCloseIcon="true">
			<view class="fotct font18 fontwig6 fcor333 mart10 height30">优惠券选择</view>
			<view v-if="discountList == ''" class="mart60 fotct font14 fcor666">
				<image mode="widthFix" style="width: 50vw;" src="../../static/noorder.png"></image>
			</view>
			<view class="width90 height40 tccs mart10 couts" v-for="(items, index) in discountList" :key="items"
				@click="radioChanges(items)">
				<view class="margle20">
					<view class="yhprice">
						<radio :checked="items.id ==  memDiscountId.indexOf(items.id)" color="#0083f5" />
					</view>
					<view class="font16 fontwig6 fcor333 text1">{{item.name}}</view>
				</view>
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import passwordInput from "../../components/password-input/password-input.vue";
	import cjSlider from '../../components/cj-slider/cj-slider.vue';
	import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
	import {
		getQrCodeDetail
	} from '../../Utils/Api.js';
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// var unipay = require('uni-pay');
	// #endif
	export default {
		components: {
			passwordInput,
			cjSlider,
			wybPopup
		},
		data() {
			return {
				plateNumberList: [],
				length: 4,
				inputPrice: '', //输入金额
				discountPrice: 0, //优惠金额
				payPrice: 0, //支付金额
				reNum: 0, // 是否重复
				priceValue: [0, 0], // 可以指定默认值
				discountList: [], //优惠券数据
				memDiscountId: [], //选择中的值
				numKeybordList: [
					[1, 2, 3],
					[4, 5, 6],
					[7, 8, 9],
					[0, '.']
				], //键盘数据
				disableDot: { //数字键盘是否禁止点击.仅type为number生效
					type: Boolean,
					default: false
				},
				cjstu: true, //禁止拖动
				suNo: '' //sn号
			}
		},
		mounted() {
			// this.openKeyBoard('number');
		},
		onLoad: function() {
			var arr1 = window.location.href;
			var arr2 = arr1.split('=');
			var arr3 = arr2[1].split('#/');
			if (arr3[0]) {
				this.suNo = arr3[0];
				this.getQrCodeDetail();
			}
		},
		computed: {
			//获取输入金额值
			plateNumberStr() {
				let str = '';
				this.plateNumberList.forEach(item => {
					str += item.toString();
				})
				this.payPrice = str - (this.priceValue[1] / 10 / 10);
				if (this.payPrice > 0) {
					this.cjstu = false;
				} else {
					this.payPrice = 0;
					this.priceValue = [0, 0];
				}
				return str;
			},

		},
		methods: {
			//查询门店详情
			getQrCodeDetail() {
				let datas = {
					serialNumber: this.suNo
				}
				getQrCodeDetail(datas).then(res => {
					if (res.return_code == '000000') {}
				})
			},
			//显示弹出
			showPopup() {
				this.$refs.popup.show();
			},
			//选择优惠券
			radioChanges(item) {

			},
			//提交支付
			confirm() {
				let lenth = this.plateNumberList.length - 1;
				// if (!this.payPrice) {
				// 	uni.showToast({
				// 		title: '请输入支付金额',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				if (this.plateNumberList[lenth] == '.') {
					uni.showToast({
						title: '请输入正确的支付金额',
						duration: 2000,
						icon: 'none'
					})
					this.payPrice = 0;
					this.plateNumberList = [];
					return;
				}
				var n = String(this.payPrice)
				var t = n.charAt(0)
				// 必须保证第一个为数字而不是.
				n = n.replace(/^\./g, '')
				// 保证只有出现一个.而没有多个.
				n = n.replace(/\.{2,}/g, '.')
				if (n == 0) {
					uni.showToast({
						title: '请输入正确的支付金额',
						duration: 2000,
						icon: 'none'
					})
					this.payPrice = 0;
					this.plateNumberList = [];
					return;
				}
				var userAgent = navigator.userAgent.toLowerCase();
				if (userAgent.match(/Alipay/i) == "alipay") {
					alert("支付宝浏览器");
				} else if (userAgent.match(/MicroMessenger/i) == "micromessenger") {
					alert("微信浏览器");
				}
			},
			//删除金额
			deleteVal() {
				this.plateNumberList.pop();
			},
			blockStart() {
				if (this.payPrice > 0) {
					this.cjstu = false;
				} else {
					this.payPrice = 0;
					this.priceValue = [0, 0];
					uni.showToast({
						title: '请输入金额再使用积分抵扣',
						duration: 2000,
						icon: 'none'
					})
					this.cjstu = true;
				}
			},
			blockMoving() {
				// console.log('正在滑动中')
			},
			blockEnd() {
				// console.log('滑动结束')
			},
			//输入金额
			input(val) {
				if (this.plateNumberList[0] == '.') {
					uni.showToast({
						title: '请输入正确的金额',
						duration: 2000,
						icon: 'none'
					})
					return;
				}

				if (this.plateNumberList.length >= this.length) {
					uni.showToast({
						title: '输入金额不能超过最大值',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				this.plateNumberList.push(val);
			},
			//微笑支付
			payRequest: function(self) {
				uni.showLoading({
					title: '支付中...'
				})
				jweixin.config({
					// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: self.return_data.appId, // 必填，公众号的唯一标识
					timestamp: self.return_data.timeStamp, // 必填，生成签名的时间戳
					nonceStr: self.return_data.nonceStr, // 必填，生成签名的随机串
					signature: self.return_data.sign, // 必填，签名，见附录1
					jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
				uni.hideLoading();
				jweixin.ready(function() {
					jweixin.checkJsApi({
						jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
						success: function(res) {},
						fail: function(res) {}
					});
					jweixin.chooseWXPay({
						appId: self.return_data.appId,
						timestamp: self.return_data
							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: self.return_data.nonceStr, // 支付签名随机串，不长于 32 位
						package: self.return_data
							.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: self.return_data.sign, // 支付签名
						success: function(res) {
							// 支付成功后的回调函数
							uni.showToast({
								title: '支付成功'
							})
						},
						cancel: function(r) {},
						fail: function(res) {}
					});
				});

				jweixin.error(function(res) {
					uni.showToast({
						icon: 'none',
						title: '支付失败了',
						duration: 4000
					});
				});
			},
			//支付宝支付
			unialiPay() {
				// const unipayIns = this.unipay.initAlipay({
				//   appId: 'your appId',
				//   mchId: 'your mchId',
				//   privateKey: 'your privateKey',
				//   // 如果不使用证书（普通公钥模式）需要alipayPublicKey
				//   alipayPublicKey: 'you alipayPublicKey', // 使用支付时需传递此值做返回结果验签
				//   // 如果使用证书需要传alipayRootCertPath、appCertPath、alipayPublicCertPath
				//   alipayRootCertPath: path.join(__dirname,'../fixtures/alipayRootCert.crt'),
				//   appCertPath: path.join(__dirname,'../fixtures/appCertPublicKey.crt'),
				//   alipayPublicCertPath: path.join(__dirname,'../fixtures/alipayCertPublicKey_RSA2.crt'),
				// })
			}
		},

	}
</script>

<style lang="scss">
	.idcard {
		padding-top: 40rpx;
		text-align: center;
	}

	.cj-slider {
		width: 70%;
		align-items: center;
		display: flex;
	}

	.yhprice {
		width: 20%;
		height: 25px;
		text-align: right;
		float: right;
	}

	.couts {
		border: 1px solid #f6f6f6;
	}

	.btn {
		color: #FFFFFF;
		background-color: #0083f5;
		width: 84%;
		margin-left: 8%;
		margin-top: 200rpx;
		margin-bottom: 50rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 40rpx;
		letter-spacing: 5px;
	}

	.numkeyboard {
		height: 432rpx;
		display: flex;
		background-color: #ebedf0;
		position: absolute;
		width: 100%;
		bottom: 0px;

		.btn-area {
			width: 180rpx;
			height: 100%;
			display: flex;
			flex-direction: column;

			.item {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-grow: 1;
			}

			.del {
				background-color: #ebedf0;
				color: #333;

				&.active {
					background-color: #f1f3f5;
				}
			}

			.confirem {
				background-color: #1989fa;
				color: #FFFFFF;

				&.active {
					background-color: #0570db;
				}
			}
		}

		.num-area {
			flex-grow: 1;
			display: flex;
			flex-wrap: wrap;

			.row {
				width: 100%;
				height: 25%;
				display: flex;
				margin-top: 1px;

				.item {
					flex-grow: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #FFFFFF;
					border-right: 1px solid #ebedf0;
					width: 33.33%;

					&.active {
						background-color: #ebedf0;
					}

					&.z {
						flex-grow: 2;
						width: 66.66%;
					}

					&.disabled {
						background: #FFFFFF;
						color: #B9B9B9;
					}
				}
			}

		}
	}
</style>