business_tms_program 0.0.0

package/src/pages/user/login.vue

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+import { useForm } from '@/hooks/useForm';
+import { type ValidationRules, validatePsw } from '@/utils/form'; 
+import { throttle } from 'lodash-es';
+import { useUserStore } from '@/stores/modules/user';
+import  RippleBtn from '@/components/RippleBtn.vue';
+import PrivayAgree from './component/PrivayAgree.vue';
+import PersonAgree from './component/PersonAgree.vue';
+import Drawer from '@/components/Drawer.vue';
+import loginBg from '@/static/img/login_bg2.png'
+
+defineOptions({
+  name: "login"
+});
+type FormDataType = {
+  name: string;
+  password: string;
+}
+// 定义校验规则
+const validationRules: ValidationRules<FormDataType> = {
+  name: { 
+    required: true, 
+    message: '请输入手机号码',
+    validatFunc: (value: string): any => {
+      return new Promise((resolve, reject) => {
+        if (!value) {
+          reject('请输入手机号码')
+        } else if (!/^1[3-9]\d{9}$/.test(value)) {
+          reject('请输入正确的手机号码')
+        } else {
+          resolve(true)
+        }
+      })
+    }
+  },
+  password: { required: true, validatFunc: validatePsw, message: '请输入密码' },
+}
+
+const initialData = {
+  name: '',
+  password: '',
+  files: [] 
+} as FormDataType;
+
+const useStore = useUserStore();
+const focusState = reactive({
+  name: false,
+  password: false,
+})
+const { formData, errState, setFormItem, validateForm } = useForm<FormDataType>(
+  initialData,
+  validationRules,
+  true,
+)
+const headerHeight = ref(0);
+const hasAgree = ref(false);
+const showDrawer = ref(false);
+const agreementType = ref('privacy');
+const showPassword = ref(false);
+const changeValue = (key: keyof FormDataType, detail: any) => {
+  setFormItem(key, detail.value);
+}
+
+const submitForm = throttle(async() => {
+  const validate = await validateForm()
+  if (!validate) {
+    return
+  }
+  if (!hasAgree.value) {
+    uni.showToast({
+      title: '请先阅读协议',
+      icon: 'none'
+    })
+    return;
+  }
+  useStore.toLogin(formData)
+}, 1000)
+
+onLoad(() => {
+  const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+  headerHeight.value = (menuButtonInfo.height + menuButtonInfo.top + 8) * 2;
+})
+const placeholderStyle =  `color: rgba(0, 0, 0, 0.4)`;
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value; 
+}
+const toRegiter = () => {
+  uni.redirectTo({ url: '/pages/user/register' }) 
+}
+const toResetPwd = () => {
+  uni.redirectTo({ url: '/pages/user/rePassword' })
+}
+const checkboxChange = (e: any) => {
+  hasAgree.value = e.detail.value.includes('aggrement');
+}
+const toAgree = () => {
+  showDrawer.value = false;
+  hasAgree.value = true;
+}
+const showAgreement = (type:string) => {
+  showDrawer.value = true;
+  agreementType.value = type;
+}
+</script>
+
+<template>
+    <image class="bgImg" :src="loginBg" mode="aspectFill" />
+    <view class="page-content">
+      <view class="header" :style="{height: `${headerHeight}rpx`}"><view class="title">诚一工单</view></view>
+      <canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
+      <form class="form-content">
+        <view class="systemName">手机登录页</view>
+        <view class="uni-form-item uni-column">
+          <input class="uni-input"
+            :value="formData.name"
+            :class="focusState.name ? 'focus' : ''"
+            :placeholder-style="placeholderStyle" type="text" placeholder="请输入手机号"
+            @input="(e: any) => changeValue('name', e.detail)"
+            @focus="focusState.name = true"
+            @blur="focusState.name = false"
+            />
+        </view>
+        <view class="err-text" v-if="errState.name">{{errState.name}}</view>
+        <view class="uni-form-item uni-column">
+          <input class="uni-input"
+            :value="formData.password"
+            :class="focusState.password ? 'focus' : ''"
+            :placeholder-style="placeholderStyle"
+            :password="!showPassword" placeholder="请输入密码"
+            @input="(e: any) => changeValue('password', e.detail)"
+            @focus="focusState.password = true"
+            @blur="focusState.password = false"
+            />
+              <image class="uni-icon" :src="
+                !showPassword
+                  ? '/static/img/psw_off.png'
+                  : '/static/img/psw_on.png'
+              " @click="togglePasswordVisibility"></image>
+        </view>
+        <view class="err-text" v-if="errState.password">{{errState.password}}</view>
+      </form>
+      <RippleBtn @click="submitForm" :customStyle="'padding-bottom: 10rpx'">
+        <view class="submit-btn">登 录</view>
+      </RippleBtn>
+      <view class="otherControl"><view @click="toRegiter">注册</view><view @click="toResetPwd">忘记密码</view></view>
+      <view class="aggrement">
+        <checkbox-group name="aggrement" @change="checkboxChange">
+					<label class="checkbox">
+						<checkbox value="aggrement" :checked="hasAgree" style="transform:scale(0.6)" />
+              <view class="flex">我已阅读</view>
+					</label>
+				</checkbox-group>
+        <view class="aggrement-text">
+          <view class="text" @click="showAgreement('person')">《服务协议》</view>与
+          <view class="text" @click="showAgreement('privacy')">《隐私政策》</view><view>并理解相关条款内容</view>
+        </view>
+      </view>
+    </view>
+      <drawer v-model="showDrawer" :height="70">
+        <view class="agree-box">
+        <scroll-view scroll-y class="scroll-box">
+          <view class="agree-content">
+            <PrivayAgree v-if="agreementType === 'privacy'"/>
+            <PersonAgree v-else />
+            <view class="agree-btn" @click="toAgree">同意</view>
+          </view>
+        </scroll-view>
+        </view>
+      </drawer>
+  </template>
+  
+  <style scoped>
+  .bgImg{
+    position: relative;
+    width: 100%;
+    height: 1624rpx;
+    z-index: 1;
+  }
+  .page-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    .header{
+      width: 100%;
+      height: 190rpx;
+      background: rgba(255,255,255,0.05);
+      backdrop-filter: blur(32rpx); 
+      border-bottom: 1rpx solid rgba(0,0,0,0.05);
+      .title{
+       position: absolute;
+       bottom: 16rpx;
+       width: 100%;
+       font-weight: bold;
+       font-size: 40rpx;
+       line-height: 58rpx;
+       text-align: center;
+      }
+    }
+    .form-content{
+      margin-bottom: 96rpx;
+      padding: 0 48rpx;
+    }
+    .systemName{
+      margin-top: 556rpx;
+      margin-bottom: 22rpx;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: bold;
+      font-size: 48rpx;
+      color: #000000;
+      line-height: 70rpx;
+    }
+    .uni-form-item {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      margin-top: 40rpx;
+      padding: 0 16rpx;
+      position: relative;
+      .uni-input {
+        flex: 1;
+        padding: 12rpx 0;
+        border-bottom: 1rpx solid rgba(0,0,0,0.05);
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        font-size: 32rpx;
+        color: black;
+        line-height: 48rpx;
+        text-align: left;
+        font-style: normal;
+        /* 防止字体变化 */
+        min-height: 48rpx;
+        &.focus {
+          border-bottom-color: #1D6FE9 ; /* 聚焦时改变下划线颜色 */
+          outline: none; /* 移除默认的聚焦轮廓 */
+          line-height: 48rpx !important; /* 强制保持行高 */
+          font-size: 32rpx !important; /* 强制保持字体大小 */
+        }
+      }
+      .eyeBox{
+        position: absolute;
+        right: 16rpx;
+        top: 12rpx;
+        width: 120rpx;
+        height: 48rpx;
+      }
+      .uni-icon{
+       position: absolute;
+       right: 32rpx;
+       top: 16rpx;
+       width: 32rpx;
+       height: 32rpx;
+       z-index: 5;
+      }
+    }
+    .err-text{
+      margin-top: 8rpx;
+      padding-left: 16rpx;
+      font-size: 24rpx;
+      color: rgb(245, 140, 140);
+    }
+   .submit-btn{
+      margin-left: 32rpx;
+      padding: 24rpx 300rpx 26rpx 298rpx;
+      line-height: 58rpx;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      font-size: 40rpx;
+      color: rgba(255, 255, 255, 0.9);
+      background: linear-gradient( 270deg, #1D9DE9 0%, #1D6FE9 100%);
+      box-shadow: 0px 16rpx 16rpx 2rpx rgba(29,157,233,0.1);
+      border-radius: 52rpx;
+   }
+   .otherControl{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 28rpx;
+      margin-bottom: 244rpx;
+      padding: 0 64rpx;
+      font-size: 28rpx;
+      color: rgba(0,0,0,0.4);
+      line-height: 40rpx;
+   }
+   .agreement{
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.2);
+    line-height: 34rpx;
+    text-align: center;
+   }
+  }
+    .aggrement{
+      position: fixed;
+      bottom: 96rpx;
+      left: 32rpx;
+      overflow-y: auto;
+      display: flex;
+      align-items: center;
+      .checkbox{
+        display: flex;
+        align-items: center;
+        font-size: 24rpx;
+        color: rgba(0,0,0,0.6);
+        line-height: 32rpx;
+      }
+      .aggrement-text{
+        display: flex;
+        font-size: 24rpx;
+        color: rgba(0,0,0,0.6);
+        line-height: 32rpx;
+      }
+      .text {
+        color: #1D6FE9;
+      }
+  }
+  .agree-box{
+    padding: 80rpx 32rpx 24rpx 32rpx;
+    .scroll-box{
+      height: calc(70vh - 154rpx);
+    }
+    .agree-content{
+      padding-bottom: 32rpx;
+    }
+    .agree-btn{
+      text-align: center;
+      width: 560rpx;
+      margin: 24rpx auto 22rpx auto;
+      padding: 10rpx 0 12rpx 0;
+      line-height: 48rpx;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      font-size: 27rpx;
+      color: rgba(255, 255, 255, 0.9);
+      background: linear-gradient( 270deg, #1D6FE9 0%, #1D9DE9 100%);
+      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,191,41,0.16);
+    }
+  }
+  </style>

package/src/pages/user/register.vue

@@ -0,0 +1,348 @@
+<script setup lang="ts">
+import { useForm } from '@/hooks/useForm';
+import { reactive } from 'vue';
+import { type ValidationRules, validatePsw } from '@/utils/form'; 
+import { useVerifyCode } from "./utils/verifyCode";
+import { throttle } from 'lodash-es';
+import  RippleBtn from '@/components/RippleBtn.vue';
+import { type registerParams, registerApi, getRegisterPswAuth } from '@/api/user';
+import { sendRegisterCode } from '@/api/system';
+import SliderCode from './component/SliderCode.vue';
+
+defineOptions({
+  name: "register"
+});
+
+const initialData = {
+ "nickname": '',
+  "mobile": undefined,
+  "code": undefined,
+  "password": '',
+  "confirmPassword": ''
+} as registerParams;
+const validationRules: ValidationRules<Partial<registerParams>> = {
+  mobile: { 
+    required: true, 
+    validatFunc: (value: any): any => {
+      return new Promise((resolve, reject) => {
+          if (value === "") {
+            reject("请输入");
+          } else if (!/^1[3-9]\d{9}$/.test(value)) {
+            reject("手机号格式不正确");
+          } else {
+            state.isPhoneValidateCode = true;
+            resolve(true);
+          }
+        })
+    } // 添加手机号验证规则
+  },
+  code: { required: true, validatFunc: (value: any): any => {
+    return new Promise(async(resolve, reject) => {
+        if (value === "") {
+          state.isValidateCode = false;
+          reject("请输入验证码");
+          return
+        } if (!/^\d{6}$/.test(value)) {
+          state.isValidateCode = false;
+          reject("验证码格式不正确");
+          return
+        } 
+        getRegisterPswAuth({ mobile: formData.mobile, code: value }).then(res => {
+          if (!res) {
+            state.isValidateCode = false;
+            reject("验证码验证失败");
+          } else {
+            resolve(true);
+            state.isValidateCode = true;
+          }
+        })
+      }
+    )}
+  },
+  nickname: { required: true, validatFunc: (value: string): any => {
+      return new Promise(async(resolve, reject) => {
+        if (!value) {
+          reject("请输入");
+        } else if (!/^[\u4e00-\u9fa5a-zA-Z0-9]{2,10}$/.test(value)) {
+          reject("2-10字，请勿使用特殊字符");
+        } else {
+          resolve(true);
+        }
+      }
+    );
+  }},
+  password: { required: true, message: '请输入', validatFunc: validatePsw  },
+  confirmPassword: { required: true, validatFunc: (value: string): any => {
+      return new Promise(async(resolve, reject) => {
+        if (value !== formData.password) {
+          reject("两次密码不一致");
+        } else {
+          resolve(true);
+        }
+      }
+    );
+  }}
+}
+const focusState = reactive({
+  nickname: false,
+  mobile: false,
+  code: false,
+  password: false,
+  confirmPassword: false
+})
+const { text, end } = useVerifyCode();
+const { formData, errState, setFormItem, validateForm,
+    validateOneField } = useForm<registerParams>(
+  initialData,
+  validationRules
+)
+const state = reactive({
+  showPassword: false,
+  isValidateCode: false,
+  isPhoneValidateCode: false,
+  isSliderValidate: false,
+  showCaptcha: false,
+})
+const changeValue = (key: keyof registerParams, detail: any) => {
+  if (key === 'code') {
+    validateOneField('code')
+  }
+  setFormItem(key, detail.value);
+}
+
+const submitForm = throttle(async() => {
+  const validateResult = await validateForm();
+  if (!validateResult) {
+    return;
+  }
+  const res = await registerApi(formData)
+  if (res) {
+    uni.showToast({ title: '注册成功,请联系管理员配置权限！', icon: 'success' }) 
+  }
+}, 1000)
+const togglePasswordVisibility = () => {
+  state.showPassword = !state.showPassword; 
+}
+const clearIcon = (type: keyof registerParams) => {
+  setFormItem(type, '')
+}
+const getVerifyCode = async() => {
+  const validate = await validateOneField('mobile')
+  if (!validate) {
+    return
+  }
+  if (state.isSliderValidate) {
+    successVlidate()
+    return
+  }
+  state.showCaptcha = true;
+}
+const successVlidate = async() => {
+  state.isSliderValidate = true;
+  const res = await sendRegisterCode({ mobile: formData.mobile })
+  if (res) {
+    uni.showToast({ title: '验证码已发送', icon:'success' })
+    useVerifyCode().start()
+  }
+}
+const placeholderStyle =  `color: rgba(0, 0, 0, 0.4)`;
+onShow(() => {
+  end()
+})
+</script>
+
+<template>
+    <view class="content">
+      <form class="form-content">
+        <view class="systemName">新用户注册</view>
+        <view class="uni-form-item uni-column">
+          <input class="uni-input" 
+            :class="focusState.mobile ? 'focus' : ''"
+            :placeholder-style="placeholderStyle" type="text" placeholder="请输入手机号"
+            :value="formData['mobile']"
+            @input="(e: any) => changeValue('mobile', e.detail)" 
+            @focus="focusState.mobile = true"
+            @blur="focusState.mobile = false"
+          />
+           <image class="uni-icon" 
+            src="/static/img/close.png" 
+            v-if="formData['mobile']" 
+            @click="clearIcon('mobile')">
+          </image>
+        </view>
+        <view class="err-text" v-if="errState.mobile">{{errState.mobile}}</view>
+        <SliderCode v-model="state.showCaptcha" @successVlidate="successVlidate" />
+        <view class="uni-form-item uni-column">
+          <input class="uni-input" 
+            :class="focusState.code ? 'focus' : ''"
+            :placeholder-style="placeholderStyle" placeholder="请输入验证码"
+            @input="(e: any) => changeValue('code', e.detail)"
+            @focus="focusState.code = true"
+            @blur="focusState.code = false"
+            />
+          <view class="getCode">
+            <view v-if="text.length > 0">{{`${text}s`}}</view>
+            <view v-else @click="getVerifyCode()">获取验证码</view>
+            <image class="confirm-icon"
+              v-if="state.isValidateCode"
+              src="/static/img/confirm.png" 
+            ></image>
+          </view>
+        </view>
+        <view class="err-text" v-if="errState.code">{{errState.code}}</view>
+        <view class="uni-form-item uni-column">
+          <input class="uni-input" 
+            :class="focusState.nickname ? 'focus' : ''"
+            :placeholder-style="placeholderStyle" placeholder="请输入姓名"
+            @input="(e: any) => changeValue('nickname', e.detail)"
+            @focus="focusState.nickname = true"
+            @blur="focusState.nickname = false"
+            />
+        </view>
+        <view class="err-text" v-if="errState.nickname">{{errState.nickname}}</view>
+        <view class="uni-form-item uni-column">
+          <input class="uni-input" 
+            :class="focusState.password ? 'focus' : ''"
+            :placeholder-style="placeholderStyle" :password="!state.showPassword" placeholder="请输入密码"
+            @input="(e: any) => changeValue('password', e.detail)"
+            @focus="focusState.password = true"
+            @blur="focusState.password = false"
+            />
+              <image class="uni-icon" :src="
+                !state.showPassword
+                  ? '/static/img/psw_off.png'
+                  : '/static/img/psw_on.png'
+              " @click="togglePasswordVisibility"></image>
+        </view>
+        <view class="err-text" v-if="errState.password">{{errState.password}}</view>
+
+        <view class="uni-form-item uni-column">
+          <input class="uni-input" 
+            :class="focusState.confirmPassword ? 'focus' : ''"
+            :placeholder-style="placeholderStyle" password placeholder="请确认密码"
+            @input="(e: any) => changeValue('confirmPassword', e.detail)"
+            @focus="focusState.confirmPassword = true"
+            @blur="focusState.confirmPassword = false"
+            />
+        </view>
+        <view class="err-text" v-if="errState.confirmPassword">{{errState.confirmPassword}}</view>
+      </form>
+      <RippleBtn @click="submitForm" :customStyle="'padding-bottom: 10rpx'">
+        <view class="submit-btn">提交入驻</view>
+      </RippleBtn>
+    </view>
+  </template>
+  
+  <style scoped>
+  .content {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    .form-content{
+      margin-bottom: 216rpx;
+      padding: 0 48rpx;
+    }
+    .systemName{
+      margin-top: 64rpx;
+      margin-bottom: 64rpx;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: bold;
+      font-size: 48rpx;
+      color: #000000;
+      line-height: 70rpx;
+    }
+    .uni-form-item {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      margin-top: 40rpx;
+      padding: 0 16rpx;
+      position: relative;
+      .uni-input {
+        flex: 1;
+        padding: 12rpx 0;
+        border-bottom: 1rpx solid rgba(0,0,0,0.05);
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        font-size: 32rpx;
+        color: black;
+        line-height: 48rpx;
+        text-align: left;
+        font-style: normal;
+          /* 防止字体变化 */
+        min-height: 48rpx;
+        &.focus {
+          border-bottom-color: #1D6FE9 ; /* 聚焦时改变下划线颜色 */
+          outline: none; /* 移除默认的聚焦轮廓 */
+          line-height: 48rpx !important; /* 强制保持行高 */
+          font-size: 32rpx !important; /* 强制保持字体大小 */
+        }
+      }
+      .eyeBox{
+        position: absolute;
+        right: 16rpx;
+        top: 12rpx;
+        width: 120rpx;
+        height: 48rpx;
+      }
+      .uni-icon{
+       position: absolute;
+       right: 32rpx;
+       bottom: 16rpx;
+       width: 32rpx;
+       height: 32rpx;
+       z-index: 5;
+      }
+     .getCode{
+        position: absolute;
+        right: 32rpx;
+        bottom: 18rpx;
+        font-size: 28rpx;
+        color: #1D6FE9;
+        line-height: 40rpx;
+        z-index: 5;
+        display: flex;
+        align-items: center;
+        .confirm-icon{
+          width: 36rpx;
+          height: 36rpx;
+          margin-left: 16rpx;
+        }
+     }
+    }
+    .err-text{
+      margin-top: 8rpx;
+      padding-left: 16rpx;
+      font-size: 24rpx;
+      color: rgb(250, 100, 100);
+    }
+   .submit-btn{
+      margin-left: 32rpx;
+      padding: 24rpx 262rpx 26rpx 262rpx;
+      line-height: 58rpx;
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      font-size: 40rpx;
+      color: rgba(255, 255, 255, 0.9);
+      background: linear-gradient( 270deg, #1D9DE9 0%, #1D6FE9 100%);
+      box-shadow: 0px 16rpx 16rpx 2rpx rgba(29,157,233,0.1);
+      border-radius: 52rpx;
+   }
+   .otherControl{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 28rpx;
+      margin-bottom: 244rpx;
+      padding: 0 64rpx;
+      font-size: 28rpx;
+      color: rgba(0,0,0,0.4);
+      line-height: 40rpx;
+   }
+   .agreement{
+    font-size: 24rpx;
+    color: rgba(0,0,0,0.2);
+    line-height: 34rpx;
+    text-align: center;
+   }
+  }
+  </style>