jsh_erp_app/pages/login/components/sms-login.vue

<!-- 短信登录 - smsLogin  -->
<template>
	<view>
		<!-- 表单项 -->
		<u-form ref="smsLoginRef" validateTrigger="bind" labelWidth="140" labelAlign="left"
			labelPosition="top">
			<u-form-item prop="mobile" label="手机号">
				<view class="input-line">
					<u-input placeholder="请输入手机号" v-model="model.mobile" border="none" type="number" maxlength="11">
					</u-input>
				</view>
			</u-form-item>

			<u-form-item prop="code" label="验证码">
				<view class="code-line flex_box flex_row_between w">
					<view class="input-line w-370">
						<u-input placeholder="请输入验证码" v-model="model.code" border="none" type="number" maxlength="6">
						</u-input>
					</view>
					<u-code keepRunning :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button class="codeBtn" @tap="getCode">{{tips}}</u-button>
					<!-- <button
						class="ss-reset-button code-btn code-btn-start"
						:disabled="getSmsTimer('smsLogin') != '获取验证码'"
						:class="{ 'code-btn-end': getSmsTimer('smsLogin') != '获取验证码' }"
						@tap="getSmsCode('smsLogin', model.mobile)"
					>
						{{ getSmsTimer('smsLogin') }}
					</button> -->
				</view>
			</u-form-item>
		</u-form>

		<!--    <button class="ss-reset-button type-btn" @tap="showAuthModal('smsRegister')"> 立即注册 </button>-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				seconds: 60,
				model: {
					mobile: '',
					code: ''
				},
				rules: {
					mobile: [{
							required: true,
							errorMessage: '请输入手机号',
						},
						{
							validateFunction: function(rule, value, data, callback) {
								if (!test.mobile(value)) {
									callback('手机号码格式不正确');
								}
								return true;
							},
						},
					],
				}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					// uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			smsLoginSubmit() {
				if(!uni.$u.test.mobile(this.model.mobile)){
					return uni.$u.toast("请输入正确手机号");
				}
				if(!this.model.code) {
					return uni.$u.toast("请输入验证码");
				}
				uni.$u.toast("登录成功!");
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/index/index'
					})
				},1000)
			}
		}
	}
	// import {reactive, ref, unref} from 'vue';
	// import sheep from '@/sheep';
	// import {code, mobile} from '@/sheep/validate/form';
	// import {closeAuthModal, getSmsCode, getSmsTimer, showAuthModal} from '@/sheep/hooks/useModal';
	// import {Base64} from 'js-base64'
	// import {onLoad} from "@dcloudio/uni-app";

	// const smsLoginRef = ref(null);

	//   const props = defineProps({
	//     agreeStatus: {
	//       type: Boolean,
	//       default: false,
	//     },
	//   });

	//   // 数据
	//   const state = reactive({
	//     isMobileEnd: false, // 手机号输入完毕
	//     codeText: '获取验证码',
	//     model: {
	//       mobile: '', // 手机号
	//       code: '', // 验证码
	//       uuid: null, // uuid
	//       authInfo: {}
	//     },
	//     rules: {
	//       code,
	//       mobile,
	//     },
	//   });

	//   // 2.短信登录
	//   async function smsLoginSubmit() {
	//     const validate = await unref(smsLoginRef)
	//       .validate()
	//       .catch((error) => {
	//         console.log('error: ', error);
	//       });
	//     if (!validate) return;

	//     state.model.uuid = sheep.$store('user').getUUID('smsLogin')
	//     if (sheep.$store('app').authInfo){
	//       state.model.authInfo = sheep.$store('app').authInfo
	//       // sheep.$store('app').authInfo = null
	//     }
	//     // #ifdef MP
	//     state.model.mpOpenId = uni.getStorageSync('openId');
	//     // #endif
	// 		console.log(state.model,'state.mode')
	//     const data = Base64.encode(JSON.stringify(state.model))
	//     sheep.$api.user.smsLogin(data).then((response) => {
	//       sheep.$helper.toast('登录成功')
	//       closeAuthModal();
	//     })
	//   }
	// 	defineExpose({
	// 		smsLoginSubmit
	// 	})
</script>

<style lang="scss" scoped>
	// @import '../index.scss';
	.code-line {
		width: 100%;
	}
	.input-line {
		display: flex;
		align-items: center;
		width: 100%;
		background-color: #F5F7FB;
		border-radius: 16rpx;
		padding-left: 30rpx;
		height: 88rpx;
		box-sizing: border-box;
	}
	.codeBtn {
		width: 240rpx;
		height: 88rpx;
		background-color: #0256FF;
		border-radius: 16rpx;
		color: #fff;
	}

	.w-370 {
		width: 370rpx;
	}
</style>