4月26日提交

components/htz-image-upload/htz-image-upload.vue

@@ -7,7 +7,8 @@
 					<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo(getFileUrl(item))">
 					</cover-view>
 
-					<cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc==''" @click="imgDel(index)">×</cover-view>
+					<cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc==''"
+						@click="imgDel(index)">×</cover-view>
 
 				</video>
 				<!-- #endif -->
@@ -21,8 +22,9 @@
 
 			<view class="htz-image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view>
 		</view>
-		<view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length<max && add" @click="chooseFile">
-			+
+		<view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length<max && add"
+			@click="chooseFile">
+			<text class="iconfont icon-xiangji"></text>
 		</view>
 		<view class="preview-full" v-if="previewVideoSrc!=''">
 			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
@@ -30,7 +32,7 @@
 				</cover-view>
 			</video>
 		</view>
-    <view v-if="showTips" style="font-size: 20rpx;color: #f12a2a;">请上传不超过5MB格式为png/jpg/jpeg的图片</view>
+		<view v-if="showTips" style="font-size: 20rpx;color: #f12a2a;">请上传不超过5MB格式为png/jpg/jpeg的图片</view>
 
 		<!--  -->
 	</view>
@@ -363,17 +365,17 @@
 					sourceType: this.sourceType,
 					success: (res) => {
 						if (res.tempFiles[0].size < 1024 * 1024 * 5) {
-						this.chooseSuccessMethod(res.tempFilePaths, 0)
-						//console.log('tempFiles', res)
-						// if (this.action == '') { //未配置上传路径
-						// 	this.$emit("chooseSuccess", res.tempFilePaths);
-						// } else {
-						// 	if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
-						// 		this.imgCompress(res.tempFilePaths);
-						// 	} else {
-						// 		this.imgUpload(res.tempFilePaths);
-						// 	}
-						// }
+							this.chooseSuccessMethod(res.tempFilePaths, 0)
+							//console.log('tempFiles', res)
+							// if (this.action == '') { //未配置上传路径
+							// 	this.$emit("chooseSuccess", res.tempFilePaths);
+							// } else {
+							// 	if (this.compress && (res.tempFiles[0].size / 1024 > 1025)) { //设置了需要压缩 并且 文件大于1M，进行压缩上传
+							// 		this.imgCompress(res.tempFilePaths);
+							// 	} else {
+							// 		this.imgUpload(res.tempFilePaths);
+							// 	}
+							// }
 						} else {
 							uni.showToast({
 								title: '图片过大，无法上传',
@@ -715,6 +717,7 @@
 		top: 25rpx;
 		width: 80rpx;
 		height: 80rpx;
+		border-radius: 80rpx;
 		line-height: 60rpx;
 		text-align: center;
 		z-index: 1003;
@@ -762,6 +765,7 @@
 		margin: 13rpx;
 		border-radius: 10rpx;
 		position: relative;
+		border: 1px solid rgba(0,0,0,.1);
 	}
 
 	.htz-image-upload-Item image {
@@ -798,23 +802,27 @@
 	}
 
 	.htz-image-upload-Item-add {
+		position: relative;
 		font-size: 105rpx;
 		/* line-height: 160rpx; */
 		text-align: center;
 		border: 1px dashed #d9d9d9;
 		color: #d9d9d9;
+		
 	}
-
+	.htz-image-upload-Item-add .iconfont{ position: absolute;top: 40rpx!important; left: 50%; transform: translate(-50%,0);}
+.htz-image-upload-Item-add .iconfont::before{font-size: 60rpx;}
 	.htz-image-upload-Item-del {
-		background-color: #f5222d;
+		background-color: #f56c6c;
 		font-size: 24rpx;
 		position: absolute;
 		width: 35rpx;
 		height: 35rpx;
+		border-radius: 35rpx;
 		line-height: 35rpx;
 		text-align: center;
-		top: 0;
-		right: 0;
+		top: -10rpx;
+		right: -10rpx;
 		z-index: 15;
 		color: #fff;
 	}
@@ -843,4 +851,4 @@
 		width: 100%;
 		height: 100%;
 	}
-</style>
+</style>

static/icons/iconfont.css

@@ -5,7 +5,6 @@
        url('/static/icons/iconfont.ttf') format('truetype');
 }
 
-
 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -14,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xiangji:before {
+  content: "\e6a0";
+}
+
 .icon-plant-area:before {
   content: "\e69d";
 }