login.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  1. <template>
  2. <view style="padding: 16px;font-size: 14px;">
  3. <tn-nav-bar fixed alpha customBack>
  4. <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
  5. <text class='icon tn-icon-left'></text>
  6. </view>
  7. </tn-nav-bar>
  8. <view style="text-align: center;padding: 80px 0">
  9. <image src="../../static/logo.png" style="width: 110px; height: 100px;"></image>
  10. <view style="margin: 8px 0;"><text style="font-size: 22px;font-weight: bold;">速立保</text></view>
  11. </view>
  12. <view :class="!agreeValue?'':'isHidden'" style="background: #00000088;
  13. display: inline;
  14. padding: 4px 10px;
  15. border-radius: 12px;
  16. border-bottom-left-radius: 0;
  17. color: #fff;font-size: 12px;margin-left: 12px;">
  18. 请先阅读并同意协议
  19. </view>
  20. <view style="margin-top:4px">
  21. <tn-checkbox v-model="agreeValue" activeColor="#1d60b1" name="选项1">
  22. 阅读并同意
  23. </tn-checkbox>
  24. <view style="display: inline;font-size: 15px;" @click="showInfo()">
  25. <view style="color: #1d60b1;display: inline;">《用户服务协议》</view>
  26. <view style="display: inline;color: #1d60b1;" @click="showInfo2()">《隐私政策》</view>
  27. </view>
  28. </view>
  29. <view class="" hover-class="button-hover" style="margin-top: 24px;" v-if="agreeValue">
  30. <button :disabled="!canSave" style="border-radius: 50rpx;width: 100%;background-color: #1d60b1;" type="primary" open-type="getPhoneNumber"
  31. @getphonenumber="getPhoneNumber">手机号快捷登录</button>
  32. </view>
  33. <view class="" hover-class="button-hover" style="margin-top: 24px;" v-if="!agreeValue">
  34. <button :disabled="!canSave" style="border-radius: 50rpx;width: 100%;background-color: #1d60b1;" type="primary" @click="showToast">手机号快捷登录</button>
  35. </view>
  36. <view @click="showLogin" style="text-align: center;margin-top: 24px;">验证码登录</view>
  37. </view>
  38. </template>
  39. <script>
  40. import request from '../../utils/request';
  41. export default {
  42. data() {
  43. return {
  44. agreeValue: false,
  45. value: [],
  46. range: [{
  47. "value": 0,
  48. "text": ""
  49. }],
  50. lxSessionKey: '',
  51. openId: '',
  52. unionid: '',
  53. canSave:true,
  54. }
  55. },
  56. onLoad() {
  57. // this.getLxSessionKey()
  58. },
  59. onShow(){
  60. if(uni.getStorageSync('agreeInfo')){
  61. this.agreeValue = true;
  62. }
  63. },
  64. methods: {
  65. goBack() {
  66. uni.navigateBack();
  67. },
  68. showToast() {
  69. uni.showToast({
  70. title: '请先阅读并同意协议',
  71. icon: 'none'
  72. })
  73. wx.vibrateShort();
  74. },
  75. showInfo() {
  76. if(uni.getStorageSync('agreeInfo')){
  77. uni.navigateTo({
  78. url: '/pages/login/info?counted=1'
  79. })
  80. return false;
  81. }else{
  82. uni.navigateTo({
  83. url: '/pages/login/info'
  84. })
  85. }
  86. // uni.navigateTo({
  87. // url:'/pages/webview/web-view?url='+'https://test-oss.lx-device.com/userFeedback/1732866523422nfH.docx',
  88. // })
  89. },
  90. showInfo2() {
  91. uni.navigateTo({
  92. url:'/pages/webview/web-view?url='+'https://test-oss.lx-device.com/userFeedback/1732866629261TEn.docx',
  93. })
  94. },
  95. showLogin(){
  96. uni.redirectTo({
  97. url:'/pages/login/loginByCode'
  98. })
  99. },
  100. change(e) {
  101. this.value = e.detail.data.length == 0 ? [] : [0];
  102. console.warn(this.value);
  103. console.log('e:', e);
  104. },
  105. getLxSessionKey() {
  106. const that = this;
  107. uni.login({
  108. success(res) {
  109. console.error(res);
  110. that.getOpenId(res.code);
  111. },
  112. fail(res) {
  113. console.error(res);
  114. uni.hideLoading();
  115. }
  116. });
  117. },
  118. getOpenId(code) {
  119. const that = this;
  120. request.post('/wxma/code2Session', {
  121. code: code,
  122. platType: "slb",
  123. mpType: "engineer",
  124. }).then(res => {
  125. console.error(res);
  126. if (res.success) {
  127. that.lxSessionKey = res.resultMap.lxSessionKey;
  128. that.openId = res.resultMap.openId;
  129. that.unionid = res.resultMap.unionid;
  130. }
  131. })
  132. },
  133. getPhoneNumber(e) {
  134. if (!e.detail.errMsg || e.detail.errMsg != "getPhoneNumber:ok") {
  135. // wx.showModal({
  136. // title: '提示',
  137. // content: e.detail.errMsg,
  138. // showCancel: false
  139. // })
  140. console.error(e)
  141. return;
  142. }
  143. this.getLxSessionKey();
  144. setTimeout(() => {
  145. this._getPhoneNumber(e)
  146. }, 1000)
  147. },
  148. _getPhoneNumber(e) {
  149. console.warn(e);
  150. let that = this;
  151. if (e.detail.errMsg === 'getPhoneNumber:ok') {
  152. wx.getUserInfo({
  153. success: function(res) {
  154. console.error(res);
  155. res.encryptedData = encodeURIComponent(e.detail.encryptedData);
  156. res.iv = e.detail.iv;
  157. res.lxSessionKey = that.lxSessionKey;
  158. that.getPhone(res)
  159. }
  160. })
  161. } else {
  162. uni.showToast({
  163. icon: 'none',
  164. title: e.detail.code ? '获取成功' : '拒绝了使用微信手机号'
  165. });
  166. }
  167. // if (res.code == 0) {
  168. // uni.showToast({
  169. // title: '绑定成功',
  170. // icon: 'success',
  171. // duration: 2000
  172. // })
  173. // this.$u.vuex('mobile', res.data)
  174. // this.form.mobile = res.data
  175. // } else {
  176. // uni.showModal({
  177. // title: '提示',
  178. // content: res.msg,
  179. // showCancel: false
  180. // })
  181. // }
  182. },
  183. getPhone(prarms) {
  184. let newParams = {};
  185. newParams.signature = prarms.signature;
  186. newParams.rawData = prarms.rawData;
  187. newParams.encryptedData = prarms.encryptedData;
  188. newParams.iv = prarms.iv;
  189. newParams.lxSessionKey = prarms.lxSessionKey;
  190. let that = this;
  191. request.post('/wxma/getWaUserPhone',
  192. newParams
  193. ).then(res => {
  194. console.error(res);
  195. if (res&&res.success) {
  196. this.ZhuceByPhone(res.resultMap.waUserPhoneInfo.phoneNumber);
  197. } else {
  198. uni.showToast({
  199. title: res.msg,
  200. icon: 'none'
  201. })
  202. }
  203. });
  204. console.warn(res);
  205. },
  206. async ZhuceByPhone(phone) {
  207. const that = this;
  208. let params = {
  209. phone: phone,
  210. openid: that.openId,
  211. unionid: that.unionid,
  212. };
  213. that.canSave = false;
  214. const res = await request.post('/wxma/register',
  215. params, {
  216. header: {
  217. 'content-type': 'application/x-www-form-urlencoded',
  218. platType: "slb",
  219. mpType: "engineer",
  220. }
  221. }
  222. );
  223. if (res.success) {
  224. //当前页直接登录
  225. // uni.navigateTo({
  226. // url:'/pages/index/auth'
  227. // })
  228. uni.showToast({
  229. title: '请稍后',
  230. icon: 'none'
  231. })
  232. this.loginAgain();
  233. } else {
  234. uni.showToast({
  235. title: res.msg,
  236. icon: 'none'
  237. })
  238. }
  239. console.warn(res);
  240. },
  241. loginAgain() {
  242. let that = this;
  243. uni.login({
  244. success(res) {
  245. that.loginByCode(res.code);
  246. },
  247. fail(res) {
  248. uni.hideLoading();
  249. }
  250. });
  251. },
  252. loginByCode(frontId) {
  253. const that = this;
  254. uni.setStorageSync('loginStatus', 'false');
  255. wx.getUserInfo({
  256. success: function(res) {
  257. console.error(res);
  258. request.post("/slbMpAutoLogin", {
  259. code: frontId,
  260. appType: 'ma',
  261. encryptedData: res.encryptedData,
  262. iv: res.iv
  263. }, {
  264. login: false,
  265. warn: false,
  266. loading: false
  267. }).then(res2 => {
  268. console.error(res2);
  269. if (res2.success) {
  270. //登录成功
  271. uni.setStorageSync('loginStatus', 'true');
  272. uni.setStorageSync('userMap', JSON.stringify(res2.resultMap));
  273. uni.setStorageSync('userNo', res2.resultMap.accountName);
  274. that.getUserInfo();
  275. } else {
  276. //
  277. uni.showToast({
  278. title: res2.msg,
  279. icon: 'none'
  280. })
  281. that.canSave = true;
  282. //登录失败,
  283. }
  284. console.error(res2);
  285. });
  286. }
  287. })
  288. },
  289. getUserInfo() {
  290. let that = this;
  291. request.post('/slbWxma/getPersonlInfo', {
  292. }).then(res => {
  293. that.canSave = true;
  294. if (res.success) {
  295. that.personInfo = res.resultMap.userInfo || {};
  296. uni.setStorageSync('userInfo', JSON.stringify(res.resultMap.userInfo));
  297. uni.navigateBack();
  298. }
  299. console.warn(res);
  300. })
  301. },
  302. }
  303. }
  304. </script>
  305. <style lang="scss" scoped>
  306. .isHidden {
  307. visibility: hidden;
  308. }
  309. .template-edit {}
  310. /* 胶囊*/
  311. .tn-custom-nav-bar__back {
  312. width: 60%;
  313. height: 100%;
  314. position: relative;
  315. display: flex;
  316. justify-content: space-evenly;
  317. align-items: center;
  318. box-sizing: border-box;
  319. // background-color: rgba(0, 0, 0, 0.15);
  320. border-radius: 1000rpx;
  321. border: 1rpx solid rgba(255, 255, 255, 0.5);
  322. // color: #FFFFFF;
  323. font-size: 18px;
  324. .icon {
  325. display: block;
  326. flex: 1;
  327. margin: auto;
  328. text-align: center;
  329. }
  330. &:before {
  331. content: " ";
  332. width: 1rpx;
  333. height: 110%;
  334. position: absolute;
  335. top: 22.5%;
  336. left: 0;
  337. right: 0;
  338. margin: auto;
  339. transform: scale(0.5);
  340. transform-origin: 0 0;
  341. pointer-events: none;
  342. box-sizing: border-box;
  343. opacity: 0.7;
  344. background-color: #FFFFFF;
  345. }
  346. }
  347. /* 底部悬浮按钮 start*/
  348. .tn-tabbar-height {
  349. min-height: 100rpx;
  350. height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  351. }
  352. .tn-footerfixed {
  353. position: fixed;
  354. width: 100%;
  355. bottom: calc(30rpx + env(safe-area-inset-bottom));
  356. z-index: 1024;
  357. box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  358. }
  359. /* 底部悬浮按钮 end*/
  360. </style>