shuhi-app/pages/order/components/track-form.vue

<template>
    <view class="track-form">
        <view class="header">
            <view class="line"></view>
            <text class="title">新增跟进记录</text>
        </view>
        <view class="field">
            <text class="label">任务详情</text>
            <u-textarea v-model="content" placeholder="请输入" :height="120" :autoHeight="true"></u-textarea>
        </view>
        <view class="field">
            <text class="label">上传图片</text>
            <cy-upload :filename="files" @update:filename="files = $event" @update:loading="uploading = $event" />
        </view>
        <view class="actions">
            <u-button type="primary" :loading="uploading" :disabled="uploading || submitting" @click="submit">跟进</u-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import CyUpload from '@/components/cy-upload/index.vue'

const emit = defineEmits(['submit'])

const content = ref('')
const files = ref([])
const uploading = ref(false)
const submitting = ref(false)

const submit = () => {
    if (uploading.value || submitting.value) return
    submitting.value = true
    emit('submit', { content: content.value, files: files.value })
    content.value = ''
    files.value = []
    submitting.value = false
}
</script>

<style lang="scss" scoped>
.track-form {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 24rpx;
}
.header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 12rpx;
}
.line {
    width: 8rpx;
    height: 32rpx;
    background: #22ac38;
    border-radius: 4rpx;
}
.title {
    font-size: 30rpx;
    color: #333333;
}
.field {
    margin-top: 16rpx;
}
.label {
    display: block;
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 8rpx;
}
.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
}
</style>