clsd/app/components/voucher/voucher.vue

<template>
	<view v-if="show">
		<u-popup :show="show" round="15" mode="center" :closeable="true" :customStyle="{ width: '95%' }" @close="show = false">
			<view class="popup">
				<u-divider text="上传凭证(最多3张)"></u-divider>
				<view class="bbg">
					<images v-model="item.voucher" :read="item.audit == 2"></images>
				</view>
				<view class="tips" v-if="item.audit == 1">
					<text class="icon">&#xe600;</text>
					<text>等待企业方确认凭证</text>
				</view>
				<view class="tips" v-if="item.audit == 3">
					<text class="icon">&#xe600;</text>
					<text>审核不通过：{{ item.msg }}</text>
				</view>
				<button class="btn" @click="add()" v-if="item.audit != 2">{{ item.audit == 3 ? '重新上传' : '立即提交' }}</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'voucher',
	data() {
		return {
			show: false,
			item: { voucher: [] }
		};
	},
	methods: {
		init(data) {
			this.show = true;
			this.item = data;
			this.item.voucher = this.item.voucher ? this.item.voucher.split(',') : [];
		},
		add() {
			this.http.request({
				url: '/app/packages/voucher',
				data: { id: this.item.id, voucher: this.item.voucher.toString() },
				method: 'POST',
				success: (res) => {
					uni.showModal({
						title: '提示',
						content: '提交成功',
						showCancel: false,
						success: (res) => {
							this.show = false;
							this.$emit('success');
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.tips {
	border-radius: 5px;
	margin-top: 15px;
}
.btn {
	margin-top: 20px;
}
</style>