ホーム エクスプローラ ヘルプ
登録 サインイン
zhh
/
front-end
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

开发

shish 2 年 前
親
12d02b017b
コミット
8a029097d6
14 ファイル変更、298 行追加、3 行削除
一括表示 差分情報を表示
  1. 1 0
      pt/dist/web/css/chunk-4825e5a9.5dfdac25.css
  2. 0 0
      pt/dist/web/css/chunk-5a4c0705.e56954f4.css
  3. 0 0
      pt/dist/web/css/chunk-5b5cd9bc.0af399f7.css
  4. 0 0
      pt/dist/web/css/chunk-bcf45fb2.cd4bf561.css
  5. 1 1
      pt/dist/web/index.html
  6. 0 0
      pt/dist/web/js/app.bc0f25f3.js
  7. 0 0
      pt/dist/web/js/app.d8736816.js
  8. 0 0
      pt/dist/web/js/chunk-08fb5102.e4fd7432.js
  9. 0 0
      pt/dist/web/js/chunk-4825e5a9.04905484.js
  10. 0 0
      pt/dist/web/js/chunk-5a4c0705.7c614e21.js
  11. 0 0
      pt/dist/web/js/chunk-5b5cd9bc.b6a3ce74.js
  12. 0 0
      pt/dist/web/js/chunk-bcf45fb2.6fe303fc.js
  13. 293 0
      pt/src/components/module/upload.vue
  14. 3 2
      pt/src/views/item/list.vue

+ 1 - 0
pt/dist/web/css/chunk-4825e5a9.5dfdac25.css
ファイルの表示 

@@ -0,0 +1 @@
 
+.el-dialog .el-dialog__header[data-v-51d59afa]{padding:10px;text-align:center;border-bottom:1px solid #f7f7f7}.el-dialog .el-dialog__header .el-dialog__title[data-v-51d59afa]{font-size:15px;letter-spacing:.5px}.el-dialog .el-dialog__header .el-dialog__headerbtn[data-v-51d59afa]{top:13px}.el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close[data-v-51d59afa]{font-size:18px}.el-dialog .el-dialog__body[data-v-51d59afa]{padding:20px}.el-dialog .el-dialog__footer[data-v-51d59afa]{padding-bottom:15px}.cl-upload[data-v-51d59afa]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.cl-upload .upload-wrap[data-v-51d59afa]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:120px;width:120px;cursor:pointer;border:1px dashed #d9d9d9;border-radius:6px;margin-right:10px;position:relative}.cl-upload .upload-wrap .el-icon-plus[data-v-51d59afa]{font-size:28px;color:#8c939d}.cl-upload .upload-wrap .el-icon-close[data-v-51d59afa]{position:absolute;right:5px;top:5px;color:red;background-color:#f56c6c;color:#fff;border-radius:100%;padding:2px}.cl-upload .upload-wrap .el-icon-close[data-v-51d59afa]:hover{background-color:red}.cl-upload .upload-wrap img[data-v-51d59afa]{height:100%;width:100%;border-radius:6px}.cl-upload .upload-wrap[data-v-51d59afa]:hover{border:1px dashed #409eff}

ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/css/chunk-5a4c0705.e56954f4.css


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/css/chunk-5b5cd9bc.0af399f7.css


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/css/chunk-bcf45fb2.cd4bf561.css


+ 1 - 1
pt/dist/web/index.html
ファイルの表示 

@@ -43,4 +43,4 @@
 
 			.once .sub-title {
 
 			.once .sub-title {
 
 				color: #ababab;
 
 				color: #ababab;
 
 				font-size: 12px;
 
 				font-size: 12px;
 
-			}</style><link href="/css/app.906bf484.css" rel="preload" as="style"><link href="/css/chunk-libs.b57e4bfb.css" rel="preload" as="style"><link href="/js/app.bc0f25f3.js" rel="preload" as="script"><link href="/js/chunk-libs.26078914.js" rel="preload" as="script"><link href="/css/chunk-libs.b57e4bfb.css" rel="stylesheet"><link href="/css/app.906bf484.css" rel="stylesheet"></head><body><noscript></noscript><div id="app"><div class="once"><div class="container"><div class="title">正在加载资源</div><div class="sub-title">初次加载资源可能需要较多时间 请耐心等待</div></div><div class="footer"><a href="https://www.baidu.com/" target="_blank">花卉宝</a></div></div></div><script src="http://img.hzghd.com/cdn/vue/2.6.10/vue.min.js"></script><script src="http://img.hzghd.com/cdn/vue-router/3.1.3/vue-router.min.js"></script><script src="http://img.hzghd.com/cdn/vuex/3.1.1/vuex.min.js"></script><script src="http://img.hzghd.com/cdn/clipboard.js/2.0.4/clipboard.min.js"></script><script src="http://img.hzghd.com/cdn/axios/0.19.0-beta.1/axios.min.js"></script><script src="http://img.hzghd.com/cdn/nprogress/0.2.0/nprogress.min.js"></script><script src="http://img.hzghd.com/cdn/Mock.js/1.0.1-beta3/mock-min.js"></script><script src="http://img.hzghd.com/cdn/quill/2.0.0-dev.3/quill.min.js"></script><script src="http://img.hzghd.com/cdn/element-ui/2.13.0/index.js"></script><script src="http://img.hzghd.com/cdn/viewerjs/1.3.7/viewer.min.js"></script><script src="http://img.hzghd.com/cdn/echarts/4.4.0-rc.1/echarts.min.js"></script><script src="http://img.hzghd.com/cdn/npm/vue-echarts@4.0.2.js"></script><script src="/js/chunk-libs.26078914.js"></script><script src="/js/app.bc0f25f3.js"></script></body></html>
 
+			}</style><link href="/css/app.906bf484.css" rel="preload" as="style"><link href="/css/chunk-libs.b57e4bfb.css" rel="preload" as="style"><link href="/js/app.d8736816.js" rel="preload" as="script"><link href="/js/chunk-libs.26078914.js" rel="preload" as="script"><link href="/css/chunk-libs.b57e4bfb.css" rel="stylesheet"><link href="/css/app.906bf484.css" rel="stylesheet"></head><body><noscript></noscript><div id="app"><div class="once"><div class="container"><div class="title">正在加载资源</div><div class="sub-title">初次加载资源可能需要较多时间 请耐心等待</div></div><div class="footer"><a href="https://www.baidu.com/" target="_blank">花卉宝</a></div></div></div><script src="http://img.hzghd.com/cdn/vue/2.6.10/vue.min.js"></script><script src="http://img.hzghd.com/cdn/vue-router/3.1.3/vue-router.min.js"></script><script src="http://img.hzghd.com/cdn/vuex/3.1.1/vuex.min.js"></script><script src="http://img.hzghd.com/cdn/clipboard.js/2.0.4/clipboard.min.js"></script><script src="http://img.hzghd.com/cdn/axios/0.19.0-beta.1/axios.min.js"></script><script src="http://img.hzghd.com/cdn/nprogress/0.2.0/nprogress.min.js"></script><script src="http://img.hzghd.com/cdn/Mock.js/1.0.1-beta3/mock-min.js"></script><script src="http://img.hzghd.com/cdn/quill/2.0.0-dev.3/quill.min.js"></script><script src="http://img.hzghd.com/cdn/element-ui/2.13.0/index.js"></script><script src="http://img.hzghd.com/cdn/viewerjs/1.3.7/viewer.min.js"></script><script src="http://img.hzghd.com/cdn/echarts/4.4.0-rc.1/echarts.min.js"></script><script src="http://img.hzghd.com/cdn/npm/vue-echarts@4.0.2.js"></script><script src="/js/chunk-libs.26078914.js"></script><script src="/js/app.d8736816.js"></script></body></html>

ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/app.bc0f25f3.js


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/app.d8736816.js


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/chunk-08fb5102.e4fd7432.js


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/chunk-4825e5a9.04905484.js


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/chunk-5a4c0705.7c614e21.js


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/chunk-5b5cd9bc.b6a3ce74.js


ファイルの差分が大きいため隠しています
+ 0 - 0
pt/dist/web/js/chunk-bcf45fb2.6fe303fc.js


+ 293 - 0
pt/src/components/module/upload.vue
ファイルの表示 

@@ -0,0 +1,293 @@
 
+<template>
 
+	<div class="cl-upload">
 
+		<el-input type="hidden" v-model="value"></el-input>
 
+
 
+		<!-- :on-success="
 
+				(res, file) => {
 
+					onSuccess(res, file, item);
 
+				}
 
+		"-->
 
+		<el-upload
 
+			v-for="(item, index) in list"
 
+			:key="index"
 
+			accept="image/*"
 
+			v-bind="props"
 
+			:headers="{
 
+				token: token
 
+			}"
 
+			name="content"
 
+			:on-change="getFile"
 
+			:auto-upload="false"
 
+			:action="action"
 
+			:show-file-list="false"
 
+			:on-error="onError"
 
+			:before-upload="
 
+				e => {
 
+					beforeUpload(e, item, index);
 
+				}
 
+			"
 
+		>
 
+			<slot name="content">
 
+				<div class="upload-wrap" v-loading="item.loading">
 
+					<img :src="item.url | check_prefix" alt v-if="item.url" />
 
+					<i class="el-icon-plus avatar-uploader-icon" v-else></i>
 
+
 
+					<i class="el-icon-close" v-if="item.url" @click.stop="removeFile(index)"></i>
 
+				</div>
 
+			</slot>
 
+		</el-upload>
 
+	</div>
 
+</template>
 
+
 
+<script>
 
+import { mapGetters } from 'vuex';
 
+import { baseUrl } from '@/config/env';
 
+import { imgHostUrl } from '@/config/env';
 
+
 
+export default {
 
+	props: {
 
+		props: {
 
+			type: Object,
 
+			default: () => {
 
+				return {};
 
+			}
 
+		},
 
+		value: [Array, String],
 
+		hostUrl: {
 
+			default: ''
 
+		}
 
+	},
 
+
 
+	data() {
 
+		const upload = this.$service.common.upload();
 
+
 
+		return {
 
+			imgHostUrl: imgHostUrl,
 
+			action: upload.url,
 
+			list: [],
 
+			index: 0
 
+		};
 
+	},
 
+
 
+	filters: {
 
+		check_prefix(v) {
 
+			if (v.includes('http')) {
 
+				return v;
 
+			} else {
 
+				return imgHostUrl + v;
 
+			}
 
+		}
 
+	},
 
+
 
+	computed: {
 
+		...mapGetters(['token'])
 
+	},
 
+
 
+	watch: {
 
+		value() {
 
+			this.render();
 
+		}
 
+	},
 
+
 
+	mounted() {
 
+		this.render();
 
+	},
 
+
 
+	methods: {
 
+		render() {
 
+			const { multiple } = this.props;
 
+
 
+			let val = this.value;
 
+
 
+			if (multiple) {
 
+				let list = [];
 
+
 
+				if (val instanceof Array) {
 
+					list = val;
 
+				} else {
 
+					list = (val || '').split(',');
 
+				}
 
+
 
+				this.list = list.filter(Boolean).map(e => {
 
+					return {
 
+						url: e,
 
+						loading: false
 
+					};
 
+				});
 
+
 
+				this.ajSize();
 
+			} else {
 
+				this.list = [
 
+					{
 
+						url: val,
 
+						loading: false
 
+					}
 
+				];
 
+			}
 
+		},
 
+
 
+		callback() {
 
+			this.ajSize();
 
+
 
+			this.$emit(
 
+				'input',
 
+				this.list
 
+					.filter(e => e.url)
 
+					.map(e => e.url)
 
+					.join(',')
 
+			);
 
+		},
 
+
 
+		ajSize() {
 
+			const { 'multiple-limit': multipleLimit = 1 } = this.props;
 
+
 
+			if (this.list.length < multipleLimit) {
 
+				this.list.unshift({});
 
+			}
 
+		},
 
+
 
+		beforeUpload(file, item, index) {
 
+			this.index = index;
 
+			if (this.props && this.props['before-upload']) {
 
+				this.props['before-upload'](file);
 
+			}
 
+
 
+			item.loading = true;
 
+		},
 
+
 
+		onSuccess(res, file) {
 
+			let item = this.list[this.index];
 
+			const { url, smallUrl, shortUrl } = res;
 
+			const { multiple } = this.props;
 
+
 
+			item.loading = false;
 
+
 
+			if (multiple) {
 
+				if (item.url) {
 
+					item.url = shortUrl;
 
+				} else {
 
+					// item.url = smallUrl;
 
+					this.list.push({
 
+						url: shortUrl
 
+					});
 
+				}
 
+			} else {
 
+				this.list = [
 
+					{
 
+						url: shortUrl
 
+					}
 
+				];
 
+			}
 
+
 
+			this.callback();
 
+
 
+			console.log('this.props', this.props);
 
+			if (this.props && this.props['on-success']) {
 
+				this.props['on-success'](res, file);
 
+			}
 
+		},
 
+
 
+		onError(err, file, fileList) {
 
+			console.error('upload error', err);
 
+			this.$message.error('图片上传失败');
 
+			this.loading = false;
 
+
 
+			if (this.props && this.props['on-error']) {
 
+				this.props['on-error'](err, file, fileList);
 
+			}
 
+		},
 
+
 
+		removeFile(i) {
 
+			this.list.splice(i, 1);
 
+			this.callback();
 
+		},
 
+
 
+		//
 
+		getFile(file, fileList) {
 
+			this.getBase64(file.raw).then(res => {
 
+				// this.list = res;
 
+				let host = null;
 
+				if (this.hostUrl) {
 
+					host = () => {
 
+						return this.$service.common[this.hostUrl]({ content: res });
 
+					};
 
+				} else {
 
+					host = () => {
 
+						return this.$service.common.uploadImg({ content: res });
 
+					};
 
+				}
 
+				host().then(subRes => {
 
+					console.log('subRes', subRes);
 
+					this.onSuccess(subRes);
 
+				});
 
+			});
 
+		},
 
+		getBase64(file) {
 
+			return new Promise(function(resolve, reject) {
 
+				let reader = new FileReader();
 
+				let imgResult = '';
 
+				reader.readAsDataURL(file);
 
+				reader.onload = function() {
 
+					imgResult = reader.result;
 
+				};
 
+				reader.onerror = function(error) {
 
+					reject(error);
 
+				};
 
+				reader.onloadend = function() {
 
+					resolve(imgResult);
 
+				};
 
+			});
 
+		}
 
+	}
 
+};
 
+</script>
 
+
 
+<style lang="stylus" scoped>
 
+.cl-upload {
 
+	display: flex;
 
+	flex-wrap: wrap;
 
+
 
+	.upload-wrap {
 
+		display: flex;
 
+		justify-content: center;
 
+		align-items: center;
 
+		height: 120px;
 
+		width: 120px;
 
+		cursor: pointer;
 
+		border: 1px dashed #d9d9d9;
 
+		border-radius: 6px;
 
+		margin-right: 10px;
 
+		position: relative;
 
+
 
+		.el-icon-plus {
 
+			font-size: 28px;
 
+			color: #8c939d;
 
+		}
 
+
 
+		.el-icon-close {
 
+			position: absolute;
 
+			right: 5px;
 
+			top: 5px;
 
+			color: red;
 
+			background-color: #F56C6C;
 
+			color: #fff;
 
+			border-radius: 100%;
 
+			padding: 2px;
 
+
 
+			&:hover {
 
+				background-color: red;
 
+			}
 
+		}
 
+
 
+		img {
 
+			height: 100%;
 
+			width: 100%;
 
+			border-radius: 6px;
 
+		}
 
+
 
+		&:hover {
 
+			border: 1px dashed #409EFF;
 
+		}
 
+	}
 
+}
 
+</style>

+ 3 - 2
pt/src/views/item/list.vue
ファイルの表示 

@@ -138,7 +138,7 @@
 
 					</el-form-item>
 
 					</el-form-item>
 
 
 
 					<el-form-item label="图片" prop="cover">
 
 					<el-form-item label="图片" prop="cover">
 
-						<cl-upload v-model="replaceForm.cover" :success="uploadSuccess"></cl-upload>
 
+						<uploadModule v-model="replaceForm.cover" :success="uploadSuccess"></uploadModule>
 
 						<p style="font-size: 14px; color: #cccccc">建议上传1:1图片</p>
 
 						<p style="font-size: 14px; color: #cccccc">建议上传1:1图片</p>
 
 					</el-form-item>
 
 					</el-form-item>
 
 
 
@@ -210,9 +210,10 @@
 
 </template>
 
 </template>
 
 <script>
 
 <script>
 
 import { mapGetters } from 'vuex';
 
 import { mapGetters } from 'vuex';
 
+import uploadModule from '@/components/module/upload';
 
 export default {
 
 export default {
 
 	name: 'list',
 
 	name: 'list',
 
-	components: {},
 
+	components: {uploadModule},
 
 	data() {
 
 	data() {
 
 		return {
 
 		return {
 
 			selectCpId:0,
 
 			selectCpId:0,

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません