1.魔方
sws
parent
021fc69995
commit
9bc51aed10
|
|
@ -1,43 +1,45 @@
|
|||
<template>
|
||||
<view class="spacing-mb">
|
||||
<view class="bg-white border-radius-main padding-vertical-main">
|
||||
<view class="hot-list flex-row flex-warp">
|
||||
<view v-for="(item, index) in hotData" :key="index" class="flex-width-half">
|
||||
<view class="padding-horizontal-main">
|
||||
<view class="flex-row margin-bottom-xs">
|
||||
<text class="text-size fw-b">新品推荐</text>
|
||||
<view class="hot-go border-radius-main margin-left-sm pr">
|
||||
<text class="cr-white padding-right-sm">GO!</text>
|
||||
<iconfont class="icon-index-xptj-jiantou cr-white"></iconfont>
|
||||
<view class="">
|
||||
<view v-for="(items, indexs) in hotData" :key="indexs" class="bg-white border-radius-main spacing-mb">
|
||||
<view class="padding-vertical-main" :style="(items.bg_images || null) !== null ? 'background-image: url(' + items.bg_images + ');background-size: auto 100%;' : ''">
|
||||
<view class="hot-list flex-row flex-warp">
|
||||
<view v-for="(item, index) in items.data" :key="index" class="flex-width-half">
|
||||
<view class="padding-horizontal-main">
|
||||
<view class="flex-row align-c margin-bottom-xs">
|
||||
<text class="text-size fw-b single-text">{{ item.title }}</text>
|
||||
<view class="hot-go border-radius-main margin-left-sm pr single-text">
|
||||
<text class="cr-white padding-right-xs text-size-xs">{{ item.icon }}</text>
|
||||
<iconfont class="icon-index-xptj-jiantou cr-white" size="16rpx"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cr-grey-9 text-size-xs margin-bottom-sm">全年最低价 优惠多多</view>
|
||||
<swiper class="swiper" circular :autoplay="false" :vertical="propVertical" :interval="propInterval" :duration="propDuration">
|
||||
<swiper-item v-for="(swiperItem, swiperIndex) in item.d" :key="swiperIndex">
|
||||
<view class="swiper-item">
|
||||
<view class="flex-row">
|
||||
<view v-for="(listItem, listIndex) in swiperItem" :key="listIndex" class="flex-1" :class="swiperItem.length > 2 ? '' : 'flex-width-half'" @tap="banner_event">
|
||||
<view class="padding-main">
|
||||
<image src="@/static/images/common/user.png" mode="widthFix" class="wh-auto"> </image>
|
||||
<view class="price">
|
||||
<text class="sales-price va-m text-size-xss va-b">¥</text>
|
||||
<text class="sales-price va-m">8970.99</text>
|
||||
<view class="cr-grey-9 text-size-xs margin-bottom-sm">{{ item.describe }}</view>
|
||||
<swiper class="swiper" circular :autoplay="false" :vertical="propVertical" :interval="propInterval" :duration="propDuration">
|
||||
<swiper-item v-for="(swiperItem, swiperIndex) in item.data" :key="swiperIndex">
|
||||
<view class="swiper-item">
|
||||
<view class="flex-row">
|
||||
<view v-for="(listItem, listIndex) in swiperItem" :key="listIndex" class="flex-1" :class="swiperItem.length > 2 ? '' : 'flex-width-half'">
|
||||
<view class="padding-main" :data-value="(listItem.goods_url || null) !== null ? listItem.goods_url : ''" @tap="url_event">
|
||||
<image :src="(listItem.images || null) !== null ? listItem.images : ''" mode="widthFix" class="wh-auto border-radius-sm"> </image>
|
||||
<view class="price">
|
||||
<text class="sales-price va-m text-size-xss va-b">{{ currency_symbol }}</text>
|
||||
<text class="sales-price va-m">{{ listItem.min_price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-1 flex-width-half" @tap="banner_event">
|
||||
<view class="padding-main">
|
||||
<image src="@/static/images/common/user.png" mode="widthFix" class="wh-auto"> </image>
|
||||
<view class="price">
|
||||
<text class="sales-price va-m text-size-xss va-b">¥</text>
|
||||
<text class="sales-price va-m">8970.99</text>
|
||||
<!-- <view class="flex-1 flex-width-half" @tap="banner_event">
|
||||
<view class="padding-main">
|
||||
<image src="@/static/images/common/user.png" mode="widthFix" class="wh-auto"> </image>
|
||||
<view class="price">
|
||||
<text class="sales-price va-m text-size-xss va-b">¥</text>
|
||||
<text class="sales-price va-m">8970.99</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -51,27 +53,10 @@
|
|||
name: 'recommend-hot',
|
||||
props: {
|
||||
propData: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
a: 1,
|
||||
b: 2,
|
||||
c: 3,
|
||||
d: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
b: 2,
|
||||
c: 3,
|
||||
d: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
{
|
||||
a: 1,
|
||||
b: 2,
|
||||
c: 3,
|
||||
d: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
],
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
propVertical: {
|
||||
type: Boolean,
|
||||
|
|
@ -93,33 +78,41 @@
|
|||
data() {
|
||||
return {
|
||||
hotData: [],
|
||||
currency_symbol: app.globalData.data.currency_symbol,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.set_data(this.propData);
|
||||
},
|
||||
methods: {
|
||||
banner_event() {
|
||||
console.log('你点几了图片，开始进入详情');
|
||||
// url事件
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
// 轮播数据处理
|
||||
set_data(data) {
|
||||
this.hotData = data;
|
||||
this.hotData.forEach((item, i) => {
|
||||
let swiperData = [];
|
||||
if (this.hotData.length % 2 == 0) {
|
||||
// 偶数
|
||||
swiperData = app.globalData.group_arry(item.d, 2);
|
||||
} else {
|
||||
// 奇数
|
||||
if (this.hotData.length === i + 1) {
|
||||
swiperData = app.globalData.group_arry(item.d, 4);
|
||||
let goods = data.goods;
|
||||
goods.forEach((items) => {
|
||||
items.data.forEach((item, i) => {
|
||||
let swiperData = [];
|
||||
if (items.data.length % 2 == 0) {
|
||||
// 偶数
|
||||
swiperData = app.globalData.group_arry(item.goods_list, 2);
|
||||
} else {
|
||||
swiperData = app.globalData.group_arry(item.d, 2);
|
||||
// 奇数
|
||||
if (items.data.length === i + 1) {
|
||||
swiperData = app.globalData.group_arry(item.goods_list, 4);
|
||||
} else {
|
||||
swiperData = app.globalData.group_arry(item.goods_list, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
item.d = swiperData;
|
||||
item.data = swiperData;
|
||||
});
|
||||
});
|
||||
this.setData({
|
||||
hotData: goods,
|
||||
});
|
||||
console.log(goods);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -140,9 +133,10 @@
|
|||
|
||||
.hot-go {
|
||||
background: linear-gradient(90deg, #ff8f42 0%, #fe541e 100%);
|
||||
padding-left: 14rpx;
|
||||
padding-right: 42rpx;
|
||||
line-height: 44rpx;
|
||||
padding-left: 12rpx;
|
||||
padding-right: 34rpx;
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.hot-go .iconfont {
|
||||
|
|
|
|||
Loading…
Reference in New Issue