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">
					<view class="bage-text">
						订单编号：<label class="label">{{orderData.orderNo ? orderData.orderNo : '' }}</label>
					</view>
				</view>
			</view>
			<view class="information-view same">
				<view class="view-num">
					订单总额：<label class="label">￥{{ orderData.payTotalFee ? (orderData.payTotalFee | NumFormat) : '0.00' }}</label>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num bold">
					订单标识：<label class="label">{{ orderData.orderMark ? orderData.orderMark : '' }}</label>
					<text class="clipboard" @click="clipboard(orderData.orderMark)">复制</text>
				</view>
			</view>
			<view class="information-view same">
				<view class="view-num">
					待付金额：<text class="red">￥{{ orderData.pendingPayments ? (orderData.pendingPayments | NumFormat) : '0.00' }}</text>
				</view>
				<view class="view-man"></view>
			</view>
			<template v-if="openShowflag">
				<view class="information-view">
					<view class="view-num time">
						下单时间：<label class="label">{{ orderData.orderTime ? orderData.orderTime : '' }}</label>
					</view>
					<!-- <view class="view-type">{{ orderData.status | TextFormat }}</view> -->
				</view>
				<view class="information-view same">
					<view class="view-num">
						余额抵扣：<label class="label">￥{{ orderData.balancePayFee ? (orderData.balancePayFee | NumFormat) : '0.00' }}</label>
					</view>
				</view>
				<view class="information-view ">
					<view class="view-num" v-if="orderData.postageFlag == 0">
						运费：<label class="label">包邮</label>
					</view>
					<view class="view-num" v-if="orderData.postageFlag == -1">
						运费：<label class="label">到付</label>
					</view>
					<view class="view-num" v-if="orderData.postageFlag == 1">
						运费：<label class="label">￥{{ orderData.postage | NumFormat}}</label>
					</view>
				</view>
				<view class="information-view same" v-if="orderData.userBeans>0">
					<view class="view-man" >
						采美豆抵用运费：<label class="label">{{ orderData.userBeans }}</label>
					</view>
				</view>
				<view class="information-view" v-if=" orderData.discountFee && orderData.discountFee>0">
					<view class="view-num">
						经理折扣：<label class="label">￥{{ orderData.discountFee ? (orderData.discountFee | NumFormat) : '0.00' }}</label>
					</view>
				</view>
				<view class="information-view same" v-if="orderData.promotionFullReduction && orderData.promotionFullReduction>0">
					<view class="view-man" >
						促销满减：<label class="label">￥{{ orderData.promotionFullReduction | NumFormat}}</label>
					</view>
				</view>
				<view class="information-view" v-if="orderData.couponAmount && orderData.couponAmount>0">
					<view class="view-man">
						优惠券：<label class="label">￥{{ orderData.couponAmount | NumFormat}}</label>
					</view>
				</view>
				<view class="information-view same" v-if="(orderData.presentCount + orderData.promotionalGiftsCount)>0">
					<view class="view-man">
						赠品总数：<label class="label">{{ orderData.presentCount + orderData.promotionalGiftsCount}}</label>
					</view>
				</view>
				<view class="information-view">
					<view class="view-man">
						应付总额：<label class="red">￥{{ orderData.payableAmount ? (orderData.payableAmount | NumFormat) : '0.00' }}</label>
					</view>
				</view>
				<view class="information-view same">
					<view class="view-num">
						已支付：<label class="red">￥{{ orderData.receiptAmount ? (orderData.receiptAmount | NumFormat) : '0.00' }}</label>
					</view>
					<view class="view-man"></text></view>
				</view>
			</template>
		 </view>
		 <view class="openinfo" v-if="infoflag">
		 	<view class="btnInfo" @click="openShow">
				查看更多<label class="iconfont icon-xiangxiajiantou"></label>
			</view>
		 </view>
	</view>
</template>

<script>
	const thorui = require("@/components/clipboard/clipboard.thorui.js")
	export default{
		name:"information",
		props:{
			information:{
				type:Object
			}
		},
		data() {
			return{
				orderData:'',
				openShowflag:false,
				infoflag:true
			}
		},
		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:{
			openShow(){
				this.openShowflag = true;
				this.infoflag = false;
			},
			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: 15rpx  24rpx 20rpx 24rpx;
			.information-view{
				height: 50rpx;
				line-height: 50rpx;
				font-size: $font-size-24;
				margin: 4rpx 0;
				// display: flex;
				width: 55%;
				display: inline-block;
				&.same{
					width: 45%;
					text-align: right;
				}
				// &.title{
				// 	height: 68rpx;
				// 	line-height: 68rpx;
				// 	margin-bottom: 5rpx;
				// }
				view{
					// flex: 1;
					color: $text-color;
					color: #999999;
					.label{
						color: #666666;
					}
				}
				.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;
				}
			}
		}
	}
	.openinfo{
		.btnInfo{
			width: 140rpx;
			height: 40rpx;
			border: 2rpx solid #e1e1e1;
			border-radius: 6rpx;
			padding: 5rpx;
			text-align: center;
			color: #b2b2b2;
			margin: 20rpx auto;
			font-size:  $font-size-24;
			.iconfont{
				position: relative;
				top: 5rpx;
				right: -3rpx;
			}
		}
	}
</style>