You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
5.6 KiB
281 lines
5.6 KiB
<!-- 登录页面 -->
|
|
<template>
|
|
<view class="login bx">
|
|
<div class="language">
|
|
<image @click="showSelectLanguageProp" src="@/static/login/language.png" mode="aspectFit"></image>
|
|
</div>
|
|
|
|
<!-- 背景图片 -->
|
|
<view class="logo-box">
|
|
<image class="logo content" src="@/static/login/logo.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<!-- 加载效果 -->
|
|
<loading :loading="loading" @close="closeLoading"></loading>
|
|
|
|
<view v-if="!loading" class="main">
|
|
<!-- 登录标题 -->
|
|
<view class="login-title">
|
|
<view class="title">TikTok shop</view>
|
|
<view class="shop-desc">Online rebate mall.</view>
|
|
</view>
|
|
|
|
<!-- 输入框列表 -->
|
|
<view class="input-list">
|
|
|
|
<input v-model="form.account" type="text" :placeholder="$t('page.login.username-placeholder')" />
|
|
<input v-model="form.pass" type="password" :placeholder="$t('page.login.password-placeholder')" />
|
|
|
|
</view>
|
|
|
|
<!-- 按钮组 -->
|
|
<view class="btns">
|
|
|
|
<view @click="Login" class="now-login-btn">{{ $t('page.login.login') }}</view>
|
|
|
|
<view class="now-register-btn">
|
|
<text @click="toRegister">{{ $t('page.login.register') }}</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 切换语言 -->
|
|
<changeLanguage :show.sync="showSelectLanguage" @close="closeSelectLanguageProp"></changeLanguage>
|
|
|
|
<!-- 客服列表 -->
|
|
<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
|
|
|
|
<!-- 初始页面 -->
|
|
<!-- <pageInit></pageInit> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import changeLanguage from '../../components/changeLanguage/changeLanguage.vue';
|
|
import serviceList from '@/components/serviceList/serviceList.vue';
|
|
import pageInit from '@/components/pageInit/pageInit.vue'
|
|
import loading from '@/components/pageInit/loading.vue'
|
|
|
|
export default {
|
|
components: {
|
|
changeLanguage,
|
|
serviceList,
|
|
pageInit,
|
|
loading
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
account: '',
|
|
pass: '',
|
|
loginIp: ''
|
|
},
|
|
showSelectLanguage: false,
|
|
showService: false,
|
|
serverList: [],
|
|
loading: false
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
//登录
|
|
Login() {
|
|
this.$play()
|
|
let _self = this;
|
|
let {
|
|
account,
|
|
pass
|
|
} = this.form
|
|
if (account.trim() == '') {
|
|
return uni.showToast({
|
|
title: this.$t('page.login.accountEmpty'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
if (pass.trim() == '') {
|
|
return uni.showToast({
|
|
title: this.$t('page.login.passEmpty'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
|
|
return uni.request({
|
|
url: 'https://api.ipify.org?format=json',
|
|
success: function(res) {
|
|
_self.form.loginIp = res.data.ip;
|
|
_self.request('login', {}, _self.form).then(res => {
|
|
if (res.code == 200) {
|
|
localStorage.setItem("userInfo", JSON.stringify(res.result.userInfo))
|
|
localStorage.setItem("token", res.result.token)
|
|
uni.navigateTo({
|
|
url: '/pages/home/home'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
},
|
|
|
|
//跳转注册页面
|
|
toRegister() {
|
|
this.$play()
|
|
uni.navigateTo({
|
|
url: '/pages/register/register'
|
|
})
|
|
},
|
|
|
|
//显示选择语言弹框
|
|
showSelectLanguageProp() {
|
|
this.$play()
|
|
this.showSelectLanguage = true
|
|
},
|
|
|
|
//关闭语言选择弹框
|
|
closeSelectLanguageProp() {
|
|
this.showSelectLanguage = false
|
|
},
|
|
|
|
//显示客服列表
|
|
revealServiceList() {
|
|
this.$play()
|
|
this.showService = true;
|
|
},
|
|
|
|
//关闭客服列表
|
|
closeServiceList() {
|
|
this.showService = false;
|
|
},
|
|
|
|
//关闭加载效果
|
|
closeLoading() {
|
|
this.loading = false;
|
|
},
|
|
|
|
//忘记密码
|
|
forgetPass() {
|
|
this.request('forgetPass').then(res => {
|
|
if (res.code == 200) {
|
|
this.serverList = res.result
|
|
this.revealServiceList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
margin: 0px auto;
|
|
background: linear-gradient(to bottom, #fcedff 0%, #ffffff 100%);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
padding: 0rpx 20rpx;
|
|
|
|
.content {
|
|
width: 96%;
|
|
margin: 0rpx auto;
|
|
}
|
|
|
|
.language {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 160rpx;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
|
|
.logo-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.logo {
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.login-title {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: $uni-bg-color-app;
|
|
margin-bottom: 10rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shop-desc {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.input-list {
|
|
padding: 0rpx 10rpx;
|
|
box-sizing: border-box;
|
|
margin: 40rpx 0rpx;
|
|
|
|
input {
|
|
display: block;
|
|
width: 90%;
|
|
margin: 0rpx auto;
|
|
color: $uni-bg-color-app;
|
|
border: 1px solid #eeeeee;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
text-indent: 1em;
|
|
padding: 0rpx 15rpx;
|
|
|
|
&:focus {
|
|
border-color: #6d00be !important;
|
|
background: pink !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btns {
|
|
padding: 0rpx 10rpx;
|
|
margin-top: 40rpx;
|
|
color: $uni-bg-color;
|
|
|
|
.now-login-btn {
|
|
background: $uni-bg-color-app;
|
|
border-radius: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
font-weight: bold;
|
|
height: 90rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.now-register-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: $uni-bg-color-app;
|
|
}
|
|
}
|
|
}
|
|
</style>
|