简柏林 / 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 1 ## ThingsKit物联网小程序、app
  2 +## 兼容小程序、app、h5
2 3
3 4 ### 项目结构
4 5
... ... @@ -13,10 +14,10 @@
13 14 │   ├── pay.js // 支付js
14 15 │   └── request.js // 接口配置(基于uview配置)
15 16 ├── pages // 项目页面
16   -│   ├── goods // 商品列表
17 17 │   ├── index // 首页
18   -│   ├── personal // 个人中心
19 18 │   └── device // 设备
  19 +│   └── alert // 告警
  20 +│   └── personal // 我的
20 21 ├── plugins // 功能js
21 22 ├── static // 图片文件
22 23 ├── store // vuex
... ...
... ... @@ -57,10 +57,11 @@
57 57 },
58 58 "quickapp" : {},
59 59 "mp-weixin" : {
60   - "appid" : "",
  60 + "appid" : "wx0ad61d7bf6808e02",
61 61 "setting" : {
62 62 "urlCheck" : false,
63   - "minified" : true
  63 + "minified" : true,
  64 + "es6" : true
64 65 },
65 66 "usingComponents" : true,
66 67 "permission" : {
... ...
... ... @@ -48,6 +48,22 @@
48 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 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 4 <public-module></public-module>
5 5 <view class="f__login">
6 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 11 <view class="form-row">
8 12 <input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
9 13 placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
... ... @@ -13,7 +17,13 @@
13 17 placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
14 18 <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
15 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 27 </view>
18 28 </view>
19 29 </view>
... ... @@ -23,9 +33,8 @@
23 33 export default {
24 34 data() {
25 35 return {
26   - PrimaryColor: '#0079fe', //主题色
27 36 readonly: false,
28   - codeText: '获取验证码',
  37 + codeText: '发送验证码',
29 38 phone: '', //号码
30 39 vCode: '', //验证码
31 40 }
... ... @@ -42,7 +51,7 @@
42 51 _this.codeText = s + 'S后重新获取';
43 52 if (s <= 0) {
44 53 clearInterval(clear);
45   - _this.codeText = '获取验证码';
  54 + _this.codeText = '发送验证码';
46 55 _this.readonly = false;
47 56 }
48 57 }, 1000);
... ... @@ -78,12 +87,21 @@
78 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 98 </script>
85 99
86 100 <style lang="scss" scoped>
  101 + .code-page{
  102 + min-height: 100vh;
  103 + background-color: #fff;
  104 + }
87 105 .f__login {
88 106 padding: 48rpx 32rpx;
89 107 border-radius: 18rpx 18rpx 0 0;
... ... @@ -92,10 +110,19 @@
92 110 }
93 111
94 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 123 .form-row {
96 124 position: relative;
97 125 border-bottom: 1rpx solid #e8e8e8;
98   -
99 126 .input {
100 127 font-size: 34rpx;
101 128 line-height: 102rpx;
... ... @@ -132,9 +159,24 @@
132 159
133 160 .submit {
134 161 margin-top: 60rpx;
135   - color: #fff;
136 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 182 </style>
... ...
... ... @@ -2,39 +2,40 @@
2 2 <view class="find-password-page">
3 3 <public-module></public-module>
4 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 6 <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
8 7 </view>
9 8 <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
10 9 <view class="loginPhone">
11 10 <view class="form-row">
12 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 13 </view>
  14 + <view style="height: 25rpx;"></view>
15 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 18 <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
19 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 23 </view>
23 24 </view>
24 25 <view v-else style="margin-top: 40rpx;" class="f__login">
25 26 <view class="loginPhone">
26 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 30 </view>
  31 + <view style="height: 25rpx;"></view>
31 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 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 39 </view>
39 40 </view>
40 41 </view>
... ... @@ -44,12 +45,13 @@
44 45 export default {
45 46 data() {
46 47 return {
47   - PrimaryColor: '#0079fe', //主题色
48 48 readonly: false,
49   - codeText: '获取验证码',
  49 + codeText: '发送验证码',
50 50 phone: '', //号码
51 51 vCode: '', //验证码
52   - nextStatus: false
  52 + nextStatus: false,
  53 + password:'',
  54 + rePassword:''
53 55 }
54 56 },
55 57 methods: {
... ... @@ -64,7 +66,7 @@
64 66 _this.codeText = s + 'S后重新获取';
65 67 if (s <= 0) {
66 68 clearInterval(clear);
67   - _this.codeText = '获取验证码';
  69 + _this.codeText = '发送验证码';
68 70 _this.readonly = false;
69 71 }
70 72 }, 1000);
... ... @@ -103,21 +105,28 @@
103 105 onNextSubmit() {
104 106 this.nextStatus = true
105 107 },
  108 + showPhone(){
  109 + this.nextStatus = false
  110 + },
106 111 onSubmit() {}
107 112 }
108 113 }
109 114 </script>
110 115
111 116 <style lang="scss" scoped>
  117 + .find-password-page{
  118 + min-height: 100vh;
  119 + background-color: #fff;
  120 + }
112 121 .top {
113 122 width: 750rpx;
114 123 height: 100rpx;
115   - border: 1px solid #e8e8e8;
  124 + border: 0.1px solid #f7f9ff;
116 125
117 126 .item {
118 127 width: 375rpx;
119 128 height: 100rpx;
120   - border: 1px solid #e8e8e8;
  129 + border: 0.1px solid #f7f9ff;
121 130 text-align: center;
122 131 line-height: 90rpx;
123 132 }
... ... @@ -129,8 +138,9 @@
129 138 .loginPhone {
130 139 .form-row {
131 140 position: relative;
132   - border-bottom: 1rpx solid #e8e8e8;
133   -
  141 + border-radius: 32px;
  142 + border: 1px solid #F7F9FF;
  143 + background: #F7F9FF;
134 144 .input {
135 145 font-size: 34rpx;
136 146 line-height: 102rpx;
... ... @@ -138,7 +148,7 @@
138 148 width: 100%;
139 149 box-sizing: border-box;
140 150 font-size: 30rpx;
141   - padding: 0;
  151 + padding: 0 34rpx;
142 152 font-weight: bold;
143 153 }
144 154
... ... @@ -147,7 +157,7 @@
147 157 height: 80rpx;
148 158 color: #333;
149 159 line-height: 80rpx;
150   - background: #eee;
  160 + // background: #eee;
151 161 min-width: 188rpx;
152 162 text-align: center;
153 163 border-radius: 8rpx;
... ... @@ -158,8 +168,8 @@
158 168 z-index: 11;
159 169
160 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 177
168 178 .submit {
169 179 margin-top: 60rpx;
170   - color: #fff;
171 180 width: 100%;
172   - border: none;
  181 + background: #377DFF;
  182 + border-radius: 48px;
173 183 }
174 184 }
175 185 }
... ...
... ... @@ -2,34 +2,39 @@
2 2 <view class="login-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 11 </view>
8 12 <view class="f__login">
9 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 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 27 </view>
  28 + <button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button>
21 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 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 38 </view>
34 39 </view>
35 40 </view>
... ... @@ -37,65 +42,87 @@
37 42 </template>
38 43
39 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 66 </script>
63 67
64 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 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 128 </style>
... ...
... ... @@ -7,91 +7,87 @@
7 7 <!-- 登录 -->
8 8 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
9 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 11 <view class="u-flex-1" @click="onJump('/pages/personal/set')">
14 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 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 16 <view class="detail" v-else>手机号:未绑定</view>
19 17 </view>
20 18 </block>
21 19 <block v-else>
22 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 22 </view>
27 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 25 <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
31 26 </view>
32 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 29 </view>
37 30 <!-- #endif -->
38 31 <!-- #ifndef MP -->
39 32 <!-- 登录 -->
40 33 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
41 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 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 39 <view class="detail" v-else>手机号:未绑定</view>
49 40 </view>
50 41 </block>
51 42 <block v-else>
52 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 45 </view>
57 46 <view class="u-flex-1">
58 47 <view @click="openLoginFunc" class="u-font-lg" style="color: black;font-weight: bold;">登录</view>
59 48 <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
60 49 </view>
61 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 52 </view>
66 53 <!-- #endif -->
67 54 </view>
68 55 <view style="height: 50rpx;"></view>
69 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 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 66 <u-icon name="arrow-right" size="14" color="#333"></u-icon>
75 67 </view>
76 68 </view>
77 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 71 </view>
81 72 <!-- 绑定账号 -->
82 73 <view>
83 74 <u-modal confirmText="绑定账号" @confirm="bindConfirm" :show="show" :title="title">
84 75 <view v-if="!bindPhone" class="loginPhone">
85 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 78 </view>
90 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 91 </view>
96 92 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
97 93 <view style="visibility: hidden;">手机验证码登录</view>
... ... @@ -100,13 +96,11 @@
100 96 </view>
101 97 <view v-else class="loginPhone">
102 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 100 </view>
106 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 104 </view>
111 105 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
112 106 <view style="visibility: hidden;">手机验证码登录</view>
... ... @@ -118,20 +112,14 @@
118 112 <!-- 退出登录 -->
119 113 <view>
120 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 117 <text style="color:#999999">确定要退出当前账号？</text>
126 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 120 <text style="color:#f95e5a">退出登录</text>
130 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 123 </view>
136 124 </u-popup>
137 125 </view>
... ... @@ -140,262 +128,262 @@
140 128 </template>
141 129
142 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 157 title: '系统通知',
171   - url: '',
  158 + url: '../systemNotify/systemNotify',
172 159 icon: 'setting-fill'
173   - }, {
  160 + },
  161 + {
174 162 title: '意见反馈',
175   - url: '',
  163 + url: '../feedback/feedback',
176 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 259 </script>
270 260
271 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 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 389 </style>
... ...
... ... @@ -2,69 +2,121 @@
2 2 <view class="set-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 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 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 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 13 </u-form-item>
16 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 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 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 42 </u-form-item>
25 43 </u--form>
26 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 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 49 <!-- #endif -->
36 50 </view>
37 51 </template>
38 52
39 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 108 </script>
57 109
58 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 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