lilishop-uniapp/pages/promotion/joinGroup.vue

134 lines
2.9 KiB
Vue

<template>
<view class="wrapper">
<u-navbar :border-bottom="false" :title="title">
<!-- 中间 -->
<view class="slot-wrap container-wrap">
<view v-if="search">
<u-search @search="searchFun()" @custom="searchFun()" v-model="params.goodsName"></u-search>
</view>
</view>
<!-- 右侧 -->
<view slot="right">
<view style="margin-right: 24rpx;" @click="searchFlag()">
<view v-if="search"></view>
<u-icon v-if="!search" size="44rpx" name="search"></u-icon>
</view>
</view>
</u-navbar>
<!-- 顶部栏 -->
<div class='header-wraper'>
<image src="/static/join-buy.png"></image>
</div>
<!-- 商品栏 -->
<div class="swiper">
<goodsTemplate v-if="goodsList.length" :res="goodsList" />
<u-empty v-else style="margin-top:20%" text="暂无拼团活动" mode="data"></u-empty>
</div>
</view>
</template>
<script>
import * as API_Promotions from "@/api/promotions";
import * as API_Goods from "@/api/goods";
import goodsTemplate from '@/components/m-goods-list/promotion.vue'
export default {
components: {
goodsTemplate
},
data() {
return {
is_empty: false,
search: false,
title: "拼团活动",
empty: false,
params: {
pageNumber: 1,
pageSize: 10,
categoryPath: "",
goodsName: "",
},
goodsList: [],
};
},
mounted() {},
watch: {
search(val) {
val ? (this.title = "") : (this.title = "拼团活动");
},
},
onReachBottom() {
this.loadMore();
},
// 点击搜索按钮
onNavigationBarButtonTap(e) {
this.popupFlag = !this.popupFlag;
},
async onLoad() {
this.GET_AssembleGoods();
},
methods: {
loadMore() {
this.params.pageNumber++;
this.GET_AssembleGoods();
},
searchFlag() {
this.search = !this.search;
},
toHref(goods) {
uni.navigateTo({
url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId}`,
});
},
searchFun() {
this.goodsList = [];
this.GET_AssembleGoods();
},
// 请求拼团数据
GET_AssembleGoods() {
const params = JSON.parse(JSON.stringify(this.params));
if (params.category_id === 0) delete params.category_id;
API_Promotions.getAssembleList(params)
.then((response) => {
const data = response.data.result.records;
if (!data || !data.length) {
this.is_empty = true;
} else {
if (data.length <= this.params.pageSize) {
} else {
}
this.is_empty = false;
this.goodsList.push(...(data || []));
}
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped>
.header-wraper {
background: url('/static/bg.png');
height: 200rpx;
display: flex;
align-items: center;
justify-content: center;
>image{
width: 188rpx;
height: 60rpx;
}
}
</style>