designer-hub/packages/merchant/src/pages/mine/refferrer/details.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import { phone, right } from '../../../core/libs/svgs'
import { pageReferrerDetail, getDistributePage, referrerCount } from '../../../core/libs/requests'
import { handleCall } from '../../../core/utils/common'
import { onLoad } from '@dcloudio/uni-app'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { ComponentExposed } from 'vue-component-type-helpers'
import dayjs from "dayjs";

const PageHelperEvoRef = ref<ComponentExposed<typeof PageHelperEvo>>()
const referrerId = ref<number | string>('')
const { data: count, run: setCount } = useRequest(() => referrerCount({ referrerId:id.value }))
const queryReward = computed(() => ({ status: tabsReward.value[tab.value]?.value,referrerId:id.value }))
const queryRecommend = computed(() => (referrerId.value?{ auditStatus: tabsRecommend.value[tab.value]?.value, referrerId:referrerId.value,userId:id.value }:{auditStatus: tabsRecommend.value[tab.value]?.value,referrerId:id.value}))

const id = ref()
const type = ref("recommend")
const tab = ref(0)
const tabsReward = ref([
  {
    label: '已完成',
    value: "2",
  },
  {
    label: '待入账',
    value: "1"
  },
  {
    label: '已取消',
    value: "3",
  },
])

const tabsRecommend  = ref([
  {
    label: '已认证',
    value: "0",
  },
  {
    label: '审核中',
    value: "1"
  },
  {
    label: '未通过',
    value: "2",
  },
])

const handleClick = () => {
  uni.navigateTo({ url: '/pages-sub/mine/orders/detail/index' })
}

const toSecond = (record) =>{
	// referrerId.value = record.userId
	// PageHelperEvoRef.value?.reload()
	let str = encodeURIComponent(JSON.stringify(record))
	uni.navigateTo({ url: '/pages/mine/refferrer/twoDetails?str=' + str })
}

const handleChange = async (value) => {
  if(type.value === "recommend"){
	  let tab1 = tabsRecommend.value[value.index]
	  console.log(tab1)
  }else{
	  let tab1 = tabsReward.value[value.index]
	  console.log(tab1)
  }
}

onLoad(async(options)=>{
	if(options?.type === "recommend"){
		uni.setNavigationBarTitle({
			title:"我的推荐"
		})
	}else{
		uni.setNavigationBarTitle({
			title:"奖励明细"
		})
	}
	id.value = options?.id
	type.value = options?.type
	let res = await setCount();
	tabsRecommend.value[0].label = tabsRecommend.value[0].label + "(" +res.onePassCount+ ")"
	tabsRecommend.value[1].label = tabsRecommend.value[1].label + "(" +res.oneWaitCount+ ")"
	tabsRecommend.value[2].label = tabsRecommend.value[2].label + "(" +res.oneRejectCount+ ")"
})

</script>
<template>
	<view class="flex flex-col">
		<PageHelperEvo ref="pageHelperRef" class="flex-grow flex" :request="type === 'recommend'?pageReferrerDetail:getDistributePage" :query="type === 'recommend'?queryRecommend:queryReward">
			<template #top>
			  <wd-tabs v-model="tab" @change="handleChange">
			    <block v-if="type === 'recommend'">
					<block v-for="({ label }, i) in tabsRecommend" :key="i">
					  <wd-tab :title="`${label}`" class="relative"></wd-tab>
					</block>
				</block>
				<block v-else-if="type === 'reward'">
					<block v-for="({ label }, i) in tabsReward" :key="i">
					  <wd-tab :title="`${label}`" class="relative"></wd-tab>
					</block>
				</block>
			  </wd-tabs>
			</template>
			<template #default="{ source }">
				<view class="bg-white rounded-[20rpx] mx-[24rpx] mt-[30rpx] px-[20rpx] py-[30rpx]" v-if="type === 'recommend'">
					<view class="flex items-center py-[30rpx] relative" v-for="(it, i) in source.list" :key="i" style="border-bottom: 2rpx solid #FAFAFA;">
						<view class="rounded-full w-[88rpx] h-[88rpx] overflow-hidden mr-[20rpx]">
							<image :src="it.avatar" mode="widthFix"></image>
						</view>
						<view class="flex-grow text-[32rpx]">{{ it.name }}</view>
						<view class="text-[#586A8F] text-[28rpx]" v-if="it.auditStatus === 0 && !referrerId" @click="toSecond(it)">推荐人数：{{ it.referrerCount }}</view>
						<view class="absolute bottom-0 left-[20%] text-[24rpx] text-[#EF4343]" v-if="it.auditStatus == 2">原因：{{ it.remark }}</view>
					</view>
				</view>
				<view class="bg-white rounded-[20rpx] mx-[24rpx] mt-[30rpx] px-[20rpx] py-[30rpx]" v-else>
					<view class="flex flex-col mb-[30rpx]" v-for="(it, i) in source.list" :key="i" style="border-bottom: 2rpx solid #FAFAFA;">
						<view class="flex items-center">
							<view class="rounded-full w-[88rpx] h-[88rpx] overflow-hidden mr-[20rpx]">
								<image :src="it.userAvatar" mode="widthFix"></image>
							</view>
							<view class="flex-grow">
								<view class="flex items-center">
									<view class="text-[32rpx] mr-[12rpx]">{{ it.userName }}</view>
									<view class="text-[20rpx] bg-[#F6F6F6] rounded-full text-black/40 px-[14rpx] py-[6rpx]" v-if=" it.distributeType==1 ">一级奖励</view>
									<view class="text-[20rpx] bg-[#F6F6F6] rounded-full text-black/40 px-[14rpx] py-[6rpx]" v-else>二级奖励</view>
								</view>
                <view class="text-black/30">{{ it.completeTime?dayjs(it.completeTime).format('YYYY/MM/DD HH:mm'):"" }}</view>
							</view>
							<view class="text-[#EF4343] text-[32rpx]">+{{ it.onePoints }}（*{{ it.oneRatio }}%）</view>
						</view>
						<view class="flex py-[40rpx] justify-between text-black/60 text-[24rpx]">
							<text>{{ it.pointsName }}</text>
							<text>消耗积分：{{ it.points }}</text>
						</view>
					</view>
				</view>
			</template>
		</PageHelperEvo>
	</view>
</template>