推送cid传值,以及打卡签到模块开发

zhangwencui

4 天以前 67461f55748c32d885db965bdff6c2cc63eb327b

 src/pages_template/pages/login/index2.vue

@@ -1,8 +1,12 @@
<template>
   <view>
      <view class="normal-login-container " v-if="page == 'login'">
         <view class="left" @click="back">
            <image src="../../../static/uview/demo/backTop.png" mode="" style="height: 30rpx;"></image>
    <view class="normal-login-container "
          v-if="page == 'login'">
      <view class="left"
            @click="back">
        <image src="../../../static/uview/demo/backTop.png"
               mode=""
               style="height: 30rpx;"></image>
         </view>
         <view class="scale-in-center">
            <view class="logo-content align-center justify-center flex">
@@ -11,54 +15,72 @@
            <view class="login-form-content">
               <view class="input-item flex align-center">
                  <view class="iconfont icon-user icon"></view>
                  <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号"
            <input v-model="loginForm.username"
                   class="input"
                   type="text"
                   placeholder="请输入账号"
                     maxlength="30" />
               </view>
               <view class="input-item flex align-center">
                  <view class="iconfont icon-password icon"></view>
                  <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码"
            <input v-model="loginForm.password"
                   type="password"
                   class="input"
                   placeholder="请输入密码"
                     maxlength="20" />
               </view>
               <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
          <view class="input-item flex align-center"
                style="width: 60%;margin: 0px;"
                v-if="captchaEnabled">
                  <view class="iconfont icon-code icon"></view>
                  <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码"
            <input v-model="loginForm.code"
                   type="number"
                   class="input"
                   placeholder="请输入验证码"
                     maxlength="4" />
                  <view class="login-code">
                     <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
              <image :src="codeUrl"
                     @click="getCode"
                     class="login-code-img"></image>
                  </view>
               </view>
               <view class="action-btn">
                  <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
            <button @click="handleLogin"
                    class="login-btn cu-btn block bg-blue lg round">登录</button>
               </view>
            </view>
         </view>
      </view>


      <!-- 登录 -->
      <view v-else>
         <view class="container">
            <view class="cover slide-top1" :style="'animation-play-state:' + play[2]">
               <view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]"
                  ref="fixedViewRef" :style="'animation-play-state:' + play[0]">
        <view class="cover slide-top1"
              :style="'animation-play-state:' + play[2]">
          <view class="masking slide-top"
                :class="[collapsedClass, { animating: isAnimating }]"
                ref="fixedViewRef"
                :style="'animation-play-state:' + play[0]">
                  <uni-row>
                     <text class="text-first">欢迎使用</text>
                     <text class="text-second">校园访客</text>
                     <text class="text-third">预约系统</text>
                     <view :class="{ active: isActive === true, button: isActive !== true }" @click="startplay"
              <view :class="{ active: isActive === true, button: isActive !== true }"
                    @click="startplay"
                        :style="'animation-play-state:' + play[1]">
                        <uni-row>
                           <text class="text-fifth">访客登录</text>
                        </uni-row>
                     </view>
                     <view class="shadow1" :style="'animation-play-state:' + play[1]" />
                     <view class="shadow2" :style="'animation-play-state:' + play[1]" />
                     <view class="shadow3" :style="'animation-play-state:' + play[1]" />

                     <image
                        style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
              <view class="shadow1"
                    :style="'animation-play-state:' + play[1]" />
              <view class="shadow2"
                    :style="'animation-play-state:' + play[1]" />
              <view class="shadow3"
                    :style="'animation-play-state:' + play[1]" />
              <image style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
                        src="../../../static/uview/common/gray-logo.png"></image>
                     <text class="text-forth" @click="login()">账号密码登录</text>
              <text class="text-forth"
                    @click="login()">账号密码登录</text>
                  </uni-row>
               </view>
            </view>
@@ -73,101 +95,145 @@
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import useUserStore from '@/store/modules/user'
import tab from '@/plugins/tab'
import modal from '@/plugins/modal'
  import { ref, reactive, computed, onMounted } from "vue";
  import { updateClientId } from "@/api/login";
  import useUserStore from "@/store/modules/user";
  import tab from "@/plugins/tab";
  import modal from "@/plugins/modal";

const src = ref("staticimagessoutheast.jpg")
const isActive = ref(false)
const isFixedViewVisible = ref(true)
const animationType = ref("up") // 可选值：right 或 up
const isAnimating = ref(false) // 控制动画执行状态
const play = ref(["paused", "paused", "paused"])
const page = ref("index")
  const src = ref("staticimagessoutheast.jpg");
  const isActive = ref(false);
  const isFixedViewVisible = ref(true);
  const animationType = ref("up"); // 可选值：right 或 up
  const isAnimating = ref(false); // 控制动画执行状态
  const play = ref(["paused", "paused", "paused"]);
  const page = ref("index");

const codeUrl = ref("")
const captchaEnabled = ref(true)
  const codeUrl = ref("");
  const captchaEnabled = ref(true);
const loginForm = reactive({
   username: "admin",
   password: "admin123",
   code: "",
   uuid: ''
})
    uuid: "",
  });

const collapsedClass = computed(() => {
   return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
})
  });

onMounted(() => {
   getCode()
})
    getCode();
  });

const login = () => {
   play.value[2] = "running"
   setTimeout(() => { page.value = 'login' }, 1000)
}
    play.value[2] = "running";
    setTimeout(() => {
      page.value = "login";
    }, 1000);
  };

const back = () => {
   page.value = 'index'
   play.value[0] = "paused"
   play.value[1] = "paused"
   play.value[2] = "paused"
}
    page.value = "index";
    play.value[0] = "paused";
    play.value[1] = "paused";
    play.value[2] = "paused";
  };
const startplay = () => {
   play.value[1] = "running"
    play.value[1] = "running";
   isActive.value = true;
   setTimeout(() => { isActive.value = false; }, 300);
   if (isAnimating.value) { return; }
   isAnimating.value = false; // 开始动画执行
   play.value[0] = "running"
   isFixedViewVisible.value = !isFixedViewVisible.value;
   setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
    setTimeout(() => {
      isActive.value = false;
    }, 300);
    if (isAnimating.value) {
      return;
}
    isAnimating.value = false; // 开始动画执行
    play.value[0] = "running";
    isFixedViewVisible.value = !isFixedViewVisible.value;
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 1000);
  };

// 获取图形验证码
const getCode = () => {
   let res = {}
   captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    let res = {};
    captchaEnabled.value =
      res.captchaEnabled === undefined ? true : res.captchaEnabled;
   if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.img
      loginForm.uuid = res.uuid
      codeUrl.value = "data:image/gif;base64," + res.img;
      loginForm.uuid = res.uuid;
   }
}
  };

// 登录方法
const handleLogin = async () => {
   if (loginForm.username === "") {
      modal.msgError("请输入您的账号")
      modal.msgError("请输入您的账号");
   } else if (loginForm.password === "") {
      modal.msgError("请输入您的密码")
      modal.msgError("请输入您的密码");
   } else if (loginForm.code === "" && captchaEnabled.value) {
      modal.msgError("请输入验证码")
      modal.msgError("请输入验证码");
   } else {
      modal.loading("登录中，请耐心等待...")
      pwdLogin()
      modal.loading("登录中，请耐心等待...");
      pwdLogin();
   }
}
  };

// 密码登录
const pwdLogin = async () => {
   useUserStore().login(loginForm).then(() => {
      modal.closeLoading()
      loginSuccess()
   }).catch(() => {
      if (captchaEnabled.value) {
         getCode()
      }
    useUserStore()
      .login(loginForm)
      .then(() => {
        modal.closeLoading();
        loginSuccess();
   })
      .catch(() => {
        if (captchaEnabled.value) {
          getCode();
}
      });
  };

// 登录成功后，处理函数
const loginSuccess = (result) => {
  const loginSuccess = result => {
   // 设置用户信息
   useUserStore().getInfo().then(res => {
      tab.reLaunch('/pages/index')
   })
    useUserStore()
      .getInfo()
      .then(res => {
        // 登录成功后，将客户端推送标识发送到服务器
        sendClientIdToServer();
        tab.reLaunch("/pages/index");
      });
  };

  // 将客户端推送标识发送到服务器
  const sendClientIdToServer = () => {
    // 获取本地存储的客户端标识
    const clientId = uni.getStorageSync("clientid");
    if (clientId) {
      console.log("登录成功，准备发送客户端标识到服务器:", clientId);
      // 这里调用后端接口发送客户端标识
      // 示例：api.updateClientId({ clientId: clientId });
      updateClientId({ cid: clientId })
        .then(res => {
          console.log("服务器响应:", res);
          if (res.code === 200) {
            console.log("客户端标识已成功发送到服务器");
          } else {
            console.log("服务器返回错误:", res.msg);
}
        })
        .catch(error => {
          console.log("发送客户端标识到服务器失败:", error);
        });
      // 由于没有具体的接口，这里只打印日志
      console.log("客户端标识已发送到服务器");
    } else {
      console.log("未获取到客户端推送标识");
    }
  };
</script>
<style lang="scss">
page {
@@ -234,7 +300,6 @@
            text-align: left;
            padding-left: 15px;
         }

      }

      .login-btn {
@@ -261,14 +326,6 @@
   }
}









.container {
   position: relative;
}
@@ -284,10 +341,12 @@
   border-radius: 50%;
   z-index: 9999;

   background: linear-gradient(180deg,
    background: linear-gradient(
      180deg,
         rgba(110, 109, 122, 0.595),
         rgba(46, 87, 190, 0.714) 70.792%,
         rgb(17, 120, 222) 100%);
      rgb(17, 120, 222) 100%
    );
   box-shadow: inset 0 0 10px 5px rgba(101, 97, 97, 0.5);
}

@@ -320,14 +379,15 @@
   transition: background-color 0.3s;
   z-index: 9999;

   background: linear-gradient(180deg,
    background: linear-gradient(
      180deg,
         rgba(60, 53, 239, 0.595),
         rgba(63, 117, 255, 0.714) 70.792%,
         rgb(70, 161, 253) 100%);
      rgb(70, 161, 253) 100%
    );
   // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

   box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
}

.shadow1 {
@@ -347,8 +407,8 @@

   // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

   box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
   -webkit-animation-name: 'ripple1';
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    -webkit-animation-name: "ripple1";
   /*动画属性名，也就是我们前面keyframes定义的动画名*/
   -webkit-animation-duration: 0.3s;
   /*动画持续时间*/
@@ -377,8 +437,8 @@

   // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

   box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
   -webkit-animation-name: 'ripple2';
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    -webkit-animation-name: "ripple2";
   /*动画属性名，也就是我们前面keyframes定义的动画名*/
   -webkit-animation-duration: 0.4s;
   /*动画持续时间*/
@@ -407,8 +467,8 @@

   // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);

   box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
   -webkit-animation-name: 'ripple3';
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
    -webkit-animation-name: "ripple3";
   /*动画属性名，也就是我们前面keyframes定义的动画名*/
   -webkit-animation-duration: 0.5s;
   /*动画持续时间*/
@@ -551,17 +611,17 @@
}

.slide-top {
   -webkit-animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
   animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
    -webkit-animation: slide-top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
    animation: slide-top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}

.slide-top1 {
   -webkit-animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
   animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
    -webkit-animation: slide-top1 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
    animation: slide-top1 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}

.scale-in-center {
   animation: scale-in-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-top {
@@ -596,7 +656,6 @@
   100% {
      transform: scale(1.4);
      opacity: 0;

   }
}

@@ -608,7 +667,6 @@
   100% {
      transform: scale(1.5);
      opacity: 0;

   }
}

@@ -620,7 +678,6 @@
   100% {
      transform: scale(1.6);
      opacity: 0;

   }
}