caimei-applets-caimei/pages/h5/activity/activity-sign.vue

<template>
	<view class="container cashier">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5" />
        <template v-else>
            <custom :navbar-data='nvabarData' />
            <view class="container-banner" :style="{paddingTop:CustomBar + 200 +'px'}">
                <view class="login-input">
                    <image  class="login-logo" :src="shopInfo.shopLogo" mode=""></image>
                </view>
                <view class="login-title">展位：{{ shopInfo.shopName }}</view>
                <view class="login-btn"  @click="handleEntry">签到打卡</view>
                <view class="login-text">
                    注：绑定采美机构后，可在采美指定展台签到打卡，所有指定展台打卡完成后可领取一份采美为您准备的精美礼包。
                </view>
            </view>
        </template>
	</view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import authorize from '@/common/config/authorize.js'
    import wxLogin from '@/common/config/wxLogin.js'
	export default{
		data(){
			return{
                nvabarData: {		//顶部自定义导航
                	haveBack:false,
                	haveHome:true,
                	showCapsule:1, // 是否显示左上角图标  1表示显示  0表示不显示,
                	showSearch: 0,
                	title: '',  // 导航栏 中间的标题
                	textLeft:this.$store.state.isIphone
                },
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
                skeletonShow:true,
				params:{
                    userId:'',
                    shopId:''
                },
                shopInfo:{}
			}
		},
		onLoad(option) {
            wxLogin.wxLoginAuthorize()
            setTimeout(()=>{
               this.initData(option)
            },2000)
		},
        computed: {
            ...mapState(['hasLogin', 'userInfo', ])
        },
		methods:{
            // 初始化
            async initData(option) {
            	const userInfo = await this.$api.getStorage()
                this.params.shopId = option.id
                this.params.userId = userInfo.userId
                this.userShopDetail(this.params)
            },
            // 获取展台信息
            async userShopDetail(params){
            	try{
            		const res = await this.UserService.userShopDetail(params)
                    this.shopInfo = res.data
                    if(this.shopInfo.shopSign === 1){
                        this.$api.navigateTo('/pages/h5/activity/activity-entry-list')  
                    }else{
                        this.skeletonShow = false
                    }
            	}catch(error){
            		console.log('获取展台信息异常~')
            	}
            },
            handleEntry(){
                if(!this.hasLogin){
                    this.$util.msg('您还未登录采美机构账号,请先登录!', 2000)
                    setTimeout(() => {
                        const pages = getCurrentPages()
                        const page = pages[pages.length - 1]
                        uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
                        this.$api.navigateTo('/pages/login/login')
                    }, 2000)
                    return
                }
                this.userTicketSign(this.params)
            },
			// 签到打卡
			async userTicketSign(params){
				try{
					await this.UserService.userTicketSign(params)
			        this.$util.msg('打卡成功', 2000, true, 'success')
			        this.params.idCard = ''
			        setTimeout(()=>{
			            this.$api.navigateTo('/pages/h5/activity/activity-entry-list')  
			        },2000)
				}catch(error){
					this.$util.msg(error.msg,2000)
				}
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{
        background-color: #3d68eb;
		height: auto !important;
	}
    .container-banner{
        width: 100%;
        height: 1142rpx;
        background: url(https://admin.caimei365.com/userfiles/1/images/photo/2024/08/ziluo_bg.jpg) no-repeat;
        background-size: contain;
        box-sizing: border-box;
        padding: 0 100rpx;
        .login-title{
            font-size: $font-size-44;
            line-height: 88rpx;
            color: #ffffff;
            text-align: center;
            margin-bottom: 120rpx;
        }
        .login-input{
        	width: 100%;
        	height: auto;
        	padding:0 24rpx;
        	margin: 0 auto;
        	margin-bottom: 30rpx;
            box-sizing: border-box;
            border-radius: 50rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        	.login-logo{
                width: 200rpx;
                height: 200rpx;
                display: block;
                border-radius: 50%;
                border: 1px solid #e10078;
            }
        }
        .login-btn {
        	width: 300rpx;
        	height: 88rpx;
        	font-size: $font-size-28;
        	line-height: 88rpx;
        	color: #ffffff;
        	margin: 0 auto;
        	margin-bottom: 24rpx;
        	text-align: center;
        	background-color: #e10078;
        	border-radius: 50rpx;
        }
        .login-text{
            font-size: $font-size-26;
            line-height: 48rpx;
            color: #ffffff;
            margin-top: 200rpx;
        }
    }
	
</style>