mobile/src/pages/org/index.vue

<template>
  <ay-container>
    <ay-skeletons :rowList="data.rowList" :loading="data.firstLoad">
      <div class="center items-start top">
        <div v-if="data.orgDetail.driverApply">
          <div>加入申请{{ config.common.auditStatus[data.orgDetail.driverApply.auditStatus] }}</div>
          <div v-if="data.orgDetail.driverApply.auditStatus === 3" class="b-fz mt-spac">
            {{ data.orgDetail.driverApply.resMsg }}
          </div>
        </div>
        <uni-easyinput
          suffixIcon="scan"
          v-model="data.orgId"
          placeholder="请输入物流公司企业识别码"
          @iconClick="methods.scan"
          class="getorg flex-1"
          v-if="showFindOrg"
        ></uni-easyinput>
        <img :src="topbgimg" class="bgimg" />
      </div>
      <div v-if="orgInfoSuccess" class="chunk1 bs-fz">
        <div>
          <image src="@img/icons/org_icon.png" class="mr-spac org-icon" />
          <div>{{ data.orgInfo.orgName }}</div>
        </div>
        <div @click="methods.phone(data.orgInfo.bindPhone)" class="mt-spac p-color">
          <uni-icons type="phone" color="" class="mr-spac" size="36"></uni-icons>
          <div class="b-fz">{{ data.orgInfo.bindPhone }}</div>
        </div>
      </div>
      <div class="center m-spac">
        <template v-if="data.orgDetail.driverApply?.auditStatus === 1">
          若想更快审核通过，可以联系企业联系人
        </template>
        <div v-if="data.orgDetail.driverApply?.auditStatus === 3" class="text-center">
          如对处理有异议，请联系物流公司处理或拨打平台客服电话：
          <span class="p-color" @click="methods.phone(store.common.data.phone)">
            <uni-icons type="phone" color="" class="mr-spacd4" size="none"></uni-icons>
            <span>{{ store.common.data.phone }}</span>
          </span>
        </div>
      </div>
      <div class="btns">
        <button
          type="primary"
          :disabled="!orgInfoSuccess"
          v-if="showApply"
          @click="methods.enterMsg"
        >
          {{ btnText }}
        </button>
      </div>
      <uni-popup ref="inputDialog" type="dialog">
        <uni-popup-dialog
          mode="input"
          title="请谨慎操作"
          :beforeClose="true"
          @confirm="methods.apply"
          @close="methods.closePopup"
        >
          <div class="text-center w-100%">
            <div class="mb-spacd2">您将申请{{ hasOrg ? '退出' : '加入' }}该物流公司</div>
            <uni-easyinput
              type="textarea"
              v-model="data.reqMsg"
              placeholder="请填写申请理由"
            ></uni-easyinput>
          </div>
        </uni-popup-dialog>
      </uni-popup>
    </ay-skeletons>
  </ay-container>
</template>

<script lang="ts" setup>
import defbg from '@img/controct_bg.png'
import topbg1 from '@img/driver_apply1.png'
import topbg3 from '@img/driver_apply3.png'
const inputDialog = ref()

const data = reactive({
  firstLoad: true,
  rowList: [
    {
      align: 'left',
      verticalAlign: 'top',
      colItems: [
        {
          style: {
            width: '100%',
            height: '200px',
          },
        },
      ],
    },
    ...Array(10).fill({
      align: 'left',
      colItems: 1,
    }),
    {
      align: 'left',
      colItems: [
        {
          style: {
            width: '60%',
          },
        },
      ],
    },
  ],
  orgId: '',
  reqMsg: '',
  orgInfo: {} as Org对象,
  orgDetail: {} as 司机的企业团队信息,
})

/** 头部背景图 */
const topbgimg = computed(() => {
  let rv = defbg
  if (data.orgDetail.driverApply) {
    if (data.orgDetail.driverApply?.auditStatus === 1) {
      rv = topbg1
    }
    if (data.orgDetail.driverApply?.auditStatus === 3) {
      rv = topbg3
    }
  }
  return rv
})
/** 有所属物流 */
const hasOrg = computed(() => {
  return !!data.orgDetail.org
})
/** 显示申请界面 */
const showApply = computed(() => {
  return data.orgDetail.driverApply?.auditStatus === 3 || !data.orgDetail.driverApply
})
/** 显示企业识别码 */
const showFindOrg = computed(() => {
  return !data.orgDetail.driverApply && !data.orgDetail.org
})
/** 按钮文案 */
const btnText = computed(() => {
  let rv = '申请加入'
  if (hasOrg.value) {
    rv = '申请退出'
  }
  if (data.orgDetail.driverApply?.auditStatus === 3) {
    rv = '再次申请'
  }
  return rv
})
/** 物流id验证成功 */
const orgIdVerified = computed(() => data.orgId.length === 18)
/** 物流信息获取成功 */
const orgInfoSuccess = computed(() => orgIdVerified.value && store.webapi.user.find_4.success)

watch(
  () => data.orgId,
  (nv) => {
    if (orgIdVerified.value) {
      methods.getOrgInfo()
    } else {
      data.orgInfo = {}
    }
  },
)

const methods = {
  phone(num) {
    uni.makePhoneCall({
      phoneNumber: num,
    })
  },
  async scan() {
    const rt: { orgId?: string } = await func.native.scan()
    if (!rt.orgId) {
      func.native.showToast('二维码无效')
      return
    }
    data.orgId = rt.orgId
  },
  closePopup() {
    inputDialog.value.close()
  },
  getOrgInfo() {
    return webapi.user.find_4({ orgId: data.orgId }).then((res) => {
      data.orgInfo = res
    })
  },
  enterMsg() {
    if (data.orgDetail.driverApply?.auditStatus === 3) {
      data.orgDetail.driverApply = null
    } else {
      inputDialog.value.open()
    }
  },
  apply() {
    if (!data.reqMsg) {
      func.native.showToast('请输入申请原因')
      return
    }

    if (store.webapi.user.driver_entry.ing) {
      return
    }
    methods.closePopup()
    if (hasOrg.value) {
      webapi.user.driver_quit({ type: 4, reqMsg: data.reqMsg }).then((res) => {
        if (res) {
          // 退出成功 服务端身份失效
          func.native.showToast('退出成功').then(() => {
            store.user.clearUserInfo()
          })
        } else {
          func.native.showToast('退出失败')
        }
      })
    } else {
      webapi.user
        .driver_entry<{ orgId: string }>({ orgId: data.orgId, reqMsg: data.reqMsg })
        .then((res) => {
          if (res) {
            func.native.showToast('申请成功')
            methods.findOrgDetail()
          } else {
            func.native.showToast('申请失败')
          }
        })
    }
  },
  async findOrgDetail() {
    return webapi.user.find_org_detail({ id: store.user.userInfo.user_id }).then(async (res) => {
      data.orgDetail = res

      // 已申请 自动查询物流公司信息
      if (res.driverApply) {
        data.orgId = res.driverApply.orgId
        await methods.getOrgInfo()
      }
      // 司机有所属物流公司
      if (hasOrg.value) {
        data.orgId = res.org.orgId
        await methods.getOrgInfo()
      }
      if (!res.driverApply || !hasOrg.value) {
        store.webapi.user.find_4.set(enums.ReqState.success)
      }
    })
  },
}

ay.entrance(async (args) => {
  await methods.findOrgDetail()
  data.firstLoad = false
})
</script>

<style lang="scss" scoped>
::v-deep .uni-popup__info {
  @apply: font-bold;
  font-size: $bs-fz;
  color: unset;
}
::v-deep .uni-textarea-textarea,
.uni-easyinput__placeholder-class {
  font-size: $p-fz;
}
::v-deep .uni-easyinput__content {
  .uni-easyinput__content-input {
    height: $p-spac * 3;
    font-size: $bs-fz;
  }
  .uni-easyinput__placeholder-class {
    font-size: $bs-fz;
  }
  .uniui-scan {
    font-size: $p-fz * 2 !important;
  }
}

.top {
  position: relative;
  height: 300rpx;
  padding: $p-spac;
  color: $p-recolor;
  & .bgimg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
  }
}

.org-icon {
  width: 32px;
  height: 32px;
}
</style>