sports-merchant-minapp/src/subPack/writeOff/index.vue

<template>
  <view class="px32rpx py20rpx" v-if="data">
    <view class="flex items-center">
      <image src="@/subPack/static/map.png" class="w30rpx h30rpx mr20rpx">
      </image>
      <view class="font-semibold text-32rpx">{{ data.siteName }}</view>
    </view>
    <view
      class="mt20rpx bg-white px-24rpx py-28rpx rounded-32rpx"
      v-if="data.appOrderProInfoVerifyVOS"
    >
      <wd-checkbox-group v-model="checkedAll">
        <!-- 无固定场 -->
        <template v-if="type >= GoodsType.noFixed">
          <view class="flex items-center">
            <image
              :src="data.productImage"
              class="w200rpx h-200rpx rounded-32rpx min-w-200rpx"
            />
            <view class="ml20rpx flex-1">
              <view class="text-32rpx">{{ data.productName }}</view>

              <view class="mt26rpx flex items-center justify-between">
                <view class="text-#FB5B5B">
                  ￥<text class="text-48rpx">{{ data.price }}</text>
                </view>
                <view class="text-[rgb(0,0,0,0.3)]">×{{ data.amount }}</view>
              </view>
            </view>
          </view>
          <view
            class="flex items-center justify-between mb20rpx mt24rpx"
            v-for="item in data.appOrderProInfoVerifyVOS"
            :key="item.appOrderProInfo.id"
          >
            <view v-if="item.appOrderProInfo.type != 6"
              >券号：{{ item.appOrderProInfo.ticketNo }}</view
            >
            <wd-checkbox
              :model-value="item.isinId"
              checked-color="#fdd143"
              v-if="item.isinStatus == 0"
            >
            </wd-checkbox>
            <wd-tag
              v-if="item.appOrderProInfo.orderStatus == 6"
              bg-color="rgba(0,0,0,0.1)"
              color="rgba(0,0,0,0.3)"
              >已退款</wd-tag
            >
            <wd-tag
              v-if="item.appOrderProInfo.orderStatus == 2"
              bg-color="rgba(0,0,0,0.1)"
              color="rgba(0,0,0,0.3)"
              >已使用</wd-tag
            >
            <wd-tag
              v-if="item.appOrderProInfo.orderStatus == 3"
              bg-color="rgba(0,0,0,0.1)"
              color="rgba(0,0,0,0.3)"
              >已到期</wd-tag
            >
          </view>
        </template>
        <!-- 包场 -->
        <template v-else>
          <view
            class="flex justify-between items-center w-full mb20rpx"
            v-for="item in data.appOrderProInfoVerifyVOS"
            :key="item.id"
          >
            <view>场次</view>
            <view class="flex-1">
              <view class="flex items-center justify-between ml20rpx">
                <view class="">
                  {{ item.appOrderProInfo.productName }} ￥{{
                    item.appOrderProInfo.price
                  }}
                </view>
                <wd-tag
                  v-if="item.appOrderProInfo.orderStatus == 6"
                  bg-color="rgba(0,0,0,0.1)"
                  color="rgba(0,0,0,0.3)"
                  >已退款</wd-tag
                >
                <wd-tag
                  v-if="item.appOrderProInfo.orderStatus == 2"
                  bg-color="rgba(0,0,0,0.1)"
                  color="rgba(0,0,0,0.3)"
                  >已使用</wd-tag
                >
                <wd-tag
                  v-if="item.appOrderProInfo.orderStatus == 3"
                  bg-color="rgba(0,0,0,0.1)"
                  color="rgba(0,0,0,0.3)"
                  >已到期</wd-tag
                >
                <wd-checkbox
                  :model-value="item.isinId"
                  checked-color="#fdd143"
                  v-if="item.isinStatus == 0"
                ></wd-checkbox>
              </view>
            </view>
          </view>
        </template>
      </wd-checkbox-group>

      <wd-divider color="#F0F0F0"></wd-divider>
      <view class="flex items-center justify-between">
        <view class="text-28rpx">消费张数</view>
        <view class="font-semibold text-#FB5B5B"
          >本次核销{{ checkedAll.length }}张</view
        >
      </view>
      <view class="mt12rpx text-#FB5B5B"> 共{{ AvailableNumber }}张可用</view>
    </view>
    <view class="mt20rpx flex items-center">
      <image src="@/subPack/static/i.png" class="w30rpx h30rpx mr6rpx" />
      <view>核销前请与顾客确认核销券数</view>
    </view>
  </view>
  <fixdbtn
    block
    size="large"
    :disabled="!checkedAll.length"
    v-if="data"
    @click="handleSubmit"
    >确认核销（{{ checkedAll.length }}）</fixdbtn
  >
</template>

<script setup lang="ts">
import { GoodsType } from "@/config";
import { createGlobalLoadingMiddleware } from "@/api/core/middleware";
import router from "@/router";
const { isShowLoging } = storeToRefs(useUserStore());
const checkedAll = ref([]);

const { data, send: getOrder } = useRequest(
  (id: string) =>
    Apis.app.scanCodeQueryOrder({
      params: {
        orderId: id,
      },
    }),
  {
    immediate: false,
  },
).onError((err) => {
  console.log(err, "asdasdsad");
  router.replace({ name: "error" });
});
const { send: submit } = useRequest(
  (orderProInfoIds: string[]) =>
    Apis.app.scanCodeVerification({
      data: orderProInfoIds,
    }),
  {
    immediate: false,
    middleware: createGlobalLoadingMiddleware({ loadingText: "核销中..." }),
  },
);
const AvailableNumber = computed(
  //消费张数，几张可用
  () =>
    data.value.appOrderProInfoVerifyVOS?.filter((it) => it.isinStatus == 0)
      .length,
);
onLoad(async (query: any) => {
  getOrder(query.id);
});
const type = computed(() => {
  //如果是-1则找不到
  // 商品类型（1-学校 2-包场 3-无固定场 4-个人赛 5-团队赛 6-课程 7-保险）
  if (data.value.appOrderProInfoVerifyVOS) {
    return data.value.appOrderProInfoVerifyVOS[0].appOrderProInfo?.type || -1;
  }
  return -1;
});
async function handleSubmit() {
  console.log(checkedAll.value, "核销");
  try {
    await submit(checkedAll.value);
    uni.navigateBack({
      success: () => {
        isShowLoging.value = true;
      },
    });
  } catch (error) {
    console.log(error);
    router.push({ name: "error" });
  }
}
</script>

<style scoped>
:deep(.wd-checkbox) {
  margin-bottom: 0px !important;
}
</style>
<route lang="json">
{
  "name": "writeOff",
  "style": {
    "navigationBarTitleText": "扫码核销"
  }
}
</route>