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

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

@@ -0,0 +1,182 @@
+/* eslint-disable no-nested-ternary */
+import Dialog from 'tdesign-miniprogram/dialog/index';
+import Toast from 'tdesign-miniprogram/toast/index';
+import { dispatchSupplementInvoice } from '../../../services/order/orderConfirm';
+
+const invoiceJson = {
+  info: [
+    '1.根据当地税务局的要求，开具有效的企业发票需填写税务局登记证号。开具个人发票不需要填写纳税人识别码。 ',
+    '2.电子普通发票： 电子普通发票是税局认可的有效首付款凭证，其法律效力、基本用途及使用规定同纸质发票，如需纸质发票可自行下载打印。 ',
+    '3.增值税专用发票： 增值税发票暂时不可开，可查看《开局增值税发票》或致电400-633-6868。',
+  ],
+  codeTitle: [
+    '1.什么是纳税人识别号/统一社会信用代码？ 纳税人识别号，一律由15位、17位、18或者20位码（字符型）组成，其中：企业、事业单位等组织机构纳税人，以国家质量监督检验检疫总局编制的9位码（其中区分主码位与校检位之间的“—”符省略不打印）并在其“纳税人识别号”。国家税务总局下达的纳税人代码为15位，其中：1—2位为省、市代码，3—6位为地区代码，7—8位为经济性质代码，9—10位行业代码，11—15位为各地区自设的顺序码。',
+    '2.入户获取/知晓纳税人识别号/统一社会信用代码？ 纳税人识别号是税务登记证上的号码，通常简称为“税号”，每个企业的纳税人识别号都是唯一的。这个属于每个人自己且终身不变的数字代码很可能成为我们的第二张“身份证”。  ',
+  ],
+};
+
+Page({
+  orderNo: '',
+  data: {
+    receiptIndex: 0,
+    addressTagsIndex: 0,
+    goodsClassesIndex: 0,
+    dialogShow: false,
+    codeShow: false,
+    receipts: [
+      { title: '不开发票', id: 0, name: 'receipt' },
+      { title: '电子发票', id: 1, name: 'receipt' },
+    ],
+    addressTags: [
+      { title: '个人', id: 0, name: 'addressTags', type: 1 },
+      { title: '公司', id: 1, name: 'addressTags', type: 2 },
+    ],
+    goodsClasses: [
+      { title: '商品明细', id: 0, name: 'goodsClasses' },
+      { title: '商品类别', id: 1, name: 'goodsClasses' },
+    ],
+    name: '',
+    componentName: '',
+    code: '',
+    phone: '',
+    email: '',
+    invoiceInfo: invoiceJson,
+  },
+  onLoad(query) {
+    const { orderNo, invoiceData } = query;
+    const tempData = JSON.parse(invoiceData || '{}');
+    const invoice = {
+      receiptIndex: tempData.invoiceType === 5 ? 1 : 0,
+      name: tempData.buyerName || '',
+      email: tempData.email || '',
+      phone: tempData.buyerPhone || '',
+      addressTagsIndex: tempData.titleType === 2 ? 1 : 0,
+      goodsClassesIndex: tempData.contentType === 2 ? 1 : 0,
+      code: tempData.buyerTaxNo || '',
+      componentName: tempData.titleType === 2 ? tempData.buyerName : '',
+    };
+    this.orderNo = orderNo;
+    this.setData({ ...invoice });
+  },
+  onLabels(e) {
+    const { item } = e.currentTarget.dataset;
+    const nameIndex = `${item.name}Index`;
+    this.setData({ [nameIndex]: item.id });
+  },
+  onInput(e) {
+    const { addressTagsIndex } = this.data;
+    const { item } = e.currentTarget.dataset;
+    const { value } = e.detail;
+    const key =
+      item === 'name'
+        ? addressTagsIndex === 0
+          ? 'name'
+          : 'componentName'
+        : item === 'code'
+        ? addressTagsIndex === 0
+          ? 'phone'
+          : 'code'
+        : 'email';
+    this.setData({ [key]: value });
+  },
+  onSure() {
+    const result = this.checkSure();
+    if (!result) {
+      Dialog.alert({
+        title: '请填写发票信息',
+        content: '',
+        confirmBtn: '确认',
+      });
+      return;
+    }
+    const {
+      receiptIndex,
+      addressTagsIndex,
+      receipts,
+      addressTags,
+      name,
+      componentName,
+      code,
+      phone,
+      email,
+      goodsClassesIndex,
+    } = this.data;
+
+    const data = {
+      buyerName: addressTagsIndex === 0 ? name : componentName,
+      buyerTaxNo: code,
+      buyerPhone: phone,
+      email,
+      titleType: addressTags[addressTagsIndex].type,
+      contentType: goodsClassesIndex === 0 ? 1 : 2,
+      invoiceType: receiptIndex === 1 ? 5 : 0,
+    };
+    if (this.orderNo) {
+      if (this.submitting) return;
+      const params = {
+        parameter: {
+          orderNo: this.orderNo,
+          invoiceVO: data,
+        },
+      };
+      this.submitting = true;
+      dispatchSupplementInvoice(params)
+        .then(() => {
+          Toast({
+            context: this,
+            selector: '#t-toast',
+            message: '保存成功',
+            duration: 2000,
+            icon: '',
+          });
+          setTimeout(() => {
+            this.submitting = false;
+            wx.navigateBack({ delta: 1 });
+          }, 1000);
+        })
+        .catch((err) => {
+          this.submitting = false;
+          console.error(err);
+        });
+    } else {
+      Object.assign(data, {
+        receipts: receipts[receiptIndex],
+        addressTags: addressTags[addressTagsIndex],
+      });
+      wx.setStorageSync('invoiceData', data);
+      wx.navigateBack({ delta: 1 });
+    }
+  },
+  checkSure() {
+    const { name, componentName, code, phone, email, addressTagsIndex, receiptIndex } = this.data;
+    if (receiptIndex === 0) {
+      return true;
+    }
+    if (addressTagsIndex === 0) {
+      if (!name.length || !phone.length) {
+        return false;
+      }
+    } else if (addressTagsIndex === 1) {
+      if (!componentName.length || !code.length) {
+        return false;
+      }
+    }
+    if (!email.length) {
+      return false;
+    }
+    return true;
+  },
+  onDialogTap() {
+    const { dialogShow } = this.data;
+    this.setData({
+      dialogShow: !dialogShow,
+      codeShow: false,
+    });
+  },
+  onKnoeCode() {
+    this.setData({
+      dialogShow: !this.data.dialogShow,
+      codeShow: true,
+    });
+  },
+});

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

@@ -0,0 +1,11 @@
+{
+  "navigationBarTitleText": "发票",
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

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

@@ -0,0 +1,135 @@
+<view class="receipt">
+  <view class="title">
+    <t-cell class="receipt-cell" title="发票" bordered="{{false}}" t-class-left="cell-left">
+      <view slot="right-icon" class="btn-wrap">
+        <view
+          bindtap="onLabels"
+          data-item="{{item}}"
+          class="btn {{receiptIndex === index ? 'active-btn' : ''}}"
+          wx:for="{{receipts}}"
+          wx:for-item="item"
+          wx:key="index"
+        >
+          {{item.title}}
+        </view>
+      </view>
+    </t-cell>
+  </view>
+  <block wx:if="{{receiptIndex === 1}}">
+    <t-cell class="receipt-cell" title="发票抬头" t-class-left="cell-left">
+      <view class="btn-wrap" slot="right-icon">
+        <view
+          class="btn {{addressTagsIndex === index ? 'active-btn':'' }}"
+          bindtap="onLabels"
+          data-item="{{tag}}"
+          wx:for="{{addressTags}}"
+          wx:for-item="tag"
+          wx:key="index"
+        >
+          {{tag.title}}
+        </view>
+      </view>
+    </t-cell>
+    <t-cell
+      class="receipt-cell"
+      title="{{addressTagsIndex === 0 ? '姓名':'公司名称'}}"
+      t-class-left="cell-left"
+      t-class-right="cell-right"
+    >
+      <t-input
+        slot="right-icon"
+        borderless
+        t-class="input-com"
+        value="{{addressTagsIndex === 0 ? name:componentName}}"
+        bindchange="onInput"
+        data-item="name"
+        type=""
+        placeholder="{{addressTagsIndex === 0 ? '请输入您的姓名':'请输入公司名称'}}"
+      />
+    </t-cell>
+    <t-cell
+      class="receipt-cell"
+      title="{{addressTagsIndex === 0 ? '手机号':'识别号'}}"
+      t-class-left="cell-left"
+      t-class-right="cell-right"
+    >
+      <view class="addressTagsIndex-cell" slot="right-icon">
+        <t-input
+          t-class="input-com"
+          borderless
+          value="{{addressTagsIndex === 0 ? phone:code}}"
+          bindchange="onInput"
+          data-item="code"
+          type=""
+          placeholder="{{addressTagsIndex === 0 ? '请输入您的手机号':'请输入纳税人识别号'}}"
+        />
+        <t-icon wx:if="{{addressTagsIndex === 1}}" name="help-circle" size="30rpx" bindtap="onKnoeCode" />
+      </view>
+    </t-cell>
+    <t-cell
+      class="receipt-cell"
+      title="电子邮箱"
+      bordered="{{false}}"
+      t-class-left="cell-left"
+      t-class-right="cell-right"
+    >
+      <t-input
+        slot="right-icon"
+        t-class="input-com"
+        borderless
+        value="{{email}}"
+        bindchange="onInput"
+        data-item="email"
+        type=""
+        placeholder="请输入邮箱用于接收电子发票"
+      />
+    </t-cell>
+    <view class="receipt-info">
+      <t-cell class="receipt-cell" title="发票内容" bordered="{{false}}" t-class-left="cell-left">
+        <view class="btn-wrap" slot="right-icon">
+          <view
+            class="btn {{goodsClassesIndex ===index ? 'active-btn':''}}"
+            bindtap="onLabels"
+            data-item="{{good}}"
+            wx:for="{{goodsClasses}}"
+            wx:for-item="good"
+            wx:key="index"
+          >
+            {{good.title}}
+          </view>
+        </view>
+      </t-cell>
+      <view class="title">发票内容将显示详细商品名称与价格信息，发票金额为实际支付金额，不包含优惠等扣减金额</view>
+    </view>
+    <view class="receipt-know" bindtap="onDialogTap">
+      发票须知
+      <t-icon name="help-circle" size="30rpx" />
+    </view>
+    <t-dialog
+      title="{{codeShow ? '纳税人识别号说明':'发票须知'}}"
+      bindconfirm="onDialogTap"
+      class="dialog-receipt"
+      visible="{{dialogShow}}"
+      confirm-btn="我知道了"
+    >
+      <view class="srcoll-view-wrap" slot="content">
+        <scroll-view class="dialog-info" scroll-x="{{false}}" scroll-y="{{true}}">
+          <view class="info-wrap">
+            <view class="info" wx:if="{{!codeShow}}">
+              <view class="title" wx:for="{{invoiceInfo.info}}" wx:key="index" wx:for-item="item"> {{item}} </view>
+            </view>
+            <view class="info" wx:else>
+              <view class="title" wx:for="{{invoiceInfo.codeTitle}}" wx:key="index" wx:for-item="item"> {{item}} </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </t-dialog>
+  </block>
+  <view wx:else></view>
+  <view class="safe-area-bottom receipt-btn">
+    <t-button t-class="receipt-btn-con" bindtap="onSure">确定</t-button>
+  </view>
+</view>
+<t-toast id="t-toast" />
+<t-dialog id="t-dialog" />

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

@@ -0,0 +1,220 @@
+@import '../../../style/theme.wxss';
+
+.receipt {
+  height: 100vh;
+  background: #f5f5f5;
+  position: relative;
+  padding-top: 20rpx;
+
+  --td-input-vertical-padding: 0;
+}
+
+.receipt-cell .t-cell__title {
+  width: 144rpx;
+  padding-right: 32rpx;
+  flex: none !important;
+}
+
+.receipt .t-input__wrapper {
+  margin: 0 !important;
+}
+.srcoll-view-wrap {
+  margin-top: 20rpx;
+}
+.receipt .flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.receipt .head-title {
+  color: #333;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.receipt .btn-wrap {
+  display: flex;
+}
+.receipt .btn-wrap .btn {
+  width: 128rpx;
+  background: #f5f5f5;
+  font-size: 24rpx;
+  color: #333;
+  margin-right: 22rpx;
+  text-align: center;
+  border-radius: 8rpx;
+  position: relative;
+  border: 2rpx solid #f5f5f5;
+}
+.receipt .btn-wrap .active-btn {
+  background-color: transparent;
+  border-color: #fa4126;
+  color: #fa4126;
+}
+.receipt .title {
+  width: 100%;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.receipt .receipt-label {
+  display: flex;
+}
+.receipt .receipt-label .btn {
+  width: 128rpx;
+  background: #f5f5f5;
+  font-size: 24rpx;
+  color: #333;
+  margin-left: 22rpx;
+  text-align: center;
+  border-radius: 8rpx;
+  border: 2rpx solid #f5f5f5;
+}
+.receipt .receipt-label .active-btn {
+  background-color: transparent;
+  border-color: #fa4126;
+  color: #fa4126;
+}
+.receipt .receipt-label .wr-cell__title {
+  font-size: 30rpx;
+  color: #333;
+  font-weight: bold;
+}
+.receipt .receipt-content {
+  background: #fff;
+  margin-top: 20rpx;
+}
+.receipt .receipt-content .addressTags {
+  padding: 0 30rpx;
+  height: 100rpx;
+}
+.receipt .receipt-content .addressTags .btn-wrap {
+  display: flex;
+}
+.receipt .receipt-content .line {
+  width: 720rpx;
+  margin-left: 30rpx;
+  background-color: #e6e6e6;
+  height: 1rpx;
+}
+.receipt .receipt-content .receipt-input {
+  display: flex;
+  padding: 0 30rpx;
+  align-items: center;
+  height: 100rpx;
+  color: #666;
+}
+.receipt .receipt-content .receipt-input .title {
+  color: #333;
+  display: inline-block;
+  width: 140rpx;
+  margin-right: 30rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.input-com {
+  display: inline-block;
+  flex: 1;
+  font-size: 30rpx;
+  font-weight: 400;
+  line-height: 30rpx;
+  padding: 0 !important;
+  color: #666;
+}
+.input-com::after {
+  border: none !important;
+}
+
+.receipt .receipt-content .receipt-input .wr-icon {
+  font-size: 28rpx !important;
+  margin-left: 20rpx;
+}
+.receipt .receipt-info {
+  background: #fff;
+  margin-top: 20rpx;
+}
+.receipt .receipt-info .info-con {
+  padding: 0 30rpx;
+  height: 100rpx;
+}
+.receipt .receipt-info .title {
+  font-size: 24rpx;
+  color: #999999;
+  line-height: 36rpx;
+  padding: 0 30rpx 20rpx;
+  box-sizing: border-box;
+}
+.receipt .receipt-know {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+  padding: 20rpx 30rpx;
+  line-height: 26rpx;
+}
+.receipt .receipt-know .icon {
+  margin-left: 16rpx;
+  font-size: 26rpx;
+}
+.receipt .dialog-receipt .dialog__message {
+  padding: 0;
+}
+.receipt .dialog-receipt .dialog-info {
+  max-height: 622rpx;
+}
+.receipt .dialog-receipt .info-wrap {
+  padding: 0 18rpx;
+}
+.receipt .dialog-receipt .info .title {
+  display: inline-block;
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #999;
+  line-height: 40rpx;
+  margin-bottom: 40rpx;
+  text-align: left;
+}
+.receipt .receipt-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: #fff;
+  width: 100%;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.receipt .receipt-btn .receipt-btn-con {
+  margin-top: 20rpx;
+  display: inline-block;
+  width: 100%;
+  line-height: 80rpx;
+  background: #fa4126;
+  text-align: center;
+  color: #fff;
+  border-radius: 48rpx;
+}
+
+.cell-left {
+  margin-right: 0 !important;
+}
+
+.cell-right {
+  display: flex;
+  justify-content: flex-start;
+  width: 480rpx;
+}
+
+.addressTagsIndex-cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}