security_study_h5/shopping/orderdetails.vue

<template>
    <view class="">
		<!-- <u-navbar
			:title="title"
			:placeholder="true"
			@leftClick="leftClick"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar> -->
		<view class="page-wrap">
			<view class="block goods u-flex u-col-top">
				<img class="img" :src="orderDetails.mainImg" alt="">
				<view class="text">
					<view class="title ellipsis-2">{{orderDetails.goodsName}}</view>
					<view class="bottom u-flex u-row-between">
						<view class="price">{{orderDetails.credit}}积分</view>
						<view class="quantity">共{{orderDetails.quantity}}件</view>
					</view>
				</view>
			</view>
			<view class="block info">
				<view class="info-item u-flex">
					<text class="til">兑换时间</text>
					<text>{{orderDetails.startTime}}</text>
				</view>
				<view class="info-item u-flex" v-if="orderDetails.checkTime">
					<text class="til">核销时间</text>
					<text>{{orderDetails.checkTime}}</text>
				</view>
				<view class="info-item u-flex" >
					<text class="til">失效时间</text>
					<text>{{orderDetails.startEnd}}</text>
				</view>
				<view class="info-item u-flex"  v-if="orderDetails.checkName">
					<text class="til">核销人</text>
					<text>{{orderDetails.checkName}}</text>
				</view>
			</view>
			<view class="status"
				:class="{
					status0:orderDetails.status == 0,
					status1:orderDetails.status == 1,
					status2:orderDetails.status == 2,
				}"
				>
				{{orderDetails.status|filterOrderStatus}}
			</view>
		</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				id:'',
				orderDetails:{},
            }
        },
		onLoad(page) {
			this.id = page.id;
		},
		onShow() {
			this.getOrderDetails(this.id);
		},
		computed:{
			// payType(){
			// 	return function(value){
			// 		let payTypeList = ['', '微信', '余额', '积分']
			// 		return '-' + payTypeList[value]
			// 	}
			// }
		},
        methods: {
			leftClick(){
				console.log('orderdetails leftClick');
			},
			getOrderDetails(id){
				this.$u.api.exchangeDetails({id:id}).then(res=>{
					this.orderDetails = res.data
					// console.log('orderDetails',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					console.log('getOrderDetails',err);
				})
			},
        }
    }
</script>
<style>
	page{
		background: #F5F9FC;
	}
</style>
<style lang="scss" scoped>
.block{
	background: #FFFFFF;
	border-radius: 24rpx;
	margin-bottom: 10rpx;
	padding: 30rpx;
}
.goods{
	.img{
		width: 180rpx;
		height: 180rpx;
	}
	.text{
		flex: 1;
		margin-left: 40rpx;
		.title{
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
			margin-bottom: 20rpx;
			min-height: 84rpx;
		}
		.bottom{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			.price{
				font-size: 32rpx;
				font-weight: 600;
				color: #FFB100;
				line-height: 44rpx;
			}
		}
	}
}
.info{
	.info-item{
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		margin-bottom: 20rpx;
		.til{
			color: #999;
			margin-right: 40rpx;
		}
	}
}
.status{
	padding: 26rpx 0;
	background: #FFFFFF;
	border-radius: 24rpx;
	font-size: 34rpx;
	font-weight: 600;
	color: #009AEF;
	line-height: 48rpx;
	text-align: center;
	&.status1{
		color: #333;
	}
	&.status2{
		color: #999;
	}
}
</style>