2021-7-213

api/tp.js

@@ -23,6 +23,15 @@ export function ptJoin(data) {
 		data
 	});
 }
+// 投票用户信息
+export function getItemInfo(data,uid) {
+	return request({
+		url: '/api/vote/join/detail/'+uid,
+		method: 'get',
+		data
+	});
+}
+
 // 我要报名
 export function pushJoin(data) {
 	return request({
@@ -39,3 +48,4 @@ export function rechargeWechat(data) {
 		data
 	});
 }
+

pages.json

@@ -85,6 +85,17 @@
 			"style": {
 				"navigationBarTitleText": "活动规则"
 			}
+		},
+		{
+			"path": "pages/activity/userInfo",
+			"style": {
+				"navigationBarTitleText": "2021届寻找明星母婴服务人员海选赛",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
 		}
 
 	],

pages/activity/userInfo.vue

@@ -0,0 +1,655 @@
+<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">
+						正在参加2021寻找“明星产康师”“明星母乳喂养指导师” 评选邀您来投票
+					</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) {
+				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>

pages/index.vue

@@ -8,6 +8,12 @@
 				<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="erweima">
+						<image :src="erweima" mode=""></image>
+					</view>
+					<view class="Etitle">
+						识别母婴健康专委会公众号查看中奖详情
+					</view>
 					<view class="tpTitle">评选活动</view>
 					<view class="endTextBox flex">
 						<view class="leftLine"><view class="roundness"></view></view>
@@ -66,7 +72,7 @@
 					<!-- 最新 -->
 					<view v-if="rank == 0" class="itemList flex">
 						<view class="itemData" v-for="item in userlist.list">
-							<view class="itemContentBox">
+							<view class="itemContentBox" @click="nextTo('/pages/activity/userInfo?id='+item.id)">
 								<view class="itemImgbox">
 									<view class="iconBox">
 										<view>{{ item.sub_id }}</view>
@@ -280,14 +286,14 @@ export default {
 			showAlert: false, //显示参赛弹窗
 			showCharge: false, //显示投票弹窗
 			moneyIndex: 0, //当前选中的投票对象
-			numCharge: 1, //默认对应翻倍比例
 			priceBl: 1, //默认1票对应金额投票比例
 			chargeUserItem: {}, //当前选中的投票对象
 			timeStop: false, //判断倒计时是否结束
 			dayFree: '', //可投票数
 			dayFreeVote: '', //已投票数
 			payLoding: false, //是否微信充值
-			activtyName: '' //活动标题
+			activtyName: '', //活动标题
+			erweima: '',//首页分享二维码
 		};
 	},
 	computed: {
@@ -339,6 +345,10 @@ export default {
 		loadShare() {
 			// 请求获取默认数据
 			shareLoad();
+			share({}).then(({data}) =>{
+				console.log(data,'fengxiang')
+				this.erweima = data.data.qr
+			})
 		},
 		init() {
 			this.ptDetail();
@@ -758,6 +768,20 @@ page,
 			min-height: 50vh;
 			padding-top: 28rpx;
 			padding-bottom: 20rpx;
+			.erweima {
+				width: 300rpx;
+				height: 300rpx;
+				margin: 0 auto;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.Etitle {
+				margin-top: 20rpx;
+				text-align: center;
+				font-size: 24rpx;
+			}
 		}
 		.down {
 			text-align: center;
@@ -789,7 +813,7 @@ page,
 			font-size: 48rpx;
 			font-weight: bold;
 			color: #ffc103;
-			margin-top: 25rpx;
+			margin-top: 50rpx;
 			margin-bottom: 45rpx;
 		}
 		.tpRight {
@@ -862,7 +886,7 @@ page,
 					padding: 0 15rpx;
 					.itemImgbox {
 						width: 100%;
-						padding-top: calc(100% - 30rpx);
+						padding-top: 100%;
 						position: relative;
 						margin-bottom: 20rpx;
 						.itemAddress {

unpackage/dist/build/h5/index.html

@@ -1,2 +1,2 @@
 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>我要投票</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.3e73f18a.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.15e3626f.js></script><script src=/index/static/js/index.7a40d4a5.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/index/static/index.3e73f18a.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/index/static/js/chunk-vendors.15e3626f.js></script><script src=/index/static/js/index.b0f9a339.js></script></body></html>