160 lines
3.5 KiB
JavaScript
160 lines
3.5 KiB
JavaScript
Component({
|
|
options: {
|
|
addGlobalClass: true,
|
|
},
|
|
externalClasses: ['wr-class'],
|
|
|
|
properties: {
|
|
id: {
|
|
type: String,
|
|
value: '',
|
|
observer(id) {
|
|
this.genIndependentID(id);
|
|
if (this.properties.thresholds?.length) {
|
|
this.createIntersectionObserverHandle();
|
|
}
|
|
},
|
|
},
|
|
data: {
|
|
type: Object,
|
|
observer(data) {
|
|
if (!data) {
|
|
return;
|
|
}
|
|
let isValidityLinePrice = true;
|
|
if (data.originPrice && data.price && data.originPrice < data.price) {
|
|
isValidityLinePrice = false;
|
|
}
|
|
this.setData({ goods: data, isValidityLinePrice });
|
|
},
|
|
},
|
|
currency: {
|
|
type: String,
|
|
value: '¥',
|
|
},
|
|
showCart: {
|
|
type: Boolean,
|
|
value: true,
|
|
},
|
|
thresholds: {
|
|
type: Array,
|
|
value: [],
|
|
observer(thresholds) {
|
|
if (thresholds && thresholds.length) {
|
|
this.createIntersectionObserverHandle();
|
|
} else {
|
|
this.clearIntersectionObserverHandle();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
|
|
data: {
|
|
independentID: '',
|
|
goods: { id: '' },
|
|
isValidityLinePrice: false,
|
|
},
|
|
|
|
lifetimes: {
|
|
attached() {
|
|
// 组件实例被放到页面节点树后执行
|
|
},
|
|
ready() {
|
|
this.init();
|
|
},
|
|
detached() {
|
|
this.clear();
|
|
},
|
|
},
|
|
|
|
observers: {
|
|
'goods.thumb': function(thumb) {
|
|
// 图片URL变化监听
|
|
}
|
|
},
|
|
|
|
pageLifeTimes: {},
|
|
|
|
methods: {
|
|
clickHandle() {
|
|
this.triggerEvent('click', { goods: this.data.goods });
|
|
},
|
|
|
|
clickThumbHandle() {
|
|
this.triggerEvent('thumb', { goods: this.data.goods });
|
|
},
|
|
|
|
addCartHandle(e) {
|
|
const { id } = e.currentTarget;
|
|
const { id: cardID } = e.currentTarget.dataset;
|
|
this.triggerEvent('add-cart', {
|
|
...e.detail,
|
|
id,
|
|
cardID,
|
|
goods: this.data.goods,
|
|
});
|
|
},
|
|
|
|
handleImageError(e) {
|
|
console.warn('商品卡片图片加载失败:', e.detail);
|
|
// 可以在这里设置默认图片或其他错误处理逻辑
|
|
},
|
|
|
|
genIndependentID(id) {
|
|
let independentID;
|
|
if (id) {
|
|
independentID = id;
|
|
} else {
|
|
independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
|
|
}
|
|
this.setData({ independentID });
|
|
},
|
|
|
|
init() {
|
|
const { thresholds, id } = this.properties;
|
|
this.genIndependentID(id);
|
|
if (thresholds && thresholds.length) {
|
|
this.createIntersectionObserverHandle();
|
|
}
|
|
},
|
|
|
|
clear() {
|
|
this.clearIntersectionObserverHandle();
|
|
},
|
|
|
|
intersectionObserverContext: null,
|
|
|
|
createIntersectionObserverHandle() {
|
|
if (this.intersectionObserverContext || !this.data.independentID) {
|
|
return;
|
|
}
|
|
this.intersectionObserverContext = this.createIntersectionObserver({
|
|
thresholds: this.properties.thresholds,
|
|
}).relativeToViewport();
|
|
|
|
this.intersectionObserverContext.observe(
|
|
`#${this.data.independentID}`,
|
|
(res) => {
|
|
this.intersectionObserverCB(res);
|
|
},
|
|
);
|
|
},
|
|
|
|
intersectionObserverCB() {
|
|
this.triggerEvent('ob', {
|
|
goods: this.data.goods,
|
|
context: this.intersectionObserverContext,
|
|
});
|
|
},
|
|
|
|
clearIntersectionObserverHandle() {
|
|
if (this.intersectionObserverContext) {
|
|
try {
|
|
this.intersectionObserverContext.disconnect();
|
|
} catch (e) {}
|
|
this.intersectionObserverContext = null;
|
|
}
|
|
},
|
|
},
|
|
});
|