240 lines
9.6 KiB
Vue
240 lines
9.6 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom",
|
||
"navigationBarBackgroundColor": "#fff"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="user-list-bg">
|
||
<view class="user-list-bg w-[100%] sticky top-0 left-0 z-50">
|
||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||
<template #left>
|
||
<view class="flex items-center" @click="router.navigateBack()">
|
||
<view class=" mt-4rpx">
|
||
<wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
|
||
</view>
|
||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">客户列表</view>
|
||
</view>
|
||
</template>
|
||
</wd-navbar>
|
||
</view>
|
||
|
||
<view class="mt-12rpx">
|
||
<view class="relative flex justify-center">
|
||
<wd-img :src="`${OSS}images/store/user/image4.png`" width="690rpx" height="280rpx"></wd-img>
|
||
<view class="absolute left-50% top-50% -translate-x-1/2 -translate-y-1/2 w-full">
|
||
<view>
|
||
<view class="flex items-center justify-between px-30rpx">
|
||
<view class="ml-48rpx">
|
||
<view class="font-500 text-30rpx leading-42rpx text-[#121212]">门店预充值(未消费）</view>
|
||
<view class="mt-6rpx text-24rpx leading-34rpx text-[#7B8290]">{{ useStore.defaultStore.name }}</view>
|
||
</view>
|
||
<view class="relative mt-20rpx" @click="router.navigateTo('/bundle/user/recharge-list')">
|
||
<wd-img :src="`${OSS}images/store/user/image5.png`" width="178rpx" height="50rpx"></wd-img>
|
||
<view class="absolute left-50% top-50% -translate-x-1/2 -translate-y-1/2 flex justify-center items-center w-full">
|
||
<view class="font-400 text-26rpx text-[#333] mt-[-8rpx]">充值明细</view>
|
||
<view class="mt-[-12rpx]">
|
||
<wd-icon name="arrow-right" size="32rpx" color="#666"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text-[#7B4FE1] flex items-center ml-78rpx mt-30rpx">
|
||
<view class="flex flex-col items-center justify-center mr-100rpx">
|
||
<view class="font-bold text-32rpx leading-44rpx">150,000.00</view>
|
||
<view class="mt-12rpx font-400 text-28rpx leading-40rpx">实际充值(元)</view>
|
||
</view>
|
||
<view class="flex flex-col items-center justify-center">
|
||
<view class="font-bold text-32rpx leading-44rpx">10,000.00</view>
|
||
<view class="mt-12rpx font-400 text-28rpx leading-40rpx">赠金(元)</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-40rpx">
|
||
<view class="font-bold text-32rpx leading-44rpx mx-30rpx">客户信息</view>
|
||
<view class="search-box relative">
|
||
<wd-search placeholder="搜索客户信息" cancel-txt="搜索" placeholder-left hide-cancel custom-input-class="!h-72rpx !pr-160rpx" v-model="keywords" light >
|
||
</wd-search>
|
||
<view
|
||
class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx"
|
||
@click="UserList.handleSearch">
|
||
搜索
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex items-center mx-30rpx">
|
||
<view
|
||
class="mr-12rpx bg-white rounded-12rpx w-132rpx h-56rpx text-center leading-50rpx font-400 text-28rpx leading-40rpx text-[#303133] border-2rpx border-solid border-[#fff]"
|
||
:class="{active: item.type === currentTab }"
|
||
v-for="item in menuTab" :key="item.type"
|
||
@click="UserList.handleChangeTab(item.type)">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="UserList.upCallback" :down="downOption" :up="upOption">
|
||
<view class="mb-22rpx" v-for="item in list" :key="item.id">
|
||
<view class="mx-64rpx flex justify-between items-center mb-10rpx">
|
||
<view class="flex items-center" @click="UserList.handleToDetail(item?.user?.id)">
|
||
<wd-img width="100rpx" height='100rpx' src="https://shchazhi.oss-cn-hangzhou.aliyuncs.com/fronted/icon/icon_avatar.png" :round="true"></wd-img>
|
||
<view class="ml-20rpx">
|
||
<view class="flex items-center">
|
||
<view class="font-bold text-28rpx text-[#303133] leading-40rpx mr-12rpx">{{ item?.user?.nickname }}</view>
|
||
<!-- TODO 如果是vip的话才显示这个皇冠 -->
|
||
<view v-if="item?.user?.member == 1">
|
||
<wd-img width="40rpx" height='40rpx' :src="`${OSS}icon/icon_crown.png`"></wd-img>
|
||
</view>
|
||
</view>
|
||
<view class="mt-14rpx font-400 text-26rpx text-[#303133] leading-36rpx">{{ item?.user?.mobile }}</view>
|
||
<view class="mt-10rpx text-24rpx text-[#F29747] leading-34rpx w-400rpx line-1">{{ item?.remark }}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="UserList.handleCall(item?.user?.mobile)" class="p-10rpx">
|
||
<wd-img width="64rpx" height='64rpx' :src="`${OSS}icon/icon_phone3.png`"></wd-img>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mx-30rpx">
|
||
<wd-gap height="2rpx" bg-color="#E5E5E5"></wd-gap>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script lang="ts" setup>
|
||
import { router } from '@/utils/tools'
|
||
import { toTimes, copy } from '@/utils/tools'
|
||
import { getStoreMemberList } from '@/api/store'
|
||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||
import { useStoreStore } from '@/store'
|
||
|
||
const OSS = inject('OSS')
|
||
const useStore = useStoreStore()
|
||
|
||
// mescroll
|
||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||
const downOption = {
|
||
auto: true
|
||
}
|
||
const upOption = {
|
||
auto: true,
|
||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||
}
|
||
const list = ref<Array<any>>([]) // 茶室列表
|
||
const keywords = ref<string>('') // 搜索关键词
|
||
const menuTab = ref([
|
||
{type: 'all', name: '全部'},
|
||
{type: 'recharge', name: '充值卡'},
|
||
{type: 'vip', name: '会员卡'},
|
||
])
|
||
const currentTab = ref<string>('all')
|
||
|
||
onLoad((args) => {
|
||
})
|
||
|
||
const UserList = {
|
||
/**
|
||
* 分页加载
|
||
* @param mescroll
|
||
*/
|
||
upCallback: (mescroll) => {
|
||
// 需要留一下数据为空的时候显示的空数据图标内容
|
||
// const filter = {
|
||
// page: mescroll.num,
|
||
// size: mescroll.size,
|
||
// store_id: useStore.defaultStore.id,
|
||
// }
|
||
|
||
// getStoreMemberList(filter).then((res) => {
|
||
// const curPageData = res.list || [] // 当前页数据
|
||
// if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||
// list.value = list.value.concat(curPageData) //追加新数据
|
||
// mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
||
// }).catch(() => {
|
||
mescroll.endErr() // 请求失败, 结束加载
|
||
// })
|
||
},
|
||
|
||
/**
|
||
* 跳转用户详情
|
||
* @param id
|
||
*/
|
||
handleToDetail: (id) => {
|
||
uni.$on('refreshUserDetail', () => {
|
||
uni.$off('refreshUserDetail')
|
||
list.value = []
|
||
getMescroll().resetUpScroll()
|
||
})
|
||
router.navigateTo(`/bundle/user/user-detail?id=${id}`)
|
||
},
|
||
|
||
/**
|
||
* 电话
|
||
* @param phone
|
||
*/
|
||
handleCall: (phone) => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 切换tab
|
||
*/
|
||
handleChangeTab: (type: string) => {
|
||
currentTab.value = type
|
||
list.value = []
|
||
getMescroll().resetUpScroll()
|
||
},
|
||
|
||
/**
|
||
* 搜索
|
||
*/
|
||
handleSearch: () => {
|
||
list.value = []
|
||
getMescroll().resetUpScroll()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.user-list-bg {
|
||
background-color: $cz-page-background;
|
||
background-image: url(#{$OSS}images/store/user/image3.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.search-box {
|
||
:deep() {
|
||
.wd-search {
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #4C9F44;
|
||
background-color: #F0F6EF;
|
||
color: #4C9F44;
|
||
}
|
||
</style>
|