act-prize-log-detail 活动奖品详情

通用的活动奖品详情组件，传入 queryResult 即可，实现以下功能：

1. 统一的奖品详情展示、操作逻辑，实现兑换、填写收货地址等
2. 提交收货地址会调用 update_user_prize_log_address 云函数，请确保已经部署

所有项目都需使用该组件实现奖品详情页，以确保风格统一。

代码演示

<script setup>
import {useWatchLoading} from '@ifanrx/uni-mp'

import io from '@/io'

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
})

const prizeLogQueryResult = io.useRequest(io.prizeLog.get, {
  id: props.id,
  expand: 'activity',
})

useWatchLoading(prizeLogQueryResult.isLoading)
</script>

<template>
  <mp-nav-bar backgroundColor="#fafafa" :placeholder="false" title="奖品详情" />

  <view class="page">
    <mp-safe-area type="navbar" />

    <view v-if="prizeLogQueryResult.data" class="prize-log-section">
      <act-prize-log-detail :queryResult="prizeLogQueryResult" />
    </view>
  </view>
</template>

<style scoped>
:global(page) {
  background: #fafafa;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
}

.prize-log-section {
  flex: 1;
}
</style>

API

Props

Prop name	Description	Type	Values	Default
queryResult	查询结果	object	-	required
customUpdateAddress	自定义更新收货地址，默认调用 update_user_prize_log_address 云函数	func|null	-	null

源码

组件 • 示例