uni-app

# uni-app Cross-Platform App for GreenFarm Groceries

## Overview
A responsive e-commerce app for GreenFarm Groceries, built with uni-app to support iOS, Android, and web platforms. Features include product listings, a shopping cart, user authentication, and order tracking.

## Project Structure
```
📁 src/
├── 📁 pages/
│   ├── 📁 home/
│   │   └── index.vue
│   ├── 📁 products/
│   │   └── index.vue
│   ├── 📁 cart/
│   │   └── index.vue
│   └── 📁 user/
│       ├── login.vue
│       └── profile.vue
├── 📁 components/
│   ├── 📁 ProductCard.vue
│   ├── 📁 CartItem.vue
│   └── 📁 HeaderNav.vue
├── 📁 static/
│   └── 📁 images/
├── 📁 store/
│   └── index.js
├── 📁 api/
│   └── products.js
├── App.vue
├── main.js
└── manifest.json
```

## Key Features Implemented

### 1. Product Listing Page (`pages/products/index.vue`)
- Uses `uni-list` and `uni-list-item` for product display.
- Fetches data from a mock API using `uni.request`.
- Implements infinite scroll with `uni-load-more`.

```vue
<template>
  <view>
    <uni-list>
      <uni-list-item
        v-for="product in products"
        :key="product.id"
        :title="product.name"
        :note="product.description"
        :thumb="product.image"
        @click="goToProduct(product.id)"
      />
    </uni-list>
    <uni-load-more :status="loadingStatus" />
  </view>
</template>

<script>
import { uniList, uniListItem, uniLoadMore } from '@dcloudio/uni-ui';
import { getProducts } from '@/api/products';

export default {
  components: { uniList, uniListItem, uniLoadMore },
  data() {
    return {
      products: [],
      loadingStatus: 'more',
      page: 1,
      limit: 10
    };
  },
  async onLoad() {
    await this.loadProducts();
  },
  methods: {
    async loadProducts() {
      this.loadingStatus = 'loading';
      const data = await getProducts(this.page, this.limit);
      this.products = [...this.products, ...data];
      this.loadingStatus = data.length < this.limit ? 'noMore' : 'more';
    },
    goToProduct(id) {
      uni.navigateTo({
        url: `/pages/products/detail?id=${id}`
      });
    }
  },
  onReachBottom() {
    if (this.loadingStatus === 'more') {
      this.page++;
      this.loadProducts();
    }
  }
};
</script>
```

### 2. Shopping Cart (`pages/cart/index.vue`)
- Uses `uni-data-picker` for cart management.
- Syncs with Pinia store for state management.
- Implements swipe actions for item removal.

### 3. User Authentication (`pages/user/login.vue`)
- Uses uni-app's `uni-id-pages` module for login.
- Supports OAuth with Apple, Google, and WeChat.

### 4. Responsive Design
- Adapts layout for mobile and desktop using CSS media queries.
- Uses `uni-app`'s built-in `uni-platform` detection for platform-specific styles.

## Deployment

### iOS & Android
1. Install HBuilderX and configure the project.
2. Run `npm run build` to generate platform-specific bundles.
3. Use `uni-app` cloud compilation or local SDK to build APK/IPA.

### Web
1. Run `npm run build:mp-weixin` for mini-programs or `npm run build:h5` for web.
2. Deploy the `dist/build/h5` folder to a web server.

### HarmonyOS
1. Configure the `manifest.json` for HarmonyOS support.
2. Use DevEco Studio to compile and deploy the app.

## Next Steps
- Integrate payment gateways (Stripe, Alipay).
- Add real-time order tracking with WebSockets.
- Implement push notifications using `uni-push`.

---
*Built with uni-app 3.0+ | Vue 3 | Pinia*