Client-Teapay/src/pagesB/invoice/editinvoice.vue

<template>
  <div class="editinvoice">
    <div class="top">
      <span>本次共选择{{ list.length }}个订单，合计￥{{ money }}</span>
    </div>
    <div class="tit">发票详情</div>
    <div class="formBar">
      <div class="form-item flex_r flex_jb">
        <div class="label">发票类型</div>
        <div class="input">增值税电子普通发票</div>
      </div>
      <div class="form-item flex_r flex_jb">
        <div class="label">抬头类型</div>
        <div class="input">
          <div class="option-i" @click="type = 1">
            <img
              src="@/static/img/xuanzhong_icon.png"
              v-if="type == 1"
              class="ico"
              alt=""
            />
            <img
              src="@/static/img/weixuanzhong_icon.png"
              v-else
              class="ico"
              alt=""
            />
            <span class="txt">个人或事业单位</span>
          </div>
          <div class="option-i" @click="type = 2">
            <img
              src="@/static/img/xuanzhong_icon.png"
              v-if="type == 2"
              class="ico"
              alt=""
            />
            <img
              src="@/static/img/weixuanzhong_icon.png"
              v-else
              class="ico"
              alt=""
            />
            <span class="txt">企业</span>
          </div>
        </div>
      </div>
      <div class="form-item flex_r flex_jb">
        <div class="label">发票抬头</div>
        <input class="input" placeholder="请填写发票抬头" v-model="gmf_mc" />
      </div>
      <div class="form-item flex_r flex_jb" v-if="type == 2">
        <div class="label">税号</div>
        <input class="input" placeholder="请填写税号" v-model="gmf_nsrsbh" />
      </div>
      <div class="form-item flex_r flex_jb" v-if="type == 1">
        <div class="label">身份证号</div>
        <input
          class="input"
          placeholder="请填写身份证号"
          v-model="gmf_nsrsbh"
        />
      </div>
    </div>
    <div class="tit">接收信息</div>
    <div class="formBar">
      <div class="form-item flex_r flex_jb">
        <div class="label">电子邮箱：</div>
        <input class="input" placeholder="请填写邮箱地址" v-model="email" />
      </div>
      <div class="form-item flex_r flex_jb">
        <div class="label">手机号码：</div>
        <input
          class="input"
          placeholder="请填写手机号码"
          :value="userinfo.mobile"
          disabled
        />
      </div>
    </div>
    <div class="submitBtn" @click="onsubmitBtn">提交</div>
    <uni-popup ref="uniPopup" type="bottom">
      <div class="uniPopup_Box">
        <div class="Popup_tit">开票信息确认</div>
        <div class="closeBtn iconfont" @click="closeBtn">&#xe609;</div>
        <div class="infoLi">
          <div class="info-item flex_r flex_jb">
            <div class="label">发票抬头</div>
            <div class="input">{{ gmf_mc }}</div>
          </div>
          <div class="info-item flex_r flex_jb">
            <div class="label">税号</div>
            <div class="input">{{ gmf_nsrsbh }}</div>
          </div>
          <div class="info-item flex_r flex_jb">
            <div class="label">价税合计</div>
            <div class="input">数字商城 {{ money }}元</div>
          </div>
          <div class="info-item flex_r flex_jb">
            <div class="label">电子邮箱</div>
            <div class="input">{{ email }}</div>
          </div>
          <div class="info-item flex_r flex_jb">
            <div class="label">手机号码</div>
            <div class="input">{{ userinfo.mobile }}</div>
          </div>
        </div>
        <div class="btn-bar flex_r flex_jb">
          <div class="btn-item" @click="reset">重置</div>
          <div class="btn-item confirm" @click="confirm">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>
<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import { post } from "@/request/api.js";
let app = getApp();
var appEv = app.$vm.$options;
export default {
  name: "editinvoice",
  components: {
    uniPopup,
  },
  data() {
    return {
      type: 1,
      list: [],
      money: 0,
      listString: undefined,
      userinfo: undefined,
      gmf_nsrsbh: undefined,
      gmf_mc: undefined,
      email: undefined,
    };
  },
  onLoad(option) {
    this.list = option.icheckList.split(",");
    this.money = option.money;
    this.userinfo = uni.getStorageSync("userinfo");
  },
  onLaunch() {},
  onShow() {},
  onHide() {},
  methods: {
    onsubmitBtn() {
      if (!this.email || !this.gmf_nsrsbh || !this.gmf_mc) {
        appEv.errTips("请完整填写资料");
        return;
      }
      this.$refs.uniPopup.open();
    },
    // 点击关闭弹窗
    closeBtn() {
      this.$refs.uniPopup.close();
    },
    confirm() {
      if (!this.email || !this.gmf_nsrsbh || !this.gmf_mc) {
        appEv.errTips("请完整填写资料");
        return;
      }
      let data = {
        type: this.type - 1,
        email: this.email,
        mobile: this.userinfo.mobile,
        gmf_mc: this.gmf_mc,
        gmf_nsrsbh: this.gmf_nsrsbh,
        orderId: this.list.toString(),
      };
      uni.showLoading({
        mask: true,
        title: "开票中...",
      });
      post("v1/invoice/invoicing", data).then((res) => {
        uni.hideLoading();
        if (res.code === 0) {
          this.goto("/pagesB/invoice/Billingresult", { id: res.data });
        }
      });
    },
    //重置
    reset() {
      this.gmf_nsrsbh = undefined;
      this.gmf_mc = undefined;
      this.email = undefined;
      this.type = 1;
      this.closeBtn();
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang='scss'>
page {
  background-color: #f6f6f6;
}
.top {
  padding: 20rpx 36rpx;
  background: #fff;
  margin-bottom: 20rpx;
  span {
    font-size: 32rpx;
  }
}
.editinvoice {
  padding: 36rpx;
  .tit {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 26rpx;
  }
  .formBar {
    background: #fff;
    border-radius: 16rpx;
    padding: 36rpx 28rpx;
    margin-bottom: 52rpx;
  }
  .form-item {
    margin-bottom: 26rpx;
    font-size: 30rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .label {
      width: 168rpx;
    }
    .input {
      width: calc(100% - 168rpx);
      text-align: right;
    }
    .option-i {
      display: inline-block;
      margin-right: 32rpx;
      &:last-child {
        margin-right: 0;
      }
    }
    .ico {
      width: 32rpx;
      height: 32rpx;
      margin-right: 6rpx;
    }
    .txt,
    .ico {
      vertical-align: middle;
    }
  }
  .submitBtn {
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    background: #18bb88;
    text-align: center;
    font-size: 34rpx;
    color: #fff;
    width: calc(100% - 72rpx);
    position: fixed;
    left: 36rpx;
    bottom: 46rpx;
  }
}
.uniPopup_Box {
  min-height: 40vh;
  background: #fff;
  border-radius: 36rpx 36rpx 0 0;
  padding: 0 36rpx 36rpx;
  position: relative;
  .Popup_tit {
    font-size: 32rpx;
    font-weight: bold;
    padding: 30rpx 0;
    text-align: center;
  }
  .closeBtn {
    position: absolute;
    right: 30rpx;
    top: 26rpx;
    font-size: 43rpx;
    color: #555;
  }
  .infoLi {
    padding: 20rpx 36rpx;
    background: #fafafa;
    border-radius: 16rpx;
    .info-item {
      margin-bottom: 26rpx;
      font-size: 30rpx;
      &:last-child {
        margin-bottom: 0;
      }
      .label {
        width: 140rpx;
        color: #333;
        text-align: justify;
        text-align-last: justify;
      }
      .input {
        width: calc(100% - 140rpx);
        text-align: right;
        color: #666;
      }
    }
  }
  .btn-bar {
    width: calc(100% - 72rpx);
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    position: absolute;
    bottom: 36rpx;
    left: 36rpx;
    border: 1px solid #18bb88;
    .btn-item {
      width: 50%;
      text-align: center;
    }
    .confirm {
      background: #18bb88;
      color: #fff;
      border-radius: 0 40rpx 40rpx 0;
    }
  }
}
</style>