upload 花农小程序（todo商品管理）

xuxy

2024-06-24 a3ad988e9f74049a6b17efd4f3db8389ae6fe7ed

 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;
   }