109 lines
3.1 KiB
Vue
109 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import { ref, reactive } from "vue"
|
||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||
import { isEmpty } from "radash"
|
||
|
||
import * as hooks from "@@/hooks"
|
||
import * as router from "@@/router"
|
||
import { faceApi } from "@@/api"
|
||
import { SERVICE_IMAGE } from "@@/constant/index"
|
||
|
||
import { filePath } from "@@/utils/file"
|
||
|
||
const state = reactive<any>({
|
||
detailType: "add",
|
||
detailId: null,
|
||
detail: null,
|
||
header: {},
|
||
})
|
||
const applyForm = reactive<any>({
|
||
faceImg: [],
|
||
})
|
||
const uploadFileUrl = ref<any>("")
|
||
const applyFormRules = reactive<any>({
|
||
faceImg: [{ required: true, message: "请上传人脸图片" }],
|
||
})
|
||
onLoad(async (options: any) => {
|
||
const { type, id } = options
|
||
if (!isEmpty(type)) state.detailType = type
|
||
if (!isEmpty(id)) state.detailId = id
|
||
state.header = hooks.useDefaultHeader()
|
||
if (type === "edit") {
|
||
applyForm.faceImg = []
|
||
uploadFileUrl.value = ""
|
||
await getDetail()
|
||
}
|
||
})
|
||
onShow(() => { })
|
||
|
||
const getDetail = async () => {
|
||
if (isEmpty(state.detailId)) return
|
||
const { data } = await faceApi.get({ id: state.detailId })
|
||
if (!isEmpty(data)) {
|
||
const img = filePath(data.faceImg)
|
||
applyForm.faceImg = [img]
|
||
uploadFileUrl.value = img
|
||
}
|
||
}
|
||
|
||
const beforeComplete = (uploadFile: any) => {
|
||
if (JSON.parse(uploadFile.data).code == 0) {
|
||
uploadFileUrl.value = JSON.parse(uploadFile.data).data.url
|
||
return true
|
||
} else {
|
||
uploadFileUrl.value = ""
|
||
return false
|
||
}
|
||
}
|
||
|
||
const applyFormRef = ref<any>(null)
|
||
const doSubmit = async () => {
|
||
applyFormRef.value.submit()
|
||
const { isPass } = applyFormRef.value.validate()
|
||
if (!isPass || !uploadFileUrl.value) return
|
||
try {
|
||
uni.showLoading({ title: "提交中...", mask: false })
|
||
const { data, code }: any =
|
||
state.detailType == "edit"
|
||
? await faceApi.put({ faceImg: uploadFileUrl.value, id: state.detailId })
|
||
: await faceApi.create({ faceImg: uploadFileUrl.value })
|
||
if (code != 0) throw new Error()
|
||
uni.hideLoading()
|
||
uni.showToast({ title: "提交成功", icon: "none" })
|
||
router.back()
|
||
} catch (error) {
|
||
console.error(error)
|
||
uni.hideLoading()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<crud-layout :title="state.detailId ? '修改人脸' : '人脸上传'" :bg="filePath(SERVICE_IMAGE.blueBg)">
|
||
<view class="h-30rpx" />
|
||
<view class="card px-30rpx py-40rpx">
|
||
<tm-form ref="applyFormRef" v-model="applyForm" :rules="applyFormRules" direction="vertical">
|
||
<tm-form-item name="faceImg" label="人脸图片" :required="false" :showBottom="false">
|
||
<tm-upload-photo :maxFileSize="1024 * 1024 * 5" :header="state.header"
|
||
:rangUrl="applyForm.faceImg[0]" :beforeComplete="beforeComplete" v-model="applyForm.faceImg"
|
||
:maxCount="1" :column="2" img-height="320" :url="'/api/admin/sys-file/upload'" />
|
||
</tm-form-item>
|
||
<view class="sub-text-20 c-red!">注：图片大小不超过5M</view>
|
||
</tm-form>
|
||
</view>
|
||
<view v-if="state.detailType != 'view'"
|
||
class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-30rpx m-t-60rpx sub-text-30 color-white!"
|
||
@tap="doSubmit">
|
||
{{ state.detailId ? "修改" : "提交" }}
|
||
</view>
|
||
</crud-layout>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep() {
|
||
.tmFormItemLabel {
|
||
padding-bottom: 10rpx !important;
|
||
}
|
||
}
|
||
</style>
|