175 lines
145 KiB
Vue
175 lines
145 KiB
Vue
|
// +----------------------------------------------------------------------
|
|||
|
|
// | LikeShop100%开源免费商用电商系统
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
|
|||
|
|
// | 开源版本可自由商用，可去除界面版权logo
|
|||
|
|
// | 商业版本务必购买商业授权，以免引起法律纠纷
|
|||
|
|
// | 禁止对系统程序代码以任何目的，任何形式的再发布
|
|||
|
|
// | Gitee下载：https://gitee.com/likeshop_gitee/likeshop
|
|||
|
|
// | 访问官网：https://www.likemarket.net
|
|||
|
|
// | 访问社区：https://home.likemarket.net
|
|||
|
|
// | 访问手册：http://doc.likemarket.net
|
|||
|
|
// | 微信公众号：好象科技
|
|||
|
|
// | 好象科技开发团队 版权所有 拥有最终解释权
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
// | Author: LikeShopTeam
|
|||
|
|
// +----------------------------------------------------------------------
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|||
|
|
<view class="goods-combination">
|
|||
|
|
<!-- 头部背景图：爱拼才省钱 -->
|
|||
|
|
<view class="header"></view>
|
|||
|
|
|
|||
|
|
<view class="main bg-primary">
|
|||
|
|
<view class="goods-list">
|
|||
|
|
<navigator v-for="(item, index) in groupList" :key="index" class="goods-item row mt20 bg-white"
|
|||
|
|
hover-class="none" :url="'/pages/goods_details/goods_details?id=' + item.goods_id">
|
|||
|
|
<u-image width="180rpx" height="180rpx" border-radius="6rpx" lazy-load :src="item.image" />
|
|||
|
|
<view class="goods-info ml20">
|
|||
|
|
<view class="goods-name line2 mb10">{{item.name}}</view>
|
|||
|
|
<view class="dec row">
|
|||
|
|
<view class="group mr20 row">
|
|||
|
|
<view class="group-img row-center">
|
|||
|
|
<image class="icon-sm" src="/static/images/icon_group_white.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="primary xxs mr10 ml10">{{item.people_num}}人团</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="sale muted xs">已拼{{item.sales_volume}}件</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-footer row-between">
|
|||
|
|
<view class="price row">
|
|||
|
|
<price-format color="#FF2C3C" :subscript-size="26" :second-size="26"
|
|||
|
|
:first-size="34" :price="item.team_min_price" :weight="500"></price-format>
|
|||
|
|
<price-format class="ml10" color="#999" :line-through="true" :subscript-size="24"
|
|||
|
|
:first-size="24" :second-size="24" :price="item.min_price"></price-format>
|
|||
|
|
</view>
|
|||
|
|
<button class="br60 btn white" size="sm" type="primary">去拼团</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</navigator>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<block v-if="groupList.length == 0">
|
|||
|
|
<view class="column-center" style="padding-top: 200rpx;text-align: center;">
|
|||
|
|
<text class="lg" style="color: #FFD4D8">暂无拼团商品~</text>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
|
|||
|
|
<float-tab></float-tab>
|
|||
|
|
</view>
|
|||
|
|
</mescroll-body>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
loadingType
|
|||
|
|
} from '@/utils/type';
|
|||
|
|
import {
|
|||
|
|
getGroupList
|
|||
|
|
} from '@/api/activity';
|
|||
|
|
import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
|
|||
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
|||
|
|
export default {
|
|||
|
|
mixins: [MescrollMixin, MescrollCompMixin],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
page: 1,
|
|||
|
|
groupList: [],
|
|||
|
|
status: loadingType.LOADING
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 获取拼团的列表
|
|||
|
|
applyList(page) {
|
|||
|
|
getGroupList({
|
|||
|
|
page_size: page.size,
|
|||
|
|
page_no: page.num
|
|||
|
|
}).then(({
|
|||
|
|
data
|
|||
|
|
}) => {
|
|||
|
|
console.log(data)
|
|||
|
|
if (page.num == 1) this.groupList = [];
|
|||
|
|
const curPageData = data.list;
|
|||
|
|
const curPageLen = curPageData.length;
|
|||
|
|
const hasNext = !!data.more;
|
|||
|
|
this.groupList = this.groupList.concat(curPageData);
|
|||
|
|
this.mescroll.endSuccess(curPageLen, hasNext);
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.mescroll.endErr()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 触底
|
|||
|
|
upCallback(page) {
|
|||
|
|
this.applyList(page)
|
|||
|
|
},
|
|||
|
|
// 下拉
|
|||
|
|
downCallback(page) {
|
|||
|
|
this.applyList(page)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/styles/base.scss';
|
|||
|
|
|
|||
|
|
.goods-combination {
|
|||
|
|
background-color: $-color-primary;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: block;
|
|||
|
|
background-image: url(data:image/png;base64,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
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
height: 390rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
margin-top: -30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
.goods-list {
|
|||
|
|
.goods-item {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
|
|||
|
|
.goods-img {
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
flex: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods-info {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 475rpx;
|
|||
|
|
|
|||
|
|
.group {
|
|||
|
|
border: 1px solid $-color-primary;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
|
|||
|
|
.group-img {
|
|||
|
|
padding: 2rpx 6rpx;
|
|||
|
|
background: linear-gradient(90deg, rgba(249, 95, 47, 1) 0%, rgba(255, 44, 60, 1) 100%);
|
|||
|
|
border-radius: 0 4rpx 4rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-footer {
|
|||
|
|
.btn {
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
background-color: #F95F2F;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|