index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <template>
  2. <view :style="colorStyle">
  3. <view class="authorize">
  4. <view class="pictrue">
  5. <image :src="logoUrl"></image>
  6. <view class="iconfont icon-guanbi4" @click='close'></view>
  7. </view>
  8. <view class="title">账号登录</view>
  9. <view class="info">
  10. <checkbox-group @change='ChangeIsDefault' v-if="agreement">
  11. <checkbox :checked="protocol ? true : false" />您已同意商城<text class="agree"
  12. @click="privacy('user')">《用户协议》</text>
  13. <text class="agree" @click="privacy('privacy')">《隐私协议》</text>
  14. </checkbox-group>
  15. <view v-else>
  16. 登录注册即同意商城
  17. <text class="agree" @click="privacy('user')">《用户协议》</text><text class="agree" @click="privacy('privacy')">《隐私协议》</text>
  18. </view>
  19. </view>
  20. <template v-if="routineAuthType.indexOf(1) != -1">
  21. <button hover-class="none" v-if="mp_is_new" @tap="userLogin"
  22. class="btn1">授权登录</button>
  23. <button v-else-if="canUseGetUserProfile && code" hover-class="none" @tap="getUserProfile"
  24. class="btn1">授权登录</button>
  25. <button v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo"
  26. class="btn1">授权登录</button>
  27. </template>
  28. <!-- <button v-if="routineAuthType.indexOf(2) != -1" hover-class="none" @click="isUp = true" class="btn2 acea-row row-center-wrapper">手机号登录</button> -->
  29. </view>
  30. <!-- <block v-if="isUp">
  31. <mobileLogin :isUp="isUp" @close="maskClose" :authKey="authKey" @wechatPhone="wechatPhone"></mobileLogin>
  32. </block> -->
  33. <block v-if="isPhoneBox">
  34. <!-- <routinePhone :logoUrl="logoUrl" :isPhoneBox="isPhoneBox" @close="bindPhoneClose" :authKey="authKey">
  35. </routinePhone> -->
  36. </block>
  37. <block>
  38. <editUserModal :isShow="isShow" @closeEdit="closeEdit" @editSuccess="editSuccess">
  39. </editUserModal>
  40. </block>
  41. <view class="mask" @click='close'></view>
  42. </view>
  43. </template>
  44. <script>
  45. const app = getApp();
  46. // import mobileLogin from '../loginMobile/index.vue';
  47. import routinePhone from '../loginMobile/routine_phone.vue';
  48. import editUserModal from '@/components/eidtUserModal/index.vue'
  49. import {
  50. getLogo,
  51. silenceAuth,
  52. wechatAuthV2,
  53. authLogin
  54. } from '@/api/public';
  55. import {
  56. LOGO_URL,
  57. EXPIRES_TIME,
  58. USER_INFO,
  59. STATE_R_KEY
  60. } from '@/config/cache';
  61. import {
  62. getUserInfo
  63. } from '@/api/user.js';
  64. import Routine from '@/libs/routine';
  65. import wechat from '@/libs/wechat';
  66. import colors from '@/mixins/color.js';
  67. export default {
  68. mixins:[colors],
  69. props: {
  70. isShowAuth: {
  71. type: Boolean,
  72. default: false
  73. }
  74. },
  75. data() {
  76. return {
  77. isShow: false,//判断获取用户头像是否出现
  78. isUp: false,
  79. phone: '',
  80. isPhoneBox: false,
  81. logoUrl: '',
  82. code: '',
  83. authKey: '',
  84. options: '',
  85. userInfo: {},
  86. codeNum: 0,
  87. canUseGetUserProfile: false,
  88. mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
  89. agreement: 0,
  90. protocol: false,
  91. routineAuthType: []
  92. };
  93. },
  94. components: {
  95. // mobileLogin,
  96. routinePhone,
  97. editUserModal
  98. },
  99. mounted(options) {
  100. if (uni.getUserProfile) {
  101. this.canUseGetUserProfile = true;
  102. }
  103. getLogo().then(res => {
  104. this.logoUrl = res.data.logo_url;
  105. this.agreement = res.data.store_user_agreement;
  106. this.routineAuthType = res.data.routine_auth_type;
  107. });
  108. let that = this;
  109. // #ifdef MP
  110. Routine.getCode()
  111. .then(code => {
  112. this.code = code
  113. })
  114. // #endif
  115. },
  116. methods: {
  117. close(){
  118. this.$emit('authColse', false);
  119. },
  120. privacy(type) {
  121. uni.navigateTo({
  122. url: "/pages/users/privacy/index?type=" + type
  123. })
  124. },
  125. ChangeIsDefault(e) {
  126. this.$set(this, 'protocol', !this.protocol);
  127. },
  128. // 小程序 22.11.8日删除getUserProfile 接口获取用户昵称头像
  129. userLogin() {
  130. if (!this.protocol && this.agreement) {
  131. return this.$util.Tips({
  132. title: '请先阅读并同意协议'
  133. });
  134. }
  135. Routine.getCode()
  136. .then(code => {
  137. uni.showLoading({
  138. title: '正在登录中'
  139. });
  140. authLogin({
  141. code,
  142. spread_spid: app.globalData.spid,
  143. spread_code: app.globalData.code
  144. }).then(res => {
  145. if (res.data.key !== undefined && res.data.key) {
  146. uni.hideLoading();
  147. this.authKey = res.data.key;
  148. this.isPhoneBox = true;
  149. } else {
  150. uni.hideLoading();
  151. let time = res.data.expires_time - this.$Cache.time();
  152. this.$store.commit('LOGIN', {
  153. token: res.data.token,
  154. time: time
  155. });
  156. this.getUserInfo(res.data.store_user_avatar || 0)
  157. }
  158. }).catch(err => {
  159. uni.hideLoading();
  160. uni.showToast({
  161. title: err,
  162. icon: 'none',
  163. duration: 2000
  164. });
  165. })
  166. })
  167. .catch(err => {
  168. uni.hideLoading();
  169. uni.showToast({
  170. title: err,
  171. icon: 'none',
  172. duration: 2000
  173. });
  174. });
  175. },
  176. editSuccess() {
  177. this.isShow = false
  178. this.$emit('onLoadFun');
  179. },
  180. closeEdit() {
  181. this.isShow = false
  182. this.$emit('onLoadFun');
  183. this.$util.Tips({
  184. title: '登录成功',
  185. icon: 'success'
  186. });
  187. },
  188. // 弹窗关闭
  189. // maskClose(store_user_avatar) {
  190. // this.isUp = false;
  191. // if (store_user_avatar) {
  192. // this.$emit('onLoadFun');
  193. // }
  194. // },
  195. bindPhoneClose(data) {
  196. if (data.isStatus) {
  197. uni.hideLoading();
  198. this.isPhoneBox = false;
  199. if(data.store_user_avatar){
  200. this.isShow = true
  201. }else{
  202. this.$emit('onLoadFun');
  203. this.$util.Tips({
  204. title: '登录成功',
  205. icon: 'success'
  206. });
  207. }
  208. // this.getUserInfo(data.store_user_avatar)
  209. // this.$util.Tips({
  210. // title: '登录成功',
  211. // icon: 'success'
  212. // }, {
  213. // tab: 3
  214. // });
  215. } else {
  216. this.isPhoneBox = false;
  217. }
  218. },
  219. // #ifdef MP
  220. /**
  221. * 获取个人用户信息
  222. */
  223. getUserInfo: function(store_user_avatar) {
  224. let that = this;
  225. getUserInfo().then(res => {
  226. uni.hideLoading();
  227. that.userInfo = res.data;
  228. that.$store.commit('SETUID', res.data.uid);
  229. that.$store.commit('UPDATE_USERINFO', res.data);
  230. if(store_user_avatar){
  231. that.isShow = true
  232. }else{
  233. that.$emit('onLoadFun');
  234. that.$util.Tips({
  235. title: '登录成功',
  236. icon: 'success'
  237. });
  238. }
  239. });
  240. },
  241. setUserInfo(e) {
  242. if (!this.protocol && this.agreement) {
  243. return this.$util.Tips({
  244. title: '请先阅读并同意协议'
  245. });
  246. }
  247. this.close();
  248. uni.showLoading({
  249. title: '正在登录中'
  250. });
  251. Routine.getCode()
  252. .then(code => {
  253. this.getWxUser(code);
  254. })
  255. .catch(res => {
  256. uni.hideLoading();
  257. });
  258. },
  259. //小程序授权api替换 getUserInfo
  260. getUserProfile() {
  261. if (!this.protocol && this.agreement) {
  262. return this.$util.Tips({
  263. title: '请先阅读并同意协议'
  264. });
  265. }
  266. this.close();
  267. uni.showLoading({
  268. title: '正在登录中'
  269. });
  270. let self = this;
  271. Routine.getUserProfile()
  272. .then(res => {
  273. let userInfo = res.userInfo;
  274. userInfo.code = this.code;
  275. userInfo.spread_spid = app.globalData.spid || this.$Cache.get('spid'); //获取推广人ID
  276. userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
  277. Routine.authUserInfo(userInfo)
  278. .then(res => {
  279. if (res.data.key !== undefined && res.data.key) {
  280. uni.hideLoading();
  281. self.authKey = res.data.key;
  282. self.isPhoneBox = true;
  283. } else {
  284. uni.hideLoading();
  285. let time = res.data.expires_time - self.$Cache.time();
  286. self.$store.commit('LOGIN', {
  287. token: res.data.token,
  288. time: time
  289. });
  290. this.getUserInfo()
  291. }
  292. })
  293. .catch(res => {
  294. uni.hideLoading();
  295. uni.showToast({
  296. title: res.msg,
  297. icon: 'none',
  298. duration: 2000
  299. });
  300. });
  301. })
  302. .catch(res => {
  303. uni.hideLoading();
  304. });
  305. },
  306. getWxUser(code) {
  307. let self = this;
  308. Routine.getUserInfo()
  309. .then(res => {
  310. let userInfo = res.userInfo;
  311. userInfo.code = code;
  312. userInfo.spread_spid = app.globalData.spid; //获取推广人ID
  313. userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
  314. Routine.authUserInfo(userInfo)
  315. .then(res => {
  316. if (res.data.key !== undefined && res.data.key) {
  317. uni.hideLoading();
  318. self.authKey = res.data.key;
  319. self.isPhoneBox = true;
  320. } else {
  321. uni.hideLoading();
  322. let time = res.data.expires_time - self.$Cache.time();
  323. self.$store.commit('LOGIN', {
  324. token: res.data.token,
  325. time: time
  326. });
  327. self.$emit('onLoadFun');
  328. self.$util.Tips({
  329. title: res.msg,
  330. icon: 'success'
  331. });
  332. }
  333. })
  334. .catch(res => {
  335. uni.hideLoading();
  336. uni.showToast({
  337. title: res.msg,
  338. icon: 'none',
  339. duration: 2000
  340. });
  341. });
  342. })
  343. .catch(res => {
  344. uni.hideLoading();
  345. });
  346. },
  347. // #endif
  348. }
  349. };
  350. </script>
  351. <style lang="scss">
  352. .mask{
  353. z-index: 99;
  354. }
  355. .authorize{
  356. width: 100%;
  357. height: 560rpx;
  358. background-color: #fff;
  359. border-radius: 48rpx 48rpx 0 0;
  360. position: fixed;
  361. left: 0;
  362. bottom: 0;
  363. z-index: 667;
  364. padding-top: 50rpx;
  365. text-align: center;
  366. .pictrue{
  367. width: 152rpx;
  368. height: 152rpx;
  369. border-radius: 50%;
  370. margin: 0 auto;
  371. position: relative;
  372. image{
  373. width: 100%;
  374. height: 100%;
  375. border-radius: 50%;
  376. border:1px solid #eee;
  377. }
  378. .iconfont{
  379. position: absolute;
  380. width: 52rpx;
  381. height: 52rpx;
  382. background: #EEE;
  383. border-radius: 50%;
  384. color: #888;
  385. font-size: 30rpx;
  386. text-align: center;
  387. line-height: 52rpx;
  388. right: -267rpx;
  389. top: -20rpx;
  390. }
  391. }
  392. .title{
  393. margin-top: 28rpx;
  394. font-size: 36rpx;
  395. color: #333333;
  396. }
  397. .info{
  398. color: #9E9E9E;
  399. font-size: 28rpx;
  400. margin-top: 14rpx;
  401. .agree{
  402. color: #333;
  403. }
  404. }
  405. .btn1{
  406. width: 536rpx;
  407. height: 86rpx;
  408. border-radius: 43rpx;
  409. color: #fff;
  410. text-align: center;
  411. line-height: 86rpx;
  412. margin: 50rpx auto 0 auto;
  413. background-color: var(--view-theme);
  414. font-size: 30rpx;
  415. }
  416. .btn2{
  417. width: 536rpx;
  418. height: 86rpx;
  419. border-radius: 43rpx;
  420. border: 2rpx solid var(--view-theme);
  421. color: var(--view-theme);
  422. font-size: 30rpx;
  423. margin: 40rpx auto 0 auto;
  424. }
  425. }
  426. </style>