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
					style="color: #888888;font-size: 22rpx;font-family: PingFang-SC-Medium;line-height: 36rpx;padding: 20rpx 0;">
					{{voteContent()}}
				</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 text-cut-1">{{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>
		<toast ref="toast"></toast>
		<point-auth ref="pointAuth"></point-auth>
		<!-- #ifdef MP-WEIXIN -->
		<loading ref="loading" type="3" />
		<!-- #endif -->
	</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: [],
			};
		},
		computed: {
			voteContent() {
				return data => {
					if (this.gitfs[this.selected] && this.gitfs[this.selected].content) {
						return this.gitfs[this.selected].content
					}
					return ''
				}
			}
		},
		methods: {
			hideLoading() {
				// #ifdef MP-WEIXIN
				this.$refs.loading.hide()
				// #endif
				// #ifndef MP-WEIXIN
				uni.hideLoading()
				// #endif
			},
			showLoading() {
				// #ifdef MP-WEIXIN
				this.$refs.loading.showLoading("礼物获取中")
				// #endif
				// #ifndef MP-WEIXIN
				this.$dialog.showLoading('礼物获取中')
				// #endif
			},
			async pointAuthClose() {
				this.hideLoading()
				await this.fetchGiftsData()
				this.show = true
				console.log(this.gitfs[this.selected].point);
			},
			async showVote(mobile, productId, activeId) {
				this.productId = productId
				this.activeId = activeId
				this.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') {
						//去授权，保存作品id，方便跳转回来
						this.$cache.put('productId', this.productId)
						this.$refs.pointAuth.showAuth(queryRes.data.data.data);
						this.hideLoading()
						return;
					}
					const pointDetail = JSON.parse(queryRes.data.data.data);
					this.pointNum = pointDetail['points'];
				}
				await this.fetchGiftsData()
				this.hideLoading()
				this.show = true;
			},
			async checkIsCmcc() {
				if (this.$isEmpty(this.vuex_phone)) {
					return
				}
				let params = {
					phone: this.vuex_phone
				}
				// #ifdef MP-WEIXIN
				let res = await this.$api.CMCC.isCMCC(params)
				// #endif

				// #ifdef H5
				let res = await this.$api.CMCC.h5IsCMCC(params)
				// #endif

				console.log(res, "res....");
				return res.data.data
			},
			async fetchGiftsData() {
				let data = {
					activeId: this.activeId,
					productId: this.productId,
					userId: this.vuex_userId,
				}
				const res = await this.$api.activity.getGiftList(data);
				this.gitfs = res.data.data;
			},
			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) {
					uni.showToast({
						duration: 2300,
						title: "您今日的助力票数已用完，每天0点后恢复。请继续助力您喜爱的作品!",
						icon: "none"
					})
					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>