myjtp/pages/activity/userInfo.vue

<template>
	<view class="container">
		<view class="contentBox">
			<view class="btoomBg"></view>
			<view class="topBg">
				<image class="topImg" src="../../static/img/img08.png" mode="widthFix"></image>
				
				<view class="tpConent">
					<view class="titleUser">
						<text>{{chargeUserItem.sub_id}}号</text>
						<test style='margin-left: 0.5em;'></test>
						<text>{{chargeUserItem.name}}</text>
					</view>
					<view class="userType flex">
						<image class="typeIcon" src="../../static/img/userinfoLeft.png" mode="widthFix"></image>
						<view class="typeItem">
						{{chargeUserItem.job}}
						</view>
						<image class="typeIcon"  src="../../static/img/userinfoRight.png" mode="widthFix"></image>
					</view>
					<view class="tip">
						正在参加：“2022年度明星母婴工作者颖川杯海选赛”评选邀您来投票
					</view>
					<view class="tjContent borderV flex">
						<view class="tjItem">
							<view class="topText">
								{{ chargeUserItem.vote }}
								<text class="iconTip"></text>
							</view>
							<view class="bottomText">投票</view>
						</view>
						<view class="tjItem">
							<view class="topText">
								{{ chargeUserItem.rank }}
								<text class="iconTip"></text>
							</view>
							<view class="bottomText">排名</view>
						</view>
					</view>
					<view class="userImg">
						<view class="imgBox">
						<image class="img" :src="chargeUserItem.avatar" mode="scaleToFill"></image>
						<view class="company clamp" v-if="chargeUserItem.type==2">
							{{chargeUserItem.company}}
						</view>
						</view>
					</view>
					<view class="detail borderV">
						个人介绍
					</view>
					<view class="detailText">
						{{chargeUserItem.detail}}
					</view>
				</view>
			</view>
		</view>
		<view class="alertAddBox flex">
			<view class="textAlertBox">
				<view class="psBox">
					<image class="psImgIcon" src="../../static/img/alertPIcon.png" mode="widthFix"></image>
					<text>{{ myVote }}</text>
				</view>
				<view>剩余票数</view>
			</view>
			<view class="addUser" @click="chargeConfirm">给TA投票</view>
		</view>
		<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 voteNumList" @click="moneyIndex = ind">
						<view class="chargeImgIcon">{{ ls.num }}票</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>{{ ls.num }}</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">￥{{ payMoneyNum }}</text>
						<text class="tip">可为选手加{{ voteNumList[moneyIndex].num }}票</text>
					</view>
					<view class="right" @click="payLoding ? false : commitCharge()">赠送</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import { ptDetail, rechargeWechat, getItemInfo,ptPush } from '@/api/tp.js';
import weixinObj from '@/plugin/jweixin-module/index.js';
import { shareLoad } from '@/utils/wxAuthorized.js';
import { share } from '@/api/wx';
export default {
	data() {
		return {
			// 投票数列表
			voteNumList: [
				{
					num: 1
				},
				{
					num: 3
				},
				{
					num: 5
				},
				{
					num: 10
				},
				{
					num: 20
				},
				{
					num: 50
				},
				{
					num: 100
				},
				{
					num: 200
				}
			],
			moneyIndex: 0, //当前选中的投票对象
			showCharge: false, //显示投票弹窗
			priceBl: 1, //默认1票对应金额投票比例
			chargeUserItem: {}, //当前选中的投票对象
			dayFree: '', //可投票数
			dayFreeVote: '', //已投票数
			payLoding: false, //是否微信充值
			activtyName: '', //活动标题
			erweima: '', //首页分享二维码
			uid: ''
		};
	},
	computed: {
		// 我剩余可投票数
		myVote() {
			return this.dayFree - this.dayFreeVote;
		},
		// 需要支付的金额
		payMoneyNum() {
			return this.voteNumList[this.moneyIndex].num * this.priceBl;
		}
	},
	onLoad(res) {
		// 保存当前用户信息
		this.uid = res.id;
		// 获取参赛用户信息
		this.getItemInfo();
	},
	onShow() {
		this.init();
	},
	methods: {
		loadShare() {
			// 请求获取默认数据
			shareLoad({
				link: window.location.href, // 分享链接
				imgUrl: this.chargeUserItem.avatar,
				desc:this.chargeUserItem.detail,
				title: this.chargeUserItem.name+'需要您的助力！',
			});
		},
		init() {
			this.ptDetail();
		},
		getItemInfo() {
			// 获取用户信息
			getItemInfo({}, this.uid)
				.then(e => {
					this.chargeUserItem = e.data.data;
					this.loadShare();
					console.log(e);
				})
				.catch(e => {
					console.log(e);
				});
		},
		//开始投票
		async commitCharge() {
			// 创建对象
			let payType, num;
			// 判断是否有剩余投票次数
			if (this.myVote > 0) {
				payType = 'free';
				num = 1;
			} else {
				payType = 'yue';
				num = this.voteNumList[this.moneyIndex].num;
				await this.payMoney();
			}
			uni.showLoading({
				title: '投票中',
				mask: true
			});
			ptPush(
				{
					num,
					payType
				},
				this.chargeUserItem.id
			)
				.then(e => {
					uni.hideLoading();
					if (e.msg == '余额支付成功' || e.msg == '投票成功') {
						uni.showToast({
							title: '投票成功!'
						});
						// 修改当前用户获得的票数
						this.chargeUserItem.vote += num;
						if (e.msg == '投票成功') {
							// 修改当前可投票数
							this.dayFree -= num;
						}
					} 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();
				});
		},
		// 调用微信支付
		payMoney() {
			let obj = this;
			return new Promise((ok, err) => {
				if (obj.payLoding) {
					return;
				}
				obj.payLoding = true;
				rechargeWechat({ price: this.payMoneyNum, from: 'weixin' })
					.then(e => {
						let da = e.data.data;
						console.log(da);
						console.log(weixinObj, 'weixinObj');
						try {
							weixinObj.ready(() => {
								weixinObj.chooseWXPay({
									timestamp: da.timestamp,
									nonceStr: da.nonceStr,
									package: da.package,
									signType: da.signType,
									paySign: da.paySign,
									success: function(res) {
										console.log(res);
										ok(true);
									},
									fail: function(res) {
										console.log(res);
										err(false);
									}
								});
							});
						} catch (e) {
							console.log(e);
						}
						obj.payLoding = false;
					})
					.catch(e => {
						obj.payLoding = false;
					});
			});
		},
		// 投票弹窗
		chargeConfirm() {
			// 判断是否还有剩余投票次数
			if (this.myVote <= 0) {
				uni.showToast({
					title: '已无免费票数'
				});
				// this.showCharge = true;
			} else {
				this.commitCharge();
			}
		},
		// 请求返回项目数据
		ptDetail() {
			ptDetail()
				.then(e => {
					const data = e.data;
					this.priceBl = +data.price;
					this.dayFree = data.day_free; //可投免费票数
					this.dayFreeVote = data.today_free_vote_num; //已投免费	票数
					this.activtyName = data.title;
				})
				.catch(e => {
					console.log();
				});
		},
		// 页面跳转
		nextTo(url) {
			console.log(url, '跳转地址');
			uni.navigateTo({
				url,
				fail: e => {
					console.log(e);
				}
			});
		}
	}
};
</script>
<style lang="scss">
page,
.container {
	height: auto;
	min-height: 100%;
	background-color: #ff9ba7;
}
.container {
	padding-top: 50rpx;
	padding-bottom: 130rpx;
	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;
		}
	}
}
.alertAddBox {
	background: #ff9ba7;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 30rpx;
	z-index: 1;
	.textAlertBox {
		flex-shrink: 0;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		padding-right: 20rpx;
		.psBox {
			font-size: 40rpx;
			font-weight: bold;
			.psImgIcon {
				margin-right: 10rpx;
				width: 30rpx;
			}
		}
	}
	.addUser {
		flex-grow: 1;
		background: #d7272b;
		border: 1px solid #170911;
		border-radius: 7px;
		line-height: 1;
		font-size: 31rpx;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		padding: 30rpx;
		line-height: 24rpx;
	}
}
.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;
		min-height: 100%;
		.leftIcon {
			position: absolute;
			top: 30rpx;
			left: -30rpx;
			width: 100rpx;
		}
		.tpConent {
			background: #ffffff;
			line-height: 1;
			min-height: 50vh;
			padding-top: 15px;
			padding-bottom: 11px;
			.detail{
					color: #333333;
					font-size: 32rpx;
					text-align: center;
					font-weight: bold;
					padding: 30rpx 0;
			}
			.detailText{
				line-height: 1.5;
				padding: 30rpx;
				color: #666666;
			}
			.userImg{
				padding: 40rpx 30rpx;
				text-align: center;
				.imgBox{
					position: relative;
					width: 100%;
					padding-top: 100%;
					.img{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
					.company{
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						background: #262626;
						opacity: 0.6;
						color: #ffffff;
						font-size: 30rpx;
						padding: 10rpx 0;
						text-align: center;
						line-height: 1.5;
						
					}
				}
				
			}
			.tip{
				color: #333333;
				text-align: center;
				font-size: 26rpx;
				font-weight: bold;
				padding:30rpx ;
				line-height: 1.5;
			}
			.userType{
				color:#FFC103 ;
				font-weight: bold;
				padding-top: 32rpx;
				justify-content: center;
				.typeIcon{
					width:120rpx ;
				}
				.typeItem{
					padding:  0 1em;
				}
			}
			.titleUser{
				padding-top: 50rpx;
				color:#d7272b;
				font-size: 50rpx;
				font-weight: bold;
				text-align: center;
			}
			.borderV{
				border-top: 1px solid #f3f3f3;
				border-bottom: 1px solid #f3f3f3;
			}
			.tjContent {
				margin-top: 10rpx;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				justify-content: space-around;
				text-align: center;
				
				.tjItem {
					.topText {
						font-size: 50rpx;
						font-weight: bold;
						color: #d7272b;
						.iconTip {
							font-size: 20rpx;
						}
					}
					.bottomText {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}
	}
}
/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>