zc_saas_h5/pages2/invoice/index.vue

<template>
  <view class="invoice">
    <nav-bar title="发票申请"></nav-bar>
    <view class="invoice__tabs">
      <u-tabs
        :list="list"
        sticky
        :current="current"
        @change="change"
        active-color="#007AFF"
      ></u-tabs>
    </view>
    <view class="invoice__content">
      <view class="open" v-if="current == 0">
        <view class="form">
          <u-form :model="form" ref="uForm">
            <u-form-item
              label="发票类型"
              label-width="150"
              required
              prop="type"
            >
              <u-radio-group v-model="form.type" @change="formTypeChange">
                <u-radio
                  v-for="(item, index) in typeList"
                  :key="index"
                  :name="item.value"
                >
                  {{ item.name }}
                </u-radio>
              </u-radio-group>
            </u-form-item>

            <!-- 增值税发票 -->
            <template v-if="form.type == 2">
              <u-form-item
                label="申请主体"
                label-width="150"
                required
                prop="subject"
              >
                <u-radio-group v-model="form.subject">
                  <u-radio :key="index" name="2"> 企业 </u-radio>
                </u-radio-group>
              </u-form-item>

              <u-form-item
                label="发票抬头"
                label-width="150"
                required
                prop="invoiceTitle"
              >
                <u-input
                  placeholder="请输入发票抬头"
                  v-model="form.invoiceTitle"
                />
              </u-form-item>
              <u-form-item label="邮箱" label-width="150" required prop="email">
                <u-input placeholder="请输入邮箱" v-model="form.email" />
              </u-form-item>
              <u-form-item
                label="纳税登记号"
                label-width="150"
                required
                prop="taxRegistryNumber"
              >
                <u-input
                  placeholder="请输入纳税登记号"
                  v-model="form.taxRegistryNumber"
                />
              </u-form-item>
              <u-form-item
                label="单位地址"
                label-width="150"
                required
                prop="companyAddress"
              >
                <u-input
                  placeholder="请输入单位地址"
                  v-model="form.companyAddress"
                />
              </u-form-item>
              <u-form-item
                label="电话号码"
                label-width="150"
                required
                prop="phone"
              >
                <u-input
                  placeholder="请输入电话号码"
                  type="number"
                  v-model="form.phone"
                />
              </u-form-item>
              <u-form-item
                label="开户银行"
                label-width="150"
                required
                prop="bankName"
              >
                <u-input placeholder="请输入开户银行" v-model="form.bankName" />
              </u-form-item>
              <u-form-item
                label="银行账号"
                label-width="150"
                required
                prop="bankAccount"
              >
                <u-input
                  placeholder="请输入银行账号"
                  type="number"
                  v-model="form.bankAccount"
                />
              </u-form-item>
              <u-form-item
                label="收件地址"
                label-width="150"
                required
                prop="receivingAddress"
              >
                <u-input
                  placeholder="请输入收件地址"
                  v-model="form.receivingAddress"
                />
              </u-form-item>
              <u-form-item
                label="收件人"
                label-width="150"
                required
                prop="receivingName"
              >
                <u-input
                  placeholder="请输入收件人"
                  v-model="form.receivingName"
                />
              </u-form-item>
              <u-form-item
                label="收件手机"
                label-width="150"
                required
                prop="receivingTel"
              >
                <u-input
                  placeholder="请输入收件手机"
                  v-model="form.receivingTel"
                />
              </u-form-item>
            </template>
            <!-- 增值税发票 -->

            <!-- 普通发票 -->
            <template v-else>
              <u-form-item
                label="申请主体"
                label-width="150"
                required
                prop="subject"
              >
                <u-radio-group v-model="form.subject">
                  <u-radio
                    v-for="(item, index) in mainList"
                    :key="index"
                    :name="item.value"
                  >
                    {{ item.name }}
                  </u-radio>
                </u-radio-group>
              </u-form-item>

              <u-form-item
                label="发票抬头"
                label-width="150"
                required
                prop="invoiceTitle"
              >
                <u-input
                  placeholder="请输入发票抬头"
                  v-model="form.invoiceTitle"
                />
              </u-form-item>
              <u-form-item label="邮箱" label-width="150" required prop="email">
                <u-input placeholder="请输入邮箱" v-model="form.email" />
              </u-form-item>
              <u-form-item
                v-if="form.subject == '2'"
                label="纳税登记号"
                label-width="150"
                required
                prop="taxRegistryNumber"
              >
                <u-input
                  placeholder="请输入纳税登记号"
                  v-model="form.taxRegistryNumber"
                />
              </u-form-item>
            </template>
            <!-- 普通发票 -->

            <u-form-item
              label="选择订单"
              label-width="150"
              required
              prop="orderGoodsIds"
              right-icon="arrow-right"
              ref="orderGoodsIds"
            >
              <view class="form-item" @click="selectOrderModal = true">
                <u-input
                  placeholder="请点击选择订单"
                  disabled
                  @click="selectOrderModal = true"
                />
              </view>
            </u-form-item>
            <view>
              <view
                class="check-order"
                v-for="(item, index) in filterOrderList"
                :key="index"
              >
                <view class="close" @click="deleteOrder(index)">
                  <u-icon
                    name="close-circle-fill"
                    color="#FF2D55"
                    size="40"
                  ></u-icon>
                </view>
                <view class="title">商品名称：{{ item.goodsName }}</view>
                <view class="number">订单编号：{{ item.orderSn }}</view>
                <view class="price">价格：¥ {{ item.goodsPrice }}</view>
              </view>
            </view>
          </u-form>
        </view>

        <view class="order-text">
          <view class="order-text__label">本次申请开票金额：</view>
          <view class="order-text__price">¥ {{ toFixed(invoicePirce) }}</view>
        </view>

        <view class="submit" @click="formSubmit"> 提交申请 </view>
      </view>
      <view class="record" v-if="current == 1">
        <view class="nodata" v-if="!recordList.length">
          您暂无相关发票记录哦~
        </view>

        <view class="record__list">
          <view
            class="record-item"
            @click="showDetailModal(record)"
            v-for="(record, index) in recordList"
            :key="index"
          >
            <view class="item__time">{{
              $method.timestampToTime(record.applyTime, false, false)
            }}</view>
            <view class="item__content">
              <view class="top">
                <view
                  class="state"
                  :class="{
                    wait: record.periodStatus == 1,
                    refuse: record.periodStatus == 2,
                    agree: record.periodStatus == 3,
                  }"
                >
                  <text v-if="record.periodStatus == 1">待审核</text>
                  <text v-if="record.periodStatus == 2">驳回</text>
                  <text v-if="record.periodStatus == 3">通过</text>
                  <u-icon
                    class="arrow"
                    name="arrow-right"
                    color="#ffffff"
                    size="28"
                  ></u-icon>
                </view>
              </view>

              <view class="bottom">
                <view class="flex">
                  <view class="text">发票类型</view>
                  <view class="flex__auto">
                    <text v-if="record.type == 1">普通发票</text>
                    <text v-if="record.type == 2">增值税专用发票</text>
                  </view>
                </view>
                <view class="flex">
                  <view class="text">申请主体</view>
                  <view class="flex__auto">
                    <text v-if="record.subject == 1">个人</text>
                    <text v-if="record.subject == 2">企业</text>
                  </view>
                </view>
                <view class="flex">
                  <view class="text">发票状态</view>
                  <view class="flex__auto">
                    <text class="red" v-if="record.invoiceStatus == 1"
                      >未开票</text
                    >
                    <text class="red" v-if="record.invoiceStatus == 3"
                      >开票中</text
                    >
                    <text class="green" v-if="record.invoiceStatus == 2"
                      >已开票</text
                    >
                    <text class="red" v-if="record.invoiceStatus == -1"
                      >已退票</text
                    >
                  </view>
                </view>
                <view @click.stop="showOrder(record.checked, index)">
                  <view class="flex noborder">
                    <view class="text">开票订单</view>
                    <view class="flex__auto">
                      <text style="margin-right: 10rpx">{{
                        record.orderList.length
                      }}</text>
                      <u-icon
                        v-if="!record.checked"
                        name="arrow-down"
                        color="#ccc"
                        size="28"
                      ></u-icon>
                      <u-icon
                        v-if="record.checked"
                        name="arrow-up"
                        color="#ccc"
                        size="28"
                      ></u-icon>
                    </view>
                  </view>
                  <view class="order-list" v-if="record.checked">
                    <view
                      class="order-item"
                      :key="orderIndex"
                      v-for="(orderItem, orderIndex) in record.orderList"
                      >{{ orderIndex + 1 }}.{{ orderItem.goodsName }}</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-popup
      class="modal"
      v-model="selectOrderModal"
      mode="bottom"
      border-radius="24"
    >
      <view class="select-order">
        <view class="line"></view>
        <view class="title">选择订单</view>
        <u-line color="#D6D6DB" />
        <view>
          <scroll-view scroll-y="true" style="height: 500rpx">
            <view v-if="orderList.length">
              <u-checkbox-group>
                <view v-for="(item, index) in orderList" :key="index">
                  <view class="order-item">
                    <view>
                      <u-checkbox
                        :disabled="item.disabled"
                        shape="circle"
                        :name="item.name"
                        v-model="item.checked"
                      >
                        <view
                          class="order-item__bg"
                          :class="item.checked ? 'active' : ''"
                        >
                          <view>
                            <view class="order-title">{{
                              item.goodsName
                            }}</view>
                            <view class="order-number">{{ item.orderSn }}</view>
                            <view class="order-price"
                              >¥ {{ item.goodsPrice }}元</view
                            >
                          </view>
                        </view>
                      </u-checkbox>
                    </view>
                  </view>
                </view>
              </u-checkbox-group>
            </view>
            <view v-else class="no_data">
              <text>暂无可开发票的订单</text>
            </view>
          </scroll-view>
        </view>
        <view class="confrim-btn">
          <view class="okBtn" @click="okPopup()">确定</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      class="modal"
      v-model="orderDetailModal"
      mode="center"
      border-radius="40"
    >
      <view class="order-detail">
        <view class="order-detail__content">
          <scroll-view scroll-y="true" style="height: 860rpx">
            <view class="content">
              <view class="header">{{
                $method.timestampToTime(invoiceDetail.applyTime, false, false)
              }}</view>
              <view class="body">
                <view class="body__item">
                  <view class="title">发票申请信息</view>
                  <view class="content">
                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                    >
                      <view slot="title">发票类型：</view>
                      <text v-if="invoiceDetail.type == 1">普通发票</text>
                      <text v-if="invoiceDetail.type == 2">增值税专用发票</text>
                    </u-cell-item>
                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                    >
                      <view slot="title">申请主体：</view>
                      <text v-if="invoiceDetail.subject == 1">个人</text>
                      <text v-if="invoiceDetail.subject == 2">企业</text>
                    </u-cell-item>
                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                    >
                      <view slot="title">发票抬头：</view>
                      <text>{{ invoiceDetail.invoiceTitle }}</text>
                    </u-cell-item>
                    <template v-if="invoiceDetail.subject == 2">
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">纳税登记号：</view>
                        <text>{{ invoiceDetail.taxRegistryNumber || "" }}</text>
                      </u-cell-item>
                    </template>
                    <template v-if="invoiceDetail.type == 2">
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">单位地址：</view>
                        <text>{{ invoiceDetail.companyAddress || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">电话号码：</view>
                        <text>{{ invoiceDetail.phone || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">开户银行：</view>
                        <text>{{ invoiceDetail.bankName || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">银行账号：</view>
                        <text>{{ invoiceDetail.bankAccount || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">收件地址：</view>
                        <text>{{ invoiceDetail.receivingAddress || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">收件人：</view>
                        <text>{{ invoiceDetail.receivingName || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">收件手机：</view>
                        <text>{{ invoiceDetail.receivingTel || "" }}</text>
                      </u-cell-item>
                      <u-cell-item
                        :border-bottom="false"
                        hover-class="none"
                        :arrow="false"
                      >
                        <view slot="title">开票订单：</view>
                      </u-cell-item>
                    </template>

                    <view class="order-list">
                      <view
                        class="order-item"
                        :key="orderIndex"
                        v-for="(
                          orderItem, orderIndex
                        ) in invoiceDetail.orderList"
                      >
                        <view class="order-title">{{
                          orderItem.goodsName
                        }}</view>
                        <view class="order-number">{{
                          orderItem.orderSn
                        }}</view>
                        <view class="order-price"
                          >¥ {{ orderItem.goodsRealPrice }}元</view
                        >
                      </view>
                    </view>
                    <view class="order-text">
                      <view class="order-text__label">本次申请开票金额：</view>
                      <view class="order-text__price"
                        >¥ {{ toFixed(invoiceDetail.amount) }}</view
                      >
                    </view>
                  </view>
                </view>
                <view class="body__item">
                  <view class="title">发票申请结果</view>
                  <view class="content">
                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                    >
                      <view slot="title">审核结果：</view>
                      <text
                        class="text wait"
                        v-if="invoiceDetail.periodStatus == 1"
                        >待审核</text
                      >
                      <text
                        class="text agree"
                        v-if="invoiceDetail.periodStatus == 3"
                        >通过</text
                      >
                      <text
                        class="text refuse"
                        v-if="invoiceDetail.periodStatus == 2"
                        >驳回</text
                      >
                    </u-cell-item>
                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                      v-if="invoiceDetail.periodReason"
                    >
                      <view slot="title">审核反馈：</view>
                      <text class="text">{{
                        invoiceDetail.periodReason || ""
                      }}</text>
                    </u-cell-item>
                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                    >
                      <view slot="title">发票状态：</view>
                      <text
                        class="text refuse"
                        v-if="invoiceDetail.invoiceStatus == 1"
                        >未开票</text
                      >
                      <text class="red" v-if="invoiceDetail.invoiceStatus == 3"
                        >开票中</text
                      >
                      <text
                        class="text agree"
                        v-if="invoiceDetail.invoiceStatus == 2"
                        >已开票</text
                      >
                      <text
                        class="text refuse"
                        v-if="invoiceDetail.invoiceStatus == -1"
                        >已退票</text
                      >
                    </u-cell-item>

                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                      v-if="
                        invoiceDetail.periodStatus == 3 &&
                        (invoiceDetail.invoiceStatus == 2 ||
                          invoiceDetail.invoiceStatus == -1) &&
                        invoiceDetail.invoiceImg
                      "
                    >
                      <view slot="title">发票预览：</view>
                      <view>
                        <image
                          class="preview"
                          @click="previewImg(invoiceDetail)"
                          :src="$method.splitImgHost(invoiceDetail.invoiceImg)"
                        ></image>
                        <view
                          class="download-btn"
                          @click="download(invoiceDetail)"
                          >下载电子发票</view
                        >
                      </view>
                    </u-cell-item>

                    <u-cell-item
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                      v-if="
                        invoiceDetail.periodStatus == 3 &&
                        (invoiceDetail.invoiceStatus == 2 ||
                          invoiceDetail.invoiceStatus == -1) &&
                        invoiceDetail.type == 2 &&
                        invoiceDetail.subject == 2
                      "
                    >
                      <view slot="title">机构发票邮寄状态：</view>
                      <text class="text" v-if="invoiceDetail.sendInvoice == 1"
                        >是</text
                      >
                      <text class="text" v-else>否</text>
                    </u-cell-item>

                    <u-cell-item
                      v-if="
                        invoiceDetail.periodStatus == 3 &&
                        (invoiceDetail.invoiceStatus == 2 ||
                          invoiceDetail.invoiceStatus == -1) &&
                        invoiceDetail.sendInvoice == 1 &&
                        invoiceDetail.type == 2 &&
                        invoiceDetail.subject == 2
                      "
                      @click.stop="copy(invoiceDetail.trackingNum)"
                      :border-bottom="false"
                      hover-class="none"
                      :arrow="false"
                    >
                      <view slot="title">发票邮寄快递单号：(点击可复制)</view>
                      <text class="text">{{
                        invoiceDetail.trackingNum || ""
                      }}</text>
                    </u-cell-item>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="order-detail__btns" v-if="invoiceDetail.periodStatus == 1">
          <view class="btn" @click="orderDetailModal = false">知道了</view>
          <view class="btn warm" @click="orderCancelModal = true"
            >撤销申请</view
          >
        </view>

        <view class="order-detail__btns" v-else>
          <view class="btn ok" @click="orderDetailModal = false">知道了</view>
        </view>
      </view>
    </u-popup>

    <u-popup
      class="modal"
      v-model="orderCancelModal"
      mode="center"
      border-radius="24"
    >
      <view class="order-cancel">
        <view class="header"> 温馨提示 </view>
        <view class="body">
          <view>撤销申请后，</view>
          <view>本次的发票申请内容将不存在。</view>
          <view>请慎重考虑。 </view>
          <view>您确定要取消本次发票申请吗？</view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="orderCancelModal = false">取消</view>
          <view class="btn ok" @click="orderCancel()">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      checkOrderList: [],
      recordList: [],
      list: [
        {
          name: "发票申请",
        },
        {
          name: "发票记录",
        },
      ],
      invoiceDetail: {
        amount: 0,
      },
      form: {
        type: "1",
        subject: "1",
        invoiceTitle: "",
        orderGoodsIds: "",
        taxRegistryNumber: "",
        companyAddress: "",
        email: "",
        phone: "",
        bankName: "",
        bankAccount: "",
        receivingAddress: "",
        receivingName: "",
        receivingTel: "",
      },
      rules: {
        receivingTel: [
          {
            required: true,
            message: "请输入收件手机",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              console.log(
                this.$u.test.mobile(value),
                "this.$u.test.mobile(value)"
              );
              return this.$u.test.mobile(value);
            },
            message: "手机号码格式不正确",
            // 触发器可以同时用blur和change
            trigger: ["change"],
          },
        ],
        type: [
          {
            required: true,
            message: "请选择发票类型",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        subject: [
          {
            required: true,
            message: "请选择申请主体",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        invoiceTitle: [
          {
            required: true,
            message: "请输入发票抬头",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        taxRegistryNumber: [
          {
            required: true,
            message: "请输入纳税登记号",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              var reg = /(^[0-9A-Z]{15,20}$)/;
              return reg.test(value);
            },
            message: "纳税登记号格式不正确",
            // 触发器可以同时用blur和change
            trigger: ["change"],
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              var reg = /^([a-zA-Z\d][\w-]{2,})@(\w{2,})\.([a-z]{2,})(\.[a-z]{2,})?$/;
              return reg.test(value);
            },
            message: "邮箱格式不正确",
            // 触发器可以同时用blur和change
            trigger: ["change"],
          },
        ],
        companyAddress: [
          {
            required: true,
            message: "请输入单位地址",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              var vartest = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
              var vartest1 = /^([0-9]{3,4})?[0-9]{7,8}$/;
              if (
                this.$u.test.mobile(value) ||
                vartest.test(value) ||
                vartest1.test(value)
              ) {
                return true;
              } else {
                return false;
              }
            },
            message: "电话号码不正确",
            trigger: ["change", "blur"],
          },
        ],
        bankName: [
          {
            required: true,
            message: "请输入开户银行",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              var reg = /[\u4E00-\u9FA5]+/;
              return reg.test(value);
            },
            message: "开户银行名称不正确",
            trigger: ["change", "blur"],
          },
        ],

        bankAccount: [
          {
            required: true,
            message: "请输入银行账号",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              var reg = /^[1-9]{1}(\d{15}|\d{18})$/;
              return reg.test(value);
            },
            message: "银行卡号格式不正确",
            // 触发器可以同时用blur和change
            trigger: ["change"],
          },
        ],
        receivingAddress: [
          {
            required: true,
            message: "请输入收件地址",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        receivingName: [
          {
            required: true,
            message: "请输入收件人",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
        orderGoodsIds: [
          {
            required: true,
            message: "请选择订单",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change"],
          },
        ],
      },
      orderValue: "",
      orderList: [],
      selectOrderModal: false,
      orderDetailModal: false,
      orderCancelModal: false,
      current: 0,
      invoicePirce: 0,
      order: [],
      typeList: [
        {
          name: "普通发票",
          value: "1",
        },
        {
          name: "增值税专用发票",
          value: "2",
        },
      ],
      mainList: [
        {
          name: "个人",
          value: "1",
        },
        {
          name: "企业",
          value: "2",
        },
      ],
    };
  },
  // onPullDownRefresh() {},
  onLoad(option) {
    this.orderInvoiceCanInvoiceList();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    orderCancel() {
      let invoiceDetail = JSON.parse(JSON.stringify(this.invoiceDetail));
      invoiceDetail.status = -1;
      this.$api.orderInvoiceCancel(invoiceDetail).then((res) => {
        if (res.data.code == 200) {
          this.orderInvoiceList();
          this.orderInvoiceCanInvoiceList();
          this.orderDetailModal = false;
          this.orderCancelModal = false;
          uni.showToast({
            title: "撤销成功",
            icon: "none",
          });
        } else {
        }
      });
    },
    showDetailModal(item) {
      this.orderDetailModal = true;
      this.invoiceDetail = item;
    },
    toFixed(number) {
      console.log(number.toFixed(2));
      return number.toFixed(2);
    },
    /**
     * 获取可开发票的订单,/order/invoice/canInvoiceList
     */
    orderInvoiceCanInvoiceList() {
      this.$api.orderInvoiceCanInvoiceList().then((res) => {
        if (res.data.code == 200) {
          res.data.rows.forEach((item) => {
            item.checked = false;
          });
          this.orderList = res.data.rows;
        }
      });
    },
    /**
     * @param {Object} checkedState 显示状态
     * @param {Object} index 索引值
     * 修改开票订单列表显示状态
     */
    showOrder(showState, index) {
      this.$set(this.recordList[index], "checked", !showState);
    },
    /**
     * 发票申请提交
     */
    formSubmit() {
      this.$refs.uForm.validate((valid) => {
        console.log(valid, "valid");
        console.log(this.form, "this.form");
        if (valid) {
          if (this.invoicePirce > 10000) {
            uni.showModal({
              title: "提示",
              content:
                "您所选的订单总开票金额，大于10000元，超出单张发票的开票额度，请修改开票订单",
              showCancel: false,
            });
            return;
          }
          let data = JSON.parse(JSON.stringify(this.form));
          data.orderGoodsIds = data.orderGoodsIds.split(",");
          data.amount = this.invoicePirce;
          if (data.subject == "1") {
            data.taxRegistryNumber = "";
            data.companyAddress = "";
            data.phone = "";
            data.bankName = "";
            data.bankAccount = "";
            data.receivingAddress = "";
            data.receivingName = "";
            data.receivingTel = "";
          }
          this.$api.orderInvoice(data).then((res) => {
            if (res.data.code == 200) {
              this.orderInvoiceCanInvoiceList();
              this.form = {
                type: "1",
                subject: "1",
                invoiceTitle: "",
                orderGoodsIds: "",
                taxRegistryNumber: "",
                companyAddress: "",
                phone: "",
                bankName: "",
                bankAccount: "",
                receivingAddress: "",
                receivingName: "",
                receivingTel: "",
              };
              this.invoicePirce = 0;
              uni.showModal({
                title: "操作提示",
                content: `您本次的发票申请已经提交成功！\n请稍后留意邮箱。`,
                showCancel: false,
                confirmText: "知道了",
              });
            } else {
              uni.showToast({
                icon: "none",
                title: res.data.msg,
              });
            }
          });
        }
      });
    },
    /**
     * @param {Object} e value
     * 发票类型修改
     */
    formTypeChange(e) {
      console.log(e);
      if (e == "2") {
        this.$set(this.form, "subject", "2");
      } else {
      }
    },
    /**
     * @param {Object} e
     * tabs 切换
     */
    change(e) {
      console.log(e);
      this.current = e;

      if (this.current == 1) {
        this.orderInvoiceList();
      } else {
        this.$nextTick(() => {
          this.$refs.uForm.setRules(this.rules);
        });
      }
    },

    orderInvoiceList() {
      this.$api.orderInvoiceList().then((res) => {
        if (res.data.code == 200) {
          this.recordList = res.data.rows;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.msg,
          });
        }
      });
    },

    radioGroupChange(e) {
      console.log(e);
    },
    copy(str) {
      if (!str) {
        uni.showToast({
          icon: "none",
          title: "暂时没有可以复制的快递号",
        });
        return;
      }
      let newStr = String(str);
      uni.setClipboardData({
        data: newStr,
        success: function () {
          console.log("success");
        },
      });
    },
    okPopup() {
      this.selectOrderModal = false;
      let strArr = [];
      this.invoicePirce = 0;
      this.orderList.forEach((item, index) => {
        if (item.checked) {
          this.$set(this.orderList[index], "disabled", true);
          strArr.push(item.orderGoodsId);
          this.invoicePirce += item.goodsPrice;
        }
      });

      this.form.orderGoodsIds = strArr.join(",");
      this.$nextTick(() => {
        this.$refs.orderGoodsIds.onFieldChange();
      });
      console.log(this.$refs.orderGoodsIds);
    },

    deleteOrder(index) {
      this.$set(this.orderList[index], "disabled", false);
      this.$set(this.orderList[index], "checked", false);
      let strArr = [];
      this.invoicePirce = 0;
      this.orderList.forEach((item, index) => {
        if (item.checked) {
          strArr.push(item.orderGoodsId);
          this.invoicePirce += item.goodsPrice;
        }
      });

      this.form.orderGoodsIds = strArr.join(",");
      this.$nextTick(() => {
        this.$refs.orderGoodsIds.onFieldChange();
      });
    },

    previewImg(item) {
      // 预览图片
      uni.previewImage({
        urls: [this.$method.splitImgHost(item.invoiceImg, true, 1000)],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },

    download(item) {
      //获取相册授权
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                //这里是用户同意授权后的回调
                this.saveImgToLocal(item);
              },
              fail() {
                //这里是用户拒绝授权后的回调
              },
            });
          } else {
            //用户已经授权过了
            this.saveImgToLocal(item);
          }
        },
      });
    },

    saveImgToLocal(item) {
      uni.showModal({
        title: "提示",
        content: "确定保存到相册吗",
        success: (res) => {
          if (res.confirm) {
            uni.downloadFile({
              url: this.$method.splitImgHost(item.invoiceImg, true, 1000), //图片地址
              success: (res) => {
                if (res.statusCode === 200) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function () {
                      uni.showToast({
                        title: "保存成功",
                        icon: "none",
                      });
                    },
                    fail: function () {
                      uni.showToast({
                        title: "保存失败",
                        icon: "none",
                      });
                    },
                  });
                }
              },
            });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    filterOrderList() {
      return this.orderList.filter((i) => i.disabled) || [];
    },
  },
};
</script>
<style>
page {
  background: #eaeef1;
}
</style>
<style scoped lang="scss">
.invoice {
  &__tabs {
    width: 100%;
    text-align: center;
    position: fixed;
    height: 96rpx;
    z-index: 999;
  }

  &__content {
    padding-top: 96rpx;

    .open {
      padding-bottom: 150rpx;
      margin: 8rpx 24rpx 0;

      .form {
        padding: 24rpx;
        width: 702rpx;
        background: #ffffff;
        border-radius: 24rpx;

        // /deep/ .u-input__input {
        // 	text-align: right;
        // }

        .form-item {
          height: 78rpx;
          display: flex;
          align-items: center;

          .text {
            font-size: 28rpx;
            width: 120rpx;
            // color: #999999;
          }

          .content {
            flex: 1;
            text-align: left;
            color: #bbb;
          }
        }

        .check-order {
          margin-top: 20rpx;
          width: 654rpx;
          height: 168rpx;
          background: #f5f5f5;
          border: 2px solid #f5f5f5;
          padding: 20rpx;
          position: relative;

          .close {
            position: absolute;
            right: 0;
            top: 0;
          }

          .title,
          .number,
          .price {
            color: #333333;
            margin-top: 10rpx;
            line-height: 30rpx;
            font-size: 30rpx;
          }

          .number {
            color: #999;
          }
        }
      }

      .order-text {
        margin-top: 16rpx;
        padding: 0 30rpx;
        width: 702rpx;
        height: 80rpx;
        background: #ffffff;
        border-radius: 24rpx;
        display: flex;
        align-items: center;

        &__label {
          font-size: 24rpx;
        }

        &__price {
          font-size: 30rpx;
          margin-left: 20rpx;
          color: #ff2d55;
        }
      }

      .submit {
        text-align: center;
        line-height: 80rpx;
        color: #fff;
        font-size: 30rpx;
        width: 526rpx;
        height: 80rpx;
        background: #007aff;
        box-shadow: 0rpx 8rpx 7rpx 1rpx rgba(0, 122, 255, 0.1);
        border-radius: 40rpx;
        position: fixed;
        left: 50%;
        bottom: 40rpx;
        z-index: 999;
        transform: translateX(-50%);
      }
    }

    .record {
      .nodata {
        padding-top: 160rpx;
        font-size: 32rpx;
        text-align: center;
        color: #999999;
      }

      &__list {
        .record-item {
          margin: 0 8rpx 10rpx;
          .item__time {
            padding: 20rpx 0;
            text-align: center;
            font-size: 24rpx;
            color: #999999;
          }

          .item__content {
            background: #fff;
            border-radius: 16rpx;

            .top {
              padding: 12rpx 0;
              border-bottom: 1px solid #eeeeee;
              .state {
                position: relative;
                text-align: center;
                color: #fff;
                font-size: 30rpx;
                margin: 0 auto;
                width: 240rpx;
                height: 56rpx;
                line-height: 56rpx;
                background: #007aff;
                border-radius: 28rpx;

                &.wait {
                  background: #007aff;
                }
                &.refuse {
                  background: #ff3b30;
                }
                &.agree {
                  background: #34c759;
                }

                .arrow {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  right: 18rpx;
                }
              }
            }

            .bottom {
              padding: 0 32rpx;
              .flex {
                height: 80rpx;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #eeeeee;

                &.noborder {
                  border: 0;
                }

                .text {
                  font-size: 24rpx;
                  color: #666666;
                }

                &__auto {
                  text-align: right;
                  flex: 1;
                  font-size: 30rpx;
                  font-weight: bold;
                  color: #666666;

                  .red {
                    color: #ff3b30;
                  }

                  .green {
                    color: #34c759;
                  }
                }
              }

              .order-list {
                padding-bottom: 30rpx;
                .order-item {
                  border-radius: 16rpx;
                  padding: 14rpx;
                  background: #f5f5f5;
                  font-size: 30rpx;
                  color: #333;
                  margin-top: 16rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .modal {
    .select-order {
      .line {
        width: 80rpx;
        height: 8rpx;
        background: #999999;
        border-radius: 4rpx;
        margin: 8rpx auto 0;
      }

      .title {
        margin: 20rpx 0 15rpx;
        text-align: center;
        font-size: 24rpx;
        color: #999999;
      }

      .order-item {
        display: flex;
        align-items: center;
        padding: 20rpx;

        &__bg {
          width: 654rpx;
          height: 168rpx;
          background: #f5f5f5;
          border: 2px solid #f5f5f5;
          border-radius: 16rpx;
          padding: 20rpx;

          &.active {
            background: #ebf5ff;
            border: 2px solid #007aff;
          }

          .order-title,
          .order-number,
          .order-price {
            color: #333333;
            margin-top: 10rpx;
            line-height: 30rpx;
            font-size: 30rpx;
          }

          .order-number {
            color: #999;
          }
        }
      }

      .confrim-btn {
        width: 750rpx;
        height: 98rpx;
        background: rgba(255, 255, 255, 0.98);
        display: flex;
        align-items: center;
        justify-content: center;

        .okBtn {
          text-align: center;
          line-height: 64rpx;
          color: #fff;
          font-size: 30rpx;
          width: 200rpx;
          height: 64rpx;
          background: linear-gradient(0deg, #015eea, #00c0fa);
          border-radius: 32rpx;
        }
      }
      .no_data {
        text-align: center;
        margin-top: 40rpx;
      }
    }

    .order-detail {
      width: 640rpx;
      height: 1000rpx;
      background: #ffffff;
      display: flex;
      flex-direction: column;

      &__content {
        flex: 1;

        .content {
          padding: 24rpx 24rpx 0;

          /deep/ .u-cell {
            padding: 10rpx;

            &_title {
              color: #999;
            }

            &__value {
              color: #333;
              text-align: left;
            }

            .text {
              &.wait {
                color: #007aff;
              }

              &.agree {
                color: #34c759;
              }

              &.refuse {
                color: #ff3b30;
              }
            }

            .preview {
              width: 240rpx;
              height: 160rpx;
            }

            .download-btn {
              margin: 10rpx 0 0;
              text-align: center;
              line-height: 56rpx;
              color: #fff;
              font-size: 30rpx;
              width: 224rpx;
              height: 56rpx;
              background: #007aff;
              border-radius: 16rpx;
            }
          }

          .header {
            font-size: 30rpx;
            font-weight: bold;
            color: #333333;
            line-height: 48rpx;
          }

          .body {
            &__item {
              border-bottom: 1px solid #eeeeee;
              padding-bottom: 30rpx;

              &:last-child {
                border: 0;
              }

              .title {
                margin-top: 30rpx;
                font-size: 24rpx;
                color: #007aff;
                line-height: 48rpx;

                &::before {
                  content: "";
                  width: 4rpx;
                  height: 24rpx;
                  background: #007aff;
                  border-radius: 2rpx;
                  display: inline-block;
                  margin-right: 10rpx;
                }
              }

              .order-list {
                .order-item {
                  overflow: hidden;
                  border-radius: 16rpx;
                  padding: 0 14rpx 14rpx;
                  background: #f5f5f5;
                  font-size: 30rpx;
                  color: #333;
                  margin-top: 16rpx;

                  .order-title,
                  .order-number,
                  .order-price {
                    color: #333333;
                    margin-top: 20rpx;
                    line-height: 26rpx;
                    font-size: 26rpx;
                  }

                  .order-number {
                    color: #999;
                  }
                }
              }

              .order-text {
                margin-top: 16rpx;
                padding: 0 30rpx;
                height: 80rpx;
                background: #f5f5f5;
                border-radius: 16rpx;
                display: flex;
                align-items: center;

                &__label {
                  font-size: 24rpx;
                  color: #999999;
                }

                &__price {
                  font-size: 30rpx;
                  margin-left: 20rpx;
                  color: #ff2d55;
                }
              }
            }
          }
        }
      }

      &__btns {
        border-top: 1px solid #eeeeee;
        padding: 0 24rpx;
        width: 100%;
        height: 140rpx;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn {
          text-align: center;
          width: 200rpx;
          height: 80rpx;
          line-height: 80rpx;
          background: #f5f5f5;
          border-radius: 40rpx;
          color: #007aff;
          font-size: 30rpx;
          margin: 0 10rpx;

          &.warm {
            background: #ff3b30;
            color: #fff;
          }

          &.ok {
            color: #fff;
            width: 526rpx;
            height: 80rpx;
            background: #007aff;
            border-radius: 40rpx;
          }
        }
      }
    }

    .order-cancel {
      width: 640rpx;
      height: 439rpx;
      background: #ffffff;
      padding: 40rpx;
      .header {
        text-align: center;
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        line-height: 48rpx;
      }

      .body {
        margin-top: 40rpx;

        view {
          font-size: 30rpx;
          color: #666666;
          line-height: 48rpx;
        }
      }

      .footer {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn {
          text-align: center;
          line-height: 80rpx;
          font-size: 30rpx;
          color: #007aff;
          width: 200rpx;
          height: 80rpx;
          background: #f5f5f5;
          border-radius: 40rpx;
          margin: 0 10rpx;

          &.ok {
            color: #fff;
            background: #007aff;
          }
        }
      }
    }
  }
}
</style>