wanma-benteng
/
new-mshop-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化：商户及酒道馆登录流程修改优化

This commit is contained in:
wuhui_zzw 2024-03-06 15:44:00 +08:00
parent f1100b9bab
commit a3eb8088bd
5 changed files with 435 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/shopList/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<view class="store_content" :class="isShow?'on':''"> <view class="store_content" :class="isShow?'on':''">
<view class="popup" :class="{ on: isShow }"> <view class="popup" :class="{ on: isShow }">
<scroll-view scroll-y="true"> <scroll-view scroll-y="true">
<radio-group name="store_name" @change="changeStore"> <radio-group name="store_name" @change="changeStore">
@ -10,22 +10,22 @@
<label :key="item.merchant.mer_id" class="acea-row row-middle"> <label :key="item.merchant.mer_id" class="acea-row row-middle">
<view class="text"> <view class="text">
<view class="acea-row row-middle"> <view class="acea-row row-middle">
<image class="mer_logo" v-if="item.merchant.mer_avatar" <image class="mer_logo" v-if="item.merchant.mer_avatar"
:src="item.merchant.mer_avatar" mode=""></image> :src="item.merchant.mer_avatar" mode=""></image>
<view class="name line1">{{ item.merchant.mer_name }}</view> <view class="name line1">{{ item.merchant.mer_name }}</view>
</view> </view>
</view> </view>
<radio class="radio" :value="item.merchant.mer_id.toString()" :checked="item.merchant.mer_id == id ? true : false" /> <radio class="radio" :value="item.merchant.mer_id.toString()" :checked="item.merchant.mer_id == id ? true : false" />
</label> </label>
<!-- </div> --> <!-- </div> -->
</div> </div>
</template> </template>
</radio-group> </radio-group>
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
<view class='mask' catchtouchmove="true" :hidden='!isShow' @tap='close'></view> <view class='mask' catchtouchmove="true" :hidden='!isShow' @tap='close'></view>
</view> </view>
</template> </template>
<script> <script>
@ -41,23 +41,23 @@
storeList: [], storeList: [],
} }
}, },
watch: { watch: {
}, },
mounted(){ mounted(){
}, },
methods: { methods: {
isShowStore(){ isShowStore(){
this.isShow = !this.isShow; this.isShow = !this.isShow;
}, },
close: function() { close: function() {
this.$emit('changeStoreClose'); this.$emit('changeStoreClose');
this.isShow = false; this.isShow = false;
}, },
changeStore(e) { changeStore(e) {
this.close() this.close()
this.getStoreName(e.detail.value) this.getStoreName(e.detail.value)
uni.setStorageSync('serMerId',e.detail.value) uni.setStorageSync('serMerId',e.detail.value)
}, },
//获取店铺列表 //获取店铺列表
getStoreList(parmas){ getStoreList(parmas){
@ -81,11 +81,9 @@
flag = true; flag = true;
} }
}) })
if(!storeInfo){ if(!storeInfo) storeInfo = this.storeList[0] || {};
storeInfo = this.storeList[0]
}
this.id = storeInfo ? storeInfo['mer_id'] : '' this.id = storeInfo ? storeInfo['mer_id'] : ''
this.$emit('getStoreInfo', storeInfo['merchant']) this.$emit('getStoreInfo', storeInfo ? storeInfo['merchant'] : {})
this.$emit('getService', storeInfo); this.$emit('getService', storeInfo);
}) })
}, },
@ -98,7 +96,7 @@
this.$emit('getService',this.storeList[i]); this.$emit('getService',this.storeList[i]);
} }
} }
}, },
} }
} }
</script> </script>
@ -114,7 +112,7 @@
padding-bottom: 60rpx; padding-bottom: 60rpx;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
transition: all .3s cubic-bezier(.25, .5, .5, .9); transition: all .3s cubic-bezier(.25, .5, .5, .9);
} }
.store_content.on { .store_content.on {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -138,7 +136,7 @@
} }
.store_content .store-list .mer_logo{ .store_content .store-list .mer_logo{
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
form { form {

10
pages.json
View File

@ -685,6 +685,12 @@
"navigationBarTitleText": "申请退款" "navigationBarTitleText": "申请退款"
} }
}, },
{
"path": "business/login",
"style": {
"navigationBarTitleText": "登录"
}
},
{ {
"path": "business/index", "path": "business/index",
"style": { "style": {
@ -1326,6 +1332,7 @@
} }
] ]
}, },
{ {
"root": "pages/agent", "root": "pages/agent",
"name": "agent", "name": "agent",
@ -1393,9 +1400,6 @@
"navigationBarTitleText": "立即进货" "navigationBarTitleText": "立即进货"
} }
} }
] ]
}, },
{ {

149
pages/admin/business/index.vue
View File

@ -1,42 +1,24 @@
<template> <template>
<view class="business"> <view class="business">
<!--登录后内容--> <!--登录后内容-->
<template v-if="is_sys == 1 || (is_sys != 1 && shopIsLogin)"> <view class="business-header">
<view class="business-header"> <view class="headerbox" @click="changeTips" v-if="service">
<view class="headerbox" @click="changeTips" v-if="service"> <image :src="service.merchant.mer_avatar" mode=""></image>
<image :src="service.merchant.mer_avatar" mode=""></image> <span class='font line1'>{{service.merchant.mer_name || '暂无店铺'}}</span>
<span class='font line1'>{{service.merchant.mer_name || '暂无店铺'}}</span> <template v-if="Object.values(storeList).length > 1">
<template v-if="Object.values(storeList).length > 1"> <text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
<text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text> <text v-else class="iconfont icon-xiala1"></text>
<text v-else class="iconfont icon-xiala1"></text> </template>
</template>
</view>
</view> </view>
<view v-if="Object.values(list).length > 0" class="business-content"> </view>
<view @click="goNext(item)" class="listBox" v-for="(item,index) in list"> <view v-if="Object.values(list).length > 0" class="business-content">
<text :class="item.icon" class="businessIcon"></text> <view @click="goNext(item)" class="listBox" v-for="(item,index) in list">
<view>{{item.title}}</view> <text :class="item.icon" class="businessIcon"></text>
</view> <view>{{item.title}}</view>
</view> </view>
<emptyPage v-else title="暂无任何操作权限~"></emptyPage> </view>
<shopList ref="shopList" @changeStoreClose="changeClose" @getService="getService" :is_sys='is_sys'></shopList> <emptyPage v-else title="暂无任何操作权限~"></emptyPage>
</template> <shopList ref="shopList" @changeStoreClose="changeClose" @getService="getService" :is_sys='is_sys'></shopList>
<template v-else>
<view class="login-content">
<view class="login-form">
<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="请输入登录账号" name="text" />
</view>
<view class="login-item">
<text class="item-icon iconfont icon-mimatubiao"></text>
<input class="item-input" v-model="loginInfo.password" placeholder="请输入登录密码" name="password" />
</view>
<view class="login-btn" @click="clickLogin">登录</view>
</view>
</view>
</template>
<!--二维码--> <!--二维码-->
<uni-popup ref="qrCodePopup" type="center"> <uni-popup ref="qrCodePopup" type="center">
<view class="qr-code-content"> <view class="qr-code-content">
@ -53,7 +35,6 @@ import shopList from '@/components/shopList';
import {promoteQrCodes,onlinePaymentQrCodes} from "@/api/service"; import {promoteQrCodes,onlinePaymentQrCodes} from "@/api/service";
import { getSiteQrCode } from '@/api/exchange.js'; import { getSiteQrCode } from '@/api/exchange.js';
import {mapGetters} from "vuex"; import {mapGetters} from "vuex";
import {storeLogin} from "@/api/store";
export default { export default {
name: 'business', name: 'business',
@ -173,6 +154,13 @@ export default {
}, },
onLoad: function(options) { onLoad: function(options) {
this.is_sys = options.is_sys; this.is_sys = options.is_sys;
// 商户或者酒道馆是否登录 未登录进入登录页面
if(this.is_sys != 1 && !this.shopIsLogin){
uni.navigateTo({
url: '/pages/admin/business/login?is_sys=' + this.is_sys
})
return false;
}
// 设置页面标题 // 设置页面标题
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: this.is_sys == 1 ? '平台管理' : (this.is_sys == 2 ? '酒道馆管理' : '商家管理') title: this.is_sys == 1 ? '平台管理' : (this.is_sys == 2 ? '酒道馆管理' : '商家管理')
@ -218,9 +206,22 @@ export default {
}); });
} }
}, },
getService: function(data) { getService(data) {
// 判断：是否存在有效 员工列表
if(Object.values(data).length <= 0){
uni.showModal({
title: '禁止访问',
content: '无有效管理员信息！',
success: function success(res) {
uni.switchTab({
url: '/pages/user/index',
});
}
});
return false;
}
// 处理信息
this.storeList = this.$refs.shopList.storeList || {}; this.storeList = this.$refs.shopList.storeList || {};
this.service = data; this.service = data;
if(data && data.merchant){ if(data && data.merchant){
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
@ -300,33 +301,6 @@ export default {
closeQrCode(){ closeQrCode(){
this.$refs.qrCodePopup.close(); this.$refs.qrCodePopup.close();
}, },
// 商户登录 - 提交登录信息
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 || {};
// console.log("商户登录成功")
// console.log(data)
_this.$store.commit("SHOP_LOGIN", {
'token': data.token,
'time': data.exp,
'shop_mer_id': data.mer_id,
});
this.getStoreList({is_sys: this.is_sys, appoint_mer_id: data.mer_id || ''});
}
uni.hideLoading();
}).catch(err => {
uni.hideLoading();
this.$util.Tips({ title: err });
});
}
} }
} }
</script> </script>
@ -336,7 +310,6 @@ export default {
width: 100vw !important; width: 100vw !important;
min-height: 100vh !important; min-height: 100vh !important;
background: linear-gradient(180deg, #2291F8 0%, rgba(34, 145, 248, 0) 100%); background: linear-gradient(180deg, #2291F8 0%, rgba(34, 145, 248, 0) 100%);
} }
.businessIcon { .businessIcon {
color: #2291F8; color: #2291F8;
@ -440,50 +413,4 @@ export default {
border-radius: 50rpx; border-radius: 50rpx;
} }
} }
// 登录
.login-content{
.login-form{
background: #F6f6f6;
padding: 40% 30rpx 0 30rpx;
min-height: 100vh;
width: 100vw;
.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: 80rpx;
border-top: 2rpx solid #f3f3f3;
border-bottom: 2rpx solid #f3f3f3;
.item-icon{
font-size: 40rpx;
width: 70rpx;
}
.item-input{
width: calc(100% - 80rpx);
padding-left: 15rpx;
}
}
.login-btn{
width: 90%;
background: #8e1318;
color: #f4dede;
height: 80rpx;
font-size: 35rpx;
line-height: 80rpx;
text-align: center;
border-radius: 100rpx;
margin: 130rpx auto 0 auto;
}
}
}
</style> </style>

360
pages/admin/business/login.vue Normal file
View File

@ -0,0 +1,360 @@
<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 +')'">
请选择管理的{{ is_sys == 2 ? '酒道馆' : '商家' }}
</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 class="right" @click="autoLogin(item)">
登录 <text class="iconfont icon-xiangyou"></text>
</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: '',
// 已登录列表
list_bg: '',
loginHistory: {},
// 酒道馆登录相关
login_bg: '',
loginInfo:{
account: '',
password: ''
},
}
},
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=' + is_sys
})
}
// 设置页面标题
uni.setNavigationBarTitle({
title: this.is_sys == 2 ? '酒道馆登录' : '商家登录'
})
// 未登录 初始化
this.init();
},
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=供应商
// is_sys：0=商户管理，1=平台管理，2=酒道馆管理
let merchantType = this.is_sys == 0 ? '0' : '1';
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">
.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: 110rpx;
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;
}
.not-btn{
background-color: #909399!important;
color: #fff!important;
}
}
}
}
</style>

15
pages/user/index.vue
View File

@ -520,15 +520,22 @@
toService(is_sys){ toService(is_sys){
// 判断：如果为0 || 2 清除商户登录状态 // 判断：如果为0 || 2 清除商户登录状态
if(is_sys == 0 || is_sys == 2){ if(is_sys == 0 || is_sys == 2){
// 商户 || 酒道馆 直接进入登录页面
this.$store.commit("SHOP_LOGIN", { this.$store.commit("SHOP_LOGIN", {
'token': null, 'token': null,
'time': null, 'time': null,
'shop_mer_id': null, 'shop_mer_id': null,
}); });
uni.navigateTo({
url: '/pages/admin/business/login?is_sys=' + is_sys
})
}else{
// 系统管理 直接进入管理 无需登录
uni.navigateTo({
url: '/pages/admin/business/index?is_sys=' + is_sys
})
} }
uni.navigateTo({
url: '/pages/admin/business/index?is_sys=' + is_sys
})
}, },
getVersion() { getVersion() {
getVersion().then(data => { getVersion().then(data => {
@ -775,7 +782,7 @@
let len = Object.keys(this.identityCurrent).length || 0; let len = Object.keys(this.identityCurrent).length || 0;
// 根据数据进行对应的操作 // 根据数据进行对应的操作
if(len <= 0 && (type != 'county' || (type == 'county' && !this.userInfo.service && !this.userInfo.shopMerService))) return false; if(len <= 0 && (type != 'county' || (type == 'county' && !this.userInfo.service && !this.userInfo.shopMerService))) return false;
else if(len == 1 || type == 'headquarters') this.goToAgentCenter(this.identityCurrent[0]); else if((len == 1 || type == 'headquarters') && type != 'county') this.goToAgentCenter(this.identityCurrent[0]);
else this.$refs.agentIdentitySelect.open('bottom'); else this.$refs.agentIdentitySelect.open('bottom');
}, },
// 运营中心 - 关闭弹框 // 运营中心 - 关闭弹框