tourGuide/subPackages/clockIn/index.vue

<template>
	<view class="bg">
		<view>
			<view class="detail-container">
				<view class="box-title">
					<text>{{item.guide_name}}的审批打卡</text>
					<text :class="['status'+item.status]">{{status[item.status]}}</text>
				</view>
				<view class="item">
					<view class="title">审批编号:</view>
					<view class="subtitle">{{item.id}}</view>
				</view>
				<view class="item">
					<view class="title">提交时间:</view>
					<view class="subtitle">{{item.create_time}}</view>
				</view>
				<view class="item">
					<view class="title">打卡日期:</view>
					<view class="subtitle">{{item.date}}</view>
				</view>
				
				<!-- <view class="item">
					<view class="title">打卡时段:</view>
					<view class="subtitle">{{item.goods_title}}</view>
				</view> -->
				<view class="item">
					<view class="title">打卡事由:</view>
					<view class="subtitle">{{item.reason}}</view>
				</view>
			</view>
			<view class="detail-container">
				<view class="box-title">
					<text>审批流程</text>
					<text></text>
				</view>
				<view class="item">
					<view class="title">审批人:</view>
					<view class="subtitle">张大庄（{{status[item.status]}}）</view>
				</view>
			</view>
			
		</view>
		
		<view class="btn-tao" @click="submit" v-if="item.status===0">撤销</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				item: {},
				status:{
					0:'审批中',
					1:'打卡正常',
					2:'审批拒绝',
					3:'审批取消'
				}
			}
		},
		onLoad(option) {
			if(option.id) {
				this.id = option.id
				this.getDetail(option.id)
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		},
		methods: {
			getDetail(id) {
				this.Post({clock_id: id},'/api/Merchants/getGuideClockDetails').then(res => {
					this.item = res.data
					if (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo')).token) this.item.guide_name = JSON.parse(uni.getStorageSync('userInfo')).nickname
					else if (store.state.user.userInfo.nickname) this.item.guide_name = store.state.user.userInfo.nickname
				})
			},
			submit () {
				// 撤销
				this.Post({clock_id: this.id},'/api/Merchants/cancelGuideClockExamine').then(res => {
					uni.showToast({
						title:'撤销成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					})
				})
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #F5F5F5;
		min-height: calc(100vh - 44px - env(safe-area-inset-top)) ;
		padding: 0rpx 26rpx 50rpx;
	}
	
	.detail-container {
		padding: 33rpx 0rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		margin-top: 30rpx;
		
		.box-title {
			font-weight: bold;
			font-size: 35rpx;
			color: #111111;
			padding: 0 27rpx 33rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			
			.status0{
				font-weight: bold;
				font-size: 28rpx;
				color: #96684F;
			}
			.status1{
				font-weight: bold;
				font-size: 28rpx;
				color: #47C24F;
			}
			.status2{
				font-weight: bold;
				font-size: 28rpx;
				color: #F56C6C;
			}
			.status3{
				font-weight: bold;
				font-size: 28rpx;
				color: #F56C6C;
			}
		}
		
		.item {
			margin-top: 20rpx;
			padding: 0rpx 27rpx;
			display: flex;
			color: #111111;
			
			.title {
				min-width: 120rpx;
				font-weight: 500;
				font-size: 28rpx;
				flex-shrink: 0;
				padding-right: 20rpx;
			}
			
			.subtitle {
				font-weight: 500;
				font-size: 28rpx;
			}
		}
	}
	
	.empty-text {
		font-weight: 500;
		font-size: 25rpx;
		color: #646464;
		text-align: center;
		margin: 50rpx 0;
	}
	
	.btn-tao {
		text-align: center;
		font-size: 30rpx;
		width: 697rpx;
		height: 80rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
		color: #96684F;
		position: absolute;
		bottom: 50rpx;
		border: 1px solid #96684F;
	}
</style>