简柏林 / thingskit-app · Commits

Commit 74ede03ad6ea8d9ea957cc9602d13822bef28039

Authored by fengwotao
1 parent f42f0c98

perf: app 优化我的个人中心代码

Inline Side-by-side
Showing 8 changed files with 404 additions and 474 deletions
@@ -3,11 +3,17 @@ const getPlateCustomApi = () => { @@ -3,11 +3,17 @@ const getPlateCustomApi = () => {
3 return uni.$u.http.get("/yt/app_design/get") 3 return uni.$u.http.get("/yt/app_design/get")
4 }; 4 };
5 5
6 -//第三方账号绑定API 6 +//第三方账号登录API
7 const getThirdLoginApi = (code) => { 7 const getThirdLoginApi = (code) => {
8 return uni.$u.http.get(`/yt/third/login/${code}`) 8 return uni.$u.http.get(`/yt/third/login/${code}`)
9 }; 9 };
10 10
  11 +//第三方账号绑定API
  12 +const postThirdLoginApi = (data = {}) => {
  13 + return uni.$u.http
  14 + .post("/yt/third/bind", data)
  15 +};
  16 +
11 //设置个人信息API 17 //设置个人信息API
12 const setUserInfoApi = () => { 18 const setUserInfoApi = () => {
13 return uni.$u.http.get("/yt/user/me/info") 19 return uni.$u.http.get("/yt/user/me/info")
@@ -76,5 +82,6 @@ export default { @@ -76,5 +82,6 @@ export default {
76 postPersonalInfoApi, 82 postPersonalInfoApi,
77 deleteBindApi, 83 deleteBindApi,
78 postPhoneCodeApi, 84 postPhoneCodeApi,
79 - postPhoneLoginApi 85 + postPhoneLoginApi,
  86 + postThirdLoginApi
80 } 87 }
  1 +<template>
  2 + <view>
  3 + <u-modal :showConfirmButton="false" :show="show" :title="title">
  4 + <view v-if="!bindPhone" class="login-phone">
  5 + <view class="form-row">
  6 + <u--input shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="请输入登录账号"
  7 + v-model="bindAccountForm.appUserKey"></u--input>
  8 + </view>
  9 + <view class="form-row item-bind">
  10 + <u--input class="input" shape="circle" prefixIcon="lock-fill" suffixIconStyle="color: #909399"
  11 + type="password" placeholder="请输入登录密码" v-model="bindAccountForm.appUserSecret"></u--input>
  12 + </view>
  13 + <view class="u-flex item-phone">
  14 + <view class="bind-phone-text" @click="openBindPhone">手机绑定</view>
  15 + </view>
  16 + </view>
  17 + <view v-else class="login-phone">
  18 + <view class="form-row">
  19 + <u--input shape="circle" class="input" type="text" v-model="bindPhoneForm.appUserKey"
  20 + placeholder="请输入手机号码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
  21 + </view>
  22 + <view class="form-row row-top">
  23 + <u--input shape="circle" class="input" type="text" v-model="bindPhoneForm.appUserSecret"
  24 + placeholder="请输入验证码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
  25 + <view style="color: #377dff" class="verify-code" :class="{ forhidden: readonly }"
  26 + @click="getVerifyCode">
  27 + {{ codeText }}
  28 + </view>
  29 + </view>
  30 + <view class="u-flex item-phone">
  31 + <view class="bind-phone-text" @click="openBindAccount">账号绑定</view>
  32 + </view>
  33 + </view>
  34 + <view class="bottom-content">
  35 + <view class="u-flex content">
  36 + <view class="cancel">
  37 + <u-button @click="$emit('cancelAccountModal')" type="info" shape="circle" text="取消"></u-button>
  38 + </view>
  39 + <view class="confrim">
  40 + <u-button @click="handleConfirm" type="primary" shape="circle" text="确认"></u-button>
  41 + </view>
  42 + </view>
  43 + </view>
  44 + </u-modal>
  45 + </view>
  46 +</template>
  47 +
  48 +<script>
  49 + var clear;
  50 + import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  51 + import fNavbar from '@/components/module/f-navbar/f-navbar';
  52 + import {
  53 + mapState,
  54 + mapMutations
  55 + } from 'vuex';
  56 + import {
  57 + loginPasswordReg,
  58 + useShowToast
  59 + } from '@/plugins/utils.js'
  60 + import api from '@/api/index.js'
  61 +
  62 + export default {
  63 + components: {
  64 + fTabbar,
  65 + fNavbar
  66 + },
  67 + props: {
  68 + show: {
  69 + type: Boolean,
  70 + default: false
  71 + }
  72 + },
  73 + data() {
  74 + return {
  75 + readonly: false,
  76 + codeText: '获取验证码',
  77 + bindPhone: false,
  78 + title: '绑定账号',
  79 + bindAccountForm: {
  80 + appUserKey: '',
  81 + appUserSecret: ''
  82 + },
  83 + bindPhoneForm: {
  84 + appUserKey: '',
  85 + appUserSecret: ''
  86 + },
  87 + };
  88 + },
  89 + onLoad(e) {
  90 + // 隐藏原生的tabbar
  91 + uni.hideTabBar();
  92 + this.getOpenId = getApp().globalData.openId;
  93 + },
  94 + methods: {
  95 + resetFunc() {
  96 + this.bindPhone = false;
  97 + for (let i in this.bindAccountForm) Reflect.set(this.bindAccountForm, i, "")
  98 + for (let i in this.bindPhoneForm) Reflect.set(this.bindPhoneForm, i, "")
  99 + },
  100 + async handleBindForm(loginMethod, bindAccountForm, toastText) {
  101 + const data = {
  102 + loginMethod,
  103 + ...bindAccountForm,
  104 + platformName: 'WECHAT',
  105 + thirdUserId: this.getOpenId
  106 + };
  107 + const res = await api.loginApi.postThirdLoginApi(data)
  108 + if (!res) return
  109 + // 储存登录信息
  110 + let tokenInfo = {
  111 + refreshToken: res.refreshToken,
  112 + isToken: res.token
  113 + };
  114 + let userInfo = {
  115 + ...tokenInfo,
  116 + token: true, //token用于判断是否登录
  117 + isThirdLogin: false,
  118 + isThirdLoginAndNoDind: true
  119 + };
  120 + if (userInfo.token) {
  121 + this.setUserInfo(userInfo);
  122 + }
  123 + uni.$u.toast(toastText);
  124 + this.saveUserInfo();
  125 + this.$emit('cancelAccountModal')
  126 + },
  127 + handleConfirm() {
  128 + //账号绑定
  129 + if (!this.bindPhone) {
  130 + const validateValue = Object.values(this.bindAccountForm)
  131 + if (!validateValue[0]) return uni.$u.toast("请输入登录账号~");
  132 + if (!validateValue[1]) return uni.$u.toast("请输入登录密码~");
  133 + if (!loginPasswordReg.test(validateValue[1])) return useShowModal(
  134 + "密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~", )
  135 + this.handleBindForm('ACCOUNT', this.bindAccountForm, '账号绑定成功~')
  136 + } else {
  137 + //手机绑定
  138 + const phoneRegular = /^1\d{10}$/;
  139 + const verifyCodeReg = /^\d{6}$/;
  140 + const validateValue = Object.values(this.bindPhoneForm)
  141 + if (!validateValue[0]) return uni.$u.toast("请输入手机号码~");
  142 + if (!validateValue[1]) return uni.$u.toast("请输入验证码~");
  143 + if (!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
  144 + if (!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
  145 + this.handleBindForm('PHONE', this.bindPhoneForm, '手机绑定成功~')
  146 + }
  147 + },
  148 + async saveUserInfo() {
  149 + const userInfoRes = await api.loginApi.setUserInfoApi()
  150 + const plateInfoRes = await api.loginApi.setPlateInfoApi()
  151 + Promise.all([userInfoRes, plateInfoRes]).then(res => {
  152 + this.setUserInfo(res[0])
  153 + this.setPlateInfo(res[1])
  154 + })
  155 + },
  156 + openBindPhone() {
  157 + this.bindPhone = true;
  158 + },
  159 + openBindAccount() {
  160 + this.bindPhone = false;
  161 + },
  162 + //验证码按钮文字状态
  163 + verifyCodeCountDown() {
  164 + const _this = this;
  165 + this.readonly = true;
  166 + this.codeText = '60S后重新获取';
  167 + var s = 60;
  168 + clear = setInterval(() => {
  169 + s--;
  170 + _this.codeText = s + 'S后重新获取';
  171 + if (s <= 0) {
  172 + clearInterval(clear);
  173 + _this.codeText = '获取验证码';
  174 + _this.readonly = false;
  175 + }
  176 + }, 1000);
  177 + },
  178 + //获取验证码
  179 + async getVerifyCode() {
  180 + const phoneRegular = /^1\d{10}$/;
  181 + if (this.readonly) useShowToast('验证码已发送~')
  182 + if (!this.bindPhoneForm.appUserKey) return useShowToast('请输入手机号~')
  183 + if (!phoneRegular.test(this.bindPhoneForm.appUserKey)) return useShowToast('手机号格式不正确~')
  184 + await api.loginApi.postCodeApi(this.bindPhoneForm.appUserKey)
  185 + this.verifyCodeCountDown(); //开始倒计时
  186 + },
  187 + }
  188 + };
  189 +</script>
  190 +
  191 +<style lang="scss" scoped>
  192 + @import '../static/personal.scss';
  193 +</style>
@@ -2,461 +2,174 @@ @@ -2,461 +2,174 @@
2 <view class="personal"> 2 <view class="personal">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view class="headBox">  
6 - <!-- #ifdef MP || APP-PLUS -->  
7 - <!-- 登录 --> 5 + <view class="head-box">
8 <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30"> 6 <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.isToken || userInfo.isThirdLogin"> 7 <block v-if="userInfo.isToken || userInfo.isThirdLogin">
10 - <view @click.top="openPersonalInfo" class="u-m-r-20">  
11 - <image class="avatar" mode="aspectFill"  
12 - :src="userInfo.avatar || thirdObj.avatarUrl || '../../static/logo.png'"></image> 8 + <view @click.top="navigatorPersonal" class="u-m-r-20">
  9 + <image class="avatar" mode="aspectFill" :src="setHeadImage"></image>
13 </view> 10 </view>
14 - <view class="u-flex-1" @click.top="openPersonalInfo"> 11 + <view class="u-flex-1" @click.top="navigatorPersonal">
15 <view class="nickName u-flex"> 12 <view class="nickName u-flex">
16 <view class="name u-m-r-10" v-if="userInfo.realName || userInfo.nickName"> 13 <view class="name u-m-r-10" v-if="userInfo.realName || userInfo.nickName">
17 - <text  
18 - style="#FFFFFF;font-size: 18px;">{{ userInfo.realName || userInfo.nickName }}</text> 14 + <text class="nick-name">{{ userInfo.realName || userInfo.nickName }}</text>
19 </view> 15 </view>
20 - <view v-if="userInfo.isThirdLogin" @click.stop="clickAccountFunc" class="detail"><text 16 + <view v-if="userInfo.isThirdLogin" @click.stop="openBindAccountModal" class="detail"><text
21 class="text">绑定账号</text></view> 17 class="text">绑定账号</text></view>
22 </view> 18 </view>
23 - <view style="color: #ffffff; font-size: 14px" v-if="userInfo.phoneNumber">  
24 - {{ handlePhoneFunc(userInfo.phoneNumber || '') }}</view> 19 + <view class="phone-number" v-if="userInfo.phoneNumber">
  20 + {{ handlePhoneFunc(userInfo.phoneNumber || '') }}
  21 + </view>
25 </view> 22 </view>
26 </block> 23 </block>
27 <block v-else> 24 <block v-else>
28 - <view class="u-m-r-20" @click="openLoginFunc"> 25 + <view class="u-m-r-20" @click="navigatorLogin">
29 <view class="avatar u-flex"> 26 <view class="avatar u-flex">
30 - <image class="avatar" mode="aspectFill" src="../../static/logo.png"></image> 27 + <image class="avatar" mode="aspectFill" src="/static/logo.png"></image>
31 </view> 28 </view>
32 </view> 29 </view>
33 <view class="u-flex-1"> 30 <view class="u-flex-1">
34 - <view @click="openLoginFunc" class="u-font-lg click-login login-btn">请点击登录</view> 31 + <view @click="navigatorLogin" class="u-font-lg click-login login-btn">请点击登录</view>
35 </view> 32 </view>
36 </block> 33 </block>
37 - <view v-if="userInfo.isToken" @click="openPersonalInfo"> 34 + <view v-if="userInfo.isToken" @click="navigatorPersonal">
38 <u-icon name="arrow-right" color="white" size="13"></u-icon> 35 <u-icon name="arrow-right" color="white" size="13"></u-icon>
39 </view> 36 </view>
40 </view> 37 </view>
41 - <!-- 登录 -->  
42 - <!-- #endif -->  
43 </view> 38 </view>
44 <view class="u-flex my-nav"> 39 <view class="u-flex my-nav">
45 <view class="nav-main"> 40 <view class="nav-main">
46 - <view @click="onTokenJump('/sysNotifySubPage/sysNotifyPage/systemNotify')" class="u-flex nav-link"> 41 + <view v-for="(item,index) in systemList" @click="onTokenJump(item.url)" class="u-flex nav-link">
47 <view class="nav-image"> 42 <view class="nav-image">
48 - <image class="image" src="../../static/sys-not.png"></image> 43 + <image class="image" :src="item.leftIcon"></image>
49 </view> 44 </view>
50 - <view class="nav-center"><text class="text">系统通知</text></view> 45 + <view class="nav-center"><text class="text">{{item.text}}</text></view>
51 <view class="nav-right"> 46 <view class="nav-right">
52 - <image class="image" src="../../static/arrow-right.png"></image>  
53 - </view>  
54 - </view>  
55 - <view @click="onTokenJump('/feedBackSubPage/feedback/feedback')" class="u-flex nav-link">  
56 - <view class="nav-image">  
57 - <image class="image" src="../../static/find-sugg.png"></image>  
58 - </view>  
59 - <view class="nav-center"><text class="text">意见反馈</text></view>  
60 - <view class="nav-right">  
61 - <image class="image" src="../../static/arrow-right.png"></image> 47 + <image class="image" :src="item.rightIcon"></image>
62 </view> 48 </view>
63 </view> 49 </view>
64 </view> 50 </view>
65 - <view @click="onLoginoutFunc" class="u-flex" style="justify-content: center; width: 600rpx">  
66 - <button class="submit" size="default" @click="onLoginoutFunc"><text class="text">退出账号</text></button> 51 + <view @click="openLogoutPopup" class="u-flex logout-text">
  52 + <button class="submit" size="default" @click="openLogoutPopup"><text class="text">退出账号</text></button>
67 </view> 53 </view>
68 </view> 54 </view>
69 <!-- 绑定账号 --> 55 <!-- 绑定账号 -->
70 <view> 56 <view>
71 - <u-modal :showConfirmButton="false" :show="show" :title="title">  
72 - <view v-if="!bindPhone" class="loginPhone">  
73 - <view class="form-row">  
74 - <u--input shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号"  
75 - v-model="bindAccountObj.appUserKey"></u--input>  
76 - </view>  
77 - <view class="form-row item-bind">  
78 - <u--input class="input" shape="circle" prefixIcon="lock-fill" suffixIconStyle="color: #909399"  
79 - type="password" placeholder="登录密码" v-model="bindAccountObj.appUserSecret"></u--input>  
80 - </view>  
81 - <view class="u-flex item-phone">  
82 - <view class="phone-hide">手机验证码登录</view>  
83 - <view class="bind-phone-text" @click="bindPhoneFunc">手机绑定</view>  
84 - </view>  
85 - </view>  
86 - <view v-else class="loginPhone">  
87 - <view class="form-row">  
88 - <u--input shape="circle" class="input" type="text" v-model="bindPhoneObj.appUserKey"  
89 - placeholder="请输入手机号码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>  
90 - </view>  
91 - <view class="form-row row-top">  
92 - <u--input shape="circle" class="input" type="text" v-model="bindPhoneObj.appUserSecret"  
93 - placeholder="请输入验证码" placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>  
94 - <view style="color: #377dff" class="getvcode" :class="{ forhidden: readonly }"  
95 - @click="getVcode">{{ codeText }}</view>  
96 - </view>  
97 - <view class="u-flex item-phone">  
98 - <view class="phone-hide">手机验证码登录</view>  
99 - <view class="bind-phone-text" @click="bindAccountFunc">账号绑定</view>  
100 - </view>  
101 - </view>  
102 - <view class="bottom-content">  
103 - <view class="u-flex content">  
104 - <view class="cancel">  
105 - <u-button @click="show = false" type="info" shape="circle" text="取消"></u-button>  
106 - </view>  
107 - <view class="confrim">  
108 - <u-button @click="bindConfirm" type="primary" shape="circle" text="确认"></u-button>  
109 - </view>  
110 - </view>  
111 - </view>  
112 - </u-modal> 57 + <bind-account-modal ref="bindAccountRef" :show="showBindAccount"
  58 + @cancelAccountModal="handleCancelAccountModal" />
113 </view> 59 </view>
114 <!-- 退出登录 --> 60 <!-- 退出登录 -->
115 <view> 61 <view>
116 <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom"> 62 <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom">
117 <view class="u-flex logout-main"> 63 <view class="u-flex logout-main">
118 - <view class="main"><text style="color: #999999">确定要退出当前账号？</text></view>  
119 - <view @click.top="logoutBtn" class="main"><text style="color: #f95e5a">退出登录</text></view>  
120 - <view class="main1"><text @click.top="closeLogout" style="color: #3478f7">取消</text></view> 64 + <view class="main"><text style="color: #999999">您确定要退出当前账号？</text></view>
  65 + <view @click="logoutBtn" class="main"><text style="color: #f95e5a">退出登录</text></view>
  66 + <view class="cancel-text"><text @click="closeLogoutPopup" style="color: #3478f7">取消</text>
  67 + </view>
121 </view> 68 </view>
122 </u-popup> 69 </u-popup>
123 </view> 70 </view>
124 - <!-- 退出登录 -->  
125 <f-tabbar></f-tabbar> 71 <f-tabbar></f-tabbar>
126 </view> 72 </view>
127 </template> 73 </template>
128 74
129 <script> 75 <script>
130 - var clear;  
131 - import base from '@/config/baseUrl';  
132 import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 76 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
133 import fNavbar from '@/components/module/f-navbar/f-navbar'; 77 import fNavbar from '@/components/module/f-navbar/f-navbar';
  78 + import bindAccountModal from './components/bindAccountModal.vue'
134 import { 79 import {
135 mapState, 80 mapState,
136 mapMutations 81 mapMutations
137 } from 'vuex'; 82 } from 'vuex';
138 - import { loginPasswordReg } from '@/plugins/utils.js' 83 + import {
  84 + useNavigateTo,
  85 + useShowModal
  86 + } from '@/plugins/utils.js'
139 87
140 export default { 88 export default {
141 components: { 89 components: {
142 fTabbar, 90 fTabbar,
143 - fNavbar 91 + fNavbar,
  92 + bindAccountModal
144 }, 93 },
145 data() { 94 data() {
146 return { 95 return {
147 - PrimaryColor: '#0079fe', //主题色 96 + showBindAccount: false,
148 showLogout: false, 97 showLogout: false,
149 - readonly: false,  
150 - codeText: '获取验证码',  
151 - tips: '验证码',  
152 - bindPhone: false,  
153 - show: false,  
154 - title: '绑定账号',  
155 - systemInfo: base.systemInfo,  
156 - PrimaryButtonColor: '#0079fe', //主题色  
157 - bindAccountObj: {  
158 - appUserKey: '',  
159 - appUserSecret: ''  
160 - },  
161 - bindPhoneObj: {  
162 - appUserKey: '',  
163 - appUserSecret: ''  
164 - },  
165 thirdObj: {}, 98 thirdObj: {},
166 - getOpenId: '',  
167 - mpOwnConfig: {} 99 + systemList: [{
  100 + url: '/sysNotifySubPage/sysNotifyPage/systemNotify',
  101 + text: '系统通知',
  102 + leftIcon: '/static/sys-not.png',
  103 + rightIcon: '/static/arrow-right.png'
  104 + },
  105 + {
  106 + url: '/feedBackSubPage/feedback/feedback',
  107 + text: '意见反馈',
  108 + leftIcon: '/static/find-sugg.png',
  109 + rightIcon: '/static/arrow-right.png'
  110 + }
  111 + ]
168 }; 112 };
169 }, 113 },
170 - mounted() {  
171 - this.getPlateForm();  
172 - },  
173 onLoad(e) { 114 onLoad(e) {
174 // 隐藏原生的tabbar 115 // 隐藏原生的tabbar
175 uni.hideTabBar(); 116 uni.hideTabBar();
176 - // if (e.obj != null) {  
177 - // const params = JSON.parse(decodeURIComponent(e.obj));  
178 - // // uni.$u.toast('eee', params.avatarUrl);  
179 - // this.thirdObj = params;  
180 - // }  
181 - this.getOpenId = getApp().globalData.openId;  
182 }, 117 },
183 computed: { 118 computed: {
184 - ...mapState(['userInfo', 'plateInfo']) 119 + ...mapState(['userInfo', 'plateInfo']),
  120 + setHeadImage() {
  121 + return this.userInfo.avatar || this.thirdObj.avatarUrl || '/static/logo.png'
  122 + }
185 }, 123 },
186 methods: { 124 methods: {
187 - //获取平台定制信息  
188 - getPlateForm() {  
189 - uni.$u.http.get('/yt/app_design/get').then(res => {  
190 - if (res) {  
191 - this.mpOwnConfig = {  
192 - bg: res.background,  
193 - logo: res.logo,  
194 - name: res.name  
195 - };  
196 - }  
197 - });  
198 - }, 125 + ...mapMutations(['emptyUserInfo', 'setUserInfo', 'setPlateInfo']),
199 handlePhoneFunc(e) { 126 handlePhoneFunc(e) {
200 - //前三后四位显示 127 + //手机号前三后四位显示
201 const result = /^(\d{3})\d{4}(\d{4})$/; 128 const result = /^(\d{3})\d{4}(\d{4})$/;
202 const y = e.toString().replace(result, '$1****$2'); 129 const y = e.toString().replace(result, '$1****$2');
203 return y; 130 return y;
204 }, 131 },
205 - ...mapMutations(['emptyUserInfo', 'setUserInfo', 'setPlateInfo']),  
206 // 跳转前判断登录 132 // 跳转前判断登录
207 onTokenJump(url) { 133 onTokenJump(url) {
208 this.judgeLogin(() => { 134 this.judgeLogin(() => {
209 - uni.navigateTo({  
210 - url: url  
211 - }); 135 + useNavigateTo(url)
212 }); 136 });
213 }, 137 },
214 onJump(url) { 138 onJump(url) {
215 - uni.navigateTo({  
216 - url: url  
217 - }); 139 + useNavigateTo(url)
218 }, 140 },
219 - openLoginFunc() {  
220 - uni.navigateTo({  
221 - url: '/publicLoginSubPage/public/login'  
222 - }); 141 + navigatorLogin() {
  142 + useNavigateTo('/publicLoginSubPage/public/login')
223 }, 143 },
224 - openPersonalInfo() {  
225 - let obj = { 144 + navigatorPersonal() {
  145 + let data = {
226 data: this.userInfo, 146 data: this.userInfo,
227 third: this.thirdObj 147 third: this.thirdObj
228 }; 148 };
229 - uni.navigateTo({  
230 - url: '/publicLoginSubPage/other/set?data=' + JSON.stringify(obj)  
231 - });  
232 - },  
233 - clickAccountFunc() {  
234 - this.show = true;  
235 - this.resetFunc();  
236 - },  
237 - resetFunc() {  
238 - this.bindPhone = false;  
239 - this.bindAccountObj = {};  
240 - this.bindPhoneObj = {};  
241 - },  
242 - bindConfirm() {  
243 - //需要绑定  
244 - if (!this.bindPhone) {  
245 - if (this.bindAccountObj.appUserKey == '' || this.bindAccountObj.appUserKey == undefined) {  
246 - return uni.$u.toast('请输入登录账号~');  
247 - }  
248 - if (this.bindAccountObj.appUserSecret == '') {  
249 - uni.showToast({  
250 - title: '请输入登录密码~',  
251 - icon: 'none'  
252 - });  
253 - return;  
254 - } else if (!loginPasswordReg.test(this.bindAccountObj.appUserSecret)) {  
255 - uni.showModal({  
256 - title: '提示',  
257 - content: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',  
258 - showCancel: false  
259 - });  
260 - return;  
261 - }  
262 - const postData = {  
263 - loginMethod: 'ACCOUNT',  
264 - ...this.bindAccountObj,  
265 - platformName: 'WECHAT',  
266 - thirdUserId: this.getOpenId  
267 - };  
268 - uni.$u.http  
269 - .post('/yt/third/bind', postData)  
270 - .then(res => {  
271 - if (res) {  
272 - this.show = false;  
273 - // 储存登录信息  
274 - let resObj = {  
275 - refreshToken: res.refreshToken,  
276 - isToken: res.token  
277 - };  
278 - let userInfo = {  
279 - ...resObj,  
280 - token: true, //token用于判断是否登录  
281 - isThirdLogin: false,  
282 - isThirdLoginAndNoDind: true  
283 - };  
284 - if (userInfo.token) {  
285 - this.setUserInfo(userInfo);  
286 - }  
287 - uni.showToast({  
288 - title: '账号绑定成功~',  
289 - icon: 'none'  
290 - });  
291 - this.saveUserInfo();  
292 - }  
293 - })  
294 - .catch(e => {  
295 - let msg = e.message || e.data?.message;  
296 - // if (msg == undefined) {  
297 - // msg = '';  
298 - // }  
299 - if (msg) uni.$u.toast(msg);  
300 - this.show = true;  
301 - });  
302 - } else {  
303 - const phoneRegular = /^1\d{10}$/;  
304 - if (this.bindPhoneObj.appUserKey == '') {  
305 - uni.showToast({  
306 - title: '请输入手机号码~',  
307 - icon: 'none'  
308 - });  
309 - return;  
310 - } else if (!phoneRegular.test(this.bindPhoneObj.appUserKey)) {  
311 - uni.showToast({  
312 - title: '手机号格式不正确~',  
313 - icon: 'none'  
314 - });  
315 - return;  
316 - }  
317 - if (this.bindPhoneObj.appUserSecret == '') {  
318 - uni.showToast({  
319 - title: '请输入验证码~',  
320 - icon: 'none'  
321 - });  
322 - return;  
323 - } else if (!/^\d{6}$/.test(this.bindPhoneObj.appUserSecret)) {  
324 - uni.showToast({  
325 - title: '验证码格式不正确~',  
326 - icon: 'none'  
327 - });  
328 - return;  
329 - }  
330 - const postData = {  
331 - loginMethod: 'PHONE',  
332 - ...this.bindPhoneObj,  
333 - platformName: 'WECHAT',  
334 - thirdUserId: this.getOpenId  
335 - };  
336 - uni.$u.http  
337 - .post('/yt/third/bind', postData)  
338 - .then(res => {  
339 - this.show = false;  
340 - // 储存登录信息  
341 - let resObj = {  
342 - refreshToken: res.refreshToken,  
343 - isToken: res.token  
344 - };  
345 - let userInfo = {  
346 - ...resObj,  
347 - token: true, //token用于判断是否登录  
348 - isThirdLogin: false,  
349 - isThirdLoginAndNoDind: true  
350 - };  
351 - if (userInfo.token) {  
352 - this.setUserInfo(userInfo);  
353 - }  
354 - uni.showToast({  
355 - title: '手机绑定成功~',  
356 - icon: 'none'  
357 - });  
358 - this.saveUserInfo();  
359 - })  
360 - .catch(e => {  
361 - let msg = e.message || e.data?.message;  
362 - // msg = '';  
363 - // }  
364 - if (msg) uni.$u.toast(msg);  
365 - this.show = true;  
366 - });  
367 - } 149 + useNavigateTo('/publicLoginSubPage/other/set?data=', data)
368 }, 150 },
369 - saveUserInfo() {  
370 - //储存个人信息  
371 - uni.$u.http.get('/yt/user/me/info').then(res => {  
372 - if (res) {  
373 - this.setUserInfo(res);  
374 - }  
375 - });  
376 - //储存平台信息  
377 - uni.$u.http.get('/yt/platform/get').then(res => {  
378 - if (res) {  
379 - this.setPlateInfo(res);  
380 - }  
381 - }); 151 + openBindAccountModal() {
  152 + this.showBindAccount = true;
  153 + this.$refs.bindAccountRef.resetFunc()
382 }, 154 },
383 - bindPhoneFunc() {  
384 - this.bindPhone = true;  
385 - },  
386 - bindAccountFunc() {  
387 - this.bindPhone = false;  
388 - },  
389 - //验证码按钮文字状态  
390 - getCodeState() {  
391 - const _this = this;  
392 - this.readonly = true;  
393 - this.codeText = '60S后重新获取';  
394 - var s = 60;  
395 - clear = setInterval(() => {  
396 - s--;  
397 - _this.codeText = s + 'S后重新获取';  
398 - if (s <= 0) {  
399 - clearInterval(clear);  
400 - _this.codeText = '获取验证码';  
401 - _this.readonly = false;  
402 - }  
403 - }, 1000);  
404 - },  
405 - //获取验证码  
406 - getVcode() {  
407 - if (this.readonly) {  
408 - uni.showToast({  
409 - title: '验证码已发送~',  
410 - icon: 'none'  
411 - });  
412 - return;  
413 - }  
414 - if (this.bindPhoneObj.appUserKey == '') {  
415 - uni.showToast({  
416 - title: '请输入手机号~',  
417 - icon: 'none'  
418 - });  
419 - return;  
420 - }  
421 - const phoneRegular = /^1\d{10}$/;  
422 - if (!phoneRegular.test(this.bindPhoneObj.appUserKey)) {  
423 - uni.showToast({  
424 - title: '手机号格式不正确~',  
425 - icon: 'none'  
426 - });  
427 - return;  
428 - }  
429 - let httpData = {};  
430 - // 获取验证码接口  
431 - uni.$u.http.post(`/yt/noauth/send_login_code/${this.bindPhoneObj.appUserKey}`).then(res => {  
432 - if (res) {  
433 - this.getCodeState(); //开始倒计时  
434 - }  
435 - });  
436 - },  
437 - onLoginoutFunc() { 155 + openLogoutPopup() {
438 this.showLogout = true; 156 this.showLogout = true;
439 }, 157 },
440 - closeLogout() { 158 + closeLogoutPopup() {
441 this.showLogout = false; 159 this.showLogout = false;
442 }, 160 },
443 logoutBtn() { 161 logoutBtn() {
444 - let that = this;  
445 - uni.showModal({  
446 - title: '退出登录',  
447 - content: '你确定退出登录吗？',  
448 - success(res) {  
449 - if (res.confirm) {  
450 - that.emptyUserInfo();  
451 - that.showLogout = false;  
452 - setTimeout(() => {  
453 - uni.navigateTo({  
454 - url: '/publicLoginSubPage/public/login'  
455 - });  
456 - }, 500);  
457 - } else if (res.cancel) {} 162 + const that = this
  163 + useShowModal('您确定要退出登录吗？', '退出登录', '确定').then(res => {
  164 + if (res.confirm) {
  165 + that.emptyUserInfo();
  166 + that.showLogout = false;
  167 + useNavigateTo('/publicLoginSubPage/public/login')
458 } 168 }
459 - }); 169 + })
  170 + },
  171 + handleCancelAccountModal() {
  172 + this.showBindAccount = false;
460 } 173 }
461 } 174 }
462 }; 175 };
@@ -464,4 +177,4 @@ @@ -464,4 +177,4 @@
464 177
465 <style lang="scss" scoped> 178 <style lang="scss" scoped>
466 @import './static/personal.scss'; 179 @import './static/personal.scss';
467 -</style> 180 +</style>
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 background-color: #ffffff; 2 background-color: #ffffff;
3 height: 100vh; 3 height: 100vh;
4 } 4 }
5 -.headBox { 5 +.head-box {
6 background: linear-gradient(90deg, #8c9ef2 0%, #5f6ee6 100%); 6 background: linear-gradient(90deg, #8c9ef2 0%, #5f6ee6 100%);
7 border-top: 0.01px solid #f5f5f5; 7 border-top: 0.01px solid #f5f5f5;
8 height: 250rpx; 8 height: 250rpx;
@@ -51,6 +51,10 @@ @@ -51,6 +51,10 @@
51 color: #fff; 51 color: #fff;
52 font-weight: bold; 52 font-weight: bold;
53 font-size: 32rpx; 53 font-size: 32rpx;
  54 + .nick-name{
  55 + color:#FFFFFF;
  56 + font-size: 18px;
  57 + }
54 } 58 }
55 59
56 .placardVip { 60 .placardVip {
@@ -62,7 +66,10 @@ @@ -62,7 +66,10 @@
62 border-radius: 4rpx; 66 border-radius: 4rpx;
63 } 67 }
64 } 68 }
65 - 69 + .phone-number{
  70 + color: #ffffff;
  71 + font-size: 14px;
  72 + }
66 .detail { 73 .detail {
67 color: #fff; 74 color: #fff;
68 font-size: 24rpx; 75 font-size: 24rpx;
@@ -97,6 +104,10 @@ @@ -97,6 +104,10 @@
97 justify-content: space-between; 104 justify-content: space-between;
98 height: 147rpx; 105 height: 147rpx;
99 } 106 }
  107 + .logout-text{
  108 + justify-content: center;
  109 + width: 600rpx
  110 + }
100 .submit { 111 .submit {
101 margin-top: 60rpx; 112 margin-top: 60rpx;
102 background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%); 113 background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
@@ -169,7 +180,7 @@ @@ -169,7 +180,7 @@
169 border: none; 180 border: none;
170 } 181 }
171 182
172 -.loginPhone { 183 +.login-phone {
173 .form-row { 184 .form-row {
174 position: relative; 185 position: relative;
175 // background: #f7f9ff; 186 // background: #f7f9ff;
@@ -186,7 +197,7 @@ @@ -186,7 +197,7 @@
186 font-weight: bold; 197 font-weight: bold;
187 } 198 }
188 199
189 - .getvcode { 200 + .verify-code {
190 font-size: 26rpx; 201 font-size: 26rpx;
191 height: 50rpx; 202 height: 50rpx;
192 color: #333; 203 color: #333;
@@ -218,11 +229,9 @@ @@ -218,11 +229,9 @@
218 height: 80rpx; 229 height: 80rpx;
219 } 230 }
220 .item-phone { 231 .item-phone {
221 - flex-direction: row; 232 + display: flex;
  233 + justify-content: center;
222 margin-top: 20rpx; 234 margin-top: 20rpx;
223 - .phone-hide {  
224 - visibility: hidden;  
225 - }  
226 .bind-phone-text { 235 .bind-phone-text {
227 color: #0079fe; 236 color: #0079fe;
228 font-size: 14px; 237 font-size: 14px;
@@ -256,7 +265,7 @@ @@ -256,7 +265,7 @@
256 text-align: center; 265 text-align: center;
257 line-height: 86rpx; 266 line-height: 86rpx;
258 } 267 }
259 - .main1 { 268 + .cancel-text {
260 width: 669rpx; 269 width: 669rpx;
261 height: 100rpx; 270 height: 100rpx;
262 text-align: center; 271 text-align: center;
@@ -166,7 +166,7 @@ export const useReLaunch = (url) => { @@ -166,7 +166,7 @@ export const useReLaunch = (url) => {
166 } 166 }
167 167
168 //封装uniapp showToast 168 //封装uniapp showToast
169 -export const useShowToast = (title, duration = 0, mask = false) => { 169 +export const useShowToast = (title, duration = 500, mask = false) => {
170 return new Promise((resolve, reject) => { 170 return new Promise((resolve, reject) => {
171 uni.showToast({ 171 uni.showToast({
172 title: title, 172 title: title,
@@ -184,7 +184,7 @@ export const useShowToast = (title, duration = 0, mask = false) => { @@ -184,7 +184,7 @@ export const useShowToast = (title, duration = 0, mask = false) => {
184 } 184 }
185 185
186 //封装uniapp showModal 186 //封装uniapp showModal
187 -export const useShowModal = (content, title = "提示", confirmText) => { 187 +export const useShowModal = (content, title = "提示", confirmText = "确定") => {
188 return new Promise((resolve, reject) => { 188 return new Promise((resolve, reject) => {
189 uni.showModal({ 189 uni.showModal({
190 title, 190 title,
@@ -8,7 +8,8 @@ @@ -8,7 +8,8 @@
8 <text class="text">手机验证码登录</text> 8 <text class="text">手机验证码登录</text>
9 <view class="circleStyle"></view> 9 <view class="circleStyle"></view>
10 </view> 10 </view>
11 - <view class="form-row"><u-input v-model="loginForm.phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input></view> 11 + <view class="form-row"><u-input v-model="loginForm.phone" type="number" placeholder="请输入手机号码"
  12 + border="bottom"></u-input></view>
12 <view class="form-row"> 13 <view class="form-row">
13 <u-input type="number" v-model="loginForm.verifyCode" placeholder="请输入验证码" border="bottom"> 14 <u-input type="number" v-model="loginForm.verifyCode" placeholder="请输入验证码" border="bottom">
14 <template slot="suffix"> 15 <template slot="suffix">
@@ -17,7 +18,9 @@ @@ -17,7 +18,9 @@
17 </u-input> 18 </u-input>
18 </view> 19 </view>
19 <button class="submit" size="default" @click="onSubmit"><text class="text">登录</text></button> 20 <button class="submit" size="default" @click="onSubmit"><text class="text">登录</text></button>
20 - <view class="u-flex account-style"><view class="content" @click="openAccountFunc">账号密码登录</view></view> 21 + <view class="u-flex account-style">
  22 + <view class="content" @click="openAccountFunc">账号密码登录</view>
  23 + </view>
21 <view class="circleStyleBottom"></view> 24 <view class="circleStyleBottom"></view>
22 </view> 25 </view>
23 </view> 26 </view>
@@ -25,108 +28,113 @@ @@ -25,108 +28,113 @@
25 </template> 28 </template>
26 29
27 <script> 30 <script>
28 -var clear;  
29 -import { mapState, mapMutations, mapActions } from 'vuex';  
30 -import { useShowToast,useNavigateTo } from '@/plugins/utils.js'  
31 -import api from '@/api' 31 + var clear;
  32 + import {
  33 + mapState,
  34 + mapMutations,
  35 + mapActions
  36 + } from 'vuex';
  37 + import {
  38 + useShowToast,
  39 + useNavigateTo
  40 + } from '@/plugins/utils.js'
  41 + import api from '@/api'
32 42
33 -export default {  
34 - data() {  
35 - return {  
36 - loginForm:{  
37 - phone: '',  
38 - verifyCode: '' 43 + export default {
  44 + data() {
  45 + return {
  46 + loginForm: {
  47 + phone: '',
  48 + verifyCode: ''
  49 + },
  50 + readonly: false,
  51 + codeText: '发送验证码',
  52 + };
  53 + },
  54 + methods: {
  55 + ...mapMutations(['setUserInfo']),
  56 + ...mapActions(['updateBadgeTotal']),
  57 + //验证码按钮文字状态
  58 + codeCountdownText() {
  59 + const _this = this;
  60 + this.readonly = true;
  61 + this.codeText = '60s后重新获取';
  62 + var s = 60;
  63 + clear = setInterval(() => {
  64 + s--;
  65 + _this.codeText = s + 's后重新获取';
  66 + if (s <= 0) {
  67 + clearInterval(clear);
  68 + _this.codeText = '发送验证码';
  69 + _this.readonly = false;
  70 + }
  71 + }, 1000);
39 }, 72 },
40 - readonly: false,  
41 - codeText: '发送验证码',  
42 - };  
43 - },  
44 - methods: {  
45 - ...mapMutations(['setUserInfo']),  
46 - ...mapActions(['updateBadgeTotal']),  
47 - //验证码按钮文字状态  
48 - codeCountdownText() {  
49 - const _this = this;  
50 - this.readonly = true;  
51 - this.codeText = '60s后重新获取';  
52 - var s = 60;  
53 - clear = setInterval(() => {  
54 - s--;  
55 - _this.codeText = s + 's后重新获取';  
56 - if (s <= 0) {  
57 - clearInterval(clear);  
58 - _this.codeText = '发送验证码';  
59 - _this.readonly = false; 73 + //获取验证码
  74 + async getVerifyCode() {
  75 + const phoneRegular = /^1\d{10}$/;
  76 + if (this.readonly) {
  77 + useShowToast('验证码已发送~')
60 } 78 }
61 - }, 1000);  
62 - },  
63 - //获取验证码  
64 - async getVerifyCode() {  
65 - const phoneRegular = /^1\d{10}$/;  
66 - if (this.readonly) {  
67 - useShowToast('验证码已发送~')  
68 - }  
69 - if (!this.loginForm.phone) {  
70 - return useShowToast('请输入手机号~')  
71 - }  
72 - if (!phoneRegular.test(this.loginForm.phone)) {  
73 - return useShowToast('手机号格式不正确~')  
74 - }  
75 - // 获取验证码接口  
76 - const res = await api.loginApi.postPhoneCodeApi(this.loginForm.phone)  
77 - if (res) { 79 + if (!this.loginForm.phone) {
  80 + return useShowToast('请输入手机号~')
  81 + }
  82 + if (!phoneRegular.test(this.loginForm.phone)) {
  83 + return useShowToast('手机号格式不正确~')
  84 + }
  85 + // 获取验证码接口
  86 + await api.loginApi.postPhoneCodeApi(this.loginForm.phone)
78 this.codeCountdownText(); //开始倒计时 87 this.codeCountdownText(); //开始倒计时
79 - }  
80 - },  
81 - async onSubmit() {  
82 - const phoneRegular = /^1\d{10}$/;  
83 - const verifyCodeReg=/^\d{6}$/;  
84 - const validateValue = Object.values(this.loginForm)  
85 - if(!validateValue[0]) return uni.$u.toast("请输入手机号码~");  
86 - if(!validateValue[1]) return uni.$u.toast("请输入验证码~");  
87 - if(!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");  
88 - if(!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");  
89 - const res = await api.loginApi.postPhoneLoginApi(this.loginForm)  
90 - if (res) {  
91 - // 储存登录信息  
92 - let tokenInfo = {  
93 - refreshToken: res.refreshToken,  
94 - isToken: res.token  
95 - };  
96 - let userInfo = {  
97 - ...tokenInfo,  
98 - token: true, //token用于判断是否登录  
99 - isThirdLogin: false  
100 - };  
101 - if (userInfo.token) {  
102 - this.setUserInfo(userInfo); 88 + },
  89 + async onSubmit() {
  90 + const phoneRegular = /^1\d{10}$/;
  91 + const verifyCodeReg = /^\d{6}$/;
  92 + const validateValue = Object.values(this.loginForm)
  93 + if (!validateValue[0]) return uni.$u.toast("请输入手机号码~");
  94 + if (!validateValue[1]) return uni.$u.toast("请输入验证码~");
  95 + if (!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
  96 + if (!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
  97 + const res = await api.loginApi.postPhoneLoginApi(this.loginForm)
  98 + if (res) {
  99 + // 储存登录信息
  100 + let tokenInfo = {
  101 + refreshToken: res.refreshToken,
  102 + isToken: res.token
  103 + };
  104 + let userInfo = {
  105 + ...tokenInfo,
  106 + token: true, //token用于判断是否登录
  107 + isThirdLogin: false
  108 + };
  109 + if (userInfo.token) {
  110 + this.setUserInfo(userInfo);
  111 + }
  112 + useShowToast('登录成功~').then(async (res) => {
  113 + this.saveUserInfo();
  114 + await this.getAlarmTotalData();
  115 + useReLaunch("/pages/personal/personal")
  116 + });
103 } 117 }
104 - useShowToast('登录成功~').then(async (res) => {  
105 - this.saveUserInfo();  
106 - await this.getAlarmTotalData();  
107 - useReLaunch("/pages/personal/personal")  
108 - }); 118 + },
  119 + async getAlarmTotalData() {
  120 + const res = await await api.loginApi.getAlarmTotalApi()
  121 + if (!res) return
  122 + //异步实时更新告警徽标数
  123 + this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
  124 + },
  125 + async saveUserInfo() {
  126 + //储存个人信息
  127 + const res = await api.loginApi.setUserInfoApi()
  128 + if (!res) return
  129 + this.setUserInfo(res);
  130 + },
  131 + openAccountFunc() {
  132 + useNavigateTo('../public/login')
109 } 133 }
110 - },  
111 - async getAlarmTotalData() {  
112 - const res = await await api.loginApi.getAlarmTotalApi()  
113 - if(!res)return  
114 - //异步实时更新告警徽标数  
115 - this.updateBadgeTotal(res.totalAlarm?.activedAlarm);  
116 - },  
117 - async saveUserInfo() {  
118 - //储存个人信息  
119 - const res=await api.loginApi.setUserInfoApi()  
120 - if(!res)return  
121 - this.setUserInfo(res);  
122 - },  
123 - openAccountFunc() {  
124 - useNavigateTo('../public/login')  
125 } 134 }
126 - }  
127 -}; 135 + };
128 </script> 136 </script>
129 137
130 <style lang="scss" scoped> 138 <style lang="scss" scoped>
131 -@import './static/code.scss';  
132 -</style> 139 + @import './static/code.scss';
  140 +</style>
@@ -157,7 +157,7 @@ @@ -157,7 +157,7 @@
157 }, 157 },
158 onLoad(e) { 158 onLoad(e) {
159 if (e.data !== null) { 159 if (e.data !== null) {
160 - let params = JSON.parse(e.data); 160 + let params = JSON.parse(decodeURIComponent(e.data));
161 for (let i in this.myInfoModel) Reflect.set(this.myInfoModel, i, params.data[i]) 161 for (let i in this.myInfoModel) Reflect.set(this.myInfoModel, i, params.data[i])
162 this.info = params; 162 this.info = params;
163 this.avatar = params.data.avatar == undefined ? '/static/logo.png' : params.data.avatar; 163 this.avatar = params.data.avatar == undefined ? '/static/logo.png' : params.data.avatar;
@@ -180,7 +180,7 @@ @@ -180,7 +180,7 @@
180 const plateInfoRes = await api.loginApi.setPlateInfoApi() 180 const plateInfoRes = await api.loginApi.setPlateInfoApi()
181 Promise.all([userInfoRes,plateInfoRes]).then(res=>{ 181 Promise.all([userInfoRes,plateInfoRes]).then(res=>{
182 this.setUserInfo(res[0]) 182 this.setUserInfo(res[0])
183 - this.setPlateInfo(res[0]) 183 + this.setPlateInfo(res[1])
184 }) 184 })
185 }, 185 },
186 async getAlarmTotalData() { 186 async getAlarmTotalData() {