xiyi/pages/order/upPj.vue

<template>
	<view class="center">
		<view class="upload" >
			<view class="upload-title">上传支付截图</view>
			
			<view class="upload-main" v-for="(item,index) in pjList">
				<image v-if="!item" class="upload-image" src="../../static/img/add.png" mode="" @click="upimg(index)"></image>
				<image v-else :src="item" mode="" class="upload-image" @click="upimg(index)"></image>
			</view>
		</view>
		<view class="bottom flex">
			<view class="btn" @click="goUp()">立即上传</view>
		</view>
	</view>
</template>

<script>
	import { upload,upPj,wuyouUpPj } from '@/api/order.js';
	import {
		getCardInfo,
		upEvaluation
	} from '@/api/zero.js'
	export default {
		data() {
			return {
				tabCurrentIndex: 1,
				info: {},
				pz: '',
				pzing: false,
				pjList: [''],
				type: 0
			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
			}
			if(opt.type) {
				this.type = opt.type
			}
		},
		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
				let upup;
				if(this.type == 1) {
					upup = wuyouUpPj
				}else {
					upup = upPj
				}
				upup({
					order_id: this.id,
					auth_up_file: this.pjList.filter(item => item !== '').join(',')
				}).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(index) {
				upload({
					file: '',
					stype: 3
				})
					.then(e => {
						console.log(e,'e')
					this.pjList.splice(index,1,e[0].url)
					if(this.pjList.length < 5) {
						this.pjList.push('')
					}
					console.log(this.pjList)
					})
					.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="scss">
	.center {
		background: #f8f6f6;
		min-height: 100%;
		height: auto;
	}



	

	.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: $base-color;
			border-radius: 20rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 80rpx;
		}
	}
	
	
	
	.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;
			}
		}
	}
</style>