Huiqitong/src/pages/memberCenter/index.vue

<template>
    <view class="container">
        <u-navbar
            title="会员中心"
            placeholder="true"
            bg-color="#F1F3F9"
            left-icon="man-add-fill"
            left-icon-size="24"
            left-text="申请入会"
            @leftClick="leftClick"
        ></u-navbar>
        <u-search
            @search="search"
            @clickIcon="clickIcon"
            @clear="clear"
            shape="square"
            placeholder="请输入搜索内容"
            placeholder-color="#A9D4FF"
            v-model="keyword"
            search-icon="/static/img/search.png"
            search-icon-size="14"
            :show-action="false"
            height="40"
            margin="40rpx 24rpx 24rpx 24rpx"
            bg-color="#FFFFFF"
        ></u-search>

        <u-tabs
            :list="filterTabs"
            :current="current"
            :active-style="{ color: '#0C092A', fontsize: '30rpx' }"
            key-name="title"
            @click="handleTabSelect"
        ></u-tabs>
        <view class="main">
            <scroll-view scroll-y="auto" class="hyonne" @scrolltolower="onloadmore">
                <view class="hyCard" v-for="(item, index) in hyList" :key="index" 
				>
				<!-- @click="godetail(item.id)"> -->
                    <view class="left">
                        <!-- <u-avatar :src="baseurl + item.head_pic" size="64"></u-avatar> -->
                        <view class="textpart">
                            <view class="namepart">
                                <text class="name">{{ item.contact }}</text>
                                <view class="biaoq" v-if="item.industry" :style="{ background: `linear-gradient(0deg, #007fff 0%, #dcdcdc70 100%)` }">
                                    {{ item.industry }}
                                </view>
                            </view>
                            <text class="company">{{ item.title || '无' }}</text>
                        </view>
                    </view>
                    <!-- <image style="width: 48rpx; height: 48rpx" src="@/static/img/Icon.png" mode=""></image> -->
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import tabsComm from '../index/tabsComm.vue'
import { xhMember } from '@/api/memberCenter'

const baseurl = ref(import.meta.env.VITE_APP_BASE_URL + '/')

// 响应式数据
const keyword = ref('')
const page = ref(1)
const pagesize = ref(6)
const current = ref(0)

const search = async (val) => {
    page.value = 1
    pagesize.value = 6
    await getMemberCenter(currentTab.value, keyword.value, page.value, pagesize.value)
}

const clickIcon = async () => {
    page.value = 1
    pagesize.value = 6
    await getMemberCenter(currentTab.value, keyword.value, page.value, pagesize.value)
}

const clear = async () => {
    page.value = 1
    pagesize.value = 6
    await getMemberCenter(currentTab.value, keyword.value, page.value, pagesize.value)
}

const hyList = ref([])

const currentTab = ref('0')

// 选项卡配置（第一个必须是"全部"）
const filterTabs = ref([
    {
        id: '',
        title: '全部'
    },
	{
		id: 1,
		title: '个体私营企业'
	},
	{
		id: 2,
		title: '个体工商户'
	},
	{
		id: 3,
		title: '理事单位'
	},
	{
		id: 4,
		title: '商协会'
	},
	{
		id: 5,
		title: '自然人'
	},
	{
		id: 6,
		title: '其他单位'
	}
])

const leftClick = () => {
    if (uni.getStorageSync('access_token') === '') {
        uni.showToast({
            title: '请登录',
            icon: 'fail'
        })
    } else {
        // uni.navigateTo({
        //     url: '/pages/memberCenter/inpart'
        // })
		uni.navigateTo({
			url: '/pages/memberCenter/memberRegistration'
		})
    }
}

// 处理选项卡选择
const handleTabSelect = async (tab) => {
    page.value = 1
    pagesize.value = 6
    currentTab.value = tab.id
    // 这里可以添加数据加载逻辑
    await getMemberCenter(tab.id, '', page.value, pagesize.value)
}

const godetail = (id) => {
    uni.navigateTo({
        url: '/pages/index/shoppage/mediaDetail?id=' + id
    })
}

const getbqlist = async () => {
    filterTabs.value = [
        {
            id: '',
            title: '全部'
        }
    ]
    // await memberTagList().then((res) => {
    //     filterTabs.value = [...filterTabs.value, ...res.data]
    //     console.log(res.data)
    // })
}

const getMemberCenter = async (id, name, page, limit) => {
    let params = {
        identity: id,
        keyword: name,
        page: page,
        limit: limit
    }
    await xhMember(params).then((res) => {
        hyList.value = res.data.data
    })
}

const onloadmore = async () => {
    page.value++
    let params = {
        identity: currentTab.value.id,
        keyword: keyword.value,
        page: page.value,
        limit: pagesize.value
    }
    await xhMember(params).then((res) => {
        hyList.value = [...hyList.value, ...res.data.data]
    })
}

onLoad(async () => {
    // await getbqlist()
    await getMemberCenter('', '', page.value, pagesize.value)
})
</script>

<style scoped lang="scss">
.container {
    background: linear-gradient(0deg, #f1f3f9 72%, rgba(129, 179, 222, 0.5) 88%);
    height: 100vh;
    width: 100%;
    overflow-y: auto;

    .main {
        width: 100%;
        display: grid;
        padding: 0 24rpx;
        box-sizing: border-box;
        overflow-y: hidden;

        .hyCard {
            margin-top: 24rpx;
            width: 100%;
            height: 160rpx;
            border-radius: 24rpx;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 20rpx;

            .left {
                display: flex;
                align-items: center;
                box-sizing: border-box;

                .textpart {
                    margin-left: 32rpx;
                    display: grid;
                    justify-content: left;

                    .namepart {
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;

                        .name {
                            font-family: Source Han Sans;
                            font-size: 30rpx;
                            font-weight: 350;
                            line-height: 150%;
                            letter-spacing: normal;
                            /* 外部/Neutral/Black */
                            color: #0c092a;
                        }

                        .biaoq {
                            padding: 10rpx;
                            height: 40.5rpx;
                            border-radius: 0rpx 4rpx 20rpx 0rpx;
                            margin-left: 16rpx;
                            font-family: YouSheBiaoTiHei;
                            font-size: 24rpx;
                            font-weight: normal;
                            display: flex;
                            align-items: center;
                            letter-spacing: normal;
                            color: #ffffff;
                            text-shadow: 0rpx 4rpx 4rpx rgba(0, 0, 0, 0.2);
                        }
                    }

                    .company {
                        margin-top: 12rpx;
                        font-family: Source Han Sans;
                        font-size: 24rpx;
                        font-weight: 300;
                        line-height: 150%;
                        letter-spacing: normal;
                        /* 外部/Neutral/Grey 2 */
                        color: #858494;
                    }
                }
            }
        }
    }

    :deep(.u-icon__icon) {
        color: #007fff !important;
    }
}

.hdzq {
    width: 182rpx;
    height: 80rpx;
    position: fixed;
    right: 0;
    top: 70%;
    margin-right: -14rpx;
}
</style>