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.
 
 
 
 

150 lines
3.5 KiB

<template>
<view class="bg" :style="{'min-height':minHeight}">
<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/title.png" mode="" class="title-img"></image>
<view class="item flex-between" style="margin-top: 83rpx;">
<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/phone.png" mode="" class="icon"></image>
<input type="text" v-model="form.username" placeholder="请输入手机号"/>
</view>
<view class="item flex-between">
<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/code.png" mode="" class="icon"></image>
<input type="text" v-model="form.captchaCode" placeholder="请输入图形验证码"/>
<image :src="codeImg" mode="" class="code-img" @click="getCodeImg"></image>
</view>
<view class="item flex-between">
<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/password.png" mode="" class="icon"></image>
<input type="text" :password="showPassword" v-model="form.password" placeholder="请输入密码"/>
<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/eye.png" mode="" class="eye-img" @click="showPassword = false" v-if="showPassword"></image>
<image src="https://static.ticket.sz-trip.com/tourGuide/images/login/closeEye.png" mode="" class="eye-img" @click="showPassword = true" v-else></image>
</view>
<view class="btn" @click="login">
立即登录
</view>
</view>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
captchaCodeId: '',
captchaCode: "",
password: ''
},
showPassword: true,
codeImg: '',
minHeight: "1500rpx",
}
},
onLoad () {
this.setScreen()
},
onShow() {
this.getCodeImg()
},
methods: {
// 获取验证码
getCodeImg() {
this.Post({},'/api/Merchants/get_graphic').then(res => {
this.codeImg = res.data.code
this.form.captchaCodeId = res.data.id
})
},
login() {
this.Post(this.form,'/api/Merchants/login_member').then(res => {
this.$store.commit('changeUserInfo', res.data)
if (this.$store.state.user.toPath.includes('user/user')) {
uni.switchTab({
url: this.$store.state.user.toPath
})
} else {
// uni.navigateBack({})
// this.goBack()
uni.switchTab({
url: '/pages/index/index'
})
}
})
},
setScreen () {
let res = uni.getSystemInfoSync()
this.minHeight = res.screenHeight+"px"
console.log(res.screenHeight)
}
}
}
</script>
<style lang="scss" scoped>
.bg {
width: 100vw;
height: 100vh;
background-image: url('https://static.ticket.sz-trip.com/tourGuide/images/login/bg.png');
background-size: 100% 100%;
padding-top: 428rpx;
}
.title-img {
display: block;
margin: auto;
width: 336.67rpx;
height: 54rpx;
}
.item {
width: 587rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 40rpx;
margin: 32rpx auto 0;
padding: 0 26rpx;
.icon {
width: 26.67rpx;
height: 26.67rpx;
margin-right: 12rpx;
}
input {
flex: 1;
font-weight: 500;
font-size: 25rpx;
color: black;
}
input::placeholder {
color: #ABABAB;
}
.code-img {
width: 153rpx;
height: 55rpx;
margin-left: 10rpx;
}
.eye-img {
width: 26.67rpx;
height: 26.67rpx;
margin-left: 10rpx;
}
}
.btn {
width: 547rpx;
line-height: 80rpx;
background: #96684F;
border-radius: 40rpx;
margin: 100rpx auto 0;
font-weight: bold;
font-size: 35rpx;
color: #FFFFFF;
text-align: center;
}
</style>