147 lines
4.7 KiB
Vue
147 lines
4.7 KiB
Vue
<template>
|
|
<view>
|
|
<view class="swiper-item mar-x40" v-for="(item,index) in list" :key="index">
|
|
<!-- 活动商品 start -->
|
|
<h1 class="fon36 bold">{{item.title}}</h1>
|
|
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item.content}}</view>
|
|
<view class="posir" @tap="goDetail(item.id)">
|
|
<image class="radius30 animated fadeIn" :src="item.mainImg" mode="aspectFill" lazy-load style="height: 425rpx;width: 100%;"></image>
|
|
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
|
</view>
|
|
<!-- 活动商品 end -->
|
|
|
|
<!-- 子商品 start -->
|
|
<view class="disjbac fw">
|
|
<view @tap="goDetail(childrenitem.id)" class="width47 mar-s50 posir" v-for="(childrenitem,childrenindex) in item.childrenList" :key="childrenindex">
|
|
<image :src="childrenitem.childrenImg" mode="aspectFill" lazy-load style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
|
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{childrenitem.childrenTitle}}</view>
|
|
<view class="fon30 colpeili">￥{{childrenitem.childrenPrice}}</view>
|
|
<view v-if="childrenitem.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20 activity-img">限时优惠</view>
|
|
</view>
|
|
</view>
|
|
<!-- 子商品 end -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"list-one",
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
default:()=>{
|
|
return [
|
|
{
|
|
id:1,
|
|
title:'虎年快乐',
|
|
content:'欢庆虎年，与所爱之人共燃盛典烟花',
|
|
mainImg:'/static/public/member-head.png',
|
|
isActivity:true,
|
|
childrenList:[
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻',
|
|
childrenPrice:'2,000',
|
|
isActivity:true,
|
|
},
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:false,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id:1,
|
|
title:'虎年快乐',
|
|
content:'欢庆虎年，与所爱之人共燃盛典烟花',
|
|
mainImg:'/static/public/member-head.png',
|
|
isActivity:true,
|
|
childrenList:[
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:true,
|
|
},
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:false,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
id:1,
|
|
title:'虎年快乐',
|
|
content:'欢庆虎年，与所爱之人共燃盛典烟花',
|
|
mainImg:'/static/public/member-head.png',
|
|
isActivity:true,
|
|
childrenList:[
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:true,
|
|
},
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:false,
|
|
},
|
|
{
|
|
id:1,
|
|
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
|
childrenPrice:'2,000',
|
|
isActivity:false,
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods:{
|
|
goDetail(id){//前往详情页
|
|
uni.navigateTo({
|
|
url:`/pagesB/shopDetail/shopDetail?id=${id}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.activity-img{background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;}
|
|
</style>
|