uniapp vue3 校园二手市场

### 使用 UniApp 和 Vue3 开发校园二手市场

#### 项目概述
校园二手市场是一个典型的电子商务平台，旨在促进学生之间的物品交换和销售。该应用程序利用了现代前端框架 Vue.js 及其最新版本 Vue 3 的优势，并借助跨平台开发工具 UniApp 实现一次编写多端运行的效果。

#### 技术栈介绍
- **Vue 3**: 提供 Composition API、改进的响应式系统以及更好的 TypeScript 支持，增强了应用性能并简化了复杂状态管理。
- **UniApp**: 基于 Vue.js 构建的应用程序框架，支持编译成多个目标平台（如微信小程序、H5 页面），极大地减少了不同平台间的重复工作量[^2]。

#### 功能模块划分
1. 用户认证与授权：注册登录、密码找回等功能；
2. 商品发布与浏览：上传图片描述待售商品详情；按分类筛选查找心仪物件；
3. 订单处理：下单支付确认收货评价等全流程跟踪；
4. 私信聊天室：买卖双方即时沟通交流协商价格条件等问题；
5. 数据统计分析：管理员查看各类报表了解运营状况做出决策调整策略方向。

#### 示例代码片段

##### 创建一个新的 Vue 组件用于展示商品列表

<template>
  <view class="goods-list">
    <block v-for="(item, index) in goodsList" :key="index">
      <navigator url="/pages/detail/main?id={{item.id}}">
        <image :src="item.image"></image>
        <text>{{ item.title }}</text>
        <price>{{ '￥' + item.price.toFixed(2) }}</price>
      </navigator>
    </block>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const goodsList = ref([
  {
    id: 1,
    title: "旧书《计算机网络》",
    price: 29.8,
    image: "/static/images/book.jpg"
  },
  // 更多商品...
]);
</script>

<style scoped>
.goods-list navigator {
  display: flex;
  align-items: center;
}
</style>

##### 配置路由以导航至商品详情页面

// pages/index/main.vue 中配置跳转链接
<navigator url="/pages/detail/main?id=1">点击查看详情</navigator>

// 在 pages.json 文件内定义 detail 页面路径映射关系
{
  "path": "pages/detail/main",
  "style": "default"
}

// 编写对应的 detail.vue 来接收参数显示具体信息
export default defineComponent({
  onLoad(options) {
    const goodId = options.id; // 获取传递过来的商品 ID 参数
    console.log(`当前访问的是编号为 ${goodId} 的商品`);
  }
});