feat(uniapp): 启用积分商城楼层组件(翻新为view/rpx并接入样式配置)

This commit is contained in:
pikachu1995@126.com
2026-10-12 10:27:13 +08:00
parent fb10038547
commit 79433dd766
4 changed files with 44 additions and 37 deletions

View File

@@ -191,7 +191,7 @@
<group v-if="item.type == 'group'" :res="item.options" />
<!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
<integral v-if="item.type == 'integral'" :res="item.options" />
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
<blank v-if="item.type == 'blank'" :res="item.options" />
<lineLayout v-if="item.type == 'line'" :res="item.options" />
@@ -231,6 +231,7 @@ import GoodsFloor from '@/pages/tabbar/home/template/tpl_goods.vue'
import blank from '@/pages/tabbar/home/template/tpl_blank.vue'
import lineLayout from '@/pages/tabbar/home/template/tpl_line.vue'
import richText from '@/pages/tabbar/home/template/tpl_rich_text.vue'
import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
import goodsTemplate from '@/components/m-goods-list/list.vue'
import { getStoreBaseInfo, getStoreCategory } from '@/api/store.js'
import {

View File

@@ -46,6 +46,7 @@
<blank v-if="item.type == 'blank'" :res="item.options" />
<lineLayout v-if="item.type == 'line'" :res="item.options" />
<richText v-if="item.type == 'richText'" :res="item.options" />
<integral v-if="item.type == 'integral'" :res="item.options" />
</view>
<fetchCoupon ref="couponRef" />
</view>
@@ -84,6 +85,7 @@ import fetchCoupon from '@/pages/tabbar/home/template/fetch_coupon.vue'
import blank from '@/pages/tabbar/home/template/tpl_blank.vue'
import lineLayout from '@/pages/tabbar/home/template/tpl_line.vue'
import richText from '@/pages/tabbar/home/template/tpl_rich_text.vue'
import integral from '@/pages/tabbar/home/template/tpl_integral.vue'
import { getFloorData } from '@/api/home'
const HOME_LAYOUT_PADDING_RPX = 16

View File

@@ -1,54 +1,62 @@
<template>
<div class="layout" v-if="goodsList.length">
<div class="join-list">
<div class="join-title" @click="goMore">
<div class="join-title-name">{{ res.list[0].title }}</div>
<div class="join-title-more">更多</div>
</div>
<div class="join-box">
<div
<view class="layout" :style="wrapperStyle" v-if="goodsList.length">
<view class="join-list">
<view class="join-title" @click="goMore">
<view class="join-title-name">{{ title }}</view>
<view class="join-title-more">更多</view>
</view>
<view class="join-box">
<view
class="join-item"
@click="goDetail(item)"
v-for="(item, index) in goodsList"
:key="index"
>
<div class="item-img-box">
<view class="item-img-box">
<u-image
class="item-img"
width="150rpx"
height="150rpx"
:src="item.goodsImage || item.thumbnail"
/>
</div>
<div class="item-price">
</view>
<view class="item-price">
<span class="price-text">{{ item.points != null ? item.points : 0 }}积分</span>
</div>
<div class="item-line-through" v-if="item.originalPrice">
</view>
<view class="item-line-through" v-if="item.originalPrice">
<span class="price-text">¥{{ item.originalPrice }}</span>
</div>
</div>
</div>
</div>
</div>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, computed, onMounted } from "vue";
import * as API_Promotions from "@/api/promotions";
const props = defineProps<{ res: any }>();
const goodsList = ref<any[]>([]);
const title = computed(() => props.res?.list?.[0]?.title || "积分商城");
const count = computed(() => props.res?.list?.[0]?.count || 3);
const wrapperStyle = computed(() => ({
background: props.res?.bgColor || "#FFFFFF",
padding: `0 ${props.res?.paddingX ?? 0}rpx`,
marginBottom: `${props.res?.pageGap ?? 10}rpx`,
borderRadius: `${props.res?.borderRadius ?? 0}rpx`,
overflow: "hidden",
}));
onMounted(() => {
API_Promotions.getPointsGoods({
pageNumber: 1,
pageSize: props.res.list[0].count || 3,
pageSize: count.value,
}).then((res) => {
if (res.data.success && res.data.result && res.data.result.records) {
goodsList.value = res.data.result.records.slice(
0,
props.res.list[0].count || 3
);
goodsList.value = res.data.result.records.slice(0, count.value);
}
});
});
@@ -68,7 +76,7 @@ function goDetail(item: any) {
}
.item-price {
.price-text {
font-size: 15px;
font-size: 30rpx;
font-weight: 500;
color: $main-color;
}
@@ -77,18 +85,12 @@ function goDetail(item: any) {
flex: 1;
text-align: center;
}
.item-img {
width: 75px;
height: 75px;
margin: 0 auto;
display: block;
}
.item-img-box {
position: relative;
}
.item-line-through {
.price-text {
font-size: 10px;
font-size: 20rpx;
font-weight: 400;
text-decoration: line-through;
color: #999;
@@ -99,13 +101,14 @@ function goDetail(item: any) {
justify-content: space-between;
align-items: center;
background: #fff;
height: 50px;
height: 100rpx;
padding: 0 20rpx;
.join-title-name {
font-size: 16px;
font-size: 32rpx;
font-weight: bold;
}
.join-title-more {
font-size: 12px;
font-size: 24rpx;
color: #999;
}
}

View File

@@ -41,7 +41,7 @@
<group v-if="item.type == 'group'" :res="item.options" />
<notice v-if="item.type == 'notice'" :res="item.options" />
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
<!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
<integral v-if="item.type == 'integral'" :res="item.options" />
<!-- <spike v-if="item.type == 'spike'" :res="item.options" /> -->
<videoLayout v-if="item.type == 'video'" :res="item.options" />
<blank v-if="item.type == 'blank'" :res="item.options" />
@@ -77,6 +77,7 @@ import promotions from '@/pages/tabbar/home/template/tpl_promotions_detail'
import blank from '@/pages/tabbar/home/template/tpl_blank'
import lineLayout from '@/pages/tabbar/home/template/tpl_line'
import richText from '@/pages/tabbar/home/template/tpl_rich_text'
import integral from '@/pages/tabbar/home/template/tpl_integral'
import { toSpecial, getSpecial } from '@/api/home'
import permision from '@/js_sdk/wa-permission/permission.js'
import config from '@/config/config'