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

<template name="information">
	<view class="information-template">
		 <!-- 订单信息 -->
		<view class="list-title" @click.stop="orderDetail(order.mainOrder.orderId)">
			<view class="list-title-t">
				<view class="list-title-tip">
					<text class="badges">{{ order.mainOrder.orderType | formatOrderType }}</text>
				</view>
				<view class="list-title-tag" v-if="order.mainOrder.organizeId == 3">
					<text class="badges">维沙</text>
				</view>
				<view class="list-title-num">{{ order.mainOrder.status | stateExpFormat }}</view>
			</view>
			<view class="list-title-a">
				<view class="list-title-a-text">
					子订单编号：<text class="text">{{ order.shopOrderNo }} ( {{ order.shopOrderId }} )</text>
				</view>
				<view class="list-title-a-text">
					供应商名称：<text class="text">{{ order.shopName }}</text>
				</view>
				<view class="list-title-a-text">
					订单金额：<text class="text">￥{{ order.needPayAmount | NumFormat }}</text>
				</view>
			</view>
			<view class="list-title-b">
				客户名称：<text class="text">{{ order.mainOrder.userName ? order.mainOrder.userName : '无' }}</text>
			</view>
			<view class="list-title-b">
				订单编号：<text class="text">{{ order.mainOrder.orderNo }} ( {{ order.mainOrder.orderId }} )</text>
			</view>
			<view class="list-title-b">
				下单日期：<text class="text">{{ order.mainOrder.orderTime }}</text>
			</view>
			<view class="list-title-b">
				<view class="list-title-b-item ">
					订单金额：<text class="text">￥{{ order.mainOrder.payTotalFee | NumFormat }}</text>
				</view>
				<view class="list-title-b-item ">
					已收金额：<text class="text">￥{{ order.mainOrder.paidAmount | NumFormat }}</text>
				</view>
			</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-28;
			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-a {
			width: 100%;
			height: auto;
			float: left;
			padding: 5rpx 8rpx;
			border-radius: 4rpx;
			background-color: rgba(247, 247, 247, 1);
			margin: 10rpx 0;
			.text{
				color: #999999;
			}
			.list-title-a-text {
				width: 100%;
				height: 50rpx;
				float: left;
				font-size: $font-size-24;
				line-height: 50rpx;
				color: #666666;
				text-align: left;
			}
		}
		.list-title-b {
			width: 100%;
			height: 50rpx;
			float: left;
			font-size: $font-size-24;
			line-height: 50rpx;
			color: #666666;
			text-align: left;
			.text{
				color: #999999;
			}
			.list-title-b-item {
				width: 50%;
				height: 100%;
				float: left;
			}
		}
	}
</style>