brand-arrival-wechat/src/pagesOne/claim/claimRecord.vue

<template>
  <view class="claimRecord">
    <view class="content">
      <view class="title">理赔记录</view>
      <view>
        <claim-item :isShow="false" :detail="detailData"></claim-item>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import ClaimItem from "../record/components/claimItem.vue";
import { quickclaimsDetail } from "@/services/claim";

const openid = uni.getStorageSync("openid");
const detailData = ref({} as any);
const getDetail = async (id: string) => {
  const res: any = await quickclaimsDetail({ openid, id });
  try {
    if (res.code === 200) {
      detailData.value = res.data;
      detailData.value.paymentBillImageArr =
        res.data.paymentBillImage.split(",");
      detailData.value.receiptImageArr = res.data.receiptImage.split(",");
    }
  } catch (error) {
    console.log(error);
  }
};
onLoad((options: any) => {
  getDetail(options.id);
});
</script>

<style lang="scss" scoped>
.claimRecord {
  background: #f7f8f9;
  min-height: 100vh;
  .title {
    color: #000;
    font-weight: bold;
    font-size: 32rpx;
    position: relative;
    margin-left: 16rpx;
    margin-bottom: 16rpx;
    &::before {
      content: " ";
      display: inline-block;
      width: 6rpx;
      height: 30rpx;
      background-color: #296041;
      margin-right: 16rpx;
      position: absolute;
      border-radius: 200rpx;
      left: -16rpx;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  .content {
    // margin: 32rpx;
    padding: 22rpx;
    box-sizing: border-box;
  }
}
</style>