ys-app/src/pages/business/CRM/weekPlanUpdate.vue

<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'修改周计划'" :leftFlag="true" :rightFlag="true">
                <template #right>
                    <view class="head-right" @click="submitForm">
                        <uni-icons custom-prefix="iconfont" type="icon-phonebaocun" size="22"
                            color="#B7D2FF"></uni-icons>保存
                    </view>
                </template>
            </customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 正文内容 -->
            <view class="week-plan-title">
                <view>姓名：赵欣鸣</view>
                <view>2025-09   第 3 周</view>
            </view>
            <view class="white-bg white-bg-2">
                <view class="w-b-title">2025-09-21 星期一
                    <text>
                        <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                    </text>
                </view>
                <view class="form-con">
                    <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" label-position="top">
                        <uni-forms-item label="工作类型" name="workType">
                            <view  class="form-picker">
                                <picker @change="changeValue" :value="workIndex" :range="workList">
                                    <view class="flex">
                                        {{workList[workIndex]}}
                                        <uni-icons type="down" size="20" color="#A0A0A0"></uni-icons>
                                    </view>
                                </picker>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item label="内容" name="content">
                            <uni-easyinput  type="textarea" autoHeight v-model="formData.content" placeholder="请输入" class="form-texarea" />
                        </uni-forms-item>
                    </uni-forms>

                </view>

            </view>


        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import multipleSelect from '@/components/multipleSelect.vue'

// 工作类型
let workIndex= ref(0);
const workList = ["外出","出差","公司","办事处"];

// 表单ref
const formRef = ref(null);

// 表单数据
const formData = ref({
    workType:'',
    content: ''
});
// 验证规则
const rules = {
    workType: {
        rules: [
            { required: true, errorMessage: '请选择工作类型' }
        ]
    }

};

// 选择工作类型
const changeValue = (e) => {
    workIndex =  e.detail.value;
    formData.value.workType = workList[workIndex]
};

// 保存
const submitForm = async () => {
    try {
        // 验证表单
        await formRef.value.validate();

        // 验证通过后的操作
        uni.showToast({
            title: '验证通过',
            icon: 'success'
        });
        console.log('表单数据:', formData.value);

        // 这里可以添加提交到服务器的代码

    } catch (err) {
        console.log('表单验证失败:', err);
    }
};


</script>

<style scoped>
.week-plan-title{
    color:#fff;
    padding: 0 30rpx 30rpx;
    display: flex;
    justify-content: space-between;
}
.white-bg {
    width: 690rpx;
    margin: 0;
    border-radius: 8px 8px 0 0;
}

.white-bg.white-bg-2 {
    margin-bottom: 20rpx;
}
.white-bg.white-bg-3 {
    border-radius:0
}

.white-bg .w-b-title {
    color: #3384DF;
    font-size: 38rpx;
}

.form-con{
    padding:30rpx 0 0;
}
:deep(.form-con .uni-forms-item){
    margin-bottom:22px !important;
}

</style>