mob-components.git

			@@ -14,40 +14,33 @@
			/>
			<AtImagePicker
			ref="picker"
			multiple
			mode="aspectFit"
			:count="9"
			:multiple="count > 1"
			:count="count"
			:showAddBtn="!selectedFull"
			:length="3"
			:files="files"
			:onChange="(files,operationType,index)=>handleChange(files,operationType,index)"
			:onFail="evt=>handleFail(evt)"
			:onImageClick="(index, file)=>handleImgView(index,file)"
			/>
			<AtCurtain
			class="c-image-picker-view"
			closeBtnPosition="top-right"
			:isOpened="showImg"
			:onClose="evt=>handleImgClose()"
			>
			<image
			class="img"
			mode="aspectFit"
			:src="curtainImg"
			/>
			</AtCurtain>
			<CImageCompressor ref="compressor" />
			</view>
			</template>

			<script>
			import { $ } from '@tarojs/extend';
			import Taro from '@tarojs/taro';
			import { $ } from '@tarojs/extend';
			import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
			import { $fetcherCommon } from '@fetchers/FCommon';
			import { $fetchCommon } from '@fetchers/FCommon';
			import { Tools } from '@components/common/Tools';
			import CImageCompressor from './CImageCompressor.vue';
			import './cImagePicker.scss';

			export default {
			name: 'CImagePicker',
			components: {
			CImageCompressor,
			AtInput,
			AtImagePicker,
			AtCurtain,
			@@ -55,12 +48,14 @@
			props: {
			// 表单数据资源（表单组件内部机制专用）
			itemRes: Object,
			// 最大图片张数
			count: {
			type: Number,
			default: 1,
			},
			},
			data() {
			return {
			showImg: false,
			curtainImg: '',
			};
			return {};
			},
			computed: {
			files() {
			@@ -71,29 +66,101 @@
			} else if (Object.prototype.toString.call(value) === '[object Array]') {
			files = value.map(url => ({ url }));
			}
			files.push({ type: 'btn' });
			return files;
			},
			selectedFull() {
			return this.files.length >= this.count;
			},
			},
			methods: {
			handleChange(files, operationType, index) {
			_triggerChange(files) {
			const value = [];
			files.forEach(file => {
			if (file.type === 'btn') {
			return;
			}
			value.push(file.url);
			});
			this.itemRes.onChange(value);
			},
			handleChange(files, operationType, index) {
			// 添加图片
			if (operationType === 'add') {
			// 屏蔽其他格式
			let nextFiles = files.filter(file => {
			// 新添加
			if (file.file && file.file.originalFileObj) {
			if (
			/image\/(gif\|png\|jpg\|jpeg)/.test(
			file.file.originalFileObj.type
			)
			) {
			return true;
			} else {
			Tools.toast('不支持的格式，请选择其他图片！');
			return false;
			}
			}
			// 非本次添加的图片
			else {
			return true;
			}
			});
			// 限制数量
			if (nextFiles.length > this.count) {
			Tools.toast('最多只能选 ' + this.count + ' 张图片！');
			nextFiles = nextFiles.splice(0, this.count);
			}
			// 检查是否需要压缩
			const needs = nextFiles
			.map((file, needIndex) => {
			const fileInfo = file.file;
			// 没有 file 信息对象，或者不是 blob 类型
			if (!fileInfo \|\| fileInfo.path.indexOf('blob') < 0) {
			return false;
			}
			// 尺寸小于 1M 的图片
			if (fileInfo.size < 1 * 1024 * 1024) {
			return false;
			}
			return [fileInfo, needIndex];
			})
			.filter(Boolean);
			// 存在需要压缩的图片，一次性压缩
			if (needs.length > 0) {
			const files2 = [...nextFiles];
			const needPaths = needs.map(need => need[0].path);
			this.$refs.compressor.$compress(needPaths, compressedFiles => {
			compressedFiles.forEach((cpPath, cpIndex) => {
			const filesIndex = needs[cpIndex][1];
			files2[filesIndex] = {
			url: cpPath.compress,
			};
			});
			this._triggerChange(files2);
			});
			}
			// 不存在，直接显示
			else {
			this._triggerChange(nextFiles);
			}
			}
			// 删除图片，直接显示
			else {
			this._triggerChange(files);
			}
			},
			handleImgView(index, file) {
			this.curtainImg = file.url;
			this.showImg = true;
			const urls = this.files
			.map(file => (file.type === 'btn' ? false : file.url))
			.filter(Boolean);
			Taro.previewImage({
			current: file.url, // 当前显示图片的http链接
			urls, // 需要预览的图片http链接列表
			});
			},
			handleImgClose() {
			this.showImg = false;
			},
			handleFail(msg) {
			console.log(msg);
			Taro.showToast({
			title: msg,
			icon: 'none',
			@@ -102,14 +169,14 @@
			});
			},
			$uploadImage(callback) {
			const url = $fetcherCommon.getUploadImgURL();
			const url = $fetchCommon.getUploadImgURL();
			const uploadTeam = [];
			const imgs = [];
			this.files.forEach(file => {
			if (file.type === 'btn') {
			return;
			}
			// blob 二进制文件才上传
			// blob 临时文件才上传
			if (file.url.indexOf('blob') >= 0) {
			uploadTeam.push(
			new Promise((resolve, reject) => {
			@@ -125,13 +192,13 @@
			: res.data;
			if (res2.state.code === 2000) {
			resolve(
			$fetcherCommon.transImgPath(
			$fetchCommon.transImgPath(
			'fix',
			res2.data.src
			)
			);
			} else {
			reject({ message: 'res2.state.msg' });
			reject({ message: res2.state.msg });
			}
			},
			cancel() {