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 item clearfix"
						v-for="(order, index) in receiptInfo.shopOrderList"
						:key="index"
						@click.stop="orderDetail(order.shopOrderId)"
					>
						<view class="list-title-t">
							<view class="list-title-tip">
								<text class="badges">{{ 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 }}</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.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: '#ff7900',
					2: '#4cd964',
					3: '#19be6b',
					4: '#ed3f14',
					5: '#F74D54'
				}
			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: 12rpx 0;
	&.item {
		border-bottom: 1px solid #e1e1e1;
		&:last-child {
			border: none;
		}
	}
	.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: #42b983;
			line-height: 40rpx;
			margin-left: 20rpx;
		}
	}
	.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;
			&.ri {
				text-align: right;
			}
		}
		&.sms {
			height: auto;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
}
</style>