Skip to content

Commit 88dd400

Browse files
WangQingyeWangQingye
committed
邀请链接
1 parent 8bb0a0f commit 88dd400

File tree

14 files changed

+645
-68
lines changed

14 files changed

+645
-68
lines changed

‎api/department.js

+12
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@ export default $axios => ({
2323
url: '/personnel/search', method: 'post', data
2424
})
2525
},
26+
// 人员邀请信息
27+
personInvite(data) {
28+
return $axios({
29+
url: '/personnel/invite', method: 'post', data
30+
})
31+
},
32+
// 人员信息更新
33+
personUpdate(data) {
34+
return $axios({
35+
url: '/personnel/update', method: 'post', data
36+
})
37+
},
2638
// 机构列表
2739
deparmentList(data) {
2840
return $axios({

‎components/CropperUpload/cropper.vue

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<!-- eslint-disable -->
3+
<div :class="$options.name">
4+
<el-dialog :before-close="handleClose" destroy-on-close :title="title" :visible.sync="dialogVisible" width="660px">
5+
<div class="cropper-container">
6+
<div class="cropper-el">
7+
<vue-cropper ref="cropper" :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :full="option.full" :img="cropperImg" :info="true" :auto-crop="option.autoCrop" :original="option.original" :auto-crop-width="option.autoCropWidth" :output-size="option.size" :auto-crop-height="option.autoCropHeight" :output-type="option.outputType" :center-box="option.centerBox" :high="option.high" :info-true="option.infoTrue" :enlarge="option.enlarge" :fixed="option.fixed" :fixed-number="option.fixedNumber" @realTime="realTime" />
8+
</div>
9+
<!-- 预览 -->
10+
<div class="prive-el">
11+
效果预览：
12+
<div class="prive-style" :style="{
13+
width: '300px',
14+
height: (300 * fixedNumber[1]) / fixedNumber[0] + 'px',
15+
margin: '0 25px',
16+
display: 'flex',
17+
'align-items': 'center',
18+
}">
19+
<div class="preview" :style="previews.div">
20+
<img :src="previews.url" :style="previews.img" />
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
<span slot="footer" class="dialog-footer">
26+
<el-button @click="handleClose">取 消</el-button>
27+
<el-button type="primary" @click="saveImg">确 定</el-button>
28+
</span>
29+
</el-dialog>
30+
</div>
31+
</template>
32+
33+
<script>
34+
/* eslint-disable */
35+
export default {
36+
name: 'Cropper',
37+
props: {
38+
dialogVisible: {
39+
type: Boolean,
40+
default: false,
41+
},
42+
imgType: {
43+
type: String,
44+
default: 'blob',
45+
},
46+
cropperImg: {
47+
type: String,
48+
default: '',
49+
},
50+
title: {
51+
type: String,
52+
default: '图片裁剪',
53+
},
54+
fixedNumber: {
55+
type: Array,
56+
default: () => [16, 9],
57+
},
58+
},
59+
data() {
60+
return {
61+
previews: {},
62+
option: {
63+
img: '', // 裁剪图片的地址
64+
size: 3000, // 裁剪生成图片的质量
65+
full: true, // 是否输出原图比例的截图 默认false
66+
outputType: 'png', // 裁剪生成图片的格式 默认jpg
67+
canMove: false, // 上传图片是否可以移动
68+
fixedBox: false, // 固定截图框大小 不允许改变
69+
original: false, // 上传图片按照原始比例渲染
70+
canMoveBox: true, // 截图框能否拖动
71+
autoCrop: true, // 是否默认生成截图框
72+
// 只有自动截图开启 宽度高度才生效
73+
autoCropWidth: 150, // 默认生成截图框宽度
74+
autoCropHeight: 150, // 默认生成截图框高度
75+
centerBox: true, // 截图框是否被限制在图片里面
76+
high: false, // 是否按照设备的dpr 输出等比例图片
77+
enlarge: 1, // 图片根据截图框输出比例倍数
78+
mode: 'contain', // 图片默认渲染方式
79+
maxImgSize: 2000, // 限制图片最大宽度和高度
80+
limitMinSize: [100, 120], // 更新裁剪框最小属性
81+
infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
82+
fixed: true, // 是否开启截图框宽高固定比例 (默认:true)
83+
fixedNumber: this.fixedNumber, // 截图框的宽高比例
84+
},
85+
}
86+
},
87+
methods: {
88+
// 裁剪时触发的方法，用于实时预览
89+
realTime(data) {
90+
this.previews = data
91+
},
92+
// 取消关闭弹框
93+
handleClose() {
94+
this.$emit('colse-dialog', false)
95+
},
96+
// 获取裁剪之后的图片，默认blob，也可以获取base64的图片
97+
saveImg() {
98+
if (this.imgType === 'blob') {
99+
this.$refs.cropper.getCropBlob((data) => {
100+
this.$emit('upload-img', data)
101+
})
102+
} else {
103+
this.$refs.cropper.getCropData((data) => {
104+
this.uploadFile = data
105+
this.$emit('upload-img', data)
106+
})
107+
}
108+
},
109+
},
110+
}
111+
</script>
112+
113+
<style lang="scss" scoped>
114+
.Cropper {
115+
.cropper-el {
116+
height: 300px;
117+
width: 300px;
118+
}
119+
.cropper-container {
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: flex-end;
123+
.prive-el {
124+
width: 300px;
125+
flex: 1;
126+
text-align: center;
127+
.prive-style {
128+
margin: 0 auto;
129+
flex: 1;
130+
-webkit-flex: 1;
131+
display: flex;
132+
display: -webkit-flex;
133+
justify-content: center;
134+
-webkit-justify-content: center;
135+
border: 1px solid #eee;
136+
overflow: hidden;
137+
margin-left: 40px;
138+
}
139+
.preview {
140+
overflow: hidden;
141+
}
142+
.el-button {
143+
margin-top: 20px;
144+
}
145+
}
146+
}
147+
}
148+
</style>

‎components/CropperUpload/index.vue

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* eslint-disable */
2+
<template>
3+
<!-- eslint-disable -->
4+
<div :class="$options.name" v-loading.fullscreen.lock="fullscreenLoading">
5+
<el-upload class="upload-el" accept="image/*" ref="fileUpload" name="pic" :action="action" :on-change="selectChange" :show-file-list="false" :auto-upload="false" :http-request="httpRequest">
6+
<slot name="child"></slot>
7+
<!-- <div>
8+
<span
9+
class="icon upload-icon" />
10+
<el-button>选择图片</el-button>
11+
</div> -->
12+
<div slot="tip" class="el-upload__tip">
13+
{{tip}}
14+
</div>
15+
</el-upload>
16+
<cropper :dialog-visible.sync="showCropper" :cropper-img="cropperImg" :title="title" :fixedNumber="fixedNumber" @colse-dialog="closeDialog" @upload-img="uploadImg" />
17+
</div>
18+
</template>
19+
<script>
20+
/* eslint-disable */
21+
import Cropper from './cropper.vue'
22+
import { baseUrl } from '@/config'
23+
export default {
24+
name: 'UploadImg',
25+
components: {
26+
Cropper,
27+
},
28+
props: {
29+
tip: {
30+
type: String,
31+
default: '',
32+
},
33+
sizeLimit: {
34+
type: Number,
35+
default: 5,
36+
},
37+
title: {
38+
type: String,
39+
default: '图片裁剪',
40+
},
41+
action: {
42+
type: String,
43+
default: '',
44+
},
45+
fixedNumber: {
46+
type: Array,
47+
default: () => [16, 9],
48+
},
49+
},
50+
data() {
51+
return {
52+
cropperImg: '', // 需要裁剪的图片
53+
showCropper: false, // 是否显示裁剪框
54+
uploadFile: '', // 裁剪后的文件
55+
fullscreenLoading: false,
56+
}
57+
},
58+
methods: {
59+
// submit 之后会触发此方法
60+
httpRequest(request) {
61+
console.log(request)
62+
const { action, data, filename } = request
63+
// 新建formDate对象
64+
let formData = new FormData()
65+
// 文件单独push
66+
formData.append('file', this.uploadFile)
67+
// this.fullscreenLoading = true
68+
this.$axios({
69+
headers: {
70+
contentType: 'multipart/form-data', // 需要指定上传的方式
71+
},
72+
url: '/file/upload',
73+
method: 'post',
74+
data: formData,
75+
timeout: 200000000, // 防止文件过大超时
76+
})
77+
.then((res) => {
78+
this.$emit('upload-success', res)
79+
this.fullscreenLoading = false
80+
this.showCropper = false
81+
})
82+
},
83+
// 选择文件
84+
selectChange(file) {
85+
const { raw } = file
86+
this.openCropper(raw)
87+
},
88+
/**
89+
* @param {file} 上传的文件
90+
*/
91+
openCropper(file) {
92+
var files = file
93+
let isOutSize = files.size > this.sizeLimit << 20
94+
if (isOutSize) {
95+
this.$message.error(`请上传${this.sizeLimit}M内的图片`)
96+
return false
97+
}
98+
var reader = new FileReader()
99+
reader.onload = (e) => {
100+
let data
101+
if (typeof e.target.result === 'object') {
102+
// 把Array Buffer转化为blob 如果是base64不需要
103+
data = window.URL.createObjectURL(new Blob([e.target.result]))
104+
} else {
105+
data = e.target.result
106+
}
107+
this.cropperImg = data
108+
}
109+
// 转化为base64
110+
// reader.readAsDataURL(file)
111+
// 转化为blob
112+
reader.readAsArrayBuffer(files)
113+
this.showCropper = true
114+
},
115+
// 上传图片
116+
uploadImg(file) {
117+
this.uploadFile = file
118+
this.$refs.fileUpload.submit()
119+
},
120+
// 关闭窗口
121+
closeDialog() {
122+
this.showCropper = false
123+
this.$refs.fileUpload.clearFiles()
124+
},
125+
},
126+
}
127+
</script>
128+
129+
<style lang="scss" scoped>
130+
.UploadImg {
131+
.video-image {
132+
display: flex;
133+
figure {
134+
width: 100px;
135+
img {
136+
width: 100%;
137+
display: block;
138+
}
139+
}
140+
}
141+
}
142+
</style>

‎config/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
module.exports = {
22
defaultWebSiteName: '上海交通大学学生创新中心',
33
imgDomain: 'http://cms.vispp.cn/media',
4+
baseUrl: 'http://cms.vispp.cn/api',
45
tokenName: 'AccessToken',
56
// 顶部细条菜单左侧
67
headerLinksLeft: [{

‎layouts/error.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default {
1919
mounted() {
2020
this.time = 5
2121
this.goBack()
22-
this.msg = this.error.statusCode === 404 ? '页面不存在' : error.message
22+
this.msg = this.error.statusCode === 404 ? '页面不存在' : this.error.message
2323
if (this.$route.query.msg) {
2424
this.msg = this.$route.query.msg
2525
}

‎nuxt.config.js

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import {
2-
defaultWebSiteName,
3-
themeColor
4-
} from './config'
1+
var config = require('./config')
52
export default {
63
// Global page headers: https://go.nuxtjs.dev/config-head
74
head: {
8-
title: defaultWebSiteName,
5+
title: config.defaultWebSiteName,
96
meta: [{
107
charset: 'utf-8'
118
},
@@ -33,7 +30,7 @@ export default {
3330
}],
3431
},
3532
loading: {
36-
color: '#0048FF',
33+
color: config.themeColor,
3734
height: '2px'
3835
},
3936
// Global CSS: https://go.nuxtjs.dev/config-css
@@ -43,7 +40,10 @@ export default {
4340
plugins: ['@/plugins/element-ui', '@/plugins/api', '@/plugins/filters', {
4441
src: '~/plugins/swiper.js',
4542
ssr: false
46-
}, '@/plugins/utils', ],
43+
}, '@/plugins/utils', {
44+
src: '~/plugins/cropper.js',
45+
ssr: false
46+
}, ],
4747

4848
// Auto import components: https://go.nuxtjs.dev/config-components
4949
components: true,
@@ -68,8 +68,7 @@ export default {
6868
axios: {
6969
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
7070
// baseURL: 'http://ma.vispp.cn/api',
71-
baseURL: 'http://cms.vispp.cn/api',
72-
71+
baseURL: config.baseUrl,
7372
},
7473

7574
// Build Configuration: https://go.nuxtjs.dev/config-build

0 commit comments

Comments
 (0)