You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.5 KiB
148 lines
3.5 KiB
<!-- 积分商品列表 -->
|
|
<template>
|
|
<view class="score-wrap">
|
|
<view class="scoreInfo">
|
|
<image src="../../../static/images/score.png" mode="heightFix"></image>
|
|
<view class="scoreNum">
|
|
<view style="font-weight: bold;font-size:30rpx;margin-bottom:20rpx;">可用积分</view>
|
|
<view class="">{{ userInfo.score || '0' }}</view>
|
|
</view>
|
|
<view class="scoreInfo">
|
|
<view style="padding-left:0;">积分明细</view>
|
|
<view class="">|</view>
|
|
<view class="">兑换记录</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-wrap u-p-20 u-flex u-flex-wrap">
|
|
<view class="goods-item u-m-b-20" v-for="leftGoods in scoreList" :key="leftGoods.id">
|
|
<shopro-goods-card
|
|
:image="leftGoods.image"
|
|
:title="leftGoods.title"
|
|
@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id, type: 'score' } })"
|
|
>
|
|
<template #cardBottom>
|
|
<view class="price-box u-flex u-row-between u-flex-wrap">
|
|
<view class="beans-box u-flex u-m-10">
|
|
<image class="bean-img u-m-r-10" :src="$IMG_URL + '/imgs/score/score.png'" mode=""></image>
|
|
{{ leftGoods.price }}
|
|
</view>
|
|
<!-- <view class="sales-box u-m-10">已兑换{{ leftGoods.sales }}件</view> -->
|
|
</view>
|
|
</template>
|
|
</shopro-goods-card>
|
|
</view>
|
|
</view>
|
|
<!-- 缺省页 -->
|
|
<shopro-empty
|
|
v-if="isEmpty"
|
|
@click="$Router.pushTab('/pages/index/index')"
|
|
:image="$IMG_URL + '/imgs/empty/empty_goods.png'"
|
|
tipText="暂无积分商品"
|
|
btnText="去首页逛逛"
|
|
></shopro-empty>
|
|
<!-- 加载更多 -->
|
|
<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
scoreList: [],
|
|
isEmpty: false, //无数据
|
|
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
|
currentPage: 1,
|
|
lastPage: 1
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getScoreShopsList();
|
|
// 触底监听
|
|
uni.$on('uOnReachBottom', () => {
|
|
if (this.currentPage < this.lastPage) {
|
|
this.currentPage += 1;
|
|
this.getScoreShopsList();
|
|
}
|
|
});
|
|
},
|
|
computed: {
|
|
...mapGetters(['userInfo']),
|
|
},
|
|
methods: {
|
|
//积分商品列表
|
|
getScoreShopsList() {
|
|
let that = this;
|
|
that.loadStatus = 'loading';
|
|
that.$http('goods.scoreList', {
|
|
page: that.currentPage
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
that.scoreList = [...that.scoreList, ...res.data.data];
|
|
that.isEmpty = !that.scoreList.length;
|
|
that.lastPage = res.data.last_page;
|
|
that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.goods-item {
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
.price-box {
|
|
.beans-box {
|
|
font-size: 32upx;
|
|
font-weight: bold;
|
|
color: rgba(228, 141, 4, 1);
|
|
|
|
.bean-img {
|
|
width: 36upx;
|
|
height: 36upx;
|
|
}
|
|
}
|
|
.sales-box {
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
}
|
|
}
|
|
.scoreInfo{
|
|
height:366rpx;
|
|
position: relative;
|
|
color:#333333;
|
|
font-size:26rpx;
|
|
background-color: #ffffff;
|
|
&>image{
|
|
position:absolute;
|
|
right:0;bottom:0;
|
|
height:300rpx;
|
|
width:auto;
|
|
}
|
|
.scoreNum{
|
|
position:absolute;
|
|
top:20rpx;
|
|
left:20rpx;
|
|
}
|
|
.scoreInfo{
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
left: 20rpx;
|
|
height: auto;
|
|
&>view{
|
|
padding:20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|