wxLogin.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. <template>
  2. <view class="content">
  3. <!-- #ifdef MP -->
  4. <view class="flex-center">
  5. <view class="logo-img-box">
  6. <image class="logo-img" src="../../static/image/logo.png" mode="scaleToFill"></image>
  7. <!-- -->
  8. <button class="userInfo flex-center" type="warn" @tap="loding?'':userInfoData()">
  9. <!-- <image class="icon margin-r-10" src="../../static/icon/weichat.png" mode="widthFix"></image> -->
  10. <text>手机号授权登录</text>
  11. </button>
  12. <agreement @checkedChange='changeChecked'></agreement>
  13. </view>
  14. </view>
  15. <view class="Mask" v-show="MaskShow">
  16. <view class="Mask-box">
  17. <view class="title">申请获取您的手机号</view>
  18. <view class="text">为了方便您的取货和我们的送货,并获取更多优惠活动,需要您的手机授权</view>
  19. <view class="btn_box">
  20. <button class="weixin" @click="outUser">取消</button>
  21. <button class="weixin" open-type="getPhoneNumber" @getphonenumber="PhoneNumber">授权</button>
  22. </view>
  23. </view>
  24. </view>
  25. <!-- #endif -->
  26. </view>
  27. </template>
  28. <script>
  29. // #ifdef H5
  30. import {
  31. loginWinxin
  32. } from '@/utils/wxAuthorized';
  33. // #endif
  34. // #ifdef MP-WEIXIN
  35. import {
  36. wechatMpAuth
  37. } from '@/api/wx';
  38. import {
  39. loginWinxinMp
  40. } from '@/utils/wxMinProgram';
  41. // #endif
  42. import {
  43. mapMutations
  44. } from 'vuex';
  45. import {
  46. getUserInfo,
  47. } from '@/api/login.js';
  48. import {
  49. binding
  50. } from '@/api/set.js';
  51. import agreement from "./agreement.vue"
  52. export default {
  53. components: {
  54. agreement
  55. },
  56. data() {
  57. return {
  58. checked: false,
  59. userInfo: {}, //授权用户信息
  60. code: '', //授权code
  61. loding: false, //判断是否在点击中
  62. MaskShow: false, // 手机号授权弹窗
  63. cache_key: '',
  64. };
  65. },
  66. onLoad(option) {
  67. this.loadData();
  68. },
  69. methods: {
  70. ...mapMutations('user', ['login', 'setUserInfo', 'logout']),
  71. getUserInfos(e) {
  72. if (e && e.detail) {
  73. this.userInfo = e.detail.userInfo;
  74. }
  75. },
  76. changeChecked(check) {
  77. this.checked = check;
  78. },
  79. loadData() {
  80. let obj = this;
  81. // #ifdef H5
  82. loginWinxin();
  83. // #endif
  84. // #ifdef MP-WEIXIN
  85. loginWinxinMp().then((e) => {
  86. obj.code = e.code;
  87. });
  88. // #endif
  89. },
  90. // #ifndef H5
  91. // 用户确认授权
  92. userInfoData(e) {
  93. const that = this;
  94. if (!that.checked) {
  95. uni.showModal({
  96. title: '提示',
  97. content: '请先阅读同意《母婴界严选服务》《隐私条例》',
  98. showCancel: false,
  99. });
  100. return;
  101. }
  102. // #ifdef MP-WEIXIN
  103. if (!this.loding) {
  104. // wx.getUserProfile({
  105. // desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
  106. // success: res => {
  107. // console.log(res, 'res');
  108. // that.userInfo = res;
  109. that.loadMp();
  110. // },
  111. // fail: err => {
  112. // console.log(err, 'err');
  113. // that.loding = false;
  114. // that.getLoginCode();
  115. // uni.showToast({
  116. // title: '您拒绝了请求,不能正常使用小程序',
  117. // icon: 'error',
  118. // duration: 2000
  119. // });
  120. // }
  121. // });
  122. }
  123. // #endif
  124. },
  125. // #endif
  126. // #ifdef MP-WEIXIN
  127. // 退出用户登录
  128. outUser() {
  129. this.logout();
  130. uni.switchTab({
  131. url: '/pages/index/index'
  132. })
  133. },
  134. getLoginCode() {
  135. const that = this;
  136. wx.login({
  137. success(e) {
  138. that.code = e.code;
  139. },
  140. fill: function(e) {
  141. console.log(e)
  142. }
  143. })
  144. },
  145. // 小程序授权登录
  146. loadMp(option) {
  147. let obj = this;
  148. obj.loding = true;
  149. // 获取登录授权页数据
  150. let user = obj.userInfo;
  151. // 获取推广人id
  152. // #ifndef MP
  153. let spread_spid = uni.getStorageSync('spread') || '';
  154. // #endif
  155. // #ifdef MP
  156. let spread_code = uni.getStorageSync('spread_code') || '';
  157. // #endif
  158. uni.showLoading({
  159. title: '授权中',
  160. mask: true
  161. });
  162. wechatMpAuth({
  163. code: obj.code,
  164. avatar: '',
  165. nickname:'',
  166. gender: '',
  167. // #ifndef MP
  168. parent_uid: spread_spid,
  169. // #endif
  170. // #ifdef MP
  171. parent_uid: spread_code
  172. // #endif
  173. })
  174. .then(({
  175. data
  176. }) => {
  177. obj.loding = false;
  178. obj.wchatAuth(data);
  179. })
  180. .catch(e => {
  181. obj.loding = false;
  182. uni.hideLoading();
  183. });
  184. },
  185. wchatAuth(data) {
  186. let obj = this;
  187. obj.cache_key = data.cache_key;
  188. // 保存token
  189. uni.setStorageSync('token', data.token);
  190. obj.GetUser().then((data) => {
  191. try {
  192. uni.hideLoading();
  193. obj.login();
  194. // 保存返回用户数据
  195. obj.setUserInfo(data);
  196. uni.setStorageSync(
  197. 'jynickname', 1
  198. )
  199. if (data.mobile == null || !data.mobile) {
  200. obj.MaskShow = true;
  201. } else {
  202. obj.ToIndex();
  203. }
  204. } catch (e) {
  205. console.log(e, '登录');
  206. }
  207. }).catch((e) => {
  208. uni.hideLoading();
  209. })
  210. },
  211. // #endif
  212. ToIndex() {
  213. let ur = uni.getStorageSync('present') || '/pages/index/index';
  214. // 用于处理缓存bug
  215. if (ur == 'pages/product/product') {
  216. ur = '/pages/index/index';
  217. }
  218. uni.switchTab({
  219. url: ur,
  220. fail(e) {
  221. uni.navigateTo({
  222. url: ur,
  223. fail(e) {
  224. uni.navigateTo({
  225. url: '/pages/index/index'
  226. });
  227. }
  228. });
  229. }
  230. });
  231. // uni.switchTab({
  232. // url: '/pages/index/index'
  233. // });
  234. },
  235. // 获取用户数据
  236. GetUser() {
  237. // 获取用户基础信息
  238. return new Promise((ok, error) => {
  239. getUserInfo({})
  240. .then(({
  241. data
  242. }) => {
  243. ok(data)
  244. })
  245. .catch(e => {
  246. error(e)
  247. });
  248. })
  249. },
  250. // #ifdef MP
  251. // 绑定手机号
  252. PhoneNumber(e) {
  253. let obj = this;
  254. obj.MaskShow = false;
  255. let requestData = {
  256. code: e.detail.code,
  257. }
  258. obj.bindPhone(requestData).then((ar) => {
  259. obj.GetUser().then((data) => {
  260. obj.setUserInfo(data);
  261. uni.showToast({
  262. title: '绑定成功',
  263. mask: true,
  264. });
  265. setTimeout(
  266. function() {
  267. obj.ToIndex();
  268. }, 500
  269. )
  270. });
  271. })
  272. },
  273. // 绑定手机号
  274. bindPhone(data) {
  275. // 获取用户基础信息
  276. return new Promise((ok, error) => {
  277. binding(data)
  278. .then(function(e) {
  279. ok(e)
  280. })
  281. .catch(e => {
  282. error(e)
  283. });
  284. })
  285. }
  286. // #endif
  287. }
  288. };
  289. </script>
  290. <style lang="scss">
  291. page,
  292. .content {
  293. height: 100%;
  294. /* #ifdef MP-WEIXIN */
  295. .flex-center {
  296. height: 100%;
  297. text-align: center;
  298. line-height: 1;
  299. }
  300. /* #endif */
  301. }
  302. /* #ifdef MP-WEIXIN */
  303. .Mask {
  304. position: fixed;
  305. top: 0;
  306. width: 100%;
  307. height: 100%;
  308. background-color: rgba(51, 51, 51, 0.7);
  309. .Mask-box {
  310. margin: auto;
  311. margin-top: 320rpx;
  312. padding: 50rpx 30rpx;
  313. width: 90%;
  314. height: 450rpx;
  315. top: 500rpx;
  316. left: 10%;
  317. background-color: #ffffff;
  318. border-radius: 15rpx;
  319. .title {
  320. text-align: center;
  321. font-size: 35rpx;
  322. font-weight: 700;
  323. }
  324. .text {
  325. font-size: 30rpx;
  326. color: #848484;
  327. padding-top: 50rpx;
  328. }
  329. .btn_box {
  330. margin: 70rpx 0 0 0;
  331. display: flex;
  332. align-items: center;
  333. justify-content: space-between;
  334. }
  335. }
  336. }
  337. .weixin {
  338. background: $base-color;
  339. width: 40%;
  340. color: #ffffff;
  341. border-radius: 50rpx;
  342. border: none;
  343. margin: 0 20rpx;
  344. }
  345. .logo-img {
  346. width: 385rpx;
  347. height: 385rpx;
  348. margin: 0 auto;
  349. border-radius: 50rpx;
  350. }
  351. .userInfo {
  352. margin: 0 100rpx;
  353. margin-top: 50rpx;
  354. padding: 30rpx 50rpx;
  355. color: #ffffff;
  356. border-radius: 99rpx;
  357. background-color: $base-color !important;
  358. .icon {
  359. width: 55rpx;
  360. }
  361. }
  362. /* #endif */
  363. </style>