glhcp/uniapp/bundle/pages/bargain/bargain.vue

162 lines
68 KiB
Vue
Raw Normal View History

2023-08-10 06:59:52 +00:00
<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>