caimei-applets-caimei/pages/h5/activity/activity-entry.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 + 170 +'px' }">
                <view class="container-title">{{ voteTitle }}</view>
                <view class="login-input">
                	<input type="text" 
                		   v-model="params.ticket"
                		   maxlength="20" 
                           disabled="true"
                		   class="input"  
                	/>
                </view>
                <view class="login-input">
                	<input type="text" 
                		   v-model="params.name"
                		   maxlength="10" 
                		   class="input" 
                		   placeholder="您的姓名"
                	/>
                </view>
                <view class="login-input">
                	<input type="text" 
                		   v-model="params.idCard"
                		   maxlength="20" 
                		   class="input" 
                		   placeholder="证件号码(身份证/港澳台通行证/护照)"
                	/>
                </view>
                <view class="login-input">
                	<input type="text" 
                		   v-model="params.mobile"
                		   maxlength="11" 
                		   class="input" 
                		   placeholder="您的联系电话"
                	/>
                </view>
                <view class="login-input">
                	<input type="text" 
                		   v-model="params.work"
                		   maxlength="15" 
                		   class="input" 
                		   placeholder="您的职业"
                	/>
                </view>
                <view class="login-btn"  v-show="isBundled" @click="handleEntry">绑定采美账号</view>
                <view class="login-text">
                    说明：门票绑定的证件号码是作为进入大会会场的凭证。
                </view>
            </view>
        </template>
        <!-- 提示弹窗 -->
        <tui-modal
        	:show="modal"
        	@click="handleClick"
        	:content="contentModalText"
        	:button="modalButton"
        	color="#333"
        	:size="32"
        	shape="circle"
        	:maskClosable="false"
        />
	</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:{
                    name:'',
                    idCard:'',
                    ticket:'',
                    mobile:'',
                    work:'',
                    userId:''
                },
                voteTitle:'',
                modal: false,
                contentModalText: '', //操作文字提示语句
                modalButton: [
                    {
                    	text: '取消',
                    	type: 'gray',
                    	plain: true //是否空心
                    },
                	{
                		text: '确认绑定',
                		customStyle: {
                			color: '#fff',
                			bgColor: '#e10078'
                		},
                		plain: false
                	}
                ],
                isBundled:true
			}
		},
		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.ticket = option.ticket
                this.voteTitle = option.voteType*1 === 1 ? '大会通票' : '学术套票'
                console.log('userInfo',userInfo)
                if(userInfo.userId){
                    this.params.userId = userInfo.userId
                    this.contentModalText = `您的采美机构账号为【${userInfo.name}】,确认绑定吗？`
                }
                this.getTicketDetails({ ticket: option.ticket})
            },
            // 查询门票信息
            async getTicketDetails(params){
            	try{
            		const res = await this.UserService.getTicketDetails(params)
                    const data = res.data
                    if(data.userId){
                        this.isBundled = false
                        this.params = {...this.params ,...data}
                        this.params.idCard = data.idCard.substring(0, 4) + '**********' + data.idCard.substring(data.idCard.length - 4);
                    }else{
                        this.isBundled = true
                    }
                    this.skeletonShow = false
            	}catch(error){
            		this.$util.msg(error.msg,2000)
            	}
            },
            //确认操作
            handleClick(e) {
            	if (e.index == 1) {
            		this.userTicketBind(this.params)
            	}
            	this.modal = false
            },
            //点击绑定
            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
                }
                if(!this.params.name){
                    this.$util.msg('请输入您的姓名~', 2000)
                    return
                }
                if(!this.params.idCard){
                    this.$util.msg('请输入您的证件号码~', 2000)
                    return
                }
                if(!this.params.mobile){
                    this.$util.msg('请输入您的联系电话~', 2000)
                    return
                }
                if(!this.params.work){
                    this.$util.msg('请输入您的职业~', 2000)
                    return
                }
                this.modal = true
            },
            // 绑定门票
			async userTicketBind(params){
				try{
					await this.UserService.userTicketBind(params)
                    this.$util.msg('绑定成功', 2000, true, 'success')
                    this.params.idCard = ''
                    setTimeout(()=>{
                        this.$api.switchTabTo('/pages/tabBar/home/index')  
                    },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 110rpx;
        .container-title{
            height: 120rpx;
            line-height: 120rpx;
            font-size: $font-size-48;
            font-weight: 600;
            text-align: center;
            color: #FFFFFF;
        }
        .login-title{
            font-size: $font-size-28;
            line-height: 58rpx;
            color: #ffffff;
        }
        .login-input{
        	width: 100%;
        	height: 88rpx;
        	padding:0 24rpx;
        	margin: 0 auto;
        	margin-bottom: 40rpx;
        	background: #FFFFFF;
            box-sizing: border-box;
            border-radius: 50rpx;
        	.input{
        		width: 100%;
        		height: 100%;
        		background: #FFFFFF;
        		font-size: $font-size-28;
        		line-height: 88rpx;
        		color: #333333;
                 border-radius: 50rpx;
        	}
        }
        .login-btn {
        	width: 100%;
        	height: 88rpx;
        	font-size: $font-size-28;
        	line-height: 88rpx;
        	color: #ffffff;
        	margin: 0 auto;
        	text-align: center;
        	background-color: #e10078;
        	border-radius: 50rpx;
        }
        .login-text{
            font-size: $font-size-26;
            line-height: 48rpx;
            color: #ffffff;
            margin-top: 50rpx;
        }
    }
	
</style>