login.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. <template>
  2. <view class="wrap">
  3. <view class="login">
  4. <view class="login-title">
  5. <h3>手机号登录/注册</h3>
  6. <p>欢迎来到{{projectName}}</p>
  7. <p v-if="activityInfo"><span style="color: red;">*</span>正在参加活动<span style="color: #3fbd70;" ><{{activityInfo.name}}></span></p>
  8. </view>
  9. <view class="login-form">
  10. <view class="login-form-item">
  11. <view class="title">手机号</view>
  12. <view class="input">
  13. <u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" v-model="form.telephone" type="number" placeholder="请输入手机号" placeholder-style="font-size:16px;color:#ccc;"/>
  14. </view>
  15. <view class="tips">未注册的手机号验证后将自动注册</view>
  16. </view>
  17. <view class="login-form-item">
  18. <view class="title">验证码</view>
  19. <view class="input">
  20. <u-input :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" v-model="form.verifyCode" type="number" placeholder="请输入验证码" placeholder-style="font-size:16px;color:#ccc;"/>
  21. <view class="code" @click="getCode">{{codeTips}}</view>
  22. </view>
  23. <view style="width: 350px;">
  24. <u-checkbox-group>
  25. <u-checkbox class="tips" active-color="green" v-model="value" shape="circle" @change="checkboxChange()"></u-checkbox>
  26. </u-checkbox-group>
  27. <span>我已阅读并同意</span>
  28. <span @click="gotoUrl('pages/article/details?code=YHXY')" style="color: #3fbd70;">《会员协议》</span>和
  29. <span @click="gotoUrl('pages/article/details?code=YSZC')" style="color: #3fbd70;">《隐私协议》</span>
  30. </view>
  31. </view>
  32. </view>
  33. <u-button :style="[inputStyle]" class="login-btn" type="success" shape="circle" @click="login">登录</u-button>
  34. <u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start" change-text="已发送(Xs)">
  35. </u-verification-code>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import * as loginApi from '@/apis/login.js'
  41. import * as API from '@/apis/index.js'
  42. import {
  43. checkPhone
  44. } from '@/utils'
  45. export default {
  46. data() {
  47. return {
  48. elderMode:false,
  49. placeholderStyle:{
  50. 'font-size':'28rpx'
  51. },
  52. form: {
  53. telephone: '',
  54. verifyCode: '',
  55. },
  56. activityInfo:null,
  57. isSendMsgIng: false,
  58. sendMsgSecond: 60,
  59. codeTips: '',
  60. value: false,
  61. code: '',
  62. codeId: '',
  63. projectName:'',
  64. }
  65. },
  66. computed: {
  67. inputStyle() {
  68. let style = {};
  69. if(this.form.telephone) {
  70. style.color = "#fff";
  71. style.backgroundColor = this.$u.color['success'];
  72. }
  73. return style;
  74. }
  75. },
  76. onLoad(op) {
  77. this.projectName=process.car.ProjectName;
  78. if(op.jpcode) {
  79. var str1 = op.jpcode.slice(0,19);
  80. var str2 = op.jpcode.slice(20,21);
  81. var str3 = op.jpcode.slice(22);
  82. if(str1 == 'jp_team51_charge_id') {
  83. if(str2 == 'A') {
  84. this.code = str2;
  85. this.codeId = str3;
  86. uni.showToast({
  87. title:"注册后享受充电服务"
  88. })
  89. }
  90. }
  91. }
  92. var obj=this.carhelp.get("friends_invitation")
  93. if(obj){
  94. if(obj.date+1000*60*60*24 > new Date().getTime() ){
  95. this.form.inviteId=obj.op.uid
  96. this.form.code=obj.op.code
  97. this.activityInfo=obj.activityInfo;
  98. }
  99. }
  100. },
  101. onReady() {
  102. this.elderMode = this.carhelp.get('getElderModeClass') == '长辈模式';
  103. if(this.elderMode)
  104. this.theme('elder')
  105. else
  106. this.theme('standard')
  107. },
  108. methods: {
  109. theme(type) {
  110. if(type == 'elder')
  111. {
  112. document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
  113. let data = {
  114. "font-size":'32rpx',
  115. };
  116. this.placeholderStyle = data;
  117. }
  118. else
  119. {
  120. document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
  121. let data ={
  122. "font-size":'28rpx',
  123. };
  124. this.placeholderStyle = data;
  125. }
  126. },
  127. codeChange(text) {
  128. this.codeTips = text;
  129. },
  130. start() {
  131. if (!this.isSendMsgIng) {
  132. uni.showLoading({
  133. title: "加载中",
  134. mask: true,
  135. })
  136. loginApi.getVerifyCode(this.form.telephone).then((response) => {
  137. uni.hideLoading();
  138. this.carhelp.set("getvcodetime", new Date().getTime());
  139. if (!"") {
  140. //倒计时
  141. uni.showToast({
  142. title: "发送成功"
  143. })
  144. } else {
  145. uni.showToast({
  146. title: "您的验证码已经发送[5分钟有效],请勿重复点击"
  147. })
  148. }
  149. }).catch(error => {
  150. uni.showToast({
  151. title: error,
  152. icon: "none"
  153. })
  154. })
  155. }
  156. },
  157. //倒计时
  158. end() {
  159. this.sendMsgSecond = 60;
  160. this.isSendMsgIng = false;
  161. },
  162. // 获取验证码
  163. getCode() {
  164. if (this.$refs.uCode.canGetCode) {} else {
  165. uni.showToast({
  166. title: '倒计时结束后再发送',
  167. icon: "none"
  168. })
  169. return
  170. }
  171. var checkPhoneResult = checkPhone(this.form.telephone);
  172. if (checkPhoneResult !== true) {
  173. uni.showToast({
  174. title: checkPhoneResult,
  175. })
  176. return;
  177. }
  178. this.$refs.uCode.start();
  179. },
  180. checkboxChange() {
  181. this.value = !this.value;
  182. },
  183. login() {
  184. var checkPhoneResult = checkPhone(this.form.telephone);
  185. if(!this.form.telephone || checkPhoneResult != true) {
  186. uni.showToast({
  187. title: checkPhoneResult,
  188. icon: "none"
  189. })
  190. return;
  191. }
  192. if(!this.form.verifyCode) {
  193. uni.showToast({
  194. title: "请输入验证码",
  195. icon: "none"
  196. })
  197. return
  198. }
  199. if(!this.value) {
  200. uni.showToast({
  201. title: "请勾选协议",
  202. icon: "none"
  203. })
  204. return
  205. }
  206. uni.showLoading({
  207. title: "加载中",
  208. mask: true,
  209. })
  210. this.form.nickName= this.carhelp.getUserInfo().nickname;
  211. this.form.headImg=this.carhelp.getUserInfo().headimgurl;
  212. this.form.openId= this.carhelp.getOpenId();
  213. loginApi.validateCode(this.form).then((response) => {
  214. uni.hideLoading();
  215. var token = response ? response.data.token : '';
  216. this.carhelp.setToken(token);
  217. this.carhelp.setPersonInfo(response.data.regUser);
  218. if(!response.data.regUser.carId){
  219. var url="/pages/login/completeInfo?login=1"
  220. if(this.code == 'A') {
  221. url+="&jpcode=jp_team51_charge_id:A_" + this.codeId
  222. }
  223. uni.redirectTo({
  224. url:url
  225. })
  226. }else if(this.code == 'A') {
  227. var k=API.codeOperation("jp_team51_charge_id:A_"+this.codeId);
  228. if(k){
  229. uni.redirectTo({
  230. url:k
  231. })
  232. }
  233. } else {
  234. uni.redirectTo({
  235. url: '/pages/index/index'
  236. })
  237. }
  238. }).catch(error => {
  239. uni.showToast({
  240. title: error,
  241. icon: "none"
  242. })
  243. })
  244. }
  245. }
  246. }
  247. </script>
  248. <style>
  249. page{
  250. background-color: #fff;
  251. }
  252. </style>
  253. <style lang="scss" scoped>
  254. @import "@/_theme.scss";
  255. .all{
  256. @include themeify{
  257. font-size: themed('font-size2');
  258. }
  259. }
  260. .wrap {
  261. @include themeify{
  262. font-size: themed('font-size2');
  263. }
  264. /* font-size: 28rpx;*/
  265. .login {
  266. width: 600rpx;
  267. padding-top: 80rpx;
  268. margin: 0 auto;
  269. .login-title {
  270. text-align: left;
  271. h3{
  272. @include themeify{
  273. font-size: themed('font-size7');
  274. }
  275. /* font-size: 48rpx;*/
  276. font-weight: normal;
  277. }
  278. p{
  279. margin-top: 4px;
  280. color:#777
  281. }
  282. }
  283. .login-form-item{
  284. margin-top: 40px;
  285. .title{
  286. margin-bottom: 8px;
  287. @include themeify{
  288. font-size: themed('font-size2');
  289. font-weight: themed('fontWeight');
  290. letter-spacing: themed('letterSpacing');
  291. }
  292. }
  293. .input {
  294. border-bottom: 1px solid #f7f7f7;
  295. position: relative;
  296. }
  297. .code{
  298. position: absolute;
  299. right: 0;
  300. top:7px;
  301. color:#1677FF;
  302. }
  303. .tips {
  304. color: $u-type-info;
  305. margin-top: 12px;
  306. @include themeify{
  307. font-size: themed('font-size1');
  308. }
  309. /* font-size: 12px;*/
  310. span{
  311. color:#3fbd70;
  312. }
  313. }
  314. }
  315. .login-btn {
  316. margin-top: 40px;
  317. background-color: #a7dbc2;
  318. @include themeify{
  319. font-size: themed('font-size3');
  320. }
  321. }
  322. .alternative {
  323. color: $u-tips-color;
  324. display: flex;
  325. justify-content: space-between;
  326. margin-top: 30rpx;
  327. }
  328. }
  329. }
  330. </style>