popularize-front/pages/index/member.vue

<template>
	<view class="page">
		<view class="head-box"></view>
		<uv-navbar title="招募" leftIcon=" " :bgColor="bgColor" height="100rpx" :titleStyle="{color:'#fff'}"></uv-navbar>
		<view class="content">
			<view class="search-box">
				<view class="search-box-r">
					<uv-search @search="search" placeholder="搜索感兴趣的活动" v-model="params.title" shape="square" :showAction="false" color="#fff" placeholderColor="#BDABAC" :clearabled="false" searchIconColor="#fff" searchIconSize="50rpx" bgColor="#4A2A2B" height="63rpx" ></uv-search>
				</view>
			</view>
			<view class="user-box"  @click="toInfo">
				<uv-avatar :src="userInfo.headImage" size="98rpx" shape="circle"></uv-avatar>
				<view class="user-msg">
					<view class="user-msg-top">
						<view>	{{isLogin ? userInfo.nickName : '请点击登录'}}</view>
						<view class="level-box"
						v-if="userInfo.isUser == 'Y'">主理人</view>
						
						<view class="level-box"
						v-else>普通用户</view>
						
					</view>
					<view class="id-box">
						<text>{{isLogin ? 'ID:' + userInfo.id : ''}}</text>
						<text class="copy-text" @click.stop="copy" v-if="isLogin">复制</text>
					</view>
				</view>
			</view>
		
			<view class="swipe-box">
				<uv-swiper :list="list" keyName="image" height="280rpx" radius="30rpx" bgColor="transparent" indicator	indicatorMode="dot"></uv-swiper>
			</view>
			
			<view class="zlr-box" @click="toRenzheng">
				<view class="zlr-box-l">
					<image src="@/static/image/member/zlr-icon.png" mode="widthFix"></image>
					<view>主理人认证</view>
				</view>
				<view class="zlr-box-r">
					<view>获取更多身份特权</view>
					<image src="@/static/image/member/zlr-arrow.png" mode="widthFix"></image>
				</view>
			</view>
		
			<view class="list-box">
				<zhaomu-item v-for="(item,i) in ecruitList" 
				:key="i" 
				@getData="search"
				:item="item"></zhaomu-item>
				<uv-load-more :status="status" fontSize="24rpx" dashed line />
			</view>
		</view>


		<tabber select="member" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import zhaomuItem from '@/components/zhaomu/zhaomu-item.vue'
	import { mapState,mapGetters } from 'vuex'
	export default {
		components: {
			tabber,
			zhaomuItem
		},
		data() {
			return {
				params:{
					title:'',
					pageNo:1,
					pageSize:10
				},
				totalPage:0,
				status:'loading',
				bgColor:'transparent',
				list: [],
				ecruitList:[]
			};
		},
		computed: {
			...mapGetters(["userInfo","isLogin"]),
		},
		onLoad() {
			this.getList()
			this.getBanner()
			if(this.isLogin) {
				this.$store.commit('getUserInfo')
			}
		},
		onShow() {
			
		},
		onPageScroll(e) {
			if(e.scrollTop > 50) {
				this.bgColor ='#49070c'
			}else{
				this.bgColor ='transparent'
			}
		},
		onReachBottom() {
			if(this.params.pageNo < this.totalPage) {
				this.params.pageNo ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.params.pageNo = 1
			this.cardListData = []
			this.getList()
		},
		methods:{
			search() {
				this.params.pageNo = 1;
				this.ecruitList = []
				this.getList()
			},
			getList() {
				this.status = "loading"
				this.$api('recruitPageList',this.params,res=>{
					uni.stopPullDownRefresh()
					if(res.code == 200) {
						this.totalPage = res.result.pages;
						this.ecruitList = [...this.ecruitList,...res.result.records];
						if(this.params.pageNo >= this.totalPage) {
							this.status = "nomore"
						}else {
							this.status = "loadmore"
						}
					}
				})
			},
			getBanner() {
				this.$api('banner',res=>{
					if(res.code == 200) {
						this.list = res.result
					}
				})
			},
			toRenzheng() {
				if(!this.isLogin) {
					return uni.showToast({
						title:'请先登录！',
						icon:'none'
					})
				}
				uni.navigateTo({
					url:'/pages_zlx/zlx-form'
				})
			},
			toInfo() {
				if(!this.isLogin) {
					uni.navigateTo({
						url:'/pages_login/wxLogin'
					})
				}else{
					uni.navigateTo({
						url:'/pages_my/user-info'
					})
				}
			},
			copy() {
				uni.setClipboardData({
					data:this.userInfo.id,
					success: () => {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #060504;
	}
</style>
<style lang="scss">
	.page {
		.head-box {
			background: url('@/static/image/nav-bg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 534rpx;
			position: absolute;
			z-index: -1;
		}
		.content {
			margin-top: 40rpx;
			padding: 0 30rpx;
			padding-top: calc(var(--status-bar-height) + 110rpx);
			
			.search-box {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				&-r {
					flex:1;
				}
			}
			
			.user-box {
				display: flex;
				align-items: center;
				margin-bottom: 33rpx;
				.user-msg {
					margin-left: 20rpx;
					.user-msg-top {
						font-weight: 600;
						font-size: 32rpx;
						color: #E6E6E6;
						display: flex;
						align-items: center;
						.level-box {
							width: 108rpx;
							height: 31rpx;
							background: RGBA(40, 19, 4, 1);
							border-radius: 16rpx;
							font-weight: 400;
							font-size: 20rpx;
							color: #FF9C00;
							text-align: center;
							margin-left: 14rpx;
						}
					}
				
					.id-box {
						color: #999999;
						font-size: 22rpx;
						margin-top: 20rpx;
						.copy-text {
							font-weight: 400;
							font-size: 22rpx;
							color: #E6E6E6;
							margin-left: 18rpx;
						}
					}
				}
			}
			
			.swipe-box {
				margin-bottom: 31rpx;
			}
			
			.zlr-box {
				background: url('@/static/image/member/zlr-bg.png') no-repeat;
				background-size: 100% 100%;
				height: 124rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 46rpx;
				margin-bottom: 32rpx;
				&-l {
					font-weight: 600;
					font-size: 32rpx;
					color: #FF3B47;
					display: flex;
					align-items: center;
					image {
						width: 72rpx;
						margin-right: 24rpx;
					}
				}
				&-r {
					font-weight: 400;
					font-size: 25rpx;
					color: #FF8E00;
					display: flex;
					align-items: center;
					image {
						width: 12rpx;
						margin-left: 12px;
					}
				}
			}
		
			.list-box {
			}
		}
	}
</style>