guosen-ldt-mall/pages/shopAudit/comps/card.vue

<template>
	<view>
		<view @click="detail(item.id)" class="card" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="title center">
					<image :src="item.cover" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<view class="detail">
					<view class="">
						<text>查看详情</text>
						<text class="cuIcon-right margin-left-10"></text>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="">
					<text class="label">申请人：</text>
					<text class="value">{{item.personName}}</text>
				</view>
				<view class="padding-top-20">
					<text class="label">时间：</text>
					<text class="value">{{item.createTime}}</text>
				</view>
			</view>

			<view class="bottom" v-if="item.auditStatus==0">
				<view @click.stop="pass(item)" class="cu-btn round pass-btn sm"
					style="width: 140rpx;height: 50rpx;font-size: 28rpx;">
					通过
				</view>
				<view @click.stop="fail(item)" class="cu-btn round refuse-btn sm"
					style="width: 140rpx;margin-left: 30rpx;height: 50rpx;font-size: 28rpx;">
					拒绝
				</view>
			</view>
			
			<view class="icon" v-else>
				<image style="width: 96rpx" mode="widthFix" v-if="item.auditStatus.includes('WAITING')" src="../../../static/icon/await.png"></image>
				<image style="width: 96rpx" mode="widthFix" v-if="item.auditStatus=='PASS'" src="../../../static/icon/pass.png"></image>
				<image style="width: 96rpx" mode="widthFix" v-if="item.auditStatus=='FAIL'" src="../../../static/icon/refuse.png"></image>
				<image style="width: 96rpx" mode="widthFix" v-if="item.auditStatus=='STOP'" src="../../../static/icon/stop.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array
		},
		data() {
			return {

			}
		},
		methods: {
			pass(item) {
				this.$emit('pass', item)
			},
			fail(item) {
				this.$emit('fail', item)
			},
			detail(id){
				uni.navigateTo({
					url:"/pages/shopAudit/detail/detail?id="+id,
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pass-btn {
		background-color: #EF9944;
		color: #FFFFFF;
	}

	.refuse-btn {
		background-color: #FFFFFF;
		color: #EF9944;
		border: 1rpx solid #EF9944;
	}

	.card {
		border-radius: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding: 30rpx 36rpx;
		margin: 20rpx 0;
		position: relative;

		.top {
			display: flex;
			justify-content: space-between;

			.title {
				color: #252525;
				display: flex;
				font-size: 34rpx;
				font-weight: 800;

				image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}
			}

			.detail {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				color: #999999;
				font-size: 26rpx;
			}
		}

		.content {
			margin: 30rpx 20rpx 20rpx;

			.label {
				font-size: 28rpx;
				color: #999999;
			}

			.value {
				color: #252525;
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
		}
		
		.icon{
			position: absolute;
			bottom: 20rpx;
			right: 40rpx;
			image{
				width: 96rpx;
				height: 84rpx;
			}
		}
	}
</style>