384 lines
11 KiB
Vue
384 lines
11 KiB
Vue
<template>
|
||
<view class="business">
|
||
<!--商户 || 酒道馆列表-->
|
||
<view class="existed">
|
||
<view class="existed-content" v-if="Object.values(loginHistory).length > 0">
|
||
<!--顶部提示-->
|
||
<view class="top-tips" :style="'background-image:url('+ list_bg +')'">
|
||
请选择管理的{{ pageTitle }}
|
||
</view>
|
||
<!--商户列表-->
|
||
<view class="mer-list">
|
||
<view class="block" v-for="(item,index) in Object.values(loginHistory)" :key="index">
|
||
<view class="left">
|
||
<view class="img">
|
||
<image class="block-image" :src="item.mer_avatar || '/static/images/f.png'"></image>
|
||
</view>
|
||
<view class="name">{{ item.mer_name || '' }}</view>
|
||
</view>
|
||
<view v-if="item.exp > current_timestamp" class="right" @click="autoLogin(item)">
|
||
登录 <text class="iconfont icon-xiangyou"></text>
|
||
</view>
|
||
<view v-else class="right not-btn">已过期</view>
|
||
</view>
|
||
</view>
|
||
<!--新账号登录-->
|
||
<view class="login-btn" @click="loginPopupShow">新账号登录</view>
|
||
</view>
|
||
</view>
|
||
<!-- 登录弹框 -->
|
||
<uni-popup ref="loginPopup" type="center">
|
||
<view class="login-content" :style="'background-image:url('+ login_bg +')'">
|
||
<view class="login-form">
|
||
<view class="login-logo">
|
||
<image class="block-image" :src="'/static/images/f.png'"></image>
|
||
</view>
|
||
<view class="title">立即登录！</view>
|
||
<view class="login-item">
|
||
<text class="item-icon iconfont icon-shouji"></text>
|
||
<input class="item-input" v-model="loginInfo.account" placeholder="请输入登录账号" type="text" />
|
||
</view>
|
||
<view class="login-item">
|
||
<text class="item-icon iconfont icon-mimatubiao"></text>
|
||
<input class="item-input" v-model="loginInfo.password" placeholder="请输入登录密码" type="password" />
|
||
</view>
|
||
<view class="login-buttons">
|
||
<view class="login-btn" @click="clickLogin">登录</view>
|
||
<view class="login-btn not-btn" @click="loginPopupClose">取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters} from "vuex";
|
||
import {storeLogin} from "@/api/store";
|
||
import { HTTP_REQUEST_URL } from '@/config/app.js';
|
||
|
||
export default {
|
||
name: 'business',
|
||
components: {},
|
||
data() {
|
||
return {
|
||
is_sys: '',
|
||
pageTitle: '',
|
||
// 已登录列表
|
||
list_bg: '',
|
||
loginHistory: {},
|
||
// 酒道馆登录相关
|
||
login_bg: '',
|
||
loginInfo:{
|
||
account: '',
|
||
password: ''
|
||
},
|
||
// 当前时间戳
|
||
intervalId: '',
|
||
current_timestamp: 0,
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
|
||
},
|
||
onLoad: function(options) {
|
||
this.is_sys = options.is_sys;
|
||
// 登录后操作
|
||
let isChange = options.change || false;
|
||
// if((this.is_sys == 1 || this.shopIsLogin) && !isChange){
|
||
// uni.navigateTo({
|
||
// url: '/pages/admin/business/index?is_sys=' + this.is_sys
|
||
// })
|
||
// }
|
||
// 设置页面标题
|
||
this.pageTitle = '商家';
|
||
if(this.is_sys == 2) this.pageTitle = '酒道馆';
|
||
else if(this.is_sys == 3) this.pageTitle = '烟酒店';
|
||
|
||
uni.setNavigationBarTitle({
|
||
title: this.pageTitle + '登录'
|
||
})
|
||
// 未登录 初始化
|
||
this.init();
|
||
},
|
||
onShow() {
|
||
let _this = this;
|
||
_this.intervalId = setInterval(function () {
|
||
const now = new Date();
|
||
_this.current_timestamp = Math.ceil(now.getTime() / 1000)
|
||
}, 1000); // 每秒更新一次时间
|
||
},
|
||
onUnload() {
|
||
// 页面销毁时清除定时器
|
||
if (this.intervalId) clearInterval(this.intervalId);
|
||
},
|
||
onReady() {
|
||
this.login_bg = `${HTTP_REQUEST_URL}/static/images/mer/mer_login_bg.png`;
|
||
this.list_bg = `${HTTP_REQUEST_URL}/static/images/mer/mer_login_list.png`;
|
||
},
|
||
methods: {
|
||
// 初始化
|
||
init(){
|
||
// 商户类别：0=普通商户，1=酒道馆，2=供应商，3=烟酒店
|
||
// is_sys：0=商户管理，1=平台管理，2=酒道馆管理，3=烟酒店管理
|
||
let merchantType = '0';
|
||
if(this.is_sys == 2) merchantType = '1';
|
||
else if(this.is_sys == 3) merchantType = '3';
|
||
|
||
let loginHistory = this.$Cache.get('MER_LOGIN_HISTORY_' + merchantType) || {};
|
||
if(typeof loginHistory === 'string') loginHistory = JSON.parse(loginHistory) || {};
|
||
this.loginHistory = Object.assign({}, loginHistory);
|
||
// 判断：存在已经登录账户 显示已登录账户信息列表；不存在则显示登录弹框
|
||
if(Object.values(loginHistory).length <= 0) this.loginPopupShow();
|
||
},
|
||
// 商户登录 - 提交登录信息
|
||
clickLogin(){
|
||
let _this = this;
|
||
let params = _this.loginInfo || {};
|
||
uni.showLoading({title: '登录中...', mask: true})
|
||
storeLogin(params).then(res => {
|
||
if (res.status == 200) {
|
||
let data = res.data || {};
|
||
// 记录登录状态
|
||
_this.$store.commit("SHOP_LOGIN", {
|
||
'token': data.token,
|
||
'time': data.exp,
|
||
'shop_mer_id': data.mer_id,
|
||
});
|
||
// 记录登录历史
|
||
let merchantType = data.merchant_type || 0;
|
||
let loginHistory = this.$Cache.get('MER_LOGIN_HISTORY_' + merchantType) || {};
|
||
if(typeof loginHistory === 'string') loginHistory = JSON.parse(loginHistory) || {};
|
||
loginHistory[data.mer_id] = data;
|
||
_this.$Cache.set('MER_LOGIN_HISTORY_' + merchantType, JSON.stringify(loginHistory))
|
||
// 进入商户 || 酒道馆 管理端
|
||
uni.navigateTo({
|
||
url: '/pages/admin/business/index?is_sys=' + _this.is_sys
|
||
})
|
||
}
|
||
uni.hideLoading();
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
this.$util.Tips({ title: err });
|
||
});
|
||
},
|
||
// 选中已登录商户 自动登录
|
||
autoLogin(item){
|
||
// 记录登录状态
|
||
this.$store.commit("SHOP_LOGIN", {
|
||
'token': item.token,
|
||
'time': item.exp,
|
||
'shop_mer_id': item.mer_id,
|
||
});
|
||
// 进入商户 || 酒道馆 管理端
|
||
uni.navigateTo({
|
||
url: '/pages/admin/business/index?is_sys=' + this.is_sys
|
||
})
|
||
},
|
||
// 登录弹框 - 显示
|
||
loginPopupShow(){
|
||
this.$refs.loginPopup.open('center');
|
||
},
|
||
// 登录弹框 - 关闭
|
||
loginPopupClose(){
|
||
this.$refs.loginPopup.close();
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.not-btn{
|
||
background-color: #909399!important;
|
||
color: #fff!important;
|
||
}
|
||
.existed-content{
|
||
width: 100vw !important;
|
||
min-height: 100vh !important;
|
||
background: #f6f6f6;
|
||
.top-tips{
|
||
width: 100%;
|
||
font-size: 45rpx;
|
||
font-weight: bold;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
height: 230rpx;
|
||
padding: 0 30rpx 30rpx 30rpx;
|
||
}
|
||
.mer-list{
|
||
padding: 30rpx;
|
||
background: #f6f6f6;
|
||
border-top-left-radius: 35rpx;
|
||
border-top-right-radius: 35rpx;
|
||
position: relative;
|
||
top: -30rpx;
|
||
|
||
.block{
|
||
width: 100%;
|
||
height: 130rpx;
|
||
background: #FFFFFF;
|
||
padding: 0 20rpx;
|
||
border-radius: 15rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.left{
|
||
width: calc(100% - 130rpx);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.img{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
.block-image{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.name{
|
||
width: calc(100% - 130rpx);
|
||
height: 120rpx;
|
||
line-height: 120rpx;
|
||
padding-left: 20rpx;
|
||
}
|
||
}
|
||
.right{
|
||
width: 120rpx;
|
||
background: #b51613;
|
||
color: #e6babe;
|
||
border-radius: 150rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
padding: 0 20rpx;
|
||
.iconfont{
|
||
font-size: 24rpx;
|
||
height: 40rpx;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
}
|
||
.block:not(:last-child){
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
.login-btn{
|
||
position: fixed;
|
||
left: 10%;
|
||
bottom: 100rpx;
|
||
width: 80%;
|
||
height: 80rpx;
|
||
font-size: 35rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
border-radius: 100rpx;
|
||
background: #8e1318;
|
||
color: #f4dede;
|
||
}
|
||
}
|
||
// 登录弹框
|
||
.login-content{
|
||
background: #f6f6f6;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.login-form{
|
||
position: relative;
|
||
background: #FFFFFF;
|
||
width: 80%;
|
||
padding: 100rpx 35rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.login-logo{
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
position: absolute;
|
||
top: calc(0rpx - (120rpx / 2));
|
||
left: calc((100% - 100rpx) / 2);
|
||
.block-image{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #FFFFFF;
|
||
}
|
||
}
|
||
.title{
|
||
font-size: 36rpx;
|
||
height: 80rpx;
|
||
line-height: 60rpx;
|
||
font-weight: bold;
|
||
}
|
||
.login-item{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
border-top: 2rpx solid #f3f3f3;
|
||
border-bottom: 2rpx solid #f3f3f3;
|
||
.item-icon{
|
||
font-size: 40rpx;
|
||
width: 70rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
.item-input{
|
||
width: calc(100% - 80rpx);
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
padding-left: 15rpx;
|
||
}
|
||
}
|
||
.login-buttons{
|
||
margin-top: 130rpx;
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.login-btn{
|
||
width: calc((100% - 20rpx) / 2);
|
||
background: #8e1318;
|
||
color: #f4dede;
|
||
height: 70rpx;
|
||
font-size: 30rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
border-radius: 100rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|