项目结构

uniapp项目通常包含以下核心目录：

pages/ └── index/ ├── index.vue // 首页 └── detail.vue // 陪玩详情页 components/ └── player-card.vue // 陪玩卡片组件 static/ └── icons/ // 图标资源 App.vue // 应用入口 main.js // 项目配置

核心功能实现

首页列表渲染

// pages/index/index.vue
<template>
  <view class="container">
    <player-card 
      v-for="item in playerList" 
      :key="item.id"
      :player="item"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      playerList: []
    }
  },
  onLoad() {
    this.getPlayerList()
  },
  methods: {
    async getPlayerList() {
      const res = await uni.request({
        url: 'https://api.example.com/players',
        method: 'GET'
      })
      this.playerList = res.data
    }
  }
}
</script>

陪玩卡片组件

// components/player-card.vue
<template>
  <view class="card" @click="navigateToDetail">
    <image :src="player.avatar" mode="aspectFill"/>
    <text class="name">{{player.nickname}}</text>
    <text class="price">¥{{player.price}}/小时</text>
  </view>
</template>

<script>
export default {
  props: {
    player: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: `/pages/index/detail?id=${this.player.id}`
      })
    }
  }
}
</script>

后端接口示例

// Spring Boot控制器示例
@RestController
@RequestMapping("/api")
public class PlayerController {
    
    @Autowired
    private PlayerService playerService;

    @GetMapping("/players")
    public List<Player> getPlayerList() {
        return playerService.getAllPlayers();
    }

    @GetMapping("/players/{id}")
    public Player getPlayerDetail(@PathVariable Long id) {
        return playerService.getPlayerById(id);
    }
}

数据库实体类

@Entity
@Table(name = "players")
public class Player {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String nickname;
    private String avatar;
    private BigDecimal price;
    private String description;
    
    // getters & setters
}

注意事项

1. 需要配置uniapp的manifest.json文件添加网络请求权限
2. 跨域问题需在后端配置CORS或使用代理
3. 图片资源建议使用云存储服务
4. 价格字段建议使用精确计算类型（如BigDecimal）

扩展功能建议

• 添加收藏功能
• 实现在线聊天模块
• 集成支付SDK
• 增加评价系统
• 实现搜索筛选功能