login.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <view>
  3. <view class="login-view">
  4. <image :src="logo" class="logo" mode="widthFix"></image>
  5. <view class="t-login">
  6. <u-button type="primary" class="custom-style" shape="circle" open-type="getPhoneNumber"
  7. @getphonenumber="getPhoneNumber" color="linear-gradient(0deg, #FD5003 0%, #FBA680 100%)"
  8. :ripple="true">
  9. 授权手机号登录
  10. </u-button>
  11. </view>
  12. </view>
  13. <div style="margin-top: 20rpx;display: flex;justify-content: center;">
  14. <view>
  15. <u-checkbox-group v-model="checkboxValue1" placement="column">
  16. <u-checkbox :customStyle="{marginBottom: '8px'}" ></u-checkbox>
  17. </u-checkbox-group>
  18. </view>
  19. <view>
  20. <text>我已阅读</text>
  21. <text style="color: #73a8fc;" @click="tiaozhuanxieyi">《 用户协议 》</text>
  22. </view>
  23. </div>
  24. <view style="position:absolute; bottom:20rpx;font-size: 20rpx;width: 100%;text-align: center;z-index: -1;">
  25. <image src="/static/images/login/bottom.png" style="
  26. display: block;
  27. width: 60%;
  28. height: auto;
  29. margin: 0 auto 10rpx;" mode="widthFix"></image>
  30. 青岛途宝软件开发有限公司提供技术支持
  31. </view>
  32. <PrivacyPop ref="PrivacyPopck"></PrivacyPop>
  33. </view>
  34. </template>
  35. <script>
  36. import PrivacyPop from './PrivacyPop/PrivacyPop.vue'
  37. import md5 from '@/utils/md5.js'
  38. export default {
  39. components:{
  40. PrivacyPop
  41. },
  42. data() {
  43. return {
  44. phone: '', //手机号码
  45. pwd: '', //密码
  46. // phone: '13021669111', //手机号码18669858069
  47. // pwd: '123456', //密码
  48. checked: false,
  49. lifeData: {},
  50. logo: "/static/images/logo/logo.png",
  51. checkboxValue1:[],
  52. }
  53. },
  54. onLoad() {
  55. // this.$refs.PrivacyPopck.checkPrivacySetting();
  56. },
  57. onShow() {
  58. },
  59. methods: {
  60. // 协议跳转
  61. tiaozhuanxieyi(){
  62. uni.$u.route('pages/login/xieyi')
  63. },
  64. zhuangtao(type){
  65. this.checkboxValue1 = [""]
  66. },
  67. change(e) {
  68. this.checked = !this.checked
  69. },
  70. //当前登录按钮操作
  71. getPhoneNumber(e) {
  72. console.log(e,73);
  73. let this_ = this
  74. if(this.checkboxValue1.length == 0) return uni.showToast({icon: 'none',title: '请勾选用户协议',position: "bottom",mask: true})
  75. if (e.detail.errMsg == 'getPhoneNumber:ok') {
  76. wx.login({
  77. success(res) {
  78. if (res.code) {
  79. wx.getUserInfo({
  80. success: function(rest) {
  81. this_.$u.api.tokenTwo({
  82. telCode: e.detail.code,
  83. loginCode: res.code,
  84. iv: e.detail.iv,
  85. encryptedData: e.detail.encryptedData,
  86. applets_id: uni.getAccountInfoSync().miniProgram.appId
  87. }).then(rest => {
  88. uni.showLoading({
  89. title: '登录中',
  90. mask: true
  91. });
  92. this_.$u.api.empowerToken({
  93. username: rest.data.phoneNumber,
  94. union_id: rest.data.unionid,
  95. open_id: rest.data.openid,
  96. applets_id: uni.getAccountInfoSync().miniProgram.appId,
  97. password: md5('123456')
  98. }).then(data => {
  99. uni.hideLoading();
  100. uni.showToast({
  101. icon: 'none',
  102. title: '登录成功',
  103. position: "bottom",
  104. mask: true
  105. })
  106. setTimeout(function() {
  107. this_.$u.func.login(data)
  108. }, 1000);
  109. }).catch(err=>{
  110. uni.hideLoading();
  111. uni.showToast({
  112. icon: 'none',
  113. title: err.error_description,
  114. position: "bottom",
  115. mask: true
  116. })
  117. })
  118. })
  119. },
  120. fail: res => {
  121. console.log(res,121);
  122. uni.showToast({
  123. icon: 'none',
  124. title: '已拒绝授权,请重新授权',
  125. position: "bottom"
  126. })
  127. }
  128. })
  129. } else {
  130. uni.showToast({
  131. icon: 'none',
  132. title: res.errMsg,
  133. position: "bottom"
  134. })
  135. }
  136. }
  137. })
  138. } else if (e.detail.errMsg == 'getPhoneNumber:fail no permission') {
  139. uni.showToast({
  140. icon: 'none',
  141. title: '微信认证过期',
  142. position: "bottom"
  143. })
  144. } else {
  145. uni.showToast({
  146. icon: 'none',
  147. title: '已拒绝授权',
  148. position: "bottom"
  149. })
  150. }
  151. },
  152. }
  153. };
  154. </script>
  155. <style lang="scss" scoped>
  156. .custom-style {
  157. color: #3ab2f7;
  158. margin-top: 140rpx;
  159. box-shadow: 2px 5px 10px 1px rgba(43, 117, 250, 0.3);
  160. }
  161. .txt {
  162. font-size: 32rpx;
  163. font-weight: bold;
  164. color: #333333;
  165. }
  166. .img-a {
  167. width: 100%;
  168. height: 400rpx;
  169. }
  170. .logo {
  171. display: block;
  172. width: 281rpx;
  173. height: auto;
  174. margin: 35% auto;
  175. }
  176. .reg {
  177. font-size: 28rpx;
  178. color: #fff;
  179. height: 90rpx;
  180. line-height: 90rpx;
  181. border-radius: 50rpx;
  182. font-weight: bold;
  183. background: #f5f6fa;
  184. color: #000000;
  185. text-align: center;
  186. margin-top: 30rpx;
  187. }
  188. .login-view {
  189. width: 100%;
  190. }
  191. .t-login {
  192. width: 600rpx;
  193. margin: 0 auto;
  194. font-size: 28rpx;
  195. margin-top: 80rpx;
  196. }
  197. .t-login button {
  198. font-size: 28rpx;
  199. background: #2796f2;
  200. color: #fff;
  201. height: 90rpx;
  202. line-height: 90rpx;
  203. border-radius: 50rpx;
  204. font-weight: bold;
  205. }
  206. .t-login input {
  207. height: 90rpx;
  208. line-height: 90rpx;
  209. margin-bottom: 50rpx;
  210. border-bottom: 1px solid #e9e9e9;
  211. font-size: 28rpx;
  212. }
  213. .t-login .t-a {
  214. position: relative;
  215. }
  216. .t-b {
  217. text-align: left;
  218. font-size: 42rpx;
  219. color: #000;
  220. padding: 130rpx 0 0 70rpx;
  221. font-weight: bold;
  222. line-height: 70rpx;
  223. }
  224. .t-login .t-c {
  225. position: absolute;
  226. right: 22rpx;
  227. top: 22rpx;
  228. background: #5677fc;
  229. color: #fff;
  230. font-size: 24rpx;
  231. border-radius: 50rpx;
  232. height: 50rpx;
  233. line-height: 50rpx;
  234. padding: 0 25rpx;
  235. }
  236. .t-login .t-d {
  237. text-align: center;
  238. color: #999;
  239. margin: 80rpx 0;
  240. }
  241. .t-login .t-e {
  242. text-align: center;
  243. width: 250rpx;
  244. margin: 80rpx auto 0;
  245. }
  246. .t-login .t-g {
  247. float: left;
  248. width: 50%;
  249. }
  250. .t-login .t-e image {
  251. width: 50rpx;
  252. height: 50rpx;
  253. }
  254. .t-login .t-f {
  255. text-align: center;
  256. margin: 150rpx 0 0 0;
  257. color: #666;
  258. }
  259. .t-login .t-f text {
  260. margin-left: 20rpx;
  261. color: #aaaaaa;
  262. font-size: 27rpx;
  263. }
  264. .t-login .uni-input-placeholder {
  265. color: #aeaeae;
  266. }
  267. .cl {
  268. zoom: 1;
  269. }
  270. .cl:after {
  271. clear: both;
  272. display: block;
  273. visibility: hidden;
  274. height: 0;
  275. content: '\20';
  276. }
  277. </style>