business_tms_program 0.0.0

package/src/pages/user/repassword.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { useForm } from '@/hooks/useForm';
+import { reactive } from 'vue';
+import { type ValidationRules, validatePsw, verifyCodeRule } from '@/utils/form'; 
+import { useVerifyCode } from "./utils/verifyCode";
+import { throttle } from 'lodash-es';
+import  RippleBtn from '@/components/RippleBtn.vue';
+import { type resetPasswordParams, resetPassword, getResetPswAuth } from '@/api/user';
+import { sendResetPasswordCode } from '@/api/system';
+import { useUserStore } from '@/stores/modules/user';
+import SliderCode from './component/SliderCode.vue';
+
+defineOptions({
+  name: "rePassword"
+});
+const validationRules: ValidationRules<Partial<resetPasswordParams>> = {
+  mobile: { 
+    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 {
+          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
+        } 
+        getResetPswAuth({ mobile: formData.mobile, code: value }).then(res => {
+          if (!res) {
+            state.isValidateCode = false;
+            reject("验证码验证失败");
+          } else {
+            resolve(true);
+            state.isValidateCode = true;
+          }
+        })
+      }
+    )}
+  },
+  password: { required: true, validatFunc: validatePsw },
+  confirmPassword: { required: true, validatFunc: (value: string): any => {
+      return new Promise(async(resolve, reject) => {
+      if (value === "") {
+        reject("请输入");
+      } else if (value !== formData.password) {
+        reject("两次密码不一致");
+      } else {
+        resolve(true);
+      }
+    }
+  );
+  }}
+}
+
+const initialData = {
+  "mobile": undefined,
+  "code": undefined,
+  "password": '',
+  "confirmPassword": ''
+} as resetPasswordParams;
+
+const focusState = reactive({
+  mobile: false,
+  code: false,
+  password: false,
+  confirmPassword: false
+})
+const useStore = useUserStore();
+const { text, end } = useVerifyCode();
+const { formData, errState, setFormItem, validateForm, validateOneField } = useForm<resetPasswordParams>(
+  initialData,
+  validationRules,
+  true,
+)
+const changeValue = (key: keyof resetPasswordParams, detail: any) => {
+  setFormItem(key, detail.value);
+}
+const state = reactive({
+  showPassword: false,
+  isValidateCode: false,
+  isPhoneValidateCode: false,
+  isSliderValidate: false,
+  showCaptcha: false
+})
+const submitForm = throttle(async() => {
+  const validate = await validateForm();
+  if (!validate) {
+    return
+  }
+  const res = await resetPassword(formData)
+  if (res) {
+    uni.showToast({ title: '重置成功,登录中', icon:'success' }) 
+    useStore.toLogin({
+      name: formData.mobile,
+      password: formData.password
+    })
+  }
+}, 1000)
+
+const placeholderStyle =  `color: rgba(0, 0, 0, 0.4)`;
+const togglePasswordVisibility = () => {
+  state.showPassword = !state.showPassword; 
+}
+const clearIcon = (type: keyof resetPasswordParams) => {
+  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 sendResetPasswordCode({ mobile: formData.mobile })
+    if (res) {
+      uni.showToast({ title: '验证码已发送', icon:'success' })
+      useVerifyCode().start()
+    }
+}
+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.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;
+        &.focus {
+          border-bottom-color: #1D6FE9 ; /* 聚焦时改变下划线颜色 */
+          outline: none; /* 移除默认的聚焦轮廓 */
+        }
+      }
+      .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: 16rpx;
+        font-size: 28rpx;
+        color: #1D6FE9;
+        line-height: 40rpx;
+        display: flex;
+        align-items: center;
+        z-index: 5;
+      }
+        .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>

package/src/pages/user/utils/mcaptcha.js

@@ -0,0 +1,75 @@
+// mcaptcha.js
+ 
+export class Mcaptcha {
+  constructor(options) {
+    this.options = options;
+    this.fontSize = options.height * 3 / 6;
+    this.init();
+    this.refresh();
+  }
+  init() {
+    this.ctx = uni.createCanvasContext(this.options.el);
+    this.ctx.setTextBaseline("middle");
+    this.ctx.setFillStyle(this.randomColor(180, 240));
+  }
+  refresh() {
+    var code = '';
+    var txtArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q','r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O','P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',0,1,2,3,4,5,6,7,8,9]
+    for(var i=0;i<4;i++){
+      code += txtArr[this.randomNum(0, txtArr.length)];
+    }
+    this.options.createCodeImg = code;
+    let arr = (code + '').split('');
+    if (arr.length === 0) {
+      arr = ['e', 'r', 'r','o','r'];
+    };
+    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
+    let marginLeft = this.options.width * 0.2;
+    arr.forEach((item, index) => {
+      this.ctx.setFillStyle(this.randomColor(0, 180));
+      let size = this.randomNum(24, this.fontSize);
+      this.ctx.setFontSize(size);
+      let dis = offsetLeft * index + marginLeft - size * 0.3;
+      let deg = this.randomNum(-30, 30);
+      this.ctx.translate(dis, this.options.height*0.5);
+      this.ctx.rotate(deg * Math.PI / 180);
+      this.ctx.fillText(item, 0, 0);
+      this.ctx.rotate(-deg * Math.PI / 180);
+      this.ctx.translate(-dis, -this.options.height * 0.5);
+    })
+    for (var i = 0; i < 4; i++) {
+      this.ctx.strokeStyle = this.randomColor(40, 180);
+      this.ctx.beginPath();
+      this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));
+      this.ctx.stroke();
+    }
+    for (var i = 0; i < this.options.width / 4; i++) {
+      this.ctx.fillStyle = this.randomColor(0, 255);
+      this.ctx.beginPath();
+      this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+    this.ctx.draw();
+  }
+  validate(code){
+    var code = code.toLowerCase();
+    var v_code = this.options.createCodeImg.toLowerCase();
+    console.log(code)
+    console.log(v_code.substring(v_code.length - 4))
+    if (code == v_code.substring(v_code.length - 4)) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  randomNum(min, max) {
+    return Math.floor(Math.random() * (max - min) + min);
+  }
+  randomColor(min, max) {
+    let r = this.randomNum(min, max);
+    let g = this.randomNum(min, max);
+    let b = this.randomNum(min, max);
+    return "rgb(" + r + "," + g + "," + b + ")";
+  }
+}

package/src/pages/user/utils/verifyCode.ts

@@ -0,0 +1,41 @@
+import { ref } from "vue";
+
+const isDisabled = ref(false);
+const timer = ref<number | undefined>(undefined);
+const text = ref("");
+
+export const useVerifyCode = () => {
+  const start = async (
+    time = 60
+  ) => {
+    const initTime = time;
+        clearInterval(timer.value);
+        isDisabled.value = true;
+        text.value = `${time}`;
+        timer.value = setInterval(() => {
+          if (time > 0) {
+            time -= 1;
+            text.value = `${time}`;
+          } else {
+            text.value = "";
+            isDisabled.value = false;
+            clearInterval(timer.value);
+            time = initTime;
+          }
+        }, 1000);
+  };
+
+  const end = () => {
+    text.value = "";
+    isDisabled.value = false;
+    clearInterval(timer.value);
+  };
+
+  return {
+    isDisabled,
+    timer,
+    text,
+    start,
+    end
+  };
+};

package/src/pages/workspace/index.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getOrderList } from '@/api/afterSale'
+import { getInstalltionStatusOrderList } from '@/api/installtion'
+import { installAcceptanceStatusEnum } from '@/dict/installtion'
+import Skeleton from '@/components/Skeleton.vue';
+import { workStatus as workStatusEnum } from '@/dict/afterSale'
+import { useUserStore } from '@/stores/modules/user';
+
+defineOptions({
+  name: "workspace"
+});
+const useStore = useUserStore();
+const itemList = [
+  {
+    title: '故障提报',
+    icon: '/static/img/fault_icon.png',
+    url: '/pages/afterSale/faultReport',
+    type: 'faultReport'
+  }, 
+  {
+    title: '售后工单',
+    icon: '/static/img/afterSale_icon.png',
+    url: '/pages/afterSale/orderList',
+    type: 'afterSale',
+    hasNum: true
+  },
+  {
+    title: '安装工单',
+    icon: '/static/img/install_icon.png',
+    url: '/pages/installtion/orderList',
+    type: 'installOrder',
+    hasNum: true
+  },
+  {
+    title: '扫一扫',
+    icon: '/static/img/scan_icon.png',
+    url: '/pages/workspace/orderList',
+    type: 'scan'
+  },
+  {
+    title: '设备管理',
+    icon: '/static/img/equipment_icon.png',
+    url: '/pages/device/index',
+    type:'equipment'
+  },
+]
+const perms = computed(() => useStore.getPermsList)
+const state = reactive({
+  afterSaleOrderNum: 0, // 售后工单数量
+  installNum: 0, // 安装工单数量
+  loading: false
+})
+const menuList = computed(() => {
+  return itemList.filter((item) => {
+    return perms.value.includes(item.url.slice(1).replaceAll('/', ':'))
+  })
+})
+const getAfterSaleOrderNum = async () => {
+   const res = await getOrderList({
+      size: 10,
+      current: 1,
+      status: workStatusEnum.uncomplete,
+    }); 
+    const { total } = res
+    if (!res) {
+      uni.showToast({
+        title: '获取售后工单数量失败',
+        icon: 'none'
+      })
+      return
+    }
+    state.afterSaleOrderNum = total
+}
+const getInstallNum = async () => {
+  state.loading = true
+   const res = await getInstalltionStatusOrderList({
+      size: 10,
+      current: 1,
+      status: installAcceptanceStatusEnum.NO,
+    }); 
+    const { total } = res
+    state.loading = false
+    if (!res) {
+      uni.showToast({
+        title: '获取安装工单数量失败',
+        icon: 'none'
+      })
+      return
+    }
+    state.installNum = total
+}
+const toScan = () => {
+    uni.scanCode({
+        scanType: ['barCode', 'qrCode', 'wxCode'],
+        success: (res: UniApp.ScanCodeSuccessRes) => {
+          const { scanType, result } = res;
+          if (scanType === "QR_CODE" && result) {
+            // 截取url的deviceSn参数
+            const hash = result.split("?")[1] || "";
+            const deviceSn = hash.replaceAll("deviceSn=", '');
+            if (deviceSn) {
+              uni.navigateTo({
+                url: `/pages/device/detail?deviceCode=${deviceSn}`
+              });
+              return;
+            }
+          }
+          if (!res.result) {
+            uni.showToast({
+              title: '未识别到设备',
+              icon: 'none'
+            });
+            return;
+          }
+          if (res.scanType === "CODE_128") {
+            uni.navigateTo({
+              url: `/pages/device/detail?deviceCode=${res.result}`
+            }) 
+          }
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '扫码失败',
+            icon: 'none'
+          });
+        }
+    });
+}
+const navigateTo = (item: any) => {
+  var b = ssss
+  if (item.type === 'scan') {
+    toScan()
+    return
+  }
+  uni.navigateTo({ 
+    url: item.url
+  }) 
+}
+onShow(async () => {
+  useStore.getUserInfoFunc(() => {
+    getAfterSaleOrderNum()
+    getInstallNum()
+  })
+  uni.$on('workspace-updated', () => {
+    getAfterSaleOrderNum(); // 刷新数据
+    getInstallNum()
+  });
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="title">常用功能</view>
+      <view class="skeleton-box" v-if="state.loading">
+        <Skeleton></Skeleton>
+        <Skeleton></Skeleton>
+        <Skeleton></Skeleton>
+      </view>
+    <view class="grid-container" v-else>
+      <view class="grid-item" v-for="item in menuList" :key="item.type" @click="navigateTo(item)">
+        <image class="uni-icon" :src="item.icon"></image>
+        <view v-if="item.hasNum" class="num">
+          {{ item.type === 'afterSale' ? state.afterSaleOrderNum : state.installNum}}
+          </view>
+        {{ item.title }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+  padding: 32rpx;
+    .title {
+        font-size: 36rpx;
+        color: #000000;
+        line-height: 52rpx;
+        font-weight: 500;
+    }
+    .grid-container {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 32rpx;
+        background-color: #fff;
+        border-radius: 16rpx;
+    }
+    .grid-item {
+        flex: 0 0 33.3333%; 
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 44rpx 0;
+        font-size: 28rpx;
+        color: rgba(0,0,0,0.85);
+        line-height: 44rpx;
+        position: relative;
+        .num{
+          position: absolute;
+          top: 32rpx;
+          right: 72rpx;
+          padding: 2rpx 12rpx 2rpx 10rpx;
+          font-weight: 500;
+          font-size: 20rpx;
+          color: #FFFFFF;
+          line-height: 26rpx;
+          z-index: 3;
+          background: #E34D59;
+          border-radius: 32rpx;
+        }
+    }
+   .uni-icon {
+    margin-bottom: 12rpx;
+     width: 80rpx;
+    height: 80rpx;
+   }
+   .skeleton-box {
+      margin-top: 32rpx;
+      border-radius: 16rpx;
+   }
+}
+</style>