dangfei-weapp/pages/pay/pay.vue

<template>
	<view class="content">
		<form action="">
			<view class="fixedBox">
				<view class="fixedTitle left">缴纳金额：<text class="smallTitle">实缴{{actualFee()}}元<text v-if="isService=='1'">,手续费{{fumoney}}元</text></text></view>
				<navigator url="/pages/payInfo/payInfo" class="right">
					<text class="fixedTitle2">缴费标准</text>
				</navigator>
			</view>
			<view class="payBox">
				<input
					type="digit"
					class="payInput" 
					v-model="fee"
					maxlength="11"
					placeholder-style="payInputHolder"
					placeholder="请输入计算基数,不小于1900"
					@input="inputPay"
				/>
			</view>
			<view class="flex_center_center">
				<text class="fixedTitle3">* 按月领取工资的人员,每月以工资总额中相对固定的,经常性的工资收入(税后)为计算基数\n</text>
				<text class="fixedTitle3">* 根据郑州市运行规定,计算基数不得低于1900元\n</text>
				<text class="fixedTitle3">* 系统缴费将会收取千分之六的手续费,可手动选择是否缴纳</text>
			</view>
			
			<view class="serviceChargerBox">
				<view class="fixedTitle4">缴纳手续费:</view>
				<radio-group @change="selectService">
					<label class="radiolabel">
						<radio value="1" class="radioBox" checked="checked" />是
					</label>
					<label class="radiolabel">
						<radio value="3" class="radioBox" />否
					</label>
				</radio-group>
			</view>
			
			<picker 
				mode="date"
				:value="date" 
				:start="startDate"
				:end="endDate" 
				@change="bindDateChange"
				fields="month"
			>
				<view class="selectTime">
					<view>选择缴费时间:</view>
					<view class="uni-input afterArrow">{{date}}</view>
				</view>
			</picker>
			
			<button type="primary" class="submitBtn" @click="submitPay">确认缴纳</button>
		</form>
	</view>
</template>

<script>
	
	import {toPay} from "../../api/index.js"
	
	import { mapState } from "vuex"
	
	export default{
		data(){
			const currentDate = this.getDate({
				format: true
			})
			return {
				fee:"1900",
				date: currentDate,
				isService:'1',
				matchPoint:true
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			fumoney(){
				const fee=this.actualFee()
				if(!fee || Number(fee)===0){
					return 0
				}else{
					if(fee*6/1000<0.01){
						return 0.01
					}else{
						return (Math.ceil(fee*6/10)/100).toFixed(2)
					}
				}
			},
			...mapState(["openid"])
		},
		methods:{
			inputPay(){
				if(this.fee){
					let fee=(this.fee.match(/^\d*(\.?\d{0,2})/g)[0])
					this.$nextTick(()=>{
						this.fee=fee
					})
				}
			},
			actualFee(){
				let fee=String(this.fee);
				if(fee.indexOf('.')!=-1 && fee.lastIndexOf('.')!==fee.indexOf('.')){
					return 0;
				}
				fee=Number(fee);
				let actualFee=0;
				if(fee<=3000){
					actualFee=Math.ceil(fee*5)/1000;
				}else if(fee>3000 && fee<=5000){
					actualFee=Math.ceil(fee*1)/100;
				}else if(fee>5000 && fee<=10000){
					actualFee=Math.ceil(fee*1.5)/100;
				}else{
					actualFee=Math.ceil(fee*2)/100;
				}
				return actualFee.toFixed(2);
			},
			selectService(e){
				this.isService=e.detail.value
			},
			bindDateChange(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
	
				if (type === 'start') {
					year = `${year}-01`;
				} else if (type === 'end') {
					year = `${year + 10}-12`;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},
			check(){
				let date=this.date.split("-");
				let year=Number(date[0]);
				let month=Number(date[1]);
				let fee=this.fee;
				if(!fee){
					return {
						status:1,
						msg:'请输入计算基数'
					}
				}else{
					fee=String(fee);
					if(fee.indexOf('.')!=-1 && (fee.lastIndexOf('.')!==fee.indexOf('.'))){
						return {
							status:1,
							msg:'计算基数格式不正确'
						}
					}else{
						fee=Number(fee)
						if( year<2019 || (year==2019 && month<10)){
							this.fee=1000;
							let str= this.isService==='1' ? '（手续费:0.03元）': ''
							return {
								status: 0,
								msg:'根据规定,2019年10月之前,缴费金额统一为5元'+str
							}
						}else{
							if(fee<1900){
								return {
									status: 1,
									msg:'根据郑州市最低工资标准,输入的计算基数不能低于1900元'
								}
							}else{
								return {
									status: 2,
									msg: ''
								}
							}
							
						}
				}
				}
			},
			submitPay(){
				let flag=this.check();
				if(flag.status===0){
					uni.showModal({
						title:'确认缴费金额',
						content: flag.msg,
						success:res=>{
							if (res.confirm) {
								this.pay()
							}
						}
					})
				}else if(flag.status===1){
					uni.showToast({
						title:flag.msg,
						icon:"none",
						duration: 2500
					})
				}else{
					this.pay()
				}
			},
			pay(){
				if(!this.matchPoint){
					return false;
				}
				this.matchPoint = false
				const that=this
				toPay({
					month:that.date,
					fee:that.fee,
					openid:that.openid,
					is_v:that.isService
				}).then(result=>{
					this.matchPoint = true
					if(result.error_code===200){
						const payInfo=result.data
						// 调起小程序支付
						uni.requestPayment({
							provider:"weixin",
							timeStamp:payInfo.timestamp,
							nonceStr:payInfo.nonceStr,
							package:payInfo.package,
							signType:payInfo.signType,
							paySign:payInfo.paySign,
							success:function(p_res){
								that.fee=that.fee
								uni.showToast({
									title:"支付成功",
									icon:"success",
									duration: 2500
								})
							},
							fail:function(err){
								uni.showToast({
									title:"支付失败",
									icon:"none",
									duration: 2500
								})
							}
						})
					}else{
						uni.showToast({
							title:"获取支付信息失败",
							icon:"none",
							duration: 2500
						})
					}
				}).catch(e=>{
					this.matchPoint = true
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: $uni-bg-color-normal;
	}
	.content{
		padding: 64rpx 30rpx 0 48rpx;
	}
	.fixedBox{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		
		.left{
			width: calc(100% - 150rpx);
		}
		.right{
			width: 150rpx;
		}
	}
	.fixedTitle{
		color: #4D4D4D;
		font-size: 34rpx;
	}
	.fixedTitle2{
		font-size: 32rpx;
		color: #2E8BFC;
	}
	.payInput{
		border: 1px solid #999999;
		height: 76rpx;
		line-height: 76rpx;
		width: calc(100% - 53rpx - 82rpx);
		border-radius: 3px;
		margin: 51rpx 53rpx 36rpx 0;
		font-size: 26rpx;
		padding: 0 41rpx;
	}
	.payInputHolder{
		color: #DDDDDD;
	}
	.fixedTitle3{
		color: #FE7444;
		font-size: 24rpx;
		text-align: left;
		display: block;
		line-height: 45rpx;
	}
	.flex_center_center{
		margin-bottom:30rpx;
		text-align: center;
	}
	.submitBtn{
		width: 432rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin: 0 auto;
		background: #2E8BFC !important;
		font-size: 32rpx;
	}
	.selectTime{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 62rpx;
		font-size: 32rpx;
		color: #4D4D4D;
		height: 100rpx;
	}
	.afterArrow{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.afterArrow::after{
		content: "";
		display:block;
		width: 30rpx;
		height: 30rpx;
		background: url(../../static/arrow_right_2.png);
		background-size: 100% 100%;
	}
	.timeBox{
		height: 300rpx;
	}
	.serviceChargerBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #4D4D4D;
		height: 76rpx;
		line-height: 76rpx;
	}
	.radioBox{
		transform:scale(0.7);
	}
	.radiolabel:nth-of-type(1){
		margin-right: 20rpx;
	}
	.smallTitle{
		font-size: 24rpx;
	}
</style>