login.vue 8.4 KB

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