【功能完善】积分商城：完善活动列表布局切换
puhui999
parent
fb3120d818
commit
da4cd2238e
|
|
@ -1,6 +1,18 @@
|
|||
<!-- 页面 -->
|
||||
<template>
|
||||
<s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
|
||||
</view>
|
||||
<view class="list-icon" @tap="iconStatus = !iconStatus">
|
||||
<text v-if="iconStatus" class="sicon-goods-list" />
|
||||
<text v-else class="sicon-goods-card" />
|
||||
</view>
|
||||
</view>
|
||||
</su-sticky>
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
:style="{ height: pageHeight + 'rpx' }"
|
||||
|
|
@ -8,7 +20,7 @@
|
|||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<s-point-card ref="sPointCardRef" :property="sPointCardData" />
|
||||
<s-point-card ref="sPointCardRef" :property="sPointCardData" class="ss-p-x-20 ss-m-t-20"/>
|
||||
<s-empty
|
||||
v-if="activityTotal === 0"
|
||||
icon="/static/goods-empty.png"
|
||||
|
|
@ -28,7 +40,7 @@
|
|||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import PointApi from '@/sheep/api/promotion/point';
|
||||
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
|
||||
|
||||
|
|
@ -39,10 +51,31 @@
|
|||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||
|
||||
const sPointCardData = ref({
|
||||
'layoutType': 'oneColBigImg',
|
||||
'layoutType': 'twoCol',
|
||||
});
|
||||
// 布局类型
|
||||
const LayoutTypeEnum = {
|
||||
// 单列大图
|
||||
ONE_COL_BIG_IMG: 'oneColBigImg',
|
||||
// 双列
|
||||
TWO_COL: 'twoCol',
|
||||
};
|
||||
const sPointCardRef = ref();
|
||||
|
||||
// true - 单列布局；false - 双列布局
|
||||
const iconStatus = computed({
|
||||
get() {
|
||||
return sPointCardData.value.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG;
|
||||
},
|
||||
set(newValue) {
|
||||
newValue ? (sPointCardData.value.layoutType = LayoutTypeEnum.ONE_COL_BIG_IMG) :
|
||||
(sPointCardData.value.layoutType = LayoutTypeEnum.TWO_COL);
|
||||
// 只有双列布局时需要
|
||||
if (sPointCardData.value.layoutType === LayoutTypeEnum.TWO_COL) {
|
||||
// 分列
|
||||
sPointCardRef.value.calculateGoodsColumn();
|
||||
}
|
||||
},
|
||||
});
|
||||
// 查询活动列表
|
||||
const activityPageParams = reactive({
|
||||
pageNo: 1, // 页码
|
||||
|
|
@ -55,8 +88,8 @@
|
|||
async function getActivityList() {
|
||||
loadStatus.value = 'loading';
|
||||
const { data } = await PointApi.getPointActivityPage(activityPageParams);
|
||||
await sPointCardRef.value.concatActivity(data.list)
|
||||
activityCount.value = sPointCardRef.value.getActivityCount()
|
||||
await sPointCardRef.value.concatActivity(data.list);
|
||||
activityCount.value = sPointCardRef.value.getActivityCount();
|
||||
activityTotal.value = data.total;
|
||||
|
||||
loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<view>
|
||||
<!-- 布局1. 单列大图（上图，下内容）-->
|
||||
<view
|
||||
v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
|
||||
v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
|
||||
class="goods-sl-box"
|
||||
>
|
||||
<view
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<!-- 购买按钮 -->
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<!-- 布局2. 单列小图（左图，右内容） -->
|
||||
<view
|
||||
v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
|
||||
v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
|
||||
class="goods-lg-box"
|
||||
>
|
||||
<view
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<!-- 购买按钮 -->
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
<!-- 布局3. 双列（每一列：上图，下内容）-->
|
||||
<view
|
||||
v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
|
||||
v-if="state.property.layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
|
||||
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
|
||||
>
|
||||
<view class="goods-list-box">
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
<!-- 购买按钮 -->
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
<!-- 购买按钮 -->
|
||||
<template v-slot:cart>
|
||||
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-column>
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
/**
|
||||
* 商品卡片
|
||||
*/
|
||||
import { computed, onMounted, reactive, watch } from 'vue';
|
||||
import { computed, nextTick, onMounted, reactive, watch } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
|
||||
|
|
@ -222,23 +222,22 @@
|
|||
watch(() => props.property, (newVal) => {
|
||||
state.property = { ...state.property, ...newVal };
|
||||
}, { immediate: true, deep: true });
|
||||
const { layoutType, btnBuy } = state.property || {};
|
||||
const { marginLeft, marginRight } = state.styles || {};
|
||||
const { marginLeft, marginRight } = state.property.styles || {};
|
||||
|
||||
// 购买按钮样式
|
||||
const buyStyle = computed(() => {
|
||||
if (btnBuy.type === 'text') {
|
||||
if (state.property.btnBuy.type === 'text') {
|
||||
// 文字按钮：线性渐变背景颜色
|
||||
return {
|
||||
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
|
||||
background: `linear-gradient(to right, ${state.property.btnBuy.bgBeginColor}, ${state.property.btnBuy.bgEndColor})`,
|
||||
};
|
||||
}
|
||||
if (btnBuy.type === 'img') {
|
||||
if (state.property.btnBuy.type === 'img') {
|
||||
// 图片按钮
|
||||
return {
|
||||
width: '54rpx',
|
||||
height: '54rpx',
|
||||
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
|
||||
background: `url(${sheep.$url.cdn(state.property.btnBuy.imgUrl)}) no-repeat`,
|
||||
backgroundSize: '100% 100%',
|
||||
};
|
||||
}
|
||||
|
|
@ -309,20 +308,16 @@
|
|||
spu.activityType = PromotionActivityTypeEnum.POINT.type;
|
||||
}
|
||||
});
|
||||
// 只有双列布局时需要
|
||||
if (state.property.layoutType === LayoutTypeEnum.TWO_COL) {
|
||||
// 分列
|
||||
calculateGoodsColumn();
|
||||
}
|
||||
}
|
||||
function getActivityCount() {
|
||||
return state.spuList.length;
|
||||
}
|
||||
defineExpose({ concatActivity,getActivityCount });
|
||||
|
||||
// 初始化
|
||||
onMounted(async () => {
|
||||
// 只有双列布局时需要
|
||||
if (layoutType === LayoutTypeEnum.TWO_COL) {
|
||||
// 分列
|
||||
calculateGoodsColumn();
|
||||
}
|
||||
});
|
||||
defineExpose({ concatActivity,getActivityCount,calculateGoodsColumn });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue