6 changed files with 644 additions and 28 deletions
Unified View
Diff Options
-
+23 -20pages.json
-
+42 -0pages/autonym/autonym.vue
-
+5 -8pages/index/index.vue
-
+121 -0pages/login/login.vue
-
+168 -0pages/login/wxUserInfo.vue
-
+285 -0pages/record/record.vue
+ 23
- 20
pages.json
View File
+ 42
- 0
pages/autonym/autonym.vue
View File
| @ -0,0 +1,42 @@ | |||||
| <!-- 实名认证 --> | |||||
| <template> | |||||
| <view class="autonym"> | |||||
| <!-- 用户信息 --> | |||||
| <div class="user-info"> | |||||
| <image class="user-bg" src="@/static/image/center/center-bg.png" mode="widthFix"></image> | |||||
| </div> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: "Autonym", | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| toCenter() { | |||||
| uni.navigateTo({ | |||||
| url: "/pages/index/center" | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .autonym { | |||||
| // 用户信息 | |||||
| .user-info { | |||||
| .user-bg { | |||||
| width: 750rpx; | |||||
| position: absolute; | |||||
| left: 0; | |||||
| top: 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 5
- 8
pages/index/index.vue
View File
+ 121
- 0
pages/login/login.vue
View File
| @ -0,0 +1,121 @@ | |||||
| <template> | |||||
| <div class="login"> | |||||
| <!-- logo --> | |||||
| <div class="logo"> | |||||
| 打卡系统 | |||||
| </div> | |||||
| <!-- 标题 --> | |||||
| <view class="login-title">工程项目打卡系统</view> | |||||
| <!-- 登录按钮 --> | |||||
| <view @click="login" class="login-btn"> | |||||
| <uni-icons type="weixin" size="30" color="#fff"></uni-icons> | |||||
| <text class="wx">微信登录</text> | |||||
| </view> | |||||
| <!-- 隐私政策 --> | |||||
| <view class="privacy"> | |||||
| <uv-radio-group> | |||||
| <uv-checkbox-group v-model="consent"> | |||||
| <uv-checkbox :size="30" shape="circle" active-color="#05C160" :name="privacy"></uv-checkbox> | |||||
| </uv-checkbox-group> | |||||
| 已同意<text class="privacy-title">《隐私政策》</text> | |||||
| <text class="privacy-title">《服务条款》</text> | |||||
| </uv-radio-group> | |||||
| </view> | |||||
| <!-- 隐私政策弹框 --> | |||||
| <PrivacyAgreementPoup></PrivacyAgreementPoup> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import PrivacyAgreementPoup from '@/components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue' | |||||
| export default { | |||||
| name : "Login", | |||||
| components : { PrivacyAgreementPoup }, | |||||
| data() { | |||||
| return { | |||||
| consent : [] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| login() { | |||||
| if(this.consent.length <= 0){ | |||||
| return uni.showToast({ | |||||
| icon: "none", | |||||
| title: "请勾选隐私协议" | |||||
| }) | |||||
| } | |||||
| uni.navigateTo({ | |||||
| url: "/pages/login/wxUserInfo" | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .login { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| min-height: 100vh; | |||||
| background: white; | |||||
| // logo | |||||
| .logo { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 20rpx 0rpx; | |||||
| width: 40%; | |||||
| color: white; | |||||
| background: linear-gradient(180deg, #4C9EEA, #6DB9FF); | |||||
| border-radius: 45rpx 13rpx 45rpx 13rpx; | |||||
| font-size: 60rpx; | |||||
| } | |||||
| // 标题 | |||||
| .login-title { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| margin: 20rpx 0rpx; | |||||
| } | |||||
| //登录按钮 | |||||
| .login-btn { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 70%; | |||||
| background: #05C160; | |||||
| height: 90rpx; | |||||
| border-radius: 45rpx; | |||||
| color: white; | |||||
| margin-top: 200rpx; | |||||
| .wx { | |||||
| margin-left: 10rpx; | |||||
| } | |||||
| } | |||||
| //隐私政策 | |||||
| .privacy { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-top: 20rpx; | |||||
| &::v-deep .uv-checkbox-group { | |||||
| align-items: center !important; | |||||
| justify-content: center !important; | |||||
| flex-wrap : nowrap !important; | |||||
| } | |||||
| .privacy-title { | |||||
| color: #05C160; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 168
- 0
pages/login/wxUserInfo.vue
View File
| @ -0,0 +1,168 @@ | |||||
| <!-- 用户信息 --> | |||||
| <template> | |||||
| <view class="login"> | |||||
| <!-- logo --> | |||||
| <div class="logo"> | |||||
| 打卡系统 | |||||
| </div> | |||||
| <!-- 标题 --> | |||||
| <view class="login-title">工程项目打卡系统</view> | |||||
| <view class="title"> | |||||
| 申请获取你的头像、昵称 | |||||
| </view> | |||||
| <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 头像 | |||||
| </view> | |||||
| <view class=""> | |||||
| <image :src="userInfo.headImage" v-if="userInfo.headImage" | |||||
| style="width: 70rpx;height: 70rpx;border-radius: 50%;" mode="widthFix"></image> | |||||
| <!-- <image src="@/static/login/logo.png" v-else style="width: 70rpx;height: 70rpx;border-radius: 50%;" mode="widthFix"></image> --> | |||||
| </view> | |||||
| </view> | |||||
| </button> | |||||
| <view class="line"> | |||||
| <view class=""> | |||||
| 昵称 | |||||
| </view> | |||||
| <view class=""> | |||||
| <input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" | |||||
| v-model="userInfo.nickName" /> | |||||
| </view> | |||||
| </view> | |||||
| <view class="btn" @click="submit"> | |||||
| 确认 | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| userInfo: { | |||||
| headImage: '../static/login/user.png', //设置了一个本地默认头像 | |||||
| nickName: '', | |||||
| name: '' | |||||
| } | |||||
| }; | |||||
| }, | |||||
| onShow() {}, | |||||
| computed: {}, | |||||
| methods: { | |||||
| onChooseAvatar(res) { | |||||
| let self = this | |||||
| self.$Oss.ossUpload(res.target.avatarUrl) | |||||
| .then(url => { | |||||
| self.userInfo.headImage = url | |||||
| }) | |||||
| }, | |||||
| submit() { | |||||
| let self = this | |||||
| uni.createSelectorQuery().in(this) | |||||
| .select("#nickName") | |||||
| .fields({ | |||||
| properties: ["value"], | |||||
| }) | |||||
| .exec((res) => { | |||||
| const nickName = res?.[0]?.value | |||||
| self.userInfo.nickName = nickName | |||||
| self.userInfo.name = nickName | |||||
| if (self.$utils.verificationAll(self.userInfo, { | |||||
| headImage: '请选择头像', | |||||
| nickName: '请填写昵称', | |||||
| })) { | |||||
| return | |||||
| } | |||||
| // self.$api('updateInfo', self.userInfo, res => { | |||||
| // if (res.code == 200) { | |||||
| // this.replushUserInfo() | |||||
| // uni.switchTab({ | |||||
| // url: '/pages/repair/repair' | |||||
| // }) | |||||
| // } | |||||
| // }) | |||||
| uni.reLaunch({ | |||||
| url: "/pages/index/index" | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| //刷新存放在vuex的用户信息 | |||||
| replushUserInfo() { | |||||
| this.$api('getUserInfo', res => { | |||||
| if (res.code == 200) { | |||||
| this.$store.commit('setUserInfo', res.result) | |||||
| } | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .login { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| height: 100vh; | |||||
| // logo | |||||
| .logo { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 20rpx 0rpx; | |||||
| width: 40%; | |||||
| color: white; | |||||
| background: linear-gradient(180deg, #4C9EEA, #6DB9FF); | |||||
| border-radius: 45rpx 13rpx 45rpx 13rpx; | |||||
| font-size: 60rpx; | |||||
| } | |||||
| // 标题 | |||||
| .login-title { | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| margin: 20rpx 0rpx; | |||||
| } | |||||
| .line { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| width: 80%; | |||||
| border-bottom: 1px solid #00000023; | |||||
| padding: 30rpx 0; | |||||
| margin: 0 auto; | |||||
| } | |||||
| .chooseAvatar { | |||||
| width: 100%; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| margin-top: 10vh; | |||||
| border: none; | |||||
| } | |||||
| .btn { | |||||
| // background: $uni-linear-gradient-btn-color; | |||||
| background: $main-color; | |||||
| color: #fff; | |||||
| width: 80%; | |||||
| padding: 30rpx 0; | |||||
| border-radius: 100rpx; | |||||
| text-align: center; | |||||
| margin-top: 10vh; | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 285
- 0
pages/record/record.vue
View File
| @ -0,0 +1,285 @@ | |||||
| <!-- 签到记录 --> | |||||
| <template> | |||||
| <view class="record"> | |||||
| <!-- 自定义导航栏 --> | |||||
| <uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left" | |||||
| title="签到记录" @clickLeft="$utils.navigateBack" /> | |||||
| <!-- 签到日历 --> | |||||
| <view class="sign-calendar main"> | |||||
| <view class="sign-user-info"> | |||||
| <image class="user-img" src="@/static/logo.png" mode="widthFix"></image> | |||||
| <view class="base"> | |||||
| <view class="name">李知意</view> | |||||
| <view class="project">高新区项目一队项目1</view> | |||||
| </view> | |||||
| </view> | |||||
| <view> | |||||
| <view class="calendar-top"> | |||||
| <view class="current-time"> | |||||
| <view class="year">{{ year }}</view> | |||||
| <view class="time">{{ monthDay }}</view> | |||||
| </view> | |||||
| <view class="calendar-desc"> | |||||
| <view class="calendar-desc-item">正常</view> | |||||
| <view class="calendar-desc-item">缺卡</view> | |||||
| <view class="calendar-desc-item">未打卡</view> | |||||
| </view> | |||||
| </view> | |||||
| <uni-calendar class="uni-calendar--hook" :selected="selected" showMonth /> | |||||
| <view class="desc"> | |||||
| <view style="width: 100%;justify-content: flex-start;margin-top: 30rpx;" class="calendar-desc"> | |||||
| <view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常：<text>5</text></view> | |||||
| <view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>3</text></view> | |||||
| <view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>2</text></view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <!-- 今日打卡详情 --> | |||||
| <view class="today-detail main"> | |||||
| <view class="today-detail-title">今日打卡详情</view> | |||||
| <uv-steps current="8" direction="column" dot> | |||||
| <uv-steps-item v-for="item in 10" :key="item"> | |||||
| <template #title> | |||||
| <view class="today-detail-main"> | |||||
| <image src="@/static/image/center/center-bg.png" mode="widthFix"></image> | |||||
| <view class="sign-detail"> | |||||
| <view class="time">2024-10-09 8:30</view> | |||||
| <view class="address">长沙市雨花区德思勤城市广场</view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| </uv-steps-item> | |||||
| </uv-steps> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| /** | |||||
| * 获取任意时间 | |||||
| */ | |||||
| function getDate(date, AddDayCount = 0) { | |||||
| if (!date) { | |||||
| date = new Date() | |||||
| } | |||||
| if (typeof date !== 'object') { | |||||
| date = date.replace(/-/g, '/') | |||||
| } | |||||
| const dd = new Date(date) | |||||
| dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期 | |||||
| const y = dd.getFullYear() | |||||
| const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0 | |||||
| const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0 | |||||
| return { | |||||
| fullDate: y + '-' + m + '-' + d, | |||||
| year: y, | |||||
| month: m, | |||||
| date: d, | |||||
| day: dd.getDay() | |||||
| } | |||||
| } | |||||
| export default { | |||||
| name: "Record", | |||||
| data() { | |||||
| return { | |||||
| year: '', //年 | |||||
| monthDay: '', //月日 | |||||
| selected: [{ //info为1:正常 2:缺卡 3:未打卡 | |||||
| date: getDate(new Date(), -3).fullDate, | |||||
| info: 3 | |||||
| }, | |||||
| { | |||||
| date: getDate(new Date(), -2).fullDate, | |||||
| info: 2 | |||||
| }, | |||||
| { | |||||
| date: getDate(new Date(), -1).fullDate, | |||||
| info: 1 | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| onShow() { | |||||
| this.getCurrentTime() | |||||
| }, | |||||
| methods: { | |||||
| //获取打卡日期 | |||||
| getCurrentTime() { | |||||
| let currentDate = new Date(); | |||||
| this.year = currentDate.getFullYear(); | |||||
| let currentMonth = currentDate.getMonth() + 1; | |||||
| let currentDay = currentDate.getDate(); | |||||
| this.monthDay = | |||||
| `${currentMonth < 10 ? "0" + currentMonth : currentMonth}.${currentDay < 10 ? "0" + currentDay : currentDay}` | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" scoped> | |||||
| .record { | |||||
| min-height: 100vh; | |||||
| background: #E4E4E4; | |||||
| padding-bottom: 100rpx; | |||||
| .main { | |||||
| width: 95%; | |||||
| margin: 0rpx auto; | |||||
| } | |||||
| // 签到日历 | |||||
| .sign-calendar { | |||||
| background: white; | |||||
| border-radius: 15rpx; | |||||
| overflow: hidden; | |||||
| margin-top: 30rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 25rpx 15rpx; | |||||
| .sign-user-info { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| border-bottom: 2rpx solid #ccc; | |||||
| padding: 15rpx 0rpx; | |||||
| .user-img { | |||||
| width: 150rpx; | |||||
| height: 150rpx; | |||||
| } | |||||
| .base { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| justify-content: space-between; | |||||
| box-sizing: border-box; | |||||
| padding: 25rpx 0rpx 25rpx 15rpx; | |||||
| width: calc(100% - 150rpx); | |||||
| .name { | |||||
| font-size: 36rpx; | |||||
| } | |||||
| .project { | |||||
| font-size: 30rpx; | |||||
| color: #959595; | |||||
| } | |||||
| } | |||||
| } | |||||
| .calendar-top, | |||||
| .desc { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| padding: 15rpx 0rpx 20rpx 0rpx; | |||||
| .current-time { | |||||
| display: flex; | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| width: 35%; | |||||
| .year { | |||||
| margin-right: 15rpx; | |||||
| } | |||||
| .time {} | |||||
| } | |||||
| .calendar-desc { | |||||
| display: flex; | |||||
| justify-content: flex-end; | |||||
| width: 65%; | |||||
| color: #707070; | |||||
| .calendar-desc-item { | |||||
| position: relative; | |||||
| margin: 0rpx 35rpx; | |||||
| &::before { | |||||
| position: absolute; | |||||
| top: 10rpx; | |||||
| left: -25rpx; | |||||
| display: block; | |||||
| content: ""; | |||||
| width: 20rpx; | |||||
| height: 20rpx; | |||||
| border-radius: 50%; | |||||
| background: #11FF00; | |||||
| } | |||||
| &:nth-child(1) { | |||||
| &::before { | |||||
| background: #11FF00; | |||||
| } | |||||
| } | |||||
| &:nth-child(2) { | |||||
| &::before { | |||||
| background: #F97D00; | |||||
| } | |||||
| } | |||||
| &:nth-child(3) { | |||||
| &::before { | |||||
| background: #FF0000; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| // 修改日历样式 | |||||
| &::v-deep .uni-calendar__header { | |||||
| display: none !important; | |||||
| } | |||||
| &::v-deep .uni-calendar-item__weeks-box { | |||||
| border-radius: 50% !important; | |||||
| } | |||||
| &::v-deep .uni-calendar-item--isDay { | |||||
| background-color: $main-color !important; | |||||
| } | |||||
| &::v-deep .uni-calendar-item--checked { | |||||
| background-color: $main-color !important; | |||||
| } | |||||
| } | |||||
| // 今日打卡详情 | |||||
| .today-detail { | |||||
| border-radius: 15rpx; | |||||
| background: white; | |||||
| margin-top: 35rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 25rpx 15rpx; | |||||
| overflow: hidden; | |||||
| .today-detail-title { | |||||
| font-size: 32rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .today-detail-main { | |||||
| display: flex; | |||||
| box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1); | |||||
| margin: 15rpx 0rpx; | |||||
| box-sizing: border-box; | |||||
| padding: 20rpx 15rpx; | |||||
| image { | |||||
| width: 30%; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||