完成输入和单位换算一体组件

2023-07-19 16:03:07 +08:00 · 2023-07-19 16:03:07 +08:00 · c7b4db67bf
commit c7b4db67bf
parent 295c0f2ced
17 changed files with 1144 additions and 497 deletions
--- a/README.md
+++ b/README.md
@ -25,7 +25,7 @@ RuoYi App 移动解决方案，采用uniapp框架，一份代码多终端适配
 - 官网网站：[http://ruoyi.vip](http://ruoyi.vip)
 - 文档地址：[http://doc.ruoyi.vip](http://doc.ruoyi.vip)
 - H5页体验：[http://h5.ruoyi.vip](http://h5.ruoyi.vip)
- QQ交流群： ①133713780
+- QQ交流群： ①133713780(满)、②146013835
 - 小程序体验

 <img src="https://oscimg.oschina.net/oscnet/up-26c76dc90b92acdbd9ac8cd5252f07c8ad9.jpg" alt="小程序演示"/>
--- a/api/system/conversion.js
+++ b/api/system/conversion.js
@ -0,0 +1,47 @@
+import upload from '@/utils/upload'
+import request from '@/utils/request'
+
+// 查询单位换算列表
+export function listConversion(query) {
+	return request({
+		url: '/system/conversion/list',
+		method: 'get',
+		params: query
+	})
+}
+
+
+
+// 查询单位换算详细
+export function getConversion(id) {
+	return request({
+		url: '/system/conversion/' + id,
+		method: 'get'
+	})
+}
+
+// 新增单位换算
+export function addConversion(data) {
+	return request({
+		url: '/system/conversion',
+		method: 'post',
+		data: data
+	})
+}
+
+// 修改单位换算
+export function updateConversion(data) {
+	return request({
+		url: '/system/conversion',
+		method: 'put',
+		data: data
+	})
+}
+
+// 删除单位换算
+export function delConversion(id) {
+	return request({
+		url: '/system/conversion/' + id,
+		method: 'delete'
+	})
+}
--- a/config.js
+++ b/config.js
@ -1,7 +1,7 @@
 // 应用全局配置
 module.exports = {
-  baseUrl: 'https://vue.ruoyi.vip/prod-api',
-  // baseUrl: 'http://localhost:8080',
+	// baseUrl: 'https://vue.ruoyi.vip/prod-api',
+	baseUrl: 'http://192.168.3.19:9090',
 	// 应用信息
 	appInfo: {
 		// 应用名称
--- a/manifest.json
+++ b/manifest.json
@ -1,6 +1,6 @@
 {
 	"name": "若依移动端",
-    "appid" : "__UNI__25A9D80",
+	"appid": "__UNI__1347B29",
 	"description": "",
 	"versionName": "1.1.0",
 	"versionCode": "100",
--- a/package.json
+++ b/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "bignumber.js": "^9.1.2"
+  }
+}
--- a/pages-config-template.json
+++ b/pages-config-template.json
@ -0,0 +1,76 @@
+/* ===pages-tool===
+  该文件是pages-tool插件的配置文件模板，仅供参考。可以删除，不影响插件的使用。
+  pages-tool插件可实现将pages.josn中的配置拆分到多个配置文件中，以便实现模块化配置。
+  在应用中配置项较多、页面较多时，分别在不同文件中进行配置，可使项目代码更为清晰。
+  在团队多人合作时，按模块分工，分别管理不同的配置文件,可避免同时修改pages.json带来的代码冲突问题。
+  
+  注意：启用该插件并设置了配置文件之后，pages.json配置文件中相关配置项的内容可能会被替换，应根据paes-config.json的设置情况决定哪些配置应该在pages.josn中设置,哪些应该在指定的文件中设置。
+  提示：插件只会处理已设置的相关项点，不会覆盖pages.json中未指定的项点。详见配置示例
+   
+*/
+
+{
+	//可指定一个文件路径,从该文件读取globalStyle配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："globalStyle" : "pages-config/globalStyle.json"
+	//文件的格式同pages.json，但只应包含globalStyle配置项
+	"globalStyle" : "",
+	
+	//可指定一个文件路径,从该文件读取easycom配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："easycom" : "pages-config/easycom.json"
+	//文件的格式同pages.json，但只应包含easycom配置项
+	"easycom" : "",
+	
+	//可指定一个文件路径,从该文件读取tabBar配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："tabBar" : "pages-config/tabBar.json"
+	//文件的格式同pages.json，但只应包含tabBar配置项
+	"tabBar" : "",
+	
+	//可指定多个文件路径,合并多个文件的内容作为pages配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置为："pages" : ["pages-config/pages-moduleA.json", "pages-config/pages-moduleB.json", "pages-config/pages-moduleC.json", ...]
+	//每个文件的格式同pages.json，但只应包含pages配置项
+	"pages" : [],
+	
+	//可指定一个文件路径,从该文件读取condition配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："condition" : "pages-config/condition.json"
+	//文件的格式同pages.json，但只应包含condition配置项
+	"condition" : "",
+	
+	//可对每个分包指定一个文件路径,从该文件读取对应分包的pages配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："subPackages" : [pages-config/subPackages-moduleNameA.json, pages-config/subPackages-moduleNameB.json, ...],
+	//文件的格式同pages.json，但只应包含subPackages配置项
+	//需要注意：分包中的pages不能再拆分为多个文件
+	"subPackages" : [],
+	
+	//可指定一个文件路径,从该文件读取preloadRule配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："preloadRule" : "pages-config/preloadRule.json"
+	//文件的格式同pages.json，但只应包含preloadRule配置项
+	"preloadRule" : "",
+	
+	//推荐配置："workers" : "pages-config/workers.json"
+	//格式同pages.json
+	"workers" : "",
+	
+	//可指定一个文件路径,从该文件读取leftWindow配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："leftWindow" : "pages-config/leftWindow.json"
+	//文件的格式同pages.json，但只应包含leftWindow配置项
+	"leftWindow" : "",
+	
+	//可指定一个文件路径,从该文件读取topWindow配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："topWindow" : "pages-config/topWindow.json"
+	//文件的格式同pages.json，但只应包含topWindow配置项
+	"topWindow" : "",
+	
+	//可指定一个文件路径,从该文件读取rightWindow配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："rightWindow" : "pages-config/rightWindow.json"
+	//文件的格式同pages.json，但只应包含rightWindow配置项
+	"rightWindow" : "",
+    
+    //可指定一个文件路径,从该文件读取uniIdRouter配置；如果不设置，仍然使用pages.json中的配置项
+	//推荐配置："uniIdRouter" : "pages-config/uniIdRouter.json"
+	//文件的格式同pages.json，但只应包含uniIdRouter配置项
+	"uniIdRouter" : "",
+    
+    //默认启动首页，字符串配置（可以引入文件，也可以不引入文件），也可以直接在page.json中配置
+	//推荐配置："entryPagePath" : "/...." 或 "entryPagePath" : "pages-config/entryPagePath.json"
+    "entryPagePath": ""
+}
--- a/pages-config.json
+++ b/pages-config.json
@ -0,0 +1,40 @@
+/* ===pages-tool===
+  该文件是pages-tool插件的配置文件
+  pages-tool插件可实现将pages.josn中的配置拆分到多个配置文件中，以便实现模块化配置。
+  在应用中配置项较多、页面较多时，分别在不同文件中进行配置，可使项目代码更为清晰。
+  在团队多人合作时，按模块分工，分别管理不同的配置文件,可避免同时修改pages.json带来的代码冲突问题。
+  
+  注意：启用该插件并设置了配置文件之后，pages.json配置文件中相关配置项的内容可能会被替换，应根据paes-config.json的设置情况决定哪些配置应该在pages.josn中设置,哪些应该在指定的文件中设置。
+  提示：插件只会处理已设置的相关项点，不会覆盖pages.json中未指定的项点。详见配置示例
+   
+*/
+
+{
+	"globalStyle" : "pages-config/globalStyle.json",
+	
+	"easycom" : "",
+	
+	"tabBar" : "pages-config/tabBar.json",
+	
+	"pages" : ["pages-config/pages-all.json"],
+	
+	"condition" : "",
+	
+	"leftWindow" : "",
+	
+	"topWindow" : "",
+	
+	"rightWindow" : "",
+	
+	"uniIdRouter" : "",
+	
+	///以下各项为小程序特有配置
+	
+	"subPackages" : [],
+	
+	"preloadRule" : "",
+	
+	"workers" : "",
+	
+	"entryPagePath": ""
+}
--- a/pages-config/globalStyle.json
+++ b/pages-config/globalStyle.json
@ -0,0 +1,8 @@
+/* /// Pages-Tool: 该文件是pages-tool插件的配置文件，根据pages-config.json的配置,本文件的内容可能合并到pages.json*/
+{
+	"globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "RuoYi",
+    "navigationBarBackgroundColor": "#FFFFFF"
+  }
+}
--- a/pages-config/pages-all.json
+++ b/pages-config/pages-all.json
@ -0,0 +1,75 @@
+/* /// Pages-Tool: 该文件是pages-tool插件的配置文件，根据pages-config.json的配置,本文件的内容可能合并到pages.json*/
+{
+	"pages": [{
+    "path": "pages/login",
+    "style": {
+      "navigationBarTitleText": "登录"
+    }
+  }, {
+    "path": "pages/register",
+    "style": {
+      "navigationBarTitleText": "注册"
+    }
+  }, {
+    "path": "pages/index",
+    "style": {
+      "navigationBarTitleText": "若依移动端框架",
+      "navigationStyle": "custom"
+    }
+  }, {
+    "path": "pages/work/index",
+    "style": {
+      "navigationBarTitleText": "工作台"
+    }
+  }, {
+    "path": "pages/mine/index",
+    "style": {
+      "navigationBarTitleText": "我的"
+    }
+  }, {
+    "path": "pages/mine/avatar/index",
+    "style": {
+      "navigationBarTitleText": "修改头像"
+    }
+  }, {
+    "path": "pages/mine/info/index",
+    "style": {
+      "navigationBarTitleText": "个人信息"
+    }
+  }, {
+    "path": "pages/mine/info/edit",
+    "style": {
+      "navigationBarTitleText": "编辑资料"
+    }
+  }, {
+    "path": "pages/mine/pwd/index",
+    "style": {
+      "navigationBarTitleText": "修改密码"
+    }
+  }, {
+    "path": "pages/mine/setting/index",
+    "style": {
+      "navigationBarTitleText": "应用设置"
+    }
+  }, {
+    "path": "pages/mine/help/index",
+    "style": {
+      "navigationBarTitleText": "常见问题"
+    }
+  }, {
+    "path": "pages/mine/about/index",
+    "style": {
+      "navigationBarTitleText": "关于我们"
+    }
+  }, {
+    "path": "pages/common/webview/index",
+    "style": {
+      "navigationBarTitleText": "浏览网页"
+    }
+  }, {
+    "path": "pages/common/textview/index",
+    "style": {
+      "navigationBarTitleText": "浏览文本"
+    }
+  }]
+}
--- a/pages-config/tabBar.json
+++ b/pages-config/tabBar.json
@ -0,0 +1,25 @@
+/* /// Pages-Tool: 该文件是pages-tool插件的配置文件，根据pages-config.json的配置,本文件的内容可能合并到pages.json*/
+{
+	"tabBar": {
+		"color": "#000000",
+		"selectedColor": "#000000",
+		"borderStyle": "white",
+		"backgroundColor": "#ffffff",
+		"list": [{
+			"pagePath": "pages/index",
+			"iconPath": "static/images/tabbar/home.png",
+			"selectedIconPath": "static/images/tabbar/home_.png",
+			"text": "首页"
+		}, {
+			"pagePath": "pages/work/index",
+			"iconPath": "static/images/tabbar/work.png",
+			"selectedIconPath": "static/images/tabbar/work_.png",
+			"text": "计算工具"
+		}, {
+			"pagePath": "pages/mine/index",
+			"iconPath": "static/images/tabbar/mine.png",
+			"selectedIconPath": "static/images/tabbar/mine_.png",
+			"text": "我的"
+		}]
+	}
+}
--- a/pages.json
+++ b/pages.json
@ -85,14 +85,13 @@
 			"pagePath": "pages/work/index",
 			"iconPath": "static/images/tabbar/work.png",
 			"selectedIconPath": "static/images/tabbar/work_.png",
-        "text": "工作台"
+			"text": "计算工具"
 		}, {
 			"pagePath": "pages/mine/index",
 			"iconPath": "static/images/tabbar/mine.png",
 			"selectedIconPath": "static/images/tabbar/mine_.png",
 			"text": "我的"
-      }
-    ]
+		}]
 	},
  "globalStyle": {
    "navigationBarTextStyle": "black",
--- a/pages/login.vue
+++ b/pages/login.vue
@ -1,8 +1,7 @@
 <template>
 	<view class="normal-login-container">
 		<view class="logo-content align-center justify-center flex">
-      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
-      </image>
+			<image style="width: 100rpx; height: 100rpx" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
 			<text class="title">若依移动端登录</text>
 		</view>
 		<view class="login-form-content">
@ -14,7 +13,7 @@
 				<view class="iconfont icon-password icon"></view>
 				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
 			</view>
-      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
+			<view class="input-item flex align-center" style="width: 60%; margin: 0px" v-if="captchaEnabled">
 				<view class="iconfont icon-code icon"></view>
 				<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
 				<view class="login-code">
@ -34,90 +33,98 @@
 				<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
 			</view>
 		</view>
-     
 	</view>
 </template>

 <script>
-  import { getCodeImg } from '@/api/login'
+import { getCodeImg } from '@/api/login';

 export default {
 	data() {
 		return {
-        codeUrl: "",
+			codeUrl: '',
 			captchaEnabled: true,
 			// 用户注册开关
 			register: false,
 			globalConfig: getApp().globalData.config,
 			loginForm: {
-          username: "admin",
-          password: "admin123",
-          code: "",
+				username: 'admin',
+				password: 'admin123',
+				code: '',
 				uuid: ''
 			}
-      }
+		};
 	},
 	created() {
-      this.getCode()
+		this.getCode();
 	},
 	methods: {
+		handleConversion(result) {
+			// console.log('初始值:', result.initialValue);
+			// console.log('新值:', result.newValue);
+			// console.log('老单位:', result.oldUnit);
+			// console.log('新单位:', result.newUnit);
+		},
 		// 用户注册
 		handleUserRegister() {
-        this.$tab.redirectTo(`/pages/register`)
+			this.$tab.redirectTo(`/pages/register`);
 		},
 		// 隐私协议
 		handlePrivacy() {
-        let site = this.globalConfig.appInfo.agreements[0]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
+			let site = this.globalConfig.appInfo.agreements[0];
+			this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
 		},
 		// 用户协议
 		handleUserAgrement() {
-        let site = this.globalConfig.appInfo.agreements[1]
-        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
+			let site = this.globalConfig.appInfo.agreements[1];
+			this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`);
 		},
 		// 获取图形验证码
 		getCode() {
-        getCodeImg().then(res => {
-          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+			getCodeImg().then((res) => {
+				this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
 				if (this.captchaEnabled) {
-            this.codeUrl = 'data:image/gif;base64,' + res.img
-            this.loginForm.uuid = res.uuid
+					this.codeUrl = 'data:image/gif;base64,' + res.img;
+					this.loginForm.uuid = res.uuid;
 				}
-        })
+			});
 		},
 		// 登录方法
 		async handleLogin() {
-        if (this.loginForm.username === "") {
-          this.$modal.msgError("请输入您的账号")
-        } else if (this.loginForm.password === "") {
-          this.$modal.msgError("请输入您的密码")
-        } else if (this.loginForm.code === "" && this.captchaEnabled) {
-          this.$modal.msgError("请输入验证码")
+			if (this.loginForm.username === '') {
+				this.$modal.msgError('请输入您的账号');
+			} else if (this.loginForm.password === '') {
+				this.$modal.msgError('请输入您的密码');
+			} else if (this.loginForm.code === '' && this.captchaEnabled) {
+				this.$modal.msgError('请输入验证码');
 			} else {
-          this.$modal.loading("登录中，请耐心等待...")
-          this.pwdLogin()
+				this.$modal.loading('登录中，请耐心等待...');
+				this.pwdLogin();
 			}
 		},
 		// 密码登录
 		async pwdLogin() {
-        this.$store.dispatch('Login', this.loginForm).then(() => {
-          this.$modal.closeLoading()
-          this.loginSuccess()
-        }).catch(() => {
-          if (this.captchaEnabled) {
-            this.getCode()
-          }
+			this.$store
+				.dispatch('Login', this.loginForm)
+				.then(() => {
+					this.$modal.closeLoading();
+					this.loginSuccess();
 				})
+				.catch(() => {
+					if (this.captchaEnabled) {
+						this.getCode();
+					}
+				});
 		},
 		// 登录成功后，处理函数
 		loginSuccess(result) {
 			// 设置用户信息
-        this.$store.dispatch('GetInfo').then(res => {
-          this.$tab.reLaunch('/pages/index')
-        })
-      }
+			this.$store.dispatch('GetInfo').then((res) => {
+				this.$tab.reLaunch('/pages/index');
+			});
 		}
 	}
+};
 </script>

 <style lang="scss">
@ -168,7 +175,6 @@
 				text-align: left;
 				padding-left: 15px;
 			}
-
 		}

 		.login-btn {
@ -198,5 +204,4 @@
 		}
 	}
 }
-
 </style>
--- a/pages/mine/index.vue
+++ b/pages/mine/index.vue
@ -1,5 +1,13 @@
 <template>
 	<view class="mine-container" :style="{ height: `${windowHeight}px` }">
+		<yjly-number_unit
+			:unitType="'length'"
+			:unitName.sync="selectedUnitName"
+			:value.sync="inputValue"
+			:showEnglishOnly="true"
+			:decimalPlaces="5"
+			@conversion="handleConversion"
+		></yjly-number_unit>
 		<!--顶部个人信息栏-->
 		<view class="header-section">
 			<view class="flex padding justify-between">
@ -7,15 +15,10 @@
 					<view v-if="!avatar" class="cu-avatar xl round bg-white">
 						<view class="iconfont icon-people text-gray icon"></view>
 					</view>
-          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
-          </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
-            点击登录
-          </view>
+					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"></image>
+					<view v-if="!name" @click="handleToLogin" class="login-tip">点击登录</view>
 					<view v-if="name" @click="handleToInfo" class="user-info">
-            <view class="u_title">
-              用户名：{{ name }}
-            </view>
+						<view class="u_title">用户名：{{ name }}</view>
 					</view>
 				</view>
 				<view @click="handleToInfo" class="flex align-center">
@ -71,66 +74,75 @@
 					</view>
 				</view>
 			</view>
-
 		</view>
 	</view>
 </template>

 <script>
-  import storage from '@/utils/storage'
+import storage from '@/utils/storage';

 export default {
 	data() {
 		return {
+			selectedUnitName: 'm(米)',
+			inputValue: 12,
+
 			name: this.$store.state.user.name,
 			version: getApp().globalData.config.appInfo.version
-      }
+		};
 	},
 	computed: {
 		avatar() {
-        return this.$store.state.user.avatar
+			return this.$store.state.user.avatar;
 		},
 		windowHeight() {
-        return uni.getSystemInfoSync().windowHeight - 50
+			return uni.getSystemInfoSync().windowHeight - 50;
 		}
 	},
 	methods: {
+		handleConversion(result) {
+			// console.log('初始值:', result.initialValue);
+			// console.log('新值:', result.newValue);
+			// console.log('老单位:', result.oldUnit);
+			// console.log('新单位:', result.newUnit);
+		},
+
 		handleToInfo() {
-        this.$tab.navigateTo('/pages/mine/info/index')
+			this.$tab.navigateTo('/pages/mine/info/index');
 		},
 		handleToEditInfo() {
-        this.$tab.navigateTo('/pages/mine/info/edit')
+			this.$tab.navigateTo('/pages/mine/info/edit');
 		},
 		handleToSetting() {
-        this.$tab.navigateTo('/pages/mine/setting/index')
+			this.$tab.navigateTo('/pages/mine/setting/index');
 		},
 		handleToLogin() {
-        this.$tab.reLaunch('/pages/login')
+			this.$tab.reLaunch('/pages/login');
 		},
 		handleToAvatar() {
-        this.$tab.navigateTo('/pages/mine/avatar/index')
+			this.$tab.navigateTo('/pages/mine/avatar/index');
 		},
 		handleLogout() {
 			this.$modal.confirm('确定注销并退出系统吗？').then(() => {
 				this.$store.dispatch('LogOut').then(() => {
-            this.$tab.reLaunch('/pages/index')
-          })
-        })
+					this.$tab.reLaunch('/pages/index');
+				});
+			});
 		},
 		handleHelp() {
-        this.$tab.navigateTo('/pages/mine/help/index')
+			this.$tab.navigateTo('/pages/mine/help/index');
 		},
 		handleAbout() {
-        this.$tab.navigateTo('/pages/mine/about/index')
+			this.$tab.navigateTo('/pages/mine/about/index');
 		},
 		handleJiaoLiuQun() {
-        this.$modal.showToast('QQ群：133713780')
+			this.$modal.showToast('QQ群：①133713780、②146013835');
 		},
 		handleBuilding() {
-        this.$modal.showToast('模块建设中~')
-      }
+			this.$modal.showToast('模块建设中~');
 		}
 	}
+};
 </script>

 <style lang="scss">
@ -142,7 +154,6 @@
 	width: 100%;
 	height: 100%;

-
 	.header-section {
 		padding: 15px 15px 45px 15px;
 		background-color: #3c96f3;
--- a/uni_modules/yjly-number_unit/changelog.md
+++ b/uni_modules/yjly-number_unit/changelog.md
--- a/uni_modules/yjly-number_unit/components/yjly-number_unit/yjly-number_unit.vue
+++ b/uni_modules/yjly-number_unit/components/yjly-number_unit/yjly-number_unit.vue
@ -0,0 +1,272 @@
+<template>
+	<view class="unit-converter">
+		<!-- 数值输入框 -->
+		<input v-model="inputValue" type="number" @input="handleInputChange" class="input-field" :style="{ width: width + 'px' }" />
+		<!-- 单位标签 -->
+		<text @click="toggleUnit" @dblclick="openUnitSelector" class="unit-label" :style="{ color: 'blue' }">
+			{{ displayUnitName }}
+		</text>
+		<!-- 单位选择弹出窗口 -->
+		<!-- uni-popup 弹窗 -->
+		<uni-popup ref="unitSelectorPopup" type="bottom" :show="showUnitSelector" @close="onPopupClose">
+			<view class="unit-selector">
+				<view v-for="unit in filteredUnitList" :key="unit.id" @click="selectUnit(unit)" class="unit-option">
+					{{ showEnglishOnly ? unit.unitName.split('(')[0] : unit.unitName }}
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+import { listConversion } from '@/api/system/conversion.js';
+
+export default {
+	props: {
+		// 单位类型
+		unitType: {
+			type: String,
+			default: 'length'
+		},
+		// 是否只显示英文部分
+		showEnglishOnly: {
+			type: Boolean,
+			default: false
+		},
+		// 当前单位名称
+		unitName: {
+			type: String,
+			required: false,
+			default: ''
+		},
+		// 当前数值
+		value: {
+			type: Number,
+			required: true
+		},
+		// 小数点位数
+		decimalPlaces: {
+			type: Number,
+			default: 2
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 80
+		}
+	},
+	data() {
+		return {
+			inputValue: this.value, // 输入的数值
+			currentUnit: null, // 当前单位
+			unitList: [], // 单位列表
+			showUnitSelector: false // 是否显示单位选择窗口
+		};
+	},
+	onLoad() {
+		// 在页面加载时添加全局点击事件监听器
+		uni.$on('globalClick', this.handleClickOutside);
+	},
+	onUnload() {
+		// 在页面卸载时移除全局点击事件监听器
+		uni.$off('globalClick', this.handleClickOutside);
+	},
+	computed: {
+		// 显示的单位名称
+		displayUnitName() {
+			if (!this.currentUnit) return '';
+			return this.showEnglishOnly ? this.currentUnit.unitName.split('(')[0] : this.currentUnit.unitName;
+		},
+		// 过滤后的单位列表（排除当前单位）
+		filteredUnitList() {
+			return this.unitList.filter((unit) => unit.unitName !== this.currentUnit?.unitName);
+		}
+	},
+	watch: {
+		// 监听 unitType 变化，重新加载单位列表
+		unitType: {
+			immediate: true,
+			handler(newVal) {
+				this.loadUnitList(newVal);
+			}
+		},
+		// 监听 unitName 变化，更新当前单位
+		unitName: {
+			immediate: true,
+			handler(newVal) {
+				console.log(newVal);
+				this.currentUnit = this.unitList.find((unit) => unit.unitName == newVal);
+			}
+		},
+		// 监听 value 变化，更新输入框的值
+		value: {
+			immediate: true,
+			handler(newVal) {
+				this.inputValue = newVal;
+			}
+		}
+	},
+	methods: {
+		// 处理全局点击事件
+		handleClickOutside(event) {
+			if (this.$refs.unitSelector && !this.$refs.unitSelector.contains(event.target)) {
+				this.showUnitSelector = false;
+			}
+		},
+		// 切换单位选择器的显示状态
+		toggleUnitSelector() {
+			this.showUnitSelector = !this.showUnitSelector;
+		},
+		// 加载单位列表
+		async loadUnitList(unitType) {
+			try {
+				const response = await listConversion({ pageSize: 100, unitType: unitType });
+				console.log(response);
+				this.unitList = response.rows;
+				if (this.unitName == '') {
+					// 处理默认基准单位
+					this.currentUnit = this.unitList.find((unit) => unit.baseUnit == 1);
+					console.log(this.currentUnit);
+				} else {
+					this.currentUnit = this.unitList.find((unit) => unit.unitName == this.unitName);
+					console.log(this.currentUnit);
+					if (this.currentUnit === undefined) {
+						this.currentUnit = this.unitList.find((unit) => unit.baseUnit === 1);
+					}
+				}
+			} catch (error) {
+				console.error('Failed to load unit list:', error);
+			}
+		},
+		// 处理输入框变化
+		handleInputChange() {
+			this.$emit('input', this.inputValue); // 将输入值同步到父组件
+			this.convertAndEmit();
+		},
+		// 切换单位
+		toggleUnit() {
+			const currentIndex = this.unitList.indexOf(this.currentUnit);
+			const nextIndex = (currentIndex + 1) % this.unitList.length;
+			let oldUnit = this.currentUnit;
+			let newUnit = this.unitList[nextIndex];
+			this.currentUnit = newUnit;
+			// console.log('切换单位', currentIndex, nextIndex, this.currentUnit);
+			this.convertAndEmit(oldUnit, newUnit);
+		},
+		// 打开单位选择窗口
+		openUnitSelector() {
+			this.showUnitSelector = true;
+		},
+		// 选择单位
+		selectUnit(unit) {
+			console.log('所选择的单位', unit);
+			let oldUnit = this.currentUnit;
+			let newUnit = unit;
+			this.currentUnit = unit;
+			this.showUnitSelector = false;
+			this.convertAndEmit(oldUnit, newUnit);
+		},
+		// 换算并提交结果
+		convertAndEmit(oldUnit, newUnit) {
+			if (!newUnit) return;
+			// 获取基准单位
+			const baseUnit = this.unitList.find((unit) => unit.baseUnit === 1);
+			if (!baseUnit) return;
+			// 将输入值转换为基准单位的值
+			const baseValue = this.inputValue / oldUnit.conversionFactor;
+			// 将基准单位的值转换为新单位的值
+			const newValue = baseValue * newUnit.conversionFactor;
+
+			console.log('转换值', newUnit.unitName, this.inputValue, baseValue, newValue);
+
+			let roundedValue;
+			if (newUnit.unitName === 'ly(光年)') {
+				// 对于光年，使用科学计数法显示结果
+				roundedValue = newValue.toExponential();
+			} else {
+				roundedValue = this.roundToDecimalPlaces(newValue);
+			}
+
+			// 提交结果给父组件
+			this.$emit('conversion', {
+				initialValue: this.inputValue,
+				newValue: roundedValue,
+				oldUnit: oldUnit.unitName,
+				newUnit: newUnit.unitName
+			});
+
+			this.inputValue = parseFloat(roundedValue);
+
+			// 更新父组件的 unitName
+			this.$emit('update:unitName', this.currentUnit.unitName);
+		},
+		// 四舍六入五留双
+		// 按照四舍六入五留双处理结果 conversionFactor
+		roundToDecimalPlaces(value) {
+			const multiplier = Math.pow(10, this.decimalPlaces);
+			const val = value * multiplier;
+			const intVal = Math.trunc(val);
+			const decimalPart = val - intVal;
+			if (decimalPart < 0.5) {
+				return intVal / multiplier;
+			} else if (decimalPart > 0.5) {
+				return (intVal + 1) / multiplier;
+			} else {
+				return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
+			}
+		}
+	}
+};
+</script>
+
+<style scoped>
+.unit-converter {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	position: relative;
+}
+
+.input-field {
+	padding: 2px;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	font-size: 14px;
+}
+
+.unit-label {
+	cursor: pointer;
+	font-weight: bold;
+	font-size: 12px;
+}
+
+.unit-selector {
+	/* 设置容器的最大高度，当内容超出这个高度时会出现滚动条 */
+	max-height: 200px;
+	/* 超出内容时显示纵向滚动条 */
+	overflow-y: auto;
+	/* 横向内容不溢出，隐藏多余部分 */
+	overflow-x: hidden;
+	/* 其他样式保持不变 */
+	position: absolute;
+	z-index: 1000;
+	background-color: white;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	padding: 2px 0;
+	min-width: 100px;
+	list-style-type: none;
+	margin: 0;
+}
+
+.unit-option {
+	padding: 2px 10px;
+	cursor: pointer;
+	font-size: 14px;
+}
+
+.unit-option:hover {
+	background-color: #f0f0f0;
+}
+</style>
--- a/uni_modules/yjly-number_unit/package.json
+++ b/uni_modules/yjly-number_unit/package.json
@ -0,0 +1,83 @@
+{
+  "id": "yjly-number_unit",
+  "displayName": "yjly-number_unit",
+  "version": "1.0.0",
+  "description": "yjly-number_unit",
+  "keywords": [
+    "yjly-number_unit"
+],
+  "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": "u",
+        "aliyun": "u",
+        "alipay": "u"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "u",
+          "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"
+        },
+        "小程序": {
+          "微信": "u",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u",
+          "钉钉": "u",
+          "快手": "u",
+          "飞书": "u",
+          "京东": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/yjly-number_unit/readme.md
+++ b/uni_modules/yjly-number_unit/readme.md
@ -0,0 +1 @@
+# yjly-number_unit