更新记录

V1.0.0（2025-11-14） 下载此版本

此版本更新内容： 1.首页：通过选择城市、门店、抵押物品进行估算 2.商场：通过展示商品列表、分类等进行查看商品详情页，提交订单，支付 3.消息：分为3种消息类型：商品通知、系统通知、抵押通知 4.我的：展示个人钱包、抵押记录、优惠券、地址管理、实名认证、银行卡管理等

平台兼容性

项目组件使用规范说明

UniApp easycom 规范

根据 UniApp 的 easycom 规范：

✅ easycom 是自动开启的，不需要手动开启
✅ 符合规范的组件可以直接使用，无需导入或注册
✅ 不符合规范的组件需要在 pages.json 中配置 easycom 规则

组件目录结构规范

符合规范的目录结构

components/
└── 组件名称/
    └── 组件名称.vue

或者：

uni_modules/
└── 组件名称/
    └── 组件名称.vue

当前项目中的组件

✅ Tag 组件（符合规范）

components/
└── tag/
    └── tag.vue

组件名称：tag（与目录名一致）
使用方式：直接使用 <tag>，无需导入或注册

<template>
  <view>
    <!-- 直接使用，无需导入或注册 -->
    <tag text="折扣" type="discount" size="medium"></tag>
    <tag text="热门" type="hot" size="medium"></tag>
  </view>
</template>

<script>
// 这里不用 import 引入，也不需要在 components 内注册 tag 组件
// template 里就可以直接用
export default {
  data() {
    return {}
  }
}
</script>

项目配置

pages.json 配置

当前项目已移除 easycom 配置，因为：

1. ✅ easycom 自动开启，无需配置
2. ✅ components/tag/tag.vue 符合默认规范
3. ✅ 组件会自动识别和使用

{
  "uniIdRouter": {
    "loginPage": "pages/mine/mine",
    "needLogin": []
  }
  // 无需 easycom 配置
}

组件使用示例

在购物车页面使用

<!-- pages/cart/cart.vue -->
<template>
  <view class="item-tags" v-if="item.tags && item.tags.length">
    <tag 
      v-for="tag in item.tags" 
      :key="tag" 
      :text="tag" 
      :type="getTagType(tag)"
      size="small"
    ></tag>
  </view>
</template>

<script>
export default {
  methods: {
    getTagType(tag) {
      if (tag === '折扣') return 'discount';
      if (tag === '热门') return 'hot';
      return 'default';
    }
  }
}
</script>

在商品列表页面使用

<!-- pages/shop/shop.vue -->
<template>
  <view class="goods-image-wrapper">
    <image class="goods-image" :src="product.cover"></image>
    <tag 
      v-for="(tag, tagIndex) in product.tags" 
      :key="tag" 
      :text="tag" 
      :type="getTagType(tag)"
      size="medium"
      :absolute="tagIndex === 0"
      :custom-style="tagIndex === 1 ? { left: 'auto', right: '16rpx' } : {}"
    ></tag>
  </view>
</template>

如果组件不符合规范

如果你的组件路径不符合 easycom 的默认规范，有两种处理方式：

方式一：调整目录结构（推荐）

将组件移动到符合规范的目录：

components/
└── 你的组件名/
    └── 你的组件名.vue

这样就可以直接使用 <你的组件名>，无需任何配置。

方式二：在 pages.json 中配置 easycom 规则

如果无法调整目录结构，可以在 pages.json 中添加配置：

{
  "easycom": {
    "custom": {
      "^组件名$": "@/组件路径/组件名.vue"
    }
  }
}

例如：

{
  "easycom": {
    "custom": {
      "^my-component$": "@/components/custom/my-component.vue"
    }
  }
}

手动引用组件（不使用 easycom）

如果不使用 easycom，需要分 3 步：

1. import 导入组件

import Tag from '@/components/tag/tag.vue';

2. components 里注册组件

export default {
  components: {
    Tag
  }
}

3. template 中使用组件

<template>
  <view>
    <tag text="标签"></tag>
  </view>
</template>

项目中的组件使用情况

✅ 已使用 tag 组件的页面

1. pages/cart/cart.vue - 购物车标签
2. pages/shop/shop.vue - 商品标签（绝对定位）
3. pages/product-list/product-list.vue - 商品列表标签

📝 仍使用旧样式的页面（可后续迁移）

以下页面仍使用旧的标签样式，可以逐步迁移到 tag 组件：

1. pages/product-detail/product-detail.vue - 商品详情标签
2. pages/store-list/store-list.vue - 门店列表标签
3. pages/store-detail/store-detail.vue - 门店详情标签
4. pages/coupon-list/coupon-list.vue - 优惠券标签
5. pages/message/message.vue - 消息标签
6. pages/mortgage-record/mortgage-record.vue - 状态标签
7. pages/order-record/order-record.vue - 状态标签

创建新组件

步骤 1: 创建目录结构

mkdir -p components/你的组件名

步骤 2: 创建组件文件

touch components/你的组件名/你的组件名.vue

步骤 3: 编写组件代码

<template>
  <view class="your-component">
    <!-- 组件内容 -->
  </view>
</template>

<script>
export default {
  name: 'YourComponent', // 组件名称（建议与目录名一致）
  props: {
    // 组件属性
  },
  data() {
    return {
      // 组件数据
    }
  }
}
</script>

<style scoped>
.your-component {
  /* 组件样式 */
}
</style>

步骤 4: 直接使用

在任何页面中直接使用：

<template>
  <view>
    <your-component prop1="value1"></your-component>
  </view>
</template>

<script>
// 无需导入或注册
export default {
  data() {
    return {}
  }
}
</script>

优势

使用 easycom 规范的优势：

1. ✅ 自动识别：符合规范的组件自动识别
2. ✅ 无需导入：不需要 import 导入组件
3. ✅ 无需注册：不需要在 components 中注册
4. ✅ 按需打包：easycom 打包后会自动剔除没有使用的组件
5. ✅ 提升效率：大幅提升开发效率，降低使用门槛

总结

• ✅ easycom 自动开启，无需手动配置
• ✅ 符合规范的组件（components/组件名/组件名.vue）可以直接使用
• ✅ 当前项目已调整完成，tag 组件可以直接使用 <tag>
• ✅ 无需任何配置，组件会自动识别和导入