vist_go_uniApp/pages/user/sign.vue

<template>
	<view class="h100 pos-r" :class="{dark: pattern=='dark'}">
		<u-navbar :title="$t('page_title.sign')" bgColor="transparent" :titleStyle="{color:'#FFFFFF'}"
			leftIconColor="#FFFFFF" autoBack>
		</u-navbar>
		<image class="bg" src="/static/images/6c46bb7f7c1eaa4c7ff1dd66c9b3f82.jpg" style=""></image>
		<view class="content-box pad-tb-32 pad-lr-48 bg-main2 flex-col-center">
			<!-- <view class="font36 font-bold">
				已连续签到
				<text class="font-red font36">3</text>
				天
			</view>
			<view class="font-999 mar-t-24">连续签到7天即可享受奖励翻倍</view> -->
			<!-- 进度条 -->
			<!-- <view class="progress">
				<view class="active" :style="'width:'+percentage+'%'"></view>
				<view class="flex-row-plus mar-t-32 flex-sp-between pad-l-32" style="color: #BABABA;">
					<view class="pos-r">1天</view>
					<view class="pos-r">2天</view>
					<view class="pos-r">3天
						<view class="brand flex-center">
							<text class="u-line-1">20积分</text>
						</view>
						<view class="triangle"></view>
					</view>
					<view class="pos-r">4天</view>
					<view class="pos-r">5天
						<view class="brand flex-center">
							<text class="u-line-1">66积分</text>
						</view>
						<view class="triangle"></view>
					</view>
					<view class="pos-r">6天</view>
					<view class="pos-r">7天
						<view class="brand flex-center">
							<text class="u-line-1">88积分</text>
						</view>
						<view class="triangle"></view>
					</view>
				</view>
			</view> -->
			<view class="flex-column-plus flex-items mar-t-36">
				<view class="btn flex-center text-align" :class="[sign?'bg-CCC-sign active':'bg-red-sign']"
					@click="onSign">
					<text class="font-bold font28">{{ text }}</text>
				</view>
			</view>
			<!-- <view class="integral">已经获得<text class="font-red">99</text>积分</view> -->
		</view>
	</view>
</template>

<script>
	import {
		sign,
		signDetail
	} from "@/config/api.js"
	export default {
		data() {
			return {
				sign: false,
				text: this.$t('user').sign_go,
				signDay: 3
			}
		},
		computed: {
			percentage() {
				let day = this.signDay
				let percentage = 0
				if (typeof day == 'string') {
					day = parseInt(day)
				}
				percentage = 100 / 7 * this.signDay - (day == 7 ? 0 : 1)
				return percentage
			}
		},
		onLoad() {
			this.getSign()
		},
		onShow() {

		},
		methods: {
			getSign() {
				signDetail().then(res => {
					console.log(res)
					const status = res.data
					this.sign = status === 0 ? false : true
					this.text = status === 0 ? this.$t('user').sign_go : this.$t('user').sign_jintian
				})
			},
			onSign() {
				if (this.sign) return
				sign().then(res => {
					uni.showModal({
						content: this.$t('user').sign_success_msg,
						showCancel: false,
						confirmText: this.$t('global').know
					})
					this.sign = true,
						this.text = this.$t('user').sign_jintian
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		height: 300rpx;
	}

	.btn {
		width: 203rpx;
		height: 63rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		box-shadow: 0px 8rpx 8rpx 0rpx rgba(245, 62, 15, 0.3200);

		&.active {
			color: #666666;
			box-shadow: none;
		}
	}

	.h100 {
		height: 100vh;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

	.content-box {
		position: absolute;
		bottom: 91rpx;
		left: 30rpx;
		right: 30rpx;
		z-index: 100;
		border-radius: 37rpx;

		.integral {
			position: absolute;
			bottom: 30rpx;
			right: 24rpx;
			color: #BABABA;
		}
	}

	.progress {
		width: 100%;
		height: 18rpx;
		background: #FFC8C6;
		position: relative;
		border-radius: 30rpx;
		margin-top: 78rpx;
		margin-bottom: 88rpx;

		.active {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			height: 100%;
			background: linear-gradient(90deg, #FF7373 0%, #FC451B 100%);
			border-radius: 18rpx;
		}

		.brand {
			width: 110rpx;
			height: 37rpx;
			background: linear-gradient(90deg, #FFC296 0%, #FB9E8C 100%);
			border-radius: 37rpx;
			color: #ffffff;
			position: absolute;
			top: -78rpx;
			left: -38rpx;
			z-index: 2;
		}

		.triangle {
			width: 0;
			height: 0;
			border-width: 12rpx;
			border-style: solid;
			border-left-color: transparent;
			border-top-color: #FB9E8C;
			border-right-color: transparent;
			border-bottom-color: transparent;
			position: absolute;
			top: -44rpx;
			left: 6rpx;
			z-index: 1;
		}
	}
</style>