Gao xiaosong
4 years ago
21 changed files with 781 additions and 303 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> |
<template> |
||||||
<view class="group-list" ref="container"> |
<view class="page_box"> |
||||||
<view class="list" v-if="combinationList.length>0"> |
<view class="content_box"> |
||||||
<view |
<scroll-view class="scroll-box" scroll-y enable-back-to-top scroll-with-animation @scrolltolower="loadMore"> |
||||||
class="item acea-row row-between-wrapper" |
<view class="group-wrap"> |
||||||
v-for="(item, combinationListIndex) in combinationList" |
<view class="group-head x-bc"> |
||||||
:key="combinationListIndex" |
<text class="group-head__title">爆款拼团</text> |
||||||
@click="link(item.id)" |
<text class="group-head__notice">省钱省心限时拼</text> |
||||||
> |
|
||||||
<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> |
|
||||||
<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> |
</view> |
||||||
|
<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> |
</view> |
||||||
|
<text class="group-num">{{ groupon.people || 0 }}人团</text> |
||||||
</view> |
</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> |
||||||
<Loading :loaded="status" :loading="loadingList"></Loading> |
|
||||||
</view> |
</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> |
</view> |
||||||
|
<!-- 空白 --> |
||||||
|
<!-- <Shop-empty v-if="!grouponList.length && !isLoading" :emptyData="emptyData"></Shop-empty>--> |
||||||
|
<!-- 加载更多 --> |
||||||
|
<view v-if="grouponList.length" class="cu-load text-gray" :class="loadStatus"></view> |
||||||
|
<!-- loading --> |
||||||
|
<Shop-load v-model="isLoading"></Shop-load> |
||||||
|
</scroll-view> |
||||||
</view> |
</view> |
||||||
|
<!-- 自定义底部导航 --> |
||||||
|
<Shop-tabbar></Shop-tabbar> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import activityCard from './children/activity-card.vue'; |
||||||
import { getCombinationList } from "@/api/activity"; |
import { getCombinationList } from "@/api/activity"; |
||||||
import Loading from "@/components/Loading"; |
|
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "GoodsGroup", |
|
||||||
components: { |
components: { |
||||||
Loading |
activityCard |
||||||
}, |
}, |
||||||
props: {}, |
data() { |
||||||
data: function() { |
|
||||||
return { |
return { |
||||||
combinationList: [], |
emptyData: { |
||||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成 |
img: '/static/imgs/empty/empty_goods.png', |
||||||
loading: false, //当前接口是否请求完成 false 完成 true 未完成 |
tip: '还没有拼团商品噢，去首页看看吧~', |
||||||
page: 1, //页码 |
path: '/pages/index/index', |
||||||
limit: 20, //数量 |
pathText: '去首页逛逛' |
||||||
loadingList: false |
|
||||||
}; |
|
||||||
}, |
}, |
||||||
mounted: function() { |
status:'', |
||||||
// document.querySelector('body').setAttribute('style', 'background-color:#eb3729'); |
isLoading: true, |
||||||
this.getCombinationList(); |
loadStatus: '', //loading,over |
||||||
|
lastPage: 0, |
||||||
|
currentPage: 1, |
||||||
|
grouponList: [] |
||||||
|
}; |
||||||
}, |
}, |
||||||
onReachBottom() { |
onLoad() { |
||||||
!this.loadingList && this.getCombinationList(); |
this.getGrouponList(); |
||||||
}, |
}, |
||||||
|
onPullDownRefresh() {}, |
||||||
|
computed: {}, |
||||||
methods: { |
methods: { |
||||||
getCombinationList: function() { |
// 路由跳转 |
||||||
var that = this; |
jump(path, parmas) { |
||||||
if (that.loading) return; |
this.$yrouter.push({ |
||||||
if (that.status) return; |
path: path, |
||||||
getCombinationList({ page: that.page, limit: that.limit }).then(res => { |
query: parmas |
||||||
that.status = res.data.length < that.limit; |
|
||||||
that.combinationList.push.apply(that.combinationList, res.data); |
|
||||||
that.page++; |
|
||||||
that.loading = false; |
|
||||||
}); |
}); |
||||||
}, |
}, |
||||||
link: function(id) { |
// 加载更多 |
||||||
this.$yrouter.push({ |
loadMore() { |
||||||
path: "/pages/activity/GroupDetails/index", |
if (this.currentPage < this.lastPage) { |
||||||
query: { id } |
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> |
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.group-wrap { |
||||||
|
background: url('~@/static/images/index-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> |
||||||
|
|||||||
@ -0,0 +1,102 @@ |
|||||||
|
<template> |
||||||
|
<view ref="container"> |
||||||
|
<view class="collectionGoods" v-if="collectProductList.length > 0"> |
||||||
|
<view |
||||||
|
class="item acea-row row-between-wrapper" |
||||||
|
v-for="(item, collectProductListIndex) in collectProductList" |
||||||
|
:key="collectProductListIndex" |
||||||
|
@click="goGoodsCon(item)" |
||||||
|
> |
||||||
|
<view class="pictrue"> |
||||||
|
<image :src="item.image" /> |
||||||
|
</view> |
||||||
|
<view class="text acea-row row-column-between"> |
||||||
|
<view class="infor line1">{{ item.storeName }}</view> |
||||||
|
<view class="acea-row row-between-wrapper"> |
||||||
|
<view class="money font-color-red">￥{{ item.price }}</view> |
||||||
|
<view class="delete" @tap.stop="delCollection(collectProductListIndex)">删除</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<Loading :loaded="loadend" :loading="loading"></Loading> |
||||||
|
<view |
||||||
|
class="noCommodity" |
||||||
|
style="background-color:#fff;" |
||||||
|
v-if="collectProductList.length < 1 && page > 1" |
||||||
|
> |
||||||
|
<view class="noPictrue"> |
||||||
|
<image src="@/static/images/noCollection.png" class="image" /> |
||||||
|
</view> |
||||||
|
<Recommend></Recommend> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import Recommend from "@/components/Recommend"; |
||||||
|
import { getCollectUser, getCollectDel } from "@/api/user"; |
||||||
|
import Loading from "@/components/Loading"; |
||||||
|
export default { |
||||||
|
name: "GoodsFoot", |
||||||
|
components: { |
||||||
|
Recommend, |
||||||
|
Loading |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
data: function() { |
||||||
|
return { |
||||||
|
page: 1, |
||||||
|
limit: 20, |
||||||
|
type:'foot', |
||||||
|
collectProductList: [], |
||||||
|
loadTitle: "", |
||||||
|
loading: false, |
||||||
|
loadend: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted: function() { |
||||||
|
this.get_user_collect_product(); |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
!this.loading && this.get_user_collect_product(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
goGoodsCon(item) { |
||||||
|
this.$yrouter.push({ |
||||||
|
path: "/pages/shop/GoodsCon/index", |
||||||
|
query: { id: item.pid } |
||||||
|
}); |
||||||
|
}, |
||||||
|
get_user_collect_product: function() { |
||||||
|
let that = this; |
||||||
|
if (that.loading) return; //阻止下次请求（false可以进行请求）； |
||||||
|
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）； |
||||||
|
that.loading = true; |
||||||
|
getCollectUser(that.page, that.limit,that.type).then(res => { |
||||||
|
that.loading = false; |
||||||
|
//apply();js将一个数组插入另一个数组; |
||||||
|
that.collectProductList.push.apply(that.collectProductList, res.data); |
||||||
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成； |
||||||
|
that.page = that.page + 1; |
||||||
|
}); |
||||||
|
}, |
||||||
|
//删除收藏； |
||||||
|
delCollection: function(index) { |
||||||
|
let that = this, |
||||||
|
id = that.collectProductList[index].pid, |
||||||
|
category = that.collectProductList[index].category; |
||||||
|
getCollectDel(id, category).then(function() { |
||||||
|
uni.showToast({ |
||||||
|
title: "删除成功", |
||||||
|
icon: "success", |
||||||
|
duration: 2000, |
||||||
|
complete: () => { |
||||||
|
that.collectProductList.splice(index, 1); |
||||||
|
that.$set(that, "collectProductList", that.collectProductList); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
Loading…
Reference in new issue