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

<template name="information">
	<view class="information-template">
		<!-- 订单信息 -->
		<view class="list-title" @click.stop="orderDetail(order.orderId)">
			<view class="list-title-t">
				<view class="list-title-tip">
					<text class="badges">{{ order.orderType | formatOrderType }}</text>
				</view>
				<view class="list-title-tag" v-if="order.organizeId == 3">
					<text class="badges">维沙</text>
				</view>
				<view class="list-title-num">{{ order.status | stateExpFormat }}</view>
			</view>
			<view class="list-title-b">
				客户名称：<text class="text">{{ order.userName }}</text>
			</view>
			<view class="list-title-b">
				订单编号：<text class="text">{{ order.orderNo }} ( {{ order.orderId }} )</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.payTotalFee | NumFormat }}</text>
				</view>
				<view class="list-title-b-item ">
					余额抵扣：<text class="text">￥{{ order.balancePayFee | NumFormat }}</text>
				</view>
			</view>
			<view class="list-title-b">
				<view class="list-title-b-item ">
					应收金额：<text class="text">￥{{ order.payableAmount | NumFormat }}</text>
				</view>
				<view class="list-title-b-item ">
					已收金额：<text class="text">￥{{ order.paidAmount | 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.receiptAmount | 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?orderId=${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;
					background: rgba(248, 204, 148, 0.5);
					font-size: $font-size-24;
					text-align: center;
					color: #666666;
				}
			}
			.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: linear-gradient(270deg, #fee9ba 0%, #f0cb72 100%);
					font-size: $font-size-24;
					text-align: center;
					color: #666666;
				}
			}
			.list-title-num {
				float: left;
				text-align: left;
				color: #e15616;
				line-height: 40rpx;
				margin-left: 20rpx;
			}
		}
		.list-title-b {
			width: 100%;
			height: 40rpx;
			float: left;
			font-size: $font-size-24;
			line-height: 40rpx;
			color: #666666;
			text-align: left;
			.text {
				color: #999999;
			}
			.list-title-b-item {
				width: 50%;
				height: 100%;
				float: left;
			}
			&.sms {
				height: auto;
			}
		}
	}
</style>