<template>  
    <view class="uni-flex uni-column index-bg">  
        <view class="uni-flex uni-row index-top">  
            <view class="flex-item index-top-l"><view class="left-icon" @click="changeRuleModal()">游戏规则</view></view>  
            <view class="flex-item index-top-r">  
                <view class="right-icon" v-if="loginAppStatus" @click="changeLogsModal()">竞猜记录</view>  
                <view class="right-icon" v-if="!loginAppStatus" @click="loginApp">竞猜记录</view>  
                <!-- <view class="right-icon" v-if="!loginAppStatus" @click="changeLogsModal">竞猜记录</view> -->  
            </view>  
        </view>  

        <view class=" uni-column question-bg">  

            <view class="question-bg-title">  
                <view class="flex-item flex-item-V question-title">德甲第 1 轮</view>  
                <view class="flex-item flex-item-V question-title-2">本场竞猜截止到5月3日 12:00之前</view>  
            </view>  

            <view class="flex-item flex-item-v team-item"   
            v-for="(team, i) in teamList" :key="i">  
                <view class="uni-flex uni-row question-title-3">  
                    <view class="flex-item question-1">  
                        <!-- 主队 <br> -->  
                        <img v-if="team.quiz_result == 1" src="https://aloss.hotforest.cn/bundesliga/virctory.png" alt="img">  
                    </view>  
                    <view class="flex-item question-2">  
                        <img :src="team.home_team_icon" alt="img" />  
                        {{ team.home_team_name }}  
                    </view>  
                    <view class="flex-item question-3">  
                        <view class="question-3-vs">VS</view>  
                        <view><span>{{ team.competition_time }}</span></view>  
                        <view><span>{{ team.home_team_score }} - {{ team.guest_team_score }}</span></view>  
                    </view>  
                    <view class="flex-item question-4">  
                        <img :src="team.guest_team_icon" alt="img" />  
                        {{ team.guest_team_name }}  
                    </view>  
                    <view class="flex-item question-5">  
                        <!-- 客队 <br> -->  
                    <img v-if="team.quiz_result == 2" src="https://aloss.hotforest.cn/bundesliga/virctory.png" alt="img">  
                    </view>  
                </view>  
                <view class="team-answer" v-if="team.quiz_result != 0 ">  
                    <view class="flex-item flex-item-V option-item"  
                     :class="[team.quiz_result==1 ? 'option-active-right' : 'option-active-wrong']"  
                    >  
                        主队胜  
                    </view>  
                    <view class="flex-item flex-item-V option-item "  
                     :class="[team.quiz_result==3 ? 'option-active-right' : 'option-active-wrong']"  
                    >  
                        平  
                    </view>  
                    <view class="flex-item flex-item-V option-item "   
                    :class="[team.quiz_result==2 ? 'option-active-right' : 'option-active-wrong']"   
                    >  
                        客队胜  
                    </view>  
                </view>  

                <view class="team-answer" v-if="team.quiz_result == 0 ">  
                    <view class="flex-item flex-item-V option-item"  
                     :class="[team.id + '_' + 1 == team.checkValue ? 'option-active' : '']"  
                     @click="sOption(team.id, 1)">  
                        主队胜  
                    </view>  
                    <view class="flex-item flex-item-V option-item "  
                     :class="[team.id + '_' + 3 == team.checkValue  ? 'option-active' : '']"  
                     @click="sOption(team.id, 3)">  
                        平  
                    </view>  
                    <view class="flex-item flex-item-V option-item "   
                    :class="[team.id + '_' + 2 == team.checkValue  ? 'option-active' : '']"   
                    @click="sOption(team.id, 2)">  
                        客队胜  
                    </view>  
                </view>  
            </view>  

            <view class="flex-item flex-item-V question-button">  
                <button v-if="loginAppStatus==true && quizStatus==false "   
                @click="addUserQuizLog()" type="default">确认选择</button>  
                <button v-if="loginAppStatus==false"   
                @click="loginApp" type="default">确认选择</button>  
            </view>  

        </view>  

        <view class="rule-modal" v-show="ruleModal" @click="closeRuleModal()"></view>  
        <view class="rule-modal-bg" v-show="ruleModal">  
            <view class="flex-item  rule-title">游戏规则</view>  
            <view class="flex-item rule-content">  
                1.竞猜将于比赛开始前关闭竞猜通道  
                <br />  
                2.系统将随机抽取10位答对竞猜的用户，  
                <br />  
                3.下期活动开始时，将公布获奖用户名单  
                <br />  
                4.获奖用户，请添加全民体育官方微信  
                <br />  
                （NationSports）领取相应奖励  
            </view>  
        </view>  

        <view class="logs-modal" v-show="logsModal" @click="closeLogsModal()"></view>  
        <view class="logs-modal-bg" v-show="logsModal">  
            <view class="flex-item  logs-title">竞猜记录</view>  
            <view class="uni-row uni-flex logs-1 ">  
                <view class="flex-item logs-1-1">时间</view>  
                <view class="flex-item logs-1-2">赛事</view>  
                <view class="flex-item logs-1-3">我的竞猜</view>  
                <view class="flex-item logs-1-4">结果</view>  
            </view>  
            <view class="flex-item logs-2">第一轮</view>  
            <scroll-view :scroll-top="scrollTop"   
            scroll-y="true"  
             class="logs-scroll-Y"  
            @scrolltoupper="upper"   
            @scrolltolower="lower"   
            @scroll="scroll">  
                <view class="scroll-view-item logs-3" v-for="(log, i) in userQuizLogs" :key="i">  
                    <view class="uni-row uni-flex ">  
                        <view class="flex-item logs-3-font logs-3-1">{{log.detail.competition_time}}</view>  
                        <view class="flex-item logs-3-font logs-3-2">  
                        {{log.detail.home_team_name}} <br>  
                        {{log.detail.guest_team_name}}  
                        </view>  
                        <view class="flex-item logs-3-font logs-3-3">  
                            <text v-if="log.result == 1">{{log.detail.home_team_name}}</text>  
                            <text v-if="log.result == 2">{{log.detail.guest_team_name}}</text>  
                            <text v-if="log.result == 3">平</text>  
                            <!-- {{log.result}} -->  
                        </view>  
                        <view class="flex-item logs-3-font logs-3-4">  
                            <!-- {{log.r_status}} -->  
                            <text v-if="log.r_status == -1">未开</text>  
                            <text v-if="log.r_status == 1">胜</text>  
                            <text v-if="log.r_status == 0">负</text>  
                        </view>  
                    </view>  
                </view>  
            </scroll-view>  
        </view>  

        <view class="info-modal" v-show="infoModal" @click="closeInfoModal()"></view>  
        <view class="info-modal-bg" v-show="infoModal">  
            <view class="flex-item  info-title">信息登记</view>  
            <view class="flex-item info-content">  
                <input type="text" v-model="name" placeholder="请输入姓名"> <br>  
                <input type="number" v-model="mobile" placeholder="请输入手机号">   
            </view>  
            <view  class="info-button">  
                <button  type="default" @click="updateUserInfo()">确定</button>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
import base from '@/utils/base.js';  
import http from '@/utils/http.js';  

export default {  
    data() {  
        return {  
            scrollTop: 0,  
            old: {  
                scrollTop: 0  
            },  
            teamList: [],  
            selectList: [],  
            ruleModal: false,  
            logsModal: false,  
            infoModal:false,  
            appMsgModal:false,  
            teamId: 0,  
            userQuizLogs:[],  
            loginAppStatus: false,  
            uid: null,  
            token: null,  
            ns_device_id: null,  
            activity_id: 4,  
            name:'',  
            mobile:'',  
            quizStatus:0,  

        };  
    },  
    onLoad(option) {  

        if (typeof contact === 'undefined') {  
            uni.showToast({  
                title:'请下载全民体育APP参与活动',  
                icon:'none'  
            })  
            // this.appMsgModal = true  
            // this.uid = 469247;  
            // this.activity_id = 5;  
        } else {  
            if (option.uid !== '' && option.uid !== 'null' && option.uid !== undefined) {  
                uni.setStorageSync('uid', option.uid);  
                uni.setStorageSync('token', option.token);  
                uni.setStorageSync('ns_device_id', option.ns_device_id);  
                this.loginAppStatus = true;  

                this.uid = uni.getStorageSync('uid');  
                this.token = uni.getStorageSync('token');  
                this.ns_device_id = uni.getStorageSync('ns_device_id');  
                this.checkQuizStatus(this.uid,this.$question.activity_id);  

            } else {  
                this.getTeamList();  
                this.loginAppStatus = false;  
                // open this url in app env  
                contact.onLoginDone = function(uid, token) {  
                    uni.setStorageSync('loginAppStatus', true);  
                    let ns_device_id = uni.getStorageSync('ns_device_id');  
                    uni.reLaunch({  
                        url: '/pages/index/mid?uid=' + uid + '&token=' + token + '&ns_device_id=' + ns_device_id  
                    });  
                };  
            }  
        }  

    },  
    methods: {  

        loginApp() {  
            contact.requireLogin();  
            console.log('relogin');  
        },  
        // 手机号为空时  
        updateUserInfo:function(){  
            var that = this;  
            var uid =that.uid;  
            var activity_id = that.$question.activity_id;  
            var ns_device_id = that.ns_device_id;  
            var mobile = that.mobile;  
            var name = that.name;  
            var logs = that.selectList;  
            var user_type = 3;  
            if(name.length < 1 || name.length > 5){  
                uni.showToast({  
                    title:'名字1-5个字符',  
                    icon:"none"  
                })  
                return;  
            }  
            if(mobile.length != 11 ){  
                uni.showToast({  
                    title:'请输入11位手机号码',  
                    icon:'none'  
                })  
                return;  
            }  

            let data = {  
                uid: uid,  
                name: name,  
                mobile: mobile,  
                activity_id: activity_id,  
                ns_device_id: ns_device_id,  
                user_type: user_type  
            };  

            http.post(base.sq + '/activity/api.Users/add', data)  
                .then(res => {  
                    if (res.status == 200) {  
                        console.log(res);  
                        //用户信息添加之后 添加用户竞猜日志  
                        uni.request({  
                            url: base.sq + '/activity/api.quiz/addUserQuizLog',  
                            data: {  
                                uid: uid,  
                                activity_id: activity_id,  
                                logs: JSON.stringify(logs)  
                            },  
                            method: 'POST',  
                            success: res => {  
                                console.log(res);  
                                if (res.statusCode === 200) {  
                                    if (res.data.code === 0) {  
                                        //竞猜按钮变灰色  
                                        this.quizStatus = true;  
                                        uni.showToast({  
                                            title:'竞猜成功',  
                                            icon:"none"  
                                        })  
                                    }else{  
                                        uni.showToast({  
                                            title:res.data.info,  
                                            icon:"none"  
                                        })  

                                    }  
                                } else {  
                                    uni.showToast({  
                                        title:'server error',  
                                        icon:"none"  
                                    })  
                                }  
                            }  
                        });  
                    } else {  
                        uni.showToast({  
                            title:'server error',  
                            icon:"none"  
                        })  
                    }  
                })  
                .catch(error => {})  
                .finally(() => {});  

            this.infoModal = false;  

        },  
        // 手机号非空时  
        addUserInfo:function(name,mobile){  
            var that = this;  
            var uid =that.uid;  
            var activity_id = that.$question.activity_id;  
            var ns_device_id = that.ns_device_id;  

            var logs = that.selectList;  
            var user_type = 1;  

            let data = {  
                uid: uid,  
                name: name,  
                mobile: mobile,  
                activity_id: activity_id,  
                ns_device_id: ns_device_id,  
                user_type: user_type  
            };  

            http.post(base.sq + '/activity/api.Users/add', data)  
                .then(res => {  
                    if (res.status == 200) {  
                        // console.log(res);  
                        //用户信息添加之后 添加用户竞猜日志  
                        uni.request({  
                            url: base.sq + '/activity/api.quiz/addUserQuizLog',  
                            data: {  
                                uid: uid,  
                                activity_id: activity_id,  
                                logs: JSON.stringify(logs)  
                            },  
                            method: 'POST',  
                            success: res => {  
                                console.log(res);  
                                if (res.statusCode === 200) {  
                                    if (res.data.code === 0) {  
                                        //竞猜按钮变灰色  
                                        this.quizStatus = true;  
                                        uni.showToast({  
                                            title:'竞猜成功',  
                                            icon:"none"  
                                        })  
                                        // console.log(this.quizStatus);  
                                    }else{  
                                        uni.showToast({  
                                            title:res.data.info,  
                                            icon:"none"  
                                        })  

                                    }  
                                } else {  
                                    uni.showToast({  
                                        title:'server error',  
                                        icon:"none"  
                                    })  
                                }  
                            }  
                        });  
                    } else {  
                        uni.showToast({  
                            title:'server error',  
                            icon:"none"  
                        })  
                    }  
                })  
                .catch(error => {})  
                .finally(() => {});  

            this.infoModal = false;  

        },  
        checkQuizStatus:function(uid,activity_id){  
            let data = {  
                uid:uid,  
                activity_id:activity_id  
            }  
            http.post(base.sq + '/activity/api.Quiz/checkUserQuizStatus', data)  
            .then(res=>{  
                console.log(res);  
                if (res.status == 200) {  

                    this.quizStatus = res.data.data.status;   

                    if(res.data.data.status==true){  
                        this.getUserQuizTeamList(uid,activity_id);  
                    }else{  
                        this.getTeamList();  
                    }  

                } else {  
                    uni.showToast({  
                        title:'server error',  
                        icon:"none"  
                    })  
                }  
            })  
        },  

        getUserQuizLogs(uid,activity_id){  
            uni.request({  
                url: base.sq + '/activity/api.quiz/getUserQuizLogs',  
                data: {  
                    uid: uid,  
                    activity_id: activity_id,  
                },  
                method: 'POST',  
                success: res => {  
                    // console.log(res);  
                    if (res.statusCode === 200) {  
                        if (res.data.code === 0) {  
                            this.userQuizLogs = res.data.data;  
                            console.log(this.userQuizLogs);  
                        }else{  
                            uni.showToast({  
                                title:res.data.info,  
                                icon:"none"  
                            })  
                        }  
                    } else {  
                        uni.showToast({  
                            title:'server error',  
                            icon:"none"  
                        })  
                    }  
                }  
            });  
        },  
        sOption(teamId, result) {  
            let that = this;  
            that.teamId = teamId;  

            var key = 'team_' + teamId;  
            var teamList = this.teamList;  
            var a = teamId + '_' + result;  

            teamList.forEach(item => {  
                if (item.id === teamId) {  
                    item.checkValue = a;  
                }  
            });  
            // todos  two days  
            this.$forceUpdate((this.teamList = teamList));  
            // this.teamList = teamList;  

            var selectList = this.selectList;  
            var optionObject = {  
                team_id: teamId,  
                result: result  
            };  

            for (var i = 0; i < selectList.length; i++) {  
                var team_id = selectList[i]['team_id'];  
                if (team_id == teamId) {  
                    selectList.splice(i, 1);  
                }  
            }  
            selectList.push(optionObject);  
            this.selectList = selectList;  

        },  
        closeRuleModal() {  
            this.ruleModal = false;  
        },  
        changeRuleModal() {  
            this.ruleModal = true;  
        },  
        closeLogsModal() {  
            this.logsModal = false;  
        },  
        changeLogsModal() {  
            this.logsModal = true;  
            this.getUserQuizLogs(this.uid,this.$question.activity_id);  
        },  
        closeInfoModal() {  
            this.infoModal = false;  
        },  
        addUserQuizLog: function() {  
            var that = this;  

            var uid = that.uid;  
            var activity_id = that.activity_id;  
            var ns_device_id = that.ns_device_id;  
            var token = that.token;  

            // 判断题目是否全部答完  
            var teamLength = that.teamList.length;  
            var selectLength = that.selectList.length;  
            if(teamLength>selectLength){  
                uni.showToast({  
                    title:'请继续答题',  
                    icon:'none'  
                })  
                return;  
            }  

            let data = {  
                uid: uid,  
                activity_id: activity_id  
            };  
            http.post(base.sq + '/activity/api.users/checkUidStatus', data)  
                .then(res => {  
                    // console.log(res);  
                    if (res.status == 200) {  
                        // console.log(res.data.data.count);  
                        let count = res.data.data.count;  

                        // 检查用户是否在数据库中  
                        if (count <= 0) {  
                            let req_url = base.bd + '/v3/user/info';  
                            let headers = {  
                                ns_device_id: ns_device_id,  
                                uid: uid,  
                                token:token  
                            };  
                            http.get(req_url, { headers: headers }).then(res => {  
                                // console.log(res);  
                                if (res.status == 200) {  
                                    if (res.data.Status == 1) {  
                                        let nickname = res.data.Data.nickname;  
                                        let mobile = res.data.Data.phone;  
                                        console.log(res);  
                                        if(mobile == ''){  
                                            this.infoModal = true;  
                                        }else{  
                                            this.addUserInfo(nickname,mobile);  
                                        }  

                                    }   

                                } else {  
                                    uni.showToast({  
                                        title:'server error',  
                                        icon:"none"  
                                    })  
                                }  
                            });  
                        }   

                    } else {  
                        uni.showToast({  
                            title:'server error',  
                            icon:"none"  
                        })  
                    }  
                })  
                .catch(error => {})  
                .finally(() => {});  
        },  
        getTeamList: function() {  
            uni.request({  
                url: base.sq + '/activity/api.quiz/teamList',  
                success: res => {  
                    console.log(res)  
                    if (res.statusCode === 200) {  
                        if (res.data.code === 0) {  
                            var list = res.data.data;  
                            this.teamList = list;  
                            // console.log(list);  
                        }  
                    } else {  
                        uni.showToast({  
                            title:'server error',  
                            icon:"none"  
                        })  
                    }  
                }  
            });  
        },  
        getUserQuizTeamList: function(uid,activity_id) {  
            uni.request({  
                url: base.sq + '/activity/api.quiz/getUserQuizTeamList',  
                data:{  
                    uid:uid,  
                    activity_id:activity_id  
                },  
                method:'POST',  
                success: res => {  
                    console.log(res)  
                    if (res.statusCode === 200) {  
                        if (res.data.code === 0) {  
                            var list = res.data.data;  

                            this.teamList = list;  
                            // console.log(list);  
                        }  
                    } else {  
                        uni.showToast({  
                            title:'server error',  
                            icon:"none"  
                        })  
                    }  
                }  
            });  
        },  

    }  
};  
</script>  

<style>  
.index-bg {  
    background: url(https://aloss.hotforest.cn/bundesliga/index-bg.png) no-repeat center;  
    background-size: 100% 100%;  
    height: 100%;  
}  

.index-top {  
    margin-top: 114rpx;  
}  
.index-top-l {  
    width: 50%;  
    text-align: left;  
}  
.index-top-r {  
    width: 50%;  
    vertical-align: text-bottom;  
}  
.left-icon {  
    text-align: center;  
    background: url(https://aloss.hotforest.cn/bundesliga/left-icon.png) no-repeat center;  
    background-size: 100% 100%;  
    width: 134rpx;  
    height: 55rpx;  

    font-size: 22rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight: 400;  
    color: rgba(146, 251, 255, 1);  
    line-height: 55rpx;  
}  
.right-icon {  
    margin-left: auto;  
    text-align: center;  
    background: url(https://aloss.hotforest.cn/bundesliga/right-icon.png) no-repeat center;  
    background-size: 100% 100%;  
    width: 134rpx;  
    height: 55rpx;  
    font-size: 22rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight: 400;  
    color: rgba(146, 251, 255, 1);  
    line-height: 55rpx;  
}  

.question-bg {  
    /* background: url(https://aloss.hotforest.cn/bundesliga/question-bg.png) no-repeat center; */  
    background-size: 100% 100%;  
    /* width: 708rpx; */  
    /* height: 700rpx; */  
    width: 100%;  
    /* height: 100%; */  
    margin:0 auto;  
    margin-top: 40%;  
    background-color: rgb(56,30,128);  

}  
.question-bg-title{  
    width: 708rpx;  
    margin: 0 auto;  
    margin-top: 20rpx;  
    border-radius: 30rpx;  
    background-color: rgba(50, 141, 255, 1);  
}  
.team-item{  
    background-color: #FFFFFF;  
    width: 708rpx;  
    margin: 0 auto;  
    border-radius: 30rpx;  

}  
.team-answer{  
    padding-bottom: 30rpx;  
}  

.question-title-p {  
    margin: auto;  
}  

.question-title {  
    text-align: center;  
    font-size: 40rpx;  
    line-height: 60rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight: 400;  
    color: rgba(254, 254, 254, 1);  
    text-shadow: 0px 3rpx 2rpx rgba(0, 0, 0, 0.29);  

}  
.question-title-2 {  
    text-align: center;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(255, 241, 161, 1);  

}  

.question-title-3 {  
    margin-top: 30rpx;  
    padding-bottom: 30rpx;  
    padding-top: 30rpx;  
}  

.question-1 {  
    width: 10%;  
    margin-left: 2%;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(51, 51, 51, 1);  
}  
.question-1 img{  
    width: 116rpx;  
    height: 113rpx;  
}  
.question-5 {  
    width: 10%;  
    margin-left: 2%;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(51, 51, 51, 1);  
}  
.question-5 img{  
    width: 116rpx;  
    height: 113rpx;  
}  
.question-2 {  
    width: 20%;  
    margin-left: 2%;  
    text-align: center;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(51, 51, 51, 1);  
}  
.question-2 img {  
    max-width: 100%;  
    max-height: 100%;  
    /* width: 148rpx;  
    height: 110rpx; */  
}  
.question-4 {  
    width: 20%;  
    margin-left: 2%;  
    text-align: center;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(51, 51, 51, 1);  
}  
.question-4 img {  
    width: 100%;  
}  

.question-3 {  
    text-align: center;  
    width: 30%;  
}  
.question-3-vs{  
    font-size: 46rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight: bolder;  
    color: rgba(50, 141, 255, 1);  
}  
.question-3 span {  
    font-size: 28rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight:bolder;  
    color: rgba(50, 141, 255, 1);  

}  
.option-name-1 {  
    text-align: center;  
    width: 100%;  
    font-size: 30rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(50, 141, 255, 1);  
}  

.option-active {  
    /* background-color: #29A518; */  
    background-color: #007AFF;  
    color: #ffffff !important;  
    border: none !important;  
}  
.option-active-wrong {  
    /* background-color: #29A518; */  
    background-color: #ff4f15;  
    color: #ffffff !important;  
    border: none !important;  
}  

.option-active-right {  
    /* background-color: #29A518; */  
    background-color: #29A518;  
    color: #ffffff !important;  
    border: none !important;  
}  

.option-item {  
    width: 600rpx;  

    height: 62rpx;  
    border: 1px solid rgba(0, 160, 233, 1);  
    border-radius: 30rpx;  
    margin: 0 auto;  
    margin-top: 20rpx;  
    text-align: center;  

    font-size: 30rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(50, 141, 255, 1);  
}  

.question-button {  
    margin-top: 30rpx;  
    margin-bottom: 30rpx;  
}  
.question-button button {  
    background: url(https://aloss.hotforest.cn/bundesliga/button-y.png) no-repeat center;  
    background-size: 100% 100%;  
    width: 365rpx;  
    height: 92rpx;  

    font-size: 36rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(255, 255, 255, 1);  

    text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.75);  
    -webkit-text-stroke: 3px undefined;  
    text-stroke: 3px undefined;  
}  
.scroll-Y {  
    width: 100%;  
}  

.rule-modal {  
    position: fixed;  
    z-index: 100;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    background-color: rgba(0, 0, 0, 0.6);  
}  
.rule-modal-bg {  
    position: fixed;  
    z-index: 110;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    margin: auto;  
    width: 552rpx;  
    height: 452rpx;  
    background: url(https://aloss.hotforest.cn/bundesliga/modal-1.png) no-repeat center;  
    background-size: 100% 100%;  
}  
.rule-title {  
    font-size: 30rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight: 400;  
    color: rgba(255, 255, 255, 1);  
    line-height: 35rpx;  
    padding-top: 31rpx;  
    padding-left: 34rpx;  
}  
.rule-content {  
    padding-left: 34rpx;  
    padding-top: 80rpx;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(255, 255, 255, 1);  
}  

.logs-modal {  
    position: fixed;  
    z-index: 100;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    background-color: rgba(0, 0, 0, 0.6);  
}  
.logs-modal-bg {  
    position: fixed;  
    z-index: 110;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    margin: auto;  
    /* width: 552rpx; */  
    width: 80%;  
    height: 80%;  
    /* height: 452rpx; */  
    background: url(https://aloss.hotforest.cn/bundesliga/modal-2.png) no-repeat center;  
    background-size: 100% 100%;  
}  
.logs-title {  
    font-size: 30rpx;  
    font-family: MF LingHei (Noncommercial);  
    color: rgba(255, 255, 255, 1);  
    line-height: 80rpx;  
    width: 90%;  
    height: 80rpx;  
    text-indent: 30rpx;  
    font-weight: bolder;  
}  
.logs-content {  
    padding-left: 34rpx;  
    padding-top: 80rpx;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(255, 255, 255, 1);  
}  

.logs-1{  
    width: 99%;  
    height: 60rpx;  
    line-height: 60rpx;  
    border-bottom: 1px solid #39B8BF;  
    font-size:24rpx;  
    font-family:Lantinghei SC;  
    color: #FFFFFF;  

}  
.logs-1-1{  
    width: 35%;  
    text-indent: 20rpx;  
}  
.logs-1-2{  
    width: 20%;  
}  
.logs-1-3{  
    width: 25%;  
}  
.logs-1-4{  
    width: 20%;  
    text-align: center;  
}  
.logs-2{  
    width: 99%;  
    height: 50rpx;  
    line-height: 50rpx;  
    text-indent: 20rpx;  
    font-size:18rpx;  
    font-family:Lantinghei SC;  
    font-weight:600;  
    color:rgba(255,255,255,1);  
    border-bottom: 1px dashed  #39B8BF;  
}  

.logs-3{  
    padding:20rpx 20rpx 10rpx 20rpx;  
    border-bottom: 1px solid #39B8BF;  
}  
.logs-3-font{  
    font-size:18rpx;  
    font-family:Lantinghei SC;  
    font-weight:600;  
    color:rgba(255,255,255,1);  
}  
.logs-3-1{  
    width: 35%;  
}  
.logs-3-2{  
    width: 20%;  
}  
.logs-3-3{  
    width: 25%;  
    text-align: center;  
}  
.logs-3-4{  
    width: 20%;  
    text-align: center;  
}  

.info-modal {  
    position: fixed;  
    z-index: 100;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    background-color: rgba(0, 0, 0, 0.6);  
}  
.info-modal-bg {  
    position: fixed;  
    z-index: 110;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
    margin: auto;  
    width: 552rpx;  
    height: 452rpx;  
    background: url(https://aloss.hotforest.cn/bundesliga/modal-1.png) no-repeat center;  
    background-size: 100% 100%;  
}  
.info-title {  
    font-size: 30rpx;  
    font-family: MF LingHei (Noncommercial);  
    font-weight: 400;  
    color: rgba(255, 255, 255, 1);  
    line-height: 35rpx;  
    padding-top: 31rpx;  
    padding-left: 34rpx;  
}  
.info-content {  
    width: 90%;  
    padding-left: 34rpx;  
    padding-top: 80rpx;  
    font-size: 24rpx;  
    font-family: Lantinghei SC;  
    font-weight: 600;  
    color: rgba(255, 255, 255, 1);  
}  
.info-content input{  
    border-bottom: 1rpx solid #39B8BF;  

}  

/deep/  .uni-input-placeholder{  
    color: #FFFFFF !important;  
    font-size:24rpx;  
    font-family:Lantinghei SC;  
    font-weight:600;  
}  

.info-button{  

    margin-top: 80rpx;  
}  
.info-button-quiz-active{  
    background: #888888 !important;  

}  
.info-button button{  
    margin: 0 auto;  
    width: 147rpx;  
    height: 50rpx;  
    line-height: 50rpx;  
    font-size:24rpx;  
    font-family:Lantinghei SC;  
    font-weight:600;  
    color:rgba(255,255,255,1);  
    text-shadow:0px 1px 0px rgba(130,66,0,0.26);  
    background: url(https://aloss.hotforest.cn/bundesliga/info-button.png) no-repeat center;  
}  
.logs-scroll-Y{  
    width: 99%;  
    height: 70%;  
}  
</style>

使用v-if 控制输入框是否显示 ， 输入框隐藏了 但是placeholder仍然展示，用v-show 控制也无法解决 最后自己使用类名控制，用display:none 来控制Input的显隐 才最终解决

最近刚接触 uni-app, 准备使用 ts 作为脚本语言,(毕竟代码提示比js要实用太多)。
没有意外，踩坑了。uni 为了在vue基础上兼容 微信小程序, 将小程序变量改写为 data(){ return {}; }. 导致 仅使用 @Prop(),无法正常更改变量值.

然后,花了点时间，扩展了两个vue装饰器,用来解决 成员变量写入data(), 用的话安装下 yarn add uni-property-decorator . 用 @Data() 和 @DataInit 替换 @Prop() 注解.

原因: @Prop 是在 class实例化的时候将变量转化为vue变量的,监听的是成员变量本身的更新。不会触发data变动。而uni的逻辑额外将data中变量转化为可监听的vue变量,每次读写值的时候其实都相当与读写的data(){}中的变量. 两个作用对象不一样。

最后分享下,新增的装饰器源码,里面有实现逻辑。

github: https://github.com/a951055/uni-property-decorator

(麻烦看到点颗星,谢谢谢谢...)

话不多说，效果图如下

实现的原理，就是设置参数：adjust-position="false",然后软键盘弹起时，页面就不会自动上推，然后通过焦点，获取键盘高度，设置标签样式:position: relative;后就通过bottom: 0;来控制输入框的位置

1. 第一步，textarea标签，代码如下，以下参数不懂是啥的请前往该链接查看---》textarea：

   <textarea   
   style="position: relative;bottom: 0;height: 140rpx;"  
   :style="textareaStyle"  
   auto-height="true"          
   adjust-position="false"   
   hold-keyboard="true"   
   cursor-spacing="0"   
   maxlength="100"   
   @focus="textareaFocus"   
   @blur="textareaBlur"  
   />

   2.第二步，就是获取焦点、失去焦点的这两个方法了

           textareaFocus(e) {  
                              //点击输入框时，获取键盘高度，设置距离底部的高度为键盘的高度  
               this.textareaStyle= 'bottom: '+e.detail.height+'px;';  
           },  
           textareaBlur(e){  
                               //失去焦点时，设置距离底部为0  
               this.inputClassParent = 'bottom: 0px;';  
           },

要求：
1.开发过UNI产品

2. 有项目开发经验
3. 认真负责
4. 开发时间充裕，不影响项目交付
5. 有项目基础审美

有意向的联系：13216672697

我司是外包公司，已与UNI平台多名开发者合作，因项目压力大，需要长期外包，付款爽快，信誉，可以去问。

在开发双向联动功能需要预获取盒子高度而存入容器时，由于图片设置了懒加载，在微信小程序端无法获取到该图片预设高度而会获取图片原始高度,导致图片父级元素高度不一（首屏加载的图片可以获取到预设高度）。而app端、h5端正常
解决方案：方案1.不设懒加载，方案2：给image的父级元素加高 ，方案3：给官方提议修复此问题，而让其更好的跨端

即时通讯 用哪个框架比较好 有做个类似的朋友 指导下

很多小伙伴在5.28号开始webview调试的时候会一直卡在加载中这个界面无法正常进行调试。
经过排查，非HBuilderX的问题。
最后结论，chrome在28号凌晨进行了更新，将版本更新至了83.0.4103.61.这个版本和HBuilderX的webView调试产生了冲突。
只需要将chrome浏览器降低版本至78.0.3904.70或者更低即可。这里提供78.0.3904.70的资源包。

链接:资源包地址 提取码:o9yl

下载文件后，在进程中关闭所有chrome相关的进程。并在chrome的文件夹位置，
如图所示将原先的这两个画方框的文件删掉或者改个名字做备份（我这里加上666做备份）。
把链接中压缩包解压，把这两个文件粘贴至文件夹中即可。

再次打开浏览器，查看版本是否更改成功。
打开HBuilderX进行调试（第一次会失败）
关闭，再次进行调试（2秒左右延迟）
好了，你现在又可以进行正常的webView调试了！

用一张正方形图片搞定安卓启动页
使用.9.png格式图片，我们可以将启动页设置为上中下左右任意区域图片保真不变形的效果。

示例Dome下载：

安卓启动图问题
HBuilderX上android端提供的三个尺寸的启动图片完全不能满足全面屏盛行的时代，各种比例的屏幕上出现启动图片变形问题，让人很难受。
DCloud官方的解决方案是使用.9.png图片详见。

个人解决方法
以前我都是建议不要是有复杂图案来作为启动图片，直接简单的写几个字就行，这样字体的变形是不容易被人察觉的。
我前期还调研了几家大厂的应用启动页，图案都非常简单。
个人很推荐这种方式，比较简单易懂。

效果参考下图：

但是种方式的局限性也很大，一般要求放个应用logo上去时，就得考虑下面的方案了。

.9.png图片
安卓官方深知开发者们适配屏幕的痛苦，提供了.9.png格式。
但是一般开发时，这种格式图片都是用来做什么按键背景、聊天框背景的。
拿来做启动页也行，但是注意，它的适配逻辑是对指定的取消进行复制；那么启动图要求必须有纯色的横向区域和竖向区域，或纹理。

正方形启动图示例
一般的，有上中下左右几个区域会放置内容，布局结构如下图（一张正方形的图片）。

未做.9.png时，直接设置为启动页的效果如下：
明显几个圆形都发生了变形（废话了，肯定会变形的）。

再来看看使用.9.png后的效果：
满足适配大多数屏幕不变形的需求。

标注示例图：
按照此标注方法，可以满足绝大多数启动图的制作需求。

• 底部和右边的黑边拉满即可，不用过多操作。
• 主要调整顶部和左侧的拉升区域，区域大小会影响拉升时的比例。

关于.9.png的制作
1、可以直接使用ps进行制作，注意不能压缩。
2、Android stoud 可以直接打开.9.png图片编辑。
3、eclipse 可以安装相关插件进行.9.png图片编辑。

> 有朋友在使用Android Studio 自带工具调试时，出现四边都是满的黑边，切无法调整的情况。
这种情况:

• 1、使用android studio时只需选中需要生成的png文件，然后右键，点击create 9-patch file 选项。
• 2、也可以使用PS手动给图片四周增加1px透明边框，然后在使用Android Studio 自带工具调整。

注意事项
1、9.png图片制作完成后，文件不能进行压缩
2、使用单张9png作为启动页时，在屏幕尺寸跨度太大时会有显示差异，见下图：

注意：
如果你的应用需要兼容上古版本的android，请注意上古版本可能不兼容.9.png，制作.9.png时还是别用正方形，尽量使用官方内定的三个尺寸来制作。
（我手里目前没有不支持的android版本，朋友们要是遇到了麻烦反馈一下）。

优化四个边的间距

插件市场下载源码

侧滑菜单有很大的坑，根据网友的描述，在苹果上正常，安卓上不能用。并且社区里很多人提了问题都没得回复。
目前最有效的方法只能修改源码，增加window.h5pullDown的判断。
在引入mui前添加一个全局变量
<script>var h5pullDown = true;</script>
方案一
我是直接改的mui.min.js，源码这里使用了变量替换，全文总共三个a.os.plus&&a.os.android。第一个是muiback的判断处理，跳过。第二个就是上面2770那个地方（前后核对关键词container或者plusready、webview），直接添加并且，增加&&window.h5pullDown。第三个是4920的那个地方，这里相当于在方法头部，并且不是使用非判断，我差点以为找错了，所以这里直接接着使用并且，增加&&window.h5pullDown。保存。测试一切都好了。
方案二
而mui.js里，需要找到2770行，其大致内容是
var container=pullRefreshOptions.container;
if(container){
var $container=$(container);
if($container.length==1){
if($.os.plus&&$.os.android &&window.h5pullDown){//就是这里需要新增window.h5pullDown的判断，增加并且符号
$.plusReady(function(){
var webview=plus.webview.currentWebview();
......
})
}
}
然后是第二处地方4920行，大致内容是
$(function($,document){
if(!($.os.plus&&$.os.android)||window.h5pullDown){//就是这里需要新增window.h5pullDown的判断，如果是有！，需要添加或者符号
return;
}
//这里如果没有return，就直接在判断时使用并且，要求是安卓的5+环境
})
方案二是手打代码，整体复制请仔细确认。

在项目维护时客户反映iphone手机上传图片时，图片自动旋转了，但是自己的手机不会，
我的是iOS 12.4的系统客户的是13.4.1
iOS 13.4之前浏览器不会对带 EXIF 信息的图片进行回正，但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。

新闻/资讯应用模板的swiper组件是怎么自适应高度的？我用HBuilder X 2.7.9 用内置uni-ui的项目模板生成 的项目，使用swiper组件高度无法自适应？？？？？？？？？？？？？

内置uni-ui的项目模板的swiper

新闻/资讯应用模板的swiper