sms-register.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <!-- 短信注册 - smsRegister -->
  2. <template>
  3. <view>
  4. <!-- 表单项 -->
  5. <uni-forms
  6. ref="smsRegisterRef"
  7. v-model="state.model"
  8. :rules="state.rules"
  9. validateTrigger="bind"
  10. labelWidth="140"
  11. labelAlign="left"
  12. labelPosition="top"
  13. >
  14. <uni-forms-item name="mobile" label="手机号">
  15. <view class="input-line">
  16. <uni-easyinput
  17. placeholder="请输入手机号"
  18. v-model="state.model.mobile"
  19. :inputBorder="false"
  20. type="number"
  21. >
  22. </uni-easyinput>
  23. </view>
  24. </uni-forms-item>
  25. <uni-forms-item name="code" label="验证码">
  26. <view class="ss-flex ss-row-between">
  27. <view class="input-line w-370">
  28. <uni-easyinput
  29. placeholder="请输入验证码"
  30. v-model="state.model.code"
  31. :inputBorder="false"
  32. type="number"
  33. maxlength="6"
  34. >
  35. </uni-easyinput>
  36. </view>
  37. <button
  38. class="ss-reset-button code-btn code-btn-start"
  39. :disabled="getSmsTimer('smsRegister') != '获取验证码'"
  40. :class="{ 'code-btn-end': getSmsTimer('smsRegister') != '获取验证码' }"
  41. @tap="getSmsCode('smsRegister', state.model.mobile)"
  42. >
  43. {{ getSmsTimer('smsRegister') }}
  44. </button>
  45. </view>
  46. </uni-forms-item>
  47. <!-- <uni-forms-item name="password" label="密码">
  48. <uni-easyinput
  49. type="password"
  50. placeholder="请输入密码"
  51. v-model="state.model.password"
  52. :inputBorder="false"
  53. >
  54. <template v-slot:right>
  55. <button class="ss-reset-button login-btn-start" @tap="smsRegisterSubmit"> 注册 </button>
  56. </template>
  57. </uni-easyinput>
  58. </uni-forms-item> -->
  59. </uni-forms>
  60. </view>
  61. </template>
  62. <script setup>
  63. // import { computed, ref, reactive, unref,watch } from 'vue';
  64. // import sheep from '@/sheep';
  65. // import { code, mobile } from '@/sheep/validate/form';
  66. // import { closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  67. // import {Base64} from 'js-base64'
  68. // const props = defineProps({
  69. // agreeStatus: {
  70. // type: Boolean,
  71. // default: false,
  72. // },
  73. // });
  74. // const smsRegisterRef = ref(null);
  75. // // 数据
  76. // const state = reactive({
  77. // isMobileEnd: false, // 手机号输入完毕
  78. // model: {
  79. // mobile: '', // 手机号
  80. // code: '', // 验证码
  81. // uuid: '', //uuid
  82. // },
  83. // rules: {
  84. // code,
  85. // mobile,
  86. // },
  87. // });
  88. // // 3.短信注册
  89. // async function smsRegisterSubmit() {
  90. // const validate = await unref(smsRegisterRef)
  91. // .validate()
  92. // .catch((error) => {
  93. // console.log('error: ', error);
  94. // });
  95. // if (!validate) return;
  96. // state.model.uuid = sheep.$store('user').getUUID('smsRegister')
  97. // let params = {
  98. // phone:state.model.mobile,
  99. // uuId:state.model.uuid,
  100. // code:state.model.code
  101. // }
  102. // const res = await sheep.$api.user.verifyShopPhone(params)
  103. // if(res.code == 200) {
  104. // uni.navigateTo({
  105. // url:`/pages/login/register?mobile=${state.model.mobile}`
  106. // })
  107. // }
  108. // return res
  109. // // new Promise((resolve, reject) => {
  110. // // // let code = getUrlCode().code; //是否存在code
  111. // // let code = '123456'; //是否存在code
  112. // // console.log('code:',code)
  113. // // if (!code) {
  114. // // //不存在就打开上面的地址进行授权
  115. // // window.location.href =
  116. // // "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
  117. // // import.meta.env.SHOPRO_APPID +
  118. // // "&redirect_uri=" + encodeURIComponent(import.meta.env.SHOPRO_FRONT_DOMAIN + "/#/pages/index/user") +
  119. // // "&response_type=code&scope=snsapi_base#wechat_redirect";
  120. // // code = getUrlCode().code
  121. // // }
  122. // // if (code){
  123. // // resolve(code)
  124. // // }
  125. // // else {
  126. // // reject('code error')
  127. // // }
  128. // // }).then(
  129. // // value => {
  130. // // state.model.uuid = sheep.$store('user').getUUID()
  131. // // sheep.$api.user.smsRegister({
  132. // // ...state.model,
  133. // // // wechatCode: value
  134. // // }).then((res) => {
  135. // // closeAuthModal();
  136. // // uni.showToast({
  137. // // title: '注册成功',
  138. // // icon: 'none',
  139. // // mask: true,
  140. // // });
  141. // // });
  142. // // }
  143. // // ).catch(err => {
  144. // // sheep.$helper.toast(err)
  145. // // })
  146. // }
  147. // function getUrlCode() {
  148. // // 截取url中的code方法
  149. // var url = location.search;
  150. // var theRequest = new Object();
  151. // if (url.indexOf("?") != -1) {
  152. // var str = url.substr(1);
  153. // var strs = str.split("&");
  154. // for (var i = 0; i < strs.length; i++) {
  155. // theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
  156. // }
  157. // }
  158. // console.log(theRequest);
  159. // return theRequest;
  160. // }
  161. // // 发送验证码
  162. // async function send(){
  163. // sheep.$api.user.validatePhone(Base64.encode(state.model.mobile)).then((res) => {
  164. // console.log('res:',res)
  165. // if (res && res.ifSuccess){
  166. // getSmsCode('smsRegister', state.model.mobile)
  167. // }
  168. // })
  169. // }
  170. // defineExpose({
  171. // smsRegisterSubmit
  172. // })
  173. </script>
  174. <style lang="scss" scoped>
  175. // @import '../index.scss';
  176. .input-line {
  177. background-color: #F5F7FB;
  178. border-radius: 16rpx;
  179. padding-left: 30rpx;
  180. height: 88rpx;
  181. box-sizing: border-box;
  182. }
  183. .w-370 {
  184. width: 370rpx;
  185. }
  186. </style>