itsm-wx-handle/pages/initBind/initBind.vue

<template>
  <view class="repairEntrance">
    <view class="info">
      <view class="info_text">
        <view class="text_left text_justify">您还没有绑定工号，请填写您的工号进行绑定。</view>
      </view>
      <view class="info_form">
        <view class="info_form_item">
          <label for="account" class="label"><text class="required newicon newicon-bitian"></text>工号:</label>
          <uni-easyinput class="flex1" v-model="postData.account" placeholder="请输入工号" focus
            :styles="{borderColor: !postData.account && isSubmmit ? '#f00' : ''}" :primaryColor="primaryColor" />
        </view>
      </view>
    </view>
    <button @click="bind" type="default" class="primaryButton bind">绑定</button>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { post } from "@/http/http.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { reactive, ref } from 'vue'
  
  import { useWechatAuth } from '@/share/useWechatAuth.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  
  useSetTitle()
  const { wechatAuth } = useWechatAuth()

  // 数据
  const postData = reactive({
    account: '',
  })

  // 传参
  const options = reactive({
    wechat: '',
  })

  // easyinput颜色
  const primaryColor = ref(defaultColor)

  // 是否提交
  const isSubmmit = ref(false)

  /**
   * 绑定
   */
  function bind() {
    isSubmmit.value = true;
    if(!postData.account){
      uni.showModal({
        title: '提示',
        content: `请填写工号`,
        showCancel: false,
        confirmColor: defaultColor,
        confirmText: '取消',
      });
      return;
    }
    bindFn();
    
  }
  
  /**
   * 绑定工号
   */
  function bindFn(type) {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    post("/auth/bindAccount", {
      account: postData.account,
      wechat: options.wechat,
      type: type || undefined,
    }).then(res => {
      uni.hideLoading();
      if (res.status == 200) {
        if(type === undefined){
          // 查询
          uni.showModal({
            title: '提示',
            content: `您输入的工号为“${postData.account}”对应姓名“${res.data ? res.data.name : ''}”，您确认绑定吗？`,
            confirmColor: defaultColor,
            confirmText: '确认',
            success: function(res) {
              if (res.confirm) {
                bindFn('bind');
              }
            }
          });
        }else{
          // 绑定
          wechatAuth();
        }
      } else if (res.status == 403) {
        //未查询到
        uni.showModal({
          title: '提示',
          content: `您填写的工号“${postData.account}”，未查询到！请确认工号是否正确，如有问题请联系管理员。`,
          showCancel: false,
          confirmColor: defaultColor,
          confirmText: '取消',
        });
      } else if (res.status == 401) {
        //已被绑定
        uni.showModal({
          title: '提示',
          content: `您填写工号为“${postData.account}”对应姓名为“${res.data ? res.data.name : ''}”已经被绑定，如有误请联系管理员处理。`,
          showCancel: false,
          confirmColor: defaultColor,
          confirmText: '取消',
        });
      } else {
        uni.showModal({
          title: '提示',
          content: res.msg || '请求数据失败！',
          showCancel: false,
          confirmColor: defaultColor,
          confirmText: '取消',
        });
      }
    })
  }

  onLoad((option) => {
    console.log(option);
    options.wechat = option.wechat;
  })
</script>

<style lang="scss" scoped>
  .repairEntrance {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .info {
      .info_text {
        line-height: 56rpx;
        font-size: 34rpx;
        padding: 90rpx 0 58rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .info_form {
        .info_form_item {
          height: 86rpx;
          display: flex;
          align-items: center;
        }
      }
    }

    .bind {
      width: 100%;
      margin-bottom: 24rpx;
    }
  }
</style>