xiongmao/pages/my/sign-in-award/sign-in-award.vue

<!-- 签到奖励 -->
<template>
	<view class="wrap">

		<HeaderViewBar ref='HeaderViewBar' title='签到奖励' :opacity="scrollTop / 100"
			backgroundColor='linear-gradient(90deg, #FF9C6C, #FF6921)'
			style="position: fixed; top: 0; z-index: 999999999;" @tap="back">
		</HeaderViewBar>

		<view class="bg"></view>

		<view class="container-wrap">

			<view class="head">
				<image src="../../../static/avatar.png" class="avatar" mode="aspectFill"></image>
				<view class="head-sidebar">
					<view class="head-column">
						<view class="user-name">
							真的灰常郝
						</view>
						<view class="tag">
							<image src="../../../static/bg-5.png" class="tag-bg" mode=""></image>
							<view class="tag-container">
								<image src="../../../static/grade.png" class="grade-img" mode=""></image>
								大众会员
							</view>
						</view>
					</view>
					<view class="right-tag">
						<image src="../../../static/icon-9.png" mode=""></image>
						<text>800</text>积分
					</view>
				</view>
			</view>

			<view class="sign-in-module">
				<view class="date-box">
					<view class="big-num">
						06
					</view>
					<view class="date-column">
						<view class="week-name">周三</view>
						<view class="date-msg">三月2019</view>
					</view>
				</view>

				<view class="bar">
					<view class="steps">
						<view class="steps-li">
							<view class="step-content">
								<view class="sub_title">1天</view>
								<view class="step-num"></view>
							</view>
						</view>
						<view class="steps-li active">
							<view class="step-content">
								<view class="sub_title">2天</view>
								<view class="step-num"></view>
							</view>
						</view>
						<view class="steps-li active">
							<view class="step-content">
								<view class="sub_title">3天</view>
								<view class="step-num"></view>
							</view>
						</view>
						<view class="steps-li">
							<view class="step-content">
								<view class="sub_title">4天</view>
								<view class="step-num"></view>
							</view>
						</view>
						<view class="steps-li">
							<view class="step-content">
								<view class="sub_title">5天</view>
								<view class="step-num"></view>
							</view>
						</view>
						<view class="steps-li">
							<view class="step-content">
								<view class="sub_title">6天</view>
								<view class="step-num"></view>
							</view>
						</view>
						<view class="steps-li">
							<view class="step-content">
								<view class="sub_title">7天</view>
								<view class="step-num">
									<image src="../../../static/icon-12.png" mode="widthFix" class="repair"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="btn-box">
					<button type="default">立即签到</button>
					<!-- 已签到显示 -->
					<!-- <button type="default" class="gray-bg">立即签到</button> -->
				</view>
				<view class="sign-in-msg">
					连续签到7天可以获得一张补签卡
				</view>
				<image src="../../../static/icon-10.png" class="sign-in-img" mode=""></image>
			</view>

			<view class="supplementary-signature">
				<view class="supplementary-signature-sidebar">
					<image src="../../../static/icon-11.png" mode="widthFix"></image>
					<text>补签卡1张</text>
				</view>
				<button type="default" class="small-btn">去补签</button>
			</view>

			<view class="sign-in-rules">
				<view class="sign-in-rules-label">签到规则：</view>
				<view class="sign-in-rules-msg">
					1.每日签到获得1个积分；
					2.连续签到2天获得2积分；
					3.连续签到3天获得3积分；
					4.连续签到7天可以获得一张补签卡。
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import HeaderViewBar from '../../../components/header-view-bar/header-view-bar.vue';
	export default {
		components: {
			HeaderViewBar,
		},
		data() {
			return {
				headerHeight: 0,
				scrollTop: 0,
			}
		},
		onShow() {
			setTimeout(() => {
				this.headerHeight = this.$refs['HeaderViewBar'].getHeaderStyle().headerHeight;
			}, 20);
		},
		methods: {
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1,
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	@import "./sign-in-award.css";
</style>