ali_ai_learn_web/src/pages/Personal/Orders.vue

<template>
  <div class="order">
    <el-tabs v-model="form.orderStatus" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
        <ul class="order-list">
          <li v-for="(item, index) in list" :key="index">
            <div class="order-list-top flex-center-between">
              <div class="order-list-top-l flex-align-center">
                <el-tag
                  :type="item.orderStatus == 0 ? 'primary' : item.orderStatus == 1 ? 'success' : item.orderStatus == 2 ? 'danger' : ''">{{
                    item.orderStatus == 0 ?
                      $t('personalCenter.daifukuan') : item.orderStatus == 1 ? $t('personalCenter.yiwancheng') :
                        item.orderStatus == 2 ?
                          $t('personalCenter.yiquxiao') : '' }}</el-tag>
                <div class="">{{ $t('personalCenter.dingdanhao') }}: {{ item.orderNo }}</div>
              </div>
              <div class="order-list-top-r">{{ $t('common.orderTime') }}: {{ item.createTime }}</div>
            </div>
            <div class="order-list-main flex">
              <div class="order-list-main-l flex">
                <img class="image" :src="item.orderImage" alt="">
                <div class="">
                  <div class="title">{{ item.orderTypeName }}</div>
                  <div class="">{{ item.description }}
                    <!-- <el-button type="primary" size="small" plain>技能标签</el-button>
                    <el-button type="primary" size="small" plain>技能标签</el-button> -->
                  </div>
                </div>
              </div>
              <div class="order-list-main-r flex">
                <div class="order-list-con flex-center-between flex_1">


                  <div class="mi_price price">
                    <div class="">{{ item.amount || 0 }}{{ item.amountUnit }}</div>
                    <div class="">{{ item.payMethodName }}</div>
                  </div>
                  <div class="mi_price">
                    <div class="">{{ item.orderNum }}</div>
                    <div class=""></div>
                    <!-- <div class="">{{ item.payMethod == 'BMI' ? $t('common.baomibi') : $t('common.mibi') }}</div> -->
                  </div>
                  <div class="">
                    <div v-if="item.invoiceStatus == 0 && item.orderStatus == 1" @click="applyInvoices(item, index)"
                      class="blue btn">
                      <img src="/src/assets/imgs/my/order3@2x.png" alt="">
                      <div class="">{{ $t('common.applyInvoice') }}</div>
                    </div>

                    <div class="gradient btn" v-else-if="item.orderStatus == 0" @click="pay(item)">
                      <img src="/src/assets/imgs/my/order1@2x.png" alt="">
                      <div class="">{{ $t('common.goPay') }}</div>
                    </div>
                    <div class="btn_kong" v-else></div>
                    <template v-if="false">
                      <template v-if="index == 0">
                        <div class="gradient btn">
                          <img src="/src/assets/imgs/my/order1@2x.png" alt="">
                          <div class="">{{ $t('common.goPay') }}</div>
                        </div>
                        <div class="blue btn mt8">
                          <img src="/src/assets/imgs/my/order2@2x.png" alt="">
                          <div class="">{{ $t('common.cancelOrder') }}</div>
                        </div>
                      </template>
                      <template v-else-if="index == 1">
                        <div class="blue btn">
                          <img src="/src/assets/imgs/my/order3@2x.png" alt="">
                          <div class="">{{ $t('common.applyInvoice') }}</div>
                        </div>
                        <div class="red btn mt8">
                          <img src="/src/assets/imgs/my/order4@2x.png" alt="">
                          <div class="">{{ $t('common.applyRefund') }}</div>
                        </div>
                      </template>
                      <template v-else-if="index == 2">
                        <div class="btn gradient">
                          <img src="/src/assets/imgs/my/order5@2x.png" alt="">
                          <div class="">{{ $t('common.reorder') }}</div>
                        </div>
                      </template>
                    </template>

                  </div>
                </div>
              </div>


            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />
    <el-dialog v-model="dialogVisible" title="申请开票" width="784">
      <div class="dialog_title">发票抬头信息</div>
      <el-form :model="invoiceData" class="demo-form-inline" label-position="top" :rules="rules" ref="ruleFormRef">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="抬头类型">
              <el-radio-group v-model="invoiceData.invoiceType">
                <el-radio value="0" size="large">个人</el-radio>
                <el-radio value="1" size="large">企业单位</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购方名称" prop="invoiceTitle">
              <el-input v-model="invoiceData.invoiceTitle" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <template v-if="invoiceData.invoiceType == 1">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="购方税号" prop="taxNumber">
                <el-input v-model="invoiceData.taxNumber" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="公司地址">
                <el-input v-model="invoiceData.otherInfo.address" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>


          </el-row>
        </template>
        <template v-if="invoiceData.invoiceType == 1">
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="公司电话">
                <el-input v-model="invoiceData.otherInfo.mobile" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司开户行">
                <el-input v-model="invoiceData.otherInfo.bank" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="开户行账号">
                <el-input v-model="invoiceData.otherInfo.account" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>

          </el-row>
        </template>

        <el-row :gutter="16" v-if="false">
          <el-col :span="12">
            <el-form-item label="电子邮箱">
              <el-input v-model="invoiceData.user" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="invoiceData.user" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button class="gradient" type="primary" @click="submitForm(ruleFormRef)">{{ $t('common.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>

import { ref, onMounted, reactive } from 'vue'

import type { TabsPaneContext } from 'element-plus'

import { useRouter } from 'vue-router'

import { useAppStore } from '@/pinia/appStore'

import Pagination from '@/components/Pagination.vue'

import { orderList, applyInvoice } from '@/api/my.js'

import { confirmBuy } from '@/utils/util.js'

import { useI18n } from 'vue-i18n'

import DGTMessage from '@/utils/message'

const { t } = useI18n()

const appStore = useAppStore()

const router = useRouter()

const tabs = ref([
  { label: 'personalCenter.allOrders', name: '' },
  { label: 'personalCenter.daifukuan', name: 0 },
  { label: 'personalCenter.yiwancheng', name: 1 },
  { label: 'personalCenter.yiquxiao', name: 2 },
])

const list = ref([]);

import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  invoiceTitle: string
  taxNumber: string
}
const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  orderStatus: ''
})
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const invoiceData = ref({
  invoiceType: '0',//发票类型（0-个人 1-企业）
  orderNo: '',//订单号
  orderId: null,
  invoiceTitle: '',//发票抬头
  taxNumber: '',//税号
  otherInfo: {
    address: '',
    mobile: '',//
    bank: '',//开户行
    account: '',//账号
  },
  remark: '',//备注
})

const rules = reactive<FormRules<RuleForm>>({
  invoiceTitle: [
    { required: true, message: '请输入购方名称', trigger: 'blur' }
  ],
  taxNumber: [
    { required: true, message: '请输入购方税号', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  let valid = await formEl.validate();
  if (valid) {

    let { invoiceType,
      orderNo,
      orderId,
      invoiceTitle,
      taxNumber, remark } = invoiceData.value
    let res = await applyInvoice({
      invoiceType,
      orderNo,
      orderId,
      invoiceTitle,
      taxNumber,
      remark,
      otherInfo: JSON.stringify(invoiceData.value.otherInfo)
    });
    if (res.code === 200) {
      DGTMessage.success(`${t('common.success')}`)
      getList()
    }
    dialogVisible.value = false;
  }
}

const handleClick = (tab: TabsPaneContext) => {
  form.value.pageNum = 1;
  form.value.orderStatus = tab.props.name;
  getList()
}

const pay = async (item, index) => {
  confirmBuy({
    callback: getList,
    appStore,
    router,
    type: 'baoMiBalance',
    price: item.amount,
    t,
    productId: item.orderId,
    orderType: item.orderType,
    payMethod: item.payMethod
  })
}

// 申请开票
const applyInvoices = (item, index) => {
  // await invoiceApply();
  invoiceData.value.orderId = item.orderId;
  dialogVisible.value = true;
}

// 获取我的订单
const getList = async () => {
  let res = await orderList(form.value);
  list.value = res.rows || [];
  form.value.total = res.total;
}
const handlePageChange = (page) => {
  form.value.pageNum = page;
  getList()
}

onMounted(() => {
  getList()
})

</script>
<style scoped lang="scss">
.order {
  padding-bottom: 16px;

  .order-list {
    li {
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .order-list-top {
        height: 42px;
        padding: 0 16px;
        background: #F5F7FA;
        border-radius: 16px 16px 0px 0px;

        .order-list-top-l {
          div {
            margin-left: 8px;
            font-size: 16px;
            font-weight: bold;
          }
        }

        .order-list-top-r {
          font-size: 14px;
        }
      }

      .order-list-main {
        padding: 16px;
        border-radius: 0 0 16px 16px;
        border: 1px solid #EBEEF5;

        .order-list-main-l,
        .order-list-main-r {
          width: 50%;
        }

        .image {
          width: 160px;
          height: 90px;
          object-fit: cover;
          margin-right: 16px;
          border-radius: 8px;
        }

        .title {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 8px;
          line-height: 1;
        }

        .mi_price {

          div {
            font-size: 18px;
            text-align: center;

            &:last-child {
              font-size: 12px;
              color: #666666;
            }
          }
        }

        .price {
          text-align: center;

          div {
            &:first-child {
              color: #FD5F3C;
            }
          }
        }

        .mt8 {
          margin-top: 8px;
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 106px;
          height: 32px;
          cursor: pointer;
          border-radius: 4px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }

          div {
            font-size: 14px;
            color: #FFFFFF;
          }
        }

        .btn_kong {
          width: 106px;
        }



        .red {
          background: #FCEBEB;

          div {
            color: #E43434;
          }
        }

        .blue {
          background: #EAF0FF;

          div {
            color: #2D71FF;
          }
        }
      }
    }
  }
}

.dialog_title {
  color: #3D3D3D;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 16px;
}
</style>