xuan-pay-cweb/pages/index/modifyRate/modifyRate.vue

<template>
	<view>
		<view class="width100 backcorfff">
			<!-- 审核状态回馈 -->
			<view class="width100 height100p" style="background-color: #eb6a53;"
				v-if="modifyDetails && (modifyDetails.status == 2 || modifyDetails.status == 4 || modifyDetails.status == 6)">
				<view class="font18 fcorfff paading10 aliitem"
					v-if="modifyDetails.status == 4 || modifyDetails.status == 6">
					<image src='../../../static/img/error.png' mode="widthFix" class="iconw25 marglerig"></image>审核驳回
				</view>
				<view class="font14 fcorfff paading10" v-if="modifyDetails.status == 4 || modifyDetails.status == 6">
					{{modifyDetails.rejectReason}}
				</view>
				<view class="font18 fcorfff paddtop35 fotct"
					v-if="modifyDetails.status == 2 || modifyDetails.status == 5">
					审核中
				</view>
			</view>
			
			<view class="titlename font18 fontwig6 fcor333" v-if="rateCodeList">修改商户费率</view>
			<view class="username" v-for="(item,index) in rateCodeList" :key="index">
				<view class="namecont">{{item.rateTypeName}}</view>
				<input placeholder="请输入" type="digit" v-model="item.ratePct" style="padding-left: 2%;width: 28%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
				<view style="width: 40%;">(单位: 百分之一)</view>
			</view>
		</view>

		<view class="btn" @click="updatemodifyRate()" v-if="!modifyDetails || modifyDetails.status == 4 || modifyDetails.status == 6 || modifyDetails.status == 3">提交审核</view>
	</view>
</template>

<script>
	import {
		getRateByMer,
		editRateApply,
		getNewRateApplyDetail
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				merId: '', //用户id
				rateCodeList: [], //费率字典
				merRateList: [], //提交费率数组
				modifystatus: '' ,//当前状态
				modifyDetails:''//费率详情
			}
		},
		onLoad(options) {
			this.merId = options.id;
			this.getNewRateApplyDetail();
		},
		methods: {
			//查询费率状态
			getNewRateApplyDetail() {
				let datas = {
					merId: this.merId
				}
				getNewRateApplyDetail(datas).then(res => {
					if (res.return_code == '000000' && res.return_data != null) {
						this.modifyDetails = res.return_data;
						this.modifystatus = res.return_data.status;
						if (res.return_data.status == 1 || res.return_data.status == 3 || res.return_data.status ==
							4 || res.return_data.status == 6) {
							this.getRateByMer();
						} else {
							this.rateCodeList = res.return_data.merRateApplyDetailList;
						}
					} else {
						this.getRateByMer();
					}
				})
			},
			//查询费率
			getRateByMer() {
				let datas = {
					merId: this.merId
				}
				getRateByMer(datas).then(res => {
					if (res.return_code == '000000') {
						this.rateCodeList = res.return_data;
					}
				})
			},
			//修改费率
			updatemodifyRate() {
				uni.showModal({
					title: '提交审核',
					content: '确认信息是否正确。',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交审核中...'
							})
							let rateDatas = [];
							for (var i = 0; i < this.rateCodeList.length; i++) {
								if (this.rateCodeList[i].ratePct) {
									let datas = {
										rateTypeCode: this.rateCodeList[i].rateTypeCode,
										ratePct: this.rateCodeList[i].ratePct
									}
									rateDatas.push(datas);
								}
							}
							this.merRateList = rateDatas;
							let datas = {
								"merId": this.merId,
								"rate": this.merRateList
							}
							editRateApply(datas).then(res => {
								uni.hideLoading();
								if (res.return_code == '000000') {
									uni.showToast({
										title: '提交成功',
										icon: 'none',
										duration: 2000
									})
									uni.navigateBack();
								}
							})
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f5f6;
	}

	.titlename {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		padding: 0 45upx;
	}

	.username {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 45upx;

		input {
			width: 50%;
			height: 50upx;
			font-size: 16px;
			color: #333333;
			font-weight: blod;
		}

		.get-code {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 7px;
			z-index: 3;
			border: 1px solid #bfbfbf;
			width: 25%;
			padding: 3px 5px;
			border-radius: 22px;

			&:after {
				content: " ";
				width: 1upx;
				height: 50upx;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}

		.namecont {
			color: #666666;
			width: 28%;
		}
	}

	.btn {
		color: #FFFFFF;
		background-color: #0083f5;
		width: 90%;
		margin-left: 5%;
		margin-top: 80rpx;
		margin-bottom: 50rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 40rpx;
	}
</style>