snapshot-wx/pagesBase/MyReward/Index_Temp.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>
				</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 v-if="rewardList.length > 0">
						<view class="rewardContentBox" v-for="(item, index) in rewardList">
							<view class="rewardTitleBox" @tap="onChangeContentShow(item.creationTimeText)">
								<view class="rewardTitle">
									<text class="rewardTitleDate">{{item.creationTimeText}}</text>
									<image class="rewardTitleIcon" src="../../static/img/common/selectImg.png"></image>
								</view>
								<view class="rewardTitleNum">总计 ￥{{item.amountTxt}}</view>
							</view>
							<view class="rewardListBox" v-show="item.showDetail && item.list">
								<view class="rewardItemBox" v-for="(rewardItem, rewardIndex) in item.list" @tap="onViewTo(rewardItem.orderId)">
									<image class="itemImg" src="/static/img/mine/reward.png"></image>
									<view class="itemInfoBox">
										<view class="itemTextBox">
											<view class="itemTitle">{{rewardItem.title}}</view>
											<view class="itemDate">{{rewardItem.creationTimeText}}</view>
										</view>
										<view class="itemRedNum">
											<text class="itemRedNumText">￥{{rewardItem.amountTxt || 0}}</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>
			</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.onGetDetailListData(that.rewardList[0].creationTimeText, function(data){
						that.rewardList[0].list = data;
						that.$set(that.rewardList, 0, that.rewardList[0]);
						that.isShow = true;
					})
				});
			});
		},
		methods: {
			onGetData(fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/redpack/received'
				}).then(res => {
					if (res) {
						that.userMoney = res;
					}
					typeof fun === 'function' && fun();
				})
			},
			onGetListData(fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/redpack?Status=' + that.tabIndex * 1
				}).then(res => {
					if (res && res.length > 0) {
						res.forEach((item, index) => {
							if (index == 0){
								item.showDetail = true;
							}else {
								item.showDetail = false;
							}
						});
						that.rewardList = res;
					} else if (res && res.length == 0) {
						that.rewardList = [];
					} else {
						that.$util.msg('网络出错！');
					}
					typeof fun === 'function' && fun();
				})
			},
			onGetDetailListData(date, fun) {
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/redpack/month?Status=' + that.tabIndex * 1 + '&Time=' + date + '&QueryIndex=0&QueryCount=999'
				}).then(res => {
					if (res && res.length > 0) {
						typeof fun === 'function' && fun(res);
					} else if ((res[0].data && res[0].data.length == 0) || (res[0].data[0].msg == '无数据')) {
						typeof fun === 'function' && fun([]);
					} else {
						that.$util.msg('网络出错！');
						typeof fun === 'function' && fun([]);
					}
				})
			},
			// 切换状态
			onChangeState(tabIndex) {
				let that = this;
				if (that.tabIndex != tabIndex) {
					that.tabIndex = tabIndex;
					that.onGetListData(function(){
						that.onGetDetailListData(that.rewardList[0].creationTimeText, function(data){
							that.rewardList[0].list = data;
							that.$set(that.rewardList, 0, that.rewardList[0]);
						})
					});
				}
			},
			// 切换内容显示
			onChangeContentShow(date) {
				let that = this;
				for (let index in that.rewardList) {
					if (that.rewardList[index].creationTimeText == date) {
						that.rewardList[index].showDetail = !that.rewardList[index].showDetail;
						if(!that.rewardList[index].list){
							that.onGetDetailListData(date, function(list){
								that.rewardList[index].list = list;
								that.$set(that.rewardList, index, that.rewardList[index]);
							})
						}else {
							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)
					})
				}
			},
			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(50%);
		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;
	}
</style>