distributor-h5/src/views/promotion/components/PaymentHistoryDialog.vue

<template>
  <van-popup
    v-model:show="dialogVisible"
    round
    position="bottom"
    :style="{ height: '80%' }"
  >
    <div class="p-4 flex flex-col h-full">
      <!-- Header -->
      <div class="flex justify-between items-center mb-4">
        <div class="text-gray-400 cursor-pointer" @click="handleClose">取消</div>
        <div class="text-lg font-medium">购买记录</div>
        <div class="w-8"></div>
      </div>

<!-- Loading State -->
      <van-loading v-if="loading" class="self-center my-8" />

      <!-- Empty State -->
      <van-empty v-else-if="!records.length" description="暂无购买记录" />

      <!-- Records List -->
      <div v-else class="flex-1 overflow-y-auto">
        <div  v-for="(record, index) in records" :key="index" class="bg-gray-50 rounded-lg p-4 mb-4">
          <div class="flex justify-between items-center mb-2">
            <span class="text-gray-600">购买手机号：</span>
            <span>{{ record.mobile }}</span>
          </div>
          <div class="flex justify-between items-center mb-2">
            <span class="text-gray-600">支付时间：</span>
            <span>{{ record.createdAt }}</span>
          </div>
          <div class="flex justify-between items-center mb-2">
            <span class="text-gray-600">支付金额：</span>
            <span class="text-red-500">¥{{ (record.balance / 100 ).toFixed(2) }}</span>
          </div>
          <div class="flex justify-between items-center">
            <span class="text-gray-600">商品名称：</span>
            <span>{{ record.promotionGoods?.memberCardName }}</span>
          </div>
        </div>
        <div v-if="goodsDetail && goodsDetail.paidSlogan" v-html="goodsDetail.paidSlogan" class="p-2"></div>
      </div>

    </div>
  </van-popup>
</template>
<script setup>
import { ref, computed, watch, inject } from "vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { request } from "@/utils";

const [route, router] = [useRoute(), useRouter()];
const props = defineProps({
  show: Boolean,
  onClose: Function,
  onConfirm: Function,
  openId: String
});

const goodsDetail = inject('goodsDetail')
// 使用computed处理show
const dialogVisible = computed({
  get: () => props.show,
  set: (value) => emit("update:show", value),
});

const emit = defineEmits(["update:show"]);

// 数据相关
const loading = ref(false);
const records = ref([]);

// 处理关闭
const handleClose = () => {
  dialogVisible.value = false
  props.onClose?.();
};

// 获取购买记录
const fetchRecords = async () => {
  try {
    loading.value = true;
    const { data } = await request.get(`/archivesService/member/promotionGoods/order/paginate`, {
      params: {
        openId: props.openId,
        page: 1,
        // size: 1,
      }
    });
    records.value = data.list;
  } finally {
    loading.value = false;
  }
};

watch(() => [dialogVisible.value, props.openId], () => {
  if (dialogVisible.value && props.openId) {
    fetchRecords()
  }
})
</script>

<style scoped>
:deep(.van-field) {
  background-color: #f5f5f5 !important;
}

:deep(.van-field__control) {
  color: #333;
}

:deep(.van-popup) {
  background-color: white;
}
</style>