1111

components/mk-upload/mk-upload.md

@@ -0,0 +1,184 @@
+
+## 特别提醒
+- 默认样式可能无法满足你，如果修改样式,变量样式必须放在最外层`app.vue`里面，当然你可以直接修改插件
+- 组件使用less编译，HBuilderX需要安装less插件 【工具-插件安装-搜索less】
+- 所有数据交互,组件不做任何处理,请自行使用`onChoose`，`onDelete`事件处理完毕后返回给组件`imglist`, 注意使用了两级反转,`index`也是正序的,和`原imglist`数组对应,不要参考看见的视图index
+- 上传成功后，`imglist`更新条数，只需要使用数组方法`push`即可，两级反转只是视图更新，和数据不关联
+- 页面使用`flex`布局，理论上只要支持`flex`布局，就不会存在问题
+- 如果使用中，有任何问题，欢迎留言
+
+### 在页面script中引入组件，并注册组件
+```
+import mkUpload from "@/components/mk-upload/mk-upload.vue"
+export default {
+   components: {
+	  mkUpload
+   },
+}
+```
+
+### 页面中使用
+```
+<mk-upload :imgList="imgList" />
+```
+
+### 下面是一个完整示例
+```
+<template>
+	<view class="test">
+		<view class="demo-title">修改皮肤样式</view>
+		<mk-upload :imgList="imgList" />
+		
+		<view class="demo-title">删除位置左上</view>
+		<mk-upload :imgList="imgList" deletePosition="topLeft" />
+		
+		<view class="demo-title">删除位置左下</view>
+		<mk-upload :imgList="imgList" deletePosition="bottomLeft" />
+		
+		<view class="demo-title">删除位置右下</view>
+		<mk-upload :imgList="imgList" deletePosition="bottomRight" /> 
+		
+		<view class="demo-title">显示4个</view>
+		<mk-upload :imgList="imgList" column="4" />
+		
+		<view class="demo-title">显示5个</view>
+		<mk-upload :imgList="imgList" column="5" />
+		
+		
+		<view class="demo-title">两级反转</view>
+		<mk-upload
+			reverse
+			:imgList="imgList"
+		/>
+		
+		<view class="demo-title">事件接管,看console控制台</view>
+		<mk-upload 
+			:imgList="imgList"
+			@onDeleteTake="onDeleteTake" 
+			@onPreviewTake="onPreviewTake"
+		/>
+		
+		<view class="demo-title">只展示</view>
+		<mk-upload
+			:deleteShow="false"
+			:controlShow="false"
+			:imgList="imgList"
+		/>
+		
+		
+		
+		
+	</view>
+</template>
+
+<script>
+	import mkUpload from "@/components/mk-upload/mk-upload.vue"
+	export default {
+		components: {
+			mkUpload
+		},
+		data() {
+			return {
+				imgList: [
+					'../../static/1.jpeg',
+					'../../static/2.jpeg',
+					'../../static/2.jpeg',
+					'../../static/2.jpeg'
+				]
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			onDelete(index){
+				console.log(index)
+			},
+			onChoose(e){
+				console.log(e)
+			},
+			onPreviewTake(index){
+				console.log(index)
+			},
+			onDeleteTake(index){
+				console.log(index)
+			}
+		}
+	}
+</script> 
+
+<style lang="less" scoped>
+page{
+	// --mk-upload-img-height: 200upx;
+	// --mk-upload-item-margin: 30upx;
+	// --mk-upload_remove_color: #D1372C;
+	// --mk-upload_remove_size: 50upx;
+	// --mk-upload-add-size: 60upx;
+	// --mk-upload-add-bgcolor: #f1f1f1;
+}
+.demo-title{
+	padding: 15upx 0 0 30upx;
+}
+</style>
+
+```
+
+
+
+### 属性介绍
+| 名称                         | 类型             | 默认值                      | 描述       |
+| ----------------------------| --------------- | ---------------------------- | ------------
+| imgList                     | Array           | []                         | 图片数组列表 |
+| column                      | Number, String  | 3                          | 一行显示几个,可选址`2,3,4,5` |
+| reverse                     | Boolean         | false                      | 两级反转,对列表进行反转,添加符号在上面 |
+| controlShow                 | Boolean         | true                       | 是否显示上传按钮 |
+| deleteShow                  | Boolean         | true                       | 是否显示删除按钮 |
+| deletePosition              | String          | topRight                   | 删除按钮位置, 可选值`topLeft`,`topRight`,`bottomLeft`,`bottomRight`|
+| sourceType                  | Array           | ['camera', 'album']        | `album` 从相册选图，`camera` 使用相机, H5不支持 |
+| sizeType                    | Array           | ['original', 'compressed'] | `original` 原图，`compressed` 压缩图 |
+| maxChooseCount              | Number          | 9                          | 最大一次可以选择数量，最高为9 |
+| maxCount                    | Number          | 100                        | 列表最大数量，超出将不在展示新增按钮 |
+
+
+
+
+### 事件介绍
+| 名称                 | 说明            |
+| ------------------  |------------------
+| onDelete            | 删除图片的下标index|
+| onChoose            | 选择图片后返回的值：选择文件的所有信息 |
+| onPreviewTake       | 接管自定义图片预览，如果想点击图片做其他事情,可以添加此事件，接管后，默认预览事件会失效，返回当前图片下标index|
+| onDeleteTake        | 接管自定义删除图片，如果想点击删除做其他事情，可以添加此事件， 接管后，默认删除事件失效，返回当前图片下标index|
+
+> 注意使用了两级翻转,index也是正序的,和原imglist数组对应,不要参考看见的视图index
+
+
+
+
+### 修改尺寸和自定义样式
+如果默认尺寸默认无法达到你的需求，那么自定义样式你可以自由配置。根据需求添加即可
+注意样式变量需要放在 `app.vue`里面全部公用。为全局变量样式，不会影响其他样式
+
+```
+page{
+	--mk-upload-img-height: 200upx;
+	--mk-upload-img-width: 100%;
+	--mk-upload-item-margin: 30upx;
+	--mk-upload_remove_color: #D1372C;
+	--mk-upload_remove_size: 50upx;
+	--mk-upload-add-size: 60upx;
+	--mk-upload-add-bgcolor: #f1f1f1;
+}
+```
+
+| 名称                 | 说明            |
+| ------------------  |------------------
+| --mk-upload-img-height            | 图片的宽度 |
+| --mk-upload-item-margin       | 图片列与列之间的间距|
+| --mk-upload_remove_color        | 删除按钮的颜色|
+| --mk-upload_remove_size        | 删除按钮的大小|
+| --mk-upload-add-size        | 上传图标的大小|
+| --mk-upload-add-bgcolor        | 上传图片的背景色|
+
+
+

components/mk-upload/mk-upload.vue

@@ -0,0 +1,378 @@
+<template>
+	<view 
+		class="mk-upload" 
+		:class="{'reverse': reverse}"
+	>
+		<!--进行flex占位-->
+		<block v-if="imgList.length >= column && reverse">
+			<block v-if="imgItemAppendLength === 0">
+				<view
+					class="mk-upload_item"
+					:class="uploadItemColumn"
+					v-for="(item, index) in (imgItemAppendLength + (column -1))"
+				/>
+			</block>
+			<block v-if="imgItemAppendLength === 1">
+				<block v-if="column == 3">
+					<view
+						class="mk-upload_item"
+						:class="uploadItemColumn"
+						v-for="(item, index) in imgItemAppendLength"
+					/>
+				</block>
+				<block v-if="column == 4">
+					<view
+						class="mk-upload_item"
+						:class="uploadItemColumn"
+						v-for="(item, index) in (imgItemAppendLength + 1)"
+					/>
+				</block>
+				<block v-if="column == 5">
+					<view
+						class="mk-upload_item"
+						:class="uploadItemColumn"
+						v-for="(item, index) in (imgItemAppendLength + 2)"
+					/>
+				</block>
+			</block>
+			<block v-if="imgItemAppendLength === 2">
+				<block v-if="column == 4">
+					<view
+						class="mk-upload_item"
+						:class="uploadItemColumn"
+						v-for="(item, index) in (imgItemAppendLength - 1)"
+					/>
+				</block>
+				<block v-if="column == 5">
+					<view
+						class="mk-upload_item"
+						:class="uploadItemColumn"
+						v-for="(item, index) in imgItemAppendLength"
+					/>
+				</block>
+			</block>
+			<block v-if="imgItemAppendLength === 3">
+				<block v-if="column == 5">
+					<view class="mk-upload_item" :class="uploadItemColumn"/>
+				</block>
+			</block>
+		</block>
+		<!--进行flex占位-->
+		
+		<view 
+			class="mk-upload_item"
+			:class="uploadItemColumn"
+			v-for="(item, index) in imgList"
+			:key="index"
+		>
+			<view 
+				class="mk-upload_remove" 
+				:class="deletePosition"
+				@tap="onDeleteThis(index)"
+				v-if="deleteShow"
+			>
+				<text>✕</text>
+			</view>
+			<image
+				:src="item"
+				class="mk-upload_item_img" 
+				@tap="onPreviewImage(index)" 
+				mode="aspectFill"
+			/>
+		</view>
+		<!-- 列表end -->
+		
+		
+		<view
+			class="mk-upload_item"
+			:class="uploadItemColumn"
+			v-if="controlShow && imgList.length < maxCount"
+		>
+			<view 
+				class="mk-upload_add"
+				@tap="onChooseImage"
+			>+</view>
+		</view>
+		<!-- 上传按钮 -->
+		
+			
+	</view>
+</template>
+
+<script>
+	export default {
+		//组件传参
+		props: {
+			//图片数组
+			imgList: {
+				type: Array,
+				default: function() {
+				  return []
+				}
+			},
+			//行数量
+			column: {
+				type: [Number, String],
+				default: 3
+			},
+			reverse: {
+				type: Boolean,
+				default: false
+			},
+			//是否显示上传按钮
+			controlShow: {
+				type: Boolean,
+				default: true
+			},
+			//是否显示删除按钮
+			deleteShow: {
+				type: Boolean,
+				default: true
+			},
+			//删除按钮位置
+			deletePosition: {
+				type: String,
+				default: 'topRight'
+			},
+			//album 从相册选图，camera 使用相机
+			sourceType: {
+				type: Array,
+				default: function() {
+					return ['camera', 'album']
+				}
+			},
+			//original 原图，compressed 压缩图
+			sizeType: {
+				type: Array,
+				default: function() {
+					return ['original', 'compressed']
+				}
+			},
+			//最多可以选择的图片张
+			maxChooseCount: {
+				type: Number,
+				default: 9
+			},
+			//最大条数
+			maxCount: {
+				type: Number,
+				default: 100
+			}
+		},
+		data() {
+			return {
+			}
+		},
+		//计算属性
+		computed: {
+			uploadItemColumn(){
+				return `mk-upload_item_column${this.column}`
+			},
+			imgItemAppendLength(){
+				return this.imgList.length % this.column;
+			}
+		},
+		//检测属性
+		watch: {
+		},
+		//组件加载后
+		created() {
+		},
+		methods: {
+			//删除指定图片
+			onDeleteThis(index){
+				if(this.$listeners.onDeleteTake){
+					this.$emit('onDeleteTake', index);
+					return;
+				}
+				uni.showModal({
+					title: '提示',
+					content: '您确定删除吗？',
+					success: (res)=> {
+						if(res.confirm) {
+							this.$emit('onDelete', index);
+						}
+					}
+				});
+			},
+			//预览图片
+			onPreviewImage(index) {
+				if(this.$listeners.onPreviewTake){
+					this.$emit('onPreviewTake', index);
+					return;
+				}
+				const imgList = this.imgList;
+				const isReverse = this.reverse;
+				const currentIndex = isReverse ? (imgList.length - index) - 1 : index
+				const imgLists = isReverse ? imgList.reverse() : imgList;
+				uni.previewImage({
+					current: currentIndex,
+					urls: imgLists
+				});
+			},
+			//选择图片
+			onChooseImage(){
+				uni.chooseImage({
+					sizeType: this.sizeType,
+					sourceType: this.sourceType,
+					count: this.maxChooseCount,
+					success: (res) => {
+						this.$emit('onChoose', res);
+					}
+				});
+			}
+		}
+	}
+</script> 
+
+<style lang="less" scoped>
+	.mk-upload{
+		
+		display: flex;
+		flex-wrap: wrap;
+		box-sizing: border-box;
+		padding-left: var(--mk-upload_item_margin, 15px);
+		padding-bottom: var(--mk-upload_item_margin, 15px);
+		flex-direction: row;
+		&.reverse{
+			flex-direction: row-reverse;
+			flex-wrap: wrap-reverse;
+			justify-content: flex-end;
+		}
+		
+		.mk-upload_item{
+			position: relative;
+			margin-top: var(--mk-upload_item_margin, 15px);
+			margin-right: var(--mk-upload_item_margin, 15px);
+			flex: 0 calc(33.3% - var(--mk-upload_item_margin, 15px));
+			.mk-upload_remove{
+				background-color: var(--mk-upload_remove_color, #D1372C);
+				color: #fff;
+				width: var(--mk-upload_remove_size, 24px);
+				height: var(--mk-upload_remove_size, 24px);
+				display: flex;
+				justify-content: center;
+				align-items: flex-start;
+				opacity: 0.8;
+				position: absolute;
+				z-index: 2;
+				cursor: pointer;
+				box-sizing: border-box;
+				text{
+					transform: scale(0.8);
+					position: absolute;
+					top: -2upx;
+					line-height: var(--mk-upload_remove_size, 24px);
+				}
+				&:active{
+					opacity: 0.6;
+				}
+				&.topLeft{
+					top: 0;
+					left: 0;
+					border-radius: 0 0 100% 0;
+					text{
+						left: 8upx;
+					}
+				}
+				&.topRight{
+					top: 0;
+					right: 0;
+					border-radius: 0 0 0 100%;
+					text{
+						left: 18upx;
+					}
+				}
+				&.bottomLeft{
+					bottom: 0;
+					left: 0;
+					border-radius: 0 100% 0 0;
+					text{
+						left: 8upx;
+						top: 6upx;
+					}
+				}
+				&.bottomRight{
+					bottom: 0;
+					right: 0;
+					border-radius: 100% 0 0 0;
+					text{
+						top: 6upx;
+						left: 16upx;
+					}
+				}
+			}
+			.mk-upload_add{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: var(--mk-upload_add_bgcolor, #f1f1f1);
+				font-size: var(--mk-upload_add_size, 30px);
+				height: var(--mk-upload_img_height, 100px);
+				width: 100%;
+			}
+			.mk-upload_item_img{
+				display: block;
+				width: 100%;
+				height: var(--mk-upload_img_height, 100px);
+			}
+			&.mk-upload_item_column2{
+				flex: 0 calc(50% - var(--mk-upload_item_margin, 15px));
+			}
+			&.mk-upload_item_column3{
+				flex: 0 calc(33.3% - var(--mk-upload_item_margin, 15px));
+			}
+			&.mk-upload_item_column4{
+				flex: 0 calc(25% - var(--mk-upload_item_margin, 15px));
+				.mk-upload_item_img,
+				.mk-upload_add{
+					height: var(--mk-upload_img_height, 70px);
+					font-size: var(--mk-upload_add_size, 25px);
+				}
+			}
+			&.mk-upload_item_column5{
+				flex: 0 calc(20% - var(--mk-upload_item_margin, 15px));
+				.mk-upload_item_img,
+				.mk-upload_add{
+					height: var(--mk-upload_img_height, 55px);
+					font-size: var(--mk-upload_add_size, 25px);
+				}
+			}
+			&.mk-upload_item_column4,
+			&.mk-upload_item_column5{
+				.mk-upload_remove{
+					width: var(--mk-upload_remove_size, 20px);
+					height: var(--mk-upload_remove_size, 20px);
+					text{
+						transform: scale(0.6);
+					}
+					&.topLeft{
+						text{
+							left: 6upx;
+							top: -6upx;
+						}
+					}
+					&.topRight{
+						text{
+							left: 10upx;
+							top: -6upx;
+						}
+					}
+					&.bottomLeft{
+						text{
+							left: 4upx;
+							top: 0;
+						}
+					}
+					&.bottomRight{
+						text{
+							left: 10upx;
+							top: 0;
+						}
+					}
+				}
+			}
+			
+		}
+	}
+</style>

components/sunui-upimg/sunui-upimg.vue

@@ -0,0 +1,391 @@
+<template>
+	<view class="s-add-list">
+		<view class="s-add-list-items" :style="{
+				height: size[0],
+				width: size[1]
+			}" v-for="(item, index) in imageList" :key="index">
+			<image :src="item[filedImage]" :url="item.url" @tap="showImgs" class="s-add-list-img" :mode="imgMode">
+			</image>
+			<view class="s-add-list-remove s-icons icon-close" @tap.stop="removeImg" :id="'s-items-img-' + index">
+				<icon type="clear" :color="closeColor"></icon>
+			</view>
+			<view class="upload-progress" :style="{ width: size[1] }">
+				<progress :percent="item.progress" :stroke-width="progressSize" :activeColor="progressColor"
+					:backgroundColor="progressBgColor" />
+			</view>
+			<view class="s-add-list-reup" @tap.stop="retry" :data-index="index" v-if="item.error">
+				<text class="s-add-list-reup-icon s-icons icon-retry"></text>
+				<text class="s-add-list-reup-text">失败重试</text>
+			</view>
+		</view>
+		<view class="s-add-list-items s-add-list-btn" :style="{
+				height: size[0],
+				width: size[1],
+				backgroundColor: backgroundColor
+			}" :class="disabled ? 's-disabled' : ''" @tap="addImg" v-if="imageList.length < number">
+			<slot name="icon"></slot>
+			<view class="s-add-list-btn-text">{{ title }}</view>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		props: {
+			// 图片字段
+			filedImage: {
+				type: String,
+				default: 'url'
+			},
+			// 背景颜色
+			backgroundColor: {
+				type: String,
+				default: '#f7f7f7'
+			},
+			// 是否禁用
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			// 上传数量
+			number: {
+				type: Number,
+				default: 9
+			},
+			// 按钮名称
+			title: {
+				type: String,
+				default: '添加照片'
+			},
+			// 上传文字颜色
+			titleColor: {
+				type: String,
+				default: "#999"
+			},
+			// 图片大小
+			size: {
+				type: Array,
+				default: () => ['222rpx', '222rpx']
+			},
+			// 上传前钩子
+			beforeUpload: {
+				type: Function
+			},
+			// 关闭按钮颜色
+			closeColor: {
+				type: String,
+				default: "#999"
+			},
+			// 服务器地址
+			url: {
+				type: String,
+				default: ''
+			},
+			// 进度条进度
+			progressSize: {
+				type: Number,
+				default: 1
+			},
+			// 进度条颜色
+			progressColor: {
+				type: String,
+				default: "#09A0F7"
+			},
+			// 进度条背景颜色
+			progressBgColor: {
+				type: String,
+				default: "#999"
+			},
+			// 上传文件名称
+			fileName: {
+				type: String,
+				default: 'img'
+			},
+			// 携带的form数据
+			formData: {
+				type: Object,
+				default: () => {
+					return {};
+				}
+			},
+			// 图片模式
+			imgMode: {
+				type: String,
+				default: 'widthFix'
+			},
+			// 携带的请求头
+			header: {
+				type: Object,
+				default: () => {
+					return {};
+				}
+			},
+			// 返回状态码，默认0
+			statusCode: {
+				type: Number,
+				default: 0
+			},
+			// 返回状态判断字段
+			statusField: {
+				type: String,
+				default: 'errno'
+			},
+		},
+		data() {
+			return {
+				imageList: [],
+				upDate: false
+			};
+		},
+		watch: {
+			imageList(newVal, oldVal) {
+				if (!this.upDate) {
+					this.$emit('change', newVal);
+				}
+			}
+		},
+		methods: {
+			clearAllImgs() {
+				this.imageList = [];
+			},
+			addImg() {
+				if (this.disabled) return;
+				let num = this.number - this.imageList.length;
+				if (num < 1) {
+					return false;
+				}
+				uni.chooseImage({
+					count: num,
+					sizeType: ['compressed'],
+					success: async res => {
+						let file = res.tempFiles;
+						for (let i = 0; i < res.tempFilePaths.length; i++) {
+							if (this.beforeUpload) {
+								const valid = await this.beforeUpload(file[i], i);
+								if (valid === false) {
+									return false;
+								}
+							}
+							this.imageList.push({
+								url: res.tempFilePaths[i],
+								progress: 0,
+								error: false
+							});
+						}
+					}
+				});
+			},
+			removeImg(e) {
+				let index = e.currentTarget.id.replace('s-items-img-', '');
+				let removeImg = this.imageList.splice(index, 1);
+				this.$emit('remove', removeImg[0]);
+			},
+			showImgs(e) {
+				let currentImg = e.currentTarget.dataset.url;
+				let imgs = [];
+				for (let i = 0; i < this.imageList.length; i++) {
+					imgs.push(this.imageList[i][this.filedImage]);
+				}
+				uni.previewImage({
+					urls: imgs,
+					current: currentImg
+				});
+			},
+			upload(index) {
+				if (this.upDate) {
+					return;
+				}
+				this.upDate = true;
+				if (!index) {
+					index = 0;
+				}
+				uni.showLoading({
+					title: '图片上传中'
+				});
+				this.uploadBase(index);
+			},
+			retry(e) {
+				let index = e.currentTarget.dataset.index;
+				this.upload(index);
+			},
+			uploadBase(index) {
+				// 全部上传完成
+				if (index > this.imageList.length - 1) {
+					uni.hideLoading();
+					this.upDate = false;
+					this.$emit('upload', this.imageList);
+					return;
+				}
+				// 验证后端
+				if (this.url == '') {
+					uni.showToast({
+						title: '请设置上传服务器地址',
+						icon: 'none'
+					});
+					return;
+				}
+				// 检查是否是默认值
+				if (this.imageList[index].progress >= 1) {
+					this.uploadBase(index + 1);
+					return;
+				}
+				this.imageList[index].error = false;
+				// 创建上传对象
+				const upTask = uni.uploadFile({
+					url: this.url,
+					filePath: this.imageList[index].url,
+					name: 'file' || this.fileName,
+					formData: this.formData,
+					header: this.header,
+					// #ifdef MP-ALIPAY
+					fileType: 'image',
+					// #endif
+					success: uploadRes => {
+						uploadRes = JSON.parse(uploadRes.data);
+						if (uploadRes[this.statusField] != this.statusCode) {
+							uni.showToast({
+								title: '上传失败 : ' + uploadRes.data,
+								icon: 'none'
+							});
+							this.error(index);
+						} else {
+							//上传图片成功
+							this.imageList[index].progress = 100;
+							this.imageList[index].url = uploadRes.data;
+							this.imageList[index].result = uploadRes;
+							this.uploadBase(index + 1);
+						}
+					},
+					fail: e => {
+						uni.showToast({
+							title: '上传失败，请点击图片重试',
+							icon: 'none'
+						});
+						this.error(index);
+					}
+				});
+				upTask.onProgressUpdate(res => {
+					if (res.progress > 0) {
+						this.imageList[index].progress = res.progress;
+						this.imageList.splice(index, 1, this.imageList[index]);
+					}
+				});
+			},
+			// 上传错误
+			error(index) {
+				this.upDate = false;
+				setTimeout(() => {
+					this.imageList[index].progress = 0;
+					this.imageList[index].error = true;
+					this.$emit('uploaderror');
+				}, 500);
+			},
+			// 设置默认值
+			setItems(items) {
+				if (items.length) {
+					this.imageList = [];
+					for (let i = 0; i < items.length; i++) {
+						this.imageList.push({
+							url: items[i],
+							progress: 100
+						});
+					}
+				}
+			}
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	.s-disabled {
+		cursor: not-allowed;
+	}
+
+	.s-add-list {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.s-add-list-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.s-add-list-btn-text {
+		font-size: 1.875rem;
+		line-height: 36rpx;
+		text-align: center;
+		color: #999;
+		width: 100%;
+	}
+
+	.s-add-list-items {
+		width: 222rpx;
+		height: 222rpx;
+		overflow: hidden;
+		margin-bottom: 10rpx;
+		margin-right: 11rpx;
+		/* background: #f6f7f8; */
+		font-size: 0;
+		position: relative;
+		border-radius: 10rpx;
+	}
+
+	.s-add-list-image {
+		width: 222rpx;
+	}
+
+	.s-add-list-remove {
+		position: absolute;
+		z-index: 15;
+		right: 10rpx;
+		top: 0;
+		color: #888888;
+	}
+
+	.upload-progress {
+		position: absolute;
+		z-index: 99;
+		left: 0;
+		bottom: 10rpx;
+		// width: 180rpx;
+		padding: 0 21rpx;
+	}
+
+	.s-add-list-reup {
+		position: absolute;
+		z-index: 3;
+		left: 0;
+		top: 0rpx;
+		width: 100%;
+		height: 222rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.3);
+		flex-direction: column;
+	}
+
+	.s-add-list-reup-icon {
+		text-align: center;
+		width: 100%;
+		color: #ffffff;
+		display: block;
+		font-size: 80rpx;
+		line-height: 100rpx;
+	}
+
+	.s-add-list-reup-text {
+		text-align: center;
+		width: 100%;
+		color: #ffffff;
+		display: block;
+		font-size: 20rpx;
+		line-height: 30rpx;
+	}
+
+	.s-add-list-img {
+		width: 100%;
+		height: 100%;
+	}
+</style>

pages/baggagecheck/index.vue

@@ -24,7 +24,7 @@
       </view>
       <view class="picturearea">
         <view class="name">图片上传</view>
-        <view class="content_list">
+        <!-- <view class="content_list">
           <view class="mg">
             <view class="mg_lg"></view>
           </view>
@@ -34,13 +34,24 @@
           <view class="mg">
             <view class="mg_lg"></view>
           </view>
-        </view>
+        </view> -->
+        <!-- <sunui-upimg :url="upPicUrl" :before-upload="onBeforeUpload" ref="upload3" title="+" @upload="handleLoaded3" @change="handleChange3" :number="3">
+          <template v-slot:icon>
+              <text class="s-add-list-btn-icon">+</text>
+          </template>
+      </sunui-upimg> -->
+      <mk-upload 
+        :imgList="imgList"
+        @onDelete="onDelete"
+        @onChoose="onChoose"
+      />
       </view>
     </view>
   </view>
 </template>
 <script>
 	import Nav from '../../components/header/nav.vue'
+  import mkUpload from "@/components/mk-upload/mk-upload.vue"
 	export default {
 		data() {
 			return {
@@ -58,6 +69,8 @@
 				intentServer:null,
 				arr: [],
 				navname: '异常行李登记',
+        imgList: [
+        ]
 			}
 		},
 		created(option) {
@@ -71,7 +84,8 @@
 		mounted() {
 		},
 		components: {
-			Nav
+			Nav,
+      mkUpload
 		},
 		methods: {
 			fall () {
@@ -79,6 +93,45 @@
 					url: "/pages/sorting/index"
 				})
 			},
+      onDelete(index){
+        console.log(index)
+        //删除成功回调后执行 只做演示
+        uni.showLoading({
+            title: '删除中'
+        });
+        setTimeout(()=>{
+            this.imgList.splice(index, 1);
+            wx.showToast({
+                title: '删除成功',
+                icon: 'success',
+                duration: 1000
+            });
+        }, 1000);
+      },
+      onChoose(e){
+          console.log(e)
+          //上传成功后回调执行push  只做演示
+          uni.showLoading({
+              title: '上传中'
+          });
+          setTimeout(()=>{
+              const tempFilePaths = e.tempFilePaths;
+              this.imgList.push(tempFilePaths[0]);
+              uni.hideLoading();
+          }, 1000);
+      },
+      onPreviewTake(index){
+          console.log(index)
+          wx.showActionSheet({
+            itemList: ['预览图片', '删除图片'],
+            success (res) {
+              console.log(res.tapIndex)
+            },
+            fail (res) {
+              console.log(res.errMsg)
+            }
+          })
+      },
 		},
 	}
 </script>
@@ -136,6 +189,7 @@
         font-family: Noto Sans SC;
         font-size: .8125rem;
         font-weight: 500;
+        margin-bottom: 1.25rem;
       }
       >.content_list{
         width: 100%;

uni_modules/luyj-choose-img/changelog.md

@@ -0,0 +1,10 @@
+## 1.0.4（2021-09-14）
+修改未完成的d_imgs
+## 1.0.3（2021-09-14）
+修改默认是否可编辑为true
+## 1.0.2（2021-09-13）
+添加标题样式、是否可编辑参数
+## 1.0.1（2021-08-07）
+补充说明文档
+## 1.0.0（2021-07-26）
+选择图片组

uni_modules/luyj-choose-img/components/luyj-choose-img/luyj-choose-img.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="bg-white">
+		<view v-if="showTitleBar" class=" cu-bar  padding-sm " :class="titleClass">
+			<view class="action text-bold text-xl">
+				{{ titleText }}
+			</view>
+			<view class="action">
+				{{d_imgList.length}}/{{imgMaxCount}}
+			</view>
+		</view>
+		<view class="cu-form-group padding-left-xl solid-bottom margin-top">
+			<view class="grid col-4 grid-square flex-sub">
+				<view class="bg-img" v-for="(item,index) in d_imgList" :key="index" @tap="ViewImage" :data-url="d_imgList[index]">
+				 <image :src="d_imgList[index]" mode="aspectFill"></image>
+					<view v-if="edit" class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
+						<text class='cuIcon-close'></text>
+					</view>
+				</view>
+				<!-- 添加图片 -->
+				<view  v-if="d_imgList.length< imgMaxCount && edit" class="solids" @tap="ChooseImage">
+					<text class='cuIcon-cameraadd'></text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * luyj-choose-img 基础ColorUI的选择图片组插件
+	 * @description  基于Color UI的选择图片组插件
+	 * @tutorial url https://ext.dcloud.net.cn/plugin?id=5724
+	 * @property {String} titleText 默认标题（默认值图片组）
+	 * @property {String} titleClass 标题栏显示类
+	 * @property {Boolean} showTitleBar 是否展示标题栏（默认值true）
+	 * @property {Number} imgMaxCount 最大上传图片数（默认9）
+	 * @property {Boolean} edit 是否可编辑
+	 * @event {Function()} imgChange 修改图片后当前的图片组 
+	 */
+	export default {
+		name :"luyj-choose-img",
+		props:{
+			// 默认标题
+			titleText :{
+				type: String,
+				default:'图片组'
+			},
+			// 是否展示标题栏
+			showTitleBar :{
+				type: Boolean,
+				default: true
+			},
+			// 标题栏显示类
+			titleClass : {
+				type: String,
+				default: ''
+			},
+			// 默认图片组
+			imgList : {
+				type: Array,
+				default : () =>{
+					return [];
+				}
+			},
+			// 最大图片数
+			imgMaxCount : {
+				type : Number,
+				default: 9,
+			},
+			// 是否可编辑
+			edit : {
+				type:Boolean,
+				default:true
+			}
+		},
+		data(){
+			return {
+				d_imgList: this.imgList,				// 用于上传的图片组
+			}
+		},
+		watch:{
+			imgList : function(val){
+				if(this.d_imgList != val){
+					this.d_imgList = val;
+				}
+			}
+		},
+		methods:{
+			/**
+			 * 选择图片
+			 */
+			ChooseImage : function() {
+				uni.chooseImage({
+					count: this.imgMaxCount - this.d_imgList.length,  // 默认上传图片数
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						if (this.d_imgList.length != 0) {
+							this.d_imgList = this.d_imgList.concat(res.tempFilePaths);
+						} else {
+							this.d_imgList = res.tempFilePaths;
+						}
+						this.$emit("imgChange", this.d_imgList);		// 变换图片
+					}
+				});
+			},
+			/** 查看图片
+			 * @param {Object} e
+			 */
+			ViewImage : function (e) {
+				uni.previewImage({
+					urls: this.imgList,
+					current: e.currentTarget.dataset.url
+				});
+			},
+			/** 删除图片
+			 * @param {Object} e
+			 */
+			DelImg: function(e) {
+				this.imgList.splice(e.currentTarget.dataset.index, 1); // 删除当前图片
+				this.$emit("imgChange", this.imgList);				   // 变换图片
+			},
+		}
+	}
+</script>
+<style lang="scss" scoped>
+</style>

uni_modules/luyj-choose-img/package.json

@@ -0,0 +1,83 @@
+{
+  "id": "luyj-choose-img",
+  "displayName": "基于Color UI的选择图片并上传",
+  "version": "1.0.4",
+  "description": "基于Color UI 的选择图片并上传。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "color-ui",
+    "img"
+],
+  "repository": "https://github.com/luyanjie00436/luyj-choose-img-app",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "u"
+        }
+      }
+    }
+  }
+}

uni_modules/luyj-choose-img/readme.md

@@ -0,0 +1,43 @@
+# luyj-choose-img
+> 代码块 `luyj-choose-img`
+
+# 说明
+
+本组件于是基于[ColorUI-uniAPP](https://ext.dcloud.net.cn/plugin?id=239)模板表单中图片。用于图片的选择。
+
+# 安装方式
+
+* 本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+* 本组件的样式基于ColorUI 。所以，若要使用先依照官网下载并下源码解压，复制根目录的 /colorui 文件夹到你的根目录。然后在App.vue 引入关键Css `main.css` `icon.css`。
+
+``` html
+<style>
+    @import "colorui/main.css";
+    @import "colorui/icon.css";
+    @import "app.css"; /* 你的项目css */
+    ....
+</style>
+```
+
+# 基本用法
+
+在 ``template`` 中的使用
+``` html
+<luyj-choose-img @imgChange="imgChange"></luyj-choose-img>
+```
+
+其中，``@imgChange``是改变选择图片时的传出方法
+
+# 属性
+
+|属性名					|类型			|默认值		|说明			|													
+|:-:					|:-:			|:-:		|:-:			|													
+| titleText				|String			|图片组		|标题，选择图片组插件的标题	|
+|showTitleBar			|Boolean		|true		|是否展示标题栏	|
+|imgMaxCount			|Number			|9			|最大上传的图片数	|
+
+# 事件
+
+| 事件名		| 说明		|	返回参数 
+| :-:			| :-:		| :-:	
+|@imgChange		| 修改图片后，执行方法			| 数组，修改后图片的本地路径