更新

hdApp/src/admin/home/login.vue

@@ -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>

hdApp/src/admin/home/me.vue

@@ -204,8 +204,20 @@ export default {
   computed: {
     ...mapGetters(["getLoginInfo"]),
     isLoggedIn () {
+      if (uni.getStorageSync("manualLogout") === "1") {
+        return false;
+      }
+      const token = uni.getStorageSync("token");
+      if (this.$util.isEmpty(token)) {
+        return false;
+      }
       const loginInfo = this.getLoginInfo || {};
-      return !this.$util.isEmpty(loginInfo.admin) && loginInfo.admin.currentShopId > 0;
+      const currentShopId = Number(
+        (loginInfo.admin && loginInfo.admin.currentShopId) ||
+        loginInfo.currentShopId ||
+        0
+      );
+      return currentShopId > 0;
     },
     shopTitle () {
       const sjName = this.myInfo.sjName || "";
@@ -260,9 +272,24 @@ export default {
     };
   },
   onPullDownRefresh () {
-    this.getMyInfo();
+    if (this.isLoggedIn) {
+      this.getMyInfo();
+    } else {
+      this.resetGuestState();
+      uni.stopPullDownRefresh();
+    }
   },
   onShow () {
+    if (uni.getStorageSync("manualLogout") === "1") {
+      this.$store.commit("setLoginInfo", {});
+      this.$store.commit("setMyShopInfo", {});
+      this.resetGuestState();
+      return;
+    }
+    if (!this.isLoggedIn) {
+      this.resetGuestState();
+      return;
+    }
     this.getMyInfo();
   },
   onLoad () {
@@ -279,6 +306,7 @@ export default {
   methods: {
     iconSrc,
     goLogin () {
+      uni.removeStorageSync("manualLogout");
       this.$util.pageTo({ url: "/admin/home/login" });
     },
     goRegister () {
@@ -292,8 +320,16 @@ export default {
         this.statusBarHeight = 0;
       }
     },
+    resetGuestState () {
+      this.myInfo = {};
+      this.lookMoney = 0;
+    },
     init () {
-      this.getMyInfo();
+      if (this.isLoggedIn) {
+        this.getMyInfo();
+      } else {
+        this.resetGuestState();
+      }
     },
     moneyFormat (value) {
       const number = Number(value) || 0;
@@ -340,7 +376,13 @@ export default {
         clearLogin({ deviceId: deviceId }).then(res => {
           if (res.code == 1) {
             uni.clearStorage();
+            if (deviceId) {
+              uni.setStorageSync("deviceId", deviceId);
+            }
+            uni.setStorageSync("manualLogout", "1");
             this.$store.commit("setLoginInfo", {});
+            this.$store.commit("setMyShopInfo", {});
+            this.resetGuestState();
 
             // #ifdef APP-PLUS
             plus.runtime.restart();
@@ -399,10 +441,17 @@ export default {
       });
     },
     getMyInfo () {
+      if (!this.isLoggedIn) {
+        this.resetGuestState();
+        uni.stopPullDownRefresh();
+        return Promise.resolve();
+      }
       return mainMy().then(res => {
         if (res.code == 1) {
           this.myInfo = res.data;
           this.lookMoney = res.data.lookMoney;
+        } else {
+          this.resetGuestState();
         }
       }).finally(() => {
         uni.stopPullDownRefresh();
@@ -940,7 +989,7 @@ export default {
   border: none;
   border-radius: 33upx;
   color: #fff;
-  font-size: 32upx;
+  font-size: 36upx;
   font-weight: 600;
   text-align: center;
   background: #09c567;
@@ -1022,14 +1071,14 @@ export default {
 
 .guest-register-tip {
   color: #8a9199;
-  font-size: 28upx;
+  font-size: 32upx;
   line-height: 40upx;
 }
 
 .guest-register-link {
   margin-left: 8upx;
   color: #09c567;
-  font-size: 28upx;
+  font-size: 32upx;
   line-height: 40upx;
   font-weight: 600;
 }

hdApp/src/admin/home/workbench.vue

@@ -23,7 +23,7 @@
             </view>
             <view class="login-card-main">
               <text class="login-card-title">个人买花</text>
-              <text class="login-card-desc">跳转商城小程序，浏览我的花店</text>
+              <text class="login-card-desc">购买花材、花束和绿植</text>
             </view>
             <button class="login-card-btn login-card-btn--outline" @click="buyItem">去买花</button>
           </view>
@@ -774,9 +774,9 @@ export default {
 .login-hero-title {
   display: block;
   color: #161819;
-  font-size: 50upx;
+  font-size: 54upx;
   font-weight: 700;
-  line-height: 56upx;
+  line-height: 60upx;
   text-shadow:
     0 0 12upx rgba(255, 255, 255, 0.92),
     0 2upx 6upx rgba(255, 255, 255, 0.75);
@@ -786,8 +786,8 @@ export default {
   display: block;
   margin-top: 14upx;
   color: #6b737c;
-  font-size: 28upx;
-  line-height: 40upx;
+  font-size: 32upx;
+  line-height: 44upx;
 }
 
 .login-body {
@@ -840,17 +840,17 @@ export default {
 .login-card-title {
   display: block;
   color: #161819;
-  font-size: 32upx;
+  font-size: 36upx;
   font-weight: 700;
-  line-height: 40upx;
+  line-height: 44upx;
 }
 
 .login-card-desc {
   display: block;
   margin-top: 8upx;
   color: #8a9199;
-  font-size: 24upx;
-  line-height: 34upx;
+  font-size: 28upx;
+  line-height: 38upx;
 }
 
 .login-card-btn {
@@ -858,11 +858,11 @@ export default {
   margin: 0 0 0 16upx;
   padding: 0 28upx;
   min-width: 148upx;
-  height: 66upx;
-  line-height: 66upx;
-  font-size: 28upx;
+  height: 86upx;
+  line-height: 86upx;
+  font-size: 32upx;
   font-weight: 600;
-  border-radius: 33upx;
+  border-radius: 43upx;
   text-align: center;
   border: none;
 }
@@ -880,7 +880,7 @@ export default {
   color: #09c567;
   background: #fff;
   border: 2upx solid #09c567;
-  line-height: 62upx;
+  line-height: 82upx;
 }
 
 .login-register {
@@ -893,15 +893,15 @@ export default {
 
 .login-register-tip {
   color: #8a9199;
-  font-size: 36upx;
-  line-height: 40upx;
+  font-size: 40upx;
+  line-height: 44upx;
 }
 
 .login-register-link {
   margin-left: 8upx;
   color: #09c567;
-  font-size: 36upx;
-  line-height: 40upx;
+  font-size: 40upx;
+  line-height: 44upx;
   font-weight: 600;
 }