页面切图

This commit is contained in:
仲么了
2023-01-12 10:03:25 +08:00
parent 0ea48cd5b3
commit fd9b3df761
12 changed files with 600 additions and 293 deletions

View File

@@ -1,7 +1,7 @@
<template>
<view class="Cn-page">
<template v-if="showLoginMsk && !login">
<navigator :url="tenantId ? '/pages/login/login' : '/pages/login/platform'" hover-class="none" class="page-login-btn">登录</navigator>
<navigator url="/pages/login/login" hover-class="none" class="page-login-btn">登录</navigator>
</template>
<template v-else>
<view class="loading" v-if="loading">
@@ -23,7 +23,6 @@ export default {
default: false
},
showLoginMsk: Boolean,
tenantId:''
},
data() {
return {
@@ -32,7 +31,6 @@ export default {
},
created() {
this.login = uni.getStorageSync('Authorization')
this.tenantId = false
},
}
</script>

View File

@@ -19,6 +19,18 @@
"navigationBarTitleText": "个人"
}
},
{
"path": "pages/login/agreement",
"style": {
"navigationBarTitleText": "用户协议"
}
},
{
"path": "pages/login/policy",
"style": {
"navigationBarTitleText": "个人信息保护政策"
}
},
{
"path": "pages/login/login",
"style": {
@@ -30,6 +42,24 @@
"style": {
"navigationBarTitleText": "忘记密码"
}
},
{
"path": "pages/login/register",
"style": {
"navigationBarTitleText": "快速注册"
}
},
{
"path": "pages/login/changePwd",
"style": {
"navigationBarTitleText": "修改密码"
}
},
{
"path": "pages/mine/setup",
"style": {
"navigationBarTitleText": "设置"
}
}
],
"tabBar": {
@@ -54,7 +84,7 @@
},
{
"pagePath": "pages/index/mine",
"iconPath": "static/mine2.png",
"iconPath": "static/mine.png",
"selectedIconPath": "static/mine2.png",
"text": "个人"
}
@@ -64,9 +94,8 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "灿能电力",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"backgroundColor": "#F8F8F8",
// #ifdef H5
,
"navigationStyle": "custom"
// #endif
},

View File

@@ -1,5 +1,5 @@
<template>
<Comp-page :loading="loading">
<view :loading="loading">
<view class="mine">
<view class="mine-header" @click="jump('basic')">
<image mode="aspectFill" class="mine-header-head" src="/static/head.jpg" />
@@ -18,7 +18,7 @@
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
</view>
</Comp-page>
</view>
</template>
<script>

25
pages/login/agreement.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
用户协议
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
}
</style>

151
pages/login/changePwd.vue Normal file
View File

@@ -0,0 +1,151 @@
<template>
<Cn-page :loading="loading">
<view slot="body">
<view class="index">
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item name="code">
<view class="login-box-input mt40">
<uni-easyinput type="number" v-model="formData.code" placeholder="请输入手机验证码" />
<view class="ml40"
style="margin-left:40rpx;font-size: 28rpx; color: #666; width: 200rpx; text-align: center"
v-if="waitTime > 0">{{ waitTime + 's后重新获取' }}</view>
<button class="login-box-input-btn" v-else @click="getCode" size="mini">获取验证码</button>
</view>
</uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput type="text" v-model="formData.password" placeholder="请输入新的登录密码" />
</uni-forms-item>
<uni-forms-item name="password2">
<uni-easyinput type="text" v-model="formData.password2" placeholder="请再次确认密码" />
</uni-forms-item>
</uni-forms>
<button type="default" class="submit-btn" @click="submit">提交</button>
<view class="login-box-tips">
<view style="color:#999">说明密码长度为6-18</view>
</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
name: "jiaban",
data () {
return {
loading: false,
waitTime: 0,
// 表单数据
formData: {
phone: '',
code: '',
password: '',
password2: ''
},
rules: {
phone: {
rules: [
{
required: true,
errorMessage: "请填写手机号"
}
]
},
code: {
rules: [
{
required: true,
errorMessage: "请填写验证码"
}
]
},
password: {
rules: [
{
required: true,
errorMessage: "请填写新密码"
}
]
},
password2: {
rules: [
{
required: true,
errorMessage: "请填写确认密码"
}
]
}
}
};
},
onLoad () {
},
methods: {
getCode () {
this.waitTime = 60
this.inter = setInterval(() => {
if (this.waitTime == 0) {
clearInterval(this.inter)
} else {
this.waitTime--
}
}, 1000)
},
submit () {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
}
})
},
}
};
</script>
<style lang="scss">
.index {
padding: 34rpx;
.submit-btn {
background: $uni-theme-blue;
color: #fff;
}
.login-box-tips {
margin-top: 60rpx;
display: flex;
justify-content: center;
font-size: 20rpx;
}
.login-box-input {
display: flex;
align-items: center;
border-bottom: 1rpx solid #f0f0f0;
.login-box-input-icon {
width: 40rpx;
margin-right: 40rpx;
}
.login-box-input-main {
font-size: 28rpx;
flex: 1;
height: 100rpx;
line-height: 100rpx;
}
.login-box-input-btn {
width: 200rpx;
margin-left: 40rpx;
background: $uni-theme-blue;
color: #fff;
}
.login-box-input-img {
margin-left: 40rpx;
background: skyblue;
height: 80rpx;
width: 200rpx;
}
}
}
</style>

View File

@@ -2,22 +2,35 @@
<Cn-page :loading="loading">
<view slot="body">
<view class="index">
<!-- <uni-forms ref="form" :label-width="80" :modelValue="formData" :rules="rules">
<uni-forms-item label="漏打日期" name="missingDate" required>
<uni-datetime-picker type="date" return-type="string" v-model="formData.missingDate" />
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入手机号" />
</uni-forms-item>
<uni-forms-item label="补卡类别" name="multipleDhoice" required>
<uni-data-checkbox v-model="formData.multipleDhoice" :localdata="range" />
<uni-forms-item name="code">
<view class="login-box-input mt40">
<uni-easyinput type="number" v-model="formData.code" placeholder="请输入验证码" />
<view class="ml40"
style="margin-left:40rpx;font-size: 28rpx; color: #666; width: 200rpx; text-align: center"
v-if="waitTime > 0">{{ waitTime + 's后重新获取' }}</view>
<button class="login-box-input-btn" v-else @click="getCode" size="mini">获取验证码</button>
</view>
</uni-forms-item>
<uni-forms-item label="漏打卡原因" name="reasonsForMissingPunch" required>
<uni-data-checkbox v-model="formData.reasonsForMissingPunch" :localdata="range2" />
<uni-forms-item name="password">
<uni-easyinput type="text" v-model="formData.password" placeholder="请输入新的登录密码" />
</uni-forms-item>
<uni-forms-item name="remarks" label="备注" required>
<uni-easyinput type="textarea" v-model="formData.remarks" placeholder="请输入" />
<uni-forms-item name="password2">
<uni-easyinput type="text" v-model="formData.password2" placeholder="请再次确认密码" />
</uni-forms-item>
</uni-forms> -->
<!-- <uni-steps :options="list2" active-color="#007AFF" direction="column" /> -->
</uni-forms>
<button type="default" class="submit-btn" @click="submit">提交</button>
<view class="login-box-tips">
<view style="color:#999">说明密码长度为6-18</view>
</view>
<view class="login-box-tips">
<view style="color:#999">点击提交即表示同意</view>
<navigator url="/pages/login/agreement" hover-class="none">用户协议</navigator>
<navigator url="/pages/login/policy" hover-class="none">个人信息保护政策</navigator>
</view>
</view>
</view>
</Cn-page>
@@ -28,64 +41,44 @@ export default {
data () {
return {
loading: false,
alias: "missingPunchApplication",
waitTime: 0,
// 表单数据
formData: {
created: "",
createdId: "",
viewRecordList: [],
applicant: "",
createdDate: "",
applicantId: "",
applicationNo: "",
multipleDhoice: "",
reasonsForMissingPunch: "",
remarks: ""
phone: '',
code: '',
password: '',
password2: ''
},
defId: "",
list2: [],
range: [
{ value: "上午上班", text: "上午上班" },
{ value: "下午上班", text: "下午上班" }
],
// 漏打卡原因
range2: [
{ value: "忘记打卡", text: "忘记打卡" },
{ value: "机器故障", text: "机器故障" },
{ value: "因公外出", text: "因公外出" },
{ value: "指纹丢失", text: "指纹丢失" },
{ value: "其他", text: "其他" }
],
rules: {
missingDate: {
phone: {
rules: [
{
required: true,
errorMessage: "请选择漏打日期"
errorMessage: "请填写手机号"
}
]
},
multipleDhoice: {
code: {
rules: [
{
required: true,
errorMessage: "请填写补卡类别"
errorMessage: "请填写验证码"
}
]
},
reasonsForMissingPunch: {
password: {
rules: [
{
required: true,
errorMessage: "请选择漏打卡原因"
errorMessage: "请填写新密码"
}
]
},
remarks: {
password2: {
rules: [
{
required: true,
errorMessage: "请填写备注"
errorMessage: "请填写确认密码"
}
]
}
@@ -95,6 +88,23 @@ export default {
onLoad () {
},
methods: {
getCode () {
this.waitTime = 60
this.inter = setInterval(() => {
if (this.waitTime == 0) {
clearInterval(this.inter)
} else {
this.waitTime--
}
}, 1000)
},
submit () {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
}
})
},
}
};
</script>
@@ -106,5 +116,44 @@ export default {
background: $uni-theme-blue;
color: #fff;
}
.login-box-tips {
margin-top: 60rpx;
display: flex;
justify-content: center;
font-size: 20rpx;
}
.login-box-input {
display: flex;
align-items: center;
border-bottom: 1rpx solid #f0f0f0;
.login-box-input-icon {
width: 40rpx;
margin-right: 40rpx;
}
.login-box-input-main {
font-size: 28rpx;
flex: 1;
height: 100rpx;
line-height: 100rpx;
}
.login-box-input-btn {
width: 200rpx;
margin-left: 40rpx;
background: $uni-theme-blue;
color: #fff;
}
.login-box-input-img {
margin-left: 40rpx;
background: skyblue;
height: 80rpx;
width: 200rpx;
}
}
}
</style>

View File

@@ -41,14 +41,14 @@
<view @click="loginType = 'pwd'" v-if="loginType == 'yzm'">账号密码登录</view>
<view @click="loginType = 'yzm'" v-else>短信验证码登录</view>
<view style="flex:1"></view>
<navigator url="/pages/login/changePwd" hover-class="none">忘记密码</navigator>
<navigator url="/pages/login/forget" hover-class="none">忘记密码</navigator>
<view style="margin:0 10px;color:#999">|</view>
<view>快速注册</view>
<navigator url="/pages/login/register" hover-class="none">快速注册</navigator>
</view>
<view class="login-box-tips">
<view style="color:#999">点击登录即表示同意</view>
<view>用户协议</view>
<view>个人信息保护政策</view>
<navigator url="/pages/login/agreement" hover-class="none">用户协议</navigator>
<navigator url="/pages/login/policy" hover-class="none">个人信息保护政策</navigator>
</view>
</view>
</view>

View File

@@ -1,237 +0,0 @@
<template>
<Cn-page :loading="loading">
<view slot="body">
<view class="platform">
<view class="platform-bg"></view>
<!-- <view class="platform-title">全国特种设备无损检测公共服务云平台</view> -->
<view class="platform-des" v-if="list.length">当前手机号绑定单位</view>
<view class="platform-des" v-else>通过手机号获取单位</view>
<view class="platform-content" v-if="list.length">
<navigator
hover-class="none"
:url="'/pages/login/login?alias=' + item.alias + '&name=' + item.companyName + '&account=' + phone.trim()"
class="platform-content-card"
v-for="item in list"
:key="item.alias"
>
<view class="platform-content-card-title">{{ item.companyName }}</view>
<view class="platform-content-card-des">{{ item.alias }}</view>
</navigator>
<div style="height:280rpx"></div>
<view class="platform-footer iphone">
<view class="platform-footer-tips">以上不是您需访问的平台</view>
<view class="platform-footer-btn" @click="showPopup">输入智慧云手机号/账号</view>
</view>
</view>
<view class="platform-content center" v-else>
<view>
<view class="platform-footer-btn" @click="showPopup">输入智慧云手机号/账号</view>
<!-- #ifdef MP -->
<button
v-if="canGetPhoneNumber"
type="primary"
class="platform-footer-btn"
open-type="getPhoneNumber"
@getphonenumber="onGetUserPhone"
>本机号码一键获取</button>
<!-- <view
type="primary"
class="platform-footer-btn"
@click="wxLogin"
>微信一键登录</view> -->
<!-- #endif -->
</view>
</view>
<uni-popup ref="inputPhone" type="center" :animation="false">
<view class="input-box">
<input
type="text"
class="input-box-main"
placeholder-class="input-box-main-placeholder"
placeholder="请输入智慧云手机号/账号"
v-model="phone"
/>
<view class="input-box-btn">
<view class="input-box-btn-item" @click="cancel">取消</view>
<view class="input-box-btn-item" @click="load">确定</view>
</view>
</view>
</uni-popup>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data() {
return {
loading: false,
phone: "",
list: [],
canGetPhoneNumber: true
};
},
components: {},
methods: {
showPopup() {
this.$refs.inputPhone.open();
},
load() {
this.$request({
url: "/cloud/getPlatformByAccout",
data: {
accout: this.phone.trim()
},
method: "POST"
}).then(res => {
console.warn(res);
this.list = res.data;
this.$refs.inputPhone.close();
});
},
cancel() {
this.$refs.inputPhone.close();
},
onGetUserPhone(e) {
console.warn(e);
this.$request({
url: "/org/wxxcx/getPhoneNum",
data: {
code: e.detail.code,
},
method: "POST"
}).then(res=>{
let data = JSON.parse(res.data)
this.phone = data.phoneNumber
this.load()
})
}
},
onLoad() {
// #ifdef MP-WEIXIN
uni.hideHomeButton();
// #endif
}
};
</script>
<style lang='less'>
.platform {
position: relative;
z-index: 2;
.platform-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 320rpx;
background: skyblue;
z-index: -1;
}
.platform-title {
padding: 40rpx 20rpx 0;
font-size: 28rpx;
color: #fff;
}
.platform-des {
padding: 36rpx 20rpx 0;
font-size: 24rpx;
color: #fff;
}
.platform-content {
padding: 28rpx 20rpx;
font-size: 24rpx;
margin-top: 60rpx;
border-radius: 28rpx 28rpx 0 0;
min-height: 50vh;
background: #f5f6fa;
.platform-content-card {
margin-bottom: 20rpx;
padding: 33rpx 28rpx;
border-radius: 14rpx;
background: #fff;
.platform-content-card-title {
font-weight: 600;
font-size: 28rpx;
color: #111;
}
.platform-content-card-des {
font-size: 24rpx;
margin-top: 23rpx;
color: #999;
}
}
}
.platform-footer {
position: fixed;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 280rpx;
width: 100%;
background: #fff;
.platform-footer-tips {
font-size: 28rpx;
color: #000;
}
}
.platform-footer-btn {
margin: 0 auto;
height: 80rpx;
width: 480rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
background: #449dff;
font-size: 24rpx;
color: #fff;
border-radius: 40rpx;
overflow: hidden;
}
.input-box {
box-sizing: border-box;
padding: 80rpx 60rpx 0;
height: 400rpx;
width: 680rpx;
border-radius: 16rpx;
background: #fff;
.input-box-main {
box-sizing: border-box;
height: 80rpx !important;
line-height: 80rpx !important;
border-radius: 4rpx;
font-size: 28rpx;
color: #333;
padding: 0 40rpx;
margin-top: 40rpx;
background: #f9f9f9;
}
.input-box-btn {
margin-top: 80rpx;
display: flex;
justify-content: center;
.input-box-btn-item {
height: 64rpx;
width: 200rpx;
background: #449dff;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 24rpx;
border-radius: 8rpx;
}
.input-box-btn-item:first-of-type {
box-sizing: border-box;
margin-right: 37rpx;
background: #fff;
border: 1px solid #666666;
color: #666666;
}
}
}
}
</style>

25
pages/login/policy.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
隐私政策
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
}
</style>

167
pages/login/register.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<Cn-page :loading="loading">
<view slot="body">
<view class="index">
<template v-if="step == 1">
<uni-forms ref="form">
<uni-forms-item name="phone">
<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入手机号" />
</uni-forms-item>
<uni-forms-item name="code">
<view class="login-box-input mt40">
<uni-easyinput type="number" v-model="formData.code" placeholder="请输入验证码" />
<view class="ml40"
style="margin-left:40rpx;font-size: 28rpx; color: #666; width: 200rpx; text-align: center"
v-if="waitTime > 0">{{ waitTime + 's后重新获取' }}</view>
<button class="login-box-input-btn" v-else @click="getCode" size="mini">获取验证码</button>
</view>
</uni-forms-item>
</uni-forms>
<button type="default" class="submit-btn" @click="firstSubmit">下一步</button>
<view class="login-box-tips">
<view style="color:#999">点击提交即表示同意</view>
<navigator url="/pages/login/agreement" hover-class="none">用户协议</navigator>
<navigator url="/pages/login/policy" hover-class="none">个人信息保护政策</navigator>
</view>
</template>
<template v-else>
<uni-forms ref="form">
<uni-forms-item name="password">
<uni-easyinput type="text" v-model="formData.password" placeholder="请输入登录密码" />
</uni-forms-item>
<uni-forms-item name="password2">
<uni-easyinput type="text" v-model="formData.password2" placeholder="请再次确认密码" />
</uni-forms-item>
</uni-forms>
<button type="default" class="submit-btn" @click="secondSubmit">提交</button>
<view class="login-box-tips">
<view style="color:#999">说明密码长度为6-18</view>
</view>
</template>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
name: "jiaban",
data () {
return {
step: 1,
loading: false,
waitTime: 0,
// 表单数据
formData: {
phone: '',
code: '',
password: '',
password2: ''
},
rules: {
phone: {
rules: [
{
required: true,
errorMessage: "请填写手机号"
}
]
},
code: {
rules: [
{
required: true,
errorMessage: "请填写验证码"
}
]
},
password: {
rules: [
{
required: true,
errorMessage: "请填写新密码"
}
]
},
password2: {
rules: [
{
required: true,
errorMessage: "请填写确认密码"
}
]
}
}
};
},
onLoad () {
},
methods: {
getCode () {
this.waitTime = 60
this.inter = setInterval(() => {
if (this.waitTime == 0) {
clearInterval(this.inter)
} else {
this.waitTime--
}
}, 1000)
},
firstSubmit () {
this.step = 2
},
secondSubmit () {
}
}
};
</script>
<style lang="scss">
.index {
padding: 34rpx;
.submit-btn {
background: $uni-theme-blue;
color: #fff;
}
.login-box-tips {
margin-top: 60rpx;
display: flex;
justify-content: center;
font-size: 20rpx;
}
.login-box-input {
display: flex;
align-items: center;
border-bottom: 1rpx solid #f0f0f0;
.login-box-input-icon {
width: 40rpx;
margin-right: 40rpx;
}
.login-box-input-main {
font-size: 28rpx;
flex: 1;
height: 100rpx;
line-height: 100rpx;
}
.login-box-input-btn {
width: 200rpx;
margin-left: 40rpx;
background: $uni-theme-blue;
color: #fff;
}
.login-box-input-img {
margin-left: 40rpx;
background: skyblue;
height: 80rpx;
width: 200rpx;
}
}
}
</style>

100
pages/mine/setup.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<view :loading="loading">
<view class="mine">
<view class="mine-nav" @click="jump('server')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<view class="mine-nav-label">客服</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('changePwd')" style="margin-top:20rpx;border-bottom: none; ">
<view class="mine-nav-label">修改密码</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('layout')" style="margin-top:20rpx;border-bottom: none; ">
<view class="mine-nav-label" style="text-align:center">退出登录</view>
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
init () {
},
jump (type) {
switch (type) {
case 'changePwd':
uni.navigateTo({
url: `/pages/login/changePwd`
})
default:
uni.navigateTo({
url: `/pages/mine/${type}`
})
break;
}
}
},
onLoad () {
this.init()
},
}
</script>
<style lang="scss">
.mine {
.mine-header {
padding: 200rpx 34rpx 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
margin-bottom: 20rpx;
box-shadow: 0 4rpx 8rpx #e7e7e74c;
.mine-header-head {
margin-right: 30rpx;
height: 128rpx;
width: 128rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
.mine-header-name {
margin-right: 30rpx;
flex: 1;
font-size: 36rpx;
color: #111;
font-weight: 700;
}
}
.mine-nav {
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
border-bottom: 1rpx solid #e8e8e8;
&-icon {
margin-right: 30rpx;
height: 44rpx;
width: 44rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
&-label {
margin-right: 30rpx;
flex: 1;
font-size: 28rpx;
color: #111;
}
}
}
</style>

BIN
static/layout.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB