个人中心切图

This commit is contained in:
仲么了
2023-01-13 16:32:56 +08:00
parent 36bcbab647
commit 25482cb612
41 changed files with 1090 additions and 75 deletions

View File

@@ -1,5 +1,5 @@
page {
background: #f6f7f8;
background: #f3f4f5;
}
.hide-txt {

View File

@@ -54,7 +54,7 @@ export default (options = {}) => {
title: '网络异常,请稍后再试',
})
uni.reLaunch({
url: '/pages/login/login',
url: '/pages/user/login',
});
},
})
@@ -72,7 +72,7 @@ function errHandler (res) {
uni.removeStorageSync('Cookie');
uni.clearStorageSync();
// #endif
uni.reLaunch({ url: '/pages/login/login' })
uni.reLaunch({ url: '/pages/user/login' })
break
default:
uni.showToast({

View File

@@ -192,7 +192,7 @@ const loadConfig = (call, need_fresh = false) => {
}).catch(err => {
globalConfigIsLoading = false;
console.warn(err);
// uni.reLaunch({ url: '/pages/login/login' })
// uni.reLaunch({ url: '/pages/user/login' })
})
}

View File

@@ -0,0 +1,70 @@
<template>
<view class="grid-card-content-item" @click="$emit('click')">
<view class="grid-card-content-item-icon" :style="{background:background}">
<image class="grid-card-content-item-icon-2" mode="aspectFit" :src="src" />
<view class="grid-card-badge" v-if="badge > 0">{{badge}}</view>
</view>
<view class="grid-card-content-item-text">{{text || ''}}</view>
</view>
</template>
<script>
export default {
props: ["src", "text", "badge", 'background'],
data () {
return {};
},
components: {}
};
</script>
<style lang='scss'>
.grid-card-content-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
height: 236rpx;
.grid-card-content-item-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 80rpx;
height: 80rpx;
background: rgba(78, 159, 255, 1);
border-radius: 20rpx;
.grid-card-content-item-icon-2 {
width: 40rpx;
height: 40rpx;
}
.grid-card-badge {
box-sizing: border-box;
position: absolute;
right: -14rpx;
top: -14rpx;
height: 30rpx;
min-width: 30rpx;
padding: 0 6rpx;
display: flex;
align-items: center;
justify-content: center;
background: red;
font-size: 20rpx;
color: #fff;
border-radius: 20rpx;
}
}
.grid-card-content-item-text {
max-width: 80%;
text-align: center;
margin-top: 16rpx;
color: #111;
font-size: 28rpx;
}
}
</style>

View File

@@ -0,0 +1,52 @@
<template>
<view class="grid-card">
<view class="grid-card-title" v-if="title">{{title}}</view>
<view class="grid-card-content">
<slot />
<Rc-grid-item background="#fff" v-for="item in seat" :key="item"></Rc-grid-item>
</view>
</view>
</template>
<script>
export default {
props: ["title"],
data () {
return {
seat: [] // 占位
};
},
mounted () {
console.warn(this.$slots.default.length);
let num = this.$slots.default.length;
let yushu = num % 3;
if (yushu > 0) {
for (let i = 0; i < 3 - yushu; i++) {
this.seat.push(i);
}
}
},
components: {}
};
</script>
<style lang='scss'>
.grid-card {
border-radius: 12rpx;
overflow: hidden;
background: #fff;
.grid-card-title {
height: 80rpx;
line-height: 80rpx;
text-indent: 40rpx;
border-bottom: 2rpx solid #f6f7f8;
color: #999;
font-size: 28rpx;
}
.grid-card-content {
background: #f6f7f8;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2rpx;
}
}
</style>

View File

@@ -1,7 +1,7 @@
<template>
<view class="Cn-page">
<template v-if="showLoginMsk && !login">
<navigator url="/pages/login/login" hover-class="none" class="page-login-btn">登录</navigator>
<navigator url="/pages/user/login" hover-class="none" class="page-login-btn">登录</navigator>
</template>
<template v-else>
<view class="loading" v-if="loading">

View File

@@ -20,51 +20,135 @@
}
},
{
"path": "pages/login/agreement",
"path": "pages/mine/agreement",
"style": {
"navigationBarTitleText": "用户协议"
}
},
{
"path": "pages/login/policy",
"path": "pages/mine/policy",
"style": {
"navigationBarTitleText": "个人信息保护政策"
}
},
{
"path": "pages/login/login",
"path": "pages/user/login",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/login/forget",
"path": "pages/user/forget",
"style": {
"navigationBarTitleText": "忘记密码"
}
},
{
"path": "pages/login/register",
"path": "pages/user/register",
"style": {
"navigationBarTitleText": "快速注册"
}
},
{
"path": "pages/login/changePwd",
"path": "pages/user/changePwd",
"style": {
"navigationBarTitleText": "修改密码"
}
},
{
"path": "pages/user/changePhone",
"style": {
"navigationBarTitleText": "修改手机号"
}
},
{
"path": "pages/mine/setup",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"path": "pages/mine/setupMessage",
"style": {
"navigationBarTitleText": "消息配置"
}
},
{
"path": "pages/mine/system",
"style": {
"navigationBarTitleText": "系统介绍"
}
},
{
"path": "pages/mine/company",
"style": {
"navigationBarTitleText": "公司介绍"
}
},
{
"path": "pages/mine/about",
"style": {
"navigationBarTitleText": "关于我们"
}
},
{
"path": "pages/mine/upgrade",
"style": {
"navigationBarTitleText": "关于我们"
}
},
{
"path": "pages/mine/message",
"style": {
"navigationBarTitleText": "个人消息"
}
},
{
"path": "pages/home/zantaishijian",
"style": {
"navigationBarTitleText": "暂态事件"
}
},
{
"path": "pages/home/zantaishijianDetail",
"style": {
"navigationBarTitleText": "详情"
}
},
{
"path": "pages/home/wentaiyuexian",
"style": {
"navigationBarTitleText": "稳态越限"
}
},
{
"path": "pages/home/wentaiyuexianjiancedian",
"style": {
"navigationBarTitleText": "越限监测点"
}
},
{
"path": "pages/home/wentaiyuexianjiancedianDetail",
"style": {
"navigationBarTitleText": "详情"
}
},
{
"path": "pages/home/zhongduanzhuangtai",
"style": {
"navigationBarTitleText": "终端状态"
}
},
{
"path": "pages/home/zhongduanzhuangtaiDetail",
"style": {
"navigationBarTitleText": "详情"
}
}
],
"tabBar": {
"color": "#979797",
"selectedColor": "#1296db",
"selectedColor": "#376cf3",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"spacing": "5px",

View File

@@ -0,0 +1,33 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item v-for="item in 3" clickable @click="jump" :key="item" title="发生稳态越限监测点10个"
rightText="2019-07-03" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
jump () {
console.log(123);
uni.navigateTo({
url: '/pages/home/wentaiyuexianjiancedian'
})
}
}
}
</script>
<style lang='scss'>
.index {}
</style>

View File

@@ -0,0 +1,33 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item v-for="item in 3" clickable @click="jump" :key="item" title="福州长乐变电站测试监测点1发生稳态越限10次"
note="越限详情3次谐波电压越限3次5次谐波电压越限2次电压总畸变率越限10次电流畸变率8次电流畸变率8次……" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
jump () {
console.log(123);
uni.navigateTo({
url: '/pages/home/wentaiyuexianjiancedianDetail'
})
}
}
}
</script>
<style lang='scss'>
.index {}
</style>

View File

@@ -0,0 +1,39 @@
<template>
<Rc-page :loading='loading'>
<view slot='body'>
<view class='wentaiyuexianDetail'>
<view class="title">福州长乐变电站测试监测点1发生稳态越限10次</view>
<view class="des">3次谐波电压越限3次5次谐波电压越限2次电压总畸变率越限10次电流畸变率8次电流畸变率8次</view>
</view>
</view>
</Rc-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.wentaiyuexianDetail {
padding: 34rpx;
box-sizing: border-box;
.des {
font-size: 28rpx;
color: #111;
margin-top: 20rpx;
}
.title {
font-size: 32rpx;
color: #111;
font-weight: 700;
}
}
</style>

View File

@@ -0,0 +1,34 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item v-for="item in 2" clickable @click="jump" :key="item"
title="测试监测点1于2019-07-01 10:11:12.885发生暂降事件残余电压89%持续时间0.67s"
note="台账信息南京灿能数据中心供电公司福州长乐变电站IPMAC192.168.1.125" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
jump () {
console.log(123);
uni.navigateTo({
url: '/pages/home/zantaishijianDetail'
})
}
}
}
</script>
<style lang='scss'>
.index {}
</style>

View File

@@ -0,0 +1,97 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='detail'>
<uni-forms :label-width="100" v-if="page.length">
<uni-forms-item :label="item.label" v-for="(item, index) in page" :key="index">
<view class="detail-text">{{ item.value }}</view>
</uni-forms-item>
</uni-forms>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
page: []
}
},
onLoad (options) {
this.page = [{
label: '事件分段数',
value: 1
},
{
label: '波形起始点相位(°)',
value: 'A相 3.23 B相 3.23 C相 3.23'
},
{
label: '跳变段电压变化率(V/ms)',
value: 'A相 3.23 B相 3.23 C相 3.23'
},
{
label: '相位跳变(°)',
value: 'A相 3.23 B相 3.23 C相 3.23'
},
{
label: '特征幅值(V)',
value: 'A相 3.23 B相 3.23 C相 3.23'
},
{
label: '持续时间(ms)',
value: '2521'
},
{
label: '不平衡度(%)',
value: '22'
},
{
label: '暂降类型',
value: '其他'
},
{
label: '暂降原因',
value: '其他'
}]
},
methods: {
}
}
</script>
<style lang='scss'>
.detail {
margin: 34rpx;
padding: 34rpx;
background: #fff;
border-radius: 12rpx;
overflow: hidden;
/deep/ .uni-easyinput__content-textarea {
min-height: unset;
color: #666;
}
.detail-text {
color: #666;
padding-top: 16rpx;
}
/deep/ .uni-forms-item:last-of-type{
margin-bottom: 0;
}
/deep/ .uni-forms-item{
margin-bottom: 30rpx;
}
/deep/ .uni-steps__column-text {
padding: 10px 0;
}
/deep/ .uni-steps__column-desc {
margin-top: 5px;
}
}
</style>

View File

@@ -0,0 +1,33 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item v-for="item in 13" clickable @click="jump" :key="item" title="终端异常共5台"
rightText="2019-07-03" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
jump () {
console.log(123);
uni.navigateTo({
url: '/pages/home/zhongduanzhuangtaiDetail'
})
}
}
}
</script>
<style lang='scss'>
.index {}
</style>

View File

View File

@@ -1,53 +1,43 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<Cn-page :loading="loading">
<view slot="body">
<view class="index">
<Cn-grid title="实时消息">
<Cn-grid-item background="#fff" src="/static/message.png" text="暂态事件"
@click="jump('/pages/home/zantaishijian')"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/message.png" text="稳态越限"
@click="jump('/pages/home/wentaiyuexian')"></Cn-grid-item>
<Cn-grid-item background="#fff" src="/static/message.png" text="终端状态"
@click="jump('/pages/home/zhongduanzhuangtai')"></Cn-grid-item>
</Cn-grid>
</view>
</view>
</Cn-page>
</template>
<script>
const mqtt = require('mqtt')
export default {
data () {
return {
title: '灿能'
loading: true
}
},
onLoad () {
console.log(mqtt);
},
methods: {
jump (url) {
uni.navigateTo({
url: url
})
},
},
onShow () {
setTimeout(() => {
this.loading = false
}, 500);
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
<style lang="scss">
.index {
padding: 34rpx;
}
</style>

View File

@@ -2,14 +2,22 @@
<view :loading="loading">
<view class="mine">
<view class="mine-header" @click="jump('basic')">
<image mode="aspectFill" class="mine-header-head" src="/static/head.jpg" />
<view class="mine-header-name hide-txt">灿能电力</view>
<image mode="aspectFill" class="mine-header-head" src="/static/head.png" />
<view class="mine-header-name hide-txt">
<view>灿能电力</view>
<view class="tag">普通用户</view>
</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('server')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<view class="mine-nav" @click="jump('upgrade')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
<view class="mine-nav-label">客服</view>
<view class="mine-nav-label">角色升级</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('message')"
style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<image mode="aspectFill" class="mine-nav-icon" src="/static/message2.png" />
<view class="mine-nav-label">个人消息</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('setup')" style="margin-top:20rpx;border-bottom: none; ">
@@ -17,6 +25,10 @@
<view class="mine-nav-label">设置</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="角色升级" placeholder="请输入六位邀请码"
@confirm="upgrade"></uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
@@ -31,12 +43,23 @@ export default {
methods: {
init () {
},
upgrade (code) {
console.log(code);
uni.showToast({
title: '升级成功',
icon: 'none'
})
},
jump (type) {
switch (type) {
case 'login':
uni.navigateTo({
url: `/pages/login/login`
url: `/pages/user/login`
})
break;
case 'upgrade':
this.$refs.inputDialog.open()
break;
default:
uni.navigateTo({
url: `/pages/mine/${type}`
@@ -75,6 +98,12 @@ export default {
font-size: 36rpx;
color: #111;
font-weight: 700;
.tag {
margin-top: 10rpx;
font-size: 24rpx;
color: #aaa;
}
}
}

52
pages/mine/about.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='about'>
<view class="logo"></view>
<view class="name">灿能云</view>
<view class="version">Version 1.0.0</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.about {
box-sizing: border-box;
height: 100vh;
padding: 34rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.logo {
height: 120rpx;
width: 120rpx;
background: $uni-theme-blue;
}
.name {
margin-top: 80rpx;
font-size: 40rpx;
font-weight: 700;
color: #333;
}
.version {
margin-top: 20rpx;
font-size: 38rpx;
color: #333;
}
}
</style>

View File

@@ -2,7 +2,7 @@
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
用户协议
用户协议
</view>
</view>
</Cn-page>

25
pages/mine/company.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>

28
pages/mine/message.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item title="登录成功" rightText="9-18" />
<uni-list-item title="登录成功" rightText="9-18" />
<uni-list-item title="登录成功" note="新用户" rightText="9-18" />
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {}
</style>

View File

@@ -1,15 +1,34 @@
<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>
<view class="mine-nav" @click="jump('changePhone')" style=" 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" @click="jump('changePwd')" style="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('setupMessage')" 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('agreement')" style="margin-top:20rpx;">
<view class="mine-nav-label">用户协议</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('system')">
<view class="mine-nav-label">系统介绍</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('company')">
<view class="mine-nav-label">公司介绍</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('about')" style="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>
@@ -31,8 +50,19 @@ export default {
switch (type) {
case 'changePwd':
uni.navigateTo({
url: `/pages/login/changePwd`
url: `/pages/user/changePwd`
})
break;
case 'changePhone':
uni.navigateTo({
url: `/pages/user/changePhone`
})
break;
case 'layout':
uni.navigateTo({
url: `/pages/user/login`
})
break;
default:
uni.navigateTo({
url: `/pages/mine/${type}`

111
pages/mine/setupMessage.vue Normal file
View File

@@ -0,0 +1,111 @@
<template>
<view :loading="loading">
<view class="mine">
<view class="mine-nav" style="margin-top:20rpx;">
<view class="mine-nav-label">暂态消息</view>
<switch color="#376cf3" />
</view>
<view class="mine-nav">
<view class="mine-nav-label">稳态越限消息</view>
<switch color="#376cf3" />
</view>
<view class="mine-nav">
<view class="mine-nav-label">终端消息</view>
<switch color="#376cf3" />
</view>
<view class="mine-nav" style="border-bottom: none; ">
<view class="mine-nav-label">系统消息</view>
<switch color="#376cf3" />
</view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
init () {
},
jump (type) {
switch (type) {
case 'changePwd':
uni.navigateTo({
url: `/pages/user/changePwd`
})
break;
case 'changePhone':
uni.navigateTo({
url: `/pages/user/changePhone`
})
break;
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>

25
pages/mine/system.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>

81
pages/mine/upgrade.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<Cn-page :loading="loading">
<view slot="body">
<view class="index">
<uni-forms ref="form">
<uni-forms-item name="phone">
<uni-easyinput type="text" v-model="code" placeholder="请输入六位邀请码" />
</uni-forms-item>
</uni-forms>
<button type="default" class="submit-btn" @click="submit">提交</button>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
name: "ChangePWd",
data () {
return {
loading: false,
code: '',
};
},
onLoad () {
},
methods: {
submit () {
uni.reLaunch({ url: '/pages/index/mine' })
},
}
};
</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>

165
pages/user/changePhone.vue Normal file
View File

@@ -0,0 +1,165 @@
<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 disabled type="text" 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>
</template>
<template v-else>
<uni-forms ref="form">
<uni-forms-item name="phone">
<uni-easyinput type="number" v-model="formData.phone2" 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="secondSubmit">提交</button>
</template>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
name: "jiaban",
data () {
return {
step: 1,
loading: false,
waitTime: 0,
// 表单数据
formData: {
phone: '150****0083',
code: '',
phone2: '',
code2: '',
},
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 () {
uni.navigateBack({ delta: 1 })
}
}
};
</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

@@ -3,6 +3,9 @@
<view slot="body">
<view class="index">
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item name="phone">
<uni-easyinput disabled type="text" 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="请输入手机验证码" />
@@ -29,14 +32,14 @@
</template>
<script>
export default {
name: "jiaban",
name: "ChangePWd",
data () {
return {
loading: false,
waitTime: 0,
//
formData: {
phone: '',
phone: '150****0083',
code: '',
password: '',
password2: ''
@@ -93,7 +96,8 @@ export default {
submit () {
this.$refs.form.validate((valid) => {
console.log(valid);
if (valid) {
if (!valid) {
uni.navigateBack({ delta: 1 })
}
})
},

View File

@@ -28,8 +28,8 @@
</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>
<navigator url="/pages/mine/agreement" hover-class="none">用户协议</navigator>
<navigator url="/pages/mine/policy" hover-class="none">个人信息保护政策</navigator>
</view>
</view>
</view>

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/forget" hover-class="none">忘记密码</navigator>
<navigator url="/pages/user/forget" hover-class="none">忘记密码</navigator>
<view style="margin:0 10px;color:#999">|</view>
<navigator url="/pages/login/register" hover-class="none">快速注册</navigator>
<navigator url="/pages/user/register" hover-class="none">快速注册</navigator>
</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>
<navigator url="/pages/mine/agreement" hover-class="none">用户协议</navigator>
<navigator url="/pages/mine/policy" hover-class="none">个人信息保护政策</navigator>
</view>
</view>
</view>

View File

@@ -20,8 +20,8 @@
<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>
<navigator url="/pages/mine/agreement" hover-class="none">用户协议</navigator>
<navigator url="/pages/mine/policy" hover-class="none">个人信息保护政策</navigator>
</view>
</template>
<template v-else>

BIN
static/head.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
static/message.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
static/message2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/我的服务.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@@ -80,7 +80,7 @@ $uni-font-size-paragraph:15px;
/* 全局配置 */
$uni-theme-blue: rgb(55, 108, 243); // 全局主题色
$uni-theme-blue: #376cf3; // 全局主题色
$uni-theme-yellow: #f2c867; // 全局主题色
$uni-theme-white: #fffefa; // 全局主题色
$uni-theme-radius: 12rpx; // 全局主题色