学生二维码扫码页面

src/pages/scanCode/index.vue

@@ -1,43 +1,57 @@
 <template>
     <div class="box">
         <div class="box_title">五育评价</div>
-        <van-form @submit="onSubmit">
+        <van-form @submit="onSubmit" >
             <van-cell-group inset>
-                <van-field readonly v-model="newForm.wdwp_xs_xm" label="学生姓名" placeholder="请输入学生姓名" />
-                <van-field readonly v-model="newForm.wdwp_xs_xjh" label="学籍号" placeholder="请输入学籍号" />
-                <div class="flex px-18px py-5px">
-                    <div class="mr-5px min-w-80px" style="font-size: var(--van-cell-font-size);">拍照上传</div>
-                    <van-uploader class="w-65vw" v-model="fileList" :after-read="afterRead" capture="camera" limit="1">
+                <div class="van-doc-demo-block mt-10px">
+                    <h2 class="text-4vw text-gray-600 px-10px py-5px">学生信息</h2>
+                    <div class="van-cell-group van-cell-group--inset">
+                        <van-field class="bg-white" disabled v-model="newForm.wdwp_xs_xm" label="学生姓名"
+                            placeholder="请输入姓名" />
+                        <van-field disabled v-model="newForm.wdwp_xs_xjh" label="学籍号" placeholder="请输入学籍号" />
+                    </div>
+                </div>
+                <div class="px-10px py-5px">
+                    <div class="mr-5px min-w-80px my-10px text-4vw text-gray-600 py-5px">拍照上传</div>
+                    <van-uploader v-model="fileList" :after-read="afterRead" capture="camera" :max-count="2">
                         <template #preview-cover>
                         </template>
                     </van-uploader>
                 </div>
-                <div class="px-18px" style="margin: 6vw 0;">检查项目 : </div>
-                <div v-for="item in jcsmData" :key="item.xdww_id" style="padding: 0 5px;">
-                    <div>{{ item.xdww_name }}</div>
-                    <div v-for="pf in item.xddy_dygl_wypj_wdpfx" :key="pf.xdwwp_id" class="px_15 flex">
-                        <!-- <span class="pf_name"> {{ pf.xdwwp_name }} </span> -->
-                        <van-field name="score" type="number" maxlength="3" v-model="pf.fs" :label="pf.xdwwp_name"
-                            placeholder="请输入分数" />
+                <div class="px-10px" style="margin: 6vw 0;">检查项目 : </div>
+                <div class="van-doc-demo-block mt-10px">
+                    <div v-for="item in jcsmData" :key="item.xdww_id">
+                        <div class="text-4vw text-gray-600 px-10px py-5px mt-10px">{{ item.xdww_name }}</div>
+                        <div v-for="pf in item.xddy_dygl_wypj_wdpfx" :key="pf.xdwwp_id"
+                            class="flex van-cell-group van-cell-group--inset bg-white-500">
+                            <van-field label-width="160" name="score" type="number" maxlength="3" v-model="pf.fs" :label="pf.xdwwp_name"
+                                placeholder="请输入分数" />
+                        </div>
+                    </div>
+                </div>
+                <div class="van-doc-demo-block mt-10px">
+                    <h2 class="text-4vw text-gray-600 px-10px py-5px">评分信息</h2>
+                    <div class="van-cell-group van-cell-group--inset">
+                        <van-field name="pfyhlx" v-model="newForm.wdwp_pfyhlx_name" is-link readonly label="评分用户类型"
+                            placeholder="选择评分用户类型" @click="showPicker = true" />
+                        <van-popup v-model:show="showPicker" round position="bottom">
+                            <van-picker :columns="typeList" @cancel="showPicker = false" @confirm="onConfirm" />
+                        </van-popup>
+                        <van-field :rules="[{ required: true, message: '请填写评分用户姓名' }]" v-model="newForm.wdwp_pfyh_xm" label="评分用户姓名" placeholder="请输入评分用户姓名" />
+                        <van-field v-model="dateResult" is-link readonly name="datePicker" label="日期选择" placeholder="点击选择日期"
+                            @click="datePicker = true" />
+                        <van-popup v-model:show="datePicker" position="bottom">
+                            <van-date-picker @confirm="onDateConfirm" @cancel="datePicker = false" />
+                        </van-popup>
+                        <van-field v-model="timeResult" is-link readonly name="timePicker" label="时间选择" placeholder="点击选择时间"
+                            @click="timePicker = true" />
+                        <van-popup v-model:show="timePicker" position="bottom">
+                            <van-time-picker @confirm="onTimeConfirm" @cancel="timePicker = false"
+                                :columns-type="['hour', 'minute', 'second']" />
+                        </van-popup>
                     </div>
                 </div>
-                <van-field name="pfyhlx" v-model="newForm.wdwp_pfyhlx_name" is-link readonly label="评分用户类型"
-                    placeholder="选择评分用户类型" @click="showPicker = true" />
-                <van-popup v-model:show="showPicker" round position="bottom">
-                    <van-picker :columns="typeList" @cancel="showPicker = false" @confirm="onConfirm" />
-                </van-popup>
-                <van-field v-model="newForm.wdwp_pfyh_xm" label="评分用户姓名" placeholder="请输入评分用户姓名" />
-                <van-field v-model="dateResult" is-link readonly name="datePicker" label="日期选择" placeholder="点击选择日期"
-                    @click="datePicker = true" />
-                <van-popup v-model:show="datePicker" position="bottom">
-                    <van-date-picker @confirm="onDateConfirm" @cancel="datePicker = false" />
-                </van-popup>
-                <van-field v-model="timeResult" is-link readonly name="timePicker" label="时间选择" placeholder="点击选择时间"
-                    @click="timePicker = true" />
-                <van-popup v-model:show="timePicker" position="bottom">
-                    <van-time-picker @confirm="onTimeConfirm" @cancel="timePicker = false"
-                        :columns-type="['hour', 'minute', 'second']" />
-                </van-popup>
+
             </van-cell-group>
             <div style="margin: 16px;">
                 <van-button round block type="primary" native-type="submit">
@@ -189,7 +203,7 @@ function onSubmit(info) {
         let arr2 = [];
         item?.xddy_dygl_wypj_wdpfx.forEach(key => {
             if (!key.fs) {
-                return flag = true;
+                flag = true;
             }
             arr2.push({
                 xdwwp_id: key.xdwwp_id,
@@ -218,14 +232,13 @@ function onSubmit(info) {
             flag = true;
         }
     });
-    if (flag) {
-        return showToast('请填写完整~')
-    }
-    if (newForm.wdwp_pfyh_img.length == 0) {
-        return showToast('请拍照上传照片~')
-    }
-    let img = newForm.wdwp_pfyh_img.join(';');
-    console.log(img, '999999');
+    // if (flag) {
+    //     return showToast('请填写完整~')
+    // }
+    // if (newForm.wdwp_pfyh_img.length == 0) {
+    //     return showToast('请拍照上传照片~')
+    // }
+    let img = newForm?.wdwp_pfyh_img.join(';');
     let data = {
         token: params.token,
         issubmit: '1',
@@ -256,6 +269,10 @@ function onSubmit(info) {
 <style lang="scss" scoped>
 * {
     --van-uploader-size: 15vw;
+    --van-cell-group-background: #eff2f5;
+    --van-cell-group-inset-padding: 5px 10px;
+    --van-doc-text-color-4: #969799;
+    --van-uploader-upload-background: #ffffff;
 }
 
 .flex {
@@ -270,6 +287,7 @@ function onSubmit(info) {
 .box {
     width: 100vw;
     padding: 3vw 2vw;
+    background-color: #eff2f5 !important;
 
     .box_title {
         width: 100%;
@@ -352,27 +370,47 @@ function onSubmit(info) {
         }
     }
 
-}
 
-.pop-select {
-    .el-select-dropdown__item {
-        font-size: 4vw !important;
-        height: 7vw;
-        line-height: 6vw;
-        padding: 0 10px;
+
+    .pop-select {
+        .el-select-dropdown__item {
+            font-size: 4vw !important;
+            height: 7vw;
+            line-height: 6vw;
+            padding: 0 10px;
+        }
     }
-}
 
 
 
-.pf_name {
-    min-width: 40vw;
-    // text-align: right;
-    padding-left: 5vw;
-    color: #555;
-    font-weight: 400;
+    .pf_name {
+        min-width: 40vw;
+        // text-align: right;
+        padding-left: 5vw;
+        color: #555;
+        font-weight: 400;
+    }
+
+    .van-doc-demo-block {
+        padding: 10px 20px;
+    }
+
+    .van-doc-demo-block__title {
+        margin: 0;
+        padding: 32px 16px 16px;
+        padding-top: 32px;
+        color: var(--van-doc-text-color-4);
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 16px;
+    }
+
+    .van-cell-group {
+        background: var(--van-cell-group-background);
+    }
 }
 </style>
+
 <style lang="scss">
 .elDatePicker.el-picker-panel {
     width: 53vw !important;