封装 f-avatar-edit 插件（头像选择），上传插件市场

pages/index/index.vue

@@ -3,6 +3,8 @@
 		<f-status-view v-if="statusViewUI.isShowStatusView" :status="statusViewUI.status" :style="statusViewStyle"
 			@tap="onStatusViewClick"></f-status-view>
 
+		<f-avatar-edit :avatar="avatar" @onAvatarSelected="onAvatarSelected" @click="onAvatarClick" @onSelectBtnClick="onSelectAvatarBtnClick"></f-avatar-edit>
+
 		<f-view-bottom-fixed>
 			<f-button-01 style="flex: 0 0 50%;" clazz="style-02" text="存为模板" backgroundColor="#222222"></f-button-01>
 			<f-button-01 style="flex: 0 0 50%;" clazz="style-03" text="提交"></f-button-01>
@@ -75,6 +77,7 @@
 		data() {
 			return {
 				title: 'fashion-ui',
+				avatar: "/static/logo.png",
 				statusViewStyle: {
 					width: "",
 					height: "",
@@ -142,6 +145,15 @@
 			this.cMultiText01Ui02Init()
 		},
 		methods: {
+			onAvatarSelected(res) {
+				this.avatar = res[0]
+			},
+			onAvatarClick(res) {
+				
+			},
+			onSelectAvatarBtnClick(res) {
+
+			},
 			onImageChoose(res) {
 
 			},

uni_modules/f-avatar-edit/changelog.md

+## 1.0.0（2024-06-04）
+1.0.0

uni_modules/f-avatar-edit/components/f-avatar-edit/f-avatar-edit.vue

+<template>
+	<view class="flex-row v-avatar" style="padding-right: 10rpx" :style="[style]" @click="onClick">
+		<f-image-01 :avatar="avatar" :style="avatarStyle"></f-image-01>
+		<image class="image-avatar-right" src="/static/f/com-camera-small.png" mode="aspectFill"
+			@click.stop="onSelectBtnClick"></image>
+	</view>
+</template>
+<script>
+	export default {
+		name: "f-avatar-edit",
+		props: {
+			avatar: {
+				type: String,
+				default: ""
+			},
+			style: {
+				type: Object,
+				default: {}
+			},
+			avatarStyle: {
+				type: Object,
+				default: {}
+			}
+		},
+		methods: {
+			onClick() {
+				this.$emit("click")
+			},
+			onSelectBtnClick() {
+				let _this = this;
+				this.$emit("onSelectBtnClick")
+				uni.chooseImage({
+					success(res) {
+						console.log('res: ', res);
+						_this.$emit("onAvatarSelected", res.tempFilePaths)
+					}
+				})
+			},
+		}
+	}
+</script>
+<style lang="scss">
+	.v-avatar {
+		position: relative;
+		width: 160rpx;
+		height: 160rpx;
+		margin-left: auto;
+		margin-right: auto;
+
+		.image-avatar {
+			flex-shrink: 0;
+			width: 100%;
+			height: 100%;
+			border-radius: 160rpx;
+			background-color: $c-bg-color-avatar;
+		}
+
+		.image-avatar-right {
+			width: 48rpx;
+			height: 48rpx;
+			bottom: 0rpx;
+			right: 14rpx;
+			flex-shrink: 0;
+			position: absolute;
+		}
+	}
+</style>
\ No newline at end of file

uni_modules/f-avatar-edit/package.json

+{
+  "id": "f-avatar-edit",
+  "displayName": "f-avatar-edit",
+  "version": "1.0.0",
+  "description": "f-avatar-edit",
+  "keywords": [
+    "f-avatar-edit"
+],
+  "repository": "",
+  "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": "u"
+        },
+        "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-avatar-edit/readme.md

+# f-avatar-edit
\ No newline at end of file

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

 <template>
-	<image class="f-image-01" :src="src" :style="[style]" mode="aspectFill" @click="onAvatarClick" @error="onLoadError">
+	<image class="f-image-01" :src="src" :style="[style]" mode="aspectFill" @error="onLoadError">
 	</image>
 </template>
 
@@ -33,9 +33,6 @@
 		},
 		created() {},
 		methods: {
-			onAvatarClick() {
-				this.$emit("onAvatarClick")
-			},
 			onLoadError(res) {
 				console.log("onLoadError", res);
 				this.src = AVATAR_DEFAULT
@@ -46,12 +43,11 @@
 
 <style lang="scss">
 	.f-image-01 {
-		width: 112rpx;
-		height: 112rpx;
-		border-radius: 112rpx;
-		margin-right: 16rpx;
+		width: 160rpx;
+		height: 160rpx;
+		border-radius: 160rpx;
 		background-repeat: no-repeat;
-		background-size: 112rpx 112rpx;
+		background-size: 160rpx 160rpx;
 		background-color: $c-bg-color-avatar;
 		z-index: 666;
 		flex-shrink: 0;