deming/pageC/cart/selectInvoice.vue

<template>
  <view class="select-invoice">
    <view class="invoice-type">
      <view class="title">发票类型</view>
      <u-radio-group v-model="type" @change="radioGroupChange" icon-size="0" active-color="#FF780F" size="16">
        <u-radio 
          v-for="(item, index) in list" :key="index" 
          :name="item.type"
        >
          {{item.name}}
        </u-radio>
      </u-radio-group>
    </view>
    <view class="invoice-list" v-if="currentList.length">
       <u-radio-group v-model="invoice" @change="selectInvoice" active-color="#FF780F" icon-size="22" size="30" :wrap="true">
        <u-radio 
          v-for="(item, index) in currentList" :key="index" 
          :name="item.invoice_id"
        >
          {{ item.invoice_title }}
        </u-radio>
      </u-radio-group>
    </view>
    <view class="invoice-none" v-if="!currentList.length">您当前还未添加抬头发票，<text @click="addInvoice">点击立即添加</text></view>
    <view class="btn-group">
      <view class="submit" @click="submit">提交申请</view>
      <view class="cancel" @click="cancel">不开发票</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      type: 1,
      list: [{
        type: 1,
        name: '个人或事业单位'
      }, {
        type: 2,
        name: '企业'
      }],
      invoice: '',
      invoiceList: [],
      currentList: [],
    }
  },
  onShow() {
    this.type = 1;
    this.getInvoiceList();
  },
  watch: {
    type(value) {
      let invoiceList = this.invoiceList.filter(item => item.invoice_type == value);
      this.currentList = invoiceList;
    }
  },
  methods: {
    getInvoiceList() {
      this.$u.api.getInvoiceList().then(res => {
        this.invoiceList = res.data;
        this.currentList = this.invoiceList.filter(item => item.invoice_type == this.type);
        // console.log(this.invoiceList);
      })
    },
    radioGroupChange(e) {
      this.type = e;
    },
    selectInvoice(e) {
      this.invoice = e;
    },
    submit() {
      console.log(this.invoice);
      if(!this.invoice) {
        this.$u.toast('请选择发票');
        return false;
      }
      this.$store.commit('setInvoiceInfo', {
        invoice_type: this.type,
        invoice_id: this.invoice
      });
      this.$u.route({ type: 'back' });
    },
    cancel() {
      this.$store.commit('setInvoiceInfo', {
        invoice_type: 0
      });
      this.$u.route({ type: 'back' });
    },
    addInvoice() {
      this.$u.route('/pageE/more/EditInvoice', { action: 1 });
    },
  }
};
</script>
<style lang="scss" scoped>
.select-invoice {
  min-height: calc(100vh - var(--window-top));
	background: #ECECEC;
  padding-top: 1rpx;
  .invoice-type {
    height: 98rpx;
    background: #FFFFFF;
    margin-bottom: 2rpx;
    padding: 35rpx 30rpx;
    display: flex;
    align-items: center;
    .title {
      font-size: 30rpx;
      color: #333333;
      width: 120rpx;
      margin-right: 50rpx;
    }
    .u-radio-group {
      flex: 1;
      /deep/ .u-radio {
        .u-radio__icon-wrap {
          margin: 0 20rpx;
          position: relative;
          background-color: #DBDBDB;
          &::before {
            content: '';
            position: absolute;
            width: 29rpx;
            height: 29rpx;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1rpx solid #DBDBDB;
            border-radius: 50%;
          }
        }
        .u-radio__icon-wrap--checked {
          background-color: #FF780F;
          &::before {
            border-color: #FF780F;
          }
        }
      }
    }
  }
  .invoice-list {
    background-color: #FFFFFF;
    /deep/ .u-radio-group {
      .u-radio {
        padding: 30rpx;
        height: 80rpx;
        line-height: 1 !important;
        .u-radio__icon-wrap {
          margin-right: 20rpx;
        }
      }
    }
  }
  .invoice-none {
    text-align: center;
    margin-top: 70rpx;
    font-size: 26rpx;
    color: #333333;
    > text {
      color: #FF780F;
    }
  }
  .btn-group {
    margin-top: 250rpx;
    > view {
      width: 690rpx;
      height: 98rpx;
      border-radius: 49rpx;
      font-size: 36rpx;
      margin: 0 auto;
      line-height: 98rpx;
      text-align: center;
    }
    .submit {
      background: #FF780F;
      color: #FFFFFF;
      margin-bottom: 20rpx;
    }
    .cancel {
      background: #FFFFFF;
      color: #FF780F;
    }
  }
}
</style>