|
|
@@ -1,65 +1,95 @@
|
|
|
<template>
|
|
|
- <view class="app-main app-content">
|
|
|
- <view class="model">
|
|
|
- <view class="experFrame">
|
|
|
- <view>
|
|
|
- <view style="text-align:center;margin-bottom:20upx;">
|
|
|
- <image :src="`${constant.imgUrl}/logo4.png`" class="logo" mode="widthFix"></image>
|
|
|
+ <view class="login-page app-content">
|
|
|
+ <view class="login-hero">
|
|
|
+ <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
|
|
|
+ <view class="login-brand">
|
|
|
+ <view class="login-logo-wrap">
|
|
|
+ <image :src="`${constant.imgUrl}/logo4.png`" class="login-logo" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
- <view style="color:#666666;text-align:center;margin-bottom:10upx;font-size:35upx;margin-top:10upx;">花掌柜</view>
|
|
|
+ <text class="login-brand-name">花掌柜</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
+ <view class="login-body">
|
|
|
+ <view class="login-card">
|
|
|
<template v-if="showAccountLogin">
|
|
|
- <view>
|
|
|
- <input @focus="mobile=''" v-model="mobile" class="experInput" placeholder="手机号" type="number" />
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <input @focus="password=''" v-model="password" class="experInput" placeholder="密码" type="password" />
|
|
|
+ <view class="login-form">
|
|
|
+ <view class="login-field">
|
|
|
+ <input
|
|
|
+ @focus="mobile=''"
|
|
|
+ v-model="mobile"
|
|
|
+ class="login-input"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="login-field login-field--last">
|
|
|
+ <input
|
|
|
+ @focus="password=''"
|
|
|
+ v-model="password"
|
|
|
+ class="login-input"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ type="password"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <button class="login-btn login-btn--primary" @click="loginFun">登录</button>
|
|
|
</view>
|
|
|
- <view style="margin-top:0upx;">
|
|
|
- <button class="admin-button-com small blue buttonText" @click="loginFun">登陆</button>
|
|
|
+ <view class="login-agreement">
|
|
|
+ <checkbox-group @change="agreeItem">
|
|
|
+ <label class="login-agreement-label">
|
|
|
+ <checkbox value="1" class="login-checkbox" :checked="agree == 1" />
|
|
|
+ <text class="login-agreement-text">
|
|
|
+ 我已阅读并同意
|
|
|
+ <text class="login-agreement-link" @click.stop="goToService">《服务协议》</text>
|
|
|
+ 和
|
|
|
+ <text class="login-agreement-link" @click.stop="goToPrivacy">《隐私政策》</text>
|
|
|
+ </text>
|
|
|
+ </label>
|
|
|
+ </checkbox-group>
|
|
|
</view>
|
|
|
</template>
|
|
|
- <view v-if="showAccountLogin" style="color:#999999;font-size:25upx;margin-top:60upx;">
|
|
|
- <checkbox-group @change="agreeItem">
|
|
|
- <label style="display:flex;align-items:center;justify-content:center;">
|
|
|
- <checkbox value="1" style="transform:scale(0.8)" :checked="agree == 1" />
|
|
|
- <text>
|
|
|
- 我已阅读并同意
|
|
|
- <text style="font-weight:bold;color:#666666;" @click.stop="goToService">《服务协议》</text>
|
|
|
- 和
|
|
|
- <text style="font-weight:bold;color:#666666;" @click.stop="goToPrivacy">《隐私政策》</text>
|
|
|
- </text>
|
|
|
- </label>
|
|
|
- </checkbox-group>
|
|
|
- </view>
|
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
- <view v-if="showAccountLogin==false" style="margin-top:55upx;">
|
|
|
- <view style="color:black;font-size:28upx;margin-top:30upx;">这是花店管理后台，需获取你的手机号登录后</view>
|
|
|
- <view style="color:black;font-size:28upx;margin-top:15upx;">才能使用相应功能，请谅解</view>
|
|
|
- <view style="color:black;font-size:28upx;margin-top:15upx;margin-bottom:30upx;">如不需要，可以点击<text style="color:#3385FF;font-size:36upx;font-weight:bold;margin-left:8upx;" @click="goBack()">拒绝使用</text></view>
|
|
|
-
|
|
|
- <button class="admin-button-com small buttonText" style="background-color:#2BA245;border-color:#2BA245;color:white;height:120upx;line-height:120upx;"
|
|
|
- open-type="getPhoneNumber" @getphonenumber="wxPhoneLogin">手机号一键登录</button>
|
|
|
+ <view v-if="showAccountLogin == false" class="login-quick">
|
|
|
+ <view class="login-tip">
|
|
|
+ <text class="login-tip-line">这是花店管理后台，需获取你的手机号登录后</text>
|
|
|
+ <text class="login-tip-line">才能使用相应功能，请谅解</text>
|
|
|
+ <text class="login-tip-line login-tip-line--last">
|
|
|
+ 如不需要，可点击
|
|
|
+ <text class="login-tip-link" @click="goBack()">拒绝使用</text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <button
|
|
|
+ class="login-btn login-btn--weixin"
|
|
|
+ open-type="getPhoneNumber"
|
|
|
+ @getphonenumber="wxPhoneLogin"
|
|
|
+ >手机号一键登录</button>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
|
- <view v-if="showAccountLogin==false" style="margin-top:55upx;">
|
|
|
- <button class="admin-button-com small blue buttonText" @click="mobileLogin">本机号码一键登录</button>
|
|
|
+ <view v-if="showAccountLogin == false" class="login-quick">
|
|
|
+ <view class="login-tip">
|
|
|
+ <text class="login-tip-line">使用本机号码快速登录花掌柜</text>
|
|
|
+ </view>
|
|
|
+ <button class="login-btn login-btn--primary" @click="mobileLogin">本机号码一键登录</button>
|
|
|
</view>
|
|
|
<!-- #endif -->
|
|
|
|
|
|
- <view v-if="showAccountLogin==false" style="margin-top:45upx;color:#848181;font-size:38upx;width:100%;text-align:right;padding-right:70upx;">
|
|
|
- <text style="margin-right:40upx;" @click="useAccount()">使用账号密码登录</text>
|
|
|
- <text @click="register">注册账号</text>
|
|
|
- </view>
|
|
|
- <view v-else style="margin-top:45upx;color:#848181;font-size:38upx;width:100%;text-align:right;padding-right:70upx;">
|
|
|
- <text style="margin-right:40upx;" @click="useMoibleAccount()">使用手机号登录</text>
|
|
|
- <text @click="register">注册账号</text>
|
|
|
+ <view class="login-footer-links">
|
|
|
+ <text
|
|
|
+ v-if="showAccountLogin == false"
|
|
|
+ class="login-footer-link"
|
|
|
+ @click="useAccount()"
|
|
|
+ >使用账号密码登录</text>
|
|
|
+ <text
|
|
|
+ v-else
|
|
|
+ class="login-footer-link"
|
|
|
+ @click="useMoibleAccount()"
|
|
|
+ >使用手机号登录</text>
|
|
|
+ <text class="login-footer-link login-footer-link--register" @click="register">注册账号</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -79,10 +109,12 @@ export default {
|
|
|
mobile:'',
|
|
|
password:'',
|
|
|
agree:0,
|
|
|
- showAccountLogin:false
|
|
|
+ showAccountLogin:false,
|
|
|
+ statusBarHeight: 0
|
|
|
};
|
|
|
},
|
|
|
onLoad(){
|
|
|
+ this.setStatusBarHeight();
|
|
|
let that = this
|
|
|
uni.getNetworkType({
|
|
|
success: function (res) {
|
|
|
@@ -120,6 +152,14 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
...mapActions(['setUserShopAll']),
|
|
|
+ setStatusBarHeight() {
|
|
|
+ try {
|
|
|
+ const systemInfo = uni.getSystemInfoSync();
|
|
|
+ this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
|
+ } catch (e) {
|
|
|
+ this.statusBarHeight = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
register(){
|
|
|
let itemId = this.option.itemId ? this.option.itemId : 0
|
|
|
let ghsShopId = this.option.ghsShopId ? this.option.ghsShopId : 0
|
|
|
@@ -275,6 +315,7 @@ export default {
|
|
|
that.$store.commit('setMyShopInfo', { ...res.data.shop, ...res.data })
|
|
|
})
|
|
|
that.$store.commit('setLoginInfo', { ...subRes.data.admin, ...subRes.data })
|
|
|
+ uni.removeStorageSync('manualLogout')
|
|
|
getShopInfo(true).then(res => { uni.setNavigationBarTitle({ title: res.name }) })
|
|
|
that.setUserShopAll()
|
|
|
|
|
|
@@ -365,6 +406,7 @@ export default {
|
|
|
that.$store.commit('setMyShopInfo', { ...res.data.shop, ...res.data })
|
|
|
})
|
|
|
that.$store.commit('setLoginInfo', { ...subRes.data.admin, ...subRes.data })
|
|
|
+ uni.removeStorageSync('manualLogout')
|
|
|
getShopInfo(true).then(res => { uni.setNavigationBarTitle({ title: res.name }) })
|
|
|
that.setUserShopAll()
|
|
|
|
|
|
@@ -456,6 +498,7 @@ export default {
|
|
|
uni.setStorageSync('shopId', subRes.data.admin.currentShopId)
|
|
|
uni.setStorageSync('reachVip', subRes.data.reachVip)
|
|
|
that.$store.commit('setLoginInfo', { ...subRes.data.admin, ...subRes.data })
|
|
|
+ uni.removeStorageSync('manualLogout')
|
|
|
|
|
|
getDictionaries({ token: subRes.data.token }).then(res => {
|
|
|
if (that.$util.isEmpty(res)) {
|
|
|
@@ -556,74 +599,198 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.model {
|
|
|
- position: fixed;
|
|
|
- z-index: 9999;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- color: #fff;
|
|
|
+.login-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f2f7f4;
|
|
|
+}
|
|
|
+
|
|
|
+.login-hero {
|
|
|
+ padding: 0 24upx 24upx;
|
|
|
+ background: linear-gradient(180deg, #e8f5ed 0%, #ecf6f0 72%, #f2f7f4 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.status-space {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.login-brand {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 48upx 0 32upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-logo-wrap {
|
|
|
+ width: 152upx;
|
|
|
+ height: 152upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.login-logo {
|
|
|
+ width: 152upx;
|
|
|
+ height: 152upx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 15upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-brand-name {
|
|
|
+ margin-top: 28upx;
|
|
|
+ color: #161819;
|
|
|
+ font-size: 44upx;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 52upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-brand-desc {
|
|
|
+ margin-top: 12upx;
|
|
|
+ color: #6b737c;
|
|
|
+ font-size: 28upx;
|
|
|
+ line-height: 40upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-body {
|
|
|
+ padding: 0 24upx 48upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-card {
|
|
|
+ padding: 36upx 28upx 28upx;
|
|
|
+ border-radius: 24upx;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0 8upx 24upx rgba(9, 197, 103, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.login-form {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.login-field {
|
|
|
+ margin-bottom: 24upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-field--last {
|
|
|
+ margin-bottom: 32upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 88upx;
|
|
|
+ padding: 0 28upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1upx solid #e3ebe6;
|
|
|
+ border-radius: 16upx;
|
|
|
+ background: #f7faf8;
|
|
|
+ color: #161819;
|
|
|
+ font-size: 30upx;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.login-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 103upx;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ line-height: 103upx;
|
|
|
+ border: none;
|
|
|
+ border-radius: 52upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
text-align: center;
|
|
|
- & > .noData_img {
|
|
|
- width: 318upx;
|
|
|
- height: 318upx;
|
|
|
- margin: 332upx auto 0;
|
|
|
- }
|
|
|
- & > .no_data_text {
|
|
|
- font-size: 32upx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- margin: 50upx 0;
|
|
|
- }
|
|
|
- & > .freeApply {
|
|
|
- width: 376upx;
|
|
|
- height: 88upx;
|
|
|
- line-height: 88upx;
|
|
|
- background: linear-gradient(90deg, #3385ff, #33b0ff);
|
|
|
- border-radius: 44upx;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 32upx;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- &>.experience{
|
|
|
- margin-top: 40upx;
|
|
|
- color: #fff;
|
|
|
- font-size: 30upx;
|
|
|
- }
|
|
|
- &>.experFrame{
|
|
|
- margin-top:20upx;
|
|
|
- height: 50upx;
|
|
|
- .experInput{
|
|
|
- height: 80upx;
|
|
|
- width: 80%;
|
|
|
- margin-bottom:38upx;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- background-color: #f5f5f5;
|
|
|
- border:none;
|
|
|
- border-bottom: 1px solid #CCCCCC;
|
|
|
- color: #666;
|
|
|
- padding-left: 20upx;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .buttonText{
|
|
|
- display: inline-block;
|
|
|
- line-height:92upx;
|
|
|
- padding: 0 20upx;
|
|
|
- vertical-align: middle;
|
|
|
- font-size: 32upx;
|
|
|
- width: 80%;
|
|
|
- height:90upx;
|
|
|
- }
|
|
|
- .logo{
|
|
|
- width:150upx;
|
|
|
- margin:0 auto;
|
|
|
- border-radius:20upx;
|
|
|
- }
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+.login-btn::after {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.login-btn--primary {
|
|
|
+ color: #fff;
|
|
|
+ background: #09c567;
|
|
|
+}
|
|
|
+
|
|
|
+.login-btn--weixin {
|
|
|
+ color: #fff;
|
|
|
+ background: #2ba245;
|
|
|
+}
|
|
|
+
|
|
|
+.login-agreement {
|
|
|
+ margin-top: 32upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-agreement-label {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.login-checkbox {
|
|
|
+ transform: scale(0.82);
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.login-agreement-text {
|
|
|
+ margin-left: 8upx;
|
|
|
+ color: #8a9199;
|
|
|
+ font-size: 24upx;
|
|
|
+ line-height: 36upx;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.login-agreement-link {
|
|
|
+ color: #09c567;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.login-quick {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip {
|
|
|
+ margin-bottom: 32upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip-line {
|
|
|
+ display: block;
|
|
|
+ color: #5c656d;
|
|
|
+ font-size: 28upx;
|
|
|
+ line-height: 44upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip-line + .login-tip-line {
|
|
|
+ margin-top: 8upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip-line--last {
|
|
|
+ margin-top: 16upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-tip-link {
|
|
|
+ margin-left: 8upx;
|
|
|
+ color: #09c567;
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.login-footer-links {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 36upx;
|
|
|
+ padding-top: 28upx;
|
|
|
+ border-top: 1upx solid #f0f2f1;
|
|
|
+}
|
|
|
+
|
|
|
+.login-footer-link {
|
|
|
+ color: #6b737c;
|
|
|
+ font-size: 30upx;
|
|
|
+ line-height: 42upx;
|
|
|
+}
|
|
|
+
|
|
|
+.login-footer-link--register {
|
|
|
+ color: #09c567;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
</style>
|
