封装 f-add-image-grid 插件（图片选择），并上传插件市场；修改图片路径

common/ui.js

@@ -22,12 +22,12 @@ const statusViewUI = {
 		},
 		empty: {
 			value: "empty",
-			src: "/static/icon-empty.png",
+			src: "/static/f/icon-empty.png",
 			text: "暂无内容",
 		},
 		error: {
 			value: "error",
-			src: "/static/icon-error.png",
+			src: "/static/f/icon-error.png",
 			text: "服务器开小差，请稍候再试",
 		},
 	}

pages/index/index.vue

 <template>
 	<view class="content" :style="[style]">
-		<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" @tap="onStatusViewClick"></f-status-view>
+		<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status"
+			@tap="onStatusViewClick"></f-status-view>
+
+		<f-add-image-grid @choose="onImageChoose" @delete="onImageDelete"></f-add-image-grid>
+
 		<button @click="showPopTop">f-pop-top</button>
 		<button @click="showPopCenter">f-pop-center</button>
 		<button @click="showPopBottom">f-pop-bottom</button>
@@ -27,7 +31,7 @@
 			</template>
 		</f-pop>
 		<f-pop-date-time-picker :isShow="isShowPopDatetimePicker" mode="date" returnType="yyyy-MM-dd"
-		 @change="onPopDatetimePickerChange" @dismiss="onPopDatatimePickerDismiss" />
+			@change="onPopDatetimePickerChange" @dismiss="onPopDatatimePickerDismiss" />
 		<f-image-01></f-image-01>
 		<f-text-01 :ui="uiAddBtn"></f-text-01>
 		<view style="display: block; width: 100%;">
@@ -69,7 +73,7 @@
 						marginRight: "32rpx",
 					},
 					uiIcon: {
-						value: "/static/icon-add.png",
+						value: "/static/f/icon-add.png",
 					},
 					uiTxt: {
 						value: "新增",
@@ -112,6 +116,12 @@
 			this.cMultiText01UiInit()
 		},
 		methods: {
+			onImageChoose(res) {
+				
+			},
+			onImageDelete(res) {
+				
+			},
 			showPopTop() {
 				this.isShowPopTop = true
 			},
@@ -133,7 +143,7 @@
 				this.isShowPopDatetimePicker = false
 			},
 			onPopDatetimePickerChange(res) {
-				console.log('onPopDatetimePickerChange res: ',res);
+				console.log('onPopDatetimePickerChange res: ', res);
 				this.onPopDatatimePickerDismiss()
 			},
 			styleInit() {
@@ -145,7 +155,7 @@
 				let ui = JSON.parse(JSON.stringify(constant.CONST.cMultiTextUI));
 				ui.prefix = '面积'
 				ui.value = '56'
-				ui.iconRight = "/static/icon-dropdown.png"
+				ui.iconRight = "/static/f/icon-dropdown.png"
 				ui.isShowIconRight = true
 				ui.clickActive = true
 				this.cMultiText01Ui = ui

uni_modules/f-add-image-grid/changelog.md

+## 1.0.0（2024-05-30）
+1.0.0

uni_modules/f-add-image-grid/components/f-add-image-grid/f-add-image-grid.vue

+<template>
+	<view class="view-grid-pic flex-row" :style="{width: width}">
+		<view class="view-image-container" v-for="(item, index) in picsInner" :index="index" :key="index">
+			<image class="image-grid-pic" :src="item" mode="aspectFill" @click="onImageClick(index)">
+			</image>
+			<image class="image-delete" src="/static/f/icon-delete-image.png" @click="onDeleteImageBtnClick(index)"
+				:style="{opacity: edit ? 1 : 0}"></image>
+		</view>
+		<image :style="{'border': showBorder()}" class="image-add-pic-btn" src="/static/f/icon-add-image.png"
+			@click="onAddPicBtnClick" v-if="edit && picsInner.length < max"></image>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "f-add-image-grid",
+		data() {
+			return {
+				picsInner: []
+			};
+		},
+		props: {
+			max: {
+				type: Number,
+				default: 6
+			},
+			pics: {
+				type: Array,
+				default: []
+			},
+			edit: {
+				type: Boolean,
+				default: true
+			},
+			width: {
+				type: String,
+				default: "444rpx"
+			},
+			isBorder: {
+				type: Boolean,
+				default: true
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			showBorder() {
+				if (!this.isBorder) {
+					return 'none';
+				}
+			},
+			onDeleteImageBtnClick(index) {
+				//this.$emit("delete", index);
+				this.picsInner = this.picsInner.filter((item)=> {
+					return this.picsInner[index] != item
+				})
+				this.$emit("delete", _this.picsInner)
+			},
+			onAddPicBtnClick() {
+				this.$emit("onAddPicBtnClick");
+				let _this = this;
+				uni.chooseImage({
+					count: this.count,
+					success(res) {
+						//console.log('chooseImage success res: ', res);
+						let tempFilePaths = res.tempFilePaths;
+						tempFilePaths.forEach((item, index) => {
+							_this.picsInner.push(item)
+						})
+						this.$emit("choose", _this.picsInner)
+					},
+					fail(res) {
+						console.log('chooseImage fail res: ', res);
+					},
+					complete(res) {
+						//.log('chooseImage complete res: ',res);
+					}
+				})
+			},
+			getPaths() {
+				let path = "";
+				let length = this.picsInner.length;
+				this.picsInner.forEach((item, index) => {
+					if (index == length - 1) {
+						path += item;
+					} else {
+						path += item + ",";
+					}
+				})
+				return path;
+			},
+			onImageClick(index) {
+				// let paths = this.getPaths();
+				// this.$emit("onImageClick", {
+				// 	index: index,
+				// 	paths: paths,
+				// })
+				uni.previewImage({
+					current: index,
+					urls: this.picsInner,
+					indicator: "number",
+					loop: true,
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.view-image-container {
+		display: flex;
+		margin-bottom: 2rpx;
+		position: relative;
+	}
+
+	.view-grid-pic {
+		width: 444rpx;
+		padding-bottom: 20rpx;
+		flex-wrap: wrap;
+	}
+
+	.image-grid-pic {
+		flex-shrink: 0;
+		display: flex;
+		width: 128rpx;
+		height: 128rpx;
+		margin-right: 16rpx;
+		margin-top: 16rpx;
+		// border: #ebebeb solid 1rpx;
+		border-radius: 24rpx;
+	}
+
+	.view-image-container::after {
+		border: none;
+	}
+
+	.image-add-pic-btn {
+		flex-shrink: 0;
+		margin-top: 16rpx;
+		width: 123rpx;
+		height: 123rpx;
+		padding: 4rpx;
+		border-radius: 24rpx;
+	}
+
+	.image-delete {
+		width: 32rpx;
+		height: 32rpx;
+		position: absolute;
+		top: 0rpx;
+		right: 0rpx;
+	}
+</style>
\ No newline at end of file

uni_modules/f-add-image-grid/package.json

+{
+  "id": "f-add-image-grid",
+  "displayName": "f-add-image-grid",
+  "version": "1.0.0",
+  "description": "图片选择",
+  "keywords": [
+    "f-add-image-grid"
+],
+  "repository": "http://git.guoguodz.com/tangfh/fashion-ui.git",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "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",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u",
+          "app-uvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "u",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "u",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/f-add-image-grid/readme.md

+# f-add-image-grid
\ No newline at end of file

uni_modules/f-image-01/changelog.md

+## 1.0.2（2024-05-30）
+1.0.2
 ## 1.0.1（2024-05-28）
 1.0.1
 ## 1.0.0（2024-05-28）

uni_modules/f-image-01/components/f-image-01/f-image-01.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script>
-	const AVATAR_DEFAULT = "/static/ic_avatar_default.png"
+	const AVATAR_DEFAULT = "/static/f/ic_avatar_default.png"
 	export default {
 		name: "f-image-01",
 		data() {

uni_modules/f-image-01/package.json

 {
   "id": "f-image-01",
   "displayName": "f-image-01",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "f-image-01",
   "keywords": [
     "f-image-01"

uni_modules/f-pop/changelog.md

+## 1.0.4（2024-05-30）
+1.0.4
 ## 1.0.3（2024-05-29）
 1.0.3
 ## 1.0.2（2024-05-29）

uni_modules/f-pop/components/f-pop/f-pop.vue

@@ -116,7 +116,7 @@
 			},
 			closeIcon: {
 				type: String,
-				default: "/static/icon-close.png"
+				default: "/static/f/icon-close.png"
 			}
 		},
 		mounted() {

uni_modules/f-pop/package.json

 {
   "id": "f-pop",
   "displayName": "f-pop",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "f-pop 插件（底部弹出，中间弹出，顶部弹出）",
   "keywords": [
     "f-pop"