xuwenbo
4 years ago
5 changed files with 330 additions and 70 deletions
@ -0,0 +1,101 @@
|
||||
<template> |
||||
<view class="activity-goods-box x-bc" @tap="jump('/pages/activity/GroupDetails/index', { id: id })"> |
||||
<view class="img-box"> |
||||
<slot name="tag"></slot> |
||||
<image class="img" :src="img" mode="aspectFill"></image> |
||||
</view> |
||||
<view class="goods-right y-bc"> |
||||
<view class="title one-t">{{ title }}</view> |
||||
<view class="tip one-t">{{ info }}</view> |
||||
<view class="slod-end"><slot name="sell"></slot></view> |
||||
<view class=" price-box"> |
||||
<view class="x-f"> |
||||
<view class="current">￥{{ price }}</view> |
||||
<view class="original">￥{{ productPrice }}</view> |
||||
</view> |
||||
</view> |
||||
<slot name="btn"></slot> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'activityCard', |
||||
components: {}, |
||||
data() { |
||||
return {}; |
||||
}, |
||||
props: { |
||||
cId: 0, |
||||
img: '', |
||||
title: '', |
||||
info: '', |
||||
price: '', |
||||
productPrice: '' |
||||
}, |
||||
computed: {}, |
||||
created() {}, |
||||
methods: { |
||||
// 路由跳转 |
||||
jump(path, parmas) { |
||||
this.$yrouter.push({ path: path, query: parmas }); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.activity-goods-box { |
||||
padding: 40rpx 20rpx; |
||||
background: #fff; |
||||
|
||||
.img-box { |
||||
margin-right: 20rpx; |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
overflow: hidden; |
||||
position: relative; |
||||
|
||||
.img { |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
background-color: #ccc; |
||||
} |
||||
} |
||||
|
||||
.goods-right { |
||||
width: 450rpx; |
||||
min-height: 200rpx; |
||||
align-items: flex-start; |
||||
position: relative; |
||||
.title { |
||||
font-size: 28rpx; |
||||
line-height: 28rpx; |
||||
width: 450rpx; |
||||
} |
||||
|
||||
.tip { |
||||
font-size: 22rpx; |
||||
color: #a8700d; |
||||
width: 500rpx; |
||||
} |
||||
|
||||
.price-box { |
||||
.current { |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: rgba(225, 33, 43, 1); |
||||
} |
||||
|
||||
.original { |
||||
font-size: 22rpx; |
||||
font-weight: 400; |
||||
text-decoration: line-through; |
||||
color: rgba(153, 153, 153, 1); |
||||
margin-left: 14rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,90 +1,228 @@
|
||||
<template> |
||||
<view class="group-list" ref="container"> |
||||
<view class="list" v-if="combinationList.length>0"> |
||||
<view |
||||
class="item acea-row row-between-wrapper" |
||||
v-for="(item, combinationListIndex) in combinationList" |
||||
:key="combinationListIndex" |
||||
@click="link(item.id)" |
||||
> |
||||
<view class="pictrue"> |
||||
<image :src="item.image" /> |
||||
</view> |
||||
<view class="text"> |
||||
<view class="line1" v-text="item.title"></view> |
||||
<view class="acea-row"> |
||||
<view class="team acea-row row-middle cart-color"> |
||||
<view class="iconfont icon-pintuan"></view> |
||||
<view class="num" v-text="item.people + '人团'"></view> |
||||
</view> |
||||
<view class="page_box"> |
||||
<view class="content_box"> |
||||
<scroll-view class="scroll-box" scroll-y enable-back-to-top scroll-with-animation @scrolltolower="loadMore"> |
||||
<view class="group-wrap"> |
||||
<view class="group-head x-bc"> |
||||
<text class="group-head__title">爆款推荐</text> |
||||
<text class="group-head__notice">省钱省心限时拼</text> |
||||
</view> |
||||
<view class="bottom acea-row row-between-wrapper"> |
||||
<view class="money"> |
||||
￥ |
||||
<text class="num" v-text="item.price"></text> |
||||
<text class="y-money" v-text="'￥' + item.productPrice"></text> |
||||
</view> |
||||
<view class="groupBnt bg-color-red"> |
||||
去拼团 |
||||
<text class="iconfont icon-jiantou"></text> |
||||
<view class="group-box"> |
||||
<view class="goods-item" v-for="(groupon, index) in grouponList" :key="groupon.id"> |
||||
<activity-card |
||||
:cId="groupon.id" |
||||
:title="groupon.title" |
||||
:info="groupon.info" |
||||
:img="groupon.image" |
||||
:price="groupon.price" |
||||
:productPrice="groupon.productPrice" |
||||
> |
||||
<block slot="tag"> |
||||
<view class="tag" v-if="index < 3">TOP{{ index + 1 }}</view> |
||||
</block> |
||||
<block slot="sell"> |
||||
<view class="x-f"> |
||||
<view class="sell-box"> |
||||
<text class="cuIcon-hotfill"></text> |
||||
<text class="sell-num">已拼{{ groupon.sales }}件</text> |
||||
</view> |
||||
<text class="group-num">{{ groupon.people || 0 }}人团</text> |
||||
</view> |
||||
</block> |
||||
<block slot="btn"><button class="cu-btn buy-btn" @tap.stop="jump('/pages/activity/GroupDetails/index', { id: groupon.id })">马上拼</button></block> |
||||
</activity-card> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<Loading :loaded="status" :loading="loadingList"></Loading> |
||||
</view> |
||||
<view class="noCommodity" style="background-color: #fff;" v-if="combinationList.length === 0"> |
||||
<view class="noPictrue"> |
||||
<image src="@/static/images/noGood.png" class="image" /> |
||||
</view> |
||||
<!-- 空白 --> |
||||
<!-- <shopro-empty v-if="!grouponList.length && !isLoading" :emptyData="emptyData"></shopro-empty>--> |
||||
<!-- 加载更多 --> |
||||
<view v-if="grouponList.length" class="cu-load text-gray" :class="loadStatus"></view> |
||||
<!-- loading --> |
||||
<shopro-load v-model="isLoading"></shopro-load> |
||||
</scroll-view> |
||||
</view> |
||||
<!-- 自定义底部导航 --> |
||||
<shopro-tabbar></shopro-tabbar> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import activityCard from './children/activity-card.vue'; |
||||
import { getCombinationList } from "@/api/activity"; |
||||
import Loading from "@/components/Loading"; |
||||
|
||||
export default { |
||||
name: "GoodsGroup", |
||||
components: { |
||||
Loading |
||||
activityCard |
||||
}, |
||||
props: {}, |
||||
data: function() { |
||||
data() { |
||||
return { |
||||
combinationList: [], |
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
||||
loading: false, //当前接口是否请求完成 false 完成 true 未完成 |
||||
page: 1, //页码 |
||||
limit: 20, //数量 |
||||
loadingList: false |
||||
emptyData: { |
||||
img: '/static/imgs/empty/empty_goods.png', |
||||
tip: '还没有拼团商品噢，去首页看看吧~', |
||||
path: '/pages/index/index', |
||||
pathText: '去首页逛逛' |
||||
}, |
||||
status:'', |
||||
isLoading: true, |
||||
loadStatus: '', //loading,over |
||||
lastPage: 0, |
||||
currentPage: 1, |
||||
grouponList: [] |
||||
}; |
||||
}, |
||||
mounted: function() { |
||||
// document.querySelector('body').setAttribute('style', 'background-color:#eb3729'); |
||||
this.getCombinationList(); |
||||
}, |
||||
onReachBottom() { |
||||
!this.loadingList && this.getCombinationList(); |
||||
onLoad() { |
||||
this.getGrouponList(); |
||||
}, |
||||
onPullDownRefresh() {}, |
||||
computed: {}, |
||||
methods: { |
||||
getCombinationList: function() { |
||||
var that = this; |
||||
if (that.loading) return; |
||||
if (that.status) return; |
||||
getCombinationList({ page: that.page, limit: that.limit }).then(res => { |
||||
that.status = res.data.length < that.limit; |
||||
that.combinationList.push.apply(that.combinationList, res.data); |
||||
that.page++; |
||||
that.loading = false; |
||||
// 路由跳转 |
||||
jump(path, parmas) { |
||||
this.$yrouter.push({ |
||||
path: path, |
||||
query: parmas |
||||
}); |
||||
}, |
||||
link: function(id) { |
||||
this.$yrouter.push({ |
||||
path: "/pages/activity/GroupDetails/index", |
||||
query: { id } |
||||
// 加载更多 |
||||
loadMore() { |
||||
if (this.currentPage < this.lastPage) { |
||||
this.currentPage += 1; |
||||
this.getGrouponList(); |
||||
} |
||||
}, |
||||
// 拼团列表 |
||||
getGrouponList() { |
||||
let that = this; |
||||
that.isLoading = true; |
||||
that.loadStatus = 'loading'; |
||||
getCombinationList({ page:that.currentPage, limit: 10 }).then(res => { |
||||
that.status = res.data.length < 10; |
||||
that.grouponList.push.apply(that.grouponList, res.data); |
||||
that.lastPage = res.data.last_page; |
||||
if (that.currentPage < res.data.last_page) { |
||||
that.loadStatus = ''; |
||||
} else { |
||||
that.loadStatus = 'over'; |
||||
} |
||||
that.loading = false; |
||||
}); |
||||
|
||||
// that.$api('goods.grouponList', { |
||||
// page: that.currentPage |
||||
// }).then(res => { |
||||
// if (res.code === 1) { |
||||
// that.isLoading = false; |
||||
// that.grouponList = [...that.grouponList, ...res.data.data]; |
||||
// // that.grouponList=[]; |
||||
// that.lastPage = res.data.last_page; |
||||
// if (that.currentPage < res.data.last_page) { |
||||
// that.loadStatus = ''; |
||||
// } else { |
||||
// that.loadStatus = 'over'; |
||||
// } |
||||
// } |
||||
// }); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.group-wrap { |
||||
background: url('~@/static/images/group_list_bg.png') no-repeat; |
||||
background-size: 100% 374rpx; |
||||
} |
||||
.group-head { |
||||
padding: 0 25rpx; |
||||
height: 100rpx; |
||||
.group-head__title { |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
.group-head__notice { |
||||
font-size: 26rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
|
||||
.group-box { |
||||
width: 710rpx; |
||||
background: linear-gradient(#fff, #f5f5f5); |
||||
border-radius: 20rpx; |
||||
margin: 0 auto; |
||||
min-height: 1000rpx; |
||||
.goods-item { |
||||
border-radius: 20rpx; |
||||
overflow: hidden; |
||||
position: relative; |
||||
margin-bottom: 20rpx; |
||||
.tag { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 10rpx; |
||||
z-index: 2; |
||||
line-height: 35rpx; |
||||
background: linear-gradient(132deg, rgba(255, 153, 93, 1), rgba(255, 99, 97, 1)); |
||||
border-radius: 0px 18rpx 18rpx 0px; |
||||
padding: 0 10rpx; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: bold; |
||||
color: rgba(255, 255, 255, 0.8); |
||||
} |
||||
/deep/.goods-right { |
||||
width: 460rpx; |
||||
.title { |
||||
width: 460rpx; |
||||
} |
||||
.tip { |
||||
width: 460rpx; |
||||
} |
||||
} |
||||
.buy-btn { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: -10rpx; |
||||
width: 160rpx; |
||||
height: 60rpx; |
||||
background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1)); |
||||
box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22); |
||||
border-radius: 30rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: #fff; |
||||
padding: 0; |
||||
} |
||||
.group-num { |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
color: rgba(153, 153, 153, 1); |
||||
margin-left: 20rpx; |
||||
} |
||||
.sell-box { |
||||
background: rgba(255, 224, 226, 0.3); |
||||
border-radius: 16rpx; |
||||
line-height: 32rpx; |
||||
padding: 0 10rpx; |
||||
.sell-num { |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC; |
||||
font-weight: 400; |
||||
color: rgba(247, 151, 156, 1); |
||||
} |
||||
|
||||
.cuIcon-hotfill { |
||||
font-size: 26rpx; |
||||
color: #e1212b; |
||||
margin-right: 8rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
|
After Width: | Height: | Size: 31 KiB |
Loading…
Reference in new issue