162 lines
68 KiB
Vue
162 lines
68 KiB
Vue
|
<template>
|
||
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
|
||
|
<view class="bargain-container">
|
||
|
<view class="header">
|
||
|
<!-- <view class="row-between" style="padding-top: 46rpx;">
|
||
|
<view></view>
|
||
|
<view class="rule-contain row">
|
||
|
<u-icon name="question-circle-fill" size="30" :color="primaryColor" />
|
||
|
<view class="xxs primary" style="margin-left: 6rpx;">
|
||
|
规则
|
||
|
</view>
|
||
|
</view>
|
||
|
</view> -->
|
||
|
</view>
|
||
|
|
||
|
<view class="main">
|
||
|
<view class="activity-box">
|
||
|
<view class="activity-item row mt20" style="" v-for="(item, index) in lists" :key="index">
|
||
|
<u-image width="180rpx" height="180rpx" :src="item.image" border-radius="10rpx" />
|
||
|
<view class="activity-info">
|
||
|
<view class="activity-name line2 nr">
|
||
|
{{item.name}}
|
||
|
</view>
|
||
|
<view class="row-between">
|
||
|
<view class="column">
|
||
|
<view class="xs" style="color: #F95F2F;">
|
||
|
最低可砍至
|
||
|
<price-format showSubscript :subscriptSize="26" :firstSize="34" :secondSize="34"
|
||
|
weight="500" :price="item.activity_price" />
|
||
|
</view>
|
||
|
<view class="mt10 xs muted">
|
||
|
单买 ¥{{item.price}}
|
||
|
</view>
|
||
|
</view>
|
||
|
<navigator :url="'/bundle/pages/bargain_process/bargain_process?activityId=' + item.id"
|
||
|
hover-class="none" class="lunch-btn white row-center">
|
||
|
发起砍价
|
||
|
</navigator>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
|
||
|
<view class="mt30 row-center white" style="padding-top: 200rpx;" v-if="lists.length == 0">
|
||
|
暂无砍价商品
|
||
|
</view>
|
||
|
</view>
|
||
|
<float-tab></float-tab>
|
||
|
</view>
|
||
|
</mescroll-body>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import {getBargainList} from '@/api/activity'
|
||
|
import {loadingType} from "@/utils/type"
|
||
|
import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
|
||
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
||
|
export default {
|
||
|
mixins: [MescrollMixin,MescrollCompMixin],
|
||
|
data() {
|
||
|
return {
|
||
|
upOption: {
|
||
|
empty: {
|
||
|
icon: '/static/images/goods_null.png',
|
||
|
tip: "暂无商品",
|
||
|
}
|
||
|
},
|
||
|
lists: [],
|
||
|
loadingStatus: loadingType.LOADING
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
// 请求砍价活动的列表
|
||
|
applyList(page) {
|
||
|
getBargainList({
|
||
|
page_size:page.size,
|
||
|
page_no:page.num
|
||
|
}).then(({
|
||
|
data
|
||
|
}) => {
|
||
|
if (page.num == 1) this.lists = [];
|
||
|
const curPageData = data.list;
|
||
|
const curPageLen = curPageData.length;
|
||
|
const hasNext = !!data.more;
|
||
|
this.lists = this.lists.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";
|
||
|
|
||
|
.bargain-container {
|
||
|
background-color: #EE2466;
|
||
|
min-height: 100vh;
|
||
|
|
||
|
.header {
|
||
|
height: 319rpx;
|
||
|
background-image: url(data:image/png;base64,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
|
||
|
background-size: 100% 100%;
|
||
|
|
||
|
.rule-contain {
|
||
|
background-color: rgba(255, 255, 255, 0.8);
|
||
|
border-radius: 100rpx;
|
||
|
padding: 6rpx 10rpx;
|
||
|
margin-right: 24rpx;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.main {
|
||
|
margin-top: -70rpx;
|
||
|
position: relative;
|
||
|
|
||
|
.activity-box {
|
||
|
padding: 10rpx 24rpx;
|
||
|
|
||
|
.activity-item {
|
||
|
background-color: white !important;
|
||
|
padding: 30rpx 24rpx;
|
||
|
border-radius: 20rpx;
|
||
|
|
||
|
.activity-info {
|
||
|
margin-left: 24rpx;
|
||
|
flex: 1;
|
||
|
|
||
|
.activity-name {
|
||
|
line-height: 40rpx;
|
||
|
margin-bottom: 8rpx;
|
||
|
}
|
||
|
|
||
|
.lunch-btn {
|
||
|
background: linear-gradient(270deg, #FF2C3C 0%, #F95F2F 100%);
|
||
|
height: 62rpx;
|
||
|
width: 172rpx;
|
||
|
border-radius: 10rpx;
|
||
|
align-self: flex-end;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.data-null {
|
||
|
text-align: center;
|
||
|
padding-top: 150rpx;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|