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

273 lines
107 KiB
Vue
Raw Normal View History

2020-08-13 08:12:57 +00:00
<template>
<view>
<view class='bargain-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 bargainList" :key="index">
<view class='item acea-row row-between-wrapper' @tap="openSubscribe('/pages/activity/goods_bargain_details/index?id='+ item.id +'&bargain='+ userInfo.uid)">
<view class='pictrue'>
<image :src='item.image'></image>
</view>
<view class='text acea-row row-column-around'>
<view class='name line1'>{{item.title}}</view>
<view class='num'><text class='iconfont icon-pintuan'></text>{{item.countPeopleAll}}人正在参与</view>
<view class='money font-color'>最低: <text class='price'>{{item.minPrice}}</text></view>
2020-08-13 08:12:57 +00:00
</view>
<view class='cutBnt bg-color'><text class='iconfont icon-kanjia'></text>参与砍价</view>
</view>
</block>
<view class='loadingicon acea-row row-center-wrapper' v-if='bargainList.length > 0'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view>
2020-08-13 08:12:57 +00:00
</view>
</view>
<!-- #ifdef MP -->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
<!-- #endif -->
<home></home>
</view>
</template>
<script>
let app = getApp();
import {
getBargainList
} from '@/api/activity.js';
import {
openBargainSubscribe
} from '@/utils/SubscribeMessage.js';
import {
getUserInfo
} from '@/api/user.js';
import home from '@/components/home';
import {
toLogin
} from '@/libs/login.js';
import {
mapGetters
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
export default {
components: {
home,
// #ifdef MP
authorize
// #endif
},
data() {
return {
bargainList: [],
page: 1,
limit: 10,
2020-08-13 08:12:57 +00:00
loading: false,
loadend: false,
userInfo: {},
navH: '',
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
returnShow:true,
loadTitle: '加载更多'
2020-08-13 08:12:57 +00:00
};
},
computed: mapGetters(['isLogin']),
onLoad: function(options) {
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;
if (this.isLogin) {
this.getUserInfo();
this.getBargainList();
} else {
// #ifdef H5 || APP-PLUS
toLogin();
// #endif
// #ifdef MP
this.isAuto = true;
this.$set(this, 'isShowAuth', true);
// #endif
}
},
methods: {
// 授权关闭
authColse: function(e) {
this.isShowAuth = e
},
/*
* 获取用户信息
*/
getUserInfo: function() {
let that = this;
getUserInfo().then(res => {
that.$set(that, 'userInfo', res.data);
});
},
goBack: function() {
uni.navigateBack({
delta: 1
});
},
onLoadFun: function(e) {
this.getBargainList();
this.userInfo = e;
},
openSubscribe: function(e) {
let page = e;
// #ifndef MP
uni.navigateTo({
url: page
});
// #endif
// #ifdef MP
uni.showLoading({
title: '正在加载',
})
openBargainSubscribe().then(res => {
uni.hideLoading();
uni.navigateTo({
url: page,
});
}).catch((err) => {
uni.hideLoading();
});
// #endif
},
getBargainList: function() {
let that = this;
if (that.loadend) return;
if (that.loading) return;
that.loading = true;
that.loadTitle = '';
2020-08-13 08:12:57 +00:00
getBargainList({
page: that.page,
limit: that.limit
}).then(function(res) {
let list = res.data.list;
let bargainList = that.$util.SplitArray(list, that.bargainList);
let loadend = list.length < that.limit;
that.loadend = loadend;
that.loading = false;
that.loadTitle = loadend ? '已全部加载' : '加载更多';
that.$set(that, 'bargainList', bargainList);
2020-08-13 08:12:57 +00:00
that.$set(that, 'page', that.page + 1);
}).catch(res => {
that.loading = false;
that.loadTitle = '加载更多';
2020-08-13 08:12:57 +00:00
});
}
},
onReachBottom: function() {
this.getBargainList();
},
}
</script>
<style lang="scss">
page {
background-color: #e93323 !important;
}
.bargain-list .icon-xiangzuo {
font-size: 40rpx;
color: #fff;
position: fixed;
left: 30rpx;
z-index: 99;
transform: translateY(-20%);
}
.bargain-list .header {
background-image: url('data:image/png;base64,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
background-repeat: no-repeat;
background-size: 100% 100%;
width: 750rpx;
height: 713rpx;
}
.bargain-list .list {
background-color: #fff;
border: 6rpx solid #fc8b42;
border-radius: 30rpx;
margin: -45rpx 30rpx 66rpx 30rpx;
padding: 0 24rpx;
}
.bargain-list .list .item {
border-bottom: 1rpx solid #eee;
position: relative;
height: 223rpx;
}
.bargain-list .list .item .pictrue {
width: 160rpx;
height: 160rpx;
}
.bargain-list .list .item .pictrue image {
width: 100%;
height: 100%;
border-radius: 6rpx;
}
.bargain-list .list .item .text {
width: 450rpx;
font-size: 30rpx;
color: #282828;
height: 160rpx;
}
.bargain-list .list .item .text .name {
width: 100%;
}
.bargain-list .list .item .text .num {
font-size: 26rpx;
color: #999;
}
.bargain-list .list .item .text .num .iconfont {
font-size: 35rpx;
margin-right: 7rpx;
}
.bargain-list .list .item .text .money {
font-size: 24rpx;
font-weight: bold;
}
.bargain-list .list .item .text .money .price {
font-size: 32rpx;
}
.bargain-list .list .item .cutBnt {
position: absolute;
width: 180rpx;
height: 50rpx;
border-radius: 50rpx;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 46rpx;
right: 24rpx;
bottom: 28rpx;
box-shadow: 0 7rpx 0 #f8c1bd;
}
.bargain-list .list .item .cutBnt .iconfont {
margin-right: 8rpx;
font-size: 30rpx;
}
.bargain-list .list .load {
font-size: 24rpx;
height: 85rpx;
text-align: center;
line-height: 85rpx;
}
</style>