shuhi-app/pages/index/wms/components/RemarkDialog.vue

<template>
    <u-popup :show="visible" @close="onClose" mode="center" round="10" :closeOnClickOverlay="false">
        <view class="remark-dialog"  @click="playGlobalSound">
            <view class="dialog-title">编辑备注</view>

            <!-- 备注输入框 -->
            <view class="dialog-content mb-30">
                <u-textarea v-model="remarkText" placeholder="请输入" :maxlength="200" height="100" count></u-textarea>

                <!-- 快速输入标签 -->
                <view class="quick-tags mt-10">
                    <text class="common-title">快速填入</text>
                    <view class="tags-container flex-w  mt-20">
                        <u-tag v-for="(tag, index) in quickTags" :key="index" :text="tag" plain size="mini"
                            type="primary" @click="appendTag(tag)" class="tag-item"></u-tag>
                    </view>
                </view> 
            </view>

            <!-- 底部按钮 -->
            <view class="dialog-footer">
                <u-button plain @click="onClose" class="footer-btn">取消</u-button>
                <u-button type="primary" @click="onConfirm" class="footer-btn">确定</u-button>
            </view>
        </view>
    </u-popup>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    initialValue: {
        type: String,
        default: ''
    }
})

// 点击全局音效
function playGlobalSound(){
    uni.$u.playClickSound()
}

const emit = defineEmits(['update:visible', 'confirm'])

const remarkText = ref('')
const quickTags = ref(['少书', '多书', '子母件', '书单不符'])

// 监听visible变化，初始化remarkText
watch(() => props.visible, (newVal) => {
    if (newVal) {
        remarkText.value = props.initialValue
    }
})

// 追加快速标签
const appendTag = (tag) => {
    remarkText.value += remarkText.value ? ' ' + tag : tag
}

// 关闭弹窗
const onClose = () => {
    emit('update:visible', false)
}

// 确认提交
const onConfirm = () => {
    emit('confirm', remarkText.value)
    onClose()
}
</script>

<style scoped>
.remark-dialog {
    width: 650rpx;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}

.dialog-title {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

.tag-item {
    margin-right: 10px;
    margin-bottom: 10px;
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.footer-btn {
    flex: 1;
}
</style>