diff --git a/miniprogram/app.json b/miniprogram/app.json index 6b8c50c..1abdd65 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -1,11 +1,12 @@ { "pages": [ "pages/equipment/equipment", - "pages/login/login", + "pages/login/login", "pages/supplementPersonal/supplementPersonal", "pages/connectedDevice/connectedDevice", "pages/connectedWifi/connectedWifi", "pages/home/home", + "pages/addUser/addUser", "pages/data/data", "pages/my/my", "pages/personalInformation/personalInformation", diff --git a/miniprogram/pages/addUser/addUser.json b/miniprogram/pages/addUser/addUser.json new file mode 100644 index 0000000..4feeb01 --- /dev/null +++ b/miniprogram/pages/addUser/addUser.json @@ -0,0 +1,6 @@ +{ + "usingComponents": {}, + "navigationBarTitleText": "添加用户", + "navigationBarTextStyle": "black", + "navigationBarBackgroundColor": "#FFFFFF" +} diff --git a/miniprogram/pages/addUser/addUser.less b/miniprogram/pages/addUser/addUser.less new file mode 100644 index 0000000..13585e1 --- /dev/null +++ b/miniprogram/pages/addUser/addUser.less @@ -0,0 +1,354 @@ +.addUser { + width: 100%; + height: 100%; + display: flex; + flex-flow: column; + + .form { + width: 100%; + flex: 1; + overflow: hidden; + + .scrollViewContent { + width: 100%; + padding: 30rpx; + box-sizing: border-box; + + /* 顶部 tabs - 圆角卡片样式 */ + .tabsDom { + width: 100%; + box-sizing: border-box; + padding: 30rpx 30rpx 40rpx; + border-radius: 16rpx 16rpx 0 0; + background-color: #ffffff; + + .tabs { + width: 100%; + height: 80rpx; + padding: 4rpx; + display: flex; + flex-wrap: nowrap; + box-sizing: border-box; + border-radius: 16rpx; + background-color: #F3F5F8; + + .tab-item { + color: #808080; + flex: 1; + height: 72rpx; + font-size: 32rpx; + text-align: center; + line-height: 72rpx; + box-sizing: border-box; + border-radius: 16rpx; + + &.active { + color: #FFFFFF; + font-weight: bold; + background-color: #1385FA; + } + } + } + } + + .selectWorkNo { + width: 100%; + margin-bottom: 30rpx; + box-sizing: border-box; + padding: 0 30rpx 40rpx; + border-radius: 0 0 16rpx 16rpx; + background-color: #ffffff; + + .selectWorkNoBtn { + color: #FFFFFF; + width: 580rpx; + height: 88rpx; + font-size: 32rpx; + font-weight: bold; + line-height: 88rpx; + border-radius: 44rpx; + text-align: center; + margin: 0 auto; + background-color: #1385FA; + } + } + + .workNoDesc { + color: #B6B6B6; + width: 100%; + height: 24rpx; + font-size: 24rpx; + text-align: center; + line-height: 24rpx; + } + + .workNoNull { + color: #F24439; + margin: 56rpx auto 0; + width: 640rpx; + height: 88rpx; + font-size: 28rpx; + line-height: 88rpx; + border-radius: 16rpx; + text-align: center; + background: rgba(242,68,57,0.12); + } + + .workNoInfo { + width: 100%; + padding-bottom: 10rpx; + + .workNoInfo_ { + width: 100%; + margin-bottom: 20rpx; + + .workNoInfoTitle { + color: #808080; + width: 100%; + height: 64rpx; + font-size: 24rpx; + line-height: 64rpx; + } + + .workNoInfoContent { + width: 100%; + border-radius: 16rpx; + box-sizing: border-box; + padding: 40rpx 30rpx 30rpx; + background-color: #FFFFFF; + + > view { + width: 100%; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + + .form-row { + width: 300rpx; + } + } + } + } + } + + .familyInfo { + width: 100%; + padding-bottom: 10rpx; + + .familyInfo_ { + width: 100%; + border-radius: 16rpx; + box-sizing: border-box; + padding: 0 30rpx 10rpx; + margin-bottom: 40rpx; + background-color: #FFFFFF; + } + + .form-row { + width: 100%; + margin-bottom: 40rpx; + } + + /* 身高体重同行 */ + .form-row-inline { + width: 100%; + display: flex; + gap: 24rpx; + margin-bottom: 40rpx; + + .form-row-half { + flex: 1; + } + } + } + + .form-row { + width: 100%; + margin-bottom: 40rpx; + + &:last-child { + margin-bottom: 0; + } + } + + .form-label { + width: 100%; + height: 40rpx; + display: flex; + flex-wrap: nowrap; + margin-bottom: 18rpx; + + .label-text { + color: #252535; + height: 40rpx; + font-size: 28rpx; + line-height: 40rpx; + font-weight: bold; + margin-right: 6rpx; + } + + .label-star { + color: #FF4D4F; + height: 40rpx; + font-weight: 500; + font-size: 28rpx; + line-height: 40rpx; + } + } + + .form-control { + width: 100%; + } + + /* 可输入区域 */ + .form-input { + width: 100%; + height: 88rpx; + padding: 0 30rpx; + color: #252535; + font-size: 26rpx; + border-radius: 16rpx; + box-sizing: border-box; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + } + + .form-placeholder { + color: #B6B6B6; + font-size: 26rpx; + } + + /* 日期选择器 */ + .form-picker { + width: 100%; + height: 88rpx; + padding: 0 30rpx; + color: #252535; + font-size: 26rpx; + line-height: 88rpx; + border-radius: 16rpx; + box-sizing: border-box; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + } + + .form-picker-placeholder { + color: #B6B6B6; + } + + /* 输入框 + 后缀容器(身高 cm / 体重 kg) */ + .form-input-wrap { + position: relative; + width: 100%; + + .form-input-with-suffix { + padding-right: 80rpx; + } + + .form-suffix-inside { + position: absolute; + right: 30rpx; + top: 0; + height: 88rpx; + color: #77849E; + font-size: 26rpx; + line-height: 88rpx; + } + } + + /* 只读区域 */ + .form-readonly { + width: 100%; + height: 88rpx; + box-sizing: border-box; + padding: 0 24rpx; + background: #F6F6F6; + border-radius: 16rpx; + display: flex; + align-items: center; + border: 2rpx solid #E6E6EA; + + .readonly-text { + color: #252535; + font-size: 26rpx; + } + } + + .form-readonly-with-suffix { + justify-content: space-between; + + .form-suffix { + color: #77849E; + height: 88rpx; + font-size: 26rpx; + line-height: 88rpx; + } + } + + /* 性别切换按钮(家庭用户) */ + .gender-toggle { + display: flex; + gap: 24rpx; + + .gender-option { + width: 300rpx; + height: 88rpx; + font-size: 28rpx; + text-align: center; + line-height: 88rpx; + border-radius: 16rpx; + box-sizing: border-box; + color: #77849E; + background-color: #FFFFFF; + border: 2rpx solid #E6E6EA; + } + + .gender-option-active { + color: #FFFFFF; + font-weight: bold; + background-color: #1385FA; + border-color: #1385FA; + } + } + } + } + + /* 保存按钮 */ + .save-btn { + width: 100%; + height: 120rpx; + padding: 0 30rpx; + display: flex; + gap: 15rpx; + flex-wrap: nowrap; + align-items: center; + box-sizing: border-box; + background-color: #FFFFFF; + box-shadow: 0 2rpx 8rpx 0 rgba(19, 133, 250, 0.06); + + .btn-cancel { + color: #1385FA; + flex: 1; + height: 88rpx; + font-size: 32rpx; + text-align: center; + line-height: 84rpx; + border-radius: 44rpx; + box-sizing: border-box; + border: 2rpx solid #1385FA; + background-color: #FFFFFF; + } + + .btn-primary { + color: #FFFFFF; + flex: 1; + height: 88rpx; + font-size: 32rpx; + font-weight: bold; + text-align: center; + line-height: 88rpx; + border-radius: 44rpx; + background-color: #1385FA; + } + } +} diff --git a/miniprogram/pages/addUser/addUser.ts b/miniprogram/pages/addUser/addUser.ts new file mode 100644 index 0000000..80c8d87 --- /dev/null +++ b/miniprogram/pages/addUser/addUser.ts @@ -0,0 +1,38 @@ +// pages/addUser/addUser.ts +Page({ + data: { + userType: 'employee', + employeeId: '9527', + employeeInfo: { + name: '王旭', + company: '技术部·研发组', + gender: '男', + age: '32岁' + }, + height: '', + weight: '' + }, + + /** tabs 切换:清空查询结果、重置表单 */ + onTabTap(e: WechatMiniprogram.TouchEvent) { + const tab = e.currentTarget.dataset.value as string + this.setData({ + userType: tab as 'employee' | 'family', + }) + }, + + onTapType(e: WechatMiniprogram.TouchEvent) { + const type = e.currentTarget.dataset.type as string + this.setData({ userType: type }) + }, + + onCancel() { + wx.navigateBack({ + delta: 1 + }) + }, + + onSave() { + // 保存用户信息(待接入) + } +}) diff --git a/miniprogram/pages/addUser/addUser.wxml b/miniprogram/pages/addUser/addUser.wxml new file mode 100644 index 0000000..be43623 --- /dev/null +++ b/miniprogram/pages/addUser/addUser.wxml @@ -0,0 +1,187 @@ + + + + + + + + 员工 + 家庭用户 + + + + + + + + + + 员工编号 + * + + + + + + 确认查询 + + + + 输入员工编号后自动查询员工信息 + + + 未查询到员工信息,请确认员工编号是否正确 + + + + + 用户信息 + + + + 姓名 + + {{ form.name }} + + + + 单位 + + {{ unitDisplay }} + + + + + + 性别 + + {{ form.gender }} + + + + 年龄 + + {{ form.age }} + + + + + + + 补充信息 + + + + + 身高 + * + + + + + cm + + + + + 体重 + + + + kg + + + + + + + + + + + + + + + + + 昵称 + * + + + + + + + + + 身份证号 + + + + + + + + + 性别 + * + + + + + + + + + + + + + 出生年月 + * + + + + {{ birthday || '请选择出生年月' }} + + + + + + + + + 身高 + * + + + + + cm + + + + + 体重 + + + + kg + + + + + + + + + + + + + + 取消 + 保存用户信息 + +