ys-app/src/pages/business/CRM/visitorReportAdd.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="white-bg">
                <view class="form-con">
                    <uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px" >
                        <uni-forms-item label="客户名称" name="guestName" class="f-c-right">
                            <picker @change="bindPickerChange" :value="guestIndex" :range="guestArr">
                                <view class="f-c-text">
                                    {{guestArr[guestIndex]}}
                                    <uni-icons type="right" size="20" color="#A0A0A0"></uni-icons>
                                </view>
                            </picker>
                        </uni-forms-item>
                        <uni-forms-item label="签到记录" class="f-c-right">
                            <view class="f-c-text txt-right">--</view>
                        </uni-forms-item>
                        <uni-forms-item label="我方领导" name="leader" required class="uni-forms-item is-direction-top is-top">
                            <uni-easyinput v-model="formData.leader" placeholder="请输入我方领导" />
                        </uni-forms-item>
                        <uni-forms-item label="走访日期" name="visitDate" class="uni-forms-item is-direction-top is-top">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="formData.visitDate" @change="changeDate" />
                        </uni-forms-item>
                    </uni-forms>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import{ getGuestList} from '@/api/business.js'

// 客户名称列表
let guestList = ref([]);
let guestArr = ref([])
let guestIndex = ref(0);
let selectGuestList = async ()=>{
    let res = await getGuestList();
    let list  = res.list;
    list.forEach(item => {
        guestArr.value.push(item.name)
    });
    guestList.value = res.list
}
selectGuestList();

// 选择客户列表
let bindPickerChange = (e)=>{
    console.log('picker发送选择改变，携带值为', e.detail.value)
    guestIndex.value = e.detail.value
}

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

// 表单数据
const formData = ref({
    guestName:'',
    leader:'',
    visitDate:''
});
// 验证规则
const rules = {
    leader: {
        rules: [
            { required: true, errorMessage: '我方领导不能为空' }
        ]
    }
   
};

// 修改日期
let changeDate = (e)=>{
    console.log('changeDate:', e);
};

// 保存走访报告
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>
.white-bg {
    width: 750rpx;
    padding: 30rpx 0 0;
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
}
.form-con{
    /* #ifdef APP-PLUS */
    height:calc(100vh - 100px)
    /* #endif */
    /* #ifndef APP-PLUS */
    height:calc(100vh - 80px)
    /* #endif */
}

:deep(.uni-date-x){
    display: block;
}
:deep(.uni-date-x .icon-calendar){
    float: right;
    margin-top:15rpx;
    margin-right: 20rpx;
    background:url('../../../static/images/business/icon-date.png') no-repeat;
    background-size:32rpx 35rpx;
    width:32rpx;
    height: 35rpx;
}
:deep(.uni-date-x .icon-calendar::before){
    display: none;
}
:deep(.uni-date-x .uni-date__x-input){
    padding-left:20rpx;
    color:#919191;
}
</style>