From a3ad988e9f74049a6b17efd4f3db8389ae6fe7ed Mon Sep 17 00:00:00 2001
From: xuxy <1059738716@qq.com>
Date: 星期一, 24 六月 2024 17:06:05 +0800
Subject: [PATCH] upload 花农小程序（todo商品管理）
---
pages/login/farmer-login.vue | 104 ++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 77 insertions(+), 27 deletions(-)
diff --git a/pages/login/farmer-login.vue b/pages/login/farmer-login.vue
index b7cd8ea..1f71a78 100644
--- a/pages/login/farmer-login.vue
+++ b/pages/login/farmer-login.vue
@@ -2,43 +2,38 @@
<view class="main-container login-container img100" style="margin-top: 0rpx;">
<view class="t-login top-bg">
- <view class="icons">
- <image class="icon1" src="../../static/imgs/user/usr-icon1.png" mode="aspectFit"></image>
- <image class="icon2" src="../../static/imgs/home/home-shop-top-icon.png" mode="aspectFit"></image>
- </view>
+ <view class="nav-title">登录</view>
<view class="login">
<form class="cl">
<view class="t-a titles-top">
<view class="title-1">HELLO</view>
- <view class="title-2">欢迎登录<span class="title-2">花满芜</span></view>
+ <view class="title-2">欢迎登录<span class="title-3">花满芜</span></view>
</view>
- <view class="t-a">
- <!-- <image src="/static/username.png"></image> -->
- <!-- <uni-icons class="icon" type="person-filled" size="32" color="#04BA97"></uni-icons> -->
-
- <!-- <view class="line"></view> -->
+ <view class="t-a input" v-if="loginType=='pwd'">
<input type="text" name="userName" placeholder="请输入账号" v-model="userName" />
</view>
- <view class="t-a">
- <!-- <image src="/static/password.png"></image> -->
- <!-- <uni-icons class="icon" type="locked-filled" size="32" color="#04BA97"></uni-icons> -->
- <!-- <view class="line"></view> -->
+ <view class="t-a input" v-if="loginType=='pwd'">
<input type="text" :password="true" name="password" placeholder="请输入密码" v-model="password" />
</view>
- <view class="main-container" v-if="false">
- <checkbox-group @change="changeAll" style="float:left;">
- <label class="checkbox">
- <checkbox value="1" :checked="checked" />
- </label>
- </checkbox-group>
- 同意<text @click="tc1(1)" style="color:red;">《用户服务协议》</text>及
- <text @click="tc1(2)" style="color:red;">《隐私政策》</text>
+ <view class="t-a input" v-if="loginType=='code'">
+ <view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
+ {{getCodeText}}
+ </view>
+
+ <input type="text" name="userName" placeholder="请输入手机号" v-model="phoneNumber" />
+
</view>
- <button @tap="login()" style="background-color: #04BA97;">登 录</button>
- <!-- <view @tap="backpage" class="to-home">返回首页</view> -->
+
+
+ <view class="t-a input" v-if="loginType=='code'">
+ <input type="text" :password="true" name="password" placeholder="请输入密码" v-model="password" />
+ </view>
+
+ <button @tap="login()" class="bottom-button">登 录</button>
+
<view class="flex">
- <view class="topic-font">手机验证码登录</view>
- <view class="topic-font">前往注册</view>
+ <view class="topic-font" @click="loginType='code'">手机验证码登录</view>
+ <view class="topic-font m-l-a m-r-0" @click="toReg">前往注册</view>
</view>
</form>
</view>
@@ -56,16 +51,70 @@
// userName: '12345678',
// password: '12345678',
userName: '',
+ phoneNumber: '',
password: '',
checked: false,
+ loginType: 'pwd', //pwd和code，密码和验证码登录
pcfvalue: undefined,
+ getCodeText: '获取验证码',
+ getCodeBtnColor: "#20613D",
+ getCodeisWaiting: false,
+ Timer: undefined
};
},
methods: {
- toHome() {
+ getCode() {
+ uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
+ if (this.getCodeisWaiting) {
+ return;
+ }
+ if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
+ uni.showToast({
+ title: '请填写正确手机号码',
+ icon: "none"
+ });
+ return false;
+ }
+ this.getCodeText = "发送中..." //发送验证码
+ this.getCodeisWaiting = true;
+ this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
+ //示例用定时器模拟请求效果
+ //setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
+ setTimeout(() => {
+ uni.showToast({
+ title: '验证码已发送',
+ icon: "none"
+ }); //弹出提示框
+ //示例默认1234，生产中请删除这一句。
+ // this.code = '1234'; //发送验证码，进行填入
+ this.setTimer(); //调用定时器方法
+ }, 1000)
+ },
+ //setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
+ setTimer() {
+ let holdTime = 60; //定义变量并赋值
+ this.getCodeText = "重新获取(60)"
+ //setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
+ //setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
+ this.Timer = setInterval(() => {
+ if (holdTime <= 0) {
+ this.getCodeisWaiting = false;
+ this.getCodeBtnColor = "#20613D";
+ this.getCodeText = "获取验证码"
+ clearInterval(this.Timer); //清除该函数
+ return; //返回前面
+ }
+ this.getCodeText = "重新获取(" + holdTime + ")"
+ holdTime--;
+ }, 1000)
+ },
+ toReg() {
// uni.switchTab({
// url: '/pages/index/index'
// })
+ uni.navigateTo({
+ url: '/pages/login/farmer-reg'
+ })
},
changeAll(e) {
@@ -178,6 +227,7 @@
.t-login .login {
width: 650rpx;
margin: 60rpx auto;
+ margin-top: 0rpx;
font-size: 28rpx;
color: #000;
}
--
Gitblit v1.9.3