<template>
|
<view class="shop-login-page">
|
<view class="logo-wrap">
|
<image class="logo-image" src="/static/image/logo@2x.png" mode="aspectFit"></image>
|
</view>
|
|
<text class="page-title">登录门店</text>
|
|
<view class="form-wrap">
|
<view class="input-row">
|
<u-icon name="account" size="30" color="#B8B8B8"></u-icon>
|
<input v-model="form.telephone" class="input-field" type="text" placeholder="请输入账号" placeholder-style="color: #999999;" />
|
</view>
|
<view class="input-divider"></view>
|
|
<view class="input-row password-row">
|
<u-icon name="lock" size="30" color="#B8B8B8"></u-icon>
|
<input v-model="form.password" class="input-field" :password="!showPassword" placeholder="请输入密码" placeholder-style="color: #999999;" />
|
<view class="password-toggle" @click="showPassword = !showPassword">
|
<u-icon :name="showPassword ? 'eye' : 'eye-off'" size="20" color="#B8B8B8"></u-icon>
|
</view>
|
</view>
|
<view class="input-divider"></view>
|
</view>
|
|
<view class="login-btn" @tap="handleLogin">立即登录</view>
|
|
<view class="agreement-row">
|
<image class="agree-icon" :src="agreed ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="aspectFit" @tap="agreed = !agreed"></image>
|
<view class="agreement-text-wrap">
|
<text class="agreement-text">我已阅读并同意</text>
|
<text class="agreement-link" @click="goToService(2)">《门店服务协议》</text>
|
<text class="agreement-text">及</text>
|
<text class="agreement-link" @click="goToService(3)">《门店隐私政策》</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
|
export default {
|
computed: {
|
...mapState(['openid', 'userInfo','userType'])
|
},
|
data() {
|
return {
|
agreed: false,
|
showPassword: false,
|
form: {
|
telephone: '',
|
password: ''
|
}
|
}
|
},
|
onLoad() {
|
// 静默登录
|
if (this.userInfo.bindShopId) {
|
uni.showLoading({
|
title:'登录中...'
|
})
|
try{
|
console.log(this.userType,"============================================")
|
this.$u.api.shopSilentLogin({})
|
.then( res => {
|
if (res.code === 200 && res.data) {
|
this.$store.commit('setUserType', 1)
|
this.$store.commit('setShopToken', res.data.token)
|
// 获取门店信息
|
this.$u.api.getShopInfo({}).then( shopInfoRes => {
|
if (shopInfoRes.code === 200) {
|
this.$store.commit('setShopInfo', shopInfoRes.data)
|
}
|
uni.hideLoading();
|
// setTimeout(() => {
|
uni.navigateTo({
|
url: '/shop/pages/store-home/store-home'
|
});
|
// }, 1000)
|
})
|
}
|
uni.hideLoading()
|
})
|
}catch(e){
|
uni.hideLoading()
|
}
|
setTimeout(() => {
|
uni.hideLoading()
|
}, 10000)
|
}
|
},
|
methods: {
|
handleLogin() {
|
if (!this.form.telephone) {
|
uni.showToast({
|
title: '请输入账号',
|
icon: 'none'
|
})
|
return
|
}
|
if (!this.form.password) {
|
uni.showToast({
|
title: '请输入密码',
|
icon: 'none'
|
})
|
return
|
}
|
if (!this.agreed) {
|
uni.showToast({
|
title: '请先阅读并同意协议',
|
icon: 'none'
|
})
|
return
|
}
|
this.$u.api.shopLogin({
|
openid: this.openid,
|
password: this.form.password,
|
telephone: this.form.telephone
|
}).then(async res => {
|
if (res.code === 200) {
|
this.$store.commit('setUserType', 1)
|
this.$store.commit('setShopToken', res.data.token)
|
// 获取门店信息
|
const shopInfoRes = await this.$u.api.getShopInfo({})
|
if (shopInfoRes.code === 200) {
|
this.$store.commit('setShopInfo', shopInfoRes.data)
|
}
|
uni.showToast({ title: '登录成功', icon: 'success' })
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/shop/pages/store-home/store-home'
|
});
|
}, 1500)
|
}
|
})
|
},
|
goToService(type) {
|
uni.navigateTo({
|
url: '/pages/rich-text/rich-text?type='+type
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.shop-login-page {
|
min-height: 100vh;
|
background: #ffffff;
|
padding: 74rpx 62rpx 40rpx;
|
box-sizing: border-box;
|
}
|
|
.logo-wrap {
|
display: flex;
|
justify-content: center;
|
}
|
|
.logo-image {
|
width: 200rpx;
|
height: 200rpx;
|
}
|
|
.page-title {
|
display: block;
|
margin-top: 40rpx;
|
text-align: center;
|
font-weight: 600;
|
font-size: 44rpx;
|
color: #222222;
|
}
|
|
.form-wrap {
|
margin-top: 58rpx;
|
}
|
|
.input-row {
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.password-row {
|
margin-top: 18rpx;
|
}
|
|
.password-toggle {
|
padding: 10rpx;
|
}
|
|
.input-field {
|
flex: 1;
|
height: 78rpx;
|
margin-left: 18rpx;
|
font-size: 30rpx;
|
color: #333333;
|
background: transparent;
|
}
|
|
.placeholder {
|
font-size: 38rpx;
|
color: #b8b8b8;
|
}
|
|
.input-divider {
|
height: 2rpx;
|
background: #ebedf2;
|
}
|
|
.login-btn {
|
height: 88rpx;
|
margin-top: 60rpx;
|
border-radius: 44rpx;
|
background: #004096;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #ffffff;
|
}
|
|
.agreement-row {
|
margin-top: 60rpx;
|
display: flex;
|
align-items: flex-start;
|
}
|
|
.agree-icon {
|
width: 34rpx;
|
height: 34rpx;
|
margin-top: 4rpx;
|
flex-shrink: 0;
|
}
|
|
.agreement-text-wrap {
|
margin-left: 14rpx;
|
flex: 1;
|
font-size: 24rpx;
|
line-height: 1.8;
|
}
|
|
.agreement-text {
|
color: #555555;
|
}
|
|
.agreement-link {
|
color: #2E68C4;
|
}
|
</style>
|
