zhangxiaoxu123456
2021-12-20 301289e539c417995f95f5cb91fd1f6043bb7cfd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
    <view class="wrap">
        <view class="top"></view>
        <view class="content">
            <view class="title">欢迎登录美团</view>
            <input class="u-border-bottom" type="number" v-model="tel" placeholder="请输入手机号" />
            <view class="tips">未注册的手机号验证后自动创建美团账号</view>
            <button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
            <view class="alternative">
                <view class="password">密码登录</view>
                <view class="issue">遇到问题</view>
            </view>
        </view>
        <view class="buttom">
            <view class="loginType">
                <view class="wechat item">
                    <view class="icon"><u-icon size="70" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
                    微信
                </view>
                <view class="QQ item">
                    <view class="icon"><u-icon size="70" name="qq-fill" color="rgb(17,183,233)"></u-icon></view>
                    QQ
                </view>
            </view>
            <view class="hint">
                登录代表同意
                <text class="link">美团点评用户协议、隐私政策,</text>
                并授权使用您的美团点评账号信息(如昵称、头像、收获地址)以便您统一管理
            </view>
        </view>
    </view>
</template>
 
<script>
export default {
    data() {
        return {
            tel: ''
        }
    },
    computed: {
        inputStyle() {
            let style = {};
            if(this.tel) {
                style.color = "#fff";
                style.backgroundColor = this.$u.color['warning'];
            }
            return style;
        }
    },
    methods: {
        submit() {
            if(this.$u.test.mobile(this.tel)) {
                this.$u.route({
                    url: 'pages/template/login/code'
                })
            }
        }
    }
};
</script>
 
<style lang="scss" scoped>
.wrap {
    font-size: 28rpx;
    .content {
        width: 600rpx;
        margin: 80rpx auto 0;
 
        .title {
            text-align: left;
            font-size: 60rpx;
            font-weight: 500;
            margin-bottom: 100rpx;
        }
        input {
            text-align: left;
            margin-bottom: 10rpx;
            padding-bottom: 6rpx;
        }
        .tips {
            color: $u-type-info;
            margin-bottom: 60rpx;
            margin-top: 8rpx;
        }
        .getCaptcha {
            background-color: rgb(253, 243, 208);
            color: $u-tips-color;
            border: none;
            font-size: 30rpx;
            padding: 12rpx 0;
            
            &::after {
                border: none;
            }
        }
        .alternative {
            color: $u-tips-color;
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
        }
    }
    .buttom {
        .loginType {
            display: flex;
            padding: 350rpx 150rpx 150rpx 150rpx;
            justify-content:space-between;
            
            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: $u-content-color;
                font-size: 28rpx;
            }
        }
        
        .hint {
            padding: 20rpx 40rpx;
            font-size: 20rpx;
            color: $u-tips-color;
            
            .link {
                color: $u-type-warning;
            }
        }
    }
}
</style>