usky-web-mobile/src/pages/common/invoicing/index.vue

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs :list="tabsList" :current="tabsCurrent" @click="tabsClick" lineColor="#333" :activeStyle="{ color: '#333' }" :inactiveStyle="{ color: '#909399' }" :scrollable="false"></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass="invoicing-container scroll-height"
    :customStyle="{}"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :scrollIntoView="scrollIntoView"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <view v-show="tabsCurrent == 0">
      <u-notice-bar id="noticeBar" v-if="promptStatus" text="注：查询到您近期有开票记录，请勿重复开票" :duration="9000" color="#FF0000" bgColor="#FFFFFF"></u-notice-bar>

      <view class="menu-list" style="font-size: 15px; line-height: 30px">
        <view class="list-cell">
          <view class="menu-item">
            <view>
              您的物联网服务
              <span style="color: red">即将到期</span>
              ，如需续费请联系您的专职销售顾问，如已付费可直接填写开票信息。
            </view>
          </view>
        </view>
        <view class="list-cell" style="color: #666666">
          <view class="menu-item">
            <view> 客户经理：李鹏 </view>
          </view>
          <view class="menu-item">
            <view> 联系方式：18621761642（同微信） </view>
            <view class="iconfont oaIcon-copy menu-item-icon" style="font-size: 14px; color: #909399" @click="copy('18621761642')"> </view>
          </view>
          <view class="menu-item">
            <view style="margin-right: 10px"> 邮箱：seven.li@chinausky.com </view>
            <view class="iconfont oaIcon-copy menu-item-icon" style="font-size: 14px; color: #909399" @click="copy('seven.li@chinausky.com')"> </view>
          </view>
          <view class="menu-item">
            <view> 客服电话：021-65376655</view>
            <view class="iconfont oaIcon-dial menu-item-icon" style="font-size: 14px; color: #909399; margin-left: 5px" @click="proxy.$common.makePhoneCall('02165376655')"> </view>
          </view>
          <view class="menu-item">
            <view> 公司邮箱：admin@chinausky.com</view>
          </view>
        </view>
      </view>

      <view class="menu-list" style="font-size: 15px">
        <view class="list-cell" style="color: #666666">
          <view class="menu-item">
            <view>开票信息</view>
          </view>

          <u--form :model="form" ref="uForm" :rules="rules" labelWidth="80">
            <view style="padding: 10px 0 10px 0; background: #ffffff">
              <view style="padding-left: 9px">
                <u-form-item label="发票抬头" prop="invoiceTitle" :borderBottom="true" required>
                  <u-input v-model="form.invoiceTitle" placeholder="请填写发票抬头" border="none" />
                </u-form-item>
                <u-form-item label="税号" prop="dutyId" :borderBottom="true" required>
                  <u-input v-model="form.dutyId" placeholder="请填写税号" border="none" maxlength="18" />
                </u-form-item>
                <u-form-item label="电子邮箱" prop="email" :borderBottom="true" required>
                  <u-input v-model="form.email" placeholder="请填写电子邮箱" border="none" />
                </u-form-item>
                <u-form-item label="申请人" prop="applicant" :borderBottom="true" required>
                  <u-input v-model="form.applicant" placeholder="请填写申请人" border="none" maxlength="10" />
                </u-form-item>
                <u-form-item label="手机号" prop="phone" :borderBottom="true" required>
                  <u-input v-model="form.phone" placeholder="请填写手机号" border="none" maxlength="11" />
                </u-form-item>
                <u-form-item label="金额" prop="amount" :borderBottom="true" required>
                  <u-input type="number" v-model="form.amount" placeholder="请填写金额" border="none" />
                </u-form-item>
                <u-form-item label="发票类型" prop="invoiceType" :borderBottom="true" required>
                  <u-radio-group v-model="form.invoiceType" placement="row">
                    <u-radio :activeColor="proxy.$settingStore.themeColor.color" name="1" label="普票" style="margin-right: 15px"></u-radio>
                    <u-radio :activeColor="proxy.$settingStore.themeColor.color" name="2" label="专票"></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item label="发票性质" prop="invoiceAttribute" :borderBottom="true" required>
                  <u-radio-group v-model="form.invoiceAttribute" placement="row">
                    <u-radio :activeColor="proxy.$settingStore.themeColor.color" name="1" label="电子发票" style="margin-right: 15px"></u-radio>
                    <u-radio :activeColor="proxy.$settingStore.themeColor.color" name="2" label="纸质发票"></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item v-if="form.invoiceAttribute == 2" label="邮寄地址" prop="sendAddress" :borderBottom="true" required>
                  <u-input v-model="form.sendAddress" placeholder="请填写邮寄地址" border="none" />
                </u-form-item>
                <u-form-item label="付款回执" prop="paymentReceipt" :borderBottom="true">
                  <oa-upload :uploadCount="1" :uploadImage="form.paymentReceipt" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
                  <view style="color: #666666">图片支持png、jpg</view>

                  <!-- <view>
                    <u-input placeholder="点击上传" border="none" maxlength="10" disabledColor="transparent" disabled>
                      <template #prefix>
                        <view
                          class="iconfont oaIcon-shangchuan menu-item-icon"
                          :style="{
                            fontSize: '14px',
                            color: proxy.$settingStore.themeColor.color,
                          }"
                        >
                        </view>
                      </template>
                    </u-input>

                    <view style="color: #666666">请上传付款回执图片，支持png、jpg</view>
                  </view> -->
                </u-form-item>
              </view>
            </view>
          </u--form>
        </view>
      </view>

      <view class="app-button">
        <view class="app-button-padding" :style="{ paddingBottom: `calc(60px +  44px + ${proxy.$settingStore.tabBarHeight}) !important` }"></view>
        <view class="app-button-fixed">
          <u-button class="app-buttom" type="primary" @click="handleSubmit('提交')" shape="circle"> 提交 </u-button>
        </view>
      </view>
    </view>

    <view v-show="tabsCurrent == 1">
      <view class="menu-list mt0 mlr0" style="padding: 0.625rem">
        <view class="list-cell">
          <view class="menu-item" style="justify-content: center; margin-bottom: 15px; font-size: 15px">
            <view>对公转账</view>
          </view>
          <view class="menu-item">
            <view style="width: 90px">企业全称</view>
            <view style="color: #666666">上海永天科技股份有限公司</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">银行账户</view>
            <view style="color: #666666">16523652265865685</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">开户行</view>
            <view style="color: #666666">上海银行徐家汇支行</view>
          </view>
        </view>
        <view class="list-cell">
          <view class="menu-item">
            <view style="width: 90px">转账备注</view>
            <view style="color: #666666">打款时请备注付款公司名称等信息</view>
          </view>
        </view>

        <view class="list-cell">
          <view class="menu-item" style="justify-content: center">
            <u-button style="width: auto" @click="copy(`上海永天科技股份有限公司\n16523652265865685\n上海银行徐家汇支行`)" shape="circle"> 复制汇款信息 </u-button>
          </view>
        </view>
      </view>
    </view>
  </oa-scroll>
</template>

<script setup>
import config from "@/config";
import storage from "@/utils/storage";
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { crmInvoiceInfo, page } from "@/api/common/invoicing.js";

const { proxy } = getCurrentInstance();
const commonStore = commonStores();

const uForm = ref(null);
const data = reactive({
  tabsList: [
    {
      name: "开票申请",
    },
    {
      name: "汇款信息",
    },
  ],
  tabsCurrent: 0,

  form: {
    customId: "", //客户管理id
    invoiceTitle: "", //发票抬头
    dutyId: "", //税号
    email: "", //电子邮箱
    applicant: "", //申请人
    phone: "", //手机号码
    amount: "", //金额
    invoiceType: "1", //发票类型;1：普票，2：专票
    invoiceAttribute: "1", //发票性质;1：电子发票，2：纸质发票
    sendAddress: "", //邮寄地址
    paymentReceipt: "", //付款回执
  },

  rules: {
    invoiceTitle: [
      {
        required: true,
        message: "请填写发票抬头",
        trigger: ["blur", "change"],
      },
    ],
    dutyId: [
      {
        required: true,
        message: "请填写税号",
        trigger: ["blur", "change"],
      },
      {
        type: "string",
        min: 18,
        required: true,
        message: "请填写18位税号",
        trigger: ["change"],
      },
    ],
    email: [
      {
        required: true,
        message: "请填写电子邮箱",
        trigger: ["blur", "change"],
      },
      {
        type: "string",
        min: 11,
        required: true,
        message: "请填写正确的邮箱格式",
        pattern: /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
        trigger: ["blur", "change"],
      },
    ],
    applicant: [
      {
        required: true,
        message: "请填写申请人",
        trigger: ["blur", "change"],
      },
    ],
    phone: [
      {
        required: true,
        message: "请填写手机号",
        trigger: ["blur", "change"],
      },
      {
        type: "string",
        min: 11,
        required: true,
        message: "请填写正确11位手机号",
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        trigger: ["blur", "change"],
      },
    ],
    amount: [
      {
        required: true,
        message: "请填写金额",
        trigger: ["blur", "change"],
      },
    ],
    invoiceType: [
      {
        required: true,
        message: "请选择发票类型",
        trigger: ["blur", "change"],
      },
    ],
    invoiceAttribute: [
      {
        required: true,
        message: "请选择发票性质",
        trigger: ["blur", "change"],
      },
    ],
    sendAddress: [
      {
        required: true,
        message: "请填写邮寄地址",
        trigger: ["blur", "change"],
      },
    ],
  },

  scrollIntoView: "",
  promptStatus: false,
});

const { tabsList, tabsCurrent, form, rules, scrollIntoView, promptStatus } = toRefs(data);

/**
 * @提交
 */
function handleSubmit(value) {
  scrollIntoView.value = "";
  uForm.value
    .validate()
    .then((res) => {
      uni.$u.toast("校验通过");
      proxy.$modal.loading("加载中");
      page({
        current: 1,
        size: 10,
        invoiceTitle: form.value.invoiceTitle,
        startTime: commonStore.getYearLast(new Date()),
        endTime: commonStore.formatterDateTime(new Date()),
      }).then((requset) => {
        if (requset.status === "SUCCESS") {
          proxy.$modal.closeLoading();

          if (requset.data.records.length > 0) {
            promptStatus.value = true;
            scrollIntoView.value = "noticeBar";
          } else {
            var param = {
              customId: parseInt(form.value.customId), //客户管理id
              invoiceTitle: form.value.invoiceTitle, //发票抬头
              dutyId: form.value.dutyId, //税号
              email: form.value.email, //电子邮箱
              applicant: form.value.applicant, //申请人
              phone: form.value.phone, //手机号码
              amount: parseFloat(form.value.amount), //金额
              invoiceType: parseInt(form.value.invoiceType), //发票类型;1：普票，2：专票
              invoiceAttribute: parseInt(form.value.invoiceAttribute), //发票性质;1：电子发票，2：纸质发票
              sendAddress: form.value.sendAddress, //邮寄地址
              paymentReceipt: form.value.paymentReceipt, //付款回执
            };
            crmInvoiceInfo(param).then((requset) => {
              if (requset.status === "SUCCESS") {
                proxy.$tab.navigateTo("/pages/common/success/index?codeName=提交成功");
              }
            });
          }
        }
      });
    })
    .catch((errors) => {
      uni.$u.toast("校验失败");
    });
}

/**
 * @图片上传成功回调
 */
function uploadSuccessChange(e) {
  form.value.paymentReceipt = e.url;
}

/**
 * @图片删除回调
 */
function uploadDeleteChange(e) {
  form.value.paymentReceipt = e;
}

/**
 * @复制粘贴板
 */
function copy(value) {
  // 触发方法
  proxy.$common.uniCopy({
    content: value,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: "none",
      });
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: "none",
        duration: 3000,
      });
    },
  });
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  tabsCurrent.value = e.index;
}

onLoad((options) => {
  if ("customId" in options) {
    form.value.customId = options.customId;
    document.getElementsByClassName("uni-page-head-hd")[0].style.cssText = "display: none;";
  }
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}
</style>