打造一款跨平臺即時通訊_登陸界面_1

uniapp app應用跨平臺技術

 

<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="content_body">
			<u-avatar src="/static/icon-40@3x.png" mode="square"></u-avatar>
			<view class="content_body_pswd">
				<u-cell-group>
					<u-field v-model="_login.userName" clearable type="text" label="用戶名" placeholder="請填寫用戶名"></u-field>
					<u-field v-model="_login.passWord" clearable type="text" password label="密碼" placeholder="請填寫密碼"></u-field>
				</u-cell-group>
			</view>
			<view class="read">
				<u-checkbox name="isRead" v-model="isRead">
					已閱讀
					<span class="agreement" @click="handleToAgreement">《xxx協議》</span>
				</u-checkbox>
			</view>
			<view class="content_body_btn"><u-button :ripple="true" type="success" @click="doLogin">登陸</u-button></view>
		</view>
		<view class=" u-flex u-row-around safe-area-inset-bottom content_footer">
			<text>找回密碼</text>
			<text @tap="clickSheet">更多選項</text>
		</view>
		<u-action-sheet :list="list" @click="handleAction" v-model="show" border-radius="25" safe-area-inset-bottom></u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			isRead: false,
			list: [
				{
					text: '切換帳號',
					fontSize: '28'
				},
				{
					text: '註冊',
					fontSize: '28'
				}
			]
		};
	},
	onLoad() {},
	onShow() {},
	methods: {
		handleAction (i) {
			if (i === 1) {
				this.$u.route({
					url: 'pages/register/register'
				})
			}
		},
		handleToAgreement () {
			this.$u.route({
				url: 'pages/agreement/agreement'
			})
		},
		clickSheet() {
			this.show = true;
		},
		doLogin() {
			this.$socket.login(this._login.userName, this._login.passWord, null,res=>{
				if (res.success) {
				    //this.$u.vuex('_user_info', res.response.data)
					// 緩存用戶
					this.$u.vuex('_user_info', res.response.data)
					this.$u.vuex('_login',this._login)
					// 緩存通信錄
					this.$socket.listGuests(this._user_info.id, res => {
						this.$u.vuex('firendList', res.response.data)
					})
					//緩存連接
					this.$socket.getLinks(this._user_info.id, res=>{
						this.$u.vuex('links',res.response.data)
					});
					// 跳轉到消息列表
					this.$u.route({
						url: 'pages/home/home',
						type: 'switchTab'
					});
					this.$u.route({
						url: 'pages/home/home',
						type: 'switchTab'
					});
				} else {
				  uni.showModal({
				  	title:res.reason + "，請稍後再試",
				  	showCancel:false
				  })
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	overflow: hidden;
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	&_body {
		margin-top: 170rpx;
		text-align: center;
		&_tel {
			margin-top: 10rpx;
		}
		&_pswd {
			margin-top: 40rpx;
		}
		&_btn {
			margin-top: 120rpx;
			padding: 0 20rpx;
		}
	}
	&_footer {
		position: absolute;
		bottom: 50rpx;
		width: 100%;
		padding: 0 30rpx;
		text {
			color: #2979ff;
		}
	}
	.read {
		text-align: center;
	}
	.agreement {
		color: red;
	}
}
</style>
<style scoped>
>>> .u-border-top:after {
	border-top-width: 0px;
}
</style>

 

 

 

vue-electron 桌面應用跨平臺技術

 

<template>
<div class="login">
    <Top></Top>
    <div class="login-panel" style="-webkit-app-region: no-drag">
        <Alert v-if="showErr" type="error">{{err}}</Alert>
        <div v-show="!showRegister" class="login-form">
            <div class="login-form-left">
                <img class="my-logo" src="../assets/ll.png" alt="">
            </div>
            <div class="login-form-right">
                <div class="title">帳號祕密登陸</div>
                <div class="item">
                    <Input clearable prefix="ios-contact-outline" v-model="telephone" placeholder="手機" class="item-input" />
                </div>
                <div class="item">
                    <Input clearable prefix="ios-lock-outline" type="password" v-model="password" placeholder="密碼" class="item-input" />
                </div>
                <!--<div class="item">
        <label>服務：</label>
        <Input clearable prefix="ios-settings-outline" v-model="host" placeholder="服務" class="item-input" />
      </div>-->
                <div class="btn item">
                    <Button type="primary" @click="login()" icon="md-contact">登陸</Button>
                </div>
                <div class="item register">
                    <a type="info" class="pull-right" @click="showRegister = true">
                        <Icon type="ios-cloud-circle" />註冊
                    </a>
                </div>
            </div>
        </div>
    </div>

    <Modal :transfer="false" closable class="user-model" v-model="showRegister" footer-hide title="註冊新用戶" width="400">
        <Form ref="formValidate" :model="registerForm" :rules="ruleValidate" :label-width="80">
            <!-- <Upload action="selectImg()">
          <Button icon="ios-cloud-upload-outline">Upload files</Button>
        </Upload>-->
            <!-- <img src="../../../static/img/lu.png" @click="selectImg" v-if="isdefultImg" alt style="width:100%;height:100px">
      <img :src="img" v-if="ifshow" alt style="width:100%;height:100px"> -->
            <!-- <div v-else  style="width:100%;height:200px"></div> -->
            <!-- <input id="photoImg" accept="image/*" @change="imgChange" ref="img" type="file" style="display: none;"> -->
            <FormItem label="手機" prop="registerPhone">
                <Input clearable class="my-ipt" v-model="registerForm.registerPhone" placeholder="請輸入手機號" @on-blur="verifyTelephone"></Input>
            </FormItem>
            <FormItem label="暱稱" prop="registerUsername">
                <Input clearable class="my-ipt" v-model="registerForm.registerUsername" placeholder="請輸入暱稱"></Input>
            </FormItem>
            <FormItem label="密碼" prop="registerPassword">
                <Input clearable class="my-ipt" type="password" v-model="registerForm.registerPassword" placeholder="請輸入密碼"></Input>
            </FormItem>
            <FormItem label="確認密碼" prop="qurePassWord">
                <Input clearable class="my-ipt" type="password" v-model="registerForm.qurePassWord" placeholder="請輸入密碼"></Input>
            </FormItem>
            <FormItem label="性別" prop="sex">
                <RadioGroup v-model="registerForm.sex">
                    <Radio label="male">男</Radio>
                    <Radio label="female">女</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="出生日期" prop="birthday">
                <DatePicker class="my-ipt" type="date" v-model="registerForm.birthday" placeholder="出生日期"></DatePicker>
            </FormItem>
            <Button type="primary" long @click="saveRegister">保存</Button>
        </Form>
    </Modal>
    <vue-particles color="#dedede" :particlesNumber="50" class="bg-login"></vue-particles>
</div>
</template>

<script>
import Top from './im/components/top.vue';
export default {
    name: 'login',
    data() {
        return {
            ruleValidate: {
                registerPhone: [{
                    required: true,
                    message: '請填寫手機號',
                    trigger: 'blur'
                }],
                registerUsername: [{
                    required: true,
                    message: '請填寫用戶名',
                    trigger: 'blur'
                }],
                registerPassword: [{
                    required: true,
                    message: '請填寫密碼',
                    trigger: 'blur'
                }],
                qurePassWord: [{
                    required: true,
                    message: '請再次填寫密碼',
                    trigger: 'blur'
                }],
                sex: [{
                    required: true,
                    message: '請選擇性別',
                    trigger: 'change'
                }],
                birthday: [{
                    required: true,
                    type: 'date',
                    message: '請選擇出生日期',
                    trigger: 'change'
                }]
            },
            checkCode: null,
            app_name: '',
            telephone: '',
            password: '',
            registerForm: {
                registerPhone: '',
                registerUsername: '',
                registerPassword: '',
                qurePassWord: '',
                sex: '',
                birthday: ''
            },
            err: '',
            showErr: false,
            showSetting: false,
            showRegister: false,
            dialCode: '86',
            host: '182.61.169.91',
            isCanRegister: false,
            ifshow: false,
            isdefultImg: true,
            img: '',
            formData: '',
            formItem: {
                input: '',
                select: '',
                radio: 'male',
                checkbox: [],
                switch: true,
                date: '',
                time: '',
                slider: [20, 50],
                textarea: ''
            }
        };
    },
    components: {
        Top
    },
    methods: {
        clickUser() {
            location.reload();
        },
        verifyTelephone() {},
        imgChange: function () {
            var file = $('#photoImg')[0].files[0];
            this.formData = new FormData();
            this.formData.append('file', file);
            var URL = window.URL || window.webkitURL;
            var imgURL = URL.createObjectURL(file);
            this.img = imgURL;
            this.isdefultImg = false;
            this.ifshow = true;
        },
        selectImg: function () {
            this.$refs.img.click();
        },
        dataChange() {},
        saveRegister() {
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!');
                }
            })
        },
        login: function () {
            let self = this;
            this.$socket.login(this.telephone, this.password, this.checkCode, res => {
                if (res.success) {
                    let login = {
                        username: this.username,
                        password: this.password
                    };
                    window.sessionStorage.setItem('login', JSON.stringify(login));
                    window.sessionStorage.setItem('token', res.token);
                    this.$store.commit('setHost', self.host);
                    // 後臺改版返回
                    this.$store.commit('setUser', res.response.data);
                    self.$router.push({
                        path: '/index/chatBox',
                        params: {}
                    });
                } else {
                    this.$Message.error(res.reason);
                }
            });
        }
    },
    created: function () {
        this.$socket.initWebIM(this.$ws, true, true);
    }
};
</script>

<style lang="scss">
@import '../../../static/styles/theme.scss';

.login {
    height: 100%;
    background: url('../assets/bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .my-ipt {
        width: 100%;
    }

    .login-form {
        display: flex;

        .my-logo {
            width: 7rem;
        }

        .login-form-left {
            margin-top: -1rem;
            padding-left: 30px;
            width: 15rem;
            height: 28rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-form-right {
            width: 35rem;
            height: 28rem;
            padding-right: 54px;
            padding-top: 40px;
        }
    }

    .bg-login {
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .login-panel {
        background: url('../assets/login-bg.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        margin-left: -25rem;
        top: 50%;
        margin-top: -12rem;
        z-index: 2;

        .item {
            margin-top: 12px;
            width: 100%;

            label {
                width: 5rem;
                text-align: right;
                display: inline-block;
                color: #fff;
            }

            .item-input {
                width: 100%;
            }
        }

        .btn {
            button {
                width: 100%;
            }
        }

        .title {
            color: #fff;
            font-size: 14px;
        }
    }

    .setting {
        color: #fff;
        font-size: 2rem;
        display: block;
        right: 1rem;
        position: absolute;
        bottom: 1rem;
        cursor: pointer;
        z-index: 3;
    }

    .save-setting-btn {
        margin: 1rem 0 !important;
    }

    .register {
        padding: 0 2.2rem;

        a {
            color: #ffffff;

            i {
                font-size: 14px;
                letter-spacing: 5px;
            }
        }
    }
}

.setting-item {
    margin-bottom: 1rem;
}

.ivu-modal-wrap {
    .ivu-form-item {
        margin-bottom: 20px;
    }
}
</style>