caimei-applets-mcare/pages/seller/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-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', order)"
				>取消订单</view
			>
			<!-- <view class="btn btn-cancel" v-if="btnState.isDelete"  @click.stop="btnConfirm('delete',order)">删除订单</view> -->
			<template>
				<view class="btn btn-share" v-if="btnState.isPay" @click.stop="onShareCode(1)">
					<view class="tips" v-if="shareCode">分享码：{{ shareCode }}</view> 分享支付
				</view>
				<view class="btn btn-share" v-else @click.stop="onShareCode(2)">
					<view class="tips" v-if="shareCode">分享码：{{ shareCode }}</view> 分享订单
				</view>
			</template>
			<view class="btn btn-color" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', order)"
				>确认订单</view
			>
			<view
				class="btn btn-query"
				v-if="btnState.isQuery && order.secondHandOrderFlag != 1"
				@click.stop="btnConfirm('query', order)"
				>查看物流</view
			>
		</view>
	</view>
</template>

<script>
export default {
	name: 'button',
	props: {
		status: {
			type: Number
		},
		order: {
			type: Object
		},
		ableUserMoney: {
			type: Number
		},
		rechargeGoods: {
			type: Boolean
		},
		shareCode: {
			type: String
		},
		secondHandOrderFlag: {
			type: String
		}
	},
	watch: {
		status: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	data() {
		return {
			btnState: this.initStatus(),
			isIphoneX: this.$store.state.isIphoneX,
			invoiceStatus: false,
			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: [0], status: true },
				{ label: 'isPay', val: [11, 12, 13, 21, 22, 23], status: true }
			]
		}
	},
	created() {
		console.log(this.rechargeGoods)
		this.initData(this.status)
	},
	computed: {},
	methods: {
		initData(resVal) {
			/**
			 * @分享按钮统一显示
			 * @按钮根据状态显示
			 * @(2,3,5,6,12,13,22,23,32,33)显示[查看物流]按钮,其他隐藏
			 * @(4)显示[删除订单],其他隐藏
			 * @(0、11)显示[取消订单],其他隐藏
			 * @(13,33)显示[确认收货]和[查看物流]
			 */
			this.btnState = this.initStatus()
			this.mapStateArr.forEach(el => {
				el.val.forEach(value => {
					if (resVal === value) {
						this.btnState[el.label] = el.status
						//console.log(this.btnState[el.label]);
					}
				})
			})
		},
		initStatus() {
			let btnState = {
				isQuery: false,
				isDelete: false,
				isCancel: false,
				isConfirm: false,
				isPay: false
			}
			return btnState
		},
		getShareCode(code) {
			this.shareCode = code
		},
		onShareCode(type) {
			if (this.order.onlinePay == 1) {
				this.$util.modal(
					'提示',
					'本订单不能进行线上支付，请让客户选择线下转账方式付款',
					'继续分享',
					'知道了',
					true,
					() => {
						this.$parent.isShareModal = true
					}
				)
			} else {
				this.$parent.isShareModal = true
				this.$parent.isShareType = type
			}
		},
		btnConfirm(type, order) {
			let data = {
				type: type,
				shopOrderId: order.shopOrderId,
				order: order
			}
			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;
		margin: 20rpx 0;
		.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;
			line-height: 64rpx;
			font-size: $font-size-26;
			color: #ffffff;
			text-align: center;
			border-radius: 34rpx;
			float: right;
		}
		.btn-color {
			background: $btn-confirm;
		}
		.btn-cancel {
			background: #ffffff;
			color: #666666;
			float: left;
			// margin: 22rpx 0;
			margin-right: 15rpx;
			border: 2rpx solid #999999;
		}
		.btn-delete {
			background: linear-gradient(315deg, rgba(255, 163, 3, 1) 0%, rgba(255, 53, 1, 1) 100%);
		}
		.btn-query {
			background: linear-gradient(135deg, rgba(255, 212, 129, 1) 0%, rgba(198, 129, 0, 1) 100%);
		}
		.btn-confirm {
			background: linear-gradient(315deg, rgba(231, 0, 0, 1) 0%, rgba(255, 104, 1, 1) 100%);
		}
		.btn-share {
			background: #ffffff;
			color: #666666;
			float: left;
			// margin: 22rpx 0;
			margin-right: 15rpx;
			border: 2rpx solid #999999;
			position: relative;
			.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: -69rpx;
				&:before {
					content: '';
					width: 25rpx;
					height: 25rpx;
					background: #ff5b00;
					position: absolute;
					bottom: -8rpx;
					left: 30rpx;
					z-index: -1;
					transform: rotate(45deg);
				}
			}
		}
	}
}
</style>