lh-mobile/pages/jiance/order/orderButtom.vue

<template>
	<view>
		<view class="bottomBtn" v-if="buttonFlagNum == '3' || buttonFlagNum == ''">
			<u-row>
				<u-col :span="activeNum != 1 ? 4 : 6" v-if="activeNum != 1">
					<u-button type="warning" class="btn" @click="lastStep">
						上一步
					</u-button>
				</u-col>
				<u-col :span="activeNum == 1  ? 6 : 4">
					<u-button type="success" @click="onSubmit(1)" class="btn green-back-color" style="margin-bottom: 15rpx;" v-if="type != 'detail'">
						暂存
					</u-button>
				</u-col>
				<u-col :span="4" v-if="activeNum == 3">
					<u-button type="success" class="btn btn-back-color" @click="onSubmit(2)" v-if="type != 'detail'">提交
					</u-button>
				</u-col>
				<u-col :span="activeNum == 1 ? 6 : 4" v-if="activeNum != 3">
					<u-button type="warning" @click="nextStep" class="btn btn-green-color"> 下一步 </u-button>
				</u-col>
			</u-row>
		</view>

		<view class="bottomBtn" v-else-if="buttonFlagNum == '1'">
			<u-row>
				<u-col :span="activeNum == 1 ? 12 : 6" v-if="activeNum != 1">
					<u-button type="warning" @click="lastStep" class="btn">
						上一步
					</u-button>
				</u-col>
				<u-col :span="activeNum == 3 ? 6 :12" v-if="activeNum == 3">
					<u-button type="error" @click="onSubmit(3)">提交
					</u-button>
				</u-col>
				<u-col :span="activeNum == 1 ?12 : 6" v-if="activeNum != 3">
					<u-button type="warning" @click="nextStep" class="btn btn-green-color">下一步
					</u-button>
				</u-col>
			</u-row>
		</view>

		<view class="bottomBtn" v-else-if="buttonFlagNum == '0'">
			<u-row>
				<u-col :span="activeNum == 2 ? 6 : 12" v-if="activeNum != 1">
					<u-button type="warning" @click="lastStep" class="btn">
						上一步
					</u-button>
				</u-col>
				<u-col :span="activeNum == 2 ? 6 : 12" v-if="activeNum != 3">
					<u-button type="warning" @click="nextStep" class="btn btn-green-color">下一步
					</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			buttonFlagNum: {
				type: String,
				default: ''
			},
			activeNum: {
				type: Number,
				default: 1
			},
			type: {
				type: String,
				default: 'add'
			},
		},
		methods: {
			lastStep() {
				this.$emit('lastStep')
			},
			nextStep() {
				this.$emit('nextStep')
			},
			onSubmit(index) {
				this.$emit('onSubmit', index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.bottomBtn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 999;
		padding: 15rpx 0;
	}
</style>