浏览代码

feat(mine):新增个人中心部门切换功能
feat(pwdEdit):新增密码修改页面
refactor(edit):优化编辑页面

HMY 1 年之前
父节点
当前提交
56f1819f10

+ 14 - 0
pages.json

@@ -56,6 +56,20 @@
 			{
 				"navigationBarTitleText" : "应用设置"
 			}
+		},
+		{
+			"path" : "pages/mine/setting/pwdEdit/pwdEdit",
+			"style" : 
+			{
+				"navigationBarTitleText" : "密码修改"
+			}
+		},
+		{
+			"path" : "pages/mine/waitWork/waitWork",
+			"style" : 
+			{
+				"navigationBarTitleText" : "待办事项"
+			}
 		}
 		
 	],

+ 110 - 49
pages/mine/edit/edit.vue

@@ -1,57 +1,118 @@
 <template>
-  <view class="container">
-    <!-- 用户昵称输入框 -->
-    <view class="input-group">
-      <text>用户昵称:</text>
-      <input type="text" v-model="nickname" placeholder="请输入用户昵称" />
-    </view>
-
-    <!-- 手机号码输入框 -->
-    <view class="input-group">
-      <text>手机号码:</text>
-      <input type="number" maxlength="11" v-model="phone" placeholder="请输入手机号码" />
-    </view>
-
-    <!-- 邮箱输入框 -->
-    <view class="input-group">
-      <text>邮箱:</text>
-      <input type="text" v-model="email" placeholder="请输入邮箱地址" />
-    </view>
-
-    <!-- 性别选择器 -->
-    <view class="gender-selector">
-      <radio-group @change="handleGenderChange">
-		  
-		<text>性别:</text>
-        <label><radio value="male" :checked="gender === 'male'" />男</label>
-        <label><radio value="female" :checked="gender === 'female'" />女</label>
-      </radio-group>
-    </view>
-
-    <!-- 提交按钮 -->
-    <button type="primary" @click="handleSubmit">提交</button>
-  </view>
+	<view class="container">
+
+
+		<!-- 手机号码输入框 -->
+		<view class="input-group">
+			<text>手机号码:</text>
+			<input type="number" maxlength="11" v-model="userInfo.phone" placeholder="请输入手机号码" />
+		</view>
+
+		<!-- 邮箱输入框 -->
+		<view class="input-group">
+			<text>邮箱:</text>
+			<input type="text" v-model="userInfo.email" placeholder="请输入邮箱地址" />
+		</view>
+
+
+		
+
+		<!-- 用户生日输入框 -->
+		<view class="input-group">
+
+
+			<text>用户生日:</text>
+
+			<view class="example-body">
+				<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday"
+					@maskClick="maskClick" />
+			</view>
+		</view>
+		
+		<!-- 性别选择器 -->
+		<view class="gender-selector">
+			<radio-group @change="handleGenderChange">
+				<text>性别:</text>
+				<view class="genderLabel">
+					<label>
+						<radio value="male" :checked="userInfo.gender === 'male' " />男
+					</label>
+					<label>
+						<radio value="female" :checked="userInfo.gender === 'female'" />女
+					</label>
+				</view>
+			</radio-group>
+		</view>
+
+		<!-- 提交按钮 -->
+		<view class="primaryBtn">
+			<button type="primary" @click="handleSubmit">提交</button>
+		</view>
+
+	</view>
+
 </template>
 
 <script setup>
+	import {
+		ref,
+		reactive
+	} from 'vue';
+
+	const userInfo = reactive({
+		phone: '13145672389',
+		email: '',
+		gender: 'male',
+		birthday: '2000-01-10'
+
+	});
+	
+	function handleGenderChange(event){
+		userInfo.gender=event.detail.value;
+		// console.log(userInfo.birthday,userInfo.gender)
+	};
+	
+	function handleSubmit(){
+		uni.showToast({
+			title: '提交成功',
+			icon: 'none'
+		});
+	}
 
 </script>
 
 <style lang="scss" scoped>
-.container {
-  padding: 20px;
-}
-
-.input-group {
-  margin-bottom: 10px;
-}
-
-.input-group text {
-  display: block;
-  margin-bottom: 5px;
-}
-
-.gender-selector label {
-  margin-right: 15px;
-}
-</style>
+	.container {
+		padding: 30rpx;
+	}
+
+	.input-group {
+		margin-bottom: 10rpx;
+	}
+
+	.input-group input,
+	.genderLabel {
+		padding-left: 20rpx;
+		margin: 20rpx auto;
+		
+		height: 70rpx;
+	}
+	.input-group input{
+		border: 1rpx, solid, gainsboro;
+		background-color: white;
+	}
+
+	.input-group text {
+		display: block;
+		margin-bottom: 20rpx;
+	}
+
+	.gender-selector label {
+		margin-right: 15rpx;
+		
+	}
+
+	.primaryBtn {
+		margin-top: 70rpx;
+	}
+</style>

+ 42 - 38
pages/mine/index.vue

@@ -7,13 +7,20 @@
 				<view>
 					<text>{{ userInfo.name}}</text>
 				</view>
-				<text>ID: {{ userInfo.id }}</text>
 				<view>
-					<text>{{ userInfo.department}} | {{ userInfo.position }}</text>
+					<text>ID: {{ userInfo.id }}</text>
+				</view>
+				<view>部门:
+					<uni-data-select v-model="value" :localdata="userInfo.department" @change="changeS1" :clear="false"
+						class="select1"></uni-data-select>
+				</view>
+				<view>
+					<text> 职务: {{ userInfo.department[value].position }}</text>
 				</view>
 
 			</view>
-			<button @click="navigateTo('personal_message/personal_message')">查看资料</button>
+			<uni-icons @click="lookMsg()" type="search" size="50" style="margin-right: 30rpx;"></uni-icons>
+
 		</view>
 
 		<!-- 功能按钮区 -->
@@ -39,18 +46,6 @@
 				<text class="desc">></text>
 			</view>
 		</view>
-		<!-- <view class="function_btns">
-			
-
-
-			<button type="primary" @click="schedule">
-					<uni-icons type="contact" size="30"></uni-icons>
-					待办事项</button>
-				<button type="primary" @click="clockingIn" style="background-color: cornflowerblue;">我的考勤</button>
-			
-			<button type="default" @click="modifyPassword">密码修改</button>
-			<button type="warn" @click="logout">退出登录</button>
-		</view> -->
 
 
 	</view>
@@ -68,38 +63,42 @@
 	import checkIn from "/static/images/mine/checkIn.png"
 	import waitWork from "/static/images/mine/waitWork.png"
 	import messageEdit from "/static/images/mine/edit.png"
-	//    onMounted()=>{
-	// 	console.log(functionBtns)
-	// }
-	const userInfo = ref({
+	import $tab from "../../plugins/tab.js"
+	const userInfo = reactive({
 		id: '123',
 		name: '张三',
-		department: '研发部',
-		position: '软件开发工程师'
+		department: [{
+				value: 0,
+				text: "研发部",
+				position: '软件开发工程师'
+			},
+			{
+				value: 1,
+				text: "业务部",
+				position: '销售经理'
+			},
+		],
 	});
+	const value = ref(0);
 
+	function changeS1(e) {
+		//部门切换事件
+		console.log(e)
+	};
 
-	// function modifyPassword() {
-	// 	navigateTo('edit/edit')
-	// };
-
-	// function logout() {
-	// 	console.log('点击了退出登录');
-
-	// };
-
-	function navigateTo(pageName) {
-		uni.navigateTo({
-			url: '/pages/mine/' + pageName,
-		});
+	function lookMsg() {
+		$tab.navigateTo('/pages/mine/personal_message/personal_message')
 	};
-	
+
 	function handleButtonClick1() {
-		navigateTo('edit/edit')
+		$tab.navigateTo('/pages/mine/edit/edit')
 	};
+	function handleButtonClick2(){
+		$tab.navigateTo('/pages/mine/waitWork/waitWork')
+	}
 
 	function handleButtonClick4() {
-		navigateTo('setting/setting')
+		$tab.navigateTo('/pages/mine/setting/setting')
 	};
 </script>
 
@@ -142,7 +141,7 @@
 		background-color: #f5f5f5;
 		border-radius: 10rpx;
 		margin-bottom: 20rpx;
-		border-bottom:1px solid gainsboro;
+		border-bottom: 1px solid gainsboro;
 	}
 
 	.icon {
@@ -160,4 +159,9 @@
 		color: #999;
 		margin-right: 20rpx;
 	}
+
+	.select1 {
+		display: inline-block;
+		width: 50%;
+	}
 </style>

+ 13 - 3
pages/mine/personal_message/personal_message.vue

@@ -5,8 +5,8 @@
 		
 		<!-- 用户名及职位 -->
 		<text class="username">{{ userInfo.name }}</text>
-		<view class="position">
-			{{ userInfo.position }}
+		<view class="position" v-for="(item,index) in userInfo.department">
+			{{ item.positionName }}--{{item.position}}
 		</view>
 		
 		
@@ -53,7 +53,17 @@
 	import headImg from "/static/images/mine/headImg.jpg";
 	const userInfo=reactive({
 					name: "张三",
-					position: "研发部-软件开发工程师",
+					department: [{
+							value: 0,
+							positionName: "研发部",
+							position: '软件开发工程师'
+						},
+						{
+							value: 1,
+							positionName: "业务部",
+							position: '销售经理'
+						},
+					],
 					phone: "",
 					email: "",
 					gender: "男",

+ 110 - 0
pages/mine/setting/pwdEdit/pwdEdit.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="container">
+		<view class="uni-input-wrapper">
+			<input class="uni-input" placeholder="请输入旧密码" :password="showPassword1" 
+			v-model="oldPassword" />
+			<text class="uni-icon" :class="[!showPassword1 ? 'uni-eye-active' : '']"
+				@click="changePassword1">&#xe568;</text>
+		</view>
+		
+		<view class="uni-input-wrapper">
+			<input class="uni-input" placeholder="请输入新密码" :password="showPassword2" 
+			v-model="newPassword" />
+			<text class="uni-icon" :class="[!showPassword2 ? 'uni-eye-active' : '']"
+				@click="changePassword2">&#xe568;</text>
+		</view>
+		
+		<view class="uni-input-wrapper">
+			<input class="uni-input" placeholder="请确认新密码" :password="showPassword3" 
+			v-model="confirmPassword" />
+			<text class="uni-icon" :class="[!showPassword3 ? 'uni-eye-active' : '']"
+				@click="changePassword3">&#xe568;</text>
+		</view>
+		
+
+
+		<button @click="submit" class="submitBtn">提交</button>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	
+	const oldPassword = ref('');
+	const newPassword = ref('');
+	const confirmPassword = ref('');
+	const showPassword1 = ref(true);
+	const showPassword2 = ref(true);
+	const showPassword3 = ref(true);
+	
+	function submit() {
+	  if (newPassword.value !== confirmPassword.value) {
+	    uni.showToast({
+	    	title: '新密码和确认密码不一致',
+	    	icon: 'none'
+	    });
+	    return;
+	  }
+	  
+	}
+	
+	function changePassword1() {
+	  showPassword1.value = !showPassword1.value;
+	}
+	
+	
+	function changePassword2() {
+	  showPassword2.value = !showPassword2.value;
+	}
+	
+	function changePassword3() {
+	  showPassword3.value = !showPassword3.value;
+	}
+	
+</script>
+
+<style>
+	ontainer {
+		padding: 40rpx;
+	}
+
+	.input-group {
+		margin-bottom: 30rpx;
+	}
+
+	
+
+	button {
+		background-color: #007aff;
+		color: white;
+		padding:  20rpx 40rpx;
+		border: none;
+		border-radius: 10rpx;
+		cursor: pointer;
+	}
+
+	.uni-input-wrapper {
+		display: flex;
+		align-items: center;
+		
+		padding:  20rpx;
+		
+		margin:  20rpx;
+		
+	}
+
+
+	.uni-icon {
+		margin-left: 20rpx;
+		
+	}
+
+	.uni-eye-active {
+		color: #007aff;
+	}
+	
+	.submitBtn{
+		width: 90%;
+		margin-top: 30rpx;
+	}
+</style>

+ 24 - 57
pages/mine/setting/setting.vue

@@ -2,7 +2,7 @@
 <template>
 	<view class="container">
 		<!-- 列表区域 -->
-		<view class="list-item" @click="">
+		<view class="list-item" @click="pwdEdit">
 			<view>
 				<uni-icons type="locked" size="20"></uni-icons>
 				<text>修改密码</text>
@@ -23,35 +23,37 @@
 			</view>
 			<text>></text>
 		</view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<button type="warn" @click="showModal">退出登录</button>
+		</view>
 
-		<!-- 弹出框 -->
-		<uni-popup ref="popup" type="center">
-			<view class="modal-content">
-				<text class="modal-title">系统提示</text>
-				<text class="modal-text">确定注销并退出系统吗?</text>
-				<view class="modal-buttons">
-					<button class="modal-button-cancel" @click="hideModal">取消</button>
-					<button class="modal-button-confirm" @click="confirmLogout">确定</button>
-				</view>
-			</view>
-		</uni-popup>
+		
+		
+		
 	</view>
 </template>
 
 <script setup>
+	import $tab from "../../../plugins/tab.js"
 	function showModal() {
-		this.$refs.popup.open();
+		uni.showModal({
+		    title: '系统提示',
+		    content: '确定注销并退出系统吗?',
+		    success: function (res) {
+		        if (res.confirm) {
+		            console.log('用户点击确定');
+		        } else if (res.cancel) {
+		            console.log('用户点击取消');
+		        }
+		    }
+		});
 	};
-
-	function hideModal() {
-		this.$refs.popup.close();
+	
+	function pwdEdit(){
+		$tab.navigateTo('/pages/mine/setting/pwdEdit/pwdEdit');
 	};
 
-	function confirmLogout() {
-		// 这里处理确认注销的逻辑
-		console.log('User confirmed logout');
-		this.hideModal();
-	};
+	
 </script>
 
 <style lang="scss" scoped>
@@ -69,40 +71,5 @@
 		font-size: 16px;
 	}
 
-	.arrow-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.modal-content {
-		background-color: white;
-		padding: 30px;
-		border-radius: 8px;
-	}
-
-	.modal-title {
-		text-align: center;
-		margin-bottom: 15px;
-		font-weight: bold;
-	}
-
-	.modal-text {
-		text-align: center;
-		margin-bottom: 25px;
-	}
-
-	.modal-buttons {
-		display: flex;
-		justify-content: space-around;
-	}
-
-	.modal-button-cancel,
-	.modal-button-confirm {
-		flex: 1;
-		margin-left: 10px;
-	}
-
-	.modal-button-confirm {
-		color: blue;
-	}
+	
 </style>

+ 8 - 0
uni_modules/uni-datetime-picker/changelog.md

@@ -1,3 +1,11 @@
+## 2.2.38(2024-10-15)
+- 修复 微信小程序中的getSystemInfo警告
+## 2.2.37(2024-10-12)
+- 修复 微信小程序中的getSystemInfo警告
+## 2.2.36(2024-10-12)
+- 修复 微信小程序中的getSystemInfo警告
+## 2.2.35(2024-09-21)
+- 修复 没有选中日期时点击确定直接报错的Bug [详情](https://ask.dcloud.net.cn/question/198168)
 ## 2.2.34(2024-04-24)
 - 新增 日期点击事件,在点击日期时会触发该事件。
 ## 2.2.33(2024-04-15)

+ 11 - 4
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue

@@ -464,9 +464,16 @@
 					this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1
 					return
 				}
+				// #ifdef MP-WEIXIN
+				const {
+					windowWidth
+				} = uni.getWindowInfo()
+				// #endif
+				// #ifndef MP-WEIXIN
 				const {
 					windowWidth
 				} = uni.getSystemInfoSync()
+				// #endif
 				this.isPhone = windowWidth <= 500
 				this.windowWidth = windowWidth
 			},
@@ -698,11 +705,11 @@
 						startString = getDateTime(this.start, this.hideSecond)
 					}
 					[startDate, startTime] = startString.split(' ')
-					if (this.start && !dateCompare(this.start, this.tempRange.startDate)) {
+					if (this.start && !dateCompare(this.start, `${this.tempRange.startDate} ${this.tempRange.startTime}`)) {
 						startDateLaterRangeStartDate = true
 						this.tempRange.startDate = startDate
 					}
-					if (this.start && !dateCompare(this.start, this.tempRange.endDate)) {
+					if (this.start && !dateCompare(this.start, `${this.tempRange.endDate} ${this.tempRange.endTime}`)) {
 						startDateLaterRangeEndDate = true
 						this.tempRange.endDate = startDate
 					}
@@ -717,11 +724,11 @@
 					}
 					[endDate, endTime] = endString.split(' ')
 
-					if (this.end && !dateCompare(this.tempRange.startDate, this.end)) {
+					if (this.end && !dateCompare(`${this.tempRange.startDate} ${this.tempRange.startTime}`, this.end)) {
 						endDateEarlierRangeStartDate = true
 						this.tempRange.startDate = endDate
 					}
-					if (this.end && !dateCompare(this.tempRange.endDate, this.end)) {
+					if (this.end && !dateCompare(`${this.tempRange.endDate} ${this.tempRange.endTime}`, this.end)) {
 						endDateEarlierRangeEndDate = true
 						this.tempRange.endDate = endDate
 					}

+ 2 - 2
uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js

@@ -182,8 +182,8 @@ class Calendar {
 		if (!date) {
 			date = new Date()
 		}
-
-		return this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
+		const res = this.calendar.find(item => item.fullDate === this.getDateObj(date).fullDate)
+		return res ? res : this.getDateObj(date)
 	}
 
 	/**

+ 1 - 1
uni_modules/uni-datetime-picker/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-datetime-picker",
   "displayName": "uni-datetime-picker 日期选择器",
-  "version": "2.2.34",
+  "version": "2.2.38",
   "description": "uni-datetime-picker 日期时间选择器,支持日历,支持范围选择",
   "keywords": [
     "uni-datetime-picker",

+ 2 - 0
uni_modules/uni-icons/changelog.md

@@ -1,3 +1,5 @@
+## 2.0.10(2024-06-07)
+- 优化 uni-app x 中,size 属性的类型
 ## 2.0.9(2024-01-12)
 fix: 修复图标大小默认值错误的问题
 ## 2.0.8(2023-12-14)

+ 81 - 81
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue

@@ -1,91 +1,91 @@
 <template>
-	<text class="uni-icons" :style="styleObj">
-		<slot>{{unicode}}</slot>
-	</text>
+  <text class="uni-icons" :style="styleObj">
+    <slot>{{unicode}}</slot>
+  </text>
 </template>
 
 <script>
-	import { fontData, IconsDataItem } from './uniicons_file'
+  import { fontData, IconsDataItem } from './uniicons_file'
 
-	/**
-	 * Icons 图标
-	 * @description 用于展示 icon 图标
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=28
-	 * @property {Number} size 图标大小
-	 * @property {String} type 图标图案,参考示例
-	 * @property {String} color 图标颜色
-	 * @property {String} customPrefix 自定义图标
-	 * @event {Function} click 点击 Icon 触发事件
-	 */
-	export default {
-		name: "uni-icons",
-		props: {
-			type: {
-				type: String,
-				default: ''
-			},
-			color: {
-				type: String,
-				default: '#333333'
-			},
-			size: {
-				type: Object,
-				default: 16
-			},
-			fontFamily: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {};
-		},
-		computed: {
-			unicode() : string {
-				let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
-				if (codes !== null) {
-					return codes.unicode
-				}
-				return ''
-			},
-			iconSize() : string {
-				const size = this.size
-				if (typeof size == 'string') {
-					const reg = /^[0-9]*$/g
-					return reg.test(size as string) ? '' + size + 'px' : '' + size;
-					// return '' + this.size
-				}
-				return this.getFontSize(size as number)
-			},
-			styleObj() : UTSJSONObject {
-				if (this.fontFamily !== '') {
-					return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
-				}
-				return { color: this.color, fontSize: this.iconSize }
-			}
-		},
-		created() { },
-		methods: {
-			/**
-			 * 字体大小
-			 */
-			getFontSize(size : number) : string {
-				return size + 'px';
-			},
-		},
-	}
+  /**
+   * Icons 图标
+   * @description 用于展示 icon 图标
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=28
+   * @property {Number,String} size 图标大小
+   * @property {String} type 图标图案,参考示例
+   * @property {String} color 图标颜色
+   * @property {String} customPrefix 自定义图标
+   * @event {Function} click 点击 Icon 触发事件
+   */
+  export default {
+    name: "uni-icons",
+    props: {
+      type: {
+        type: String,
+        default: ''
+      },
+      color: {
+        type: String,
+        default: '#333333'
+      },
+      size: {
+        type: [Number, String],
+        default: 16
+      },
+      fontFamily: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {};
+    },
+    computed: {
+      unicode() : string {
+        let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
+        if (codes !== null) {
+          return codes.unicode
+        }
+        return ''
+      },
+      iconSize() : string {
+        const size = this.size
+        if (typeof size == 'string') {
+          const reg = /^[0-9]*$/g
+          return reg.test(size as string) ? '' + size + 'px' : '' + size;
+          // return '' + this.size
+        }
+        return this.getFontSize(size as number)
+      },
+      styleObj() : UTSJSONObject {
+        if (this.fontFamily !== '') {
+          return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
+        }
+        return { color: this.color, fontSize: this.iconSize }
+      }
+    },
+    created() { },
+    methods: {
+      /**
+       * 字体大小
+       */
+      getFontSize(size : number) : string {
+        return size + 'px';
+      },
+    },
+  }
 </script>
 
 <style scoped>
-	@font-face {
-		font-family: UniIconsFontFamily;
-		src: url('./uniicons.ttf');
-	}
+  @font-face {
+    font-family: UniIconsFontFamily;
+    src: url('./uniicons.ttf');
+  }
 
-	.uni-icons {
-		font-family: UniIconsFontFamily;
-		font-size: 18px;
-		font-style: normal;
-		color: #333;
-	}
+  .uni-icons {
+    font-family: UniIconsFontFamily;
+    font-size: 18px;
+    font-style: normal;
+    color: #333;
+  }
 </style>

+ 3 - 2
uni_modules/uni-icons/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-icons",
   "displayName": "uni-icons 图标",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
   "keywords": [
     "uni-ui",
@@ -42,7 +42,8 @@
     "platforms": {
       "cloud": {
         "tcb": "y",
-        "aliyun": "y"
+        "aliyun": "y",
+        "alipay": "n"
       },
       "client": {
         "App": {