326 lines
7.8 KiB
Vue
326 lines
7.8 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<!-- :style="{'padding-top': statusBaeHeight + 60 + 'px'}" -->
|
|
<view class="flex" style="padding-top: 24rpx;">
|
|
<view class="left" @click="toPage">
|
|
<view>品牌啤酒币</view>
|
|
<view class="flex justify-between align-end" style="margin-bottom: 26rpx;">
|
|
<text class="fs-20">{{coinList.length}}家品牌方</text>
|
|
<view class="num">
|
|
{{ totalCoin}}
|
|
<text class="cuIcon-rechargefill xl"
|
|
style="color:#FEE034;font-size: 30rpx;margin-left: 10rpx;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="text-right fs-20" style="color: #979797;">多品牌累计数量</view>
|
|
</view>
|
|
<view class="right">
|
|
<view>通用啤酒币</view>
|
|
<view class="num text-right" style="margin-bottom: 26rpx;">
|
|
{{commonCoin}}
|
|
<text class="cuIcon-rechargefill xl"
|
|
style="color:#FEE034;font-size: 30rpx;margin-left: 10rpx;"></text>
|
|
</view>
|
|
<view class="text-right fs-20" style="color: #979797;">用于抵扣任意品牌啤酒币</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-start" style="margin-bottom: 28rpx;margin-top: 28rpx;">
|
|
<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">热门推荐</view>
|
|
<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">关注厂牌</view>
|
|
<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">人气优先</view>
|
|
</view>
|
|
<view class="goods-container">
|
|
<scroll-view scroll-y enable-flex class="flex justify-start flex-wrap" style="height: 100%;"
|
|
lower-threshold="20" @scrolltolower="pageChange">
|
|
<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
|
|
<view class="cover-box">
|
|
<image :src="item.goodsCover" class="cover"></image>
|
|
<!-- <view class="like">
|
|
<text v-if="index % 2 == 0" class="cuIcon-like" style="color: #1E2019"></text>
|
|
<text v-else class="cuIcon-likefill" style="color: pink"></text>
|
|
</view> -->
|
|
</view>
|
|
<view class="title">
|
|
<text>{{ item.goodsName }}</text>
|
|
</view>
|
|
<view class="flex justify-between align-center" style="padding:26rpx 16rpx">
|
|
<view class="flex align-center">
|
|
<text class="num">{{ item.redeemedNum}}</text>
|
|
<image src="@/static/beerCoin.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
|
|
</image>
|
|
</view>
|
|
<!-- <text style="color: #979797;font-size: 20rpx;">青岛啤酒</text> -->
|
|
</view>
|
|
</view>
|
|
<view class="cu-load" style="width: 100%;"
|
|
:class="loading?'loading': goodsList.length == total ? 'over' :'more'"></view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getGoodsList,
|
|
getStoreCoinBalance,
|
|
|
|
} from '@/api/bar.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBaeHeight: 40,
|
|
curTag: 0,
|
|
tabCur: 0,
|
|
loading: false,
|
|
goodsList: [],
|
|
queryForm: {
|
|
pageNum: 1,
|
|
pageSize: 4
|
|
},
|
|
total: 0,
|
|
totalCoin: 0,
|
|
commonCoin: 0,
|
|
coinList:[]
|
|
};
|
|
},
|
|
onLoad() {
|
|
// setTimeout(() => {
|
|
// uni.setNavigationBarColor({
|
|
// frontColor: '#000000',
|
|
// backgroundColor: '#FFFFFF',
|
|
// animation: {
|
|
// duration: 400,
|
|
// timingFunc: 'easeIn'
|
|
// }
|
|
// })
|
|
// }, 500)
|
|
// this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
|
this.getGoodsListFun()
|
|
},
|
|
onShow() {
|
|
this.getStoreCoinBalanceFun()
|
|
},
|
|
methods: {
|
|
tabSelect(e) {
|
|
console.log(e)
|
|
this.tabCur = e.currentTarget.dataset.id;
|
|
},
|
|
changeTag(key) {
|
|
this.curTag = key
|
|
this.queryForm.status = key
|
|
this.queryForm.pageNum = 1
|
|
this.goodsList = []
|
|
this.getGoodsListFun()
|
|
},
|
|
|
|
toPage() {
|
|
uni.navigateTo({
|
|
url: "/pagesCoin/coinCollect"
|
|
})
|
|
},
|
|
// 跳转详情
|
|
toDetail(item) {
|
|
uni.navigateTo({
|
|
url: "/pagesCoin/goodsDetail?id=" + item.id + "&breweryId=" + item.breweryId
|
|
})
|
|
},
|
|
// 获取商品列表
|
|
getGoodsListFun() {
|
|
this.loading = true
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
getGoodsList(this.queryForm).then(res => {
|
|
// this.goodsList = this.goodsList.concat(res.rows)
|
|
this.total = res.total
|
|
if (res.rows && res.rows.length > 0) {
|
|
res.rows.forEach(it => {
|
|
this.goodsList.push(it)
|
|
})
|
|
}
|
|
// for (let i = 0; i < 20; i++) {
|
|
// this.goodsList.push(res.rows[0])
|
|
// }
|
|
this.loading = false
|
|
uni.hideLoading()
|
|
}).catch(() => {
|
|
this.loading = false
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
// 翻页
|
|
pageChange() {
|
|
console.log('翻页')
|
|
if(this.goodsList.length < this.total) {
|
|
this.queryForm.pageNum++
|
|
this.getGoodsListFun()
|
|
}
|
|
},
|
|
// 门店啤酒币余额
|
|
getStoreCoinBalanceFun() {
|
|
// 检查登录状态
|
|
const token = uni.getStorageSync('token')
|
|
if (!token) {
|
|
// 未登录状态，重置数据
|
|
this.coinList = []
|
|
this.totalCoin = 0
|
|
this.commonCoin = 0
|
|
return
|
|
}
|
|
|
|
getStoreCoinBalance().then(res => {
|
|
console.log(res)
|
|
// 累加balance
|
|
if(res.data && res.data.length > 0) {
|
|
this.coinList = res.data.filter(it => it.breweryId != 0)
|
|
this.totalCoin = this.coinList.reduce((total, item) => {
|
|
return total + item.balance
|
|
}, 0)
|
|
let common = res.data.filter(it => it.breweryId == 0)
|
|
if(common && common.length > 0) {
|
|
this.commonCoin = common[0].balance
|
|
}
|
|
} else {
|
|
// 没有数据时重置
|
|
this.coinList = []
|
|
this.totalCoin = 0
|
|
this.commonCoin = 0
|
|
}
|
|
}).catch(err => {
|
|
console.error('获取啤酒币余额失败:', err)
|
|
// 请求失败时重置数据
|
|
this.coinList = []
|
|
this.totalCoin = 0
|
|
this.commonCoin = 0
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
background: #F2F2F2;
|
|
padding: 0rpx 32rpx 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
|
|
.fs-20 {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
.num {
|
|
font-size: 48rpx;
|
|
color: #3D3D3D;
|
|
|
|
}
|
|
|
|
.left {
|
|
width: 382rpx;
|
|
height: 196rpx;
|
|
border-radius: 12rpx;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(242, 242, 242, 0.902);
|
|
margin-right: 18rpx;
|
|
padding: 24rpx 24rpx;
|
|
|
|
|
|
}
|
|
|
|
.right {
|
|
width: 286rpx;
|
|
height: 196rpx;
|
|
border-radius: 12rpx;
|
|
opacity: 1;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
border: 1px solid rgba(242, 242, 242, 0.902);
|
|
padding: 24rpx 14rpx;
|
|
|
|
}
|
|
|
|
.tab {
|
|
color: #A5A7B9;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #1E2019;
|
|
}
|
|
|
|
.tag {
|
|
background-color: transparent;
|
|
border-radius: 12rpx;
|
|
padding: 12rpx 30rpx;
|
|
border: 1px solid #0B0E26;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.active-tag {
|
|
background-color: #39E5B1;
|
|
font-weight: bold;
|
|
border: 1px solid #39E5B1;
|
|
}
|
|
|
|
.goods-container {
|
|
// flex: 1;
|
|
// overflow-y: auto;
|
|
// padding-bottom: constant(safe-area-inset-bottom);
|
|
// padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.goods-item {
|
|
// width: 334rpx;
|
|
width: 48%;
|
|
height: 605rpx;
|
|
border-radius: 12rpx;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
// border: 1px solid rgba(242, 242, 242, 0.702);
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.cover-box {
|
|
// width: 334rpx;
|
|
width: 100%;
|
|
height: 440rpx;
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
position: relative;
|
|
|
|
.cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
}
|
|
|
|
.like {
|
|
position: absolute;
|
|
right: 16rpx;
|
|
bottom: 18rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
padding: 16rpx 14rpx;
|
|
font-size: 24rpx;
|
|
border-bottom: 1px solid #D8D8D8;
|
|
color: #3D3D3D;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</style> |