shop-applet/pages/withdrawal/progress.vue

<!-- 银行卡审核进度 -->
<template>
	<view class="shop_type">
		<view class="shop_type-head">
			<view style="height: var(--status-bar-height);"></view>
			<view class="shop-type-navbar">
				<u-icon name="arrow-left" size="18" color="#fff" @click="handleBack" />
				<text class="shop-type-navbar-title">审核</text>
				<text></text>
			</view>
		</view>

		<view class="wrap" v-if="bankList.length > 0">
			<!-- 进度详情 -->
			<view class="shop-type-con-progress" v-for="(item,indx) in bankList" :key="indx">
				<view class="shop-type-con-detail">{{item.is_own === 0?'法人账户':'对公账户'}}进度详情</view>
				<view class="shop-type-con-progress-card">
					<view class="shop-type-con-progress-left">
						<view class="shop-type-con-progress-left-item">
							<u-icon name="checkmark-circle-fill" size="20" color="#40AE36"></u-icon>
						</view>
						<view class="dot"></view>
						<view class="dot"></view>
						<!-- #ifndef H5 -->
						<view class="dot"></view>
						<!-- #endif -->
						<view class="dot"></view>
						<view class="dot"></view>
						<view class="shop-type-con-progress-left-item">
							<u-icon name="checkmark-circle-fill" size="18" color="#999" v-if="item.is_check == 0" />
							<u-icon name="checkmark-circle-fill" size="18" color="#40AE36" v-if="item.is_check == 1" />
							<u-icon name="close-circle-fill" size="20" color="#F55726" v-if="item.is_check == 2" />
						</view>
					</view>
					<view class="shop-type-con-progress-right">
						<view class="apply">
							<view class="shop-type-con-progress-right-name">申请已提交</view>
							<view class="shop-type-con-progress-right-time">{{item.create_time}}</view>
						</view>
						<view
							style="display: flex;justify-content: space-between;align-items: center;margin-bottom:10rpx;">
							<view class="shop-type-con-progress-right-name">
								{{item.is_check == 0?'待审核人员审核':item.is_check==1?'审核通过':'审核未通过'}}
							</view>
							<view class="shop-type-con-progress-right-time"
								v-if="item.is_check == 1 || item.is_check == 2">
								{{item.update_time}}
							</view>
						</view>

						<view class="audit-info" v-if="item.is_check != 0">
							<view style="margin-bottom: 10rpx;">
								审批人：{{item.adminInfo.real_name?item.adminInfo.real_name:item.adminInfo.account?item.adminInfo.account:''}}
							</view>
							<view class="audit-info-txt" v-if="item.is_check == 2">审核不通过：{{item.fail_msg}}</view>
							<view style="text-align: right;color:#46B03A;font-weight: bold;" v-if="item.is_check == 2"
								@click="handleToUpdate(item.id)">
								去修改
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-empty v-else mode="data" text="暂无审批信息~" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		progressBankList
	} from "@/api/user.js";
	export default {
		data() {
			return {
				form: {
					status: 2,
					check_name: '',
					fail_msg: '',
					create_time: ''
				},
				mer_id: '',
				data0: undefined, //法人账户
				data1: undefined, //对共账户
				bankList: []
			}
		},

		onLoad(opt) {
			this.mer_id = opt.mer_id;
			progressBankList(this.mer_id).then(res => {
				this.bankList = res.data.list;
			});
		},

		methods: {
			// 修改
			handleToUpdate(id) {
				uni.redirectTo({
					url: "/pages/withdrawal/add?id=" + id
				})
			},

			handleBack() {
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F8F9FA;
	}

	.shop_type {
		padding-bottom: 184rpx;

		.shop_type-head {
			background-color: #40AE36;
			margin-bottom: 30rpx;

			.shop-type-navbar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				height: 88rpx;

				.shop-type-navbar-title {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.shop-type-con-progress {
		margin: 0 30rpx 30rpx;

		.shop-type-con-detail {
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		.shop-type-con-progress-card {
			display: flex;
			width: 100%;
			padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.shop-type-con-progress-left {
				width: 12%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.dot {
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					background-color: #ccc;
					margin-bottom: 4rpx;
				}

				.shop-type-con-progress-left-item {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
				}
			}

			.shop-type-con-progress-right {
				flex: 1;
				margin-bottom: 40rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				// #ifndef H5
				.apply {
					display: flex;
					margin-bottom: 38rpx;
					justify-content: space-between;
					align-items: center;
				}

				// #endif

				// #ifdef H5
				.apply {
					display: flex;
					margin-bottom: 36rpx;
					justify-content: space-between;
					align-items: center;
				}

				// #endif

				.shop-type-con-progress-right-name {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				.shop-type-con-progress-right-time {
					font-size: 26rpx;
					color: #666666;
				}
			}

			.audit-info {
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
</style>