xwc/pages/integral/integral.vue

<template>
	<view>
		<hua-pageBg></hua-pageBg>
		<view class="wrapper">
			<view class="page-head d-flex justify-content-between align-items-center">
				<router-link to="/pages/integral/details">
					<view class="record">券明细</view>
				</router-link>
				<view class="title text-center">券商城</view>
				<router-link to="/pages/integral/rules">
					<view class="rule">规则</view>
				</router-link>
			</view>
			<view class="djs" v-if="isshow != 0">
				<view class="djs-main" v-if="isshow ==1">释放券倒计时：{{ countdown_time }}</view>
				<view class="djs-main" v-if="isshow ==2">释放券倒计时：已过期</view>
			</view>
			<view class="integral">
				<view class="top d-flex align-items-center">
					<view class="item d-flex align-items-center">
						<image src="../../static/jifen/jb.png" mode="heightFix"></image>
						<text class="num">{{ userInfo.user_integral ? userInfo.user_integral : 0 }}</text>
					</view>
					<view class="item d-flex align-items-center">
						<image src="../../static/jifen/nl.png" mode="heightFix"></image>
						<text class="num">{{ userInfo.energy ? userInfo.energy : 0 }}</text>
						<view class="status" v-if="userInfo.is_energy && userInfo.is_energy == 1">已激活</view>
						<view class="status" v-else>未激活</view>
					</view>
				</view>
				<view class="wrap bg-white">
					<!-- <view class="today">
						今日券抵用券兑换比例：
						<text>100券={{ (this.appConfig.energyprice * 100).toFixed(5) }}抵用券</text>
					</view>

					<view class="trans_num text-center">
						1抵用券 =
						<text>{{ this.appConfig.energyprice }}券</text>
					</view> -->

					<!-- <view class="title">
						券兑换抵用券
					</view>
					<view class="sub">
						券兑换抵用券即可免费获得商品
					</view>
					<view class="transformation d-flex align-items-center justify-content-between">
						<view class="int-item d-flex align-items-center">
							<image src="../../static/jifen/jb.png" mode="heightFix"></image>
							<input type="text" placeholder="输入券值" v-model="intergral" @input="onInput">
						</view>
						<image src="../../static/jifen/dy.png" mode="widthFix" class="dy"></image>
						<view class="int-item d-flex align-items-center">
							<image src="../../static/jifen/nl.png" mode="heightFix"></image>
							<input type="text" placeholder="换算抵用券" disabled="true" v-model="energy">
						</view>
					</view>
					<view class="submit" @tap="exchange">
						立即兑换
					</view>
					<view class="tips">
						券兑换抵用券计算公式
					</view> -->

					<view class="task-wrap">
						<view class="title">做任务领券</view>
						<view class="task-list d-flex justify-content-between align-items-center"
							v-if="!userInfo.is_energy || userInfo.is_energy == 0">
							<view class="logo">
								<image src="../../static/jifen/icon4.png" mode=""></image>
							</view>
							<view class="cont">
								<view class="tit">激活抵用券</view>
								<view class="desc">购买爆单区商品即可激活抵用券</view>
							</view>
							<view class="btn" @click="toExplosive">去激活</view>
						</view>
						<router-link :to="{ path: item.url }"
							class="task-list d-flex justify-content-between align-items-center"
							v-for="(item, index) in taskList" :key="index">
							<view class="logo">
								<image :src="item.logo" mode=""></image>
							</view>
							<view class="cont">
								<view class="tit">{{ item.title }}</view>
								<view class="desc">{{ item.desc }}</view>
							</view>

							<view class="btn">去看看</view>
						</router-link>
					</view>
				</view>
			</view>
			<view class="container">
				<!-- 	<view class="one-list">
					<u-sticky>
					  <u-tabs :list="oneList" lineColor="#F8352B" :activeStyle="{color: '#F8352B',fontWeight: 'bold',}" lineWidth="40" lineHeight="4"></u-tabs>
					</u-sticky>
				</view> -->
				<view class="energy-product">
					<mescroll-body ref="mescrollRef" :height="400" :up="{
							noMoreSize: 10,
							empty: {
								icon: '/static/images/order_null.png',
								tip: '暂无更多内容~',
								fixed: false
							}
						}" @init="mescrollInit" @down="downCallback" @up="upCallback">
						<hua-power-product :data="productList"></hua-power-product>
					</mescroll-body>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiEnergy,
		exchangeEnergy,
		getGoodsDiscountList
	} from '@/api/shop.js';
	import {
		getUser
	} from '@/api/user.js'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	const app = getApp();
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				taskList: [{
						logo: '../../static/jifen/icon.png',
						title: '购买商品立即获取券',
						desc: '购买商品立即获取券',
						url: '/pages/goods_explosive/goods_explosive'
					},
					{
						logo: '../../static/jifen/icon2.png',
						title: '看视频立即获取券',
						desc: '看视频立即获取券',
						url: '/pages/ad-video/ad-video'
					},
					{
						logo: '../../static/jifen/icon3.png',
						title: '商家赠送立即获取券',
						desc: '商家赠送立即获取券',
						url: '/pages/user/energy-transfer?type=2'
					}
				],
				oneList: [],
				productList: [],
				intergral: '',
				energy: '',
				info: '',
				isshow: 0,
				countdown_time: '',
				timers: ''
			};
		},
		onShow() {
			this.getInfo()
			// this.getGoods()
		},
		onHide() {
			clearTimeout(this.timers);
		},
		// 监听页面卸载
		onUnload() {
			// 关闭倒计时
			clearTimeout(this.timers);
		},
		// 监听页面后退
		onBackPress() {
			// 关闭倒计时
			clearTimeout(this.timers);
		},
		methods: {

			onInput(e) {
				console.log(e.detail);
				this.energy = e.detail.value * this.appConfig.energyprice;
			},
			getInfo() {
				const obj = this
				getUser().then(e => {
					this.info = e.data
					let data = new Date();
					let newTime = data.getTime();
					console.log(this.info, '123456');
					if (this.info.level > 0) {
						obj.isshow = 1
						if ((this.info.activity_time + 30 * 24 * 60 * 60) * 1000 < newTime) {
							obj.isshow = 2
						} else {
							obj.counTime()
						}
					}
				})
			},
			counTime() {
				//获取当前时间
				let data = new Date();
				let newTime = data.getTime();
				//结束时间
				let end = this.info.activity_time + 30 * 24 * 60 * 60;
				//时间差
				let leftTime = end * 1000 - newTime;
				console.log(leftTime);
				if (leftTime <= 0) {
					this.isshow = 2
					console.log('已结束');
					return;
				}
				//定义保存倒计时时间
				let d, h, m, s;
				if (leftTime >= 0) {
					d = Math.floor(leftTime / (1000 * 60 * 60 * 24))
					h = Math.floor((leftTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
					m = Math.floor((leftTime / 1000 / 60) % 60);
					s = Math.floor((leftTime / 1000) % 60);
					console.log(m, s);
					//倒计时赋值view
					this.countdown_time = `${d}天${h}时${m}分${s}秒`;
					this.timers = setTimeout(this.counTime, 1000);
				}
			},
			toExplosive() {
				uni.navigateTo({
					url: '/pages/goods_explosive/goods_explosive'
				});
			},

			async exchange() {
				console.log(this.userInfo.is_energy);

				// if(this.intergral == ''){
				// 	uni.showToast({
				// 		title:"请输入券数量",
				// 		icon:"none"
				// 	})
				// 	return;
				// }

				// if(this.userInfo.is_energy != 1){
				// 	uni.showToast({
				// 		title:'请先激活抵用券',
				// 		icon:"none"
				// 	})
				// 	return;
				// }

				// const {
				// 	data,
				// 	code
				// } = await exchangeEnergy({
				// 	num:this.intergral
				// })
				// if(code == 1){
				// 	console.log(data)
				// 	uni.showToast({
				// 		title:data.msg
				// 	})
				// 	this.getUser()
				// }
			},
			// async getGoods() {
			// 	const {
			// 		code,
			// 		data
			// 	} = await getGoodsDiscountList({
			// 		page_no: this.formData.page_no,
			// 		page_size: this.formData.page_size
			// 	})
			// 	if (code == 1) {
			// 		this.productList = data.lists
			// 	}
			// 	console.log(data)
			// },

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				getGoodsDiscountList({
						page_no: num,
						page_size: size
					})
					.then(({
						data,
						code
					}) => {
						if (code != 1) return this.mescroll.endErr();
						if (num === 1) this.productList = [];
						this.productList = [...this.productList, ...data.lists];
						this.mescroll.endSuccess(data.lists.length, !!data.more);
					})
					.catch(err => {
						this.mescroll.endErr();
					});
			}
		},
		computed: {
			...mapGetters(['appConfig', 'userInfo'])
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 0 24rpx;
	}

	.wrapper {
		position: relative;
		z-index: 2;
	}

	.page-head {
		padding: 0 24upx;
		height: 80upx;
		font-size: 28upx;
		position: relative;

		.title {
			font-size: 32upx;
			font-weight: bold;
			flex: 1;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.integral {
		padding: 0 30upx;
		box-sizing: border-box;

		.top {
			background: url('https://shop.xianghuaqi.net.cn/images/bg.png') no-repeat;
			height: 100upx;
			padding: 0 30upx 20upx;
			background-size: 100%;

			image {
				height: 48upx;
			}

			.item {
				margin-right: 30upx;

				text {
					font-family: Impact;
					font-size: 48upx;
					margin-left: 10upx;
					color: #904c18;
				}

				&:last-child text {
					color: #1c80eb;
				}

				.status {
					background-color: #fff;
					border-radius: 18rpx;
					color: #3992f8;
					font-size: 20rpx;
					padding: 0 16rpx;
					margin-left: 20rpx;
				}
			}
		}

		.wrap {
			padding: 30upx 24upx;
			box-sizing: border-box;
			border-radius: 20upx;
			margin-top: -20upx;

			.trans_num {
				font-size: 36rpx;
				font-weight: bold;

				text {
					color: #f73e33;
				}
			}

			.today {
				background: #f2f8ff;
				border-radius: 12upx;
				font-size: 24upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				margin-bottom: 20upx;

				text {
					color: #2b89f2;
				}
			}

			.title {
				font-weight: 700;
				font-size: 36upx;
				color: #040404;
				line-height: 50upx;
			}

			.sub {
				line-height: 40upx;
				font-size: 24upx;
				font-weight: 400;
				color: #aaaaaa;
			}

			.transformation {
				margin: 30upx auto 56upx;

				.int-item {
					background-color: #f7f8fa;
					width: 280upx;
					height: 100upx;
					border-radius: 12upx;
					padding-left: 40upx;
					box-sizing: border-box;

					image {
						height: 34upx;
					}

					input {
						color: #aaaaaa;
						font-size: 28upx;
						margin-left: 10upx;
						flex: 1;
					}
				}

				.dy {
					width: 40upx;
				}
			}

			.submit {
				background: linear-gradient(142deg, #f16d60 0%, #f8352b 100%);
				width: 384upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				color: #fff;
				margin: 0 auto;
				border-radius: 42upx;
			}

			.tips {
				color: #aaaaaa;
				margin-top: 12upx;
				font-size: 24upx;
				text-align: center;
			}

			.task-wrap {
				margin-top: 40upx;

				.task-list {
					margin: 20upx auto;

					.logo {
						width: 90upx;
						height: 92upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.cont {
						flex: 1;
						margin: 0 20upx;

						.tit {
							line-height: 60upx;
							font-weight: 700;
							font-size: 28upx;
						}

						.desc {
							color: #616161;
							font-size: 24upx;
						}
					}

					.btn {
						background: linear-gradient(151deg, #f8d360 0%, #f6c93d 100%);
						border-radius: 15px;
						font-size: 28upx;
						color: #fff;
						width: 162upx;
						height: 58upx;
						text-align: center;
						line-height: 58upx;
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.one-list {
		margin: 20upx auto;
	}

	.energy-product {
		margin: 20rpx auto;
	}

	.djs-main {
		margin: 20rpx 0;
		font-size: 40rpx;
		text-align: center;
		color: #fd3b39;
	}
</style>