ss_dc_wechat_mini_program/components/SsBottom/index.vue

<template>
    <view class="bottom">
		<view class="bottom-top-div" v-if="showShyj">
			<up-table style="margin: 0 !important;width: 100% !important;height: 100rpx !important;">
				<up-tr style="height: 100%;">
					<up-th style="background-color: #e6e6e6 !important;color: #333333;padding: 0 32rpx;align-items: center;border: none !important;">{{ shyjTitle }}</up-th>
					<Td style="height: 100%;border: 1px solid #e6e6e6 !important;"><SsInput :placeholder="shyjPlaceholder" v-model="reason" @input="handleShyjInput"/></Td>
				</up-tr>
			</up-table>
		</view>
		<view class="bottom-button-div" :style="showShyj ? '' : 'border-top: 1rpx solid #e6e6e6;'">
			<template v-for="(button, index) in buttons" :key="index">
				<view
					class="bottom-button"
					@click="handleButtonClick(button, index)"
				>
					{{ button.text }}
				</view>
				<!-- 分割线，最后一个按钮不显示 -->
				<view v-if="index < buttons.length - 1" class="button-divider"></view>
			</template>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import SsInput from '@/components/SsInput/index.vue'
import Td from '@/components/Td/index.vue'
const reason = ref('')

const props = defineProps({
    // 是否显示审核意见
    showShyj: {
        type: Boolean,
        default: false
    },
    // 审核意见标题
    shyjTitle: {
        type: String,
        default: '审核意见'
    },
    // 审核意见占位符
    shyjPlaceholder: {
        type: String,
        default: '请输入审核意见'
    },
    // 按钮配置
    buttons: {
        type: Array,
        default: () => [
            { text: '取消', action: 'cancel', },
            { text: '保存并提交', action: 'submit', }
        ]
    }
})

const emit = defineEmits(['button-click', 'update:shyjValue'])




// 处理按钮点击
const handleButtonClick = (button, index) => {
    emit('button-click', {
        action: button.action,
        button: button,
        index: index,
        shyjValue: reason.value // 传递审核意见
    })
}

// 监听审核意见变化
const handleShyjInput = (value) => {
    emit('update:shyjValue', value)
}
</script>

<style scoped lang="scss">
.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.bottom-button-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    height: 100rpx;
}
.bottom-button{
    flex: 1;
    height: 100%;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    background-color: #fafafb;
}
.button-divider {
    width: 1rpx;
    height: 80%;
    background-color: #e0e0e0;
}
.bottom-button:active{
    background-color: #585e6e;
    color: #fff;
}
</style>