Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
078915ae 1 parent 2b40580e

✨ feat(新增儿童模块): 联调图片上传接口

Inline Side-by-side
Showing 6 changed files with 297 additions and 93 deletions
import { v4 as uuidv4 } from 'uuid';
import { ref, reactive } from 'vue'
import axios from '@/utils/axios';
import { Toast } from 'vant';
import qs from 'Qs'
// tslint:disable
export const useUpload = () => {
let lock_btn = ref(false); // 保存按钮锁
let fileList = ref([]);
let metaId = ref('');
let upload_image = reactive({ meta_id: '' });
const afterRead = (res) => {
lock_btn.value = true; // 上传开始, 不能保存
let affix = uuidv4();
// 此时可以自行将文件上传至服务器
let dataURL = res.content;
let base64url = dataURL.slice(dataURL.indexOf(',') + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
// 获取七牛token
axios.post('/srv/?a=upload', qs.stringify({
filename: `${affix}_${res.file.name}`,
file: base64url
}))
.then(res => {
if (res.data.code === 1) {
let config = {
headers: {
'Content-Type': 'application/octet-stream',
'Authorization': 'UpToken ' + res.data.token, // UpToken后必须有一个 ' '(空格)
}
}
// 上传七牛服务器
axios.post('http://upload.qiniup.com/putb64/-1/key/' + res.data.key, base64url, config)
.then(res => {
if (res.data.filekey) {
let info = res.data;
// 保存图片返回ID
axios.post('/srv/?a=upload&t=save_file', qs.stringify({
format: info.image_info.format,
hash: info.hash,
height: info.image_info.height,
width: info.image_info.width,
filekey: info.filekey,
}))
.then(res => {
upload_image.meta_id = res.data.data.meta_id;
lock_btn.value = false; // 头像上传完成, 打开锁
})
.catch(err => {
console.error(err);
})
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
Toast({
icon: 'close',
message: res.data.msg
});
})
} else {
console.warn(res);
}
})
.catch(err => {
console.error(err);
})
};
const beforeDelete = () => { // 删除图片回调
metaId = '';
upload_image.meta_id = '';
return true;
}
return {
lock_btn,
fileList,
upload_image,
metaId,
afterRead,
beforeDelete
}
}
\ No newline at end of file
......@@ -117,11 +117,11 @@ export default [{
},
children: []
}, {
path: '/me/addUser',
name: '新增儿童',
component: () => import('./views/me/addUser.vue'),
path: '/me/handleUser',
name: '新增/编辑儿童',
component: () => import('./views/me/handleUser.vue'),
meta: {
title: '新增儿童'
title: '儿童信息'
},
children: []
}, {
......
......@@ -7,7 +7,9 @@ import qs from 'Qs'
axios.interceptors.request.use(
config => {
// 发送请求前
if (config.method === 'post') {
if (config.method === 'post' &&
(config.url.indexOf('a=upload') === -1 && config.url.indexOf('upload.qiniup.com') === -1)) // 上传相关接口需要屏蔽掉
{
// POST PHP需要修改数据格式
config.data = qs.stringify(config.data)
}
......
......@@ -3,10 +3,10 @@
<p style="color: #713610; font-size: 1.25rem; padding: 1rem; text-align: center; font-weight: bold;">请录入儿童的信息</p>
<div style="">
<van-config-provider :theme-vars="themeVars">
<van-form @submit="onSubmit">
<van-form>
<van-cell-group inset>
<van-field v-model="user_info.kindergarten" name="幼儿园" label="幼儿园" placeholder="" disabled />
<van-field v-model="user_info.job" name="儿童姓名" label="儿童姓名" placeholder="请输入儿童姓名" />
<van-field v-model="user_info.name" name="儿童姓名" label="儿童姓名" placeholder="请输入儿童姓名" />
<van-row style="padding: 2vh 0;">
<van-col span="7"><span style="font-size: 14px; color: #323233; margin-left: 2vh;">儿童头像</span></van-col>
<van-col span="17"><span style="font-size: 12px; color: #B0B0B0;">请上传一张清晰的儿童照片</span></van-col>
......@@ -19,7 +19,7 @@
</van-cell-group>
<div style="margin: 2vh;">
<van-button v-if="lock_btn" loading type="primary" loading-text="上传中..." style="width: 100%;" round></van-button>
<van-button v-else @click="saveInfo" :disabled="lock_btn" type="primary" native-type="submit" style="width: 100%;" round>保存</van-button>
<van-button v-else @click="validForm" :disabled="lock_btn" type="primary" native-type="submit" style="width: 100%;" round>保存</van-button>
</div>
</van-form>
</van-config-provider>
......@@ -28,13 +28,16 @@
</template>
<script setup>
import { v4 as uuidv4 } from 'uuid';
import { useUpload } from '@/composables/useUpload.js'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const { lock_btn, fileList, upload_image, metaId, afterRead, beforeDelete } = useUpload(); // 上传图片模块
const $route = useRoute();
const $router = useRouter();
......@@ -44,88 +47,24 @@ const themeVars = {
buttonPrimaryColor: '#713610',
};
const onSubmit = (values) => {
// console.log('submit', values);
};
// 图片模块
let lock_btn = ref(false); // 保存按钮锁
let fileList = ref([]);
let upload_image = reactive({ meta_id: '' });
const afterRead = (res) => {
lock_btn.value = true; // 上传开始, 不能保存
let affix = uuidv4();
// let affix = uuid();
// 此时可以自行将文件上传至服务器
let dataURL = res.content;
let base64url = dataURL.slice(dataURL.indexOf(',') + 1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
//TODO: 获取七牛token
axios.post('/srv/?f=shzl_comment&a=upload', {
filename: `${affix}_${res.file.name}`,
file: base64url
})
.then(res => {
if (res.statusText === 'OK') {
let config = {
headers: {
'Content-Type': 'application/octet-stream',
'Authorization': 'UpToken ' + res.data.token, // UpToken后必须有一个 ' '(空格)
}
}
// 上传七牛服务器
axios.post('http://upload.qiniup.com/putb64/-1/key/' + res.data.key, base64url, config)
.then(res => {
if (res.data.filekey) {
let info = res.data;
// TODO: 保存图片返回ID
axios.post('/srv/?f=shzl_comment&a=upload&t=save_file', {
format: info.image_info.format,
hash: info.hash,
height: info.image_info.height,
width: info.image_info.width,
filekey: info.filekey,
})
.then(res => {
upload_image.meta_id = res.data.data.meta_id;
lock_btn.value = false; // 头像上传完成, 打开锁
})
.catch(err => {
console.error(err);
})
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
Toast({
icon: 'close',
message: res.data.msg
});
})
} else {
console.warn(res);
}
})
.catch(err => {
console.error(err);
})
// 验证输入项
const validForm = () => {
// if (!user_info.name) {
// Toast.fail('儿童姓名不能为空')
// return false;
// }
// if (!fileList.value.length) {
// Toast.fail('儿童头像不能为空')
// return false;
// }
saveInfo()
};
const beforeDelete = () => { // 删除图片回调
user_info.meta_id = '';
upload_image.meta_id = '';
return true;
}
let user_info = reactive({
kg_id: $route.query.kg_id,
kindergarten: $route.query.kg_name,
name: '',
meta_id: ''
meta_id: metaId.value
});
onMounted(() => {
......@@ -135,12 +74,11 @@ onMounted(() => {
// 保存用户信息
const saveInfo = () => {
// TODO: 以前接口保存的是一个ID，看后端怎么处理, perf_avatar看样子是一个图片地址
axios.post('/srv/?f=shzl_comment&a=user&t=edit', {
axios.post('/srv/?a=add_performer', {
kg_id: user_info.kg_id,
perf_name: user_info.name,
// perf_avatar: upload_image.meta_id ? upload_image.meta_id : user_info.meta_id,
meta_id: upload_image.meta_id ? upload_image.meta_id : user_info.meta_id,
perf_avatar: '',
meta_id: upload_image.meta_id ? upload_image.meta_id : metaId,
})
.then(res => {
if (res.data.code === 1) {
......@@ -148,7 +86,7 @@ const saveInfo = () => {
message: '保存成功',
duration: 1000,
onClose: () => {
goBack();
$router.go(-1)
}
});
} else {
......
<template>
<div class="add-user-page">
<p class="title">请录入儿童的信息</p>
<van-config-provider :theme-vars="themeVars">
<van-form>
<van-cell-group inset>
<van-field v-model="user_info.kindergarten" name="幼儿园" label="幼儿园" placeholder="" disabled />
<van-field v-model="user_info.name" name="儿童姓名" label="儿童姓名" placeholder="请输入儿童姓名" />
<van-row class="upload-text">
<van-col span="7"><span class="upload-text-1">儿童头像</span></van-col>
<van-col span="17"><span class="upload-text-2">请上传一张清晰的儿童照片</span></van-col>
</van-row>
<van-row style="padding-bottom: 2vh;">
<van-col span="16" offset="8">
<van-uploader v-model="fileList" :after-read="afterRead" :before-delete="beforeDelete" :max-count="1" />
</van-col>
</van-row>
</van-cell-group>
<div style="margin: 2vh;">
<van-button v-if="lock_btn" loading type="primary" loading-text="上传中..." style="width: 100%;" round>
</van-button>
<van-button v-else @click="validForm" :disabled="lock_btn" type="primary" native-type="submit"
style="width: 100%;" round>保存</van-button>
</div>
</van-form>
</van-config-provider>
</div>
</template>
<script setup>
import { useUpload } from '@/composables/useUpload.js'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import { Toast } from 'vant';
const { lock_btn, fileList, upload_image, metaId, afterRead, beforeDelete } = useUpload(); // 上传图片模块
const $route = useRoute();
const $router = useRouter();
// 自定义修改组件样式
const themeVars = {
buttonPrimaryBackground: '#F9D95C',
buttonPrimaryBorderColor: '#F9D95C',
buttonPrimaryColor: '#713610',
};
// 编辑状态
if ($route.query.type === 'EDIT') {
fileList.value.push({
url: $route.query.avatar,
isImage: true
})
}
// 验证输入项
const validForm = () => {
if (!user_info.name) {
Toast.fail('儿童姓名不能为空')
return false;
}
if (!fileList.value.length) {
Toast.fail('儿童头像不能为空')
return false;
}
saveInfo()
};
let user_info = reactive({
kg_id: $route.query.kg_id,
kindergarten: $route.query.kg_name,
name: $route.query.name,
meta_id: metaId.value
});
// 保存用户信息
const saveInfo = () => {
let url = $route.query.type === 'Add' ? 'add_performer' : 'add_performer';
axios.post(`/srv/?a=${url}`, {
kg_id: user_info.kg_id,
perf_name: user_info.name,
perf_avatar: '',
meta_id: upload_image.meta_id ? upload_image.meta_id : metaId,
})
.then(res => {
if (res.data.code === 1) {
Toast.success({
message: '保存成功',
duration: 1000,
onClose: () => {
$router.go(-1)
}
});
} else {
console.warn(res);
Toast({
icon: 'close',
message: res.data.msg
});
}
})
.catch(err => {
console.error(err);
})
}
</script>
<script>
import mixin from 'common/mixin';
export default {
mixins: [mixin.init],
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.add-user-page {
padding: 1rem;
.title {
color: #713610;
font-size: 1.25rem;
padding: 1rem;
text-align: center;
font-weight: bold;
}
.upload-text {
padding: 2vh 0;
.upload-text-1 {
font-size: 14px;
color: #323233;
margin-left: 2vh;
}
.upload-text-2 {
font-size: 12px;
color: #B0B0B0;
}
}
}
</style>
\ No newline at end of file
......@@ -4,8 +4,7 @@
<div class="info">
<van-row>
<van-col>
<van-image round width="50" height="50" :src="userInfo.avatar"
style="padding-right: 1rem;" />
<van-image @click="handleUser('EDIT')" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" />
</van-col>
<van-col class="text-wrapper" span="18">
<div>
......@@ -48,7 +47,7 @@
<my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button>
</div>
<div>
<my-button type="custom" :custom-style="styleObject2" @on-click="goTo('/me/addUser')">新增儿童</my-button>
<my-button type="custom" :custom-style="styleObject2" @on-click="handleUser('ADD')">新增儿童</my-button>
</div>
</div>
......@@ -229,6 +228,30 @@ const goTo = (path) => {
}
})
}
// 新增/编辑儿童信息
const handleUser = (type) => {
if (type === 'ADD') {
$router.push({
path: '/me/handleUser',
query: {
kg_id: userInfo.value.kg_id,
kg_name: userInfo.value.kg_name,
type
}
})
} else {
$router.push({
path: '/me/handleUser',
query: {
avatar: userInfo.value.avatar,
name: userInfo.value.name,
kg_id: userInfo.value.kg_id,
kg_name: userInfo.value.kg_name,
type
}
})
}
}
// 自定义按钮颜色样式
const styleObject1 = reactive({
......