snapshot-wx/pagesBase/MyReward/Index.vue

<template>
	<view class="container" v-show="isShow">
		<image class="bgImg" src="../../static/img/mine/myRewardBG.png"></image>
		<view class="headerBox">
			<view class="osNavigationBar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="viewTopTitle" :style="{height: navBarHeight + 'px', 'line-height': navBarHeight + 'px'}">
				<view class="topTitleBackButton" @tap="onBackTo" :style="{top: (navBarHeight - 20) / 2 + 'px'}">
					<image class="topTitleBackButtonImg" src="/static/img/common/back_white.png"></image>
				</view>
				<text class="topTitleText" style="color: #fff;">我的奖励</text>
			</view>
		</view>
		<view class="contentBox" :style="{height: 'calc(100% - ' + (statusBarHeight + navBarHeight) + 'px)'}">
			<view class="numberBox">
				<text>￥</text>
				<text class="userMoney">{{userMoney}}</text>
				<text class="userMoneyTips">历史已领奖励</text>
			</view>
			<view class="rewardBox">
				<view class="rewardHeaderBox">
					<view class="tabBox">
						<view class="tabItem" :class="tabIndex == '1' ? 'active' : ''" @tap="onChangeState('1')">已领</view>
						<view class="tabItem" :class="tabIndex == '0' ? 'active' : ''" @tap="onChangeState('0')">待领取</view>
						<view class="tabItem" :class="tabIndex == '2' ? 'active' : ''" @tap="onChangeState('2')">待补领</view>
					</view>
				</view>
				<!-- <view class="titleTips" v-show="tabIndex != '1'">
					<image src="../../static/img/mine/starIcon.png" class="tipsIcon"></image>
					<text class="tipsText">关注微信公众号“</text>
					<text class="linkText" @tap="onGZHTo">自贡随手拍</text>
					<text class="tipsText">”</text>
				</view> -->
				<!-- <view class="rewardDetailBox" :style="{height: (tabIndex == '1' ? 'calc(100% - 120rpx)' : 'calc(100% - 168rpx)')}"> -->
				<view class="rewardDetailBox" style="height: calc(100% - 120rpx)">
					<view v-if="rewardList.length > 0">
						<view class="rewardContentBox" v-for="(item, index) in rewardList">
							<view class="rewardTitleBox" @tap="onChangeContentShow(item.Date)">
								<view class="rewardTitle">
									<text class="rewardTitleDate">{{item.Date}}</text>
									<image class="rewardTitleIcon" src="../../static/img/common/selectImg.png"></image>
								</view>
								<view class="rewardTitleNum">总计 ￥{{item.money}}</view>
							</view>
							<view class="rewardListBox" v-show="item.showDetail">
								<view class="rewardItemBox" v-for="(rewardItem, rewardIndex) in item.list" @tap="onViewTo(rewardItem.FlowID)">
									<image class="itemImg" src="/static/img/mine/reward.png"></image>
									<view class="itemInfoBox">
										<view class="itemTextBox">
											<view class="itemTitle">{{rewardItem.Title}}</view>
											<view class="itemReason" v-if="tabIndex == '2' && rewardItem.SendReturnMsg">{{rewardItem.SendReturnMsg}}</view>
											<view class="itemDate" v-if="tabIndex != '2' || rewardItem.type == '0'">{{rewardItem.SendTime}}</view>
										</view>
										<view class="itemRedNum">
											<text class="itemRedNumText">￥{{rewardItem.Money || 0}}</text>
											<text class="itemRedNumBtn" v-if="tabIndex == '2' && rewardItem.type == '0'" @tap.stop="onRedRechargeTo(rewardItem)">补领</text>
										</view>
										<view class="itemRechargeTipsBox" v-if="tabIndex == '2' && rewardItem.type == '1'">
											<text class="itemRechargeDate">{{rewardItem.SendTime}}</text>
											<text class="itemRechargeTips">补领申请成功！红包发放中</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="noneBox" v-else>
						<image class="noneImg" src="../../static/img/home/noneImg.png"></image>
						<view class="noneTips">暂无数据</view>
					</view>
				</view>
				<!-- <z-paging ref="paging" v-model="rewardList" @query="onGetListData" refresher-update-time-key="list">
					<view class="rewardItemBox" v-for="(item, index) in rewardList" @tap="onViewTo(item.FlowID)">
						<image class="itemImg" src="/static/img/mine/reward.png"></image>
						<view class="itemTextBox">
							<view class="itemTitle">{{item.Title}}</view>
							<view class="itemDate">{{item.SendTime}}</view>
						</view>
						<view class="itemRedNum">+{{item.Money || 0}}</view>
					</view>
				</z-paging> -->
			</view>
		</view>
		<!-- 关注公众号弹窗 -->
		<view class="popMask" v-if="isPopShow">
			<view class="popContent">
				<view class="popTips">长按扫码关注公众号</view>
				<image class="popImg" src="../../static/img/mine/qrcode_gyyjgl.jpg" show-menu-by-longpress></image>
				<image class="popClose" src="../../static/img/mine/popClose.png" @tap="onGZHCloseTo"></image>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				isShow: false,
				statusBarHeight: 0,
				navBarHeight: 0,
				userMoney: '0',
				tabIndex: '1',
				rewardList: [],
				isPopShow: false,
			}
		},
		onLoad() {
			that = this;
			that.statusBarHeight = that.$systemInfo.statusBarHeight;
			that.navBarHeight = that.$systemInfo.navBarHeight;
			that.onGetData(function() {
				that.onGetListData(function() {
					that.isShow = true;
				});
			});
		},
		methods: {
			onGetData(fun) {
				that.$admin.req('UserRed', {
					WXOpenid: uni.getStorageSync('userInfo').openID
				}).then(res => {
					if (res[0].data && res[0].data.length > 0) {
						that.userMoney = res[0].data[0].SumMoney;
					}
					typeof fun === 'function' && fun();
				})
			},
			onGetListData(fun) {
				that.$admin.reqDirect("GetRedDetailMoon", {
					WXOpenid: uni.getStorageSync('userInfo').openID,
					Type: that.tabIndex,
				}).then(res => {
					if (res[0].data && res[0].data.length > 0 && !res[0].data[0].msg) {
						let data = res[0].data;
						data.forEach((item, index) => {
							item.list = JSON.parse(item.list);
							item.showDetail = true;
							item.list.forEach((rewardItem, rewardIndex) => {
								rewardItem.SendTime = that.$util.formatTime(new Date(rewardItem.SendTime));
							});
						});
						that.rewardList = data;
					} else if ((res[0].data && res[0].data.length == 0) || (res[0].data[0].msg == '无数据')) {
						that.rewardList = [];
					} else {
						that.$util.msg('网络出错！');
					}
					typeof fun === 'function' && fun();
				})
			},
			// 切换状态
			onChangeState(tabIndex) {
				let that = this;
				if (that.tabIndex != tabIndex) {
					that.tabIndex = tabIndex;
					that.onGetListData();
				}
			},
			// 切换内容显示
			onChangeContentShow(date) {
				let that = this;
				for (let index in that.rewardList) {
					if (that.rewardList[index].Date == date) {
						that.rewardList[index].showDetail = !that.rewardList[index].showDetail
						that.$set(that.rewardList, index, that.rewardList[index]);
					}
				}
			},
			onViewTo(id) {
				if (id && id != '0'){
					uni.navigateTo({
						url: '/pagesBase/Order/View?type=mine&id=' + encodeURIComponent(id)
					})
				}
			},
			// 补领红包
			onRedRechargeTo(sendItem) {
				let sendID = sendItem.SendID;
				let sendType = sendItem.sendType;
				that.$admin.reqDirect("GetRedRecharge", {
					WXOpenid: uni.getStorageSync('userInfo').openID,
					// WXOpenid: 'oyxuU68r3_4WA1VpSHu3Al-i3zEI',
					SendID: sendID,
					sendType: sendType
				}).then(res => {
					if (res[0].data && res[0].data.length > 0) {
						if (res[0].data[0].state == '1') {
							that.$util.msg('补领成功！', function() {
								that.onGetListData();
							});
						} else if (res[0].data[0].state == '0') {
							that.$util.msg('补领失败！请稍后再试');
						} else if (res[0].data[0].state == '2') {
							that.$util.msg('请先关注微信公众号', function() {
								that.isPopShow = true;
							});
						}
					} else {
						that.$util.msg('补领失败！请稍后再试');
					}
					typeof fun === 'function' && fun();
				})
			},
			onGZHTo() {
				this.isPopShow = true;
			},
			onGZHCloseTo() {
				this.isPopShow = false;
			},
			// 返回按钮点击事件
			onBackTo() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="less">
	.bgImg {
		height: 520rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.contentBox {
		overflow-y: auto;
		position: relative;
		z-index: 9;
	}

	.numberBox {
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		padding: 30rpx 0 40rpx;
	}

	.userMoney {
		font-size: 56rpx;
		font-weight: bold;
		vertical-align: text-bottom;
		margin-left: 4rpx;
	}

	.userMoneyTips {
		display: block;
		width: 180rpx;
		margin-left: calc(50% - 130rpx);
		font-size: 28rpx;
		padding: 14rpx 40rpx;
		margin-top: 10rpx;
		border-radius: 50rpx;
		color: #eefcfd;
		background-color: #2a74c9;
	}

	.rewardBox {
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		height: calc(100% - 190rpx);
	}

	.rewardDetailBox {
		height: calc(100% - 120rpx);
		background-color: #fff;
		position: relative;
		overflow-y: auto;
	}

	.rewardHeaderBox {
		line-height: 0;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		margin-bottom: 20rpx;
	}

	.tabBox {
		padding: 0;
		line-height: 48rpx;
	}

	.tabItem {
		padding: 40rpx 0 30rpx;
		display: inline-block;
		width: calc(33.3%);
		text-align: center;
		color: #333;
		font-size: 28rpx;
		position: relative;
	}

	.active {
		color: #3e6ffd;
		font-weight: bold;
	}

	.active::after {
		content: " ";
		width: 100rpx;
		height: 4rpx;
		background-color: #3e6ffd;
		position: absolute;
		bottom: 2rpx;
		left: calc(50% - 50rpx);
	}

	.titleTips {
		background-color: #fff;
		padding: 0rpx 0 20rpx 20rpx;
	}

	.tipsIcon {
		width: 16rpx;
		height: 16rpx;
		margin: 0 10rpx 4rpx 0;
	}

	.tipsText {
		font-size: 28rpx;
		color: #000;
	}

	.linkText {
		font-size: 28rpx;
		color: #438cd8;
		text-decoration: underline;
	}

	.rewardContentBox {
		position: relative;
		height: calc(100% - 120rpx);
		background-color: #fff;
	}

	.rewardTitleBox {
		padding: 30rpx 20rpx 30rpx 50rpx;
		border-bottom: 2rpx #e2e2e2 solid;
		background-color: #f9f9f9;
	}

	.rewardTitle {
		color: #a3a3a3;
		font-size: 32rpx;
		position: relative;
		display: inline-block;
		width: calc(100% - 300rpx);
		vertical-align: text-bottom;
	}

	.rewardTitle::before {
		content: '';
		width: 10rpx;
		height: 34rpx;
		background-image: linear-gradient(to bottom, #3581d5, #5ca4f6);
		position: absolute;
		top: 0rpx;
		left: -18rpx;
	}

	.rewardTitleIcon {
		width: 30rpx;
		height: 30rpx;
		vertical-align: bottom;
		margin-left: 10rpx;
	}

	.rewardTitleNum {
		display: inline-block;
		width: 300rpx;
		vertical-align: text-bottom;
		color: #000;
		font-size: 28rpx;
		text-align: right;
	}

	.rewardListBox {
		padding: 0 20rpx;
	}

	.rewardItemBox {
		padding: 46rpx 10rpx 40rpx;
		border-bottom: 2rpx #eee solid;
	}

	.itemImg {
		width: 80rpx;
		height: 80rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 30rpx;
	}

	.itemInfoBox {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 110rpx);
	}

	.itemTextBox {
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 190rpx);
	}

	.itemTitle {
		font-size: 30rpx;
		color: #000;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-bottom: 10rpx;
	}

	.itemReason {
		width: fit-content;
		font-size: 24rpx;
		padding: 10rpx 24rpx;
		background-color: #eee;
		color: #000;
		border-radius: 50rpx;
		margin: 6rpx 0;
		margin-left: -2rpx;
	}

	.itemDate {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		width: 100%;
	}

	.itemRedNum {
		display: inline-block;
		vertical-align: middle;
		text-align: right;
		width: 190rpx;
	}

	.itemRedNumText {
		display: block;
		font-size: 42rpx;
		color: #df1617;
	}

	.itemRedNumBtn {
		display: block;
		font-size: 28rpx;
		color: #fff;
		background-color: #3e6ffd;
		padding: 20rpx 0;
		width: 120rpx;
		text-align: center;
		margin: 20rpx 0 0 70rpx;
		border-radius: 10rpx;
	}

	.itemRechargeTipsBox {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		width: 100%;

	}

	.itemRechargeDate {}

	.itemRechargeTips {
		text-align: right;
		color: #df1617;
	}

	/* 自定提示弹窗 */
	.popMask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
		line-height: 1 !important;
		z-index: 99;
	}

	.popContent {
		width: 80%;
		line-height: 1 !important;
	}

	.popTips {
		width: 100%;
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		line-height: 1 !important;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.popImg {
		width: 100%;
		height: 600rpx;
		border-radius: 0 0 30rpx 30rpx;
	}

	.popClose {
		margin-top: 30rpx;
		width: 80rpx;
		height: 80rpx;
		margin-left: calc(50% - 40rpx);
	}

	.noneBox {
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 50rpx 20rpx;
		text-align: center;
	}

	.noneImg {
		width: 200rpx;
		height: 200rpx;
	}

	.noneTips {
		font-size: 26rpx;
		color: #aaaaaa;
		text-align: center;
		margin-top: 10rpx;
	}

	// .rewardItemBox {
	// 	padding: 46rpx 10rpx 40rpx;
	// 	border-bottom: 2rpx #eee solid;
	// }

	// .itemImg {
	// 	width: 80rpx;
	// 	height: 80rpx;
	// 	display: inline-block;
	// 	vertical-align: middle;
	// 	margin-right: 30rpx;
	// }

	// .itemTextBox {
	// 	display: inline-block;
	// 	vertical-align: middle;
	// 	width: calc(100% - 300rpx);
	// }

	// .itemTitle {
	// 	font-size: 30rpx;
	// 	color: #000;
	// 	width: 100%;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	white-space: nowrap;
	// 	margin-bottom: 20rpx;
	// }

	// .itemDate {
	// 	font-size: 24rpx;
	// 	color: #999;
	// 	width: 100%;
	// }

	// .itemRedNum {
	// 	display: inline-block;
	// 	vertical-align: middle;
	// 	text-align: right;
	// 	width: 190rpx;
	// 	font-size: 42rpx;
	// 	color: #df1617;
	// }
</style>