caimei-applets-crm/components/cm-module/receipt/receipt-details.vue

<template name="information">
	<view class="information-template">
		<!-- 订单信息 -->
		<view class="list-title clearfix" @click.stop="orderDetail(order.shopOrderId)">
			<view class="list-title-t">
				<view class="list-title-tip">
					<text
						class="badges"
						:class="{
							success: order.orderType === 1,
							warning: order.orderType === 0
						}"
						>{{ order.orderType | formatOrderType }}</text
					>
				</view>
				<view class="list-title-tag">
					<text class="badges">{{ order.organizeId | organizeName }}</text>
				</view>
				<view class="list-title-num">{{ order.status | stateExpFormat }}</view>
			</view>
			<view class="list-title-b">
				客户名称：<text class="text">{{ order.userName ? order.userName : '无' }}</text>
			</view>
			<view class="list-title-b">
				子订单编号：<text class="text">{{ order.shopOrderNo }} ( {{ order.shopOrderId }} )</text>
			</view>
			<view class="list-title-b">
				下单日期：<text class="text">{{ order.orderTime }}</text>
			</view>
			<view class="list-title-b">
				<view class="list-title-b-item ">
					子订单金额：<text class="text">￥{{ order.totalAmount | NumFormat }}</text>
				</view>
				<view class="list-title-b-item ">
					余额抵扣：<text class="text">￥{{ order.accountAmount | NumFormat }}</text>
				</view>
			</view>
			<view class="list-title-b">
				<view class="list-title-b-item ">
					应收金额：<text class="text">￥{{ order.realPay | NumFormat }}</text>
				</view>
				<view class="list-title-b-item ">
					已收金额：<text class="text">￥{{ order.receiptAmount | NumFormat }}</text>
				</view>
			</view>
			<view class="list-title-b">
				<view class="list-title-b-item ">
					剩余应收：<text class="text">￥{{ order.surplusAmount | NumFormat }}</text>
				</view>
				<view class="list-title-b-item ">
					待审金额：<text class="text">￥{{ order.unCheckAmount | NumFormat }}</text>
				</view>
			</view>
			<view class="list-title-b">
				经理折扣：
				<text class="text" v-if="order.discountFee - order.returnedPurchaseFee > 0">
					￥{{ order.discountFee - order.returnedPurchaseFee }}
					<text>
						(原¥{{ order.discountFee }} 折扣取消￥{{
							order.discountFee - order.returnedPurchaseFee > 0
								? order.returnedPurchaseFee
								: order.discountFee
						}})
					</text>
				</text>
				<text class="text" v-else>￥0.00(原¥0.00折扣取消￥0.00)</text>
			</view>
			<view class="list-title-b" v-if="order.returnedPurchaseFee > 0">
				退货退款：
				<text class="text">
					(原¥{{ order.returnedPurchaseFee }} 折扣取消￥{{
						j.discountFee - j.returnedPurchaseFee > 0 ? order.returnedPurchaseFee : order.discountFee
					}})
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'information',
	props: {
		orderInfo: {
			type: Object
		}
	},
	data() {
		return {
			order: {}
		}
	},
	created() {
		this.initData(this.orderInfo)
	},
	watch: {
		orderInfo: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	methods: {
		initData(data) {
			this.order = data
		},
		orderDetail(id) {
			//订单详情跳转
			this.$api.navigateTo(`/pages/relation/order/detail?shopOrderId=${id}`)
		}
	}
}
</script>

<style lang="scss">
.list-title {
	width: 100%;
	height: auto;

	.list-title-t {
		width: 100%;
		height: 50rpx;
		float: left;
		font-size: $font-size-24;
		padding-bottom: 10rpx;
		.list-title-tip {
			float: left;
			.badges {
				display: block;
				float: left;
				padding: 0 15rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				font-size: $font-size-24;
				text-align: center;
				background-color: #f0f9eb;
				color: #67c23a;
				text-align: center;
				&.success {
					background-color: #ecf5ff;
					color: #409eff;
				}
				&.warning {
					background-color: #fdf6ec;
					color: #e6a23c;
				}
			}
		}
		.list-title-tag {
			float: left;
			margin-left: 20rpx;
			.badges {
				display: block;
				float: left;
				padding: 0 15rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				background-color: #ecf5ff;
				color: #409eff;
				font-size: $font-size-22;
				text-align: center;
			}
		}
		.list-title-num {
			float: left;
			text-align: left;
			color: #42b983;
			line-height: 40rpx;
			margin-left: 20rpx;
			font-size: $font-size-24;
		}
	}
	.list-title-b {
		width: 100%;
		height: 44rpx;
		float: left;
		font-size: $font-size-24;
		line-height: 44rpx;
		color: #666666;
		text-align: left;
		.text {
			color: #999999;
		}
		.list-title-b-item {
			width: 50%;
			height: 100%;
			float: left;
		}
		&.sms {
			height: auto;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
}
</style>