book-hi/pages-car/components/order-bottom-bar.vue

<template>
	<view class="bottom-bar">
		<!-- 加入购物车 -->
		<u-button v-if="orderInfo.showAddToCart" size="mini" shape="circle" plain :custom-style="btnStyle"
			@click="emitAction('addToCart')">加入购物车</u-button>

		<!-- 修改地址 -->
		<u-button v-if="orderInfo.showModifyAddress" size="mini" shape="circle" plain :custom-style="btnStyle"
			@click="emitAction('address')">修改地址</u-button>

		<!-- 取消订单 -->
		<u-button v-if="orderInfo.showCancel" size="mini" shape="circle" plain :custom-style="btnStyle"
			@click="emitAction('cancel')">取消订单</u-button>

		<!-- 投诉 -->
		<u-button v-if="orderInfo.showComplaint" size="mini" shape="circle" plain :custom-style="btnStyle"
			@click="emitAction('complaint')">投诉</u-button>

		<!-- 超时发货 -->
		<u-button v-if="orderInfo.showSendTimeout" size="mini" shape="circle" type="warning" :custom-style="btnStyle"
			@click="emitAction('overtime')">超时发货</u-button>

		<!-- 降价补差 -->
		<u-button v-if="orderInfo.showCompensation" size="mini" shape="circle" type="primary"
			:custom-style="themeLightBtnStyle" @click="emitAction('priceMatch')">降价补差</u-button>

		<!-- 催发货 -->
		<u-button v-if="orderInfo.showUrge" size="mini" shape="circle" :custom-style="themeBtnStyle"
			@click="emitAction('remind')">催发货</u-button>

		<!-- 付款 -->
		<u-button v-if="orderInfo.showPay" size="mini" shape="circle" :custom-style="themeBtnStyle"
			@click="emitAction('pay')">继续付款</u-button>

		<!-- 确认收货 -->
		<u-button v-if="orderInfo.showConfirmShop" size="mini" shape="circle" :custom-style="themeBtnStyle"
			@click="emitAction('confirm')">确认收货</u-button>

		<!-- 钱款去向 -->
		<u-button v-if="orderInfo.showMoneyDestination" size="mini" shape="circle" :custom-style="themeBtnStyle"
			@click="emitAction('moneyWhere')">钱款去向</u-button>
	</view>
</template>

<script>
	export default {
		props: {
			orderInfo: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				btnStyle: {
					marginLeft: '20rpx',
					width: '160rpx',
					height: '60rpx',
					lineHeight: '60rpx',
					padding: '0',
					fontSize: '26rpx'
				},
				themeBtnStyle: {
					marginLeft: '20rpx',
					width: '160rpx',
					height: '60rpx',
					lineHeight: '60rpx',
					padding: '0',
					backgroundColor: '#38C148',
					color: '#fff',
					border: 'none',
					fontSize: '26rpx'
				},
				themeLightBtnStyle: {
					marginLeft: '20rpx',
					width: '160rpx',
					height: '60rpx',
					lineHeight: '60rpx',
					padding: '0',
					backgroundColor: '#5bc0de',
					color: '#fff',
					border: 'none',
					fontSize: '26rpx'
				}
			};
		},
		methods: {
			emitAction(type) {
				this.$emit('action', type);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20rpx 30rpx 0 30rpx;
		z-index: 99;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>