添加设备管理页面
This commit is contained in:
wangxiaowei
@ -40,7 +40,7 @@
|
|||||||
{
|
{
|
||||||
"iconPath": "static/tabbar/store.png",
|
"iconPath": "static/tabbar/store.png",
|
||||||
"selectedIconPath": "static/tabbar/store_s.png",
|
"selectedIconPath": "static/tabbar/store_s.png",
|
||||||
"pagePath": "pages/login/login",
|
"pagePath": "pages/store/store",
|
||||||
"text": "门店管理"
|
"text": "门店管理"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -199,6 +199,14 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/store/store",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/share/tea-room/share-order-detail",
|
"path": "pages/share/tea-room/share-order-detail",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
|||||||
338
src/pages/store/store.vue
Normal file
338
src/pages/store/store.vue
Normal file
@ -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>
|
||||||
@ -50,7 +50,7 @@ export const nativeTabbarList: NativeTabBarItem[] = [
|
|||||||
{
|
{
|
||||||
iconPath: 'static/tabbar/store.png',
|
iconPath: 'static/tabbar/store.png',
|
||||||
selectedIconPath: 'static/tabbar/store_s.png',
|
selectedIconPath: 'static/tabbar/store_s.png',
|
||||||
pagePath: 'pages/login/login',
|
pagePath: 'pages/store/store',
|
||||||
text: '门店管理',
|
text: '门店管理',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user