login.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. <template>
  2. <view class="body" :style="{height:screenHeight}">
  3. <u-toast ref="uToast"></u-toast>
  4. <view style="height: 40%;">
  5. <view class="logo">
  6. <u--image :src="logoSrc" width="120px" height="120px"></u--image>
  7. </view>
  8. <view class="title">登录 旭烁</view>
  9. <!-- <u-button text="getUserProfile" type="success" :hairline="false" throttleTime="2000" shape="circle" open-type="getUserProfile"
  10. @click="getUserProfile"></u-button> -->
  11. <u-button text="微信一键登录" type="success" :hairline="false" throttleTime="2000" shape="circle"
  12. @click="openAuth"></u-button>
  13. </view>
  14. <!-- 微信获取手机号弹窗 -->
  15. <u-modal :show="showAuthorizePhone" :show-title="false"
  16. :show-confirm-button="false">
  17. <view class="slot-content">
  18. <div class="auth-card">
  19. <div class="img">
  20. <img class="avatar-img" :src="logoSrc" mode="widthFix">
  21. </div>
  22. <div class="title">{{bname}}</div>
  23. <div class="content">申请获得您的手机号</div>
  24. </div>
  25. <div class="auth-btncard u-flex u-row-between">
  26. <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizePhone=false">拒绝</u-button></div>
  27. <div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" open-type="getPhoneNumber" @getphonenumber="authPhone"> 允许</u-button></div>
  28. </div>
  29. </view>
  30. </u-modal>
  31. <!-- 微信获取用户头像昵称弹窗 -->
  32. <u-modal :show="showAuthorizeUser" :show-title="false"
  33. :show-confirm-button="false">
  34. <view class="slot-content">
  35. <div class="auth-card">
  36. <div class="img">
  37. <img class="avatar-img"
  38. :src="logoSrc"
  39. mode="widthFix">
  40. </div>
  41. <div class="title">{{bname}}</div>
  42. <div class="content">邀请您补全个人信息<br></br>(昵称、头像)</div>
  43. <div style="margin-left: 100rpx;margin-right: 100rpx">
  44. <u-form :model="user" ref="uForm">
  45. <u-form-item label="头像">
  46. <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
  47. <image class="avatar" :src="user.avatar"></image>
  48. </button>
  49. </u-form-item>
  50. <u-form-item label="昵称">
  51. <input type="nickname" class="weui-input u-border-bottom" @blur="nickNameInput" placeholder="请输入昵称"/>
  52. </u-form-item>
  53. </u-form>
  54. </div>
  55. </div>
  56. <div class="auth-btncard">
  57. <div class="btn-unok"><u-button :hair-line='false' :custom-style="customStyleUnOk" @click="showAuthorizeUser=false"> 拒绝</u-button></div>
  58. <div class="btn-ok"><u-button :hair-line='false' :custom-style="customStyleOk" @click="authUser"> 允许</u-button></div>
  59. </div>
  60. </view>
  61. </u-modal>
  62. </view>
  63. </template>
  64. <script>
  65. export default {
  66. data() {
  67. return {
  68. bname:'旭烁集团',
  69. //屏幕高度
  70. screenHeight: "",
  71. logoSrc: "/static/logo.png",
  72. miniappLoginInfo:null,
  73. hasUserInfo:false,
  74. userInfo: null,
  75. user:{
  76. avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
  77. name:'',
  78. mobile:'',
  79. },
  80. code: '',
  81. showAuthorizeUser: false,
  82. showAuthorizePhone: false,
  83. customStyleUnOk:{},
  84. customStyleOk:{'margin-left': '30px',color:'#00A447'},
  85. backUrl:null,
  86. };
  87. },
  88. onLoad() {
  89. let that = this;
  90. //获取屏幕高度,我的项目再store里已经取到了
  91. uni.getSystemInfo({
  92. success: (res) => {
  93. this.screenHeight = res.windowHeight + "px"
  94. }
  95. });
  96. uni.getStorage({
  97. key: 'backUrl',
  98. success: function (res) {
  99. that.backUrl = '/'+res.data;
  100. }
  101. });
  102. },
  103. onShow() {
  104. // uni.showLoading({
  105. // mask:true
  106. // });
  107. this.getChatCode();
  108. setTimeout(() => {
  109. this.openAuth();
  110. // this.showAuthorizeUser = true //弹出头像用户名
  111. }, 100);
  112. let userInfo = uni.getStorageSync('userInfo');
  113. this.user.name = userInfo.name;
  114. },
  115. methods: {
  116. openAuth(){
  117. this.showAuthorizePhone = true;
  118. // let userInfo = uni.getStorageSync('userInfo')
  119. // console.log('userInfo>>>>>>>>>>>>>>>>>>>>>',userInfo)
  120. // if(userInfo){
  121. // this.showAuthorizeUser = true;
  122. // }else{
  123. // this.showAuthorizePhone = true;
  124. // }
  125. // uni.hideLoading()
  126. },
  127. getChatCode() {
  128. //因为作用域先提前赋值
  129. var that = this
  130. //使用uni封装的一键登录方法
  131. uni.login({
  132. provider: 'weixin',
  133. success(res) {
  134. //成功后带着微信登录返回的code去请求我们的后端
  135. that.code = res.code;
  136. console.log('code',that.code);
  137. }
  138. })
  139. },
  140. getUserProfile() {
  141. var that = this
  142. uni.getUserProfile({
  143. desc: "获取你的昵称、头像",
  144. success(res) {
  145. console.log('getUserProfile success',res);
  146. if (res.errMsg == "getUserProfile:ok" && res.userInfo != undefined) {
  147. //我用store来存储一些数据,你可以放到你要放的地方
  148. console.log(' res.userInfo', res.userInfo);
  149. // that.$u.vuex('wx_user_info.nickName', res.userInfo.nickName);
  150. // that.$u.vuex('wx_user_info.avatarUrl', res.userInfo.avatarUrl);
  151. // that.getChatCode()
  152. }
  153. },
  154. complete(res) {
  155. // console.log('complete',res);
  156. }
  157. })
  158. },
  159. //获取昵称输入内容
  160. // userNameInput(e){
  161. // this.user.nickName = e.detail.value
  162. // },
  163. onChooseAvatar(e) {
  164. console.log('头像信息》')
  165. console.log(e)
  166. this.user.avatar = e.detail.avatarUrl;
  167. },
  168. async authPhone(e){
  169. // uni.showLoading({
  170. // mask:true
  171. // });
  172. let _this = this;
  173. // this.getMobile()
  174. let mobileData = await this.$u.api.getMobile({code:e.detail.code});
  175. console.log('mobileData',mobileData);
  176. let mobile = mobileData.data?.mobile;
  177. if(mobile){
  178. this.mobile = mobile
  179. this.login(e);
  180. }else{
  181. uni.showToast({
  182. title: '没有获取手机号',
  183. icon:'error',
  184. duration: 2000
  185. });
  186. }
  187. },
  188. async login(e){
  189. // console.log('e',e);
  190. let _this = this;
  191. let wxinfo = await this.$u.api.wxinfo({code:this.code});
  192. let {openid,sessionKey,unionid} = wxinfo.data;
  193. _this.$u.vuex('vuex_wechatOpenid', openid);
  194. const { errMsg, iv, encryptedData } = e.detail;
  195. if (errMsg !== 'getPhoneNumber:ok') return;
  196. let data = {
  197. code: this.code,
  198. encryptedData: encryptedData,
  199. ivStr: iv,
  200. wechatOpenid:openid,
  201. sessionKey,
  202. sourceType:1,
  203. mobile:this.mobile
  204. }
  205. // console.log('----------登陆中',data)
  206. this.$u.api.login(data).then(res=>{
  207. console.log('微信登录返回结果========',res.data)
  208. _this.$u.vuex('vuex_user_info', res.data);
  209. // _this.$u.vuex('vuex_member_info',res.data);
  210. // uni.setStorageSync('userInfo', res.data)
  211. this.showAuthorizePhone = false
  212. this.getMemberInfo(res.data.userid);
  213. }).catch(err=>{
  214. console.log('err',err);
  215. this.showAuthorizePhone = false
  216. })
  217. },
  218. getMemberInfo(userid){
  219. let _this = this;
  220. this.$u.api.memberInfo({id:userid}).then(res=> {
  221. if(res.code ===200) {
  222. _this.userInfo = res.data;
  223. this.$u.vuex('vuex_member_info', res.data);
  224. // this.$u.vuex('vuex_member_info.avatar', 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0');
  225. if(!res.data.name){
  226. this.$u.vuex('vuex_member_info.name', '微信用户');
  227. this.updateMemberInfo();
  228. }else{
  229. let url = this.backUrl&&this.backUrl.length>0?this.backUrl:'/pages/index/index';
  230. uni.navigateTo({
  231. url: url
  232. })
  233. }
  234. // 下面需要获取微信头像和昵称
  235. // if(res.data.name){
  236. // _this.hasUserInfo = true;
  237. // _this.userInfo = res.data;
  238. // uni.navigateTo({
  239. // url: '/pages/index/index'
  240. // })
  241. // }else{
  242. // _this.showAuthorizeUser = true
  243. // // uni.hideLoading()
  244. // }
  245. // console.log('---------登陆成功')
  246. }
  247. })
  248. },
  249. updateMemberInfo(){
  250. let params ={
  251. id:this.userInfo.id,
  252. // avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
  253. name:'微信用户'
  254. };
  255. this.$u.api.updateMemberInfo(params).then(res=>{
  256. let url = this.backUrl&&this.backUrl.length>0?this.backUrl:'/pages/index/index';
  257. uni.navigateTo({
  258. url: url
  259. })
  260. }).catch(err=>{
  261. console.log('err',err);
  262. })
  263. },
  264. authUser(){
  265. let userInfo = this.vuex_user_info || {};
  266. // console.log('this===',this);
  267. // console.log('vuex_user_info===',this.vuex_user_info);
  268. // console.log('userInfo',userInfo);
  269. // console.log('this.user',this.user);
  270. if(!this.user.name){
  271. uni.showToast({
  272. title: '请输入您的昵称!',
  273. icon:'error',
  274. duration: 2000
  275. });
  276. return;
  277. }
  278. userInfo.avatar = this.user.avatar;
  279. userInfo.name = this.user.name;
  280. this.userInfo = userInfo;
  281. uni.setStorageSync('userInfo', userInfo)
  282. this.user.id = userInfo.userid;
  283. let param = {
  284. id:this.user.id,
  285. name:this.user.name,
  286. avatar:this.user.avatar
  287. }
  288. this.$u.api.updateMemberInfo(param).then(res=>{
  289. this.hasUserInfo = true;
  290. this.showAuthorizeUser = false;
  291. uni.navigateTo({
  292. url: '/pages/index/index'
  293. })
  294. }).catch(err=>{
  295. console.log('err',err);
  296. })
  297. },
  298. nickNameInput(e){
  299. this.user.name = e.detail.value
  300. }
  301. }
  302. }
  303. </script>
  304. <style lang="scss" scoped>
  305. .body {
  306. // width: 100%;
  307. background-color: #f3f3f3;
  308. padding: 24px;
  309. box-sizing: border-box;
  310. .logo {
  311. padding-top: 200rpx;
  312. margin: auto;
  313. width: 120px;
  314. height: 120px;
  315. }
  316. .title {
  317. width: 90%;
  318. margin: 0 auto 30rpx;
  319. text-align: center;
  320. font-size: 18px;
  321. color: #111;
  322. }
  323. }
  324. //
  325. .auth-btncard{
  326. margin-top: 20px;
  327. .btn-unok{
  328. width: 45%;
  329. float: left;
  330. }
  331. .btn-ok{
  332. width: 45%;
  333. float: left;
  334. margin: 0;
  335. padding: 0;
  336. border: 0px solid transparent; //自定义边框
  337. outline: none; //消除默认点击蓝色边框效果
  338. u-button{
  339. font-size: 16px;
  340. margin: 0;
  341. padding: 0;
  342. // border: 0px solid transparent; //自定义边框
  343. outline: none; //消除默认点击蓝色边框效果
  344. }
  345. }
  346. }
  347. .auth-card{
  348. text-align: center;
  349. .avatar-img{
  350. width: 150rpx;
  351. height: 150rpx;
  352. overflow: hidden;
  353. border-radius: 100%;
  354. margin-top: 30rpx;
  355. }
  356. .title{
  357. font-size: 30rpx;
  358. }
  359. .content{
  360. margin-top: 10rpx;
  361. margin-bottom: 20rpx;
  362. }
  363. }
  364. .avatar-wrapper{
  365. width: 150rpx;
  366. height: 100rpx;
  367. color: #333 !important;
  368. text-align: center !important;
  369. border: none !important;
  370. border-radius:0 !important;
  371. background-color:transparent !important;
  372. }
  373. .avatar-wrapper::after {
  374. border: none !important;
  375. }
  376. .avatar{
  377. width: 100rpx;
  378. height: 100rpx;
  379. overflow: hidden;
  380. border-radius: 100%;
  381. }
  382. </style>