jiaoyi-uni/components/item/m-order.vue

<template>
	<view>
		<view class="m-order">
			<view class="order-img"><image :src="value.payload.order.img" mode="widthFix"></image></view>
			<view class="order-info">
				<view class="title">{{value.payload.order.name}}</view>
				<view class="desc">{{value.payload.order.order}}</view>
				<view class="price">￥{{value.payload.order.price}}</view>
			</view>
			<view class="status info" v-if="value.payload.order.status=='0'">未支付</view>
			<view class="status primary" v-if="value.payload.order.status=='1'">待使用</view>
			<view class="status success" v-if="value.payload.order.status=='2'">已完成</view>
			<view class="status danger" v-if="value.payload.order.status=='3'">已退款</view>
			<view class="status warn" v-if="value.payload.order.status=='4'">退款中</view>
			<view class="status info" v-if="value.payload.order.status=='5'">已关闭</view>
		</view>
	</view>
</template>


<script>
export default {
	props: {
		isMy: {
			type: [Boolean, Number],
			default: false
		},
		value: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {};
	},
}
</script>

<style>
.m-order{background-color: #fff;border-radius: 10upx;display: flex;font-size: 28upx;position: relative;}
.m-order .order-img {display: flex;align-items: center;justify-content: center;}
.m-order .order-img image{width: 150upx;height: 150upx;}
.m-order .order-info {padding: 15upx;}
.m-order .order-info .title{font-size: 28upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.m-order .order-info .desc{font-size: 24upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;}
.m-order .order-info .price{font-size: 28upx;color: #f00;}
.m-order .status{position: absolute;right: 0;bottom: 0;border-radius: 10upx 0 10upx 0;background-color: #909399;font-size: 24upx;color: #fff;padding: 10upx;}
.m-order .status.info{background-color: #909399;}
.m-order .status.primary{background-color: #409eff;}
.m-order .status.success{background-color: #67c23a;}
.m-order .status.danger{background-color: #f56c6c;}
.m-order .status.warn{background-color: #e6a23c;}
</style>