clientIndex.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <view class="phone-login-page">
  3. <view class="login-wrap-box">
  4. <view class="bjcx-head-box">
  5. <icon class="bjcx-logo-box"></icon>
  6. <view class="bjcx-logo-title">家政学</view>
  7. </view>
  8. <!-- 如果是APP分享过来的,显示微信授权界面 @getuserinfo="onWechatAuth"-->
  9. <view v-if="fromAppShare" class="wechat-auth-box">
  10. <view class="auth-tips">欢迎使用小程序</view>
  11. <button
  12. class="wechat-auth-btn"
  13. open-type="getUserInfo"
  14. @click="onWechatAuth"
  15. >
  16. 微信一键登录
  17. </button>
  18. <view class="switch-login" @click="switchToNormalLogin">使用账号登录</view>
  19. </view>
  20. <!-- 普通登录表单 -->
  21. <view v-else>
  22. <view class="login-input-box">
  23. <icon class="user-icon"></icon>
  24. <input class="login-input" type="text" v-model="userName" placeholder="请输入手机号" @input="userInputChange">
  25. <view class="close-btn" v-if="clearTelIcon" @click="clearTel"></view>
  26. </view>
  27. <view class="login-input-box">
  28. <icon class="tel-icon"></icon>
  29. <input class="login-input" placeholder="请输入证件号后六位" v-model="password" :password="showPassword"
  30. @input="passwordInputChange"/>
  31. <text class="login-eye" :class="[!showPassword ? 'uni-eye-active' : '']"
  32. @click="changePassword"></text>
  33. <view class="close-btn" v-if="clearPwIcon" @click="clearPw"></view>
  34. </view>
  35. <!-- 协议勾选框和按钮 -->
  36. <view class="agreement-checkbox-box">
  37. <checkbox-group @change="handleChange">
  38. <checkbox class="agreement-checkbox-input" color="#3fd2a1" value="agree"
  39. :checked="isAgreed" style="transform:scale(0.7)" />
  40. </checkbox-group>
  41. <view class="agreement-text-box">
  42. 在使用当前小程序服务之前,请仔细阅读<view class="agreement-text" @click="agreeBtn('yhxy')">《诚祥学用户协议》</view>和<view
  43. @click="agreeBtn('ystk')" class="agreement-text">《诚祥学隐私政策》</view>,如您同意,请勾选后开始使用
  44. </view>
  45. </view>
  46. <button type="default" @click="handleLogin" :disabled="!isAgreed" class="phone-green-btn login-btn">登录</button>
  47. </view>
  48. </view>
  49. </view>
  50. </template>
  51. <script setup>
  52. import cacheManager from '@/utils/cacheManager.js'
  53. import * as httpApi from "@/api/login.js"
  54. import {ref, onMounted} from "vue"
  55. import {toast} from "@/utils/common";
  56. import {useIsCanBack} from "@/store/isCanBack.js"
  57. import { onLoad } from "@dcloudio/uni-app";
  58. // 原有变量
  59. const userName = ref('')
  60. const password = ref('')
  61. const showPassword= ref(true)
  62. const clearTelIcon= ref(false)
  63. const clearPwIcon= ref(false)
  64. const isAgreed = ref(false)
  65. // 新增变量
  66. const fromAppShare = ref(true) // 是否来自APP分享
  67. const store = useIsCanBack();
  68. onLoad((options) => {
  69. // 判断是否来自APP分享
  70. if (options.from === 'appcx') {
  71. fromAppShare.value = true
  72. // APP分享过来直接显示微信授权界面,不需要自动弹窗
  73. }
  74. getAllImg();
  75. })
  76. // 切换到普通登录
  77. function switchToNormalLogin() {
  78. fromAppShare.value = false
  79. }
  80. // 微信授权登录
  81. async function onWechatAuth(e) {
  82. uni.navigateTo({
  83. url: '/pages/Login/AliyunCaptcha?scene=login',
  84. events: {
  85. getCaptchaVerifyParam: (captchaVerifyParam) => {
  86. // 接收到验证码返回结果
  87. console.log('验证码返回结果:', captchaVerifyParam)
  88. }
  89. },
  90. success: () => {
  91. console.log('跳转到验证码页面成功')
  92. },
  93. fail: (err) => {
  94. console.error('跳转到验证码页面失败:', err)
  95. toast('验证码加载失败,请重试')
  96. }
  97. })
  98. // if (e.detail.errMsg.includes('fail')) {
  99. // toast('授权失败')
  100. // return
  101. // }
  102. // uni.showLoading({ title: '登录中' })
  103. // console.log('e',e);
  104. // try {
  105. // // 获取微信code
  106. // const loginRes = await uni.login()
  107. // console.log('loginRes',loginRes);
  108. // // 调用后端微信登录接口
  109. // const result = await httpApi.loginApplet({
  110. // code: loginRes.code,
  111. // userInfo: e.detail.userInfo
  112. // })
  113. // console.log('result',result);
  114. // console.log('result',result);
  115. // if (result.data.success) {
  116. // // 保存用户信息
  117. // cacheManager.set('auth', result.data)
  118. // // // 检查手机号绑定状态
  119. // // const bindResult = await httpApi.checkPhoneBind()
  120. // // if (bindResult.data.hasPhone) {
  121. // // // 已绑定手机号,进入首页
  122. // // store.setIsCanBack(false)
  123. // // gotoPage()
  124. // // } else {
  125. // // // 未绑定手机号,跳转绑定页面
  126. // // uni.navigateTo({
  127. // // url: '/pages/bind-phone/bind-phone'
  128. // // })
  129. // // }
  130. // }
  131. // } catch (error) {
  132. // toast('微信登录失败')
  133. // } finally {
  134. // uni.hideLoading()
  135. // }
  136. }
  137. // 你原有的所有方法都不变
  138. function handleChange() {
  139. isAgreed.value = !isAgreed.value
  140. }
  141. function agreeBtn(code) {
  142. if (code === 'yhxy') {
  143. uni.navigateTo({
  144. url:"/pages/client/my/xieyi"
  145. })
  146. } else {
  147. uni.navigateTo({
  148. url:"/pages/client/my/zhengce"
  149. })
  150. }
  151. }
  152. function userInputChange(event){
  153. if (event.detail.value.length > 0) {
  154. clearTelIcon.value = true;
  155. } else {
  156. clearTelIcon.value = false;
  157. }
  158. }
  159. function passwordInputChange(event){
  160. if (event.detail.value.length > 0) {
  161. clearPwIcon.value = true;
  162. } else {
  163. clearPwIcon.value = false;
  164. }
  165. }
  166. function clearTel(){
  167. userName.value = '';
  168. clearTelIcon.value = false;
  169. }
  170. function clearPw(){
  171. password.value = '';
  172. clearPwIcon.value = false;
  173. }
  174. function changePassword() {
  175. showPassword.value = !showPassword.value;
  176. }
  177. function handleLogin() {
  178. if(userName.value.length ===0){
  179. toast('请输入手机号!')
  180. return
  181. }
  182. if(password.value.length ===0){
  183. toast('请输入密码!')
  184. return
  185. }
  186. const trimmedUserName = userName.value;
  187. const trimmedPassword = password.value;
  188. uni.showLoading({
  189. title: '登录中'
  190. })
  191. httpApi.loginTemp({
  192. type:2,
  193. userName: trimmedUserName,
  194. password:trimmedPassword,
  195. }).then(res => {
  196. if(res.data.type ===4){
  197. cacheManager.set('auth', res.data)
  198. store.setIsCanBack(false)
  199. gotoPage();
  200. }else if(res.data.type ===6){
  201. cacheManager.set('auth', res.data)
  202. store.setIsCanBack(false)
  203. gotoPage2();
  204. }else{
  205. toast('登录失败,您的身份有误,请联系管理员。')
  206. }
  207. }).catch(err => {
  208. store.setIsCanBack(true)
  209. }).finally(err => {
  210. uni.hideLoading()
  211. })
  212. }
  213. function gotoPage(){
  214. uni.navigateTo({
  215. url: `/pages/client/ShouYe/shouye`
  216. })
  217. }
  218. function gotoPage2(){
  219. uni.navigateTo({
  220. url: `/pages/kehu/shouYe/shouye`
  221. })
  222. }
  223. function getAllImg() {
  224. httpApi.getAllImgList({}).then(res => {
  225. cacheManager.set('projectImg', res.data)
  226. });
  227. }
  228. </script>
  229. <style scoped>
  230. /* 新增样式 */
  231. .wechat-auth-box {
  232. text-align: center;
  233. padding: 40rpx 0;
  234. }
  235. .auth-tips {
  236. font-size: 32rpx;
  237. color: #333;
  238. margin-bottom: 60rpx;
  239. }
  240. .wechat-auth-btn {
  241. background-color: #07C160;
  242. color: white;
  243. border-radius: 50rpx;
  244. margin-bottom: 30rpx;
  245. }
  246. .switch-login {
  247. color: #007AFF;
  248. font-size: 28rpx;
  249. }
  250. /* 你原有的所有样式都保持不变 */
  251. </style>