上传组件优化

components/tpx-date-input/tpx-date-input.vue

@@ -9,11 +9,13 @@
 			</template>
 		</u-input>
 		<view class="pos-abt-all">
+			<view v-if="showTools" @click.stop="">
 				<tpx-select :list="toolsRangesList" :value="value[1]" :customInput="true" mode="drop" @onChange="handleToolsRangChange">
 					<view :style="`height: 64rpx;`" ></view>
 				</tpx-select>
 			</view>
 		</view>
+	</view>
 	<!-- 日历 -->
 	<u-calendar title="请选择日期范围" color="#B12D29" mode="range" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="value" @confirm="handleClaOk" @close="handleSwitchCladar"
 	></u-calendar>
@@ -87,9 +89,7 @@
 		
 		methods: {
 			handleSelectDate() {
-				if(!this.showTools) {
 				this.handleSwitchCladar()
-				}
 			},
 			handleChange(val){
 				this.$emit('change', val)

components/tpx-upload/tpx-upload.vue

@@ -1,5 +1,18 @@
 <template>
 	<view :style="`${customstyle};flex-direction: ${direction};`" class="up-cont">
+		
+		<view v-for="(item, index) in list" :style="`${compItemstyle}`">
+			<view class="cdimg" @click="handleItem(index)">
+				<tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :height="height" :width="width"></tpx-image>
+				<video v-if="fileType==fileTypeEnum.video" :src="item"></video>
+				<view v-if="fileType==fileTypeEnum.all">{{item}}</view>
+				
+				<view v-if="!disabled" @click.stop="handleDel(index)" class="delIcon">
+					<u-icon name="close-circle-fill" size="32" color=""></u-icon>
+				</view>
+			</view>
+		</view>
+		
 		<view v-if="list.length < maxLen" style="width: 100%;">
 			<view v-if="!isSlot"  @click="handleChooseFile" class="camer-btn" :style="`width:${width}rpx;height:${height}rpx;`">
 				<template v-if="btnText">
@@ -23,14 +36,6 @@
 			</view>
 		</view>
 
-		<view v-for="(item) in list" :style="`${compItemstyle}`">
-			<view class="cdimg" @click="handleItem" data-index="{{index}}">
-				<tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :height="height" :width="width"></tpx-image>
-				<video v-if="fileType==fileTypeEnum.video" :src="item"></video>
-				<view v-if="fileType==fileTypeEnum.all">{{item}}</view>
-			</view>
-		</view>
-
 	</view>
 </template>
 
@@ -59,7 +64,7 @@
 				return res
 			},
 			compItemstyle(){
-				let style =  `margin-bottom: 20rpx;`
+				let style =  `margin-bottom: 16rpx;margin-right: 16rpx;`
 				if(this.direction == "row") {
 					// style += `width:${this.width}rpx;height:${this.height}rpx;`
 				}
@@ -122,6 +127,11 @@
 					return 1
 				}
 			},
+			disabled: {
+				default () {
+					return false
+				}
+			},
 			isSlot: {
 				default () {
 					return false
@@ -150,48 +160,20 @@
 				}
 				return coreMultiUploadFile(actMap[this.fileType], opt)
 			},
-			handlePreview() {
+			handlePreview(index) {
 				uni.previewImage({
+					current: index,
 					urls: [
 						...this.list
 					]
 				})
 			},
-			handleItem(e) {
+			handleDel(index){
-				const that = this
+				this.list.splice(index, 1)
-				const index = e.currentTarget.dataset.index
+				this.triggerChanged(this.list)
-				let { list, fileType } = this
-				let itemList = ['更换', '删除', '预览']
-				if (fileType == fileTypeEnum.video) {
-					itemList.length--
-				}
-				uni.showActionSheet({
-					itemList,
-					success: (res) => {
-						const {
-							tapIndex
-						} = res
-						if (tapIndex == 0) {
-							// 更换, 只能选择一个文件
-							that.doChooseFile({
-								count: 1
-							}).then((res) => {
-								list[index] = res[0]
-								that.triggerChanged(list)
-							})
-						}
-						if (tapIndex == 1) {
-							list.splice(index, 1)
-							that.triggerChanged(list)
-						}
-						if (tapIndex == 2) {
-							this.handlePreview()
-						}
 			},
-					fail: (res) => {
+			handleItem(index) {
-						console.log(res.errMsg)
+				this.handlePreview(index)
-					}
-				})
 			},
 			handleChooseFile: function() {
 				let that = this
@@ -238,4 +220,17 @@
 		align-items: center;
 		margin-bottom: 20rpx;
 	}
+	.cdimg {
+		position: relative;
+		.delIcon{
+			position: absolute;
+			height: 46rpx;
+			width: 46rpx;
+			right: -10rpx;
+			top: -10rpx;
+			.u-icon{
+				justify-content: end;
+			}
+		}
+	}
 </style>

pages/goods/edit.vue

@@ -201,8 +201,8 @@
 						</u-row>
 					</view>
 				</view>
-				
+				<!-- fileType="all" -->
-				<tpx-upload v-model:value="baseFormData.pic1" isSlot="true" maxLen="10">
+				<tpx-upload v-model:value="baseFormData.fujianFiles"  isSlot="true" maxLen="10">
 					<u-button custom-style="border-radius: 16rpx;" type="primary" plain="true">
 						<u-row justify="center">
 							<view>
@@ -252,6 +252,7 @@
 					ydList: [
 						{}
 					],
+					fujianFiles: []
 				},
 				goodinfoModal:{
 					show: false,