xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceSelect/index.wxml

@@ -0,0 +1,89 @@
+<!--src/ConfirmOrder/components/Invoice/components/InvoiceSelect/index.wxml-->
+<view>
+  <CustomPopup 
+    showPopup="{{ showSelect }}" 
+    bind:onClose="onCloseInvoiceSelect"
+  >
+    <view slot="header" class="header-cont">
+      <view class="header-title">发票</view>
+      <image src="../../../../../common/assets/images/close.png" class="img" bindtap="onCloseInvoiceSelect"></image>
+    </view>
+    <view class="invoice-select-inner" slot="content">
+      <view class="invoice-select-content">
+        <view class="use-wechat" bindtap="onUseWechat">
+          <view>使用微信抬头</view>
+          <image src="../../../../../common/assets/images/zhixiang.png" class="img" />
+        </view>
+        <view class="invoice-select-tip MB2">
+          <view class="type-title">发票类型</view>
+          <view class="notice" bindtap="showTips">
+            查看发票须知
+            <image src="../../../../../common/assets/images/icon-tip.png" class="img" />
+          </view>
+        </view>
+        <view class="invoice-select-remind">
+          此处为申请增值税普通发票（电子发票），如需专用发票联系商家。
+        </view>
+        <view class="invoice-select-button MB4 ET0">
+          <view
+            wx:for="{{ invoiceForm }}"
+            wx:key="key"
+            class="button {{ item.class }}"
+            data-item="{{ item }}"
+            bindtap="choiceType"
+          >
+          {{ item.title }}
+          </view>
+        </view>
+        <view class="input-top MB2">发票抬头</view>
+        <view class="invoice-select-input MB3">
+          <input 
+            value="{{ invoiceMessage.invoiceHead }}" 
+            placeholder="请输入{{ invoiceForm[invoiceMessage.invoiceType - 1].title }}名称"
+            data-type="invoiceHead"
+            bindinput="changeMsg"
+          />
+        </view>
+        <view class="input-top MB2" wx:if="{{ invoiceForm[invoiceMessage.invoiceType - 1].showTaxNumber }}">企业税号</view>
+        <view class="invoice-select-input MB3" wx:if="{{ invoiceForm[invoiceMessage.invoiceType - 1].showTaxNumber }}">
+          <input 
+            value="{{ invoiceMessage.taxNumber }}" 
+            placeholder="请输入企业税号"
+            data-type="taxNumber"
+            bindinput="changeMsg"
+          />
+        </view>
+        <view class="invoice-select-category" wx:if="{{ showClass }}">
+          <view class="input-top MB2">发票内容</view>
+          <view class="invoice-select-remind">
+            发票内容将显示{{ invoiceContent }}名称
+          </view>
+          <view class="invoice-select-button ET0 MB3">
+            <view
+              wx:for="{{ invoiceClass }}"
+              wx:key="key"
+              class="button {{ item.class }}"
+              data-item="{{ item }}"
+              bindtap="choiceClass"
+            >
+            {{ item.title }}
+            </view>
+          </view>
+        </view>
+        <view class="input-top MB2">收票邮箱</view>
+        <view class="invoice-select-input MB3">
+          <input 
+            value="{{ invoiceMessage.invoiceEmail }}" 
+            placeholder="用于向你发送电子发票"
+            data-type="invoiceEmail"
+            bindinput="changeMsg"
+          />
+        </view>
+      </view>
+      <view class="invoice-select-foot">
+        <view bindtap="onSubmit" class="button theme-customize-bg">完成</view>
+      </view>
+    </view>
+  </CustomPopup>
+  <InvoiceTip showTip="{{ showTip }}" bind:closeTip="showTips"></InvoiceTip>
+</view>

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceSelect/index.wxss

@@ -0,0 +1,152 @@
+/* 主题色 */
+.theme-customize-bg {
+  background-color: #1472FF !important;
+}
+.theme-customize-border {
+  border-color: #1472FF !important;
+}
+.theme-customize-font {
+  color: #1472FF !important;
+}
+.theme-customize-light-new {
+  background-color: #9db8f1 !important;
+}
+.theme-customize-bg-light {
+  background-color: #9db8f1 !important;
+}
+.header-cont {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.header-cont .header-title {
+  color: #333333;
+  font-size: 32rpx;
+  font-weight: 600;
+}
+.header-cont .img {
+  width: 32rpx;
+  height: 32rpx;
+  position: absolute;
+  right: 32rpx;
+  top: 32rpx;
+}
+.invoice-select-inner {
+  display: flex;
+  flex-direction: column;
+}
+.invoice-select-inner .invoice-select-content {
+  padding: 0 32rpx 114rpx 32rpx;
+}
+.invoice-select-inner .invoice-select-content .use-wechat {
+  font-weight: 500;
+  margin-bottom: 32rpx;
+  display: flex;
+  font-size: 28rpx;
+  line-height: 32rpx;
+  color: #07C160;
+}
+.invoice-select-inner .invoice-select-content .use-wechat .img {
+  width: 32rpx;
+  height: 32rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-tip {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-tip .type-title {
+  font-weight: 600;
+  font-size: 28rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-tip .notice {
+  display: flex;
+  align-items: center;
+  color: #999999;
+  font-size: 24rpx;
+  font-weight: 500;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-tip .notice .img {
+  width: 20rpx;
+  height: 20rpx;
+  margin-left: 10rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-remind {
+  color: #999999;
+  font-size: 28rpx;
+  font-weight: 400;
+  margin-bottom: 24rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-button {
+  display: flex;
+  margin-bottom: 24rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-button .button {
+  background: #f5f5f5;
+  border-radius: 28rpx;
+  padding: 10rpx 32rpx;
+  margin-right: 24rpx;
+  font-size: 24rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-button .active {
+  border-width: 2rpx;
+  border-style: solid;
+  background: #fff3eb;
+  border-color: #ffa86f;
+}
+.invoice-select-inner .invoice-select-content .input-top {
+  font-weight: 600;
+  font-size: 28rpx;
+  margin-bottom: 16rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-input {
+  border-radius: 4rpx;
+  border: 1rpx solid #ebebeb;
+  padding: 24rpx;
+  opacity: 0.6;
+  margin-bottom: 24rpx;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-input input {
+  width: 100%;
+  border: 0;
+  padding: 0;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-input input::-webkit-input-placeholder {
+  /* placeholder颜色 */
+  color: #b2b2b2;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-input input:-ms-input-placeholder {
+  /* placeholder颜色 */
+  color: #b2b2b2;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-input input:-moz-placeholder {
+  /* placeholder颜色 */
+  color: #b2b2b2;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-input input::-moz-placeholder {
+  /* placeholder颜色 */
+  color: #999999;
+}
+.invoice-select-inner .invoice-select-content .invoice-select-category {
+  padding: 40rpx 0;
+}
+.invoice-select-inner .invoice-select-foot {
+  background: #fff;
+  box-sizing: border-box;
+  border-top: 2rpx solid #eee;
+  padding: 12rpx 32rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 28rpx;
+}
+.invoice-select-inner .invoice-select-foot .button {
+  width: 100%;
+  color: #fff;
+  border-radius: 40rpx;
+  padding: 24rpx 0;
+}

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceTip/index.js

@@ -0,0 +1,33 @@
+// src/ConfirmOrder/components/Invoice/components/InvoiceTip/index.js
+Component({
+  options: {
+    styleIsolation: 'shared',
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    //是否显示发票提示
+    showTip: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    //关闭提示弹窗
+    onClose() {
+      this.triggerEvent("closeTip")
+    },
+  }
+})

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceTip/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceTip/index.less

@@ -0,0 +1,49 @@
+@import "../../../../../common/css/theme.wxss";
+
+.invoice-select-bremind {
+  padding: 64rpx 48rpx;
+  box-sizing: border-box;
+  border-radius: 16rpx;
+  width: 100%;
+
+  .close-tip {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+    color: #bfbfbf;
+  }
+
+  .invoice-tip-title {
+    text-align: center;
+    font-weight: 500;
+    margin-bottom: 56rpx;
+    font-size: 36rpx;
+  }
+
+  .invoice-tip-content {
+    letter-spacing: 2rpx;
+    line-height: 56rpx;
+    font-size: 32rpx;
+    font-weight: 400;
+  }
+
+  .invoice-tip-button {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 16rpx 32rpx;
+
+    .button {
+      width: 100%;
+      color: #fff;
+      border-radius: 40rpx;
+      width: calc(100% - 64rpx);
+      font-weight: 500;
+      border: 0;
+      padding: 20rpx 0;
+      text-align: center;
+      font-size: 28rpx;
+    }
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceTip/index.wxml

@@ -0,0 +1,17 @@
+<!--src/ConfirmOrder/components/Invoice/components/InvoiceTip/index.wxml-->
+<van-popup show="{{ showTip }}" close-on-click-overlay="{{ false }}" bind:close="onClose" bind:click-overlay="onClose" custom-class="invoice-select-bremind" position="bottom" round custom-style="height: 80%">
+  <view>
+    <view class="invoice-tip-title">
+      发票须知
+    </view>
+    <view class="invoice-tip-content">
+      <view>
+        1、电子发票是税局认可的有效收付款凭证，其法律效力、基本用途及使用规定同纸质发票，支持报销入账，如需纸质发票可自行下载打印
+      </view>
+      <view>2、如申请发票时填写发票抬头错误，请联系商家将发票冲红后在重新开票</view>
+    </view>
+    <view class="invoice-tip-button">
+      <view class="button theme-customize-bg" bindtap="onClose">知道了</view>
+    </view>
+  </view>
+</van-popup>

package/miniprogram_dist/ConfirmOrder/components/Invoice/components/InvoiceTip/index.wxss

@@ -0,0 +1,58 @@
+/* 主题色 */
+.theme-customize-bg {
+  background-color: #1472FF !important;
+}
+.theme-customize-border {
+  border-color: #1472FF !important;
+}
+.theme-customize-font {
+  color: #1472FF !important;
+}
+.theme-customize-light-new {
+  background-color: #9db8f1 !important;
+}
+.theme-customize-bg-light {
+  background-color: #9db8f1 !important;
+}
+.invoice-select-bremind {
+  padding: 64rpx 48rpx;
+  box-sizing: border-box;
+  border-radius: 16rpx;
+  width: 100%;
+}
+.invoice-select-bremind .close-tip {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+  color: #bfbfbf;
+}
+.invoice-select-bremind .invoice-tip-title {
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: 56rpx;
+  font-size: 36rpx;
+}
+.invoice-select-bremind .invoice-tip-content {
+  letter-spacing: 2rpx;
+  line-height: 56rpx;
+  font-size: 32rpx;
+  font-weight: 400;
+}
+.invoice-select-bremind .invoice-tip-button {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 16rpx 32rpx;
+}
+.invoice-select-bremind .invoice-tip-button .button {
+  width: 100%;
+  color: #fff;
+  border-radius: 40rpx;
+  width: calc(100% - 64rpx);
+  font-weight: 500;
+  border: 0;
+  padding: 20rpx 0;
+  text-align: center;
+  font-size: 28rpx;
+}

package/miniprogram_dist/ConfirmOrder/components/Invoice/index.js

@@ -0,0 +1,155 @@
+// src/ConfirmOrder/components/Invoice/index.js
+import {
+  getShopConf
+} from "../../../common/api/confirmOrder"
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    payPrams: {
+      type: Object,
+      value: () => {},
+      observer(val) {
+        if (val) {
+          this.setData({
+            invoiceMsg: {
+              invoiceHead: val.invoice_title || '',
+              taxNumber: val.tax_number || '',
+              invoiceType: val.invoice_type || 1,
+              invoiceCategory: val.content_type || 1,
+              invoiceEmail: val.email || '',
+              invoiceState: val.is_open_invoice || 0,
+            }
+          })
+        }
+      }
+    },
+    shopConf: {
+      type: Object,
+      value: () => {},
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    invoiceMessage: {
+      title: '发票',
+      value: '暂时不用开发票',
+      valueClass: 'EC4',
+    }, //发票内容
+    showSelect: false, //是否显示发票选择器组件
+    invoiceMsg: {},
+  },
+  lifetimes: {
+    attached: function () {
+      this.obtainInvoiceMessage();
+    },
+  },
+  computed: {
+    showInvoice(data) {
+      return data.shopConf?.enable_invoice === 1;
+    }
+  },
+  observers: {
+    invoiceMessage(val) {
+      console.log(val);
+    }
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 供子组件修改父组件值
+    updataData(e) {
+      this.setData({
+        ...e.detail
+      })
+    },
+    //打开发票选择器
+    onShowSelect() {
+      this.setData({
+        showSelect: true
+      })
+    },
+    // 关闭
+    closeSelect() {
+      this.setData({
+        showSelect: false
+      })
+    },
+    // 获得发票选择器传过来的发票信息
+    onGetInvoiceMsg(e) {
+      let val = e.detail
+      this.setData({
+        invoiceMsg: JSON.parse(JSON.stringify(val))
+      })
+      if (this.data.invoiceMsg.invoiceType === 2) {
+        this.setData({
+          ["invoiceMsg.taxNumber"]: ""
+        })
+      }
+      let data = {
+        invoice_type: this.data.invoiceMsg.invoiceType,
+        content_type: this.data.invoiceMsg.invoiceCategory,
+        email: this.data.invoiceMsg.invoiceEmail,
+        invoice_title: this.data.invoiceMsg.invoiceHead,
+        tax_number: this.data.invoiceMsg.taxNumber,
+        is_open_invoice: this.data.invoiceMsg.invoiceState,
+      }
+      this.obtainInvoiceMessage()
+      if (this.data.invoiceMsg.invoiceState === 0) {
+        data = {
+          is_open_invoice: 0
+        };
+      }
+      this.triggerEvent("dataChange", {
+        name: 'invoice',
+        payParams: data,
+      })
+    },
+    // 获得发票展示信息
+    obtainInvoiceMessage() {
+      if (this.data.invoiceMsg.invoiceState === 0) {
+        this.setData({
+          ["invoiceMessage.valueClass"]: "EC4"
+        })
+      } else {
+        this.setData({
+          ["invoiceMessage.valueClass"]: "EC1"
+        })
+      }
+      let str = '';
+      let categoryArray = ['类别', '明细'];
+      // 发票未提交
+      if (this.data.invoiceMsg.invoiceState === 0) {
+        str = '暂时不用开发票';
+      } else if (
+        //发票已提交且发票类型为个人
+        this.data.invoiceMsg.invoiceState === 1 &&
+        this.data.invoiceMsg.invoiceType === 2
+      ) {
+        str = `普票(商品${
+          categoryArray[this.data.invoiceMsg.invoiceCategory - 1] //获取商品类别
+        }-个人)`;
+      } else {
+        // 发票已提交且发票类型为企业
+        str = `普票(商品${
+          categoryArray[this.data.invoiceMsg.invoiceCategory - 1] //获取商品类别
+        }-${
+          this.data.invoiceMsg.invoiceHead.length <= 11 //判断发票抬头长度是否超过11字节
+            ? this.data.invoiceMsg.invoiceHead
+            : this.data.invoiceMsg.invoiceHead.slice(0, 11) + '...'
+        })`;
+      }
+      this.setData({
+        ["invoiceMessage.value"]: str
+      })
+    },
+  }
+})

package/miniprogram_dist/ConfirmOrder/components/Invoice/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "@vant/weapp/cell/index",
+    "InvoiceSelect": "./components/InvoiceSelect/index"
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/Invoice/index.less

@@ -0,0 +1,29 @@
+.invoice-show {
+  line-height: 0.4rem;
+
+  .invoice-title {
+    min-width: 0.72rem;
+    flex-grow: 0;
+  }
+
+  .right-cont {
+    display: flex;
+    text-align: right;
+    align-items: center;
+    justify-content: flex-end;
+
+    .img-zhixiang {
+      width: 32rpx;
+      height: 32rpx;
+    }
+  }
+
+
+  .EC1 {
+    color: #333;
+  }
+
+  .EC4 {
+    color: #ccc;
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/Invoice/index.wxml

@@ -0,0 +1,24 @@
+<!--src/ConfirmOrder/components/Invoice/index.wxml-->
+<view wx:if="{{ showInvoice }}">
+  <van-cell 
+    title="{{ invoiceMessage.title }}"
+    custom-class="invoice-show"
+    value-class="invoice-value {{ invoiceMessage.valueClass }}"
+    input-align="right"
+    bind:click="onShowSelect"
+  >
+    <view class="right-cont">
+      <view>{{ invoiceMessage.value }}</view> 
+      <image src="../../../common/assets/images/zhixiang.png" class="img-zhixiang"></image>
+    </view>
+  </van-cell>
+  <!-- 发票选择器 -->
+  <InvoiceSelect
+    showSelect="{{ showSelect }}"
+    payPrams="{{ payPrams }}"
+    shopConf="{{ shopConf }}"
+    bind:closeSelect="closeSelect"
+    bind:getInvoiceMsg="onGetInvoiceMsg"
+    bind:updataData="updataData"
+  ></InvoiceSelect>
+</view>

package/miniprogram_dist/ConfirmOrder/components/Invoice/index.wxss

@@ -0,0 +1,23 @@
+.invoice-show {
+  line-height: 0.4rem;
+}
+.invoice-show .invoice-title {
+  min-width: 0.72rem;
+  flex-grow: 0;
+}
+.invoice-show .right-cont {
+  display: flex;
+  text-align: right;
+  align-items: center;
+  justify-content: flex-end;
+}
+.invoice-show .right-cont .img-zhixiang {
+  width: 32rpx;
+  height: 32rpx;
+}
+.invoice-show .EC1 {
+  color: #333;
+}
+.invoice-show .EC4 {
+  color: #ccc;
+}