@ -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> |
@ -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> |
@ -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> |
@ -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> |