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

<template name="information">
	<view class="information-template">
		 <!-- 订单信息 -->
		 <view class="information-content">
			<view class="information-view num">
				<view class="view-num ord">订单编号：{{orderData.orderNo =='undefined' ? '' : orderData.orderNo}}</view>
				<view class="view-type bold">{{typeText}}</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">订单总额：￥{{payTotalFee =='undefined' ? '' : payTotalFee}}</view>
				<view class="view-man">余额抵扣：￥{{balancePayFee =='undefined' ? '' : balancePayFee}}</view>
			</view>
			<view class="information-view">
				<view class="view-num" v-if="freePostFlag == '0'">运费：包邮</view>
				<view class="view-num" v-if="freePostFlag == '-1'">运费：到付</view>
				<view class="view-num" v-if="freePostFlag == '1'">运费：￥{{freight}}</view>
				<view class="view-man">经理折扣：￥{{discountFee =='undefined' ? '' : discountFee}}</view>
			</view>
			<view class="information-view">
				<view class="view-num">税费：￥{{expensesOfTaxation == null ? '0.00' : expensesOfTaxation}}</view>
				<view class="view-man bold">应付总额：<text class="red">￥{{payableAmount =='undefined' ? '0.00' : payableAmount}}</text></view>
			</view>
			<view class="information-view">
				<view class="view-num">已支付：￥{{receiptAmount == null ? '0.00' : receiptAmount}}</view>
				<view class="view-man bold">待付金额：<text class="red">￥{{pendingPayments =='undefined' ? '0.00' : pendingPayments}}</text></view>
			</view>
			
			<view class="information-view">
				<view class="view-num time">下单时间：{{orderData.orderTime =='undefined' ? '' : orderData.orderTime}}</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:'',
				payTotalFee:'',
				balancePayFee:'',
				freight:'',
				discountFee:'',
				freePostFlag:'',
				payableAmount:'',
				pendingPayments:'',
				receiptAmount:'',
				typeText:'',
				expensesOfTaxation:'',
				typeTextObject:{
					0:'待确认',
					4:'交易完成',
					5:'订单完成',
					6:'已关闭',
					7:'交易全退',
					77:'交易全退',
					11:'待付款待发货',
					12:'待付款部分发货',
					13:'待付款已发货',
					21:'部分付款待发货',
					22:'部分付款部分发货',
					23:'部分付款已发货',
					31:'已付款待发货',
					32:'已付款部分发货',
					33:'已付款已发货',
					111:'待付款待发货',
				}
			}
		},
		created(){
			this.initData(this.information)
		},
		computed: {

		},
		watch:{
			information:{
				handler:function(val){
					this.initData(val)
				},
				deep:true//对象内部的属性监听，也叫深度监听
			}
		},
		methods:{
			initData(res) {
				this.orderData = res;
				this.payTotalFee =this.toFiexdFn(res.payTotalFee);		//订单总额
				this.payableAmount =this.toFiexdFn(res.payableAmount);	//应付总额
				this.balancePayFee = this.toFiexdFn(res.balancePayFee);
				this.discountFee = this.toFiexdFn(res.discountFee);
				this.pendingPayments = this.toFiexdFn(res.pendingPayments);
				this.receiptAmount = this.toFiexdFn(res.receiptAmount);
				this.freePostFlag = res.freePostFlag;
				this.freight = this.toFiexdFn(res.freight);
				this.expensesOfTaxation = this.toFiexdFn(res.expensesOfTaxation);
				Object.keys(this.typeTextObject).forEach(key => {
					if(key == res.status){
						this.typeText = this.typeTextObject[key]
					}
				})
			},
			clipboard(data) {
				thorui.getClipboardData(data, (res) => {
					// #ifdef H5
					if (res) {
						this.$util.msg("复制成功",2000);
					} else {
						this.$util.msg("复制失败",2000);
					}
					// #endif
				})
			},
			toFiexdFn(n){
				let num 
				if(n==null){
					num='0.00'
				}else{
					num = n.toFixed(2)
				}
				return num
			}
		}
	}
</script>

<style lang="scss">
	.information-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.information-content{
			width: 702rpx;
			padding: 20rpx 24rpx;
			.information-view{
				height: 50rpx;
				line-height: 50rpx;
				font-size: $font-size-28;
				color: $text-color;
				margin: 4rpx 0;
				display: flex;
				view{
					flex: 1;
					color: $text-color;
					text-align: left;
				}
				.view-num.ord{
					color: $color-system;
					text-align: left;
					flex:3;
					font-weight: bold;
				}
				.view-num.time{
					color: #999999;
				}
				.bold{
					font-weight: bold;
				}
				.red{
					color: #FF2A2A;
				}
				.view-type{
					float: right;
					text-align: right;
					color: #FF2A2A;
					flex: 2;
				}
				.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>