159 lines
7.0 KiB
Vue
159 lines
7.0 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationBarBackgroundColor": "#FFF",
|
||
"navigationBarTitleText": "下级用户"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view>
|
||
<!-- 展示人员信息 -->
|
||
<wd-overlay :show="showProfilePopup" @click="showProfilePopup = false">
|
||
<view class="h-full relative pb-62rpx">
|
||
<view class="absolute-center bg-white rounded-30rpx w-660rpx px-88rpx py-48rpx">
|
||
<view>
|
||
<view class="text-center">
|
||
<wd-img width="100rpx" height="100rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
|
||
</view>
|
||
<view class="font-bold text-28rpx leading-40rpx text-#303133 mt-16rpx text-center">用户昵称</view>
|
||
<view class="mt-10rpx text-center">13525626532</view>
|
||
<view class="flex items-center justify-between mt-62rpx">
|
||
<view class="text-center">
|
||
<view class="font-bold text-36rpx leading-50rpx text-#303133">1200</view>
|
||
<view class="font-400 text-26rpx leading-36rpx text-#606266 mt-20rpx">本月下级佣金</view>
|
||
</view>
|
||
<view class="text-center">
|
||
<view class="font-bold text-36rpx leading-50rpx text-#303133">1200</view>
|
||
<view class="font-400 text-26rpx leading-36rpx text-#606266 mt-20rpx">本月下级佣金</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-46rpx">
|
||
<text class="font-400 text-26rpx leading-36rpx text-#303133">加入时间：</text>
|
||
<text class="text-26rpx leading-36rpx text-#909399">2025-03-08 11:20</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-overlay>
|
||
|
||
<view class="mt-24rpx pb-60rpx">
|
||
<view class="mt-20rpx">
|
||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Sub.upCallback">
|
||
<view class="mx-30rpx border-b border-b-solid mb-26rpx pb-10rpx flex" v-for="(item, index) in 10" :key="index">
|
||
<view class="mr-20rpx" @click="Sub.handleShowProfilePopup">
|
||
<wd-img width="100rpx" height="100rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
|
||
</view>
|
||
<view class="flex-1 flex justify-between items-center">
|
||
<view @click="Sub.handleToSubPorfile(item)">
|
||
<view class="font-bold text-28rpx leading-40rpx text-#303133">用户昵称</view>
|
||
<view class="font-400 text-26rpx leading-36rpx text-#303133 mt-12rpx">13525626532</view>
|
||
<view class="text-24rpx leading-34rpx text-#909399 mt-10rpx">2025-03-08 11:20</view>
|
||
</view>
|
||
<view @click="Sub.handleCallMobile">
|
||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`" mode="aspectFill" round />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</view>
|
||
|
||
<tabbar tab="sub"></tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Tabbar from '@/bundle/parten/components/Tabbar.vue'
|
||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// mescroll
|
||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
|
||
|
||
// 展示人员信息
|
||
const showProfilePopup = ref<boolean>(false)
|
||
|
||
// tab 切换
|
||
const tab = ref<Array<{ id: number, name: string }>>([
|
||
{ id: 1, name: '全部' },
|
||
{ id: 2, name: '收入' },
|
||
{ id: 3, name: '支出' },
|
||
])
|
||
const currentTab = ref<number>(0)
|
||
|
||
const Sub = {
|
||
upCallback: (mescroll) => {
|
||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||
// list({
|
||
// page: mescroll.num,
|
||
// size: mescroll.size
|
||
// }).then((res: { list: Array<any>, totalPages: Number }) => {
|
||
// const curPageData = res.list || [] // 当前页数据
|
||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||
|
||
// console.log("🚀 ~ goods:", goods)
|
||
|
||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||
|
||
// }).catch(() => {
|
||
// mescroll.endErr(); // 请求失败, 结束加载
|
||
// })
|
||
// apiGoods(mescroll.num, mescroll.size).then(res=>{
|
||
// const curPageData = res.list || [] // 当前页数据
|
||
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
|
||
// goods.value = goods.value.concat(curPageData); //追加新数据
|
||
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
|
||
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
|
||
|
||
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
||
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
|
||
|
||
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
|
||
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
|
||
|
||
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
|
||
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
|
||
|
||
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
|
||
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
||
// }).catch(()=>{
|
||
mescroll.endErr(); // 请求失败, 结束加载
|
||
// })
|
||
},
|
||
|
||
// 打电话
|
||
handleCallMobile: (mobile: number) => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '13525626532'
|
||
})
|
||
},
|
||
|
||
// 展示人员信息
|
||
handleShowProfilePopup: () => {
|
||
showProfilePopup.value = true
|
||
},
|
||
|
||
// 去下级用户详情
|
||
handleToSubPorfile: (item: any) => {
|
||
uni.navigateTo({
|
||
url: '/bundle/parten/pages/sub/profile'
|
||
})
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #FFF;
|
||
}
|
||
</style> |