Module Địa Chỉ

Khi import tĩnh mã, cần sửa đường dẫn:

<navigator url="/pages/address/index" hover-class="none" class="item arrow">

Trong thành phần con, nhận ID để sửa địa chỉ và thực hiện kiểm tra.

Đối tượng Sự Kiện trong Vue

Trong Vue, dữ liệu sự kiện được lưu trong thuộc tính detail của đối tượng event. Do đó, cần truy cập qua ev.detail.value thay vì ev.value.

Module SKU

Vấn đề lớn trong SKU xảy ra khi không kiểm soát giá trị số lượng. Giải pháp:

if (value > maxValue) {
  value = maxValue;
} else if (value < minValue) {
  value = minValue;
}

Có thể sử dụng hàm Math.min và Math.max để đơn giản hóa:

value = Math.min(Math.max(value, minValue), maxValue);

Component Số Lượng

Component step input được cải tiến với cấu trúc mới:

<template>
  <view class="input-number-container">
    <view class="decrease-button" @click="decrease">−</view>
    <input v-model="currentValue" type="number" ... />
    <view class="increase-button" @click="increase">+</view>
  </view>
</template>

<script>
export default {
  props: {
    modelValue: Number,
    minValue: { type: Number, default: 1 },
    maxValue: { type: Number, default: 100 },
    step: { type: Number, default: 1 },
  },
  data() {
    return {
      currentValue: this.modelValue,
    };
  },
  methods: {
    decrease() {
      let newValue = this.currentValue - this.step;
      if (newValue < this.minValue) newValue = this.minValue;
      this.updateValue(newValue);
    },
    increase() {
      let newValue = this.currentValue + this.step;
      if (newValue > this.maxValue) newValue = this.maxValue;
      this.updateValue(newValue);
    },
    updateValue(value) {
      this.currentValue = value;
      this.$emit('update:modelValue', value);
    }
  }
};
</script>

Module Giỏ Hàng

Xử lý xóa sản phẩm với xác nhận:

<button @tap="() => {
  uni.showModal({
    title: 'Xác nhận',
    content: 'Bạn có chắc chắn muốn xóa?',
    success: (res) => {
      if (res.confirm) {
        removeItem(item.productId);
      }
    }
  });
}">Xóa</button>

Hiển thị tổng số lượng và giá trị:

const totalQuantity = computed(() => {
  return cartItems.value
    .filter(item => item.isSelected)
    .reduce((sum, item) => sum + item.quantity, 0);
});

const totalPrice = computed(() => {
  return cartItems.value
    .filter(item => item.isSelected)
    .reduce((sum, item) => sum + item.price * item.quantity, 0);
});

Phân Trang "Có Thể Bạn Sẽ Thích"

Sử dụng onScrolltolower để tải thêm dữ liệu khi cuộn xuống:

<scroll-view scroll-y @scrolltolower="loadMoreItems">
  ...
</scroll-view>

Trong đó, loadMoreItems là hàm đã được封装.