caimei-applets-mcare/pages/seller/order/components/cm-list-button.vue

<template name="button">
	<view class="button-template">
		<!-- 底部按钮 -->
		<view class="button-content">
			<view class="btn btn-cancel" v-if="btnState.isCancel" @click.stop="btnConfirm('cancel', shopOrderId)"
				>取消订单</view
			>
			<!-- <view class="btn btn-cancel" v-if="btnState.isDelete" @click.stop="btnConfirm('delete',orderId)">删除订单</view> -->
			<template>
				<view class="btn btn-cancel" v-if="btnState.isPay" @click.stop="onShareCode(shopOrderId, userId, 1)"
					>分享支付</view
				>
				<view class="btn btn-cancel" v-else @click.stop="onShareCode(shopOrderId, userId, 2)">分享订单</view>
			</template>
			<view
				class="btn btn-query"
				v-if="btnState.isQuery && order.secondHandOrderFlag != 1"
				@click.stop="btnConfirm('query', shopOrderId)"
				>查看物流</view
			>
			<view class="btn btn-color" v-if="btnState.isConfirm" @click.stop="btnConfirm('confirm', shopOrderId)"
				>确认订单</view
			>
		</view>
	</view>
</template>

<script>
export default {
	name: 'button',
	props: {
		status: {
			type: Number
		},
		order: {
			type: Object
		},
		shopOrderId: {
			type: Number
		},
		userId: {
			type: Number
		},
		rechargeGoods: {
			type: Boolean
		},
		serviceProviderId: {
			type: Number
		},
		secondHandOrderFlag: {
			type: String
		}
	},
	data() {
		return {
			isShare: true,
			shareCode: '',
			btnState: this.initStatus(),
			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() {
		this.initData(this.status)
	},
	computed: {},
	watch: {
		status: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	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 = {
				isDelete: false,
				isCancel: false,
				isConfirm: false,
				isShare: true
			}
			return btnState
		},
		getShareCode(code) {
			this.shareCode = code
		},
		onShareCode(shopOrderId, userId, type) {
			if (this.order.onlinePayFlag == 1) {
				this.$util.modal(
					'提示',
					'本订单不能进行线上支付，请让客户选择线下转账方式付款',
					'继续分享',
					'知道了',
					true,
					() => {
						this.$parent.isShareModal = true
						;(this.$parent.handleShopOrderId = shopOrderId), (this.$parent.btnClubUserId = userId)
						this.$parent.isShareType = type
						this.$emit('shareConfirm')
					}
				)
			} else {
				this.$parent.isShareModal = true
				;(this.$parent.handleShopOrderId = shopOrderId), (this.$parent.btnClubUserId = userId)
				this.$parent.isShareType = type
				this.$emit('shareConfirm')
			}
		},
		btnConfirm(type, shopOrderId) {
			let data = {
				type: type,
				shopOrderId: shopOrderId
			}
			this.$emit('buttonConfirm', data)
		}
	}
}
</script>

<style lang="scss">
.button-template {
	width: 100%;
	height: auto;
	float: left;
	background: #ffffff;
	.button-content {
		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;
			line-height: 64rpx;
			font-size: $font-size-26;
			color: #ffffff;
			text-align: center;
			border-radius: 34rpx;
			// float: right;
			display: inline-block;
		}
		.btn-color {
			background: $btn-confirm;
			// margin: 22rpx 0 22rpx 22rpx;
		}
		.btn-cancel {
			border: 2rpx solid #999999;
			background: #ffffff;
			color: #666666;
			// float: left;
			margin-right: 15rpx;
		}
		.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: linear-gradient(315deg, rgba(0, 212, 150, 1) 0%, rgba(126, 243, 174, 1) 100%);
			margin-right: 0;
			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: -65rpx;
				&:before {
					content: '';
					width: 25rpx;
					height: 25rpx;
					background: #ff5b00;
					position: absolute;
					bottom: -8rpx;
					left: 30rpx;
					z-index: -1;
					transform: rotate(45deg);
				}
			}
		}
	}
}
</style>