commit message

pages/order/invoice/invoiceDetail.vue

@@ -0,0 +1,205 @@
+<template>
+  <view class="invoice-detail">
+    <view class="block-item flex-center">
+      <view>
+        <view>
+          {{'增值税普通发票'}}
+          <view class="circle">
+            <view></view>
+          </view>
+        </view>
+        <view>{{order.receiptPrice | unitPrice('￥')}}</view>
+      </view>
+    </view>
+    <view class="common-msg flex-center">
+      <view>
+        <view>抬头类型</view>
+        <view>{{order.receiptTitle}}</view>
+      </view>
+      <view>
+        <view>发票状态</view>
+        <view class="invoice_status">{{order.receiptStatus === 1?'已开具':'暂未开具'}}</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="发票内容" :value="order.receiptContent" :arrow="false"></u-cell-item>
+      <u-cell-item title="发票抬头" :value="order.receiptTitle" :arrow="false"></u-cell-item>
+      <u-cell-item title="纳税人识别号" v-if="order.taxpayerId" :value="order.taxpayerId" :arrow="false"></u-cell-item>
+    </u-cell-group>
+    <!-- <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>
+    </u-cell-group> -->
+    <!-- <view class="show-pic" @click="preview">
+
+      <text>点击预览发票</text>
+    </view>
+    <button class="btn" @click="download">下载电子发票</button>
+    <view class="block-2-view" v-for="(item,index) in order.elec_file_list" :key="index">
+      <u-image width="300" height="150" :src="item"></u-image>
+    </view> -->
+  </view>
+</template>
+
+<script>
+import { getReceiptDetail } from "@/api/order.js";
+
+export default {
+  data() {
+    return {
+      order: {},
+      order: {},
+      title_type: "",
+    };
+  },
+  onLoad(options) {
+    this.loadData(options.id);
+  },
+  methods: {
+    loadData(id) {
+      getReceiptDetail(id).then((res) => {
+        let order = res.data.result;
+        this.order = order;
+      });
+    },
+    preview() {
+      //预览发票
+      if (this.order.elec_file_list.length) {
+        uni.previewImage({
+          current: 0,
+          urls: this.order.elec_file_list,
+          longPressActions: {
+            itemList: ["发送给朋友", "保存图片", "收藏"],
+            success: function (data) {},
+            fail: function (err) {},
+          },
+        });
+      } else {
+        this.$api.msg("暂无发票可预览");
+      }
+    },
+    download() {
+      //下载发票
+      let _this = this;
+      if (this.order.elec_file_list.length) {
+        this.order.elec_file_list.forEach((item) => {
+          uni.downloadFile({
+            url: item,
+            success: (res) => {
+              if (res.statusCode === 200) {
+                let tempFilePath = res.tempFilePath;
+                uni.saveFile({
+                  tempFilePath: tempFilePath,
+                  success: function (res) {
+                    _this.$api.msg("发票已下载到" + res.savedFilePath);
+                  },
+                });
+              }
+            },
+          });
+        });
+      } else {
+        this.$api.msg("暂无发票可下载");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.block-item {
+  height: 217rpx;
+  width: 100%;
+  position: relative;
+  > view {
+    color: #ff6262;
+  }
+  > view:first-child {
+    text-align: center;
+    line-height: 3em;
+    > view:first-child {
+      position: relative;
+      .circle {
+        width: 166rpx;
+        height: 65rpx;
+        border: 1px solid #ff6262;
+        border-radius: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        margin: auto;
+        view {
+          width: 130rpx;
+          height: 40rpx;
+          border: 1px solid #ff6262;
+          border-radius: 100%;
+          top: 0;
+          right: 0;
+          left: 0;
+          bottom: 0;
+          margin: auto;
+          position: absolute;
+        }
+      }
+    }
+    > view:last-child {
+      font-size: 40rpx;
+    }
+  }
+}
+
+.common-msg {
+  flex-direction: row;
+  padding: 20rpx;
+  height: 118rpx;
+  background-color: #ffffff;
+  margin-bottom: 20rpx;
+
+  > view {
+    width: 50%;
+    text-align: center;
+    color: #666666;
+    line-height: 1.5em;
+    view {
+      font-size: 24rpx;
+    }
+    .invoice_status {
+      color: #ff6262;
+    }
+  }
+
+  > view:first-child {
+    border-right: 1px solid #eee;
+  }
+}
+.show-pic {
+  text-align: center;
+  margin-top: 40rpx;
+  image {
+    width: 27rpx;
+    height: 27rpx;
+    margin-right: 10rpx;
+    vertical-align: middle;
+  }
+  text {
+    color: $main-color;
+    font-size: $font-sm;
+  }
+}
+
+.btn {
+  font-size: 34rpx;
+  margin: 60rpx 20rpx;
+  &::after {
+    border: none;
+  }
+}
+.u-cell {
+  padding: 35rpx 20rpx;
+  height: 110rpx;
+  color: #333333;
+}
+</style>