SmartCulturalTourismManageUniapp/pages/detail/detail.vue

<template>
    <view class="waper">
		<u-navbar :autoBack="true" :placeholder="true" bgColor="#FFF">
			<view slot='center' style="font-size: 36rpx; font-weight: bold;">
				核销成功
			</view>
		</u-navbar>
		<view class="card1">
			<view class="top-box">
				<u-icon name="checkmark-circle-fill" color="#34b414"></u-icon>
				<view class="label">完成核销</view>
			</view>
			<view class="bottom-box">
				<!-- <view class="row">
					<view class="key">核销总金额</view>
					<view class="value">¥160.00</view>
				</view> -->
				<view class="row">
					<view class="key">商品名称</view>
					<view class="value">{{detData.ticketName}}</view>
				</view>
				<!-- <view class="row">
					<view class="key">核销门店</view>
					<view class="value">在这里核销的</view>
				</view> -->
				<view class="row">
					<view class="key">核销码</view>
					<view class="value">{{detData.verificationCode || '-'}}</view>
				</view>
				<view class="row">
					<view class="key">游客姓名</view>
					<view class="value">{{detData.usedUserId == 0 ? (detData.userName ? detData.userName : '窗口售票') : detData.userName}}</view>
				</view>
				<view class="row" v-if="detData.usedUserId != 0">
					<view class="key">手机号</view>
					<view class="value">{{detData.mobile}}</view>
				</view>
				<view class="row" v-if="detData.usedUserId != 0">
					<view class="key">身份证</view>
					<view class="value">{{detData.idCard}}</view>
				</view>
				<view class="row">
					<view class="key">核销时间</view>
					<view class="value">{{detData.updateTime}}</view>
				</view>
				<view class="row">
					<view class="key">核销次/张数</view>
					<view class="value">{{detData.verificationNum}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="card2">
			<view class="con-box">
				<image class="img" :src="$utils.getJointImg(detData.scenicImage)" mode=""></image>
				<view class="con-right">
					<view class="title">{{detData.scenicName}}</view>
					<view class="num">游客姓名：{{detData.userName }}</view>
					<view class="price">手机号：{{detData.mobile}}</view>
				</view>
			</view>
			<view class="time">核销时间：{{detData.updateTime}}</view>
			<view class="remark">备注：<text class="status">核销成功</text></view>
		</view> -->
    </view>
</template>

<script>
export default {
	data() {
		return {
			detData: {}
		}
	},
	onLoad(options) {
		this.verificationDetail(options.id)
	},
    methods: {
        async verificationDetail (id) {
            let obj = { id: id };
            let info = await this.$http.verificationDetail(obj);
			this.detData = info.data
        },
    }
}
</script>

<style lang="scss">
.waper{
    width: 100%;
	min-height: 100vh;
	background-color: #F9F9F9;
	.card1 {
		margin: 32rpx 32rpx 0;
		background: #FFFFFF;
		padding: 32rpx;
		.top-box {
			text-align: center;
			padding: 86rpx 0 48rpx;
			border-bottom: 1rpx solid rgba(0,0,0,0.1);
			/deep/.uicon-checkmark-circle-fill {
				margin: 0 auto;
				font-size: 110rpx !important;
				line-height: 1 !important;
			}
			.label {
				margin-top: 32rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
		}
		.bottom-box {
			.row {
				margin-top: 30rpx; width: 100%; box-sizing: border-box; padding-left: 160rpx; min-height: 40rpx; position: relative;
				.key {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
                    position: absolute; left: 0; top: 0;
				}
				.value {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
                    line-height: 40rpx; width: 100%; text-align: right;
				}
			}
		}
	}
	.card2 {
		margin: 32rpx 32rpx 0;
		background: #FFFFFF;
		padding: 32rpx;
		.con-box {
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: space-between;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid rgba(0,0,0,0.1);
			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}
			.con-right {
				flex: 1;
				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.num {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 27rpx;
				}
				.price {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}
		}
		.time {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-top: 32rpx;
		}
		.remark {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-top: 12rpx;
			.status {
				color: #2B75E9;
			}
		}
	}
}
</style>