```
<template>
<view class="content">
<view class="header">
<image src="../static/image/logo.png"></image>
</view>
<view class="list">
<view class="list-call">
<image class="img" src="/static/image/1.png"></image>
<input class="biaoti" v-model="mobile" type="number" maxlength="11" placeholder="輸入手機號" />
</view>
<view class="list-call">
<image class="img" src="/static/image/2.png"></image>
<input class="biaoti" v-model="password" type="text" maxlength="32" placeholder="輸入密碼" password="true" />
</view>
</view>
<view class="dlbutton" hover-class="dlbutton-hover" @tap="login()">
<text>登錄</text>
</view>
<view class="xieyi">
<navigator url="forget" open-type="navigate">忘記密碼</navigator>
<text>|</text>
<navigator url="reg" open-type="navigate">注冊賬戶</navigator>
</view>
</view>
</template>
<script>
import md5 from "@/common/SDK/md5.min.js";
export default {
onLoad(){
},
data() {
return {
mobile:'',
password:''
};
},
methods: {
login() {
// console.log(md5(this.password + 'app'));return;
if (this.mobile.length != 11) {
uni.showToast({
icon: 'none',
title: '手機號不正確'
});
return;
}
if (this.password.length < 6) {
uni.showToast({
icon: 'none',
title: '密碼不正確'
});
return;
}
// uni.switchTab({
// url:'./user/index'
// })
uni.request({
url: global.host +'/api/v1.login/index',
data: {
mobile:this.mobile,
password:md5(this.password)
},
method: 'POST',
dataType:'json',
success: (res) => {
// console.log(res.data.data.token);
if(res.data.code!=1){
uni.showToast({title:res.data.msg,icon:'none'});
}else{
uni.setStorageSync('token', res.data.data.token);
// var token =uni.getStorageSync('token');
// console.log(token);
// this.login();
// uni.navigateBack();
uni.switchTab({
url:'./index/index'
})
}
}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
justify-content:center;
}
.header {
width:161upx;
height:161upx;
background:rgba(63,205,235,1);
box-shadow:0upx 12upx 13upx 0upx rgba(63,205,235,0.47);
border-radius:50%;
margin-top: 30upx;
margin-left: auto;
margin-right: auto;
}
.header image{
width:161upx;
height:161upx;
border-radius:50%;
}
.list {
display: flex;
flex-direction: column;
padding-top: 50upx;
padding-left: 70upx;
padding-right: 70upx;
}
.list-call{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100upx;
color: #333333;
border-bottom: 1upx solid rgba(230,230,230,1);
}
.list-call .img{
width: 60upx;
height: 60upx;
}
.list-call .biaoti{
flex: 1;
text-align: left;
font-size: 32upx;
line-height: 100upx;
margin-left: 16upx;
}
.dlbutton {
color: #FFFFFF;
font-size: 34upx;
width:470upx;
height:100upx;
background:linear-gradient(-90deg,rgba(63,205,235,1),rgba(188,226,158,1));
box-shadow:0upx 0upx 13upx 0upx rgba(164,217,228,0.2);
border-radius:50upx;
line-height: 100upx;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 100upx;
}
.dlbutton-hover {
background:linear-gradient(-90deg,rgba(63,205,235,0.9),rgba(188,226,158,0.9));
}
.xieyi{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 30upx;
margin-top: 80upx;
color: #FFA800;
text-align: center;
height: 40upx;
line-height: 40upx;
}
.xieyi text{
font-size: 24upx;
margin-left: 15upx;
margin-right: 15upx;
}
</style>
```
