caimei-applets-crm/components/cm-module/orderDetails/list-button.vue

<template name="button">
	<view class="button-template">
		<!-- 底部按钮 -->
		<view class="button-content">
			<view class="btn btn-confirm" v-if="btnState.isConfirm" @click.stop="btnConfirm">操作</view>
		</view>
		<tui-actionsheet
			:show="showActionSheet"
			:tips="tips"
			:item-list="itemList"
			:mask-closable="maskClosable"
			:color="color"
			:size="size"
			:is-cancel="isCancel"
			@click="itemClick"
			@cancel="closeActionSheet"
		></tui-actionsheet>
	</view>
</template>

<script>
export default {
	name: 'button',
	props: {
		status: {
			type: Number
		},
		dataInfo: {
			type: Object
		}
	},
	data() {
		return {
			btnState: this.initStatus(),
			mapStateArr: [{ label: 'isConfirm', val: [0], status: true }],
			souStateArr:[
				{ 
					type:1,
					action:[
						{ text: '作废',color: '#2B2B2B' },
						{ text: '设为返佣款',color: '#2B2B2B' },
						{ text: '设为供应商退款',color: '#2B2B2B' },
					],
				},
				{ 
					type:2,
					action:[
						{ text: '作废',color: '#2B2B2B' },
						{ text: '设为普通款',color: '#2B2B2B' },
						{ text: '设为返佣款',color: '#2B2B2B' },
						{ text: '设为供应商退款',color: '#2B2B2B' }
					],
				},
				{ 
					type:3,
					action:[
						{ text: '作废',color: '#2B2B2B' },
						{ text: '设为普通款',color: '#2B2B2B' },
						{ text: '设为供应商退款',color: '#2B2B2B' }
					],
				},
				{ 
					type:4,
					action:[
						{ text: '作废',color: '#2B2B2B' },
						{ text: '设为普通款',color: '#2B2B2B' },
						{ text: '设为返佣款',color: '#2B2B2B' }
					],
				},
			],
			showActionSheet: false,
			maskClosable: true,
			tips: '',
			itemList: [],
			color: '#9a9a9a',
			size: 24,
			isCancel: true
		}
	},
	created() {
		this.initData(this.status,this.dataInfo)
	},
	computed: {},
	watch: {
		status: {
			handler: function(val) {
				this.initData(val)
			},
			deep: true //对象内部的属性监听，也叫深度监听
		}
	},
	methods: {
		initData(resVal,dataVal) {
			/**
			 * @分享按钮统一显示
			 * @按钮根据状态显示
			 * @(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
					}
				})
			})
			this.initActionSheet(dataVal.sourceType)
		},
		initActionSheet(dataVal){
			this.souStateArr.forEach(el => {
				if (dataVal === el.type) {
					this.itemList = el.action
				}
			})
		},
		initStatus() {
			let btnState = {
				isConfirm: false
			}
			return btnState
		},
		btnConfirm() {
			this.showActionSheet = true
		},
		closeActionSheet() {
			this.showActionSheet = false
		},
		// btnConfirm(){
		// 	this.$emit('buttonConfirm',data)
		// }
	}
}
</script>
<style lang="scss">
.button-template {
	width: 100%;
	height: auto;
	float: left;
	background: #ffffff;
	.button-content {
		width: 100%;
		height: auto;
		float: left;
		position: relative;
		.btn {
			width: 160rpx;
			height: 64rpx;
			margin: 10rpx 0 0 0;
			line-height: 64rpx;
			font-size: $font-size-26;
			text-align: center;
			border-radius: 6rpx;
			float: right;
		}
		.btn-cancel {
			background-color: #f6f6f6;
			color: #333333;
		}
		.btn-delete {
			background-color: #f6f6f6;
			color: #333333;
		}
		.btn-query {
			background-color: #ff5000;
			color: #ffffff;
		}
		.btn-confirm {
			background-color: #4688fa;
			color: #ffffff;
		}
		.btn-pay {
			background-color: #4688fa;
			color: #ffffff;
			margin-right: 0;
		}
	}
}
.tui-actionsheet-btn{
	box-sizing: content-box;
}
</style>