wwbsr/pages/base/signIn.vue

<template>
    <v-page>
        <v-header>
            <template #title>
                <view>
                    {{ $t("base.e9") }}
                    <!-- <span class="color-theme-1">123</span> -->
                </view>
            </template>
        </v-header>
        <view class="layout-main p-x-lg">
            <view
                class="coin bg-panel-2 d-flex align-center justify-center container-tips"
            >
                <view class="tips"> {{ $t("base.f1") }} {{day_money}} {{ $t("base.f6") }}</view>
                <view class="money d-flex align-center justify-center">
                    <img
                        src="static/img/jinbi.png"
                        class="money-img"
                        mode=""
                    /><view>{{qian_money}}</view>
                </view>
            </view>
            <view class="axn-7-20">
                {{ $t("base.f2") }} {{seven_money}} {{ $t("base.f7") }}
            </view>
            <view class="axn-list d-flex align-center justify-center">
                <view
                    class="axn-list__item"
                    v-for="item in 7"
                    :key="item"
                    :class="[
                        item <=signInCount ? 'success' : 'default',
                    ]"
                >
                    <view>Day {{ item }}</view>
                    <view>
                        <img
                            class="axn-list__status axn-list__status--default"
                            src="static/img/jinbi.png"
                            alt=""
                        />
                        <img
                            class="axn-list__status axn-list__status--danger"
                            src="static/img/close.png"
                            alt=""
                        />
                        <img
                            class="axn-list__status axn-list__status--success"
                            src="static/img/dui.png"
                            alt=""
                        />
                    </view>
                </view>
            </view>
            <view class="m-b-lg sign-btn">
                <v-button
                    type="blue"
                    block
                    class="w-max rounded-md"
                    key="loginbtn"
                    @click="handleSubmit"
                    >{{ $t("base.f0") }}</v-button
                >
            </view>
        </view>
        <van-toast id="van-toast" />
    </v-page>
</template>
<script>
import Member from "@/api/member";
export default {
    components: {},
    data() {
        return {
            secondaryShow: false,
            signInCount: 0, //已连续签到天数
			loadingSubmit:false,
			qian_money: 0,
			day_money: "4MED",
			seven_money: "10MED",
        };
    },
    onLoad() {
        this.init();
    },
    methods: {
       async handleSubmit() {
		   if(this.loadingSubmit){
				return
		   }
			uni.showLoading({
				title:"loading...",
			})
			this.$set(this,'loadingSubmit',true)
			try{
				let sign=await Member.sign();
				uni.hideLoading()
				this.init()
			}catch(e){
				uni.hideLoading();
				uni.showToast({
					title:e||"签到失败",
					icon:'none'
				})
			}
			this.$set(this,'loadingSubmit',false)
        },
        async init() {
			uni.showLoading({
				title:'loading...'
			})
            try {
                let signList = await Member.signList();
				this.$set(this,'signInCount',signList.data.days || 0)
				this.$set(this,'day_money',signList.data.sign_reward || "4MED")
				this.$set(this,'seven_money',signList.data.lx_sign_reward || "10MED")
				this.$set(this,'qian_money',signList.data.qian_money || 0)
            } catch (e) {
                uni.showToast({
                    title: e || "网络错误",
                    icon: "none",
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.container-tips {
    flex-direction: column;
    padding: 90rpx 0;
    .tips {
        font-family: PingFang-SC-Regular;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        // color: rgba(#ffffff, 0.5);
        margin-bottom: 60rpx;
    }
    .money {
        font-size: 63rpx;
        color: #f9aa0d;
        .money-img {
            width: 50rpx;
            height: 50rpx;
            display: inline-block;
            margin-right: 10rpx;
        }
    }
}
.axn-7-20 {
    text-align: center;
    font-family: PingFang-SC-Medium;
    font-size: 26rpx;
    // color: rgba(#ffffff, 0.5);
    padding: 56rpx 128rpx 48rpx;
}
.axn-list {
    flex-wrap: wrap;
    .axn-list__item {
        box-sizing: border-box;
        width: 133rpx;
        background-blend-mode: normal, normal;
        border-radius: 10px;
        margin-bottom: 34rpx;
        text-align: center;
        margin-right: 30rpx;

        font-family: PingFang-SC-Medium;
        font-size: 30rpx;
        color: #ffffff;
        text-align: center;
        padding: 28rpx 0;
        &:nth-of-type(4) {
            margin-right: 0;
        }
        .axn-list__status--default,
        .axn-list__status--success,
        .axn-list__status--danger {
            display: none;
        }
        &.default {
            // background-image: $gradient-blue;
            background-image: var(--sign-in-default);
            .axn-list__status--default {
                display: inline-block;
            }
        }
        &.success {
            background-image: var(--sign-in-success);
            .axn-list__status--success {
                display: inline-block;
            }
        }
        &.danger {
            background: var(--sign-in-danger);
            .axn-list__status--danger {
                display: inline-block;
            }
        }
    }
    .axn-list__status {
        margin-top: 28rpx;
        width: 28rpx;
        height: 28rpx;
    }
}
.sign-btn {
    width: 344rpx;
    margin: 30rpx auto;
}
</style>