caimei-applets-caimei/pages/user/order/components/cm-details-button.vue

<template name="button">
	<view class="button-template" :style="{ paddingBottom: isIphoneX ? '68rpx' : '0rpx' }">
		<!-- 底部按钮 -->
		<view class="button-content">
			<view
				class="btn btn-payment"
				v-if="order.affirmPaymentFlag == 10"
				@click.stop="btnConfirm('payment', order)"
				>确认打款<text>供应商</text></view
			>
			<view class="btn btn-confirm" v-if="btnState.isConfirmation" @click.stop="btnConfirm('confirmation', order)"
				>确认订单</view
			>
			<view class="btn btn-pay" v-if="btnState.isPay" @click.stop="btnConfirm('pay', order)">付款</view>
			<view class="btn btn-cancel" v-if="order.checkFlag === 2" @click.stop="btnConfirm('upload', order)"
				>上传凭证</view
			>
			<view class="btn btn-share" @click.stop="onShareCode">
				<view class="tips" v-if="shareCode">分享码：{{ shareCode }}</view> 分享订单
			</view>
			<view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', order)"
				>取消订单</view
			>
			<!-- <view class="btn btn-delete" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',order)">删除订单</view> -->
			<view
				class="btn btn-query"
				v-if="btnState.isQuery && order.secondHandOrderFlag != 1"
				@click.stop="btnConfirm('query', order)"
				>查看物流</view
			>
			<view class="btn btn-firm" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', order)">
				确认收货 <view class="tips">采美豆<text class="line"></text></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'button',
	props: {
		status: {
			type: Number
		},
		order: {
			type: Object
		},
		shareCode: {
			type: String
		}
	},
	watch: {
		status: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	data() {
		return {
			btnState: this.initStatus(),
			isIphoneX: this.$store.state.isIphoneX,
			mapStateArr: [
				{ label: 'isQuery', val: [2, 3, 5, 6, 12, 13, 22, 23, 32, 33], status: true },
				{ label: 'isDelete', val: [4], status: true },
				{ label: 'isCancel', val: [0, 11], status: true },
				{ label: 'isConfirm', val: [33], status: true },
				{ label: 'isConfirmation', val: [0], status: true },
				{ label: 'isPay', val: [11, 12, 13, 21, 22, 23], status: true }
			]
		}
	},
	created() {
		this.initData(this.status)
	},
	computed: {},
	methods: {
		initData(resVal) {
			/**
			 * @分享按钮统一显示
			 * @按钮根据状态显示
			 * @(4、5、7、12、22、23、32)显示[查看物流]按钮,其他隐藏
			 * @(6)显示[删除订单],其他隐藏
			 * @(0、111)显示[取消订单],其他隐藏
			 * @(21,31)只显示分享
			 * @(13,33)显示[确认收货]和[查看物流]
			 */
			this.btnState = this.initStatus()
			this.mapStateArr.forEach(el => {
				el.val.forEach(value => {
					if (resVal === value) {
						this.btnState[el.label] = el.status
					}
				})
			})
		},
		initStatus() {
			let btnState = {
				isQuery: false,
				isDelete: false,
				isCancel: false,
				isConfirm: false,
				isConfirmation: false
			}
			return btnState
		},
		getShareCode(code) {
			this.shareCode = code
		},
		onShareCode() {
			this.$parent.isShareModal = true
			this.$emit('shareConfirm')
		},
		btnConfirm(type, order) {
			let data = {
				type: type,
				shopOrderId: order.shopOrderId,
				shopOrderNo: order.shopOrderNo,
				order: order,
                shopId: order.shopId
			}
			this.$emit('buttonConfirm', data)
		}
	}
}
</script>

<style lang="scss">
.button-template {
	width: 100%;
	height: auto;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #ffffff;
	.button-content {
		padding: 0 24rpx;
		height: auto;
		float: right;
		position: relative;
		.share-code {
			width: 200rpx;
			height: 64rpx;
			line-height: 64rpx;
			color: #2a45ff;
			text-align: left;
			position: absolute;
			font-size: $font-size-28;
			font-weight: bold;
			left: 24rpx;
			top: 24rpx;
		}
		.btn {
			width: 160rpx;
			height: 64rpx;
			margin: 22rpx 10rpx 22rpx 0;
			line-height: 64rpx;
			font-size: $font-size-26;
			color: #666666;
			text-align: center;
			float: right;
			border: 2rpx solid #999999;
			border-radius: 34rpx;
			&.btn-payment {
				line-height: 38rpx;
				font-size: 24rpx;
				background: #f9a94b;
				color: #fff;
				border: 2rpx solid #f9a94b;
				text {
					display: block;
					line-height: 15rpx;
				}
			}
			&.btn-share {
				position: relative;
			}
		}
		.btn-confirm {
			background: $btn-confirm;
			border-color: #ff7a51;
			color: #ffffff;
		}
		.btn-pay {
			background: #07c160;
			margin-right: 0;
			border: 2rpx solid #07c160;
			color: #fff;
		}
		.btn-firm {
			position: relative;
			.tips {
				width: 74rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0 7rpx;
				border-radius: 16rpx;
				background-color: #ffe6dc;
				color: $color-system;
				text-align: center;
				font-size: $font-size-20;
				position: absolute;
				right: 0;
				top: -40rpx;
				z-index: 90;
				.line {
					display: block;
					width: 20rpx;
					height: 20rpx;
					background-color: #ffe6dc;
					position: relative;
					bottom: 18rpx;
					left: 15rpx;
					z-index: -1;
					transform: rotate(45deg);
				}
			}
		}
		.btn-share {
			.tips {
				width: 160rpx;
				height: 34rpx;
				padding: 10rpx 10rpx;
				background: #ff5b00;
				border-radius: 8rpx;
				position: absolute;
				color: #ffffff;
				line-height: 34rpx;
				font-size: $font-size-24;
				text-align: left;
				right: 0;
				top: -65rpx;
				&:before {
					content: '';
					width: 25rpx;
					height: 25rpx;
					background: #ff5b00;
					position: absolute;
					bottom: -8rpx;
					left: 30rpx;
					z-index: -1;
					transform: rotate(45deg);
				}
			}
		}
	}
}
</style>