[id].vue

<script setup>
import { ref, onMounted } from 'vue'
import { get } from '@/utils/request'
import ExpandableText from '@/components/ExpandableText.vue'
import PayUp from '~/components/PayUp.vue'
definePageMeta({
  layout: 'default',
  title: '产品详情',
})

const id = useRoute().params.id
const productArr = ref([])
const companyInfo = ref({})
const loading = ref(true)
const subForm = ref({})
// 定义需要展示的字段列表
const infoFields = [
  { key: 'a6', label: '诉讼状况' },
  { key: 'a7', label: '案件状态' },
  { key: 'a8', label: '执行情况' },
  { key: 'a9', label: '涉案金额' },
  { key: 'a10', label: '执行标的' },
  { key: 'a11', label: '执行法院' },
  { key: 'a13', label: '案件进展' }
]

const getContentArray = computed(() => {
  return ['a19', 'a20', 'f1', 'f2', 'f3']
    .filter(key => companyInfo.value[key])
    .map(key => companyInfo.value[key])
})

const handleLawsuitStatus = (status) => {
  if (!status?.trim()) return { label: '-', value: '-' }

  const cleanStatus = status.replace(/\s+/g, '')
  if (cleanStatus.includes('：')) {
    const [label, value] = cleanStatus.split('：')
    return { label, value }
  }
  return { label: '状态', value: cleanStatus }
}

const fetchData = async () => {
  try {
    loading.value = true
    const [productRes, companyRes] = await Promise.all([
      get(`/ops/product/data/${id}`),
      get(`/yw4/get/${id}`)
    ])

    if (productRes?.code === 200) {
      productArr.value = productRes.data ?? {}
    }

    if (companyRes?.code === 200) {
      companyInfo.value = companyRes.data ?? {}
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    showFailToast('加载失败，请重试')
  } finally {
    loading.value = false
  }
}

const paymentInfo = ref({
  mony: 200,
  productId: '',
  type: 0
});
const payupRef = ref();
const handleBuy = (item) => {
  paymentInfo.value.productId = item.productId
  paymentInfo.value.mony = item.price
  payupRef.value?.open();
}
const handleClose = () => {
  paymentInfo.value.show = false;
}
const others = ref(false)


// const handleBuy1 = () => {
//   if (!subForm.value.a7 || !subForm.value.a8) {
//     showFailToast('请填写完整信息')
//     return false
//   }
//   subForm.value.a3 = productArr.value.productName
//   subForm.value.a4 = productArr.value.productId
//   subForm.value.a5 = 1
//   post(`/yw3/add`, subForm.value).then(res => {
//     if (res?.code == 200) {
//       subForm.value = {}
//       showSuccessToast('提交成功')
//     } else {
//       showBuy.value = false
//       showFailToast(res.msg)
//     }
//   })
// }
fetchData()
</script>

<template>
  <div class="container">
    <PayUp ref="payupRef" :payment-info="paymentInfo" @close="handleClose" />
    <var-loading description="加载中..." :loading="loading">
      <div style="margin-bottom: 50px">
        <div class="company-title">{{ companyInfo.a1 }}</div>
        <var-card ripple class="info-card" :title="companyInfo.a2">
          <template #default>
            <div v-for="field in infoFields" :key="field.key" class="info-item">
              <div class="label">{{ handleLawsuitStatus(companyInfo[field.key])?.label }}</div>
              <div class="value">{{ handleLawsuitStatus(companyInfo[field.key])?.value }}</div>
            </div>
            <div class="info-item">
              <div class="label">{{ companyInfo.a16 }}</div>
              <div class="value">{{ companyInfo.a17 }}</div>
            </div>
          </template>
        </var-card>

        <var-card ripple class="info-card" :title="companyInfo.a14">
          <template #default>
            <expandable-text :showHeight="120" :toggle="true" closeText="展开阅读全文" openText="收起">
              <div class="content-text"> {{ companyInfo.a15 }}</div>
            </expandable-text>
          </template>
        </var-card>

        <var-card ripple class="info-card" :title="companyInfo.a18">
          <template #default>
            <expandable-text :showHeight="120" :toggle="true" closeText="展开阅读全文" openText="收起">
              <div class="content-text">
                <div v-for="(content, index) in getContentArray" :key="index" class="paragraph">
                  {{ content }}
                </div>
              </div>
            </expandable-text>
          </template>
        </var-card>
      </div>

      <van-submit-bar :price="productArr.price * 100" @click="handleBuy(productArr)" label="总价" button-text="立即购买"
        safe-area-inset-bottom>
        <template #default>
          <div>
            <div style="font-size: 14px">收益周期：<span style="color: red">{{ productArr.buttonStyle }}</span></div>
            <div style="font-size: 14px">每日收益：<span style="color: red;font-size: 16px;">￥{{ productArr.productType
                }}</span></div>
          </div>
        </template>
      </van-submit-bar>
    </var-loading>
    <var-popup position="bottom" v-model:show="others">
      <div class="popup-example-block">
        <div class="title">您暂时没有购买资格</div>
        <div class="title"> 如您有意向购买 请登记您的信息</div>
        <var-form ref="form" scroll-to-error="start">
          <var-space direction="column" :size="[14, 0]">
            <var-input placeholder="姓名" :rules="v => !!v || '姓名不能为空'" v-model="subForm.a7" />
            <var-input placeholder="电话" type="number" maxlength="11" :rules="v => !!v || '电话不能为空'"
              v-model="subForm.a8" />
          </var-space>
        </var-form>
        <var-button size="large" style="margin-top: 16px;" block type="danger" @click="handleBuy1">确认提交信息</var-button>
        <var-button size="large" style="margin-top: 16px;" block type="info"
          @click="others = false">我没有购买意向，误点</var-button>
      </div>
    </var-popup>
  </div>
</template>

<style lang="scss" scoped>
.container {
  padding: 16px;
  font-family: pingfang;
  background: #f5f7fa;
  min-height: 100vh;
}

.company-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.info-card {
  margin-bottom: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  :deep(.var-card__title) {
    font-size: 18px;
    font-weight: 600;
  }

  &:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
  }
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .label {
    color: #666;
    font-size: 14px;
  }

  .value {
    color: #ff4d4f;
    font-weight: 500;
  }
}

.ellipsis-text {
  text-indent: 2em;
  line-height: 1.6;
}

.content-text {
  .paragraph {
    text-indent: 2em;
    margin-bottom: 12px;
    line-height: 1.6;

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

.popup-example-block {
  height: 400px;
  padding: 16px;

  .title {
    font-size: 16px;
    font-weight: 600;
    color: red;
    margin-bottom: 16px;
    text-align: center;
  }
}
</style>