通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/order/invoice/index.js

@@ -0,0 +1,38 @@
+import { fetchOrderDetail } from '../../../services/order/orderDetail';
+
+Page({
+  data: {
+    invoice: {},
+  },
+  onLoad({ orderNo }) {
+    this.orderNo = orderNo;
+    this.init();
+  },
+  init() {
+    this.getDetail();
+  },
+  getDetail() {
+    const params = {
+      parameter: this.orderNo,
+    };
+    return fetchOrderDetail(params).then((res) => {
+      const order = res.data;
+
+      const invoice = {
+        buyerName: order?.invoiceVO?.buyerName, //个人或公司名称
+        buyerTaxNo: order?.invoiceVO?.buyerTaxNo, //税号
+        buyerPhone: order?.invoiceVO?.buyerPhone, //手机
+        email: order?.invoiceVO?.email, //邮箱
+        titleType: order?.invoiceVO?.titleType === 1 ? '个人' : '公司', //发票抬头 1-个人 2-公司
+        ontentType: order?.invoiceVO?.ontentType === 1 ? '商品明细' : '2类别', //发票内容 1-明细 2类别
+        invoiceType:
+          order?.invoiceVO?.invoiceType === 5 ? '电子普通发票' : '不开发票', //是否开票 0-不开 5-电子发票
+        isInvoice: order?.invoiceVO?.buyerName ? '已开票' : '未开票',
+        money: order?.invoiceVO?.money,
+      };
+      this.setData({
+        invoice,
+      });
+    });
+  },
+});

mini-program/pages/order/invoice/index.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "发票详情",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group"
+  }
+}

mini-program/pages/order/invoice/index.wxml

@@ -0,0 +1,40 @@
+<view class="invoice-detail">
+  <view class="invoice-detail-box">
+    <view class="invoice-detail-title">发票详情</view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票类型</view>
+      <view class="invoice-detail-box-value">{{invoice.invoiceType}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票抬头</view>
+      <view class="invoice-detail-box-value">{{invoice.buyerName}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">纳税人识别号</view>
+      <view class="invoice-detail-box-value">{{invoice.buyerTaxNo}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票内容</view>
+      <view class="invoice-detail-box-value">{{invoice.ontentType}}</view>
+    </view>
+     <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">发票金额</view>
+      <view class="invoice-detail-box-value">{{invoice.money}}</view>
+    </view>
+  </view>
+  <view class="invoice-detail-box">
+    <view class="invoice-detail-title">收票人信息</view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">邮箱</view>
+      <view class="invoice-detail-box-value">{{invoice.email}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">手机号</view>
+      <view class="invoice-detail-box-value">{{invoice.buyerPhone}}</view>
+    </view>
+    <view class="invoice-detail-box-row">
+      <view class="invoice-detail-box-title">开票状态</view>
+      <view class="invoice-detail-box-value">{{invoice.isInvoice}}</view>
+    </view>
+  </view>
+</view>

mini-program/pages/order/invoice/index.wxss

@@ -0,0 +1,31 @@
+:host {
+  background-color: #f5f5f5;
+}
+
+.invoice-detail .invoice-detail-box {
+  background-color: #fff;
+  padding: 24rpx 32rpx;
+  margin-top: 24rpx;
+}
+
+.invoice-detail-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.invoice-detail-box-row {
+  display: flex;
+  margin-top: 44rpx;
+}
+
+.invoice-detail-box-title {
+  font-size: 13px;
+  color: #666666;
+  width: 156rpx;
+  margin-right: 32rpx;
+}
+
+.invoice-detail-box-value {
+  font-size: 13px;
+  color: #333333;
+}