activitys-uniapp/components/alert/votePopup.vue

<template>
	<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: #888888;font-size: 22rpx;" >
				中国移动用户可使用移动积分兑换活力道具，兑换后可获得移动为你发起{{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;">剩余免费次数</view>
				</view>
			</scroll-view>
			
			<view class="handle-bar">
				<view class="text-center padding-bottom-20" style="color: #0A9FEF;">您目前的移动积分</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">点击投票</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"votePopup",
		data() {
			return {
				show: false,
				selected: 0,
				count: 1000,
				gitfs: [],
			};
		},
		
		methods: {
			async showVote(){
				const res = await this.$api.activity.getGiftList({current: 1,size: 99});
				this.gitfs = res.data.data.records;
				this.show = true;
			},
			hideVote(){
				this.show = false;
			}
		}
	}
</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>