xcxFront/pages/ucenter/member.vue

<template>
  <tn-navbar
    fixed
    bg-color="transparent"
    :bottom-shadow="false"
    :placeholder="false"
	@init-finish="navbarInitFinishHandle"
  />
  <view class="member-page" :style="{ paddingTop: `${navbarHeight + 20}px` }">
    <!-- 搜索操作栏 -->
    <view class="member-operation">
      <view class="input">
        <tn-search-box
          v-model="searchValue"
          :search-button="false"
          shape="round"
          size="sm"
		  @clear="searchClearHandle" 
          @search="searchConfirmHandle"
        />
      </view>
      <view class="button">
        <tn-button
          bg-color="tn-blue"
          shape="round"
          width="150"
          height="66"
          @click="searchConfirmHandle"
        >
          搜 索
        </tn-button>
      </view>
    </view>
    <!-- 搜索结果 -->
    <view class="member-result">
		<tn-title title="访客列表" mode="vLine"/>
		<view class="content-wrapper">
			<view class="result-item tn-flex tn-flex-start-between items-center tn-border-bottom tn-gray-disabled_border tn-shadow-sm tn-text-md tn-gradient-bg__orangeyellow" style="padding: 20rpx 0;">
				<view class="avatar tn-text-center tn-pl-sm">
					头像
				</view>
				<view class="username tn-w-1-6 tn-text-center">
					用户名
				</view>
				<view class="nickname tn-w-1-6 tn-text-center">
					昵称
				</view>
				<view class="isAdmin tn-w-1-6 tn-text-center">
					角色
				</view>
				<view class="right tn-w-1-6 tn-text-center">
					权限
				</view>
			</view>
			<view v-for="(item, index) in memberList" :key="index" :class="['result-item', 'tn-flex' ,'tn-flex-start-between', 'items-center', 'tn-border-bottom' ,'tn-gray-light_border','tn-shadow-sm',index%2 == 0?'tn-gradient-bg__yellow-light':'tn-gradient-bg__green-light']" >
				<view class="avatar tn-pl-xs">
					<tn-avatar v-if="item.avatar" :url="item.avatar" border shape="circle" border-color="tn-white"/>
					<tn-avatar v-else icon="my" shape="circle" border border-color="tn-white" />
				</view>
				<view class="username tn-w-1-6">
					{{item.username}}
				</view>
				<view class="nickname tn-w-1-6">
					{{item.nickname?item.nickname:'未填写'}}
				</view>
				<view class="isAdmin tn-w-1-6 tn-text-center">
					{{item.isAdmin == '0'?'访客':'管理员'}}
				</view>
				<view class="right tn-w-1-6 tn-text-center">
					<tn-switch v-model="item.right" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" active-color="tn-blue" inactive-color="tn-red-light" size="sm" @change="changeRight(item)"/>
				</view>
			</view>
		</view>
    </view>
	<view class="more tn-mt-lg tn-mb-lg">
		<tn-loadmore :status="loadmoreStatus" loading-icon-mode="flower"/>
	</view>
  </view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import request from "@/utils/request";
	import { onReachBottom } from "@dcloudio/uni-app"
	import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'
	import TnSwitch from '@/uni_modules/tuniaoui-vue3/components/switch/src/switch.vue'
	import TnSearchBox from '@/uni_modules/tuniaoui-vue3/components/search-box/src/search-box.vue'
	import TnTitle from '@/uni_modules/tuniaoui-vue3/components/title/src/title.vue'
	
	interface MemberItem {
	  id: string
	  username: string
	  nickname: string
	  avatar:string
	  right: string
	  isAdmin: string
	  desc: string
	}
	
	const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
	
	const page = ref<number>(1);
	
	const memberList = ref<MemberItem[]>([]);
	
	const navbarHeight = ref()
	
	const searchValue = ref<string>('')

	const navbarInitFinishHandle = (info:any) => {
	  navbarHeight.value = info.height
	}
	
	const searchClearHandle = () => {
		page.value = 1
		memberList.value = []
		getMemberList()
	}
	
	const searchConfirmHandle = () => {
	  if (!searchValue.value) {
		  uni.showToast({
		  	icon:'none',
			title:'请输入搜索内容'
		  })
		  return
	  }
	  page.value = 1
	  memberList.value = []
	  getMemberList()
	}
	
	const changeRight = (item:any) => {
		request({
			url:'/front/user/right',
			method:'PUT',
			data:{
				id:item.id,
				right:item.right
			}
		}).then((res:any) => {
			uni.showToast({
				icon:'none',
				title:res.data.message
			})
		})
	}
	
	const getMemberList = () => {
		loadmoreStatus.value = 'loading';
		let params = {
				page:page.value,
				pageSize:10,
			}
		if(searchValue.value){
			Object.assign(params,{key:searchValue.value})
		}
		request({
			url:'/front/user/page',
			data:params
		}).then((res:any)=>{
			if(res.data.code === 0) {
				if(res.data.data.list.length < 10){
					loadmoreStatus.value = 'nomore'
				}else{
					loadmoreStatus.value = 'loadmore'
				}
				setTimeout(()=>{
					memberList.value = [...memberList.value,...res.data.data.list]
				},500)
			}
		})
	}
	
	onReachBottom(()=>{
		loadmoreStatus.value = 'loading'
		page.value += 1
		getMemberList()
	})
	
	getMemberList()
</script>

<style lang="scss" scoped>
	.member-page {
	  position: relative;
	  width: 100%;
	  min-height: 100vh;
	  background: linear-gradient(
	    180deg,
	    var(--tn-color-blue-light) 0px,
	    transparent 20%,
	    transparent 100%
	  );
    padding:30rpx 30rpx 60rpx;

    /* 搜索操作栏 start */
	  .member-operation {
	    position: relative;
	    display: flex;
	    align-items: center;
	
	    .input {
	      flex: 1;
	    }
	
	    .button {
	      flex-grow: 0;
	      flex-shrink: 0;
	      margin-left: 50rpx;
	    }
	  }
	  /* 搜索操作栏 end */
	
	  /* 搜索结果 start */
	  .member-result {
	    margin-top: 60rpx;

	    .content-wrapper {
	      margin-top: 50rpx;
	
	      .result-item {
	        position: relative;
	        width: 100%;
			border-radius: 10rpx;
	        & + .result-item {
	          padding:20rpx 0rpx;
	        }
	      }
	    }
	  }
	  /* 搜索结果 end */
	}
	
</style>