mall-uniapp/pages/activity/goods_combination/index.vue

239 lines
76 KiB
Vue
Raw Normal View History

2020-08-13 08:12:57 +00:00
<template>
<div>
<view class='group-list'>
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
2020-08-13 08:12:57 +00:00
<view class='header'></view>
<view class='list'>
<block v-for="(item,index) in combinationList" :key='index'>
<view class='item acea-row row-between-wrapper' @tap="openSubcribe(item)"
data-url=''>
<view class='pictrue'>
<image :src='item.image'></image>
</view>
<view class='text'>
<view class='line1'>{{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'>{{item.people}}人团</view>
</view>
</view>
<view class='bottom acea-row row-between-wrapper'>
<view class='money'><text class='num'>{{item.price}}</text><text class='y-money'>{{item.otPrice}}</text></view>
2020-08-13 08:12:57 +00:00
<view class='groupBnt bg-color'>去拼团<text class="iconfont icon-jiantou"></text></view>
</view>
</view>
</view>
</block>
<view class='loadingicon acea-row row-center-wrapper' v-if='combinationList.length > 0'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view>
2020-08-13 08:12:57 +00:00
</view>
</view>
<home></home>
</div>
</template>
<script>
import {
getCombinationList
} from '@/api/activity.js';
import {
openPinkSubscribe
} from '../../../utils/SubscribeMessage.js';
import home from '@/components/home/index.vue'
let app = getApp();
export default {
components: {
home
},
data() {
return {
navH: '',
combinationList: [],
limit: 10,
page: 1,
loading: false,
loadend: false,
returnShow: true,
loadTitle: ''
2020-08-13 08:12:57 +00:00
}
},
onLoad() {
var pages = getCurrentPages();
this.returnShow = pages.length===1?false:true;
2020-08-13 08:12:57 +00:00
uni.setNavigationBarTitle({
title:"拼团列表"
})
this.navH = app.globalData.navHeight;
this.getCombinationList();
},
methods: {
goBack: function() {
uni.navigateBack();
},
openSubcribe: function(item) {
let page = item;
// #ifndef MP
uni.navigateTo({
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
});
// #endif
// #ifdef MP
uni.showLoading({
title: '正在加载',
})
openPinkSubscribe().then(res => {
uni.hideLoading();
uni.navigateTo({
url: `/pages/activity/goods_combination_details/index?id=${item.id}`
});
}).catch(() => {
uni.hideLoading();
});
// #endif
},
getCombinationList: function() {
var that = this;
if (that.loadend) return;
if (that.loading) return;
that.loadTitle = '';
2020-08-13 08:12:57 +00:00
var data = {
page: that.page,
limit: that.limit
};
this.loading = true
getCombinationList(data).then(function(res) {
let list = res.data.list;
let combinationList = that.$util.SplitArray(list, that.combinationList);
let loadend = list.length < that.limit;
that.loadend = loadend;
2020-08-13 08:12:57 +00:00
that.loading = false;
that.loadTitle = loadend ? '已全部加载' : '加载更多';
that.$set(that, 'combinationList', combinationList);
that.$set(that, 'page', that.page + 1);
2020-08-13 08:12:57 +00:00
}).catch(() => {
that.loading = false;
that.loadTitle = '加载更多';
2020-08-13 08:12:57 +00:00
})
},
},
onReachBottom: function() {
this.getCombinationList();
},
}
</script>
<style>
page {
background-color: #fa533d !important;
}
.icon-xiangzuo {
font-size: 40rpx;
color: #fff;
position: fixed;
left: 30rpx;
z-index: 99;
transform: translateY(-20%);
}
.group-list .header {
background-image: url('data:image/png;base64,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
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 450rpx;
}
.group-list .list {
margin-top: -108rpx;
}
.group-list .list .item {
width: 690rpx;
height: 208rpx;
background-color: #fff;
border-radius: 6rpx;
padding: 0 24rpx;
box-sizing: border-box;
margin: 0 auto 20rpx auto;
}
.group-list .list .item .pictrue {
width: 160rpx;
height: 160rpx;
}
.group-list .list .item .pictrue image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.group-list .list .item .text {
width: 458rpx;
font-size: 30rpx;
color: #282828;
}
.group-list .list .item .text .team {
height: 38rpx;
border-radius: 4rpx;
font-size: 22rpx;
margin-top: 20rpx;
}
.group-list .list .item .text .team .iconfont {
width: 54rpx;
background-color: #ffdcd9;
text-align: center;
color: #dd3823;
height: 100%;
}
.group-list .list .item .text .team .num {
text-align: center;
padding: 0 6rpx;
height: 100%;
}
.group-list .list .item .text .bottom {
margin-top: 7rpx;
}
.group-list .list .item .text .bottom .money {
font-size: 24rpx;
font-weight: bold;
color: #282828;
}
.group-list .list .item .text .bottom .money .num {
font-size: 32rpx;
}
.group-list .list .item .text .bottom .money .y-money {
font-size: 24rpx;
color: #999;
font-weight: normal;
text-decoration: line-through;
margin-left: 10rpx;
}
.group-list .list .item .text .bottom .groupBnt {
font-size: 26rpx;
color: #fff;
width: 146rpx;
height: 54rpx;
text-align: center;
line-height: 54rpx;
border-radius: 4rpx;
}
.group-list .list .item .text .bottom .groupBnt .iconfont {
font-size: 25rpx;
vertical-align: 2rpx;
margin-left: 10rpx;
}
</style>