xuan-pay-cweb/pages/index/open-Divide_accounts/open-Divide_accounts.vue

<template>
	<view>

		<!-- tabs栏 -->
		<view class=" mart10 marb20 alijus">
			<view class="font16 fcor333 paddtop5 paddbotm5  margle20  marRight40" v-for="(item,index) in platformList"
				@click="switchid(item)" :class="[platformType == item.codeValue ? 'fcor089 borbtom fontwig6' : '']"
				:key="index">
				{{item.codeName}}
			</view>
		</view>
		<view class="width100 line1"></view>
		<!-- <view class="width100 line10" v-if="merLedgerApply !=null && merLedgerApply !=''"></view> -->
		<view class="width100 height100p" style="background-color: #eb6a53;"
			v-if="merLedgerApply !=null && merLedgerApply !='' && merLedgerApply.status != 1 && merLedgerApply.status != 4">

			<view class="font18 fcorfff paddtop35 fotct" v-if="merLedgerApply !=null && merLedgerApply.status == 2">
				审核中
			</view>
			<view class="font18 fcorfff paading10 aliitem" v-if="merLedgerApply !=null && merLedgerApply.status == 3">
				<image src="../../../static/img/error.png" mode="widthFix" class="iconw25 marglerig"></image>审核驳回
			</view>
			<view class="font14 fcorfff paading10" v-if="merLedgerApply !=null && merLedgerApply.status == 3">
				{{merLedgerApply.rejectReason}}
			</view>
		</view>

		<view class="username" v-if="platformType == 1">
			<view class="namecont">最低分账比例</view>
			<input placeholder="请输入最低分账比例" v-model="splitLowestRatio" type="digit"
				style="width: 70%;padding-right:10px;text-align: right;"
				placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;padding-right:10px;text-align: right;" />
			%
		</view>

		<view class="notes font16" style="border-bottom: 0px;">
			<view class="width70 aliitem fcor666">
				分账结算委托书
			</view>
			<view class="fcor666 alijusend width30 font14" @click="perImage('../../../static/img/businesslic13.png')">
				查看示例
				<image mode="widthFix" style="width: 12px;" src="../../../static/img/jtg.png"></image>
			</view>
		</view>
		<view class="width94 displ mart5">
			<image mode="widthFix" class="width100" :src="imgUrls+powerofattorney" v-if="powerofattorney"
				@click="upload()">
			</image>
			<image src="../../../static/img/businesslic14.png" mode="widthFix" class="width100" v-else
				@click="upload()"></image>
		</view>

		<view class="btn" @click="submitbtn()"
			v-if="merLedgerApply == '' || merLedgerApply.status == 3 || merLedgerApply.status == 4">提交审核</view>
		<view class="btn" @click="bindMerchants()" v-if="merLedgerApply != '' && merLedgerApply.status == 1">分账接收方
		</view>
		<view class="height60"></view>
	</view>
</template>

<script>
	import {
		getMerLedgerApply,
		merLedgerApply
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {

		data() {
			return {
				splitLowestRatio: '', //最低费率
				powerofattorney: '', //协议委托书
				imgUrls: app.globalData.imgUrl, //图片查看
				reqUrl: app.globalData.url, //请求地址
				merId: '', //商户id
				merLedgerApply: '', //是否开通分账数据
				platformList: [{
					id: 1,
					codeValue: 1,
					codeName: '拉卡拉'
				}, {
					id: 2,
					codeValue: 5,
					codeName: '随行付'
				}],
				platformType: '1', // 渠道ID
				platformName: '拉卡拉', //渠道名称
			}
		},
		onLoad(options) {
			this.merId = options.id;
			this.getMerLedgerApply();
		},
		methods: {
			//查询商户分账详情
			getMerLedgerApply() {
				let datas = {
					merId: this.merId,
					platformType: this.platformType
				}
				getMerLedgerApply(datas).then(res => {
					if (res.return_code == '000000' && res.return_data != null) {
						this.merLedgerApply = res.return_data;
						this.splitLowestRatio = res.return_data.splitLowestRatio;
						this.powerofattorney = res.return_data.splitEntrustFilePath;
					} else {
						this.merLedgerApply = '';
						this.splitLowestRatio = '';
						this.powerofattorney = '';
					}
				})
			},
			//切换id
			switchid(item) {
				this.platformType = item.codeValue;
				this.platformName = item.platformName;
				this.getMerLedgerApply();
			},
			//item 放大图片
			perImage(item) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [item] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//上传图片
			upload() {

				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.uploadFile(tempFilePaths[0]);
					},
					error: function(e) {
						console.log(e);
					}
				});
			},

			//上传
			uploadFile(item) {
				let that = this
				that.translate(item, 0.2, imgURL => {
					const uploadTask = uni.uploadFile({
						url: that.reqUrl + '/fileUpload/uploadBase64File',
						filePath: imgURL,
						header: {
							"Authorization": app.globalData.token
						},
						name: 'file',
						formData: {
							'merId': that.merId,
							'base64File': imgURL
						},
						success: function(uploadFileRes) {
							that.powerofattorney = JSON.parse(uploadFileRes.data).return_data[0];
						}
					});
				})
			},
			/**
			 * H5端图片压缩
			 *  参数说明：
			 *  imgSrc 图片url
			 *  scale缩放比例 0-1
			 *  返回base64
			 *  callback 回调设置返回值 
			 */
			translate(imgSrc, scale, callback) {
				var img = new Image();
				img.src = imgSrc;
				img.onload = function() {
					var that = this;
					var h = that.height; // 默认按比例压缩
					var w = that.width;
					var canvas = document.createElement('canvas');
					var ctx = canvas.getContext('2d');
					var width = document.createAttribute("width");
					width.nodeValue = w;
					var height = document.createAttribute("height");
					height.nodeValue = h;
					canvas.setAttributeNode(width);
					canvas.setAttributeNode(height);
					ctx.drawImage(that, 0, 0, w, h);
					var base64 = canvas.toDataURL('image/jpeg', scale); //压缩比例
					canvas = null;
					callback(base64);
				}
			},
			//提交审核
			submitbtn() {
				if (!this.splitLowestRatio && this.platformType == 1) {
					uni.showToast({
						title: '请输入最低分账比例',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!this.powerofattorney) {
					uni.showToast({
						title: '请上传分账结算委托书',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.platformType == 1) {
					this.splitLowestRatio = '';
				}
				uni.showModal({
					title: '提交审核',
					content: '确认信息是否正确。',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交审核中...'
							})
							let datas = {
								"merId": this.merId,
								"platformType": this.platformType,
								"splitLowestRatio": this.splitLowestRatio,
								"splitEntrustFilePath": this.powerofattorney
							}
							merLedgerApply(datas).then(res => {
								uni.hideLoading();
								if (res.return_code == '000000') {
									uni.showToast({
										title: '提交成功',
										icon: 'none',
										duration: 2000,
										success() {
											setTimeout(() => {
												uni.navigateBack({})
											}, 2000);
										}
									})
								} else {
									uni.showToast({
										title: res.return_msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//绑定商户
			bindMerchants() {
				uni.navigateTo({
					url: '/pages/index/bindMerchants/bindMerchants?id=' + this.merLedgerApply.id +
						'&merId=' + this.merId + '&platformType=' + this.platformType
				})

			},
		}
	}
</script>

<style lang="scss">
	.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;
		}

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

	.borbtom {
		border-bottom: 3px solid #089bf5;
	}

	.btn {
		color: #FFFFFF;
		background-color: #0083f5;
		width: 90%;
		margin-left: 5%;
		margin-top: 150rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 36rpx;
	}

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

	}
</style>