简柏林 / thingskit-app · Commits

Commit 643d7fdf6bb76ad2d8b73be384f29d3c5ad088d7

Authored by fengtao
1 parent f29a1cd7

refractor:重构登录页面样式，feat:新增系统通知和意见反馈

Inline Side-by-side
Showing 13 changed files with 839 additions and 421 deletions
1 ## ThingsKit物联网小程序、app 1 ## ThingsKit物联网小程序、app
  2 +## 兼容小程序、app、h5
2 3
3 ### 项目结构 4 ### 项目结构
4 5
@@ -13,10 +14,10 @@ @@ -13,10 +14,10 @@
13 │   ├── pay.js // 支付js 14 │   ├── pay.js // 支付js
14 │   └── request.js // 接口配置(基于uview配置) 15 │   └── request.js // 接口配置(基于uview配置)
15 ├── pages // 项目页面 16 ├── pages // 项目页面
16 -│   ├── goods // 商品列表  
17 │   ├── index // 首页 17 │   ├── index // 首页
18 -│   ├── personal // 个人中心  
19 │   └── device // 设备 18 │   └── device // 设备
  19 +│   └── alert // 告警
  20 +│   └── personal // 我的
20 ├── plugins // 功能js 21 ├── plugins // 功能js
21 ├── static // 图片文件 22 ├── static // 图片文件
22 ├── store // vuex 23 ├── store // vuex
@@ -57,10 +57,11 @@ @@ -57,10 +57,11 @@
57 }, 57 },
58 "quickapp" : {}, 58 "quickapp" : {},
59 "mp-weixin" : { 59 "mp-weixin" : {
60 - "appid" : "", 60 + "appid" : "wx0ad61d7bf6808e02",
61 "setting" : { 61 "setting" : {
62 "urlCheck" : false, 62 "urlCheck" : false,
63 - "minified" : true 63 + "minified" : true,
  64 + "es6" : true
64 }, 65 },
65 "usingComponents" : true, 66 "usingComponents" : true,
66 "permission" : { 67 "permission" : {
@@ -48,6 +48,22 @@ @@ -48,6 +48,22 @@
48 "navigationBarTitleText": "个人资料" 48 "navigationBarTitleText": "个人资料"
49 } 49 }
50 50
  51 + }, {
  52 + "path": "pages/systemNotify/systemNotify",
  53 + "style": {
  54 + "navigationBarTitleText": "通知列表"
  55 + }
  56 + },
  57 + {
  58 + "path": "pages/systemNotify/notifyDetail",
  59 + "style": {
  60 + "navigationBarTitleText": "通知详情"
  61 + }
  62 + }, {
  63 + "path": "pages/feedback/feedback",
  64 + "style": {
  65 + "navigationBarTitleText": "意见反馈"
  66 + }
51 } 67 }
52 ], 68 ],
53 "globalStyle": { 69 "globalStyle": {
  1 +<template>
  2 + <view class="feedback-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="form-page">
  6 + <u--form labelPosition="left" :model="feedbackData" :rules="rules" ref="form1">
  7 + <u-form-item label="主题" prop="userInfo.name" borderBottom ref="item1">
  8 + <u--input placeholder="请输入主题" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  9 + </u-form-item>
  10 + <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
  11 + <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  12 + </u-form-item>
  13 + <u-form-item label="手机" prop="userInfo.name" borderBottom ref="item1">
  14 + <u--input placeholder="请输入手机" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  15 + </u-form-item>
  16 + <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
  17 + <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  18 + </u-form-item>
  19 + <u-form-item label="QQ" prop="userInfo.name" borderBottom ref="item1">
  20 + <u--input placeholder="请输入QQ" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  21 + </u-form-item>
  22 + <u-form-item label="邮箱" prop="userInfo.name" borderBottom ref="item1">
  23 + <u--input placeholder="请输入邮箱" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  24 + </u-form-item>
  25 + <u-form-item label="图片" prop="userInfo.name" borderBottom ref="item1">
  26 + <u-upload :fileList="fileData" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
  27 + </u-form-item>
  28 + <u-form-item label="反馈信息" prop="userInfo.name" borderBottom ref="item1">
  29 + <u--textarea placeholder="不低于3个字" v-model="feedbackData.intro" count></u--textarea>
  30 + </u-form-item>
  31 + </u--form>
  32 + <u-button class="buttonSty" shape="circle" type="primary" text="提交" customStyle="margin-top: 17rpx" @click="submit"></u-button>
  33 + </view>
  34 + <f-tabbar></f-tabbar>
  35 + </view>
  36 +</template>
  37 +
  38 +<script>
  39 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  40 +
  41 +export default {
  42 + components: {
  43 + fTabbar
  44 + },
  45 + data() {
  46 + return {
  47 + feedbackData: {
  48 + userInfo: {
  49 + name: '',
  50 + intro: ''
  51 + }
  52 + },
  53 + fileData: []
  54 + };
  55 + },
  56 + onLoad() {
  57 + // 隐藏原生的tabbar
  58 + uni.hideTabBar();
  59 + },
  60 + methods: {
  61 + // 删除图片
  62 + deletePic(event) {
  63 + this[`fileData{event.name}`].splice(event.index, 1);
  64 + },
  65 + // 新增图片
  66 + async afterRead(event) {
  67 + // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  68 + let lists = [].concat(event.file);
  69 + let fileListLen = this[`fileData${event.name}`].length;
  70 + lists.map(item => {
  71 + this[`fileData${event.name}`].push({
  72 + ...item,
  73 + status: 'uploading',
  74 + message: '上传中'
  75 + });
  76 + });
  77 + for (let i = 0; i < lists.length; i++) {
  78 + const result = await this.uploadFilePromise(lists[i].url);
  79 + let item = this[`fileData${event.name}`][fileListLen];
  80 + this[`fileData${event.name}`].splice(
  81 + fileListLen,
  82 + 1,
  83 + Object.assign(item, {
  84 + status: 'success',
  85 + message: '',
  86 + url: result
  87 + })
  88 + );
  89 + fileListLen++;
  90 + }
  91 + },
  92 + uploadFilePromise(url) {
  93 + return new Promise((resolve, reject) => {
  94 + let a = uni.uploadFile({
  95 + url: '', // 仅为示例，非真实的接口地址
  96 + filePath: url,
  97 + name: 'file',
  98 + formData: {
  99 + user: 'test'
  100 + },
  101 + success: res => {
  102 + setTimeout(() => {
  103 + resolve(res.data.data);
  104 + }, 1000);
  105 + }
  106 + });
  107 + });
  108 + }
  109 + }
  110 +};
  111 +</script>
  112 +
  113 +<style lang="scss" scoped>
  114 +.feedback-page {
  115 + min-height: 100vh;
  116 + background-color: #fff;
  117 +}
  118 +.form-page {
  119 + padding: 0 20rpx;
  120 +}
  121 +//#ifndef MP
  122 +.buttonSty {
  123 + margin-top: 30rpx;
  124 +}
  125 +
  126 +//#endif
  127 +</style>
@@ -4,6 +4,10 @@ @@ -4,6 +4,10 @@
4 <public-module></public-module> 4 <public-module></public-module>
5 <view class="f__login"> 5 <view class="f__login">
6 <view class="loginPhone"> 6 <view class="loginPhone">
  7 + <view style="margin-top: 173rpx;">
  8 + <text style="font-size: 22px;color: #3A4759 ;position: relative;">手机验证码登录</text>
  9 + <view class="circleStyle"></view>
  10 + </view>
7 <view class="form-row"> 11 <view class="form-row">
8 <input class="input" type="number" v-model="phone" placeholder="请输入手机号码" 12 <input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
9 placeholder-style="font-weight:normal;color:#bbbbbb;"></input> 13 placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
@@ -13,7 +17,13 @@ @@ -13,7 +17,13 @@
13 placeholder-style="font-weight:normal;color:#bbbbbb;"></input> 17 placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
14 <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 18 <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
15 </view> 19 </view>
16 - <button class="submit" size="default" @click="onSubmit" :style="{background:PrimaryColor}">确定</button> 20 + <button class="submit" size="default" @click="onSubmit">
  21 + <text style="color:#FFFFFF">登录</text>
  22 + </button>
  23 + <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
  24 + <view style="color: #999999;font-size: 13px;" @click="openAccountFunc">账号密码登录</view>
  25 + </view>
  26 + <view class="circleStyleBottom"></view>
17 </view> 27 </view>
18 </view> 28 </view>
19 </view> 29 </view>
@@ -23,9 +33,8 @@ @@ -23,9 +33,8 @@
23 export default { 33 export default {
24 data() { 34 data() {
25 return { 35 return {
26 - PrimaryColor: '#0079fe', //主题色  
27 readonly: false, 36 readonly: false,
28 - codeText: '获取验证码', 37 + codeText: '发送验证码',
29 phone: '', //号码 38 phone: '', //号码
30 vCode: '', //验证码 39 vCode: '', //验证码
31 } 40 }
@@ -42,7 +51,7 @@ @@ -42,7 +51,7 @@
42 _this.codeText = s + 'S后重新获取'; 51 _this.codeText = s + 'S后重新获取';
43 if (s <= 0) { 52 if (s <= 0) {
44 clearInterval(clear); 53 clearInterval(clear);
45 - _this.codeText = '获取验证码'; 54 + _this.codeText = '发送验证码';
46 _this.readonly = false; 55 _this.readonly = false;
47 } 56 }
48 }, 1000); 57 }, 1000);
@@ -78,12 +87,21 @@ @@ -78,12 +87,21 @@
78 this.getCodeState(); //开始倒计时 87 this.getCodeState(); //开始倒计时
79 // }) 88 // })
80 }, 89 },
81 - onSubmit() {} 90 + onSubmit() {},
  91 + openAccountFunc(){
  92 + uni.navigateTo({
  93 + url:"./login"
  94 + })
  95 + }
82 } 96 }
83 } 97 }
84 </script> 98 </script>
85 99
86 <style lang="scss" scoped> 100 <style lang="scss" scoped>
  101 + .code-page{
  102 + min-height: 100vh;
  103 + background-color: #fff;
  104 + }
87 .f__login { 105 .f__login {
88 padding: 48rpx 32rpx; 106 padding: 48rpx 32rpx;
89 border-radius: 18rpx 18rpx 0 0; 107 border-radius: 18rpx 18rpx 0 0;
@@ -92,10 +110,19 @@ @@ -92,10 +110,19 @@
92 } 110 }
93 111
94 .loginPhone { 112 .loginPhone {
  113 + .circleStyle {
  114 + position: absolute;
  115 + width: 145rpx;
  116 + height: 300rpx;
  117 + left: -31rpx;
  118 + top: 10rpx;
  119 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  120 + background-color: #f0f2f5;
  121 + opacity: 0.5;
  122 + }
95 .form-row { 123 .form-row {
96 position: relative; 124 position: relative;
97 border-bottom: 1rpx solid #e8e8e8; 125 border-bottom: 1rpx solid #e8e8e8;
98 -  
99 .input { 126 .input {
100 font-size: 34rpx; 127 font-size: 34rpx;
101 line-height: 102rpx; 128 line-height: 102rpx;
@@ -132,9 +159,24 @@ @@ -132,9 +159,24 @@
132 159
133 .submit { 160 .submit {
134 margin-top: 60rpx; 161 margin-top: 60rpx;
135 - color: #fff;  
136 width: 100%; 162 width: 100%;
137 - border: none; 163 + position: relative;
  164 + background: linear-gradient(90deg, #5DC2FC 0%, #377DFF 100%);
  165 + border-radius: 46px;
138 } 166 }
  167 + .circleStyleBottom {
  168 + position: absolute;
  169 + width: 145rpx;
  170 + height: 300rpx;
  171 + right: -31rpx;
  172 + top: 804rpx;
  173 + //#ifndef MP
  174 + top: 804rpx;
  175 + //#endif
  176 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  177 + background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);
  178 + opacity: 0.1;
  179 + transform: rotate(180deg);
  180 + }
139 } 181 }
140 </style> 182 </style>
@@ -2,39 +2,40 @@ @@ -2,39 +2,40 @@
2 <view class="find-password-page"> 2 <view class="find-password-page">
3 <public-module></public-module> 3 <public-module></public-module>
4 <view class="top u-flex" style="justify-content: space-between;flex-direction: row;align-items: center;"> 4 <view class="top u-flex" style="justify-content: space-between;flex-direction: row;align-items: center;">
5 - <!-- color:#0079fe -->  
6 - <view :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view> 5 + <view @click="showPhone" :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view>
7 <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view> 6 <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
8 </view> 7 </view>
9 <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login"> 8 <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
10 <view class="loginPhone"> 9 <view class="loginPhone">
11 <view class="form-row"> 10 <view class="form-row">
12 <input class="input" type="number" v-model="phone" placeholder="请输入手机号码" 11 <input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
13 - placeholder-style="font-weight:normal;color:#bbbbbb;"></input> 12 + placeholder-style="font-weight:normal"></input>
14 </view> 13 </view>
  14 + <view style="height: 25rpx;"></view>
15 <view class="form-row"> 15 <view class="form-row">
16 - <input class="input" type="number" v-model="vCode" placeholder="请输入验证码"  
17 - placeholder-style="font-weight:normal;color:#bbbbbb;"></input> 16 + <input class="input" type="number" v-model="vCode" placeholder="请输入短信验证码"
  17 + placeholder-style="font-weight:normal"></input>
18 <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 18 <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
19 </view> 19 </view>
20 - <button class="submit" size="default" @click="onNextSubmit"  
21 - :style="{background:PrimaryColor}">下一步</button> 20 + <button class="submit" size="default" @click="onNextSubmit">
  21 + <text style="color:#fff">下一步</text>
  22 + </button>
22 </view> 23 </view>
23 </view> 24 </view>
24 <view v-else style="margin-top: 40rpx;" class="f__login"> 25 <view v-else style="margin-top: 40rpx;" class="f__login">
25 <view class="loginPhone"> 26 <view class="loginPhone">
26 <view class="form-row"> 27 <view class="form-row">
27 - <u--input class="input" prefixIcon="lock-fill" type="text" placeholder="请设置6-20位新的登录密码"  
28 - border="surround" v-model="account">  
29 - </u--input> 28 + <input class="input" type="password" v-model="password" placeholder="请设置6-20位新的登录密码"
  29 + placeholder-style="font-weight:normal"></input>
30 </view> 30 </view>
  31 + <view style="height: 25rpx;"></view>
31 <view class="form-row"> 32 <view class="form-row">
32 - <u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"  
33 - suffixIconStyle="color: #909399" type="password" placeholder="请再次输入新的登录密码" border="surround"  
34 - v-model="password" @change="passwordChange">  
35 - </u--input> 33 + <input class="input" type="password" v-model="rePassword" placeholder="请再次输入新的登录密码"
  34 + placeholder-style="font-weight:normal"></input>
36 </view> 35 </view>
37 - <button class="submit" size="default" @click="onSubmit" :style="{background:PrimaryColor}">提交</button> 36 + <button class="submit" size="default" @click="onSubmit">
  37 + <text style="color:#fff">确定</text>
  38 + </button>
38 </view> 39 </view>
39 </view> 40 </view>
40 </view> 41 </view>
@@ -44,12 +45,13 @@ @@ -44,12 +45,13 @@
44 export default { 45 export default {
45 data() { 46 data() {
46 return { 47 return {
47 - PrimaryColor: '#0079fe', //主题色  
48 readonly: false, 48 readonly: false,
49 - codeText: '获取验证码', 49 + codeText: '发送验证码',
50 phone: '', //号码 50 phone: '', //号码
51 vCode: '', //验证码 51 vCode: '', //验证码
52 - nextStatus: false 52 + nextStatus: false,
  53 + password:'',
  54 + rePassword:''
53 } 55 }
54 }, 56 },
55 methods: { 57 methods: {
@@ -64,7 +66,7 @@ @@ -64,7 +66,7 @@
64 _this.codeText = s + 'S后重新获取'; 66 _this.codeText = s + 'S后重新获取';
65 if (s <= 0) { 67 if (s <= 0) {
66 clearInterval(clear); 68 clearInterval(clear);
67 - _this.codeText = '获取验证码'; 69 + _this.codeText = '发送验证码';
68 _this.readonly = false; 70 _this.readonly = false;
69 } 71 }
70 }, 1000); 72 }, 1000);
@@ -103,21 +105,28 @@ @@ -103,21 +105,28 @@
103 onNextSubmit() { 105 onNextSubmit() {
104 this.nextStatus = true 106 this.nextStatus = true
105 }, 107 },
  108 + showPhone(){
  109 + this.nextStatus = false
  110 + },
106 onSubmit() {} 111 onSubmit() {}
107 } 112 }
108 } 113 }
109 </script> 114 </script>
110 115
111 <style lang="scss" scoped> 116 <style lang="scss" scoped>
  117 + .find-password-page{
  118 + min-height: 100vh;
  119 + background-color: #fff;
  120 + }
112 .top { 121 .top {
113 width: 750rpx; 122 width: 750rpx;
114 height: 100rpx; 123 height: 100rpx;
115 - border: 1px solid #e8e8e8; 124 + border: 0.1px solid #f7f9ff;
116 125
117 .item { 126 .item {
118 width: 375rpx; 127 width: 375rpx;
119 height: 100rpx; 128 height: 100rpx;
120 - border: 1px solid #e8e8e8; 129 + border: 0.1px solid #f7f9ff;
121 text-align: center; 130 text-align: center;
122 line-height: 90rpx; 131 line-height: 90rpx;
123 } 132 }
@@ -129,8 +138,9 @@ @@ -129,8 +138,9 @@
129 .loginPhone { 138 .loginPhone {
130 .form-row { 139 .form-row {
131 position: relative; 140 position: relative;
132 - border-bottom: 1rpx solid #e8e8e8;  
133 - 141 + border-radius: 32px;
  142 + border: 1px solid #F7F9FF;
  143 + background: #F7F9FF;
134 .input { 144 .input {
135 font-size: 34rpx; 145 font-size: 34rpx;
136 line-height: 102rpx; 146 line-height: 102rpx;
@@ -138,7 +148,7 @@ @@ -138,7 +148,7 @@
138 width: 100%; 148 width: 100%;
139 box-sizing: border-box; 149 box-sizing: border-box;
140 font-size: 30rpx; 150 font-size: 30rpx;
141 - padding: 0; 151 + padding: 0 34rpx;
142 font-weight: bold; 152 font-weight: bold;
143 } 153 }
144 154
@@ -147,7 +157,7 @@ @@ -147,7 +157,7 @@
147 height: 80rpx; 157 height: 80rpx;
148 color: #333; 158 color: #333;
149 line-height: 80rpx; 159 line-height: 80rpx;
150 - background: #eee; 160 + // background: #eee;
151 min-width: 188rpx; 161 min-width: 188rpx;
152 text-align: center; 162 text-align: center;
153 border-radius: 8rpx; 163 border-radius: 8rpx;
@@ -158,8 +168,8 @@ @@ -158,8 +168,8 @@
158 z-index: 11; 168 z-index: 11;
159 169
160 &.forhidden { 170 &.forhidden {
161 - background: #eee;  
162 - color: #cccccc; 171 + // background: #eee;
  172 + // color: #cccccc;
163 } 173 }
164 } 174 }
165 } 175 }
@@ -167,9 +177,9 @@ @@ -167,9 +177,9 @@
167 177
168 .submit { 178 .submit {
169 margin-top: 60rpx; 179 margin-top: 60rpx;
170 - color: #fff;  
171 width: 100%; 180 width: 100%;
172 - border: none; 181 + background: #377DFF;
  182 + border-radius: 48px;
173 } 183 }
174 } 184 }
175 } 185 }
@@ -2,34 +2,39 @@ @@ -2,34 +2,39 @@
2 <view class="login-page"> 2 <view class="login-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view class="u-flex" style="justify-content: center;">  
6 - <image style="width: 250rpx;height: 250rpx;" src="../../static/logo.png" mode="aspectFill"></image> 5 + <view class="u-flex" style="flex-direction: column;">
  6 + <view style="height: 250rpx;margin-top: 90rpx;margin-left: -107rpx;">
  7 + <view style="font-size: 30px;color:#3A4759">您好,</view>
  8 + <view style="position: relative;font-size: 30px;color:#3A4759" class="">欢迎来到ThingsKit!</view>
  9 + <view class="circleStyle"></view>
  10 + </view>
7 </view> 11 </view>
8 <view class="f__login"> 12 <view class="f__login">
9 <view class="loginPhone"> 13 <view class="loginPhone">
  14 + <view class="form-row"><u--input border="bottom" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="account"></u--input></view>
10 <view class="form-row"> 15 <view class="form-row">
11 - <u--input class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" border="surround"  
12 - v-model="account">  
13 - </u--input>  
14 - </view>  
15 - <view class="form-row">  
16 - <u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"  
17 - suffixIconStyle="color: #909399" type="password" placeholder="登录密码" border="surround"  
18 - v-model="password" @change="passwordChange">  
19 - </u--input> 16 + <u--input
  17 + border="bottom"
  18 + class="input"
  19 + prefixIcon="lock-fill"
  20 + :suffixIcon="showPasswordIcon"
  21 + suffixIconStyle="color: #909399"
  22 + type="password"
  23 + placeholder="请输入密码"
  24 + v-model="password"
  25 + @change="passwordChange"
  26 + ></u--input>
20 </view> 27 </view>
  28 + <button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button>
21 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;"> 29 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
22 - <view style="color: #0079fe;font-size: 14px;" @click="openCodeFunc">手机验证码登录</view>  
23 - <view style="color: #0079fe;font-size: 14px;" @click="findPassrordFunc">忘记密码</view> 30 + <view style="color: #999999;font-size: 13px;" @click="openCodeFunc">手机验证码登录</view>
  31 + <view style="color: #999999;font-size: 13px;position: relative;" @click="findPassrordFunc">忘记密码</view>
24 </view> 32 </view>
25 - <button class="submit" size="default" @click="onSubmitFunc"  
26 - :style="{background:PrimaryColor}">登录</button>  
27 - <view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 60rpx;">  
28 - <view style="color:#cccccc">第三方账号登录</view>  
29 - <view>  
30 - <image style="width: 150rpx;height: 150rpx;" src="../../static/logo.png" mode="aspectFill">  
31 - </image>  
32 - </view> 33 + <view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 220rpx;">
  34 + <view style="color:#999999;font-size: 13px;">第三方账号登录</view>
  35 + <view style="height:20rpx"></view>
  36 + <view ><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view>
  37 + <view class="circleStyleBottom"></view>
33 </view> 38 </view>
34 </view> 39 </view>
35 </view> 40 </view>
@@ -37,65 +42,87 @@ @@ -37,65 +42,87 @@
37 </template> 42 </template>
38 43
39 <script> 44 <script>
40 - export default {  
41 - data() {  
42 - return {  
43 - PrimaryColor: '#0079fe', //主题色  
44 - showPasswordIcon: 'eye-off'  
45 - } 45 +export default {
  46 + data() {
  47 + return {
  48 + showPasswordIcon: 'eye-off'
  49 + };
  50 + },
  51 + methods: {
  52 + passwordChange() {},
  53 + onSubmitFunc() {},
  54 + openCodeFunc() {
  55 + uni.navigateTo({
  56 + url: './code'
  57 + });
46 }, 58 },
47 - methods: {  
48 - passwordChange() {},  
49 - onSubmitFunc() {},  
50 - openCodeFunc() {  
51 - uni.navigateTo({  
52 - url: './code'  
53 - })  
54 - },  
55 - findPassrordFunc() {  
56 - uni.navigateTo({  
57 - url: './findPassword'  
58 - })  
59 - } 59 + findPassrordFunc() {
  60 + uni.navigateTo({
  61 + url: './findPassword'
  62 + });
60 } 63 }
61 } 64 }
  65 +};
62 </script> 66 </script>
63 67
64 <style lang="scss" scoped> 68 <style lang="scss" scoped>
65 - .login-page {  
66 - min-height: 100vh;  
67 - background-color: #fff;  
68 - }  
69 -  
70 - .f__login {  
71 - padding: 48rpx 32rpx;  
72 - border-radius: 18rpx 18rpx 0 0;  
73 - z-index: 99;  
74 - position: relative; 69 +.login-page {
  70 + min-height: 100vh;
  71 + background-color: #fff;
  72 + .circleStyle {
  73 + position: absolute;
  74 + width: 145rpx;
  75 + height: 300rpx;
  76 + left: -31rpx;
  77 + top: 10rpx;
  78 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  79 + background-color: #f0f2f5;
  80 + opacity: 0.5;
75 } 81 }
  82 +}
76 83
77 - .loginPhone {  
78 - .form-row {  
79 - position: relative;  
80 -  
81 - .input {  
82 - font-size: 34rpx;  
83 - line-height: 102rpx;  
84 - height: 114rpx;  
85 - width: 100%;  
86 - box-sizing: border-box;  
87 - font-size: 30rpx;  
88 - padding: 0;  
89 - font-weight: bold;  
90 - }  
91 - } 84 +.f__login {
  85 + padding: 8rpx 32rpx;
  86 + border-radius: 18rpx 18rpx 0 0;
  87 + z-index: 99;
  88 + position: relative;
  89 +}
92 90
  91 +.loginPhone {
  92 + .form-row {
  93 + position: relative;
93 94
94 - .submit {  
95 - margin-top: 60rpx;  
96 - color: #fff; 95 + .input {
  96 + font-size: 34rpx;
  97 + line-height: 102rpx;
  98 + height: 114rpx;
97 width: 100%; 99 width: 100%;
98 - border: none; 100 + box-sizing: border-box;
  101 + font-size: 30rpx;
  102 + padding: 0;
  103 + font-weight: bold;
99 } 104 }
100 } 105 }
  106 +
  107 + .submit {
  108 + margin-top: 60rpx;
  109 + background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
  110 + width: 100%;
  111 + border-radius: 46px;
  112 + }
  113 + .circleStyleBottom {
  114 + position: absolute;
  115 + width: 145rpx;
  116 + height: 300rpx;
  117 + right: -31rpx;
  118 + top: 404rpx;
  119 + //#ifndef MP
  120 + top: 504rpx;
  121 + //#endif
  122 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  123 + background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);
  124 + opacity: 0.1;
  125 + transform: rotate(180deg);
  126 + }
  127 +}
101 </style> 128 </style>
@@ -7,91 +7,87 @@ @@ -7,91 +7,87 @@
7 <!-- 登录 --> 7 <!-- 登录 -->
8 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30"> 8 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
9 <block v-if="userInfo.token"> 9 <block v-if="userInfo.token">
10 - <view class="u-m-r-20">  
11 - <image class="avatar" mode="aspectFill" :src="userInfo.headLogo || '/static/logo.png'"></image>  
12 - </view> 10 + <view class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.headLogo || '/static/logo.png'"></image></view>
13 <view class="u-flex-1" @click="onJump('/pages/personal/set')"> 11 <view class="u-flex-1" @click="onJump('/pages/personal/set')">
14 <view class="nickName u-flex"> 12 <view class="nickName u-flex">
15 - <view class="name u-m-r-10" v-if="userInfo.nickName">{{userInfo.nickName}}</view> 13 + <view class="name u-m-r-10" v-if="userInfo.nickName">{{ userInfo.nickName }}</view>
16 </view> 14 </view>
17 - <view class="detail" v-if="userInfo.phoneNum">手机号：{{userInfo.phoneNum | phone}}</view> 15 + <view class="detail" v-if="userInfo.phoneNum">手机号：{{ userInfo.phoneNum | phone }}</view>
18 <view class="detail" v-else>手机号:未绑定</view> 16 <view class="detail" v-else>手机号:未绑定</view>
19 </view> 17 </view>
20 </block> 18 </block>
21 <block v-else> 19 <block v-else>
22 <view class="u-m-r-20"> 20 <view class="u-m-r-20">
23 - <view class="avatar u-flex" style="justify-content: center;">  
24 - <u-icon name="account-fill" color="black" size="30"></u-icon>  
25 - </view> 21 + <view class="avatar u-flex" style="justify-content: center;"><u-icon name="account-fill" color="black" size="30"></u-icon></view>
26 </view> 22 </view>
27 <view class="u-flex-1"> 23 <view class="u-flex-1">
28 - <view @click="openLoginFunc" class="u-font-lg" style="color:black;font-weight: bold;">请点击登录  
29 - </view> 24 + <view @click="openLoginFunc" class="u-font-lg" style="color:black;font-weight: bold;">请点击登录</view>
30 <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view> 25 <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
31 </view> 26 </view>
32 </block> 27 </block>
33 - <view>  
34 - <u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon>  
35 - </view> 28 + <view><u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon></view>
36 </view> 29 </view>
37 <!-- #endif --> 30 <!-- #endif -->
38 <!-- #ifndef MP --> 31 <!-- #ifndef MP -->
39 <!-- 登录 --> 32 <!-- 登录 -->
40 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30"> 33 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
41 <block v-if="userInfo.token"> 34 <block v-if="userInfo.token">
42 - <view class="u-m-r-20">  
43 - <image class="avatar" mode="aspectFill" :src="userInfo.headLogo"></image>  
44 - </view> 35 + <view class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.headLogo"></image></view>
45 <view class="u-flex-1" @click="onJump('/pages/user/set')"> 36 <view class="u-flex-1" @click="onJump('/pages/user/set')">
46 - <view class="nickName">{{userInfo.userName}}</view>  
47 - <view class="detail" v-if="userInfo.phoneNum">手机号：{{userInfo.phoneNum | phone}}</view> 37 + <view class="nickName">{{ userInfo.userName }}</view>
  38 + <view class="detail" v-if="userInfo.phoneNum">手机号：{{ userInfo.phoneNum | phone }}</view>
48 <view class="detail" v-else>手机号:未绑定</view> 39 <view class="detail" v-else>手机号:未绑定</view>
49 </view> 40 </view>
50 </block> 41 </block>
51 <block v-else> 42 <block v-else>
52 <view class="u-m-r-20"> 43 <view class="u-m-r-20">
53 - <view class="avatar u-flex" style="justify-content: center;">  
54 - <u-icon name="account-fill" color="black" size="30"></u-icon>  
55 - </view> 44 + <view class="avatar u-flex" style="justify-content: center;"><u-icon name="account-fill" color="black" size="30"></u-icon></view>
56 </view> 45 </view>
57 <view class="u-flex-1"> 46 <view class="u-flex-1">
58 <view @click="openLoginFunc" class="u-font-lg" style="color: black;font-weight: bold;">登录</view> 47 <view @click="openLoginFunc" class="u-font-lg" style="color: black;font-weight: bold;">登录</view>
59 <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view> 48 <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
60 </view> 49 </view>
61 </block> 50 </block>
62 - <view>  
63 - <u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon>  
64 - </view> 51 + <view><u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon></view>
65 </view> 52 </view>
66 <!-- #endif --> 53 <!-- #endif -->
67 </view> 54 </view>
68 <view style="height: 50rpx;"></view> 55 <view style="height: 50rpx;"></view>
69 <view class="cell-group"> 56 <view class="cell-group">
70 - <view class="cell-item u-flex" @click="onJump(item.url)"  
71 - :style="[{animation: 'show ' + ((index+1)*0.2+.2) + 's'}]" v-for="(item,index) in list" :key="index"> 57 + <view
  58 + class="cell-item u-flex"
  59 + @click="onJump(item.url)"
  60 + :style="[{ animation: 'show ' + ((index + 1) * 0.2 + 0.2) + 's' }]"
  61 + v-for="(item, index) in list"
  62 + :key="index"
  63 + >
72 <u-icon :name="item.icon" size="14" color="#333"></u-icon> 64 <u-icon :name="item.icon" size="14" color="#333"></u-icon>
73 - <view class="title u-flex-m">{{item.title}}</view> 65 + <view class="title u-flex-m">{{ item.title }}</view>
74 <u-icon name="arrow-right" size="14" color="#333"></u-icon> 66 <u-icon name="arrow-right" size="14" color="#333"></u-icon>
75 </view> 67 </view>
76 </view> 68 </view>
77 <view class="u-flex" style="justify-content: center;"> 69 <view class="u-flex" style="justify-content: center;">
78 - <button class="submit" size="default" @click="onLoginoutFunc"  
79 - :style="{background:PrimaryButtonColor}">退出账号</button> 70 + <button class="submit" size="default" @click="onLoginoutFunc" :style="{ background: PrimaryButtonColor }">退出账号</button>
80 </view> 71 </view>
81 <!-- 绑定账号 --> 72 <!-- 绑定账号 -->
82 <view> 73 <view>
83 <u-modal confirmText="绑定账号" @confirm="bindConfirm" :show="show" :title="title"> 74 <u-modal confirmText="绑定账号" @confirm="bindConfirm" :show="show" :title="title">
84 <view v-if="!bindPhone" class="loginPhone"> 75 <view v-if="!bindPhone" class="loginPhone">
85 <view class="form-row"> 76 <view class="form-row">
86 - <u--input class="input" prefixIcon="account-fill" type="text" placeholder="登录账号"  
87 - border="surround" v-model="account">  
88 - </u--input> 77 + <u--input class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" border="surround" v-model="account"></u--input>
89 </view> 78 </view>
90 <view class="form-row"> 79 <view class="form-row">
91 - <u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"  
92 - suffixIconStyle="color: #909399" type="password" placeholder="登录密码" border="surround"  
93 - v-model="password" @change="passwordChange">  
94 - </u--input> 80 + <u--input
  81 + class="input"
  82 + prefixIcon="lock-fill"
  83 + :suffixIcon="showPasswordIcon"
  84 + suffixIconStyle="color: #909399"
  85 + type="password"
  86 + placeholder="登录密码"
  87 + border="surround"
  88 + v-model="password"
  89 + @change="passwordChange"
  90 + ></u--input>
95 </view> 91 </view>
96 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;"> 92 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
97 <view style="visibility: hidden;">手机验证码登录</view> 93 <view style="visibility: hidden;">手机验证码登录</view>
@@ -100,13 +96,11 @@ @@ -100,13 +96,11 @@
100 </view> 96 </view>
101 <view v-else class="loginPhone"> 97 <view v-else class="loginPhone">
102 <view class="form-row"> 98 <view class="form-row">
103 - <u--input class="input" type="text" v-model="phone" placeholder="请输入手机号码"  
104 - placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input> 99 + <u--input class="input" type="text" v-model="phone" placeholder="请输入手机号码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
105 </view> 100 </view>
106 <view class="form-row"> 101 <view class="form-row">
107 - <u--input class="input" type="text" v-model="vCode" placeholder="请输入验证码"  
108 - placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>  
109 - <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 102 + <u--input class="input" type="text" v-model="vCode" placeholder="请输入验证码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
  103 + <view class="getvcode" :class="{ forhidden: readonly }" @click="getVcode">{{ codeText }}</view>
110 </view> 104 </view>
111 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;"> 105 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
112 <view style="visibility: hidden;">手机验证码登录</view> 106 <view style="visibility: hidden;">手机验证码登录</view>
@@ -118,20 +112,14 @@ @@ -118,20 +112,14 @@
118 <!-- 退出登录 --> 112 <!-- 退出登录 -->
119 <view> 113 <view>
120 <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom"> 114 <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom">
121 - <view class="u-flex"  
122 - style="flex-direction: column;height: 300rpx;margin: 30rpx 40rpx;background:#f5f5f5;border-radius: 20rpx;">  
123 - <view  
124 - style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;"> 115 + <view class="u-flex" style="flex-direction: column;height: 300rpx;margin: 30rpx 40rpx;background:#f5f5f5;border-radius: 20rpx;">
  116 + <view style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">
125 <text style="color:#999999">确定要退出当前账号？</text> 117 <text style="color:#999999">确定要退出当前账号？</text>
126 </view> 118 </view>
127 - <view  
128 - style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;"> 119 + <view style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">
129 <text style="color:#f95e5a">退出登录</text> 120 <text style="color:#f95e5a">退出登录</text>
130 </view> 121 </view>
131 - <view  
132 - style="width:669rpx;height: 100rpx;text-align: center;line-height: 86rpx;">  
133 - <text @click="closeLogout" style="color:#3478f7">取消</text>  
134 - </view> 122 + <view style="width:669rpx;height: 100rpx;text-align: center;line-height: 86rpx;"><text @click="closeLogout" style="color:#3478f7">取消</text></view>
135 </view> 123 </view>
136 </u-popup> 124 </u-popup>
137 </view> 125 </view>
@@ -140,262 +128,262 @@ @@ -140,262 +128,262 @@
140 </template> 128 </template>
141 129
142 <script> 130 <script>
143 - import base from '@/config/baseUrl';  
144 - import fTabbar from '@/components/module/f-tabbar/f-tabbar';  
145 - import fNavbar from '@/components/module/f-navbar/f-navbar';  
146 - import {  
147 - mapState  
148 - } from 'vuex'; 131 +import base from '@/config/baseUrl';
  132 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  133 +import fNavbar from '@/components/module/f-navbar/f-navbar';
  134 +import { mapState } from 'vuex';
149 135
150 - export default {  
151 - components: {  
152 - fTabbar,  
153 - fNavbar  
154 - },  
155 - data() {  
156 - return {  
157 - PrimaryColor: '#0079fe', //主题色  
158 - showLogout: false,  
159 - readonly: false,  
160 - codeText: '获取验证码',  
161 - phone: '', //号码  
162 - vCode: '', //验证码  
163 - tips: '验证码',  
164 - bindPhone: false,  
165 - show: false,  
166 - title: '绑定账号',  
167 - systemInfo: base.systemInfo,  
168 - PrimaryButtonColor: '#0079fe', //主题色  
169 - list: [{ 136 +export default {
  137 + components: {
  138 + fTabbar,
  139 + fNavbar
  140 + },
  141 + data() {
  142 + return {
  143 + PrimaryColor: '#0079fe', //主题色
  144 + showLogout: false,
  145 + readonly: false,
  146 + codeText: '获取验证码',
  147 + phone: '', //号码
  148 + vCode: '', //验证码
  149 + tips: '验证码',
  150 + bindPhone: false,
  151 + show: false,
  152 + title: '绑定账号',
  153 + systemInfo: base.systemInfo,
  154 + PrimaryButtonColor: '#0079fe', //主题色
  155 + list: [
  156 + {
170 title: '系统通知', 157 title: '系统通知',
171 - url: '', 158 + url: '../systemNotify/systemNotify',
172 icon: 'setting-fill' 159 icon: 'setting-fill'
173 - }, { 160 + },
  161 + {
174 title: '意见反馈', 162 title: '意见反馈',
175 - url: '', 163 + url: '../feedback/feedback',
176 icon: 'more-circle-fill' 164 icon: 'more-circle-fill'
177 - }, {  
178 - title: '首页设置',  
179 - url: '',  
180 - icon: 'bag-fill'  
181 - }],  
182 - } 165 + }
  166 + ]
  167 + };
  168 + },
  169 + onLoad() {
  170 + // 隐藏原生的tabbar
  171 + uni.hideTabBar();
  172 + },
  173 + computed: {
  174 + ...mapState(['userInfo'])
  175 + },
  176 + methods: {
  177 + onJump(url) {
  178 + uni.navigateTo({
  179 + url: url
  180 + });
183 }, 181 },
184 - onLoad() {  
185 - // 隐藏原生的tabbar  
186 - uni.hideTabBar(); 182 + openLoginFunc() {
  183 + uni.navigateTo({
  184 + url: './login'
  185 + });
187 }, 186 },
188 - computed: {  
189 - ...mapState(['userInfo']) 187 + openPersonalInfo() {
  188 + uni.navigateTo({
  189 + url: './set'
  190 + });
190 }, 191 },
191 - methods: {  
192 - openLoginFunc() {  
193 - uni.navigateTo({  
194 - url: './login'  
195 - })  
196 - },  
197 - openPersonalInfo() {  
198 - uni.navigateTo({  
199 - url: './set'  
200 - })  
201 - },  
202 - clickAccountFunc() {  
203 - this.show = true  
204 - },  
205 - bindConfirm() {  
206 - this.show = false  
207 - },  
208 - bindPhoneFunc() {  
209 - this.bindPhone = true  
210 - },  
211 - bindAccountFunc() {  
212 - this.bindPhone = false  
213 - },  
214 - //验证码按钮文字状态  
215 - getCodeState() {  
216 - const _this = this;  
217 - this.readonly = true;  
218 - this.codeText = '60S后重新获取';  
219 - var s = 60;  
220 - clear = setInterval(() => {  
221 - s--;  
222 - _this.codeText = s + 'S后重新获取';  
223 - if (s <= 0) {  
224 - clearInterval(clear);  
225 - _this.codeText = '获取验证码';  
226 - _this.readonly = false;  
227 - }  
228 - }, 1000);  
229 - },  
230 - //获取验证码  
231 - getVcode() {  
232 - console.log('getVcode')  
233 - if (this.readonly) {  
234 - uni.showToast({  
235 - title: '验证码已发送~',  
236 - icon: 'none'  
237 - });  
238 - return;  
239 - }  
240 - if (this.phone == '') {  
241 - uni.showToast({  
242 - title: '请输入手机号~',  
243 - icon: 'none'  
244 - });  
245 - return;  
246 - }  
247 - const phoneRegular = /^1\d{10}$/;  
248 - if (!phoneRegular.test(this.phone)) {  
249 - uni.showToast({  
250 - title: '手机号格式不正确~',  
251 - icon: 'none'  
252 - });  
253 - return; 192 + clickAccountFunc() {
  193 + this.show = true;
  194 + },
  195 + bindConfirm() {
  196 + this.show = false;
  197 + },
  198 + bindPhoneFunc() {
  199 + this.bindPhone = true;
  200 + },
  201 + bindAccountFunc() {
  202 + this.bindPhone = false;
  203 + },
  204 + //验证码按钮文字状态
  205 + getCodeState() {
  206 + const _this = this;
  207 + this.readonly = true;
  208 + this.codeText = '60S后重新获取';
  209 + var s = 60;
  210 + clear = setInterval(() => {
  211 + s--;
  212 + _this.codeText = s + 'S后重新获取';
  213 + if (s <= 0) {
  214 + clearInterval(clear);
  215 + _this.codeText = '获取验证码';
  216 + _this.readonly = false;
254 } 217 }
255 - let httpData = {}  
256 - // 获取验证码接口  
257 - // uni.$u.http.post('您的接口', httpData).then(res => {  
258 - this.getCodeState(); //开始倒计时  
259 - // })  
260 - },  
261 - onLoginoutFunc() {  
262 - this.showLogout = true  
263 - },  
264 - closeLogout() {  
265 - this.showLogout = false 218 + }, 1000);
  219 + },
  220 + //获取验证码
  221 + getVcode() {
  222 + console.log('getVcode');
  223 + if (this.readonly) {
  224 + uni.showToast({
  225 + title: '验证码已发送~',
  226 + icon: 'none'
  227 + });
  228 + return;
  229 + }
  230 + if (this.phone == '') {
  231 + uni.showToast({
  232 + title: '请输入手机号~',
  233 + icon: 'none'
  234 + });
  235 + return;
266 } 236 }
  237 + const phoneRegular = /^1\d{10}$/;
  238 + if (!phoneRegular.test(this.phone)) {
  239 + uni.showToast({
  240 + title: '手机号格式不正确~',
  241 + icon: 'none'
  242 + });
  243 + return;
  244 + }
  245 + let httpData = {};
  246 + // 获取验证码接口
  247 + // uni.$u.http.post('您的接口', httpData).then(res => {
  248 + this.getCodeState(); //开始倒计时
  249 + // })
  250 + },
  251 + onLoginoutFunc() {
  252 + this.showLogout = true;
  253 + },
  254 + closeLogout() {
  255 + this.showLogout = false;
267 } 256 }
268 } 257 }
  258 +};
269 </script> 259 </script>
270 260
271 <style lang="scss" scoped> 261 <style lang="scss" scoped>
272 - .headBox {  
273 - background-color: #fff;  
274 - border-top: 0.2px solid gray;  
275 - height: 250rpx;  
276 -  
277 - .avatar {  
278 - width: 50px;  
279 - height: 50px;  
280 - border-radius: 25px;  
281 - background-color: #ccc;  
282 - } 262 +.headBox {
  263 + background-color: #fff;
  264 + border-top: 0.2px solid gray;
  265 + height: 250rpx;
283 266
284 - .nickName {  
285 - .btn {  
286 - font-size: 22rpx;  
287 - font-weight: normal;  
288 - color: #666;  
289 - background: #fff;  
290 - border-radius: 5rpx;  
291 - height: 45rpx;  
292 - line-height: 45rpx;  
293 - padding: 0 10rpx;  
294 - position: relative;  
295 -  
296 - .itemButton {  
297 - border-radius: 0;  
298 - text-align: left;  
299 - opacity: 0;  
300 - width: 100%;  
301 - height: 100%;  
302 - position: absolute;  
303 - left: 0;  
304 - top: 0;  
305 - }  
306 - } 267 + .avatar {
  268 + width: 50px;
  269 + height: 50px;
  270 + border-radius: 25px;
  271 + background-color: #ccc;
  272 + }
307 273
308 - .name {  
309 - color: #fff;  
310 - font-weight: bold;  
311 - font-size: 32rpx;  
312 - } 274 + .nickName {
  275 + .btn {
  276 + font-size: 22rpx;
  277 + font-weight: normal;
  278 + color: #666;
  279 + background: #fff;
  280 + border-radius: 5rpx;
  281 + height: 45rpx;
  282 + line-height: 45rpx;
  283 + padding: 0 10rpx;
  284 + position: relative;
313 285
314 - .placardVip {  
315 - background: #2a2e44;  
316 - color: #f4d6a1;  
317 - font-size: 22rpx;  
318 - padding: 4rpx 10rpx;  
319 - text-align: center;  
320 - border-radius: 4rpx; 286 + .itemButton {
  287 + border-radius: 0;
  288 + text-align: left;
  289 + opacity: 0;
  290 + width: 100%;
  291 + height: 100%;
  292 + position: absolute;
  293 + left: 0;
  294 + top: 0;
321 } 295 }
322 -  
323 } 296 }
324 297
325 - .detail { 298 + .name {
326 color: #fff; 299 color: #fff;
327 - font-size: 24rpx;  
328 - padding-top: 6rpx; 300 + font-weight: bold;
  301 + font-size: 32rpx;
329 } 302 }
330 303
  304 + .placardVip {
  305 + background: #2a2e44;
  306 + color: #f4d6a1;
  307 + font-size: 22rpx;
  308 + padding: 4rpx 10rpx;
  309 + text-align: center;
  310 + border-radius: 4rpx;
  311 + }
331 } 312 }
332 313
333 - .cell-group {  
334 - .cell-item {  
335 - border-bottom: 2rpx solid #eee;  
336 - background-color: #fff;  
337 - border-radius: 10rpx;  
338 - padding: 20rpx 24rpx; 314 + .detail {
  315 + color: #fff;
  316 + font-size: 24rpx;
  317 + padding-top: 6rpx;
  318 + }
  319 +}
339 320
340 - .title {  
341 - color: #333;  
342 - font-size: 28rpx;  
343 - padding: 0 10rpx;  
344 - font-weight: bold;  
345 - margin: 0;  
346 - } 321 +.cell-group {
  322 + .cell-item {
  323 + border-bottom: 2rpx solid #eee;
  324 + background-color: #fff;
  325 + border-radius: 10rpx;
  326 + padding: 20rpx 24rpx;
347 327
348 - .more {  
349 - font-size: 24rpx;  
350 - color: #999;  
351 - } 328 + .title {
  329 + color: #333;
  330 + font-size: 28rpx;
  331 + padding: 0 10rpx;
  332 + font-weight: bold;
  333 + margin: 0;
352 } 334 }
353 - }  
354 335
355 - .submit {  
356 - margin-top: 160rpx;  
357 - color: #fff;  
358 - width: 650rpx;  
359 - border: none; 336 + .more {
  337 + font-size: 24rpx;
  338 + color: #999;
  339 + }
360 } 340 }
  341 +}
361 342
362 - .loginPhone {  
363 - width: 750rpx;  
364 - padding: 0rpx 10rpx; 343 +.submit {
  344 + margin-top: 160rpx;
  345 + color: #fff;
  346 + width: 650rpx;
  347 + border: none;
  348 +}
365 349
366 - .form-row {  
367 - position: relative; 350 +.loginPhone {
  351 + width: 750rpx;
  352 + padding: 0rpx 10rpx;
368 353
369 - .input {  
370 - font-size: 34rpx;  
371 - line-height: 102rpx;  
372 - height: 94rpx;  
373 - box-sizing: border-box;  
374 - font-size: 30rpx;  
375 - padding: 0;  
376 - font-weight: bold;  
377 - } 354 + .form-row {
  355 + position: relative;
378 356
379 - .getvcode {  
380 - font-size: 26rpx;  
381 - height: 50rpx;  
382 - color: #333;  
383 - line-height: 52rpx;  
384 - background: #eee;  
385 - min-width: 188rpx;  
386 - text-align: center;  
387 - border-radius: 8rpx;  
388 - position: absolute;  
389 - top: 50%;  
390 - transform: translateY(-50%);  
391 - right: 17rpx;  
392 - z-index: 11; 357 + .input {
  358 + font-size: 34rpx;
  359 + line-height: 102rpx;
  360 + height: 94rpx;
  361 + box-sizing: border-box;
  362 + font-size: 30rpx;
  363 + padding: 0;
  364 + font-weight: bold;
  365 + }
393 366
394 - &.forhidden {  
395 - background: #eee;  
396 - color: #cccccc;  
397 - } 367 + .getvcode {
  368 + font-size: 26rpx;
  369 + height: 50rpx;
  370 + color: #333;
  371 + line-height: 52rpx;
  372 + background: #eee;
  373 + min-width: 188rpx;
  374 + text-align: center;
  375 + border-radius: 8rpx;
  376 + position: absolute;
  377 + top: 50%;
  378 + transform: translateY(-50%);
  379 + right: 17rpx;
  380 + z-index: 11;
  381 +
  382 + &.forhidden {
  383 + background: #eee;
  384 + color: #cccccc;
398 } 385 }
399 } 386 }
400 } 387 }
  388 +}
401 </style> 389 </style>
@@ -2,69 +2,121 @@ @@ -2,69 +2,121 @@
2 <view class="set-page"> 2 <view class="set-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view class="u-m-t-20">  
6 - <text style="color:#8f9ca2">基本资料</text>  
7 - </view> 5 + <view class="u-m-t-20"><text style="color:#8f9ca2">基本资料</text></view>
8 <view style="border: 0.1px solid #e4e4e4;margin-top: 20rpx;padding-left: 15rpx;"> 6 <view style="border: 0.1px solid #e4e4e4;margin-top: 20rpx;padding-left: 15rpx;">
9 - <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1"> 7 + <u--form labelPosition="left" :model="myInfoModel" :rules="rules" ref="myInfoFormRef">
10 <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.name" borderBottom ref="item1"> 8 <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.name" borderBottom ref="item1">
11 - <u--input placeholder="请输入真实姓名" v-model="model1.userInfo.name" border="none"></u--input> 9 + <u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.name" border="none"></u--input>
12 </u-form-item> 10 </u-form-item>
13 - <u-form-item labelWidth="80px" label="手机号码" prop="userInfo.name" borderBottom ref="item1">  
14 - <u--input placeholder="请输入手机号码" v-model="model1.userInfo.name" border="none"></u--input> 11 + <u-form-item labelWidth="80px" label="手机号码" prop="userInfo.phone" borderBottom ref="item1">
  12 + <u--input placeholder="请输入手机号码" v-model="myInfoModel.userInfo.phone" border="none"></u--input>
15 </u-form-item> 13 </u-form-item>
16 <u-form-item labelWidth="80px" label="用户账号 " prop="userInfo.account" borderBottom ref="item1"> 14 <u-form-item labelWidth="80px" label="用户账号 " prop="userInfo.account" borderBottom ref="item1">
17 - <u--input placeholder="请输入用户账号 " v-model="model1.userInfo.name" border="none"></u--input> 15 + <u--input placeholder="请输入用户账号 " v-model="myInfoModel.userInfo.account" border="none"></u--input>
18 </u-form-item> 16 </u-form-item>
19 - <u-form-item labelWidth="80px" label="邮箱地址" prop="userInfo.name" borderBottom ref="item1">  
20 - <u--input placeholder="请输入邮箱地址" v-model="model1.userInfo.name" border="none"></u--input> 17 + <u-form-item labelWidth="80px" label="邮箱地址" prop="userInfo.email" borderBottom ref="item1">
  18 + <u--input placeholder="请输入邮箱地址" v-model="myInfoModel.userInfo.email" border="none"></u--input>
21 </u-form-item> 19 </u-form-item>
22 - <u-form-item labelWidth="80px" label="有效期" prop="userInfo.name" borderBottom ref="item1">  
23 - <u--input placeholder="请选择有效期" v-model="model1.userInfo.name" border="none"></u--input> 20 + <u-form-item
  21 + @click="
  22 + showDate = true;
  23 + hideKeyboard();
  24 + "
  25 + labelWidth="80px"
  26 + label="有效期"
  27 + prop="userInfo.dateVal"
  28 + borderBottom
  29 + ref="item1"
  30 + >
  31 + <u--input v-model="myInfoModel.userInfo.dateVal" placeholder="请选择有效期" border="none"></u--input>
  32 + <u-datetime-picker
  33 + :formatter="formatter"
  34 + :show="showDate"
  35 + :value="datetime"
  36 + mode="dateTime"
  37 + closeOnClickOverlay
  38 + @confirm="dateConfirm"
  39 + @cancel="dateClose"
  40 + @close="dateClose"
  41 + ></u-datetime-picker>
24 </u-form-item> 42 </u-form-item>
25 </u--form> 43 </u--form>
26 </view> 44 </view>
27 45
28 - <view>  
29 - <button class="submit" size="default" @click="onSubmitFunc" :style="{background:PrimaryColor}">确认</button>  
30 - </view> 46 + <view><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
31 <!-- #ifdef MP --> 47 <!-- #ifdef MP -->
32 - <view class="u-m-t-40">  
33 - <text style="visibility: hidden;">#</text>  
34 - </view> 48 + <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
35 <!-- #endif --> 49 <!-- #endif -->
36 </view> 50 </view>
37 </template> 51 </template>
38 52
39 <script> 53 <script>
40 - export default {  
41 - data() {  
42 - return {  
43 - PrimaryColor: '#0079fe', //主题色  
44 - value: '',  
45 - model1: {  
46 - userInfo: {  
47 - name: '',  
48 - sex: '',  
49 - account: 'test9527'  
50 - },  
51 - },  
52 - }; 54 +export default {
  55 + data() {
  56 + return {
  57 + PrimaryColor: '#0079fe', //主题色
  58 + myInfoModel: {
  59 + userInfo: {
  60 + name: '',
  61 + phone: '',
  62 + account: 'test9527',
  63 + email: '',
  64 + dateVal: ''
  65 + }
  66 + },
  67 + showDate: false,
  68 + dateTime: Number(new Date())
  69 + };
  70 + },
  71 + methods: {
  72 + onSubmitFunc() {
  73 + console.log('确认');
  74 + console.log(this.myInfoModel.userInfo);
  75 + },
  76 + dateClose() {
  77 + this.showDate = false;
53 }, 78 },
54 - methods: {}, 79 + dateConfirm(e) {
  80 + this.showDate = false;
  81 + this.myInfoModel.userInfo.dateVal = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
  82 + },
  83 + //格式化日期
  84 + formatter(type, value) {
  85 + if (type === 'year') {
  86 + return `${value}年`;
  87 + }
  88 + if (type === 'month') {
  89 + return `${value}月`;
  90 + }
  91 + if (type === 'day') {
  92 + return `${value}日`;
  93 + }
  94 + if (type === 'hour') {
  95 + return `${value}时`;
  96 + }
  97 + if (type === 'minute') {
  98 + return `${value}分`;
  99 + }
  100 + return value;
  101 + },
  102 + //隐藏输入框
  103 + hideKeyboard() {
  104 + uni.hideKeyboard();
  105 + }
55 } 106 }
  107 +};
56 </script> 108 </script>
57 109
58 <style lang="scss" scoped> 110 <style lang="scss" scoped>
59 - .set-page {  
60 - padding: 0rpx 30rpx; 111 +.set-page {
  112 + padding: 0rpx 30rpx;
61 113
62 - .submit {  
63 - margin-top: 60rpx;  
64 - color: #fff;  
65 - width: 100%;  
66 - border: none;  
67 - border-radius: 40rpx;  
68 - } 114 + .submit {
  115 + margin-top: 60rpx;
  116 + color: #fff;
  117 + width: 100%;
  118 + border: none;
  119 + border-radius: 40rpx;
69 } 120 }
  121 +}
70 </style> 122 </style>
  1 +<template>
  2 + <view class="content">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view>
  6 + <view class="u-flex" style="justify-content: center;border-bottom: 0.1px solid #ffffff;"><text>今天晚上开会</text></view>
  7 + <view style="margin-top: 5rpx;">
  8 + <u-list height="140rpx">
  9 + <u-list-item v-for="(item, index) in notifyList" :key="index">
  10 + <u-cell @click="clickNotifyDetail(item.id)" :value="`${item.time}`" :title="`${item.name}`">
  11 + <u-avatar slot="icon" shape="circle" size="35" :src="item.imageUrl"></u-avatar>
  12 + </u-cell>
  13 + </u-list-item>
  14 + </u-list>
  15 + </view>
  16 + <view class=""><text>内容</text></view>
  17 + </view>
  18 + <f-tabbar></f-tabbar>
  19 + </view>
  20 +</template>
  21 +
  22 +<script>
  23 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  24 +
  25 +export default {
  26 + components: {
  27 + fTabbar
  28 + },
  29 + data() {
  30 + return {
  31 + notifyList: [
  32 + {
  33 + id: '1',
  34 + name: '系统管理员',
  35 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  36 + time: '2022-04-12'
  37 + }
  38 + ]
  39 + };
  40 + },
  41 + onLoad(e) {
  42 + // 隐藏原生的tabbar
  43 + uni.hideTabBar();
  44 + const item = e.item;
  45 + console.log(item);
  46 + }
  47 +};
  48 +</script>
  49 +
  50 +<style lang="scss" scoped></style>
  1 +<template>
  2 + <view class="notify-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view>
  6 + <u-list @scrolltolower="scrolltolower">
  7 + <u-list-item v-for="(item, index) in notifyList" :key="index">
  8 + <u-cell @click="clickNotifyDetail(item.id)" isLink :value="`${item.time}`" :title="`${item.name}`">
  9 + <u-avatar slot="icon" shape="circle" size="35" :src="item.imageUrl"></u-avatar>
  10 + </u-cell>
  11 + </u-list-item>
  12 + </u-list>
  13 + </view>
  14 + <f-tabbar></f-tabbar>
  15 + </view>
  16 +</template>
  17 +
  18 +<script>
  19 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  20 +
  21 +export default {
  22 + components: {
  23 + fTabbar
  24 + },
  25 + data() {
  26 + return {
  27 + notifyList: [
  28 + {
  29 + id: '1',
  30 + name: '今天晚上会议室开会',
  31 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  32 + time: '2022-04-12'
  33 + },
  34 + {
  35 + id: '2',
  36 + name: '今天晚上会议室开会',
  37 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  38 + time: '2022-04-12'
  39 + },
  40 + {
  41 + id: '3',
  42 + name: '今天晚上会议室开会',
  43 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  44 + time: '2022-04-12'
  45 + },
  46 + {
  47 + id: 'eww',
  48 + name: '今天晚上会议室开会',
  49 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  50 + time: '2022-04-12'
  51 + },
  52 + {
  53 + id: '4',
  54 + name: '今天晚上会议室开会',
  55 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  56 + time: '2022-04-12'
  57 + },
  58 + {
  59 + id: '1',
  60 + name: '今天晚上会议室开会',
  61 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  62 + time: '2022-04-12'
  63 + },
  64 + {
  65 + id: '5',
  66 + name: '今天晚上会议室开会',
  67 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  68 + time: '2022-04-12'
  69 + },
  70 + {
  71 + id: '6',
  72 + name: '今天晚上会议室开会',
  73 + imageUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
  74 + time: '2022-04-12'
  75 + }
  76 + ]
  77 + };
  78 + },
  79 + onLoad() {
  80 + // 隐藏原生的tabbar
  81 + uni.hideTabBar();
  82 + this.loadmore();
  83 + },
  84 + methods: {
  85 + scrolltolower() {
  86 + this.loadmore();
  87 + },
  88 + loadmore() {},
  89 + clickNotifyDetail(e) {
  90 + console.log(e);
  91 + uni.navigateTo({
  92 + url: './notifyDetail?item' + e
  93 + });
  94 + }
  95 + }
  96 +};
  97 +</script>
  98 +
  99 +<style lang="scss" scoped>
  100 +.notify-page {
  101 + min-height: 100vh;
  102 + background-color: #fff;
  103 +}
  104 +</style>

39.9 KB