|
|
@@ -2,7 +2,7 @@
|
|
|
<view class="container">
|
|
|
<!-- 提示信息区域 -->
|
|
|
<view class="header">
|
|
|
- <view class="header_top">欢迎加入七年级一班!!</view>
|
|
|
+ <view class="header_top">欢迎加入{{ currentClass }}!!</view>
|
|
|
<view>为确保您的信息顺利通过,请上传有效信息</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -18,7 +18,7 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 性别区域 -->
|
|
|
- <!-- <view class="box">
|
|
|
+ <view class="box">
|
|
|
<view class="box_key">
|
|
|
<text class="text">*</text>
|
|
|
性别
|
|
|
@@ -34,7 +34,7 @@
|
|
|
女
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
+ </view>
|
|
|
|
|
|
<!-- 人脸图片区域 -->
|
|
|
<view class="box2">
|
|
|
@@ -42,10 +42,17 @@
|
|
|
<text class="text">*</text>
|
|
|
人脸图片
|
|
|
</view>
|
|
|
- <view class="box_upload">
|
|
|
+ <view v-if="!headImage" class="box_upload" @click="handleUpload">
|
|
|
<uni-icons type="plusempty" size="30" color="#666666"></uni-icons>
|
|
|
上传照片
|
|
|
</view>
|
|
|
+ <view v-else class="box_upload">
|
|
|
+ <image :src="headImage" mode="aspectFill" style="width: 160rpx; height: 160rpx" @click="clickImg(headImage)"></image>
|
|
|
+ <!-- 图片删除图标 -->
|
|
|
+ <view class="delete" @click="deleteImg">
|
|
|
+ <uni-icons type="close" size="20"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="tips">注:支持.jpg .png,五官清晰无遮挡,大小不超过2M</view>
|
|
|
|
|
|
@@ -64,17 +71,18 @@
|
|
|
</picker>
|
|
|
</view> -->
|
|
|
|
|
|
- <view class="box_list">
|
|
|
+ <view v-for="(item, index) in list" :key="index">
|
|
|
<!-- 家属区域 -->
|
|
|
<view class="box">
|
|
|
<view class="box_key">
|
|
|
<text class="text">*</text>
|
|
|
- 家属
|
|
|
+ 家属{{ index + 1 }}
|
|
|
</view>
|
|
|
<view class="box_value">
|
|
|
- <input class="input" type="text" placeholder="请输入姓名" />
|
|
|
+ <input v-model="item.name" class="input" type="text" placeholder="请输入称呼或职业" />
|
|
|
<view class="value_icon">
|
|
|
- <uni-icons type="plus" size="25" color="#0061FF"></uni-icons>
|
|
|
+ <uni-icons v-if="index == 0" type="plus" size="25" color="#0061FF" @click="handleAdd"></uni-icons>
|
|
|
+ <uni-icons v-else type="close" size="25" color="#0061FF" @click="handleDelete(index)"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -86,7 +94,7 @@
|
|
|
手机号码
|
|
|
</view>
|
|
|
<view class="box_value">
|
|
|
- <input class="input" type="text" placeholder="请输入手机号码" />
|
|
|
+ <input v-model="item.phone" class="input" type="text" placeholder="请输入手机号码" />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -97,33 +105,318 @@
|
|
|
家属与本人的关系
|
|
|
</view>
|
|
|
<view class="box_value">
|
|
|
- <input class="input" type="text" placeholder="请输入家属与本人的关系" />
|
|
|
+ <input v-model="item.ship" class="input" type="text" placeholder="请输入家属与本人的关系" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="btn">确认</view>
|
|
|
+ <view class="btn" @click="handleConfirm">确认</view>
|
|
|
+
|
|
|
+ <!-- 用于图片压缩的canvas画布 -->
|
|
|
+ <canvas
|
|
|
+ :style="{
|
|
|
+ width: cw + 'px',
|
|
|
+ height: cw + 'px',
|
|
|
+ position: 'absolute',
|
|
|
+ zIndex: -1,
|
|
|
+ left: '-10000rpx',
|
|
|
+ top: '-10000rpx'
|
|
|
+ }"
|
|
|
+ canvas-id="zipCanvas"
|
|
|
+ ></canvas>
|
|
|
+ <!--画布结束-->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { onLoad } from '@dcloudio/uni-app'
|
|
|
import { ref } from 'vue'
|
|
|
+import { getQueryString } from '@/utils/getParams.js'
|
|
|
+import { myRequest } from '@/utils/api.js'
|
|
|
+import { decryptDes } from '@/utils/des.js'
|
|
|
+import getLessLimitSizeImage from '@/utils/imageCompress.js'
|
|
|
|
|
|
// 姓名
|
|
|
-const name = ref()
|
|
|
+const name = ref('')
|
|
|
// 性别
|
|
|
const gender = ref(1)
|
|
|
+// 照片
|
|
|
+const headImage = ref('')
|
|
|
// 时间组当前激活索引
|
|
|
-const currentIndex = ref()
|
|
|
+// const currentIndex = ref()
|
|
|
// 时间组数据
|
|
|
-const array = ref(['上午', '下午'])
|
|
|
+// const array = ref(['上午', '下午'])
|
|
|
+
|
|
|
+const gradeId = ref('')
|
|
|
+const classId = ref('')
|
|
|
+const departmentId = ref('')
|
|
|
+const departmentId_list = ref('')
|
|
|
+const currentClass = ref('')
|
|
|
+
|
|
|
+const list = ref([
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ ship: '',
|
|
|
+ departmentId: departmentId_list.value
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+//画板边长默认是屏幕宽度,正方形画布
|
|
|
+const cw = uni.getSystemInfoSync().windowWidth
|
|
|
+
|
|
|
+onLoad((options) => {
|
|
|
+ // console.log(options)
|
|
|
+ if (options.q) {
|
|
|
+ const data = decodeURIComponent(options.q)
|
|
|
+ gradeId.value = getQueryString(data, 'gradeId')
|
|
|
+ classId.value = getQueryString(data, 'classId')
|
|
|
+ departmentId.value = getQueryString(data, 'departmentId')
|
|
|
+ departmentId_list.value = getQueryString(data, 'departmentId_list')
|
|
|
+ currentClass.value = getQueryString(data, 'currentClass')
|
|
|
+ } else {
|
|
|
+ gradeId.value = options.gradeId
|
|
|
+ classId.value = options.classId
|
|
|
+ departmentId.value = options.departmentId
|
|
|
+ departmentId_list.value = options.departmentId_list
|
|
|
+ currentClass.value = options.currentClass
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
// 切换性别回调
|
|
|
const handlegender = (v) => {
|
|
|
gender.value = v
|
|
|
}
|
|
|
// 切换时间组回调
|
|
|
-const bindPickerChange = (e) => {
|
|
|
- currentIndex.value = e.detail.value
|
|
|
+// const bindPickerChange = (e) => {
|
|
|
+// currentIndex.value = e.detail.value
|
|
|
+// }
|
|
|
+
|
|
|
+// 上传照片回调
|
|
|
+const handleUpload = () => {
|
|
|
+ uni.chooseMedia({
|
|
|
+ count: 1,
|
|
|
+ mediaType: ['image'],
|
|
|
+ sourceType: ['album'],
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ success: (res) => {
|
|
|
+ // console.log(res.tempFiles)
|
|
|
+
|
|
|
+ res.tempFiles.forEach((ele) => {
|
|
|
+ if (ele.fileType === 'image' && ele.size > 1024 * 1024 * 2) {
|
|
|
+ //这里的id和页面中写的html代码的canvas的id要一致
|
|
|
+ let canvasId = 'zipCanvas'
|
|
|
+ //原图的路径
|
|
|
+ let imagePath = ele.tempFilePath
|
|
|
+ //大小限制1024kb
|
|
|
+ let limitSize = 1024 * 2
|
|
|
+ //初始绘画区域是画布自身的宽度也就是屏幕宽度
|
|
|
+ let drawWidth = uni.getSystemInfoSync().windowWidth
|
|
|
+ // 图片过大压缩
|
|
|
+ getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
|
|
|
+ handleUploadMini({ tempFilePath: resPath, fileType: ele.fileType })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ handleUploadMini(ele)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const handleUploadMini = (ele) => {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '上传中,请稍后',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+ uni.uploadFile({
|
|
|
+ url: `https://www.campussmartlife.com/smartApi/wanzai/api/upload/toCos`,
|
|
|
+ filePath: ele.tempFilePath,
|
|
|
+ name: 'files',
|
|
|
+ header: {
|
|
|
+ token: uni.getStorageSync('token') || '',
|
|
|
+ user_head: uni.getStorageSync('userhead') || ''
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ // console.log(uploadFileRes)
|
|
|
+ let imgUrl = JSON.parse(uploadFileRes.data).data
|
|
|
+
|
|
|
+ const result = JSON.parse(decryptDes(imgUrl))
|
|
|
+ // console.log(result)
|
|
|
+ headImage.value = result
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '上传失败',
|
|
|
+ icon: 'error'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ complete: () => {
|
|
|
+ uni.hideLoading()
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 点击图片回调
|
|
|
+const clickImg = (url) => {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [url],
|
|
|
+ current: 1
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 删除图片回调
|
|
|
+const deleteImg = () => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除该图片吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ headImage.value = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 家属添加图标回调
|
|
|
+const handleAdd = () => {
|
|
|
+ list.value.push({
|
|
|
+ name: '',
|
|
|
+ phone: '',
|
|
|
+ ship: '',
|
|
|
+ departmentId: departmentId_list.value
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 家属删除图标回调
|
|
|
+const handleDelete = (index) => {
|
|
|
+ // console.log(index)
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除该家属吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ list.value.splice(index, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 确认按钮回调
|
|
|
+const handleConfirm = () => {
|
|
|
+ const flag = verify()
|
|
|
+
|
|
|
+ if (flag) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定提交吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ handleConfirmReq()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 验证提交数据是否合法
|
|
|
+const verify = () => {
|
|
|
+ if (!name.value) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请输入姓名',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ let reg_name = /^[\u4e00-\u9fa5]{2,4}$/
|
|
|
+ if (!reg_name.test(name.value)) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '姓名格式错误',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!headImage.value) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '请上传图片',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ // if (!currentIndex.value) {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '请选择时间组',
|
|
|
+ // icon: 'none'
|
|
|
+ // })
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+
|
|
|
+ let res = list.value.some((ele) => !ele.name || !ele.phone || !ele.ship)
|
|
|
+
|
|
|
+ if (res) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '家属数据不能为空',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ let res2 = list.value.some((ele) => !reg_name.test(ele.name))
|
|
|
+
|
|
|
+ if (res2) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '家属姓名格式错误',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ let reg_phone = /^1[3-9]\d{9}$/
|
|
|
+ let res3 = list.value.some((ele) => !reg_phone.test(ele.phone))
|
|
|
+
|
|
|
+ if (res3) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '家属手机号码格式错误',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
+// 确认请求
|
|
|
+const handleConfirmReq = async () => {
|
|
|
+ let data = {
|
|
|
+ name: name.value,
|
|
|
+ sexId: gender.value,
|
|
|
+ headImage: headImage.value,
|
|
|
+ departmentId: departmentId.value,
|
|
|
+ gradeId: gradeId.value,
|
|
|
+ classId: classId.value,
|
|
|
+ list: list.value
|
|
|
+ }
|
|
|
+ // console.log(data)
|
|
|
+ const res = await myRequest({
|
|
|
+ url: '/wanzai/api/smartEnrollmentUser/insertSmartEnrollmentUser',
|
|
|
+ method: 'post',
|
|
|
+ data
|
|
|
+ })
|
|
|
+ // console.log(res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '添加成功,请等待审核',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ // setTimeout(() => {
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url: '/pages/studentManage/studentManage'
|
|
|
+ // })
|
|
|
+ // }, 1500)
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -131,7 +424,7 @@ const bindPickerChange = (e) => {
|
|
|
.container {
|
|
|
box-sizing: border-box;
|
|
|
padding: 10rpx 0 30rpx 15rpx;
|
|
|
- height: 100vh;
|
|
|
+ min-height: 100vh;
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
.header {
|
|
|
@@ -177,7 +470,7 @@ const bindPickerChange = (e) => {
|
|
|
|
|
|
.input {
|
|
|
height: 100%;
|
|
|
- text-align: end;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
|
|
|
.men,
|
|
|
@@ -220,6 +513,7 @@ const bindPickerChange = (e) => {
|
|
|
}
|
|
|
|
|
|
.box_upload {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
@@ -231,6 +525,12 @@ const bindPickerChange = (e) => {
|
|
|
color: #666666;
|
|
|
border-radius: 6rpx;
|
|
|
background-color: #f2f2f2;
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ position: absolute;
|
|
|
+ right: 10rpx;
|
|
|
+ top: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -245,7 +545,7 @@ const bindPickerChange = (e) => {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- margin: 200rpx auto 0;
|
|
|
+ margin: 80rpx auto 0;
|
|
|
width: 710rpx;
|
|
|
height: 100rpx;
|
|
|
color: #fff;
|