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

<template name="information">
	<view class="information-template">
		<!-- 订单信息 -->
		<view class="modal-content-mask" @click.stop="handleClickCancel">
			<view class="modal-content-alert">
				<scroll-view class="modal-content-scroll" scroll-y="true" >
					<view class="list-title clearfix">
						<view class="list-title-b"
							>进度：<text :style="{ color: formatColor(receiptInfo.receiptStatus) }"
								>{{ receiptInfo.receiptStatus | formatStateType }}</text
							>
						</view>
						<view class="list-title-b">
							<view class="list-title-b-item">
								确认人：<text class="text">{{
									receiptInfo.confirmUserName ? receiptInfo.confirmUserName : '无'
								}}</text>
							</view>
							<view class="list-title-b-item ri">
								<text class="text">{{ receiptInfo.confirmDate ? receiptInfo.confirmDate : '无' }}</text>
							</view>
						</view>
						<view class="list-title-b">
							<view class="list-title-b-item">
								审核人：<text class="text">{{
									receiptInfo.reviewUserName ? receiptInfo.reviewUserName : '无'
								}}</text>
							</view>
							<view class="list-title-b-item ri">
								<text class="text">{{ receiptInfo.reviewDate ? receiptInfo.reviewDate : '无' }}</text>
							</view>
						</view>
						<view class="list-title-b">
							备注：<text>{{ receiptInfo.reviewReason }}</text>
						</view>
					</view>
					<view class="list-title clearfix" v-for="(order, index) in receiptInfo.orderList" :key="index" @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>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	name: 'information',
	props: {
		receipt: {
			type: Object
		}
	},
	data() {
		return {
			receiptInfo: {}
		}
	},
	created() {
		this.initData(this.receipt)
	},
	watch: {
		orderInfo: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	methods: {
		initData(data) {
			this.receiptInfo = data
			console.log('this.receiptInfo',this.receiptInfo)
		},
		formatColor(state) {
			//设置邀请码状态亚瑟
			let stateColor = '',
				stateColorObject = {
					1: '#FEAC20',
					2: '#4cd964',
					3: '#34CC8C',
					4: '#F94B4B',
					5: '#007aff'
				}
			Object.keys(stateColorObject).forEach(function(key) {
				if (key == state) {
					stateColor = stateColorObject[key]
				}
			})
			return stateColor
		},
		handleClickCancel(){// 隐藏
			this.$emit('cancel')
		},
		orderDetail(id) {
			//订单详情跳转
			this.$api.navigateTo(`/pages/relation/order/detail?orderId=${id}`)
		}
	}
}
</script>

<style lang="scss">
	.modal-content-mask{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		.modal-content-alert{
			width: 600rpx;
			height: 600rpx;
			padding: 24rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			overflow: hidden;
			.modal-content-scroll{
				width: 100%;
				height: 600rpx;
				padding-bottom: 24rpx;
			}
		}
	}
	.list-title {
		width: 100%;
		height: auto;
		padding: 10rpx 0;
		.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: 44rpx;
			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;
				&.ri{
					text-align: right;
				}
			}
			&.sms {
				height: auto;
			}
		}
	}
</style>