SFH5/pagesb/invoiceApplyforRecord/index.vue

<template>
  <view class="invoice-wrap" :class="[`${themeInfo.theme}-theme`]">
    <navBar></navBar>

    <view class="wrapBox">
      <view class="content">
        <view class="orderBox">
            <!-- @click="goInvoiceApply(item)" -->
            <view
              class="orderLi"
              v-for="(item, index) in state.list"
              :key="index"
            >
              <view class="left">
                <view>{{ $t("invoice.serial") }}: <text>{{ item.id }}</text> </view>
                <view>{{ $t("invoice.time") }}: {{ item.applicationTime }}</view>
                <view>{{ $t("invoice.status") }}: {{ auditOption[item.audit] }}</view>
                <view>{{ $t("invoice.unit") }}: {{ item.lockerNames?.length ? item.lockerNames.join("、") : "无"}}</view>
              <view v-if="item.audit == 2">
                {{ $t("common.note") }}: {{ item.rejectRemarks}}</view>
              </view>
              <view class="right">
                <!-- <view>{{ item.lockerNames }}</view> -->
                <view>{{ currency }}{{ item.money }}</view>
              </view>
              <view class="btn" v-if="item.audit == 0 || item.audit == 2">
                <button @click="editApply(item.id)">{{ $t("common.edit") }}</button>
                <button @click="cancelApply(item.id)">{{ $t("common.cancel") }}</button> 
              </view>
            </view>
            <view v-if="state.list.length == 0" class="noData">{{ $t('common.noData') }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 主题色配置
import { reactive, computed } from "vue";
import { useMainStore } from "@/store/index.js";
import { currency } from "@/config/index.js";
import navBar from "@/components/navBar.vue";
import { useInvoiceApi } from "@/Apis/invoice";
import { onShow } from "@dcloudio/uni-app";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { themeInfo } = useMainStore();

const getApi = useInvoiceApi();
const state = reactive({
  list: [],
});
const auditOption = computed(() => {
  return {
    0: t("invoice.status0"),
    1: t("invoice.status1"),
    2: t("invoice.status2"),
    3: t("invoice.status3"),
    4: t("invoice.status4"),
  }
});
const editApply = (id)=>{
  uni.navigateTo({
    url: '/pagesb/invoiceApply/index?id='+id
  })
}
const cancelApply = (id)=>{
  uni.showModal({
    title: t("common.tip"),
    content: t("common.cancelApply"),
    success: function (res) {
      if (res.confirm) {
        getApi.CancelInvoiceApplyFor({id}).then((res) => {
          if(res.code == 200){
            uni.showToast({
              title: t("common.cancelSuccess"),
              icon: 'success',
              duration: 2000
            });
            getDataList();
          }else{
            uni.showToast({
              title: t("common.cancelFail"),
              icon: 'error',
              duration: 2000
            });
          }
        }
        );
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
    
  })
}
const getDataList = () => {
  uni.showLoading();
  getApi.GetInvoiceApplyFor().then((res) => {
    uni.hideLoading();
    if (res.code == 200) {
      state.list = res.data;
    } else {
      state.list = [];
    }
  });
};
onShow(() => {
  getDataList();
});
</script>

<style lang="scss" scoped>
@import '@/static/style/theme.scss';

.invoice-wrap {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    to bottom,
    var(--right-linear),
    var(--left-linear)
  );
  .noData{
    text-align: center;
  }
  .wrapBox {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .top {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 26rpx;
      font-weight: 600;
      padding: 0 40rpx;
      display: flex;
      align-items: center;
      .arrow {
        width: 20rpx;
        display: flex;
        margin-right: 6rpx;
        image {
          width: 20rpx;
          height: 12rpx;
        }
      }
    }
    .content {
      flex: 1;
      width: 100%;
      padding: 20rpx;
      overflow-y: auto;
      background-color: #fff;
      position: relative;
      .contact {
        position: absolute;
        bottom: 60rpx;
        right: 0;
        height: 74rpx;
        background-color: var(--main-color);
        border-radius: 45rpx 0rpx 0rpx 45rpx;
        border: 4rpx solid var(--stress-text);
        box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
        padding: 0 20rpx 0 30rpx;
        z-index: 9;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--stress-text);
        font-size: 28rpx;
        font-weight: 700;
      }
      .orderBox {
        padding: 20rpx;
        .orderLi {
          width: 100%;
          flex-wrap: wrap;
          margin-bottom: 30rpx;
          border-radius: 18rpx;
          padding: 20rpx;
          font-size: 24rpx;
          background-color: var(--main-color);
          display: flex;
          .leftCheckBox {
            width: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .left {
            flex: 1;
            line-height: 1.5;
          }
          .btn{
            width: 100%;
            display: flex;
            margin-top: 20rpx;
            padding-top: 10rpx;
            border-top:1px solid #292222;
            button {
            min-width: 124rpx;
            font-size: 22rpx;
            color: var(--btn-color1);
            background-color: var(--text-color);
            border: none;
            height: 56rpx;
            border-radius: 28rpx;
            line-height: 56rpx;
            text-align: center;
            font-weight: 700;
            letter-spacing: 0.39px;
            padding: 0;
            }
          }
          .right {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 150rpx;
            // :nth-child(1) {
            //   border-radius: 99rpx;
            //   padding: 0 20rpx;
            //   height: 40rpx;
            //   line-height: 40rpx;
            //   background-color: black;
            //   color: var(--main-color);
            //   margin-bottom: 10rpx;
            // }
            :nth-child(1) {
              font-size: 34rpx;
              font-weight: bold;
            }
          }
        }
      }
    }
    .bottom {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 24rpx;
      padding: 0 40rpx;
      display: flex;
      justify-content: space-between;
      background-color: var(--stress-color);
    }
    .goApply {
      height: 130rpx;
      display: flex;
      justify-content: space-between;
      padding: 10upx 40upx;
      align-items: center;
      .next {
        button {
          background-color: black;
          color: #fff;
          font-size: 28rpx;
          border-radius: 99rpx;
        }
      }
    }
  }
}
</style>