xwc/bundle/pages/integral_sign/integral_sign.vue

<template>
	<view class="integral-sign" v-show="user.id">
		<view class="user-sgin">
			<view class="header">
				<view class="flex">
					<!-- 头像 -->
					<view class="flex m-l-40">
						<u-avatar :src="user.avatar" :size="110"></u-avatar>
					</view>
					<!-- 券和明细按钮 -->
					<view class="m-l-30 flex row-between flex-1">
						<!-- 券 -->
						<view>
							<view class="white" style="font-size: 56rpx">{{user.user_integral}}</view>
							<router-link to="/bundle/pages/sign_rule/sign_rule">
								<view class="sm flex white">
									我的券
									<image src="../../static/jifen_icon_help.png" class="m-l-10"
										style="height: 30rpx; width: 30rpx;"></image>
								</view>
							</router-link>
						</view>
						<!-- 明细按钮 -->
						<router-link to="/bundle/pages/integral_details/integral_details">
							<view class="score-detail-entry flex">
								<image style="width: 26rpx;height: 26rpx;flex: none; margin-right: 7rpx"
									src="../../static/jifen_icon_data.png"></image>
								<text class="sm white">券明细</text>
							</view>
						</router-link>
					</view>
				</view>
			</view>
			<view class="main">
				<!-- 签到列表 -->
				<view class="contain bg-white">
					<view class="title">已累积签到 {{user.days}}天</view>
					<view class="day-list flex flex-wrap">
						<view v-for="(item, index) in signList" :key="index" class="item flex-col col-center">
							<view :class="'circle flex row-center ' + (item.status == 1 ? 'active-circle' : '')">
								<view class="num xs lighter" v-if="item.status == 0">+{{item.integral}}</view>
								<image class="num" src="../../static/jifen_icon_select.png" v-if="item.status == 1">
								</image>
							</view>
							<view class="day m-t-10 lighter sm">{{item.day}}</view>
						</view>
					</view>
					<view class="right-sgin">
						<button :class="'lighter br60 ' + (user.today_sign ? 'gray' : 'primary-button')"
							@tap="userSignFun" size="md">{{user.today_sign ? '已签到' : '立即签到' }}</button>
					</view>
				</view>
				<!-- 赚券 -->
				<view class="contain bg-white m-t-20" v-if="integralTips.length > 0">
					<view class="title flex">
						<view class="line br60 m-r-20"></view>
						<view class="bold xl">赚券</view>
					</view>
					<view class="task">
						<view v-for="(item, index) in integralTips" :key="index" class="item flex">
							<image class="img m-r-20" :src="item.image">
							</image>
							<view class="con">
								<view class="md">{{item.name}}</view>
							</view>
							<button hover-class="none" :class="'btn br60 ' + (item.status ? 'muted' : 'primary' )"
								:style="'border-color: ' + (item.status ? '#BBBBBB' : '#FF2C3C') + ';'"
								size="xs">{{item.status ? '已完成' : '未完成'}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showPop" mode="center">
			<view class="pop-container">
				<view class="header-score flex row-center">+{{signInfo.integral}}</view>
				<view class="box column-center">
					<view class="desc m-t-20 sm flex row-center">
						<view class="">
							获得
						</view>
						<image style="width: 28rpx; height: 30rpx;margin-right: 8rpx; margin-left: 8rpx"
							src="../../static/icon_jifen.png"></image>
						<view class="">
							{{signInfo.integral}}
						</view>
						<view class="m-l-20 flex" v-if="signInfo.growth">
							+ {{ signInfo.growth }}成长值
						</view>
					</view>
					<view class="bottom-box">
						<view class="md" style="line-height: 36rpx">
							您已累积签到 <text style="font-size: 36rpx; color: #FF2C3C;">{{signInfo.days}}</text>天
						</view>
					</view>
					<view class="white br60 primary-btn" style="margin-top: 26rpx" @tap="showPop = false">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSignLists,
		userSignIn
	} from "@/api/activity";
	import {
		trottle
	} from "@/utils/tools"
	export default {
		data() {
			return {
				// 用户信息
				user: {

				},
				// 签到天数列表
				signList: [],
				// 每日签到
				integralTips: [],
				// 显示签到结果弹窗
				showPop: false,
				// 签到结果
				signInfo: {}
			};
		},

		onLoad() {
			this.getSignListsFun()
			this.userSignFun = trottle(this.userSignFun, 1000, this)
		},

		methods: {
			// 获取签到数据
			getSignListsFun() {
				getSignLists()
					.then((res) => {
						if (res.code == 1) {
							const {
								user,
								sign_list,
								integral_tips
							} = res.data
							this.user = user
							this.signList = sign_list
							this.integralTips = integral_tips
						}
					}).catch((err) => {

					})
			},
			// 点击签到
			userSignFun() {
				if (this.user.today_sign) return
				userSignIn().then((res) => {
					if (res.code == 1) {
						this.showPop = true;
						this.signInfo = res.data
						this.getSignListsFun()
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.user-sgin {
		padding-bottom: 100rpx;
	}

	.user-sgin .header {
		background-image: url(../../static/bg_sgin.png);
		background-repeat: no-repeat;
		background-size: 100%;
		height: 400rpx;
		width: 750rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.user-sgin .header .avatar {
		border-radius: 50%;
		border: 4rpx solid #fff;
	}

	.user-sgin .main {
		z-index: 100;
		margin-top: -200rpx;
		width: 100%;
		top: 186rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.user-sgin .main .contain {
		border-radius: 10rpx;
	}

	.user-sgin .main .contain .title {
		padding: 24rpx 30rpx;
	}

	.user-sgin .main .contain .title .line {
		width: 6rpx;
		height: 34rpx;
		background-color: #ff2c3c;
	}

	.user-sgin .main .day-list {
		width: 100%;
	}

	.user-sgin .main .day-list .item {
		width: 14.2%;
		margin-bottom: 10rpx;
	}

	.user-sgin .main .day-list .item .num {
		width: 68rpx;
		height: 68rpx;
		line-height: 58rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f2f2f2;
	}

	.user-sgin .main .day-list .item .circle {
		position: relative;
	}

	.user-sgin .main .day-list .item .circle::before {
		content: "";
		height: 6rpx;
		background-color: #f2f2f2;
		width: 34rpx;
		position: absolute;
		right: 68rpx;
		top: 34rpx;
	}

	.user-sgin .main .day-list .item:nth-of-type(7n+1) .circle::before {
		background-color: rgba(0, 0, 0, 0);
	}

	.user-sgin .main .day-list .item .active-circle::before {
		background-color: #FFBD40;

	}


	.user-sgin .main .right-sgin {
		padding: 35rpx 145rpx;
	}

	.user-sgin .main .right-sgin .primary-button {
		color: #fff;
		background: linear-gradient(270deg, rgba(249, 95, 47, 1) 0%, rgba(252, 67, 54, 1) 55%, rgba(255, 44, 60, 1) 100%);
	}

	.user-sgin .main .contain .task {
		border-top: 1px solid $-color-border;
	}

	.user-sgin .main .contain .task .item {
		padding: 23rpx 30rpx;
	}

	.user-sgin .main .contain .task .item .img {
		width: 74rpx;
		height: 74rpx;
		border-radius: 22rpx;
	}

	.user-sgin .main .contain .task .item .con {
		flex: 1;
	}

	.user-sgin .main .contain .task .item .btn {
		width: 154rpx;
		border: 1px solid #FF2C3C;
	}

	.user-sgin .main .contain .task .item .con .num {
		color: #FF2C3C;
	}

	.user-sgin .main .contain .task .item .primary {
		color: #FF2C3C;
	}

	.score-detail-entry {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		padding: 12rpx 19rpx 12rpx 16rpx;
		align-self: flex-end;
	}

	.van-popup {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.pop-container {
		background-repeat: no-repeat;
		background-size: 100%;
		height: 626rpx;
		width: 560rpx;
		position: relative;
		background-image: url('../../static/jifen_popBg.png');
	}

	.u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.header-score {
		font-size: 46rpx;
		line-height: 36rpx;
		font-weight: bold;
		padding-top: 90rpx;
		padding-bottom: 150rpx;
		// color: #FF2C3C;
		color: #FF8412;
	}

	.desc {
		color: white;
		background: linear-gradient(82deg, rgba(250, 81, 50, 1) 0%, rgba(236, 60, 34, 1) 49%, rgba(250, 83, 50, 1) 100%);
		padding: 16rpx 22rpx 16rpx 42rpx;
		text-align: center;
	}


	.bottom-box {
		margin-top: 84rpx;
		text-align: center;
	}

	.primary-btn {
		margin: 0 60rpx;
		width: 440rpx;
		height: 74rpx;
		border-radius: 37rpx;
		padding: 16rpx 190rpx;
		// background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
		background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
	}

	.gray {
		background-color: #f2f2f2 !important;
	}
</style>