From 9e6e446c4c9972d55aa9b8054d1dc57900a60773 Mon Sep 17 00:00:00 2001
From: wangxiaowei <1121133807@qq.com>
Date: Sun, 14 Dec 2025 19:33:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json            |  10 +-
 src/pages/store/store.vue | 338 ++++++++++++++++++++++++++++++++++++++
 src/tabbar/config.ts      |   2 +-
 3 files changed, 348 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/store/store.vue

diff --git a/src/pages.json b/src/pages.json
index 62f01a8..51547ba 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -40,7 +40,7 @@
       {
         "iconPath": "static/tabbar/store.png",
         "selectedIconPath": "static/tabbar/store_s.png",
-        "pagePath": "pages/login/login",
+        "pagePath": "pages/store/store",
         "text": "门店管理"
       },
       {
@@ -199,6 +199,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/store/store",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/share/tea-room/share-order-detail",
       "type": "page",
diff --git a/src/pages/store/store.vue b/src/pages/store/store.vue
new file mode 100644
index 0000000..8a4d2bd
--- /dev/null
+++ b/src/pages/store/store.vue
@@ -0,0 +1,338 @@
+<route lang="jsonc" type="page">
+	{
+		"layout": "tabbar",
+		"style": {
+			"navigationStyle": "custom"
+		}
+	}
+</route>
+
+<script lang="ts" setup>
+import type { IUserResult } from '@/api/types/user'
+import { getUserInfo } from '@/api/user'
+import { useUserStore } from '@/store'
+import { router } from '@/utils/tools'
+import headerBgImg from './img/bg.png'
+import modifyBgImg from './img/modify.png'
+import editIconImg from './img/修改 (1).png'
+import defaultAvatarImg from './img/头像.png'
+import playIconImg from './img/播放 (5).png'
+
+const OSS = inject('OSS')
+const navbarHeight = inject('navbarHeight')
+const rightPadding = inject('capsuleOffset')
+
+// 本地图片资源
+const defaultAvatar = defaultAvatarImg as string
+const editIcon = editIconImg as string
+const playIcon = playIconImg as string
+const headerBg = headerBgImg as string
+const modifyBg = modifyBgImg as string
+
+// 调试：检查背景图片路径
+console.log('headerBg:', headerBg)
+
+// 登录信息相关
+const user = ref<IUserResult>({
+  id: 0,
+  sn: 0,
+  sex: '未知',
+  account: '',
+  nickname: '',
+  real_name: '',
+  avatar: '',
+  collect_count: 0,
+  coupon_count: 0,
+  create_time: '',
+  has_auth: false,
+  has_password: false,
+  member: 0,
+  mobile: '',
+  user_money: '0.00',
+  version: '',
+})
+const isLogin = ref<boolean>(false)
+
+// 客服电话
+const showServiceMobile = ref<boolean>(false)
+const sheetMenu = ref<{ name: string }[]>([])
+
+// 门店信息
+const storeInfo = ref({
+  douyin_uid: '236598984587',
+  address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
+  business_hours: '08:00-22:00',
+  contact_phone: '021-8888888',
+})
+
+// 门店媒体列表（视频/图片）
+const storeMediaList = ref([
+  { type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
+  { type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
+  { type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
+  { type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
+  { type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
+  { type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
+])
+
+// 格式化账号显示（152****3412格式）
+function formatAccount(account: string) {
+  if (!account)
+    return ''
+  if (account.length <= 7)
+    return account
+  return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
+}
+
+onShow(() => {
+  const userStore = useUserStore()
+  isLogin.value = userStore.isLoggedIn
+  console.log('🚀 ~ isLogin.value:', 1)
+  if (isLogin.value) {
+    console.log('🚀 ~ isLogin.value:', 3)
+    // 获取用户详情信息接口
+    getUserInfo().then((res) => {
+      user.value = res
+    })
+  }
+  else {
+    console.log('🚀 ~ isLogin.value:', 4)
+    Object.keys(user.value).forEach((key) => {
+      user.value[key] = ''
+    })
+  }
+})
+
+onLoad(() => {
+  uni.$on('clearUser', () => {
+    console.log('🚀 ~ isLogin.value:', 2)
+
+    const userStore = useUserStore()
+    isLogin.value = userStore.isLoggedIn
+
+    Object.keys(user.value).forEach((key) => {
+      user.value[key] = ''
+    })
+  })
+})
+
+onUnload(() => {
+  uni.$off('clearUser')
+})
+
+const My = {
+  // 跳转到个人信息
+  handleToProfile: () => {
+    if (!isLogin.value) {
+      router.navigateTo('/pages/my/profile')
+    }
+    else {
+      router.navigateTo('/pages/login/login')
+    }
+  },
+
+  // 点击显示客服电话
+  handleShowService: () => {
+    showServiceMobile.value = true
+    sheetMenu.value = [
+      { name: '400-800-8888' },
+    ]
+  },
+
+  // 选择菜单-拨打客服电话
+  handleSelectMenu: (item: any) => {
+    uni.makePhoneCall({
+      phoneNumber: item.item.name,
+    })
+  },
+
+  // 跳转到设置页面
+  handleToSettings: () => {
+    // TODO: 跳转到设置页面
+    console.log('跳转到设置页面')
+  },
+
+  // 编辑门店信息
+  handleEditStore: () => {
+    // TODO: 编辑门店信息
+    console.log('编辑门店信息')
+  },
+
+  // 预览媒体（视频/图片）
+  handlePreviewMedia: (index: number) => {
+    const item = storeMediaList.value[index]
+    if (item.type === 'video') {
+      // TODO: 播放视频
+      console.log('播放视频', item.url)
+    }
+    else {
+      // 预览图片
+      const urls = storeMediaList.value
+        .filter(i => i.type === 'image' && !i.overlay)
+        .map(i => i.url)
+      uni.previewImage({
+        current: index,
+        urls,
+      })
+    }
+  },
+}
+</script>
+
+<template>
+  <view>
+    <view class="home-bg fixed left-0 top-0 w-[100%]" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
+      <wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
+        <template #left>
+          <view class="ml-16rpx flex items-center" @click="My.handleToSettings" />
+        </template>
+        <template #right>
+          <view class="right-slot mr-16rpx flex">
+            <view class="mr-16rpx flex flex-col" @click="My.handleShowService">
+              <wd-icon name="setting" color="#fff" size="16px" />
+            </view>
+          </view>
+        </template>
+      </wd-navbar>
+    </view>
+
+    <view class="pb-0rpx" :style="{ paddingTop: `${navbarHeight}px` }">
+      <!-- 账号昵称显示 -->
+      <view class="user-info-bg relative z-10 ml-30rpx mr-30rpx flex items-center" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
+        <view class="relative z-10">
+          <wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : defaultAvatar" mode="aspectFill" round />
+        </view>
+        <view class="relative z-10 ml-22rpx flex flex-1 items-center justify-between">
+          <view class="flex-1" @click="My.handleToProfile">
+            <view class="ml-8rpx flex items-center text-36rpx leading-50rpx" style="color: #fff;">
+              {{ isLogin ? user.nickname : '立即登录' }}
+              <wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
+            </view>
+            <view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx" style="color: #fff;">
+              账号: {{ formatAccount(user.account || user.mobile) }}
+            </view>
+          </view>
+          <view class="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
+            <view class="h-148rpx w-300rpx">
+              <wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill" />
+            </view>
+            <view class="absolute bottom-12rpx left-24rpx">
+              <view class="flex items-center">
+                <view class="text-30rpx text-[#303133] font-bold leading-36rpx">
+                  ￥{{ isLogin ? user.user_money : '0.00' }}
+                </view>
+              </view>
+              <view class="ml-0rpx mt-4rpx text-20rpx text-[#909399] leading-28rpx">
+                钱包余额
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 门店信息区域 -->
+      <view class="store-info-card mt-28rpx bg-white py-30rpx pl-30rpx">
+        <view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
+          门店茶址24小时智能茶室(中新店)地址
+        </view>
+        <view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
+          <text class="w-140rpx">抖音uid:</text>
+          <text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</text>
+        </view>
+        <view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
+          <text class="w-140rpx">门店地址:</text>
+          <text class="flex-1 text-[#000]">{{ storeInfo.address || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</text>
+        </view>
+        <view class="relative mb-16rpx flex items-center">
+          <view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
+            <text class="w-140rpx">营业时间:</text>
+            <text class="flex-1 text-[#000]">{{ storeInfo.business_hours || '08:00-22:00' }}</text>
+          </view>
+          <view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx" :style="{ backgroundImage: modifyBg ? `url('${modifyBg}')` : 'none' }" @click="My.handleEditStore">
+            <wd-img width="24rpx" height="24rpx" :src="editIcon" class="mr-8rpx" />
+            <text class="text-24rpx text-[#fff]">修改</text>
+          </view>
+        </view>
+        <view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
+          <text class="w-140rpx">联系电话:</text>
+          <text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</text>
+        </view>
+      </view>
+
+      <!-- 门店视频/图片区域 -->
+      <view class="bg-white px-30rpx">
+        <view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
+          门店视频/图片
+        </view>
+        <view class="grid grid-cols-3 gap-16rpx">
+          <view
+            v-for="(item, index) in storeMediaList"
+            :key="index"
+            class="relative aspect-square w-full overflow-hidden rounded-8rpx"
+            @click="My.handlePreviewMedia(index)"
+          >
+            <wd-img
+              width="100%"
+              height="100%"
+              :src="item.url"
+              mode="aspectFill"
+            />
+            <!-- 视频播放图标 -->
+            <view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
+              <wd-img width="60rpx" height="60rpx" :src="playIcon" />
+            </view>
+            <!-- +8 遮罩 -->
+            <view v-if="item.overlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
+              <text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 客服电话 -->
+    <wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
+  </view>
+</template>
+
+<style lang="scss">
+	page {
+  background: #fff;
+}
+
+.home-bg {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: top center;
+  min-height: 450rpx;
+}
+
+.user-info-bg {
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-position: top center;
+  padding-top: 20rpx;
+  padding-bottom: 20rpx;
+  min-height: 200rpx;
+}
+
+.store-info-card {
+  position: relative;
+  z-index: 10;
+  border-radius: 32rpx 32rpx 0 0;
+}
+
+.modify-btn {
+  position: absolute;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 160rpx;
+  height: 90rpx;
+  justify-content: space-around;
+}
+
+.right-slot {
+  padding-right: v-bind(rightPadding);
+}
+</style>
diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index bf2529c..b8f1256 100644
--- a/src/tabbar/config.ts
+++ b/src/tabbar/config.ts
@@ -50,7 +50,7 @@ export const nativeTabbarList: NativeTabBarItem[] = [
 	{
 		iconPath: 'static/tabbar/store.png',
 		selectedIconPath: 'static/tabbar/store_s.png',
-		pagePath: 'pages/login/login',
+		pagePath: 'pages/store/store',
 		text: '门店管理',
 	},
 	{