|
|
@ -4,24 +4,11 @@
|
|
|
|
<view>
|
|
|
|
<view>
|
|
|
|
<!-- 布局1. 单列大图(上图,下内容)-->
|
|
|
|
<!-- 布局1. 单列大图(上图,下内容)-->
|
|
|
|
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
|
|
|
|
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.goodsList.length" class="goods-sl-box">
|
|
|
|
<view
|
|
|
|
<view class="goods-box" v-for="item in state.goodsList" :key="item.id"
|
|
|
|
class="goods-box"
|
|
|
|
:style="[{ marginBottom: data.space * 2 + 'rpx' }]">
|
|
|
|
v-for="item in state.goodsList"
|
|
|
|
<s-goods-column class="" size="sl" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
|
|
|
|
:key="item.id"
|
|
|
|
:titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
|
|
|
|
:style="[{ marginBottom: data.space * 2 + 'rpx' }]"
|
|
|
|
:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom" @click="onGoGoods(item.id)">
|
|
|
|
>
|
|
|
|
|
|
|
|
<s-goods-column
|
|
|
|
|
|
|
|
class=""
|
|
|
|
|
|
|
|
size="sl"
|
|
|
|
|
|
|
|
:goodsFields="data.fields"
|
|
|
|
|
|
|
|
:tagStyle="data.badge"
|
|
|
|
|
|
|
|
:data="item"
|
|
|
|
|
|
|
|
:titleColor="data.fields.name?.color"
|
|
|
|
|
|
|
|
:subTitleColor="data.fields.introduction.color"
|
|
|
|
|
|
|
|
:topRadius="data.borderRadiusTop"
|
|
|
|
|
|
|
|
:bottomRadius="data.borderRadiusBottom"
|
|
|
|
|
|
|
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<template v-slot:cart>
|
|
|
|
<template v-slot:cart>
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
@ -33,31 +20,16 @@
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 布局2. 双列(每一列:上图,下内容)-->
|
|
|
|
<!-- 布局2. 双列(每一列:上图,下内容)-->
|
|
|
|
<view
|
|
|
|
<view v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
|
|
|
|
v-if="layoutType === LayoutTypeEnum.TWO_COL && state.goodsList.length"
|
|
|
|
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top">
|
|
|
|
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<view class="goods-list-box">
|
|
|
|
<view class="goods-list-box">
|
|
|
|
<view
|
|
|
|
<view class="left-list" :style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
|
|
|
|
class="left-list"
|
|
|
|
v-for="item in state.leftGoodsList" :key="item.id">
|
|
|
|
:style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
|
|
|
|
<s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
|
|
|
|
v-for="item in state.leftGoodsList"
|
|
|
|
:titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
|
|
|
|
:key="item.id"
|
|
|
|
:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
|
|
|
|
>
|
|
|
|
:titleWidth="330 - marginLeft - marginRight" @click="onGoGoods(item.id)"
|
|
|
|
<s-goods-column
|
|
|
|
@getHeight="calculateGoodsColumn($event, 'left')">
|
|
|
|
class="goods-md-box"
|
|
|
|
|
|
|
|
size="md"
|
|
|
|
|
|
|
|
:goodsFields="data.fields"
|
|
|
|
|
|
|
|
:tagStyle="data.badge"
|
|
|
|
|
|
|
|
:data="item"
|
|
|
|
|
|
|
|
:titleColor="data.fields.name?.color"
|
|
|
|
|
|
|
|
:subTitleColor="data.fields.introduction.color"
|
|
|
|
|
|
|
|
:topRadius="data.borderRadiusTop"
|
|
|
|
|
|
|
|
:bottomRadius="data.borderRadiusBottom"
|
|
|
|
|
|
|
|
:titleWidth="330 - marginLeft - marginRight"
|
|
|
|
|
|
|
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
|
|
|
|
|
|
|
@getHeight="calculateGoodsColumn($event, 'left')"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<template v-slot:cart>
|
|
|
|
<template v-slot:cart>
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
@ -68,26 +40,13 @@
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="goods-list-box">
|
|
|
|
<view class="goods-list-box">
|
|
|
|
<view
|
|
|
|
<view class="right-list" :style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
|
|
|
|
class="right-list"
|
|
|
|
v-for="item in state.rightGoodsList" :key="item.id">
|
|
|
|
:style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
|
|
|
|
<s-goods-column class="goods-md-box" size="md" :goodsFields="data.fields" :tagStyle="data.badge" :data="item"
|
|
|
|
v-for="item in state.rightGoodsList"
|
|
|
|
:titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
|
|
|
|
:key="item.id"
|
|
|
|
:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom"
|
|
|
|
>
|
|
|
|
:titleWidth="330 - marginLeft - marginRight" @click="onGoGoods(item.id)"
|
|
|
|
<s-goods-column
|
|
|
|
@getHeight="calculateGoodsColumn($event, 'right')">
|
|
|
|
class="goods-md-box"
|
|
|
|
|
|
|
|
size="md"
|
|
|
|
|
|
|
|
:goodsFields="data.fields"
|
|
|
|
|
|
|
|
:tagStyle="data.badge"
|
|
|
|
|
|
|
|
:data="item"
|
|
|
|
|
|
|
|
:titleColor="data.fields.name?.color"
|
|
|
|
|
|
|
|
:subTitleColor="data.fields.introduction.color"
|
|
|
|
|
|
|
|
:topRadius="data.borderRadiusTop"
|
|
|
|
|
|
|
|
:bottomRadius="data.borderRadiusBottom"
|
|
|
|
|
|
|
|
:titleWidth="330 - marginLeft - marginRight"
|
|
|
|
|
|
|
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
|
|
|
|
|
|
|
@getHeight="calculateGoodsColumn($event, 'right')"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<template v-slot:cart>
|
|
|
|
<template v-slot:cart>
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
@ -101,24 +60,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 布局3. 单列小图(左图,右内容) -->
|
|
|
|
<!-- 布局3. 单列小图(左图,右内容) -->
|
|
|
|
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
|
|
|
|
<view v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.goodsList.length" class="goods-lg-box">
|
|
|
|
<view
|
|
|
|
<view class="goods-box" :style="[{ marginBottom: data.space + 'px' }]" v-for="item in state.goodsList"
|
|
|
|
class="goods-box"
|
|
|
|
:key="item.id">
|
|
|
|
:style="[{ marginBottom: data.space + 'px' }]"
|
|
|
|
<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :data="item" :tagStyle="data.badge"
|
|
|
|
v-for="item in state.goodsList"
|
|
|
|
:titleColor="data.fields.name?.color" :subTitleColor="data.fields.introduction.color"
|
|
|
|
:key="item.id"
|
|
|
|
:topRadius="data.borderRadiusTop" :bottomRadius="data.borderRadiusBottom" @tap="onGoGoods(item.id)">
|
|
|
|
>
|
|
|
|
|
|
|
|
<s-goods-column
|
|
|
|
|
|
|
|
class="goods-card"
|
|
|
|
|
|
|
|
size="lg"
|
|
|
|
|
|
|
|
:goodsFields="data.fields"
|
|
|
|
|
|
|
|
:data="item"
|
|
|
|
|
|
|
|
:tagStyle="data.badge"
|
|
|
|
|
|
|
|
:titleColor="data.fields.name?.color"
|
|
|
|
|
|
|
|
:subTitleColor="data.fields.introduction.color"
|
|
|
|
|
|
|
|
:topRadius="data.borderRadiusTop"
|
|
|
|
|
|
|
|
:bottomRadius="data.borderRadiusBottom"
|
|
|
|
|
|
|
|
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<!-- 购买按钮 -->
|
|
|
|
<template v-slot:cart>
|
|
|
|
<template v-slot:cart>
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
|
|
@ -237,6 +183,20 @@
|
|
|
|
calculateGoodsColumn();
|
|
|
|
calculateGoodsColumn();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
//点击商品
|
|
|
|
|
|
|
|
const onGoGoods = ((id)=>{
|
|
|
|
|
|
|
|
SpuApi.getSpuDetail(id).then((res) => {
|
|
|
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
|
|
|
sheep.$router.go('/pages/goods/index', { id: id })
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: res.msg,
|
|
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
|
|
mask: true
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|