antissoft / lvqianmeiye_ERP

  <template>

    <view class="page-shell home-page">
      <view class="page-blur"></view>
      <view class="page-blur-secondary"></view>
      <view class="page-blur-tertiary"></view>
  
      <view class="page-content">
        <view class="topbar capsule-safe">
          <view>
            <text class="brand-name">绿纤美业</text>
            <text class="brand-subtitle">会员专属 SPA 与肌肤管理</text>
          </view>
        </view>
  
        <view class="hero-card glass-card">
          <view class="hero-copy">
            <text class="hero-tag">TODAY'S BEAUTY RITUAL</text>
            <text class="hero-title">今日专属护理</text>
            <text class="hero-desc">
              在线预约、会员权益与到店体验，在一份更安静、更柔和的界面里被重新组织。
            </text>
          </view>
          <view class="hero-art-wrap">
            <image class="hero-art" src="/static/images/art-home.png" mode="aspectFill" />
          </view>
  
          <view class="quick-grid">
            <view v-for="item in quickEntries" :key="item.key" class="quick-item" @tap="handleQuick(item)">
              <view class="quick-icon" :class="item.iconType">
                <view class="icon-core"></view>
              </view>
              <text class="quick-title">{{ item.title }}</text>
              <text class="quick-subtitle">{{ item.subtitle }}</text>
            </view>
          </view>
        </view>
  
        <view class="section-block">
          <view class="section-head">
            <text class="section-title">最新预约记录</text>
            <text class="section-link" @tap="goRecord">查看全部</text>
          </view>
          <view class="record-card glass-card" @tap="goBookingDetail">
            <view class="record-status-row">
              <text class="record-status">{{ latestBooking.status }}</text>
              <text class="record-time">{{ latestBooking.date }} · {{ latestBooking.displayTime }}</text>
            </view>
            <text class="record-store">{{ latestBooking.store }}</text>
            <view class="record-meta-panel">
              <view class="record-meta-item">
                <text class="meta-label">护理顾问</text>
                <text class="meta-value">{{ latestBooking.therapist }}</text>
              </view>
              <view class="record-meta-item">
                <text class="meta-label">护理空间</text>
                <text class="meta-value">{{ latestBooking.room }}</text>
              </view>
            </view>
          </view>
        </view>
  
        <view class="section-block stores-section">
          <view class="section-head">
            <text class="section-title">附近门店</text>
            <text class="section-link" @tap="goStoreList">全部门店</text>
          </view>
          <view
            v-for="store in stores"
            :key="store.name"
            class="store-card glass-card"
            @tap="goStoreDetail(store)"
          >
            <view class="store-cover">
              <image class="store-cover-image" :src="store.cover" mode="aspectFill" />
              <view class="store-cover-overlay"></view>
              <text class="store-cover-badge">{{ store.tag }}</text>
              <text class="store-cover-title">{{ store.coverTitle }}</text>
            </view>
            <view class="store-body">
              <view class="store-headline">
                <text class="store-name">{{ store.name }}</text>
                <text class="store-distance">{{ store.distance }}</text>
              </view>
              <text class="store-address">{{ store.address }}</text>
              <view class="store-meta-row">
                <text class="store-meta">营业时间 {{ store.hours }}</text>
                <text class="store-meta">{{ store.phone }}</text>
              </view>
              <view class="store-actions">
                <view class="mini-button" @tap.stop="callStore(store.phone)">电话</view>
                <view class="mini-button" @tap.stop="openMap(store)">导航</view>
                <view class="mini-button primary-mini" @tap.stop="bookStore(store)">预约</view>
              </view>
            </view>
          </view>
        </view>
  
        <view class="safe-bottom-space"></view>
      </view>
  
      <view class="lf-tabbar-wrap">
        <view class="lf-tabbar-panel">
          <view
            v-for="item in tabs"
            :key="item.key"
            class="lf-tabbar-item"
            :class="{ active: item.key === 'home' }"
            @tap="goTab(item)"
          >
            <view class="lf-tabbar-icon-shell">
              <image
                class="lf-tabbar-icon"
                :src="item.key === 'home' ? item.activeIcon : item.icon"
                mode="aspectFit"
              />
            </view>
            <text class="lf-tabbar-label">{{ item.label }}</text>
          </view>
        </view>
      </view>
    </view>

  </template>
  
  <script>

  import { bookingRecords } from '@/data/mock'
  import { getPickupStores } from '@/api/mall'
  import { normalizeStore, getUserLocation, attachDistance, sortByDistance } from '@/utils/store'

  
  export default {

    data() {
      return {
        tabs: [
          {
            key: 'home',
            label: '首页',
            path: '/pages/home/home',
            icon: '/static/images/tab-home.png',
            activeIcon: '/static/images/tab-home-active.png'
          },
          {
            key: 'booking',
            label: '预约',
            path: '/pages/booking/booking',
            icon: '/static/images/tab-booking.png',
            activeIcon: '/static/images/tab-booking-active.png'
          },
          {
            key: 'mall',
            label: '商城',
            path: '/packageMall/main/main',
            icon: '/static/images/tab-mall.png',
            activeIcon: '/static/images/tab-mall-active.png'
          },
          {
            key: 'profile',
            label: '我的',
            path: '/pages/profile/profile',
            icon: '/static/images/tab-profile.png',
            activeIcon: '/static/images/tab-profile-active.png'
          }
        ],
        quickEntries: [
          {
            key: 'booking',
            title: '在线预约',
            subtitle: '锁定到店时段',
            iconType: 'orb'
          },
          {
            key: 'mall',
            title: '美容商城',
            subtitle: '浏览精选好物',
            iconType: 'leaf'
          },
          {
            key: 'record',
            title: '预约记录',
            subtitle: '查看最近安排',
            iconType: 'wave'
          }
        ],
        latestBooking: bookingRecords[0],

        stores: []

      }
    },

    onLoad() {
      this.loadNearbyStores()
    },

    methods: {

      loadNearbyStores() {
        let normalized = []
        getPickupStores({})
          .then((list) => {
            const rows = Array.isArray(list) ? list : []
            normalized = rows.map((raw) => {
              const s = normalizeStore(raw)
              s.tag = s.city || '门店'
              s.coverTitle = s.name
              return s
            })
            return getUserLocation()
          })
          .catch(() => null)
          .then((loc) => {
            attachDistance(normalized, loc)
            this.stores = sortByDistance(normalized).slice(0, 3)
          })
      },

      handleQuick(item) {
        if (item.key === 'record') {
          this.goRecord()
          return
        }
        const pathMap = {
          booking: '/pages/booking/booking',
          mall: '/packageMall/main/main'
        }
        uni.redirectTo({
          url: pathMap[item.key]
        })
      },
      goRecord() {
        uni.navigateTo({
          url: '/packageBooking/record/record'
        })
      },
      goBookingDetail() {
        uni.navigateTo({
          url: `/packageBooking/detail/detail?id=${this.latestBooking.id}`
        })
      },
      goStoreList() {
        uni.navigateTo({
          url: '/packageBooking/stores/stores'
        })
      },
      goStoreDetail(store) {
        uni.navigateTo({
          url: `/packageBooking/store-detail/store-detail?id=${store.id}`
        })
      },
      callStore(phone) {
        uni.makePhoneCall({
          phoneNumber: phone
        })
      },
      openMap(store) {

        if (store.latitude === null || store.longitude === null || store.latitude === undefined || store.longitude === undefined) {
          uni.showToast({ title: '该门店暂无坐标，无法导航', icon: 'none' })
          return
        }
        uni.openLocation({
          latitude: store.latitude,
          longitude: store.longitude,
          name: store.name,
          address: store.address || ''

        })
      },
      bookStore(store) {
        uni.redirectTo({
          url: `/pages/booking/booking?storeId=${store.id}`
        })
      },
      goTab(item) {
        if (item.key === 'home') {
          return
        }
        uni.redirectTo({
          url: item.path
        })
      }
    }

  }
  </script>
  
  <style lang="scss" scoped>

  @import '@/styles/mixins.scss';
  
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28rpx;
  }
  
  .brand-name {
    display: block;
    font-size: 42rpx;
    font-weight: 700;
    letter-spacing: 2rpx;
  }
  
  .brand-subtitle {
    display: block;
    margin-top: 10rpx;
    font-size: 24rpx;
    color: $text-secondary;
  }
  
  .hero-card {
    position: relative;
    overflow: hidden;
    margin-bottom: 28rpx;
    padding: 42rpx;
    min-height: 420rpx;
  
    &::after {
      content: '';
      position: absolute;
      right: -84rpx;
      top: 8rpx;
      width: 420rpx;
      height: 420rpx;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(100, 140, 118, 0.045), rgba(100, 140, 118, 0));
      z-index: 0;

      animation: lfFloatSoft 11.6s ease-in-out infinite;

    }
  
    &::before {
      content: '';
      position: absolute;
      right: 0;
      top: 76rpx;
      width: 250rpx;
      height: 250rpx;
      border-radius: 50%;
      border: 2rpx solid rgba(100, 140, 118, 0.038);
      z-index: 1;

      animation: lfPulseSoft 8.8s ease-in-out infinite;

    }
  }
  
  .hero-copy {
    position: relative;
    z-index: 3;
    max-width: 100%;
    padding-right: 36rpx;
  }
  
  .hero-tag {
    display: inline-block;
    margin-bottom: 18rpx;
    font-size: 20rpx;
    letter-spacing: 3rpx;
    color: $brand-primary;
  }
  
  .hero-title {
    display: block;
    font-size: 62rpx;
    line-height: 1.15;
    font-weight: 700;
    color: $brand-ink;
    white-space: nowrap;
  }
  
  .hero-desc {
    display: block;
    margin-top: 20rpx;
    color: $text-secondary;
    font-size: 28rpx;
    line-height: 1.7;
    max-width: 100%;
  }
  
  .hero-art-wrap {
    position: absolute;
    right: -118rpx;
    top: -8rpx;
    z-index: 1;
    width: 460rpx;
    height: 460rpx;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.085;
    pointer-events: none;
    filter: saturate(0.72) brightness(1.04);

    animation: lfFloatSoft 12.8s ease-in-out infinite 0.6s;

  
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 34% 40%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.10) 44%, rgba(255, 255, 255, 0));
    }
  }
  
  .hero-art {
    width: 520rpx;
    height: 520rpx;
    margin-left: -66rpx;
    margin-top: -34rpx;
    transform: rotate(-12deg) scale(1.06);
  }
  
  .quick-grid {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    margin-top: 36rpx;
  }
  
  .quick-item {
    @include outlined-card(0.8);
    width: calc((100% - 24rpx) / 3);
    padding: 28rpx 20rpx;
    border-radius: 28rpx;

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, background 320ms ease;
    animation: lfRevealUp 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  .quick-item:nth-child(1) { animation-delay: 0.28s; }
  .quick-item:nth-child(2) { animation-delay: 0.36s; }
  .quick-item:nth-child(3) { animation-delay: 0.44s; }
  
  .quick-item:active {
    transform: translateY(-4rpx) scale(1.01);
    box-shadow: 0 20rpx 38rpx rgba(54, 77, 64, 0.08);

  }
  
  .quick-icon {
    position: relative;
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    background: rgba(210, 191, 156, 0.18);
    border: 1rpx solid rgba(210, 191, 156, 0.18);

    transition: transform 280ms ease;

  }
  
  .quick-icon.leaf {
    background: rgba(182, 142, 154, 0.14);
    border-color: rgba(182, 142, 154, 0.16);
  }
  
  .quick-icon.wave {
    background: rgba(175, 194, 181, 0.18);
    border-color: rgba(100, 140, 118, 0.12);
  }
  
  .icon-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22rpx;
    height: 22rpx;
    margin-left: -11rpx;
    margin-top: -11rpx;
    border-radius: 50%;
    background: $brand-primary-deep;

    animation: lfPulseSoft 4.6s ease-in-out infinite;
  }
  
  .quick-item:active .quick-icon {
    transform: scale(1.08) rotate(-6deg);

  }
  
  .quick-icon.leaf::before,
  .quick-icon.wave::before,
  .quick-icon.wave::after,
  .quick-icon.orb::before {
    content: '';
    position: absolute;
  }
  
  .quick-icon.orb::before {
    width: 42rpx;
    height: 42rpx;
    left: 15rpx;
    top: 15rpx;
    border-radius: 50%;
    border: 3rpx solid rgba(36, 74, 61, 0.30);
  }
  
  .quick-icon.leaf::before {
    width: 26rpx;
    height: 40rpx;
    left: 24rpx;
    top: 16rpx;
    border-radius: 50% 0 50% 0;
    background: rgba(36, 74, 61, 0.22);
    transform: rotate(-24deg);
  }
  
  .quick-icon.wave::before,
  .quick-icon.wave::after {
    width: 18rpx;
    height: 18rpx;
    border: 3rpx solid rgba(36, 74, 61, 0.28);
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 18rpx 0 0;
    transform: rotate(45deg);

  }
  

  .quick-icon.wave::before {
    left: 19rpx;
    top: 28rpx;

  }
  

  .quick-icon.wave::after {
    left: 35rpx;
    top: 20rpx;

  }
  

  .quick-title {
    display: block;
    margin-top: 20rpx;
    font-size: 28rpx;
    font-weight: 600;

  }
  

  .quick-subtitle {
    display: block;
    margin-top: 8rpx;
    font-size: 22rpx;
    line-height: 1.5;
    color: $text-secondary;

  }
  
  .section-block {

    margin-bottom: 28rpx;

  }
  

  .record-card {
    padding: 34rpx;

    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
  }
  
  .record-card:active {
    transform: translateY(-4rpx);

  }
  

  .record-status-row,
  .store-headline,
  .store-meta-row,
  .store-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

  }
  

  .record-status {
    @include chip-status;
    font-weight: 600;

  }
  

  .record-time,
  .record-store,
  .store-address,
  .store-meta,
  .meta-label {
    font-size: 24rpx;
    color: $text-secondary;

  }
  

  .record-store {
    display: block;
    margin: 20rpx 0 22rpx;
    font-size: 34rpx;
    line-height: 1.4;
    font-weight: 700;
    color: $text-primary;

  }
  

  .record-meta-panel {
    display: flex;
    justify-content: space-between;
    padding: 22rpx 24rpx;
    border-radius: 28rpx;
    background: rgba(210, 191, 156, 0.10);
    box-shadow: $shadow-soft;

    transition: transform 280ms ease, background 280ms ease;
  }
  
  .record-card:active .record-meta-panel {
    transform: translateY(-2rpx);
    background: rgba(210, 191, 156, 0.14);

  }
  

  .record-meta-item {
    width: 48%;

  }
  

  .meta-label,
  .meta-value {
    display: block;

  }
  

  .meta-value {
    margin-top: 8rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: $brand-primary-deep;

  }
  

  .store-card {
    overflow: hidden;
    margin-bottom: 24rpx;
    padding: 0;

    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 340ms ease;
  }
  
  .store-card:active {
    transform: translateY(-6rpx);
    box-shadow: 0 22rpx 42rpx rgba(54, 77, 64, 0.1);

  }
  

  .store-cover {
    position: relative;
    height: 240rpx;
    padding: 28rpx;
    color: #fff;

  }
  

  .store-cover-image,
  .store-cover-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

  }
  

  .store-cover-overlay {
    background: linear-gradient(120deg, rgba(36, 74, 61, 0.18), rgba(36, 74, 61, 0.50));

  }
  

  .store-cover-image {
    transition: transform 1.2s ease;
  }
  
  .store-card:active .store-cover-image {
    transform: scale(1.05);
  }
  

  .store-cover-badge,
  .store-cover-title {
    position: relative;
    z-index: 2;

  }
  

  .store-cover-badge {
    @include chip-inverse;

  }
  

  .store-cover-title {
    position: absolute;
    left: 28rpx;
    right: 28rpx;
    bottom: 28rpx;
    font-size: 38rpx;
    line-height: 1.35;
    font-weight: 700;

  }
  

  .store-body {
    padding: 30rpx;

  }
  

  .store-name {
    font-size: 32rpx;
    font-weight: 700;

  }
  

  .store-distance {
    font-size: 24rpx;
    color: $brand-accent;
    font-weight: 600;

  }
  

  .store-address {
    display: block;
    margin: 14rpx 0;
    line-height: 1.6;

  }
  

  .store-actions {
    margin-top: 26rpx;

  }
  

  .mini-button {
    width: calc((100% - 24rpx) / 3);
    height: 72rpx;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    font-weight: 500;
    background: rgba(100, 140, 118, 0.08);
    color: $brand-primary-deep;

    transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
  }
  
  .mini-button:active {
    transform: scale(0.96);
    box-shadow: 0 10rpx 20rpx rgba(54, 77, 64, 0.08);

  }
  

  .primary-mini {
    color: #fff;
    background: $brand-primary-deep;
    border: 1rpx solid rgba(210, 191, 156, 0.22);
    box-shadow: $shadow-chip;

  }

  </style>