guosen-ldt-client/pages/order/comps/card.vue

<template>
	<view class="">
		<view @click="$jump('/pagesD/pages/take-order/take-order?id='+item.id)" class="card" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="center" >
					<view class="center">
						<image  src="https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/5768ef4f6e09476197322fdc7bd8136b-nOG3xq9mqJJS66fe25d830cb43186cd2bc0470d24af6.jpg" mode=""></image>
					</view>
					<text class="text-lg" style="color: #000;">杨国福麻辣烫</text>
					<text class="cuIcon-right margin-left-10 text-df"></text>
				</view>
				<view class="center text-sm">
					<text v-if="item.payStatus=='付款成功'" class="text-gray">{{item.orderStatus}}</text>
					<text v-else class="text-gray">{{item.payStatus}}</text>
				</view>
			</view>
			<view class="content">
				<view class="flex flex-direction" style="line-height: 50rpx;">
					<text>下单时间：{{item.createTime}}</text>
					<block>
						<text>点菜计数:{{item.goodsTotalNum}}</text>
						<view v-show="false">
							<u-count-down v-if="item.payStatus=='待付款'&& item.orderStatus!='取消付款'" @end="timeup(item)"  :timestamp="getExpireTime(item)"></u-count-down>
						</view>
					</block>
				</view>
				<view class="flex flex-direction">
					<text class="price text-right" style="color: #fd4908;font-size: 36rpx;">{{item.totalPrice / 100}}</text>
					<view class="center" v-if="item.payStatus=='待付款'">
						<view class="cu-btn line-orange sm margin-top-10 round">
							去支付
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	props:{
		list:Array
	},
	data() {
		return {
			
		};
	},
	onLoad() {
		
	},
	computed:{
		 getExpireTime(){
			return data=>{
				let exTime = this.$dateTime.getTime(data.expireTime)
				let nowTime = this.$dateTime.getTime()
				let expireTime = (exTime - nowTime) / 1000
				if (expireTime <= 0) {
					expireTime = 0.1
				}
				return expireTime
			}
		},
	},
	methods:{
		timeup(item) {
			this.$emit('timeup',item)
		},
	}
};
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
</style>

<style lang="scss" scoped>
	.card{
		border-radius: 20rpx;
		padding: 15rpx;
		background-color: #FFFFFF;
		margin: 15rpx;
		
		.top{
			font-size: 28rpx;
			padding:10rpx;
			display: flex;
			justify-content: space-between;
			
			image{
				border-radius: 6rpx;
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}
		
		.content{
			margin: 10rpx 0;
			margin-left: 20rpx;
			padding: 10rpx 0;
			color: #626262;
			display: flex;
			justify-content: space-between;
			image{
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				margin-right: 15rpx;
			}
		}
		
		.bottom{
			padding-top: 10rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>