436 lines
12 KiB
Vue
436 lines
12 KiB
Vue
<template>
|
||
<BasicLayout>
|
||
<view class="page-container">
|
||
<view class="notice-box">
|
||
<text class="notice-text"
|
||
>特别提示：家中家庭成员可多人关联，可接收孩子在校情况、学业情况等。</text
|
||
>
|
||
</view>
|
||
<view
|
||
v-for="(student, index) in students"
|
||
:key="index"
|
||
class="form-section mb-15"
|
||
>
|
||
<view v-if="index > 0" class="remove-btn" @click="removeStudent(index)">
|
||
<u-icon name="minus-circle" color="#ff4d4f" size="18"></u-icon>
|
||
</view>
|
||
|
||
<view class="avatar-section">
|
||
<view class="avatar-uploader-container-rect">
|
||
<CustomUpload
|
||
@select="(event:any) => afterRead(event, index)"
|
||
@close="handleAvatarClose(index)"
|
||
:sourceType="['camera', 'album']"
|
||
:value="imagUrl(student.xstx)"
|
||
>
|
||
<view class="avatar-placeholder">
|
||
<view class="wh-full flex-col-center">
|
||
<svg
|
||
t="1729656215869"
|
||
class="icon"
|
||
viewBox="0 0 1024 1024"
|
||
version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
p-id="5302"
|
||
width="32"
|
||
height="32"
|
||
>
|
||
<path
|
||
d="M851.552 890.88 172.448 890.88c-74.592 0-135.296-60.672-135.296-135.296L37.152 370.752c0-74.624 60.672-135.328 135.296-135.328l132.16 0L302.912 195.904c0-34.624 28.192-62.816 62.816-62.816l302.016 0c29.408 0 53.312 23.904 53.312 53.312l0 49.024 130.464 0c74.592 0 135.296 60.672 135.296 135.328l0 384.832C986.816 830.208 926.144 890.88 851.552 890.88zM172.448 283.456c-48.128 0-87.296 39.168-87.296 87.328l0 384.832c0 48.128 39.168 87.296 87.296 87.296l679.104 0c48.128 0 87.296-39.168 87.296-87.296L938.848 370.752c0-48.16-39.168-87.328-87.296-87.328L716.8 283.424c-24.096 0-43.712-19.616-43.712-43.712L673.088 186.4c0-2.944-2.368-5.312-5.312-5.312l-302.016 0c-8.16 0-14.816 6.656-14.816 14.816L350.944 237.12c0 25.536-20.768 46.304-46.304 46.304L172.448 283.424zM512 755.84c-107.04 0-194.08-87.072-194.08-194.08S404.992 367.68 512 367.68s194.08 87.072 194.08 194.08S619.04 755.84 512 755.84zM512 415.68c-80.576 0-146.08 65.536-146.08 146.08S431.456 707.84 512 707.84s146.08-65.536 146.08-146.08S592.576 415.68 512 415.68zM816.8 438.016c-25.568 0-46.336-20.768-46.336-46.336s20.768-46.336 46.336-46.336 46.336 20.768 46.336 46.336S842.368 438.016 816.8 438.016zM816.8 390.016l-1.664 1.664c0 0.896 0.736 1.664 1.664 1.664L816.8 390.016z"
|
||
fill="#cdcdcd"
|
||
p-id="5303"
|
||
></path>
|
||
</svg>
|
||
</view>
|
||
</view>
|
||
</CustomUpload>
|
||
</view>
|
||
<text class="avatar-upload-note">上传学生人像用于校园进出</text>
|
||
</view>
|
||
|
||
<view class="student-info-form">
|
||
<u--form label-width="auto">
|
||
<u-form-item
|
||
label="姓名"
|
||
:prop="`students[${index}].xsxm`"
|
||
required
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="student.xsxm"
|
||
placeholder="请输入学生姓名"
|
||
border="none"
|
||
inputAlign="right"
|
||
></u--input>
|
||
</u-form-item>
|
||
<!-- <u-form-item
|
||
label="与学生关系"
|
||
:prop="`students[${index}].jzxsgxId`"
|
||
required
|
||
borderBottom
|
||
>
|
||
<view @click="openDicPicker(student)" class="flex-row flex-1 justify-end">
|
||
<view v-if="!student.jzxsgxId" style="color: rgb(192, 196, 204);">请选择与学生关系</view>
|
||
<view v-else>{{ student.jzxsgxmc }}</view>
|
||
</view>
|
||
|
||
</u-form-item> -->
|
||
<u-form-item
|
||
label="身份证号"
|
||
:prop="`students[${index}].xssfzh`"
|
||
required
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="student.xssfzh"
|
||
placeholder="请输入学生身份证号"
|
||
border="none"
|
||
inputAlign="right"
|
||
></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<view class="add-child-btn mb-15" @click="addMoreChildren">
|
||
<u-icon name="plus" color="#416AF2" size="20"></u-icon>
|
||
<text class="add-child-btn-text">新增多孩</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<template #bottom>
|
||
<view class="white-bg-color py-5">
|
||
<view class="flex-row items-center pb-10 pt-5">
|
||
<u-button text="提交" class="mx-15" type="primary" @click="submit" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</BasicLayout>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { hideLoading, showLoading, showToast } from "@/utils/uniapp";
|
||
import { ref } from "vue";
|
||
import { attachmentUpload } from "@/api/system/upload";
|
||
import CustomUpload from "/src/components/BasicUpload/CustomUpload.vue";
|
||
|
||
import { useForm } from "@/components/BasicForm/hooks/useForm";
|
||
import { glxsApi } from "@/api/base/server";
|
||
import { useUserStore } from "@/store/modules/user";
|
||
import { useDataStore } from "@/store/modules/data";
|
||
import {imagUrl} from "@/utils";
|
||
|
||
const { getGlobal, getAppCode } = useDataStore();
|
||
const { getUser, setUser, setCurXs } = useUserStore();
|
||
|
||
const dicOptions = ref<any>([[[]]]);
|
||
const dicPickerRef = ref();
|
||
const dicVal = ref<number[]>([]);
|
||
|
||
const students = ref([
|
||
{
|
||
xsxm: "",
|
||
xssfzh: "",
|
||
xstx: "",
|
||
jzxsgxId: "",
|
||
jzxsgxmc: ""
|
||
},
|
||
]);
|
||
|
||
const curXs = ref(students.value[0]);
|
||
|
||
const openDicPicker = (xs: any) => {
|
||
curXs.value = xs;
|
||
dicVal.value = [0];
|
||
for (let i = 0; i < dicOptions.value[0].length; i++) {
|
||
if (xs.jzxsgxId == dicOptions.value[0][i].dictionaryValue) {
|
||
dicVal.value = [i];
|
||
break;
|
||
}
|
||
}
|
||
dicPickerRef.value.open();
|
||
};
|
||
|
||
const dicChanged = (dicArr: any) => {
|
||
console.log(dicArr);
|
||
const dic = dicOptions.value[0][dicArr[0]];
|
||
curXs.value.jzxsgxId = dic.dictionaryValue;
|
||
curXs.value.jzxsgxmc = dic.dictionaryCode;
|
||
}
|
||
|
||
async function afterRead(event: any, index: number) {
|
||
if (!event.tempFilePaths || event.tempFilePaths.length === 0) {
|
||
showToast({ title: "图片选择失败", icon: "none" });
|
||
return;
|
||
}
|
||
const tempFilePath = event.tempFilePaths[0];
|
||
showLoading({ title: "上传中" });
|
||
try {
|
||
const res = await attachmentUpload(tempFilePath);
|
||
const result = res.result;
|
||
if (result && result.length > 0 && result[0].filePath) {
|
||
students.value[index].xstx = result[0].filePath;
|
||
console.log(`Student ${index} avatar uploaded:`, result[0].filePath);
|
||
showToast({ title: "上传成功" });
|
||
} else {
|
||
showToast({ title: "上传失败，请重试", icon: "none" });
|
||
console.error("Upload result format error:", result);
|
||
}
|
||
} catch (error) {
|
||
showToast({ title: "上传出错", icon: "none" });
|
||
console.error("Upload error:", error);
|
||
} finally {
|
||
hideLoading();
|
||
}
|
||
}
|
||
|
||
function handleAvatarClose(index: number) {
|
||
students.value[index].xstx = "";
|
||
}
|
||
|
||
function addMoreChildren() {
|
||
students.value.push({
|
||
xsxm: "",
|
||
xssfzh: "",
|
||
xstx: "",
|
||
jzxsgxId: "",
|
||
jzxsgxmc: ""
|
||
});
|
||
}
|
||
|
||
function removeStudent(index: number) {
|
||
if (students.value.length > 1) {
|
||
students.value.splice(index, 1);
|
||
} else {
|
||
showToast({ title: "至少需要一个子女信息", icon: "none" });
|
||
}
|
||
}
|
||
|
||
async function submit() {
|
||
for (const student of students.value) {
|
||
if (!student.xstx) {
|
||
showToast({ title: "请上传子女照片", icon: "none" });
|
||
return;
|
||
}
|
||
if (!student.xsxm) {
|
||
showToast({ title: "请输入子女姓名", icon: "none" });
|
||
return;
|
||
}
|
||
if (!student.xssfzh) {
|
||
showToast({ title: "请输入子女身份证号", icon: "none" });
|
||
return;
|
||
}
|
||
}
|
||
showLoading({ title: "提交中" });
|
||
try {
|
||
for (let i = 0; i < students.value.length; i++) {
|
||
students.value[i].jzxsgxId = getUser.jzxsgxId;
|
||
}
|
||
const res = await glxsApi({
|
||
xsList: students.value,
|
||
jzId: getUser.jzId,
|
||
openId: getGlobal.openId,
|
||
appCode: getAppCode,
|
||
});
|
||
hideLoading();
|
||
setUser(res.result);
|
||
for (let i = 0; i < res.result.xsList.length; i++) {
|
||
if (res.result.xsList[i].sfzh == students.value[0].xssfzh) {
|
||
setCurXs(res.result.xsList[i]);
|
||
break;
|
||
}
|
||
}
|
||
|
||
uni.reLaunch({
|
||
url: "/pages/base/home/index",
|
||
});
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
console.log("glxs");
|
||
// const resDic = await dicApi({ pid: 1622287061 });
|
||
// dicOptions.value = [resDic.result];
|
||
// formSchema[1].componentProps.options = resDic.result;
|
||
// setSchema(formSchema);
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
padding: 15px; /* Consistent padding */
|
||
}
|
||
|
||
.notice-box {
|
||
background-color: #fff1f0; /* Slightly lighter red */
|
||
padding: 12px 18px;
|
||
border-radius: 8px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.notice-text {
|
||
color: #fa541c; /* Adjusted red color */
|
||
font-size: 13px;
|
||
}
|
||
|
||
.form-section {
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
padding: 20px 20px 0 20px;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
|
||
/* Added margin-bottom directly here for spacing between sections */
|
||
margin-bottom: 5px;
|
||
position: relative;
|
||
}
|
||
|
||
.avatar-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 25px; /* Increased margin */
|
||
}
|
||
|
||
/* Keep avatar uploader styles relevant to CustomUpload */
|
||
/* Replace with rectangular styles */
|
||
.avatar-uploader-container-rect {
|
||
/* Assuming uni.rpx units based on class names like wi-180, he-240 */
|
||
width: 180rpx;
|
||
height: 240rpx;
|
||
margin: 0 auto 10px auto; /* mx-auto mb-10 */
|
||
border-radius: 6px; /* r-md approximation */
|
||
border: 1px solid #cccccc;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
/* Remove old circular styles */
|
||
/* .avatar-uploader-container { ... } */
|
||
|
||
.avatar-placeholder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Keep inner placeholder for centering SVG */
|
||
.avatar-placeholder-inner {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Remove old hint style */
|
||
/* .avatar-upload-hint { ... } */
|
||
|
||
.avatar-upload-note {
|
||
color: #999;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.student-info-form {
|
||
margin-bottom: 20px; /* Restore original margin */
|
||
}
|
||
|
||
.form-title {
|
||
display: block;
|
||
font-size: 16px; /* Slightly larger title */
|
||
font-weight: 600; /* Bolder */
|
||
margin-bottom: 15px; /* Space below title */
|
||
}
|
||
|
||
/* Restore remove button style if needed, or adapt */
|
||
/* Updated remove button style */
|
||
.remove-btn {
|
||
position: absolute;
|
||
top: 10px; /* Closer to top edge */
|
||
right: 10px; /* Closer to right edge */
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
/* Optional: add padding for easier clicking */
|
||
// padding: 5px;
|
||
}
|
||
|
||
.add-child-btn {
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
padding: 15px; /* Increased padding */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 10px; /* Increased margin */
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.add-child-btn-text {
|
||
color: #416af2;
|
||
margin-left: 8px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Adjust uview form item styles */
|
||
::v-deep .u-form-item {
|
||
margin-bottom: 0; /* Remove default margin if any */
|
||
}
|
||
|
||
::v-deep .u-form-item__body {
|
||
padding: 15px 0 !important; /* Adjusted padding */
|
||
/* Align items vertically if label wraps */
|
||
// align-items: flex-start;
|
||
}
|
||
|
||
::v-deep .u-form-item__body__left {
|
||
/* Allow label to take necessary width, adjust as needed */
|
||
// flex: 0 0 80px;
|
||
}
|
||
|
||
::v-deep .u-form-item__body__left__text {
|
||
font-size: 15px;
|
||
color: #333;
|
||
line-height: 1.5; /* Improve line spacing if label wraps */
|
||
/* Ensure required asterisk is red and BEFORE the text */
|
||
display: flex; /* Use flex to control order */
|
||
align-items: center; /* Vertically center asterisk and text */
|
||
|
||
span {
|
||
color: #f56c6c;
|
||
/* Order asterisk first */
|
||
order: -1;
|
||
margin-right: 4px;
|
||
/* Adjust vertical alignment if needed */
|
||
// line-height: 1;
|
||
// display: inline-block;
|
||
// vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
::v-deep .u-input {
|
||
text-align: right; /* Align input text to the right */
|
||
}
|
||
|
||
::v-deep .u-border-bottom {
|
||
/* Ensure border spans full width if needed, or adjust */
|
||
// left: 0 !important;
|
||
// right: 0 !important;
|
||
}
|
||
</style>
|