uniapp-ZHSQ/packages/homeServer/index/index.vue

<template>
  <view class="container">
    <!-- 头部标题 -->
    <view class="header">
      <text class="title">榴园到家 服务至上</text>
    </view>

    <!-- 位置和搜索 -->
    <view class="location-search">
      <view class="location" @click="chooseLocation">
        <text class="location-text">{{ currentLocation }}</text>
        <image src="" class="arrow-down"></image>
      </view>
      <view class="search-box" @click="searchService">
        <image
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
          class="search-icon"
        ></image>
        <text class="search-placeholder">请输入您要找的服务</text>
      </view>
    </view>

    <!-- 服务分类 -->
    <view class="service-category">
      <view
        class="category-item"
        v-for="(item, index) in serviceCategories"
        :key="index"
        @click="navigateToService(item)"
      >
        <image :src="item.icon" class="category-icon"></image>
        <text class="category-name">{{ item.name }}</text>
      </view>
    </view>

    <!-- 到家公告 -->
    <view class="announcement">
      <text>到家<text class="announcement-title">公告</text></text>
      <view class="hrStyle">|</view>
      <text class="announcement-content"
        >公告内容公告内容公告内容公告内容...</text
      >
      <image src="" class="arrow-right"></image>
    </view>

    <!-- 广告横幅 -->
    <view class="serverList">
      <view class="serverList_left">
        <swiper>
          <swiper-item v-for="(item, index) in homeLeftList" :key="index">
            <image :src="item.pic_src" alt="" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </view>
      <view class="serverList_right">
        <view
          :class="['serverItem', `serverItem${index + 1}`]"
          @tap="headerServerClick(item)"
          v-for="(item, index) in homeRightList"
          :key="index"
        >
          <view class="serverTit">{{ item.title }}</view>
          <image :src="item.pic_src" mode="" />
        </view>
      </view>
    </view>

    <!-- 立即联系 -->
    <view class="contact-section" @click="contactService">
      <image src="" class="contact-icon"></image>
      <view class="contact-text">
        <text class="contact-title">立即联系</text>
        <br />
        <text class="contact-subtitle">未找到您需要的服务？</text>
      </view>
      <image src="" class="arrow-right"></image>
    </view>
    <view class="interval"></view>

    <!-- 推荐热门服务 -->
    <view class="hot-services">
      <view class="section-header">
        <image src="" class="section-arrow"></image>
        <text class="section-title">推荐热门服务</text>
      </view>
      <view class="service-list">
        <view
          class="service-card"
          v-for="(service, index) in hotServiceList"
          :key="index"
        >
          <image :src="service.image" class="service-image"></image>
          <!-- <view class="service-badge" v-if="service.badge">
            <text class="badge-text">{{ service.badge }}</text>
          </view> -->
          <view class="service-info">
            <view class="service-info-left">
              <text class="service-name">{{ service.name }}</text>
              <text class="service-tag">{{ service.tag }}</text>
              <br />
              <text class="service-desc">{{ service.description }}</text>
            </view>
            <view class="service-info-right">
              <view class="service-footer">
                <view
                  class="service-button"
                  @click="navigateToReservation(service)"
                >
                  <text class="button-text">去预约</text>
                </view>
                <text class="service-count">{{ service.count }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <nav-footer :current="3" />
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";
import nav from "../../../components/nav/nav";

export default {
  components: {
    nav,
  },
  data() {
    return {
      // 当前位置
      currentLocation: "衡水市桃城区",
      // 服务分类数据
      serviceCategories: [
        {
          name: "家电维修",
          icon: "",
        },
        {
          name: "数码维修",
          icon: "",
        },
        {
          name: "电器清洗",
          icon: "",
        },
        {
          name: "洗衣洗鞋",
          icon: "",
        },
        {
          name: "精细擦窗",
          icon: "",
        },
        {
          name: "整理收纳",
          icon: "",
        },
        {
          name: "家庭保姆",
          icon: "",
        },
        {
          name: "母婴服务",
          icon: "",
        },
        {
          name: "管道疏通",
          icon: "",
        },
        {
          name: "家庭保洁",
          icon: "",
        },
      ],
      // 热门服务数据
      hotServiceList: [
        {
          id: 1,
          name: "空调清洗",
          image:
            "",
          badge: "推荐",
          tag: "平台保障",
          description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
          count: "已预约100+",
        },
      ],
    };
  },
  methods: {
    // 选择位置
    chooseLocation() {
      uni.navigateTo({
        url: "/packages/areaPopup/index",
      });
    },
    // 搜索服务
    searchService() {
      uni.navigateTo({
        url: "/packages/homeServer/search/index",
      });
    },
    // 导航到服务详情
    navigateToService(item) {
      uni.navigateTo({
        url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
      });
    },
    // 导航到预约页面
    navigateToReservation(service) {
      uni.navigateTo({
        url: `/packages/homeServer/reservation/index?id=${service.id}&name=${service.name}`,
      });
    },
    // 联系客服
    contactService() {
      uni.makePhoneCall({
        phoneNumber: "400-123-4567",
      });
    },
    // 获取当前位置
    getCurrentLocation() {
      // 实际项目中应该调用定位API获取真实位置
      console.log("获取当前位置信息");
    },
  },
  onLoad() {
    this.getCurrentLocation();
  },
};
</script>

<style>
@import url("./index.css");
</style>