yixiang/pageC/calendar.vue

<template>
	<view class="content">
		<u-navbar title="签到日历" :bgColor="bgColor" safeAreaInsetTop autoBack height="44px"></u-navbar>
		<image src="static/jifen-bg.png" mode="aspectFill" class="top_bg"></image>
		<view class="top vflex acenter jcenter">
			<text class="text1">已连续签到{{succession_days}}天</text>
			<jcalendar :dataSource="datalist" @dateChange="changedate"></jcalendar>
		</view>
		<view class="content-bg">

			<view class="box">
				<view class="title">签到领福利</view>
				<view class="list-item hflex acenter jbetween" v-for="(item,index) in list" :key="index">
					<view class="item-left hflex acenter">
						<view class="images">
							<image :src="item.prize_image" mode="aspectFill" v-if="item.prize_type != 'integral'"></image>
							<image src="@/static/images/jifen.png" mode="aspectFill" v-if="item.prize_type == 'integral'"></image>
							<!-- <image src="@/static/images/yitijiao.png" mode="aspectFill" class="images-icon" v-if="item.is_receive == 1"></image> -->
							<image src="@/static/images/yilingqu.png" mode="aspectFill" class="images-icon" v-if="item.is_receive == 1"></image>
							<image src="@/static/images/dailingqu.png" mode="aspectFill" class="images-icon" v-if="item.can_receive == 1 && item.is_receive == 0"></image>
						</view>
						<view class="img-right vflex">
							<text class="text2">当前连续签到{{item.days}}天</text>
							<text class="text3">{{item.prize_name}}</text>
						</view>
					</view>
					<view class="item-right">
						<view class="text4" v-if="item.can_receive == 0">未达成</view>
						<view v-if="item.can_receive != 0 && item.is_receive == 0" class="btn1" style="background: #00B0B0;color: #FFF"
							@click="toreceive(item)">领取奖励</view>
						<view v-if="item.can_receive != 0 && item.is_receive != 0" class="btn2">已领取</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show_address" @close="toclose" mode="bottom" :round="13">
			<addressBox @close="toclose" @select="selectAddress"></addressBox>
		</u-popup>
		<u-popup :show="show_submit" @close="toclose" mode="center" :round="10">
			<view class="popu1 vflex acenter">
				<image src="static/success.png" mode="aspectFill"></image>
				<view class="success">领取成功</view>
				<view class="success-text">请前往添加客服微信</view>
				<view class="hflex acenter btns">
					<view class="btn1" @click="toclose">稍后添加</view>
					<view class="btn2" @click="show_wx = true">添加客服</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show_wx" @close="toclose" mode="center" :round="10">
			<kefu-wx :wxcode="wxcode" @submit="toclose"></kefu-wx>
		</u-popup>
	</view>
</template>

<script>
	import Jcalendar from '@/components/j-calendar/j-calendar.vue'
	import addressBox from './components/addressbox.vue'
	import kefuWx from './components/kefu-wx.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			Jcalendar,
			addressBox,
			kefuWx
		},
		data() {
			return {
				user: {},
				list: [],
				datalist: [],
				date: '',
				bgColor: 'rgba(0, 0, 0, 0)',
				succession_days: '',
				data: {},
				show_address: false,
				show_wx: false,
				show_submit: false,
				wxcode: '',
				address_id: '',
			}
		},
		onLoad() {
			this.getuser()
			this.getlist()
			var year = parseInt(new Date().getFullYear())
			var month = parseInt(new Date().getMonth() + 1)
			if (month < 10) {
				month = '0' + month
			}
			var date = year + '-' + month
			this.getdate(date)
		},
		onShow() {

		},
		onPageScroll(e) {
			console.log(e);
			if (e.scrollTop > 0) {
				this.bgColor = 'rgba(255,255,255)'
			} else {
				this.bgColor = 'rgba(0, 0, 0, 0)'
			}
		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			getcode() {
				var that = this
				$api.req({
					url: 'config',
					data: {
						module: 'basic'
					}
				}, function(res) {
					that.wxcode = res.data.customer_service_qrcode
				})
			},
			toadd(item) {
				if (item.prize_type == 'goods') {
					this.show_submit = true
					this.getcode()
				} else {
					return
				}
			},
			selectAddress(e) {
				this.address_id = e
				this.receive(this.data.id)
				this.toclose()
			},
			toclose() {
				this.show_address = false
				this.show_submit = false
				this.show_wx = false
			},
			receive(id) {
				var that = this
				$api.req({
					url: 'sign/prize/' + id + '/receive',
					method: 'post',
					data: {
						address_id: this.address_id
					}
				}, function(res) {
					$api.info(res.msg)
					setTimeout(() => {
						that.getlist()
					})
				})
			},
			toreceive(item) {
				var that = this
				if(item.prize_type == 'goods') {
					this.data = item
					this.show_address = true
				} else {
					this.receive(item.id)
				}
				
			},
			changedate(e) {
				this.getdate(e)
			},
			getdate(date) {
				var _this = this
				$api.req({
					url: 'sign',
					method: 'GET',
					data: {
						date: date
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.datalist = res.data.days
						_this.succession_days = res.data.succession_days
					}
				})
			},
			getlist() {
				var _this = this
				$api.req({
					url: 'sign/prize',
					method: 'GET',
					data: {
						page: 1,
						is_page: 0
					}
				}, function(res) {
					if (res.code == 10000) {
						_this.list = res.data
					}
				})

			},
			getuser() {
				var _this = this
				$api.req({
					url: 'user/info',
					methos: 'GET'
				}, function(res) {
					if (res.code == 10000) {
						_this.user = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		.u-navbar--fixed {
			z-index: 999;
		}
.popu1 {
			width: 510rpx;
			padding: 46rpx 0;

			.top {
				width: 100%;

				.top-title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					color: #000000;
					text-align: center;
					padding-left: 100rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.center {
				image {
					width: 310rpx;
					height: 310rpx;
				}

				text {
					font-size: 22rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, .42);
				}
			}

			image {
				width: 78rpx;
				height: 78rpx;
				margin: 12rpx 36rpx;
			}

			.success {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.success-text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, .6);
				padding: 8rpx 0 42rpx;
			}

			.btns {
				.btn1 {
					width: 204rpx;
					height: 72rpx;
					background: #E7E7E7;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 72rpx;
					text-align: center;
				}

				.btn2 {
					width: 204rpx;
					height: 72rpx;
					background: #00B0B0;
					border-radius: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 72rpx;
					text-align: center;
					margin: 0 0 0 26rpx;
				}
			}
		}

		// background: unset;
		.content-bg {
			// background: #f5f5f5;
			// min-height: 80vh;
		}

		.box {
			margin: 20rpx auto;
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 28rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
			}

			.list-item {
				margin-top: 40rpx;

				.item-right {
					.text4 {
						width: 148rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
						text-align: center;
					}

					.btn1 {
						width: 148rpx;
						height: 56rpx;
						background: rgba(0, 176, 176, .1);
						border-radius: 28rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #00B0B0;
						line-height: 56rpx;
						text-align: center;
					}

					.btn1 {
						width: 128rpx;
						height: 56rpx;
						background: #D8D8D8;
						border-radius: 28rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center;
					}
				}

				.item-left {
					.images {
						position: relative;
						image {
							width: 100rpx;
							height: 100rpx;
						}
						.images-icon {
							position: absolute;
							top: 0;
							left: 0;
							width: 100rpx;
							height: 100rpx;
							background: rgba(0, 0, 0, .3);
						}
					}
					

					.img-right {
						padding-left: 20rpx;

						.text2 {
							font-size: 28rpx;
							font-family: SFPro, SFPro;
							font-weight: 500;
							color: #333333;
						}

						.text3 {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
							padding-top: 12rpx;
						}
					}
				}
			}
		}

		.top_bg {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			// z-index: -1;
		}

		.top {
			width: 694rpx;
			margin: 108rpx auto 20rpx;

			.text1 {
				z-index: 99;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 40rpx 0;
			}
		}
	}
</style>