mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-11-06 17:09:01 +08:00
feat(uniapp): 启用积分商城楼层组件(翻新为view/rpx并接入样式配置)
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user