caimei-applets-caimei/pages/seller/order/components/details/cm-order-temp.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.shopOrderNo ? orderData.shopOrderNo : '' }}
							({{ orderData.shopOrderId }})
						</label>
						<text class="clipboard" @click="clipboard(orderData.shopOrderId)">复制ID</text>
					</view>
				</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" v-if="orderData.svipFullReduction > 0">
				<view class="view-man">
					超级会员优惠：<label class="label">￥{{ orderData.svipFullReduction | NumFormat }}</label>
				</view>
			</view>
			<view class="information-view" v-if="orderData.userBeans > 0">
				<view class="view-man">
					采美豆抵用运费：<label class="label">{{ orderData.userBeans }}</label>
				</view>
			</view>-->
		</view>
	</view>
</template>

<script>
const thorui = require('@/components/clipboard/clipboard.thorui.js')
export default {
	name: 'orderInfo',
	props: {
		orderInfo: {
			type: Object
		}
	},
	data() {
		return {
			orderData: '',
			openShowflag: false,
		}
	},
	created() {
		this.initData(this.orderInfo)
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value)
			return number.toFixed(2)
		}
	},
	computed: {},
	watch: {
		orderInfo: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	methods: {
		openShow() {
			this.openShowflag = true
			this.infoflag = false
		},
		initData(data) {
			this.orderData = data
		},
		clipboard(shopOrderId) {
			const data = shopOrderId + ''
			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: 100%;
			display: inline-block;
			&.same {
				width: 45%;
				text-align: right;
			}
			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 {
				height: 44rpx;
				background: #e2e2e2;
				text-align: center;
				font-size: $font-size-24;
				color: #999999;
				border-radius: 22rpx;
				line-height: 40rpx;
				display: inline-block;
				margin-left: 24rpx;
				border: 1px solid #f7f7f7;
				box-sizing: border-box;
				padding: 0 10px;
			}
		}
	}
}
.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>