caimei-applets-caimei/components/cm-module/orderDetails/orderInformation.vue

<template name="information">
	<view class="information-template">
		 <!-- 订单信息 -->
		 <view class="information-content">
			<view class="information-view title">
				<view class="view-num title">
					<text class="bage-buss" v-if="orderData.orderSubmitType == 3 || orderData.orderSubmitType == 4">协销</text>
					<text class="bage-auto" v-if="orderData.orderSubmitType == 0 || orderData.orderSubmitType == 1 ||orderData.orderSubmitType == 2">自主</text>
					<text class="bage-text">订单编号：{{orderData.orderNo =='undefined' ? '' : orderData.orderNo}}</text>
					<image class="bage-icon" src="../../../static/temp/icon-type@3x.png" mode="widthFix" v-if="orderData.secondHandOrderFlag == 1"></image>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">下单时间：{{ orderData.orderTime =='undefined' ? '' : orderData.orderTime }}</view>
				<view class="view-type">{{ orderData.status | TextFormat }}</view>
			</view>
			<view class="information-view">
				<view class="view-num bold">
					订单标识：{{ orderData.orderMark =='undefined' ? '' : orderData.orderMark }}
					<text class="clipboard" @click="clipboard(orderData.orderMark)">复制</text>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num">订单总额：￥{{ orderData.payTotalFee =='undefined' ? '' : orderData.payTotalFee | NumFormat }}</view>
				<view class="view-man">应付总额：￥{{ orderData.payableAmount =='undefined' ? '0.00' : orderData.payableAmount | NumFormat }}</view>
			</view>
			<view class="information-view">
				<view class="view-num">待付金额：<text class="red">￥{{ orderData.pendingPayments =='undefined' ? '0.00' : orderData.pendingPayments | NumFormat }}</text></view>
				<view class="view-man"></view>
			</view>
			<view class="information-view">
				<view class="view-num">经理折扣：￥{{ orderData.discountFee =='undefined' ? '' : orderData.discountFee | NumFormat}}</view>
				<view class="view-man" v-show="orderData.promotionFullReduction>0">促销满减：￥{{ orderData.promotionFullReduction | NumFormat}}</view>
			</view>
			<view class="information-view">
				<view class="view-num">余额抵扣：￥{{ orderData.balancePayFee =='undefined' ? '' : orderData.balancePayFee | NumFormat}}</view>
				<view class="view-man">赠品总数:{{ orderData.presentCount + orderData.promotionalGiftsCount}}</view>
			</view>
			<view class="information-view">
				<view class="view-num" v-if="orderData.freePostFlag == '0'">运费：包邮</view>
				<view class="view-num" v-if="orderData.freePostFlag == '-1'">运费：到付</view>
				<view class="view-num" v-if="orderData.freePostFlag == '1'">运费：￥{{ orderData.freight | NumFormat}}</view>
			</view>
			<view class="information-view">
				<view class="view-num">已支付：￥{{ orderData.receiptAmount == null ? '0.00' : orderData.receiptAmount | NumFormat }}</view>
				<view class="view-man"></text></view>
			</view>
		 </view>
	</view>
</template>

<script>
	const thorui = require("@/components/clipboard/clipboard.thorui.js")
	export default{
		name:"information",
		props:{
			information:{
				type:Object
			}
		},
		data() {
			return{
				orderData:'',
				freePostFlag:'',
			}
		},
		created(){
			this.initData(this.information)
		},
		filters:{
			NumFormat(value) {//处理金额
				return Number(value).toFixed(2);
			},
			TextFormat(status) {//处理金额
				let HtmlText,
					typeTextObject={
						0:'待确认',
						4:'交易完成',
						5:'订单完成',
						6:'已关闭',
						7:'交易全退',
						77:'交易全退',
						11:'待付款待发货',
						12:'待付款部分发货',
						13:'待付款已发货',
						21:'部分付款待发货',
						22:'部分付款部分发货',
						23:'部分付款已发货',
						31:'已付款待发货',
						32:'已付款部分发货',
						33:'已付款已发货',
						111:'待付款待发货',
					};
				
				Object.keys(typeTextObject).forEach(key => {
					if(key == status){
						HtmlText = typeTextObject[key]
					}
				})
				return HtmlText
			},
		},	
		computed: {

		},
		watch:{
			information:{
				handler:function(val){
					this.initData(val)
				},
				deep:true//对象内部的属性监听，也叫深度监听
			}
		},
		methods:{
			initData(res) {
				this.orderData = res;
			},
			clipboard(data) {
				thorui.getClipboardData(data, (res) => {
					if (res) {
						this.$util.msg("复制成功",2000,true,'success');
					} else {
						this.$util.msg("复制失败",2000,true,'none');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.information-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.information-content{
			width: 702rpx;
			padding: 0  24rpx 20rpx 24rpx;
			.information-view{
				height: 50rpx;
				line-height: 50rpx;
				font-size: $font-size-28;
				color: $text-color;
				margin: 4rpx 0;
				display: flex;
				&.title{
					height: 68rpx;
					line-height: 68rpx;
					margin-bottom: 5rpx;
				}
				view{
					flex: 1;
					color: $text-color;
					text-align: left;
				}
				.view-num.title{
					height: 68rpx;
					line-height: 68rpx;
					position: relative;
					.bage-icon{
						width: 50rpx;
						height: 50rpx;
						display: block;
						position: absolute;
						right: 0;
						top: 9rpx;
					}
					.bage-buss{
						display: inline-block;
						width: 72rpx;
						height: 30rpx;
						background:radial-gradient(circle,rgba(255,39,180,1) 0%,rgba(193,77,245,1) 100%);
						border-radius: 4rpx;
						line-height: 30rpx;
						font-size: $font-size-24;
						text-align: center;
						color: #FFFFFF;
						margin-top: 10rpx;
					}
					.bage-auto{
						display: inline-block;
						width: 72rpx;
						height: 30rpx;
						background:radial-gradient(circle,rgba(255,180,39,1) 0%,rgba(245,142,77,1) 100%);
						border-radius: 4rpx;
						line-height: 30rpx;
						font-size: $font-size-24;
						text-align: center;
						color: #FFFFFF;
						margin-top: 10rpx;
					}
					.bage-text{
						display: inline-block;
						font-size: $font-size-28;
						line-height: 68rpx;
						text-align: left;
						color: $color-system;
						margin-left: 10rpx;
					}
				}
				.view-num.ord{
					color: $color-system;
					text-align: left;
					flex:3;
					font-weight: bold;
				}
				.view-num.time{
					color: #999999;
					flex: 6;
				}
				.bold{
					font-weight: bold;
				}
				.red{
					color: #FF2A2A;
				}
				.view-type{
					float: right;
					text-align: right;
					color: #FF2A2A;
					flex:4;
				}
				.clipboard{
					width: 84rpx;
					height: 36rpx;
					background: linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
					text-align: center;
					font-size: $font-size-24;
					color: #FFFFFF;
					border-radius: 6rpx;
					line-height: 36rpx;
					display: inline-block;
					margin-left: 42rpx;
				}
			}
		}
	}
</style>