发票支持增值税专票

pages/order/fillorder.vue

@@ -468,10 +468,11 @@ export default {
      */
     receiptType(type) {
       switch (type) {
+        case "1":
         case "VATORDINARY":
-          return "增值税普通发票";
         case "ELECTRO":
           return "电子普通发票";
+        case "2":
         case "VATOSPECIAL":
           return "增值税专用发票";
         default:

pages/order/invoice/invoiceDetail.vue

@@ -3,7 +3,7 @@
     <view class="block-item flex-center">
       <view>
         <view>
-          {{'增值税普通发票'}}
+          {{order.receiptType || "-"}}
           <view class="circle">
             <view></view>
           </view>
@@ -13,20 +13,52 @@
     </view>
     <view class="common-msg flex-center">
       <view>
-        <view>抬头类型</view>
+        <view>发票抬头</view>
-        <view>{{order.receiptTitle}}</view>
+        <view>{{order.receiptTitle || "-"}}</view>
       </view>
       <view>
         <view>发票状态</view>
-        <view class="invoice_status">{{order.receiptStatus === 1?'已开具':'暂未开具'}}</view>
+        <view class="invoice_status">
+          {{order.receiptStatus === 1 ? "已开具" : "暂未开具"}}
+          <text
+            v-if="order.receiptStatus === 1"
+            class="invoice-link"
+            @click="viewInvoice"
+          >查看发票</text>
+        </view>
       </view>
     </view>
     <u-cell-group :border="false">
-      <u-cell-item title="发票类型" :border-top="false" :value="'增值税普通发票'" :arrow="false"></u-cell-item>
+      <u-cell-item title="发票类型" :border-top="false" :value="order.receiptType || '-'" :arrow="false"></u-cell-item>
       <u-cell-item title="发票内容" :value="order.receiptContent" :arrow="false"></u-cell-item>
-      <u-cell-item title="发票抬头" :value="order.receiptTitle" :arrow="false"></u-cell-item>
+      <u-cell-item :title="title_type + '名称'" :value="getTitleNameValue()" :arrow="false"></u-cell-item>
       <u-cell-item title="纳税人识别号" v-if="order.taxpayerId" :value="order.taxpayerId" :arrow="false"></u-cell-item>
+      <u-cell-item title="单位地址" v-if="order.companyAddress" :value="order.companyAddress" :arrow="false"></u-cell-item>
+      <u-cell-item title="单位电话" v-if="order.companyPhone" :value="order.companyPhone" :arrow="false"></u-cell-item>
+      <u-cell-item title="开户银行" v-if="order.bankName" :value="order.bankName" :arrow="false"></u-cell-item>
+      <u-cell-item title="银行账号" v-if="order.bankAccount" :value="order.bankAccount" :arrow="false"></u-cell-item>
+      <u-cell-item title="收票人手机" :value="order.receiptPhone" :arrow="false"></u-cell-item>
+      <u-cell-item title="收票人邮箱" v-if="order.receiptEmail" :value="order.receiptEmail" :arrow="false"></u-cell-item>
     </u-cell-group>
+    <u-popup
+      v-model="showInvoicePopup"
+      mode="center"
+      width="90%"
+      border-radius="20"
+    >
+      <view class="invoice-popup">
+        <u-image
+          width="100%"
+          height="800rpx"
+          mode="aspectFit"
+          :src="order.invoiceAddress"
+          @click="previewImageInvoice"
+        ></u-image>
+        <view class="invoice-popup-actions">
+          <view class="invoice-popup-btn" @click="downloadImageInvoice">下载发票</view>
+        </view>
+      </view>
+    </u-popup>
     <!-- <u-cell-group :border="false" style="margin-top: 20rpx;">
       <u-cell-item title="订单状态" :border-top="false" :value="order.order_status_text" :arrow="false"></u-cell-item>
       <u-cell-item title="订单编号" :value="order.sn" :arrow="false"></u-cell-item>
@@ -48,9 +80,9 @@ import { getReceiptDetail } from "@/api/order.js";
 export default {
   data() {
     return {
-      order: {},
       order: {},
       title_type: "",
+      showInvoicePopup: false,
     };
   },
   onLoad(options) {
@@ -61,6 +93,107 @@ export default {
       getReceiptDetail(id).then((res) => {
         let order = res.data.result;
         this.order = order;
+        this.title_type = order.companyName || order.taxpayerId ? "单位" : "个人";
+      });
+    },
+    getTitleNameValue() {
+      return this.title_type === "单位"
+        ? this.order.companyName || "-"
+        : this.order.personalName || "-";
+    },
+    viewInvoice() {
+      if (!this.order.invoiceAddress) {
+        uni.showToast({
+          title: "暂无发票地址",
+          duration: 2000,
+          icon: "none",
+        });
+        return;
+      }
+      if (this.isImageInvoice()) {
+        this.showInvoicePopup = true;
+        return;
+      }
+      // #ifdef APP-PLUS
+      plus.runtime.openURL(this.order.invoiceAddress);
+      // #endif
+      // #ifndef APP-PLUS
+      uni.navigateTo({
+        url:
+          "/pages/tabbar/home/web-view?src=" +
+          encodeURIComponent(this.order.invoiceAddress),
+      });
+      // #endif
+    },
+    isImageInvoice() {
+      const url = (this.order.invoiceAddress || "").split("?")[0].toLowerCase();
+      return /\.(png|jpe?g|gif|bmp|webp)$/.test(url);
+    },
+    previewImageInvoice() {
+      if (!this.order.invoiceAddress) {
+        return;
+      }
+      uni.previewImage({
+        current: 0,
+        urls: [this.order.invoiceAddress],
+      });
+    },
+    downloadImageInvoice() {
+      if (!this.order.invoiceAddress) {
+        uni.showToast({
+          title: "暂无发票可下载",
+          duration: 2000,
+          icon: "none",
+        });
+        return;
+      }
+      uni.downloadFile({
+        url: this.order.invoiceAddress,
+        success: (res) => {
+          if (res.statusCode !== 200) {
+            uni.showToast({
+              title: "下载失败",
+              duration: 2000,
+              icon: "none",
+            });
+            return;
+          }
+          const tempFilePath = res.tempFilePath;
+          // #ifdef H5
+          const link = document.createElement("a");
+          link.href = tempFilePath || this.order.invoiceAddress;
+          link.download = "invoice";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          // #endif
+          // #ifndef H5
+          uni.saveImageToPhotosAlbum({
+            filePath: tempFilePath,
+            success: () => {
+              uni.showToast({
+                title: "发票已保存到相册",
+                duration: 2000,
+                icon: "none",
+              });
+            },
+            fail: () => {
+              uni.showToast({
+                title: "保存失败",
+                duration: 2000,
+                icon: "none",
+              });
+            },
+          });
+          // #endif
+        },
+        fail: () => {
+          uni.showToast({
+            title: "下载失败",
+            duration: 2000,
+            icon: "none",
+          });
+        },
       });
     },
     /**
@@ -183,6 +316,10 @@ export default {
     }
     .invoice_status {
       color: #ff6262;
+      .invoice-link {
+        margin-left: 12rpx;
+        color: $main-color;
+      }
     }
   }
 
@@ -205,9 +342,39 @@ export default {
   }
 }
 
+.invoice-popup {
+  padding: 30rpx;
+  background: #f2f3f5;
+}
+
+.invoice-popup-actions {
+  margin-top: 30rpx;
+  background: #f2f3f5;
+}
+
+.invoice-popup-btn {
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  border-radius: 40rpx;
+  background: $main-color;
+  color:rgb(255, 255, 255);
+}
+
 .u-cell {
   padding: 35rpx 20rpx;
-  height: 110rpx;
+  min-height: 110rpx;
+  height: auto;
   color: #333333;
 }
+
+/deep/ .u-cell__value {
+  flex: 1.6;
+  overflow: visible;
+}
+
+/deep/ .u-cell__value-text {
+  white-space: normal;
+  word-break: break-all;
+}
 </style>

pages/order/invoice/setInvoice.vue

@@ -5,7 +5,8 @@
       <!-- 发票类型 -->
       <div class="invoice-title">发票类型</div>
       <div class="flex">
-        <div class="invoice-item" :class="{'active':typeItem.active,disabled:typeItem.disabled}" v-for="(typeItem,index) in invoiceType" :key="index">
+        <div class="invoice-item" @click="handleClickHeader(typeItem,index,invoiceType)"
+          :class="{'active':typeItem.active,disabled:typeItem.disabled}" v-for="(typeItem,index) in invoiceType" :key="index">
           {{typeItem.title}}
         </div>
       </div>
@@ -17,55 +18,153 @@
       <!-- 发票抬头 -->
       <div class="invoice-title">发票抬头</div>
 
-      <div class="flex">
+      <div class="flex" v-if="!isSpecialInvoice">
         <div class="invoice-item" @click="handleClickHeader(headerItem,index,invoiceHeader)" :class="{'active':headerItem.active,disabled:headerItem.disabled}"
           v-for="(headerItem,index) in invoiceHeader" :key="index">
           {{headerItem.title}}
         </div>
       </div>
+      <div class="flex" v-else>
+        <div class="invoice-item active">
+          单位
+        </div>
+      </div>
       <div>
         <div class="form-item">
-          <span> {{title}}名称</span>
+          <span> {{isSpecialInvoice ? '单位' : title}}名称</span>
-          <u-input :placeholder="'请输入'+title+'名称'" v-model="submitData.receiptTitle" />
+          <u-input :placeholder="'请输入'+(isSpecialInvoice ? '单位' : title)+'名称'" v-model="titleName" />
         </div>
-        <div class="form-item" v-if="taxpayerFlag">
+        <div class="form-item" v-if="taxpayerFlag || isSpecialInvoice">
           <span>纳税人识别号</span>
           <u-input placeholder="请输入纳税人识别号" v-model="submitData.taxpayerId" />
         </div>
+        <div v-if="isSpecialInvoice">
+          <div class="form-item">
+            <span>单位地址</span>
+            <u-input placeholder="请输入单位地址" v-model="submitData.companyAddress" />
+          </div>
+          <div class="form-item">
+            <span>单位电话</span>
+            <u-input placeholder="请输入单位电话" v-model="submitData.companyPhone" />
+          </div>
+          <div class="form-item">
+            <span>开户银行</span>
+            <u-input placeholder="请输入开户银行" v-model="submitData.bankName" />
+          </div>
+          <div class="form-item">
+            <span>银行账号</span>
+            <u-input placeholder="请输入银行账号" v-model="submitData.bankAccount" />
+          </div>
+        </div>
 
       </div>
       <div class="divider">
       </div>
-      <div class="invoice-title">
+      <div class="invoice-title">收票人信息</div>
-        发票信息
+      <div>
+        <div class="form-item">
+          <span>收票人手机</span>
+          <u-input placeholder="请输入收票人手机" v-model="submitData.receiptPhone" />
         </div>
-      <div class="flex">
+        <div class="form-item">
+          <span>收票人邮箱</span>
+          <u-input placeholder="请输入收票人邮箱(选填)" v-model="submitData.receiptEmail" />
+        </div>
+      </div>
+      <div class="divider">
+      </div>
+      <div class="invoice-title">
+        发票内容
+      </div>
+      <div class="flex" v-if="!isSpecialInvoice">
         <div class="invoice-item" @click="handleClickHeader(goodsItem,index,goodsType)" :class="{'active':goodsItem.active,disabled:goodsItem.disabled}" v-for="(goodsItem,index) in goodsType"
           :key="index">
           {{goodsItem.title}}
         </div>
       </div>
+      <div class="flex" v-else>
+        <div class="invoice-item active">
+          商品明细
+        </div>
+      </div>
 
       <div class="submit" @click="submitInvoice()">确定</div>
     </div>
   </u-popup>
 </template>
 <script>
-import { addReceipt } from "@/api/members";
 export default {
   props: ["res"],
+  computed: {
+    isSpecialInvoice() {
+      return this.getActiveTitle(this.invoiceType) === "增值税专用发票";
+    },
+    titleName: {
+      get() {
+        return this.isUnitTitle()
+          ? this.submitData.companyName
+          : this.submitData.personalName;
+      },
+      set(value) {
+        if (this.isUnitTitle()) {
+          this.submitData.companyName = value;
+        } else {
+          this.submitData.personalName = value;
+        }
+        this.syncReceiptTitle();
+      },
+    },
+  },
   watch: {
+    invoiceType: {
+      handler(val) {
+        const currentType = this.getActiveTitle(val);
+        const nextReceiptType =
+          currentType === "增值税专用发票" ? "2" : "1";
+        const previousReceiptType = this.submitData.receiptType;
+        this.submitData.receiptType = nextReceiptType;
+
+        if (
+          this.shouldClearOnTypeChange &&
+          previousReceiptType &&
+          previousReceiptType !== nextReceiptType
+        ) {
+          this.clearInvoiceInfo();
+        }
+
+        if (currentType === "增值税专用发票") {
+          this.setActiveByTitle(this.invoiceHeader, "单位");
+          this.setActiveByTitle(this.goodsType, "商品明细");
+          this.title = "单位";
+          this.taxpayerFlag = true;
+          this.submitData.receiptContent = "商品明细";
+          this.syncReceiptTitle();
+        } else {
+          this.setActiveByTitle(this.invoiceHeader, "个人");
+          this.setActiveByTitle(this.goodsType, "商品明细");
+          this.title = "个人";
+          this.taxpayerFlag = false;
+          this.submitData.receiptContent = "商品明细";
+          this.syncReceiptTitle();
+        }
+        this.shouldClearOnTypeChange = false;
+      },
+      deep: true,
+    },
     invoiceHeader: {
       handler(val) {
-        this.title = val.filter((item) => {
+        if (this.isSpecialInvoice) {
-          return item.active == true;
+          this.title = "单位";
-        })[0].title;
-        this.taxpayerFlag = false;
-        this.submitData.taxpayerId = "";
-
-        if (this.title == "单位") {
           this.taxpayerFlag = true;
+          return;
         }
+
+        this.title = this.getActiveTitle(val) || "个人";
+        this.taxpayerFlag = this.title == "单位";
+        if (!this.taxpayerFlag) {
+          this.submitData.taxpayerId = "";
+        }
+        this.syncReceiptTitle();
       },
       deep: true,
     },
@@ -81,11 +180,21 @@ export default {
 
   data() {
     return {
+      shouldClearOnTypeChange: false,
       taxpayerFlag: false,
       submitData: {
         receiptTitle: "", //发票抬头
+        receiptType: "1", // 发票类型
+        personalName: "",
+        companyName: "",
         taxpayerId: "", //纳税人
         receiptContent: "",
+        companyAddress: "", //单位地址
+        companyPhone: "", //单位电话
+        bankName: "", //开户银行
+        bankAccount: "", //银行账号
+        receiptPhone: "", //收票人手机
+        receiptEmail: "", //收票人邮箱
       },
       show: true,
       title: "",
@@ -100,7 +209,6 @@ export default {
         {
           title: "增值税专用发票",
           active: false,
-          disabled: true,
         },
       ],
       //   发票抬头
@@ -129,25 +237,87 @@ export default {
   },
   mounted() {
     if (this.res) {
-      this.submitData.receiptTitle = this.res.receiptTitle;
+      this.submitData.receiptType = this.normalizeReceiptType(this.res.receiptType);
+      this.submitData.personalName =
+        this.res.personalName ||
+        (!this.res.companyName && !this.res.taxpayerId ? this.res.receiptTitle || "" : "");
+      this.submitData.companyName =
+        this.res.companyName ||
+        (this.res.taxpayerId ? this.res.receiptTitle || "" : "");
       this.submitData.taxpayerId = this.res.taxpayerId; //纳税人
       this.submitData.receiptContent = this.res.receiptContent;
-      this.res.receiptContent == "商品明细"
+      this.submitData.companyAddress = this.res.companyAddress || "";
-        ? (this.goodsType[0].active = true)
+      this.submitData.companyPhone = this.res.companyPhone || "";
-        : (this.goodsType[1].active = true);
+      this.submitData.bankName = this.res.bankName || "";
-      this.res.taxpayerId
+      this.submitData.bankAccount = this.res.bankAccount || "";
-        ? (this.invoiceHeader[1].active = true)
+      this.submitData.receiptPhone = this.res.receiptPhone || "";
-        : (this.invoiceHeader[0].active = true);
+      this.submitData.receiptEmail = this.res.receiptEmail || "";
+      if (this.submitData.receiptType === "2") {
+        this.setActiveByTitle(this.invoiceType, "增值税专用发票");
+        this.setActiveByTitle(this.invoiceHeader, "单位");
+        this.setActiveByTitle(this.goodsType, "商品明细");
       } else {
-      this.invoiceHeader[0].active = true;
+        this.setActiveByTitle(this.invoiceType, "电子普通发票");
-      this.goodsType[0].active = true;
+        this.res.receiptContent == "商品类别"
+          ? this.setActiveByTitle(this.goodsType, "商品类别")
+          : this.setActiveByTitle(this.goodsType, "商品明细");
+        this.res.taxpayerId
+          ? this.setActiveByTitle(this.invoiceHeader, "单位")
+          : this.setActiveByTitle(this.invoiceHeader, "个人");
+      }
+      this.syncReceiptTitle();
+    } else {
+      this.setActiveByTitle(this.invoiceType, "电子普通发票");
+      this.setActiveByTitle(this.invoiceHeader, "个人");
+      this.setActiveByTitle(this.goodsType, "商品明细");
+      this.syncReceiptTitle();
     }
 
   },
   methods: {
+    normalizeReceiptType(type) {
+      return type === "2" || type === "VATOSPECIAL" ? "2" : "1";
+    },
+    getActiveTitle(list) {
+      const current = list.find((item) => item.active);
+      return current ? current.title : "";
+    },
+    setActiveByTitle(list, title) {
+      list.forEach((item) => {
+        item.active = item.title === title;
+      });
+    },
+    isUnitTitle() {
+      return this.isSpecialInvoice || this.title === "单位";
+    },
+    syncReceiptTitle() {
+      this.submitData.receiptTitle = this.isUnitTitle()
+        ? this.submitData.companyName
+        : this.submitData.personalName;
+    },
+    clearInvoiceInfo() {
+      this.submitData.receiptTitle = "";
+      this.submitData.personalName = "";
+      this.submitData.companyName = "";
+      this.submitData.taxpayerId = "";
+      this.submitData.receiptContent = "";
+      this.submitData.companyAddress = "";
+      this.submitData.companyPhone = "";
+      this.submitData.bankName = "";
+      this.submitData.bankAccount = "";
+      this.submitData.receiptPhone = "";
+      this.submitData.receiptEmail = "";
+    },
     handleClickHeader(val, index, arr) {
-      arr = arr.map((item) => {
+      if (val.disabled) {
-        return (item.active = false);
+        return;
+      }
+      const previousTitle = this.getActiveTitle(arr);
+      if (arr === this.invoiceType && previousTitle !== val.title) {
+        this.shouldClearOnTypeChange = true;
+      }
+      arr.forEach((item) => {
+        item.active = false;
       });
       val.active = true;
     },
@@ -161,7 +331,17 @@ export default {
       /**
        * 验证
        */
-      const { receiptTitle, taxpayerId, receiptContent } = this.submitData;
+      const {
+        receiptTitle,
+        taxpayerId,
+        companyAddress,
+        companyPhone,
+        bankName,
+        bankAccount,
+        receiptPhone,
+        receiptEmail,
+      } = this.submitData;
+      this.syncReceiptTitle();
 
       if (this.$u.test.isEmpty(receiptTitle)) {
         uni.showToast({
@@ -184,6 +364,62 @@ export default {
 
         return false;
       }
+      if (this.isSpecialInvoice && this.$u.test.isEmpty(companyAddress)) {
+        uni.showToast({
+          title: "请您填写单位地址!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (this.isSpecialInvoice && this.$u.test.isEmpty(companyPhone)) {
+        uni.showToast({
+          title: "请您填写单位电话!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (this.isSpecialInvoice && this.$u.test.isEmpty(bankName)) {
+        uni.showToast({
+          title: "请您填写开户银行!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (this.isSpecialInvoice && this.$u.test.isEmpty(bankAccount)) {
+        uni.showToast({
+          title: "请您填写银行账号!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (this.$u.test.isEmpty(receiptPhone)) {
+        uni.showToast({
+          title: "请您填写收票人手机!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (!this.$u.test.mobile(receiptPhone)) {
+        uni.showToast({
+          title: "请输入正确的收票人手机号!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (!this.$u.test.isEmpty(receiptEmail) && !this.$u.test.email(receiptEmail)) {
+        uni.showToast({
+          title: "请输入正确的收票人邮箱!",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
 
       this.show = false;
       this.close(this.submitData);
@@ -233,6 +469,9 @@ export default {
 }
 .wrapper {
   padding: 30rpx;
+  box-sizing: border-box;
+  height: 100%;
+  overflow-y: auto;
 }
 .invoice-title {
   margin-bottom: 30rpx;