bdrp-app/src/pages/promote.vue

<script setup>
import PriceInputPopup from '@/components/PriceInputPopup.vue'
import VipBanner from '@/components/VipBanner.vue'
import { calculatePromotionPricing, safeTruncate } from '@/utils/promotionPricing'

definePage({ layout: 'default' })

const showPricePicker = ref(false)
const pickerProductConfig = ref(null)
const productConfig = ref(null)
const linkIdentifier = ref('')
const showQRcode = ref(false)
const promotionForm = ref(null)
const loadingConfig = ref(false)
const generating = ref(false)

const formData = ref({
  productType: '',
  clientPrice: null,
})

/** 从首页报告卡片带入的 product_en，配置加载后预选 */
const initialFeature = ref('')

const availableReportTypes = computed(() => {
  if (!productConfig.value?.length)
    return []
  return [...productConfig.value]
    .sort((a, b) => Number(a.product_id) - Number(b.product_id))
    .map(item => ({
      id: item.product_id,
      label: item.product_name || `产品${item.product_id}`,
      value: item.product_en || '',
    }))
    .filter(item => !!item.value)
})

const pricingResult = computed(() => {
  return calculatePromotionPricing(formData.value.clientPrice, pickerProductConfig.value)
})

const costPrice = computed(() => pricingResult.value.costPrice)
const promotionRevenue = computed(() => pricingResult.value.promotionRevenue)

function selectProductType(reportTypeValue) {
  const reportType = availableReportTypes.value.find(item => item.id === reportTypeValue || item.value === reportTypeValue)
  if (!reportType)
    return

  formData.value.productType = reportType.value

  const matchedConfig = productConfig.value?.find(item => item.product_id === reportType.id)
  if (!matchedConfig) {
    pickerProductConfig.value = null
    formData.value.clientPrice = null
    uni.showToast({ title: '该报告暂不可推广', icon: 'none' })
    return
  }

  pickerProductConfig.value = matchedConfig
  formData.value.clientPrice = matchedConfig.cost_price
}

function onConfirmType(e) {
  // 单列 wd-picker 的 e.value 为标量；多列时为数组。不能用 e.value[0] 取标量，否则字符串会变成首字符。
  const raw = e?.value
  const nextValue = Array.isArray(raw) ? raw[0] : raw
  const fromItem = e?.selectedItems
  const resolved = nextValue ?? (Array.isArray(fromItem) ? fromItem[0]?.value : fromItem?.value)
  if (resolved != null && resolved !== '')
    selectProductType(resolved)
}

function onPriceChange(price) {
  formData.value.clientPrice = price
}

function getPricePayload() {
  return safeTruncate(Number(formData.value.clientPrice))
}

function openPricePicker() {
  if (!pickerProductConfig.value) {
    uni.showToast({ title: '请先选择报告类型', icon: 'none' })
    return
  }
  showPricePicker.value = true
}

function toExampleReport() {
  const feature = formData.value.productType
  if (!feature) {
    uni.showToast({ title: '请先选择报告类型', icon: 'none' })
    return
  }
  uni.navigateTo({
    url: `/pages/report-example-webview?feature=${encodeURIComponent(feature)}`,
  })
}

async function getPromoteConfig() {
  loadingConfig.value = true
  try {
    const { data, error } = await useApiFetch('/agent/product_config', { silent: true }).get().json()
    if (data.value && !error.value && data.value.code === 200) {
      const list = data.value.data.AgentProductConfig || []
      productConfig.value = list
      const preset = initialFeature.value
        ? availableReportTypes.value.find(item => item.value === initialFeature.value)
        : null
      const availableType = preset || availableReportTypes.value[0]
      if (availableType) {
        selectProductType(availableType.value)
      }
      else {
        pickerProductConfig.value = null
        formData.value.productType = ''
        formData.value.clientPrice = null
        uni.showToast({ title: '暂无可推广产品', icon: 'none' })
      }
      return
    }
    uni.showToast({ title: data.value?.msg || '获取配置失败', icon: 'none' })
  }
  catch {
    uni.showToast({ title: '获取配置失败', icon: 'none' })
  }
  finally {
    loadingConfig.value = false
  }
}

async function generatePromotionCode() {
  if (generating.value)
    return
  try {
    await promotionForm.value.validate()
  }
  catch {
    return
  }
  generating.value = true
  try {
    const { data, error } = await useApiFetch('/agent/generating_link')
      .post({ product: formData.value.productType, price: getPricePayload() })
      .json()
    if (data.value && !error.value && data.value.code === 200) {
      linkIdentifier.value = data.value.data.link_identifier
      showQRcode.value = true
    }
    else {
      uni.showToast({ title: data.value?.msg || '生成推广码失败', icon: 'none' })
    }
  }
  catch {
    uni.showToast({ title: '生成推广码失败', icon: 'none' })
  }
  finally {
    generating.value = false
  }
}

onLoad((options) => {
  const feature = options?.feature
  if (feature)
    initialFeature.value = decodeURIComponent(String(feature))
})

onMounted(() => {
  getPromoteConfig()
})
</script>

<template>
  <view class="promote min-h-screen p-4">
    <view class="card mb-4 from-orange-200 to-orange-200/80 !bg-gradient-to-b">
      <view class="text-lg text-orange-500 font-bold">
        直推用户查询
      </view>
      <view class="mt-1 text-orange-400 font-bold">
        自定义价格，赚取差价
      </view>
      <view class="mt-6 rounded-xl bg-orange-100 px-4 py-2 text-gray-600">
        在下方 “自定义价格” 处选择报告类型，设置客户查询价（元）即可立即推广。
      </view>
    </view>
    <VipBanner />

    <view class="card mb-4 relative">
      <text
        class="absolute right-4 top-4 z-10 text-sm text-blue-600 active:opacity-70"
        @click="toExampleReport"
      >
        示例报告
      </text>
      <view class="mb-2 pr-20 text-xl font-semibold">
        生成推广码
      </view>
      <wd-form ref="promotionForm" :model="formData">
        <wd-cell-group border>
          <wd-picker v-model="formData.productType" label="报告类型" label-width="100px" title="选择报告类型"
            :columns="[availableReportTypes]" prop="productType" placeholder="请选择报告类型"
            :rules="[{ required: true, message: '请选择报告类型' }]" @confirm="onConfirmType" />
          <wd-input v-model="formData.clientPrice" label="客户查询价" label-width="100px" placeholder="请输入价格"
            prop="clientPrice" clickable readonly suffix-icon="arrow-right"
            :rules="[{ required: true, message: '请输入客户查询价' }]" @click="openPricePicker" />
        </wd-cell-group>
        <view class="my-2 flex items-center justify-between text-sm text-gray-500">
          <view>
            推广收益为 <text class="text-orange-500">
              {{ promotionRevenue }}
            </text> 元
          </view>
          <view>
            我的成本为 <text class="text-orange-500">
              {{ costPrice }}
            </text> 元
          </view>
        </view>
      </wd-form>
      <wd-button type="primary" block :loading="generating || loadingConfig"
        :disabled="loadingConfig || !pickerProductConfig" @click="generatePromotionCode">
        点击立即推广
      </wd-button>
    </view>

    <PriceInputPopup v-model:show="showPricePicker" :default-price="formData.clientPrice"
      :product-config="pickerProductConfig" @change="onPriceChange" />
    <QRcode v-model:show="showQRcode" :link-identifier="linkIdentifier" />
  </view>
</template>

<style scoped></style>