shish 20 часов назад
Родитель
Сommit
1d3c8d17f3
1 измененных файлов с 85 добавлено и 51 удалено
  1. 85 51
      mallApp/src/pages/home/recent.vue

+ 85 - 51
mallApp/src/pages/home/recent.vue

@@ -1,18 +1,54 @@
 <!--
 <!--
   个人首页
   个人首页
-  已登录用户在这里管理花店,并在花店列表加载后接收尚未通知的红包到账提醒。
+  未登录展示示意花店引导登录;已登录管理真实花店,并在列表加载后接收尚未通知的红包到账提醒。
 -->
 -->
 <template>
 <template>
   <view class="page-container">
   <view class="page-container">
-    <!-- 未登录状态 -->
+    <!-- 未登录:展示示意花店,点击后引导去登录 -->
     <block v-if="loginStyle == 0">
     <block v-if="loginStyle == 0">
       <!-- 无网络提示条 -->
       <!-- 无网络提示条 -->
       <no-network-bar></no-network-bar>
       <no-network-bar></no-network-bar>
-      <view class="login-container">
-        <view class="login-content">
-          <text class="login-title">欢迎使用</text>
-          <text class="login-subtitle">登录查看您的花店</text>
-          <button class="login-btn" @click="pageTo({ url: '/pages/login/index?needBack=1' })"> 立即登录 </button>
+      <view class="main-content">
+        <view class="shop-list">
+          <view
+            class="shop-card guest-shop-card"
+            v-for="item in guestShopList"
+            :key="item.id"
+            @click="goLoginFromGuestShop"
+          >
+            <view class="shop-header">
+              <view class="shop-avatar">
+                <image
+                  class="shop-logo"
+                  :src="item.smallAvatar"
+                  mode="aspectFill"
+                />
+              </view>
+              <view class="shop-info">
+                <view class="shop-name-row">
+                  <text class="shop-name">{{ item.name }}</text>
+                  <view class="member-tag">
+                    <sprite-icon name="huangguan" :size="21" custom-class="member-crown-icon" />
+                    <text class="member-tag-text">{{ item.levelText }}</text>
+                  </view>
+                </view>
+                <text class="shop-address">{{ item.address }}</text>
+              </view>
+            </view>
+            <view class="shop-main-actions">
+              <view class="balance-btn">
+                <sprite-icon name="huashu" :size="40" custom-class="action-icon-slot" />
+                <view class="balance-btn-content">
+                  <text class="balance-btn-label">余额</text>
+                  <text class="balance-btn-value">{{ item.balanceText }}</text>
+                </view>
+              </view>
+              <view class="enter-btn">
+                <sprite-icon name="hua" :size="40" custom-class="action-icon-slot" />
+                <text class="enter-btn-text">进入店铺</text>
+              </view>
+            </view>
+          </view>
         </view>
         </view>
       </view>
       </view>
     </block>
     </block>
@@ -185,6 +221,36 @@ export default {
       hbArrivalInfo: {},
       hbArrivalInfo: {},
       hbArrivalIds: [],
       hbArrivalIds: [],
       hbArrivalLoading: false,
       hbArrivalLoading: false,
+      /**
+       * 未登录时展示的示意花店列表。
+       * 仅作界面引导,点击任意店铺都跳转登录页,不请求真实门店数据。
+       */
+      guestShopList: [
+        {
+          id: "guest-1",
+          name: "花语时光鲜花店",
+          address: "锦江区春熙路步行街 18 号",
+          levelText: "黄金会员",
+          balanceText: "1280.00",
+          smallAvatar: require("@/static/images/default-img.png"),
+        },
+        {
+          id: "guest-2",
+          name: "遇见花开",
+          address: "武侯区科华北路 88 号",
+          levelText: "白银会员",
+          balanceText: "560.50",
+          smallAvatar: require("@/static/images/default-img.png"),
+        },
+        {
+          id: "guest-3",
+          name: "绿野仙踪花坊",
+          address: "高新区天府大道中段 99 号",
+          levelText: "普通会员",
+          balanceText: "88.00",
+          smallAvatar: require("@/static/images/default-img.png"),
+        },
+      ],
     };
     };
   },
   },
   computed: {
   computed: {
@@ -233,6 +299,13 @@ export default {
     this.toBottom();
     this.toBottom();
   },
   },
   methods: {
   methods: {
+    /**
+     * 未登录示意花店点击:统一跳登录页。
+     * 登录成功后可按 needBack 返回本页查看真实花店。
+     */
+    goLoginFromGuestShop() {
+      this.pageTo({ url: "/pages/login/index?needBack=1" });
+    },
     recharge(item) {
     recharge(item) {
       this.pageTo({
       this.pageTo({
         url:
         url:
@@ -487,55 +560,16 @@ page {
   padding-bottom: calc(20upx + env(safe-area-inset-bottom));
   padding-bottom: calc(20upx + env(safe-area-inset-bottom));
 }
 }
 
 
-// 登录页面样式
-.login-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 70vh;
-  padding: 0upx 40upx 40upx 40upx;
-
-  .login-content {
-    text-align: center;
-
-    .login-title {
-      display: block;
-      font-size: 48upx;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 16upx;
-    }
-
-    .login-subtitle {
-      display: block;
-      font-size: 34upx;
-      color: #666;
-      margin-top:50upx;
-      margin-bottom: 60upx;
-    }
-
-    .login-btn {
-      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-      color: white;
-      border: none;
-      border-radius: 50upx;
-      padding: 24upx 60upx;
-      font-size: 32upx;
-      font-weight: 500;
-      box-shadow: 0 8upx 20upx rgba(255, 107, 107, 0.3);
-
-      &:active {
-        box-shadow: 0 4upx 12upx rgba(255, 107, 107, 0.4);
-      }
-    }
-  }
-}
-
 // 主要内容区域
 // 主要内容区域
 .main-content {
 .main-content {
   width: 100%;
   width: 100%;
 }
 }
 
 
+/* 未登录示意卡片:按下反馈,提示可点击去登录 */
+.guest-shop-card:active {
+  opacity: 0.92;
+}
+
 // 花店列表
 // 花店列表
 .shop-list {
 .shop-list {
   padding: 20upx 24upx 40upx;
   padding: 20upx 24upx 40upx;