activitys-uniapp/components/alert/votePopup.vue

<template>
	<view>
		<u-popup v-model="show" mode="bottom" width="100%" height="750" border-radius="15" :closeable="true">
			<view class="padding-30">
				<view class="padding-top-20 text-bold text-xl">投票助力</view>
				<view class="padding-top-10 padding-bottom-10"
					style="color: #353535;font-size: 22rpx;font-family: PingFang-SC-Medium;line-height: 42rpx;">
					中国移动用户可使用移动积分兑换活力道具，兑换后可获得移动为你发起{{gitfs[selected].activeVote}}
					人助力和{{vuex_active_setting.voteAndPointRate*gitfs[selected].activeVote}}个普法积分（可用于积分商城兑换商品），快为喜爱的作品加油助力吧
				</view>
				<scroll-view style="white-space: nowrap;" :scroll-x="true">
					<view v-for="(item,index) in gitfs" :key="index" class="gift-item">
						<view @click.stop="selected = index;count = index" class="padding-20"
							:class="{'icon-box': true,'selected': index ==  selected}">
							<image mode="aspectFit" class="gift-img" :src="item.imgUrl"></image>
							<view class="gift-name">{{item.name}}</view>
						</view>
						<view style="color: #999999;font-size: 20rpx;text-align: center;padding-top: 10rpx;">
							{{item.activeVote==0? '剩余免费次数':'剩余次数'}} {{item.remainCount}}</view>
					</view>
				</scroll-view>

				<view class="handle-bar">
					<view v-if="pointNum>=0" class="text-center padding-bottom-20" style="color: #0A9FEF;">您目前的移动积分：
						{{pointNum}}</view>
					<view v-else class="text-center padding-bottom-20" style="color: #0A9FEF;">您目前的移动积分 <u-loading
							style="margin: 10rpx;" mode="circle"></u-loading>
					</view>
					<view class="button-bar">
						<view class="button-r">
							<u-count-to v-if="show" color="#E72226" start-val="0" :end-val="gitfs[selected].point"
								:duration="500"></u-count-to>
							<span class="info">移动积分</span>
						</view>
						<view class="button-f" @click="toVote">点击投票</view>
					</view>
				</view>
			</view>
		</u-popup>
		<point-auth ref="pointAuth" ></point-auth>
		<loading ref="loading" type="3" />
	</view>
</template>

<script>
	import pointAuth from '../../components/alert/pointAuth.vue'
	export default {
		name: "votePopup",
		components: {
			pointAuth
		},
		data() {
			return {
				productId:0,
				show: false,
				selected: 0,
				count: 0,
				pointNum: 0,
				gitfs: [],
			};
		},
		methods: {
		   async pointAuthClose(){
				this.$refs.loading.hide()
				await this.fetchGiftsData()
				this.show=true
				console.log(this.gitfs[this.selected].point);
			},
			async showVote(mobile,productId) {
				this.productId=productId
				this.$refs.loading.showLoading("礼物获取中")
				let params = {
					mobile
				}
				let isCmcc=await this.checkIsCmcc()
				if (isCmcc) {
					const queryRes = (await this.$api.CMCC.queryCmccPoint(this.$u.queryParams(params)));
					if (queryRes.data.data.resultCode == '0001') {
						this.$refs.pointAuth.showAuth(queryRes.data.data.data);
						this.$refs.loading.hide()
						return;
					}
					const pointDetail = JSON.parse(queryRes.data.data.data);
					this.pointNum = pointDetail['points'];
				}
				await this.fetchGiftsData()
				this.$refs.loading.hide()
				this.show = true;
			},
			async fetchGiftsData(){
				let data = {
					productId:this.productId,
					userId: this.vuex_userId,
					current: 1,
					size: 99
				}
				const res = await this.$api.activity.getGiftList(data);
				this.gitfs = res.data.data.records;
				console.log(this.gitfs,"/**//**/");
			},
			hideVote() {
				this.show = false;
			},
			toVote() {
				let item=this.gitfs[this.selected]
				
				if (this.pointNum==0 && item.point !=0) {
					this.$u.toast('您无可用移动积分')
					return
				}
				// if (item.remainCount == 0) {
				// 	this.$u.toast('今天已无该道具兑换次数')
				// 	return
				// }
				this.$emit('toVote', this.gitfs[this.selected])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gift-item {
		width: 150rpx;
		height: 250rpx;
		margin: 12rpx;
		// box-shadow: 0rpx 2rpx 2rpx 2rpx #DDDDDD;
		// background: #007AFF;
		display: inline-block;

		.icon-box {
			width: 150rpx;
			height: 200rpx;
			border: 1rpx solid #DDDDDD;
			box-shadow: 3rpx 3rpx 4rpx rgba(26, 26, 26, 0.2);
			border-radius: 10rpx;
		}

		.gift-img {
			width: 100rpx;
			height: 100rpx;
			border: 1rpx dashed #DDDDDD;
			padding: 10rpx;
			transition: border 0.5s;
			border: 0 solid transparent;
		}

		.selected {
			border: 2rpx solid #E72226;
		}

		.selected::before {
			content: "";
			position: absolute;
			margin-top: 147rpx;
			margin-left: 97rpx;
			border-radius: 5rpx 0 0 0;
			height: 30rpx;
			width: 30rpx;
			background: url(../../static/icon/selected.png) no-repeat center/22rpx red;
		}

		.gift-name {
			font-size: 22rpx;
			color: #353535;
			padding-top: 10rpx;
		}

	}

	.handle-bar {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		padding-bottom: 80rpx;

		.button-bar {
			width: 80%;
			height: 80rpx;
			border: 2rpx solid #E72226;
			margin: auto;
			border-radius: 100rpx;
			display: flex;

			.button-f {
				flex-basis: 50%;
				color: white;
				display: flex;
				font-size: 30rpx;
				justify-content: center;
				align-items: center;
				background: #E72226;
				border-radius: 0 100rpx 100rpx 0;
			}

			.button-r {
				color: #E82E3E;
				font-weight: 800;
				flex-basis: 50%;
				display: flex;
				font-size: 40rpx;
				justify-content: center;
				align-items: center;

				.info {
					color: #AAAAAA;
					font-weight: 500;
					margin-left: 15rpx;
					font-size: 22rpx;
				}
			}
		}
	}
</style>