yunhai/pages/zero/pay.vue

<template>
	<view class="center">
		<view class="" style="height: 20rpx;">

		</view>
		<view class="main">
			<view class="main-tip">请向以下账号自行转账（任选一种方式）</view>
			<view class="main-title flex">
				
				<view class="mt-item" @click="change('1')" :class="{ current: tabCurrentIndex === 1 }" v-if="info.bank && info.bank.fullname">
					<view class="mt-font" :class="{ current: tabCurrentIndex === 1 }">银行卡</view>
				</view>
				<view class="mt-item" @click="change('0')" :class="{ current: tabCurrentIndex === 0 }" v-if="info.ali && info.ali.fullname">
					<view class="mt-font" :class="{ current: tabCurrentIndex === 0 }">支付宝</view>
				</view>
				<view class="mt-item" @click="change('2')" :class="{ current: tabCurrentIndex === 2 }" v-if="info.wx && info.wx.fullname">
					<view class="mt-font" :class="{ current: tabCurrentIndex === 2 }">微信</view>
				</view>
			</view>
			<template v-if="tabCurrentIndex == 0 && info.ali && info.ali.fullname">
				
				<view class="tc-item flex">
					<view class="tcitem-name">姓名</view>
					<view class="ali-name">{{info.ali.fullname}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">支付宝账号</view>
					<view class="ali-name">{{info.ali.alino}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">微信收款码</view>
					<image :src="info.ali.qr" mode="" @click="lookImg(info.ali.qr)"></image>
				</view>
			</template>
			<template v-if="tabCurrentIndex == 1 && info.bank && info.bank.fullname">
				<view class="tc-item flex">
					<view class="tcitem-name">姓名</view>
					<view class="ali-name">{{info.bank.fullname}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">开户行</view>
					<view class="ali-name">{{info.bank.bank}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">所属支行</view>
					<view class="ali-name">{{info.bank.subbranch}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">银行卡号</view>
					<view class="ali-name">{{info.bank.bankno}}</view>
				</view>
			</template>
			
			<template v-if="tabCurrentIndex ==2 && info.wx && info.wx.fullname">
				<view class="tc-item flex">
					<view class="tcitem-name">姓名</view>
					<view class="ali-name">{{info.wx.fullname}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">微信账号</view>
					<view class="ali-name">{{info.wx.wxno}}</view>
				</view>
				<view class="tc-item flex">
					<view class="tcitem-name">微信收款码</view>
					<image :src="info.wx.qr" mode="" @click="lookImg(info.wx.qr)"></image>
				</view>
			</template>
		</view>
		<view class="upload">
			<view class="upload-title">上传支付截图</view>
			<view class="upload-main">
				<!-- #ifdef APP -->
				<image v-if="!pz" class="upload-image" src="../../static/img/add.png" mode="" @click="openAuth"></image>
				<image v-else :src="pz" mode="" class="upload-image" @click="openAuth"></image>
				<!-- #endif -->
				<!-- #ifndef APP -->
				<image v-if="!pz" class="upload-image" src="../../static/img/add.png" mode="" @click="upimg"></image>
				<image v-else :src="pz" mode="" class="upload-image" @click="upimg"></image>
				<!-- #endif -->
				<view class="upload-font">点击上传支付截图</view>
			</view>
		</view>
		<view class="bottom flex">
			<view class="btn" @click="goUp()">立即上传</view>
		</view>
		<yk-authpup ref="WRITE_EXTERNAL_STORAGE" type="top" @changeAuth="changeAuth"
		    permissionID="WRITE_EXTERNAL_STORAGE"></yk-authpup>
	</view>
</template>

<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import { upload } from '@/api/order.js';
	import {
		getCardInfo,
		upEvaluation
	} from '@/api/zero.js'
	export default {
		components: {
			ykAuthpup
		},
		data() {
			return {
				tabCurrentIndex: 1,
				info: {},
				pz: '',
				pzing: false,
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				this.getInfo()
			}
		},
		methods: {
			lookImg(img) {
				let arr = img.split(',')
				uni.previewImage({
					current: 0,
					loop: false,
					urls: arr,
					indicator: 'default'
				});
			},
			//上传凭证
			goUp() {
				if(this.pzing) {
					return
				}
				if(!this.pz) {
					return this.$api.msg('请上传支付截图')
				}
				this.pzing = true
				upEvaluation({
					id: this.id,
					up_files: this.pz
				}).then(res => {
					uni.showToast({
						title:'上传成功',
						duration:2000
					});
					this.pzing = false
					setTimeout(()=> {
						uni.navigateBack()
					},1500)
				}).catch(err => {
					this.pzing = false
				})
			},
			openAuth() {
				this.$refs['WRITE_EXTERNAL_STORAGE'].open()
			},
			changeAuth() {
				this.upimg()
			},
			upimg() {
				upload({
					file: ''
				})
					.then(e => {
						console.log(e,'e')
					this.pz = e[0].url
					console.log(this.pz)
					})
					.catch(e => {});
			},
			getInfo() {
				getCardInfo({
					id: this.id
				}).then(res => {
					// console.log(info)
					this.info = res.data.result
				})
			},
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			nav(url) {
				uni.navigateTo({
					url
				});
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			toBack() {
				uni.navigateBack({});
			},
			change(num) {
				this.tabCurrentIndex = num * 1;
			}
		}
	};
</script>

<style lang="less">
	.center {
		background: #f8f6f6;
		min-height: 100%;
		height: auto;
	}

	.top {
		margin-top: 10rpx;
		background-color: #ffffff;
		padding: 56rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.top-main {
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 1;

			.num {
				font-size: 28rpx;
				font-weight: bold;
				color: #fd3b39;

				text {
					font-size: 50rpx;
				}
			}

			.top-image {
				margin-left: 10rpx;
				width: 26rpx;
				height: 28rpx;
			}
		}

		.downtime {
			margin-top: 20rpx;
		}
	}

	.product {
		margin-top: 20rpx;
		padding: 35rpx 35rpx 40rpx 35rpx;
		background-color: #ffffff;
		justify-content: flex-start;
		align-items: flex-start;

		.product-image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 10rpx;
		}

		.product-info {
			margin-left: 26rpx;
			padding-top: 10rpx;
			line-height: 1;

			.title {
				line-height: 1;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;

				text {
					color: #999999;
				}
			}

			.buyId {
				margin-top: 30rpx;
			}

			.buyName {
				margin-top: 24rpx;
			}

			.buyPhone {
				margin-top: 24rpx;
			}
		}
	}

	.main {
		padding: 30rpx 0 40rpx;
		background: #ffffff;

		.main-tip {
			padding: 0 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
		}

		.main-title {
			padding: 0 30rpx;
			margin-top: 34rpx;
			padding-bottom: 50rpx;
			.current {
				background: #fd3b39 !important;
				color: #ffffff !important;
			}

			.mt-item {
				width: 160rpx;
				height: 60rpx;
				background: #f8f8f8;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.mt-image {
					width: 32rpx;
					height: 32rpx;
				}

				.mt-image1 {
					width: 38rpx;
					height: 32rpx;
				}

				.mt-image2 {
					width: 36rpx;
					height: 32rpx;
				}

				.mt-font {
					margin-left: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}

		.swiper-box {
			width: 100%;
			padding: 14rpx 30rpx 0;

			
		}
	}

	.upload {
		margin-top: 20rpx;
		padding: 34rpx 30rpx 40rpx 30rpx;
		background: #ffffff;

		.upload-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}

		.upload-main {
			padding-top: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.upload-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.upload-font {
				margin-top: 24rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background: #ffffff;
		width: 750rpx;
		height: 146rpx;
		justify-content: center;

		.bottom-item {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.bi-image {
				width: 38rpx;
				height: 34rpx;
			}

			.bottom-font {
				margin-top: 14rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
			}

			.bottom-num {
				line-height: 1;
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.shu {
			margin-left: 20rpx;
			width: 2px;
			height: 74rpx;
			background: #c0bfc0;
		}

		.btn {
			margin-left: 40rpx;
			width: 430rpx;
			height: 80rpx;
			background: #fd3b39;
			border-radius: 20rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 80rpx;
		}
	}
	
	.tc-item {
			padding: 10rpx 0 10rpx 20rpx;
			justify-content: flex-start;
			image {
				width: 200rpx;
				height: 200rpx;
			}
		.tcitem-name {
			width: 200rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #999999;
		}
	
		.ali-name {
			width: 380rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	
		.tcitem-image {
			width: 26rpx;
			height: 28rpx;
		}
	}
</style>