myjtp/pages/index.vue

<template>
	<view class="container">
		<image class="topImg" src="../static/img/img02.png" mode="widthFix"></image>
		<view class="contentBox">
			<view class="btoomBg"></view>
			<view class="topBg">
				<image class="leftIcon" src="../static/img/img06.png" mode="widthFix"></image>
				<image class="topImg" src="../static/img/img08.png" mode="widthFix"></image>
				<view class="tpConent">
					<view class="tpRight"><view class="textBox" @click="nextTo('/pages/activity/index')">活动规则</view></view>
					<view class="tpTitle">评选活动</view>
					<view class="endTextBox flex">
						<view class="leftLine"><view class="roundness"></view></view>
						<view class="textLine">距离投票结束还有</view>
						<view class="rightLine"><view class="roundness"></view></view>
					</view>
					<view class="down">
						<u-count-down
							separator="zh"
							font-size="32"
							separator-color="#666666"
							separator-size="32"
							bg-color="#D7272B"
							color="#FFFFFF"
							:show-border="false"
							:timestamp="timestamp"
							@end="stopTime"
						></u-count-down>
					</view>
					<view class="tjContent flex">
						<view class="tjItem">
							<view class="topText">
								{{ item.pepole }}
								<text class="iconTip">人</text>
							</view>
							<view class="bottomText">参与者</view>
						</view>
						<view class="tjItem">
							<view class="topText">
								{{ item.votes }}
								<text class="iconTip">票</text>
							</view>
							<view class="bottomText">投票数</view>
						</view>
						<view class="tjItem">
							<view class="topText">
								{{ item.count }}
								<text class="iconTip">次</text>
							</view>
							<view class="bottomText">浏览量</view>
						</view>
					</view>
					<view class="input flex">
						<u-input
							type="select"
							v-model="input.value"
							confirm-type="search"
							@confirm="searchProduct"
							placeholder="请输入选手姓名和编号"
							:height="input.height"
							:type="input.type"
						/>
						<u-icon color="#999999" class="iconT" @click="searchProduct" name="search"></u-icon>
					</view>
					<view class="tabsBox"><u-tabs :list="list" active-color="#D7272B" :is-scroll="false" :current="rank" @change="changeRank"></u-tabs></view>
					<!-- 最新 -->
					<view v-if="rank == 0" class="itemList flex">
						<view class="itemData" v-for="item in userlist.list">
							<view class="itemContentBox">
								<view class="itemImgbox">
									<view class="iconBox">
										<view>{{ item.sub_id }}</view>
										<view>号</view>
									</view>
									<image class="itemImg" :src="item.avatar" mode="scaleToFill"></image>
									<view class="itemAddress clamp" v-if="item.address">{{ item.address }}</view>
								</view>
								<view class="itemNameBox flex">
									<view class="itemName">{{ item.name }}</view>
									<view class="itemVote">{{ item.vote }}票</view>
								</view>
							</view>
							<view class="itemBottom" @click="chargeConfirm(item)">投票</view>
						</view>
					</view>
					<u-loadmore v-if="rank == 0" :status="userlist.loadingType" />
					<!-- 产康师排行 -->
					<view class="phItemList" v-if="rank == 1">
						<view class="phItem flex" v-for="(item, ind) in phlist.list">
							<view class="icon">
								<image v-if="ind == 0" class="tipImg" src="../static/img/rank1.png" mode="widthFix"></image>
								<image v-if="ind == 1" class="tipImg" src="../static/img/rank2.png" mode="widthFix"></image>
								<image v-if="ind == 2" class="tipImg" src="../static/img/rank3.png" mode="widthFix"></image>
								<view class="tipText" v-if="ind > 2">{{ ind }}</view>
							</view>
							<view class="flex phRightBox">
								<view class="avatarBox"><image class="avatarImg" :src="item.avatar" mode="scaleToFill"></image></view>
								<view class="phTextBox">
									<view class="phTtemName">{{ item.name }}</view>
									<view class="phItemAddress">{{ item.address }}</view>
								</view>
								<view class="phRight flex">
									<text class="textVote">{{ item.vote }}</text>
									<image class="phTipImg" src="../static/img/level.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if="rank == 1" :status="phlist.loadingType" />
					<!-- 母乳喂养排行 -->
					<view class="phItemList" v-if="rank == 2">
						<view class="phItem flex" v-for="(item, ind) in mrlist.list">
							<view class="icon">
								<image v-if="ind == 0" class="tipImg" src="../static/img/rank1.png" mode="widthFix"></image>
								<image v-if="ind == 1" class="tipImg" src="../static/img/rank2.png" mode="widthFix"></image>
								<image v-if="ind == 2" class="tipImg" src="../static/img/rank3.png" mode="widthFix"></image>
								<view class="tipText" v-if="ind > 2">{{ ind }}</view>
							</view>
							<view class="flex phRightBox">
								<view class="avatarBox"><image class="avatarImg" :src="item.avatar" mode="scaleToFill"></image></view>
								<view class="phTextBox">
									<view class="phTtemName">{{ item.name }}</view>
									<view class="phItemAddress">{{ item.address }}</view>
								</view>
								<view class="phRight flex">
									<text class="textVote">{{ item.vote }}</text>
									<image class="phTipImg" src="../static/img/level.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if="rank == 2" :status="mrlist.loadingType" />
				</view>
			</view>
		</view>
		<view class="addUser"  @click="pushUserData">我要参与</view>
		<u-popup border-radius="20" width="540" v-model="showAlert" mode="center">
			<view class="alertBox">
				<image class="titleImg" src="../static/img/alertbg.png" mode="widthFix"></image>
				<view class="title">参赛类型</view>
				<view class="titleTip">请选择您的参赛身份类型</view>
				<view class="lxTtem flex" @click="csType = 0">
					<view class="leftTitle flex">
						<image class="leftImgTip" src="../static/img/user.png" mode="heightFix"></image>
						<text>个人参赛</text>
					</view>
					<view class="rightTip flex"><view v-if="csType == 0" class="xzTip"></view></view>
				</view>
				<view class="lxTtem flex" @click="csType = 1">
					<view class="leftTitle flex">
						<image class="leftImgTip" src="../static/img/userAll.png" mode="heightFix"></image>
						<text>企业参赛(我有所属企业)</text>
					</view>
					<view class="rightTip flex"><view v-if="csType == 1" class="xzTip"></view></view>
				</view>

				<view class="pushtyle" @click="pushBm">确认</view>
			</view>
		</u-popup>

		<u-popup border-radius="20" v-model="showCharge" mode="bottom">
			<view class="alertChargeBox">
				<view class="alertCharge flex">
					<view class="chargeItem" :class="{ actionCharge: ind == moneyIndex }" v-for="(ls, ind) in 8" @click="moneyIndex = ind">
						<view class="chargeImgIcon">{{ (ind + 1) * numCharge }}票</view>
						<view class="chargeImgBox"><image class="chargeImg" :src="'../static/img/chargeIcon' + (ind + 1) + '.png'" mode="widthFix"></image></view>
						<view class="chargeTextBox flex">
							<image class="chargeIcon" src="../static/img/moneyIcon.png" mode="scaleToFill"></image>
							<text>{{ (ind + 1) * numCharge }}</text>
						</view>
					</view>
				</view>
				<view class="flex chargeButtom">
					<view class="left flex">
						<image class="chargeIcon" src="../static/img/moneyIcon.png" mode="scaleToFill"></image>
						<text class="num">￥{{ (moneyIndex + 1) * numCharge * priceBl }}</text>
						<text class="tip">可为选手加{{ (moneyIndex + 1) * numCharge }}票</text>
					</view>
					<view class="right" @click="commitCharge">赠送</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { ptDetail, ptJoin,ptPush } from '@/api/tp.js';
export default {
	data() {
		return {
			timestamp: 600000,
			// 拼团信息
			item: {
				pepole: 20,
				votes: 20,
				count: 20
			},
			// 搜索框
			input: {
				value: '',
				type: 'text',
				height: 60
			},
			// 最新列表
			userlist: {
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'loadmore'
			},
			// 产康师排行
			phlist: {
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'loadmore'
			},
			// 产康师排行
			mrlist: {
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'loadmore'
			},
			/* 选中的类型0为最新1为排行 */
			rank: 0,
			// 切换列表
			list: [
				{
					name: '最新'
				},
				{
					name: '产康师排行'
				},
				{
					name: '母乳喂养师排行'
				}
			],
			//参赛类型
			csType: 0, //0个人 1企业
			showAlert: false, //显示参赛弹窗
			showCharge: false, //显示投票弹窗
			moneyIndex: 0, //当前选中的投票对象
			numCharge:10,//默认对应翻倍比例
			priceBl: 1 ,//默认1票对应金额投票比例
			chargeUserItem:{},//当前选中的投票对象
			timeStop:false,//判断倒计时是否结束
		};
	},
	watch: {
		rank(newValue, oldValue) {
			let data = {};
			let rank = 0;
			let job = '';
			// 判断是否为最新
			if (newValue == 0) {
				data = this.userlist;
				rank = 0;
			} else {
				rank = 1;
			}
			// 判断是否为产康师排行
			if (newValue == 1) {
				data = this.phlist;
				job = '产康师';
			}
			// 判断是否为母乳喂养排行
			if (newValue == 2) {
				data = this.mrlist;
				job = '母乳喂养指导师';
			}
			this.getData(data, rank, job);
		},
	},
	onShow() {
		this.ptDetail();
		this.ptJoin();
	},
	// 页面下拉到底部加载
	onReachBottom() {
		this.ptJoin();
	},
	methods: {
		// 倒计时结束
		stopTime(){
			this.timeStop= true;
		},
		//开始投票 
		commitCharge(){
			uni.showLoading({
				title:"投票中",
				mask:true
			})
			ptPush({
				num:this.numCharge*(this.moneyIndex+1),
				payType:'yue'
			},this.chargeUserItem.id).then((e) => {
				uni.hideLoading()
				if(e.msg =='余额支付成功'){
					uni.showToast({
						title:'投票成功!'
					})
					window.reload()
				}else{
					this.showCharge = false;
					uni.showModal({
						title: '错误',
						content: '余额不足请充值',
						success: res => {
							if(res.confirm){
								uni.navigateTo({
									url:'/pages/recharge/pay'
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
				
			}).catch((e) => {
				uni.hideLoading()
			})
		},
		// 投票弹窗
		chargeConfirm(item) {
			if(this.timeStop){
				uni.showModal({
					title: '提示',
					content: '投票已结束！',
					showCancel: false,
				});
				return
			};
			this.showCharge = true;
			// 保存当前选中的投票对象
			this.chargeUserItem = item
		},
		// 确认报名
		pushBm() {
			this.showAlert = false;
			if (this.csType == 0) {
				uni.navigateTo({
					url: '/pages/addTp/user'
				});
			}

			if (this.csType == 1) {
				uni.navigateTo({
					url: '/pages/addTp/company'
				});
			}
		},
		// 切换当前选中的查询
		changeRank(index) {
			this.rank = index;
		},
		//获取用户列表
		ptJoin() {
			// 获取项目对象
			let navItem = this.userlist;
			// 获取最新数据
			this.getData(navItem, 0);
		},
		// 请求返回项目数据
		ptDetail() {
			ptDetail()
				.then(e => {
					const data = e.data;
					this.timestamp = data.end_time - new Date().getTime() / 1000;
					this.item.pepole = data.join_num;
					this.item.votes = data.vote_num;
					this.item.count = data.visit;
					this.priceBl = +data.price;
				})
				.catch(e => {
					console.log();
				});
		},
		// 查询报名数据
		searchProduct(e) {
			// 初始化数据
			const data = {
				list: [],
				page: 1,
				limit: 10,
				loadingType: 'loadmore'
			};
			// 判断是否为最新
			if (this.rank == 0) {
				this.userlist = data;
			}
			// 判断是否为排行
			if (this.rank == 1) {
				this.phlist = data;
			}
			this.getData(data, this.rank);
		},
		// 页面跳转
		nextTo(url) {
			console.log(url, '跳转地址');
			uni.navigateTo({
				url,
				fail: e => {
					console.log(e);
				}
			});
		},
		// 报名
		pushUserData() {
			if(this.timeStop){
				uni.showModal({
					title: '提示',
					content: '投票已结束！',
					showCancel: false,
				});
				return
			};
			this.showAlert = true;
		},
		// 请求用户数据
		getData(navItem, rank, job) {
			// 获取项目对象
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'nomore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			ptJoin({
				page: navItem.page,
				limit: navItem.limit,
				key_word: this.input.value,
				rank: rank,
				job: job
			})
				.then(e => {
					const data = e.data.data;
					navItem.list = navItem.list.concat(data);
					navItem.page++;
					if (navItem.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'loadmore';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'nomore';
					}
					this.$set(navItem, 'loaded', true);
				})
				.catch(e => {
					navItem.loadingType = 'loadmore';
					console.log(e);
				});
		}
	}
};
</script>
<style lang="scss">
page,
.container {
	height: auto;
	min-height: 100%;
	background-color: #ff9ba7;
}
.container {
	padding-bottom: 22rpx;
	position: relative;
}
.alertChargeBox {
	.alertCharge {
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 30rpx;
		.chargeItem {
			width: 25%;
			text-align: center;
			position: relative;
			height: 180rpx;
			padding: 40rpx;
			margin: 20rpx 0;
			&.actionCharge {
				border: 1px solid #d7272b;
				border-radius: 10rpx;
			}
			.chargeImgIcon {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				font-size: 18rpx;
				font-weight: bold;
				color: #ffffff;
				border-top-right-radius: 90rpx;
				border-top-left-radius: 90rpx;
				border-bottom-right-radius: 90rpx;
				padding: 5rpx 15rpx;
				background-color: #d7272b;
			}
			.chargeTextBox {
				position: absolute;
				bottom: 10rpx;
				right: 0;
				left: 0;
				justify-content: center;
				color: #223438;
				font-size: 24rpx;
				text-align: center;
				.chargeIcon {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}

			.chargeImgBox {
				.chargeImg {
					width: 77rpx;
				}
			}
		}
	}
	.chargeButtom {
		padding: 30rpx;
		background-color: #fff6f6;
		.left {
			font-weight: bold;
			flex-grow: 1;
			justify-content: flex-start;
			.chargeIcon {
				width: 40rpx;
				height: 40rpx;
			}
			.num {
				margin-left: 10rpx;
				color: #16363a;
				font-size: 30rpx;
			}
			.tip {
				margin-left: 10rpx;
				color: #d82a2e;
				font-size: 24rpx;
			}
		}
		.right{
			background-color: #D7272B;
			color: #ffffff;
			border-radius: 99rpx;
			padding: 5rpx 40rpx;
			font-size: 26rpx;
		}
	}
}
.addUser {
	clear: both;
	background: #d7272b;
	border: 1px solid #170911;
	border-radius: 7px;
	margin: 0 40rpx;
	line-height: 1;
	font-size: 31rpx;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	padding: 30rpx;
	line-height: 24rpx;
	margin-top: 50rpx;
}
.topImg {
	width: 100%;
}
.contentBox {
	position: relative;
	width: 0px;
	min-width: 100%;
	margin-bottom: 32rpx;
	.btoomBg {
		background-color: #ffffff;
		min-height: 50vh;
		height: 100%;
		position: absolute;
		top: 32rpx;
		right: 30rpx;
		left: 42rpx;
	}
	.topBg {
		position: relative;
		margin-left: 30rpx;
		margin-right: 42rpx;
		box-shadow: 3px 5rpx 3rpx 0rpx rgba(4, 0, 0, 0.15);
		line-height: 0;
		.leftIcon {
			position: absolute;
			top: 30rpx;
			left: -30rpx;
			width: 100rpx;
		}
		.tpConent {
			background: #ffffff;
			line-height: 1;
			min-height: 50vh;
			padding-top: 28rpx;
			padding-bottom: 20rpx;
		}
		.down {
			text-align: center;
		}
		.tjContent {
			margin-top: 70rpx;
			justify-content: space-around;
			text-align: center;
			.tjItem {
				.topText {
					font-size: 50rpx;
					font-weight: bold;
					color: #3a3a3a;
					.iconTip {
						font-size: 20rpx;
					}
				}
				.bottomText {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		.tpTitle {
			text-align: center;
			font-size: 48rpx;
			font-weight: bold;
			color: #ffc103;
			margin-top: 25rpx;
			margin-bottom: 45rpx;
		}
		.tpRight {
			display: flex;
			justify-content: flex-end;
			.textBox {
				background: #d7272b;
				border-radius: 99rpx 0px 0px 99rpx;
				padding: 10rpx;
				padding-left: 20rpx;
				font-size: 25rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.endTextBox {
			padding: 0 84rpx;
			margin-bottom: 32rpx;
			.leftLine,
			.rightLine {
				border-bottom: 1rpx solid #d7272b;
				flex-grow: 1;
				position: relative;
				.roundness {
					position: absolute;
					top: -5rpx;
					height: 10rpx;
					width: 10rpx;
					background-color: #d7272b;
					border-radius: 99rpx;
				}
			}
			.leftLine {
				.roundness {
					right: 0;
				}
			}
			.rightLine {
				.roundness {
					left: 0;
				}
			}
			.textLine {
				padding: 0 20rpx;
			}
		}
		.input {
			padding: 0 30rpx;
			margin: 50rpx 30rpx;
			margin-bottom: 20rpx;
			background: #ebebeb;
			border-radius: 30rpx;
		}
		.tabsBox {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ebebeb;
			margin-bottom: 50rpx;
		}
		.itemList {
			flex-wrap: wrap;
			justify-content: start;
			padding: 0 15rpx;
			.itemData {
				width: 50%;
				flex-grow: 0;
				flex-shrink: 0;
				padding: 0 15rpx;
				margin-bottom: 30rpx;
				.itemContentBox {
					padding: 0 15rpx;
					.itemImgbox {
						width: 100%;
						padding-top: calc(100% - 30rpx);
						position: relative;
						margin-bottom: 20rpx;
						.itemAddress {
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							background: #262626;
							opacity: 0.6;
							color: #ffffff;
							font-size: 24rpx;
							padding: 10rpx 0;
							text-align: center;
						}
						.itemImg {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
						}
						.iconBox {
							padding-top: 10rpx;
							position: absolute;
							top: -18rpx;
							left: -18rpx;
							height: 73rpx;
							width: 62rpx;
							z-index: 99;
							background-image: url(../static/img/img07.png);
							background-size: 100% 100%;
							color: #ffffff;
							font-size: 24rpx;
							text-align: center;
						}
					}
					.itemNameBox {
						margin-bottom: 20rpx;
						font-size: 30rpx;
						font-weight: bold;
						.itemName {
							color: #333333;
						}
						.itemVote {
							color: #d7272b;
						}
					}
				}
				.itemBottom {
					background: #ffc103;
					color: #ffffff;
					font-size: 30rpx;
					padding: 15rpx;
					text-align: center;
				}
			}
		}
		.phItemList {
			padding: 0 30rpx;
			margin-top: -50rpx;
			.phItem {
				padding: 20rpx 0;
				.icon {
					flex-shrink: 0;
					width: 50rpx;
					.tipImg {
						width: 42rpx;
					}
					.tipText {
						color: #d7272b;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
				.phRightBox {
					flex-grow: 1;
					border-bottom: 1px solid #ebebeb;
					padding: 20rpx 0;
					.avatarBox {
						flex-shrink: 0;
						.avatarImg {
							width: 96rpx;
							height: 96rpx;
							border-radius: 99rpx;
							margin-left: 10rpx;
						}
					}
					.phTextBox {
						flex-grow: 1;
						margin-left: 15rpx;
						.phTtemName {
							color: #333333;
							font-size: 32rpx;
						}
						.phItemAddress {
							color: #999999;
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
					.phRight {
						flex-shrink: 0;
						text-align: right;
						justify-content: right;
						.textVote {
							color: #ffbb17;
							font-size: 36rpx;
							font-weight: bold;
							margin-right: 13rpx;
						}
						.phTipImg {
							width: 23rpx;
							height: 39rpx;
						}
					}
				}
			}
		}
	}
}
/deep/ .u-countdown-item {
	padding: 10rpx;
	border-radius: 8rpx;
	overflow: hidden;
}
.alertBox {
	padding-bottom: 40rpx;
	.titleImg {
		width: 100%;
		z-index: -1;
	}
	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-top: -80rpx;
	}
	.titleTip {
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #808080;
	}
	.lxTtem {
		margin: 0 40rpx;
		padding: 30rpx 0;
		border-bottom: 1px solid #ebebeb;
		.leftTitle {
			justify-content: start;
			width: 43rpx;
			flex-grow: 1;
			color: #333333;
			font-size: 28rpx;
			.leftImgTip {
				flex-shrink: 0;
				// width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
		.rightTip {
			border: 1px solid #d7272b;
			opacity: 0.5;
			border-radius: 50%;
			width: 32rpx;
			height: 32rpx;
			justify-content: center;
			.xzTip {
				width: 20rpx;
				height: 20rpx;
				border-radius: 99rpx;
				background-color: #d7272b;
			}
		}
	}
	.pushtyle {
		background: #d7272b;
		box-shadow: 0px 16rpx 16rpx 0px rgba(215, 39, 43, 0.5);
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		padding: 20rpx 0;
		margin: 0 40rpx;
		margin-top: 40rpx;
	}
}
</style>