71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
<view class="input-form-layout">
|
|
<view class="step-header">
|
|
<u-steps :list="stepList" :current="currentStep" active-color="#6acdbb"></u-steps>
|
|
</view>
|
|
<scroll-view scroll-y class="form-scroll" :style="scrollStyle">
|
|
<slot />
|
|
</scroll-view>
|
|
<view class="footer-actions">
|
|
<slot name="footer-extra" />
|
|
<u-button v-if="currentStep > 0" class="btn-prev" @click="$emit('prev')">上一步</u-button>
|
|
<u-button
|
|
v-if="currentStep < maxStep"
|
|
class="btn-next"
|
|
type="primary"
|
|
:custom-style="primaryStyle"
|
|
@click="$emit('next')"
|
|
>下一步</u-button>
|
|
<u-button
|
|
v-if="currentStep === maxStep"
|
|
class="btn-submit"
|
|
type="primary"
|
|
:custom-style="primaryStyle"
|
|
@click="$emit('submit')"
|
|
>{{ submitLabel }}</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'InputFormLayout',
|
|
props: {
|
|
stepList: { type: Array, required: true },
|
|
currentStep: { type: Number, default: 0 },
|
|
submitLabel: { type: String, default: '确认保存' },
|
|
scrollHeight: { type: String, default: 'calc(100vh - 480rpx)' },
|
|
primaryStyle: {
|
|
type: Object,
|
|
default: () => ({
|
|
backgroundColor: '#6acdbb',
|
|
color: '#ffffff',
|
|
borderColor: '#6acdbb',
|
|
}),
|
|
},
|
|
},
|
|
computed: {
|
|
maxStep() {
|
|
return Math.max(0, (this.stepList || []).length - 1)
|
|
},
|
|
scrollStyle() {
|
|
return { height: this.scrollHeight }
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.step-header { background-color: #fff; padding: 30rpx 40rpx; margin-bottom: 20rpx; }
|
|
.form-scroll { box-sizing: border-box; }
|
|
.footer-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 40rpx 24rpx 80rpx;
|
|
gap: 24rpx;
|
|
background: transparent;
|
|
}
|
|
.btn-prev { flex: 1; }
|
|
.btn-next, .btn-submit { flex: 2; }
|
|
</style>
|