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

<template name="information">
	<view class="information-template">
		 <!-- 订单信息 -->
		<view class="information-content">
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">订单编号：</view>
					<view class="view-num-text">
						{{orderData.orderSn =='undefined' ? '' : orderData.orderSn}}
						<text class="clipboard" @click="clipboard(orderData.orderSn)">复制</text>
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">发货单流水号：</view>
					<view class="view-num-text">
						{{orderData.createTime}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">用户账号：</view>
					<view class="view-num-text">
						{{orderData.memberUsername}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">支付方式：</view>
					<view class="view-num-text">
						{{orderData.payType | formatPayType}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">订单来源：</view>
					<view class="view-num-text">
						{{orderData.sourceType | formatSourceType}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">订单类型：</view>
					<view class="view-num-text">
						{{orderData.orderType | formatOrderType}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">配送方式：</view>
					<view class="view-num-text">
						{{orderData.deliveryCompany | formatNull}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">物流单号：</view>
					<view class="view-num-text">
						{{orderData.deliverySn | formatNull}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">自动确认收货时间：</view>
					<view class="view-num-text">
						{{orderData.autoConfirmDay}}天
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">订单可得优币：</view>
					<view class="view-num-text">
						{{orderData.integration}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">订单可得成长值：</view>
					<view class="view-num-text">
						{{orderData.growth}}
					</view>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					<view class="view-num-label">活动信息：</view>
					<view class="view-num-text">
						{{orderData.promotionInfo | formatLongText}}
					</view>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	const thorui = require("@/components/clipboard/clipboard.thorui.js")
	export default{
		name:"information",
		props:{
			orderInfo:{
				type:Object
			}
		},
		data() {
			return{
				orderData:'',
				payTotalFee:'',
				balancePayFee:'',
				freight:'',
				discountFee:'',
				freePostFlag:'',
				payableAmount:'',
				pendingPayments:'',
				receiptAmount:'',
				expensesOfTaxation:'',
			}
		},
		created(){
			this.initData(this.orderInfo)
		},
		filters: {
		      formatNull(value) {
		        if(value===undefined||value===null||value===''){
		          return '暂无';
		        }else{
		          return value;
		        }
		      },
		      formatLongText(value) {
		        if(value===undefined||value===null||value===''){
		          return '暂无';
		        }else if(value.length>8){
		          return value.substr(0, 8) + '...';
		        }else{
		          return value;
		        }
		      },
		      formatPayType(value) {
		        if (value === 1) {
		          return '支付宝';
		        } else if (value === 2) {
		          return '微信';
		        } else {
		          return '未支付';
		        }
		      },
		      formatSourceType(value) {
		        if (value === 1) {
		          return 'APP订单';
		        } else {
		          return 'PC订单';
		        }
		      },
		      formatOrderType(value) {
		        if (value === 1) {
		          return '秒杀订单';
		        } else {
		          return '正常订单';
		        }
		      },
		      formatAddress(order) {
		        let str = order.receiverProvince;
		        if (order.receiverCity != null) {
		          str += "  " + order.receiverCity;
		        }
		        str += "  " + order.receiverRegion;
		        str += "  " + order.receiverDetailAddress;
		        return str;
		      },
		      formatPayStatus(value) {
		        if (value === 0) {
		          return '未支付';
		        } else if(value===4){
		          return '已退款';
		        }else{
		          return '已支付';
		        }
		      },
		      formatDeliverStatus(value) {
		        if (value === 0||value === 1) {
		          return '未发货';
		        } else {
		          return '已发货';
		        }
		      },
		    },
		computed: {

		},
		watch:{
			orderInfo:{
				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);
					} else {
						this.$util.msg("复制失败",2000);
					}
				})
			},
			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: 16rpx;
		.information-content{
			width: 100%;
			padding: 20rpx 24rpx;
			.information-view{
				height: 50rpx;
				line-height: 50rpx;
				font-size: $font-size-28;
				color: $text-color;
				margin: 4rpx 0;
				display: flex;
				.view-num{
					flex: 1;
					color: $text-color;
					text-align: left;
					.view-num-label{
						text-align: left;
						float: left;
						color: $text-color;
					}
					.view-num-text{
						float: left;
						text-align: left;
						color: #999999;
					}
				}
				.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: #EBEBEB;
					text-align: center;
					font-size: $font-size-24;
					color: #999999;
					border-radius: 18rpx;
					line-height: 36rpx;
					display: inline-block;
					margin-left: 42rpx;
				}
			}
		}
	}
</style>