caimei-applets-mcare/pages/user/order/components/details/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 bold">
					订单标识：<label class="label">{{ orderData.orderMark ? orderData.orderMark : '' }}</label>
				</view>
			</view>
			<view class="information-view">
				<view class="view-num time">
					下单时间：<label class="label">{{ orderData.orderTime ? orderData.orderTime : '' }}</label>
				</view>
			</view>
			<view class="information-view same">
				<view class="view-num">
					订单总额：<label class="label">￥{{ orderData.payTotalFee | NumFormat }}</label>
				</view>
			</view>
			<template v-if="openShowflag">
				<view class="information-view">
					<view class="view-num">
						待付金额：<text class="red">￥{{ orderData.pendingPayments | NumFormat }}</text>
					</view>
					<view class="view-man"></view>
				</view>
				<view class="information-view same">
					<view class="view-man">
						应付总额：<label class="red">￥{{ orderData.payableAmount | NumFormat }}</label>
					</view>
				</view>
				<view class="information-view">
					<view class="view-num">
						已支付：<label class="red">￥{{ orderData.receiptAmount | NumFormat }}</label>
					</view>
					<view class="view-man"></view>
				</view>
				<view class="information-view none">
					<view class="view-num">
						运费：<label class="label">{{ orderData.postageInfo }}</label>
					</view>
				</view>
			</template>
		</view>
		<view class="openinfo" v-if="infoflag">
			<view class="btnInfo" @click="openShow">
				查看更多 <text class="iconfont icon-xiangxiajiantou"></text>
			</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) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value)
			return number.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;
			}
			&.none {
				width: 100%;
				text-align: left;
			}
			// &.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 {
	width: 100%;
	height: 48rpx;
	margin-bottom: 30rpx;
	.btnInfo {
		width: 168rpx;
		height: 48rpx;
		line-height: 46rpx;
		box-sizing: border-box;
		border: 2rpx solid #e1e1e1;
		border-radius: 8rpx;
		text-align: center;
		color: #b2b2b2;
		margin: 0 auto;
		font-size: $font-size-24;
	}
}
</style>