417 lines
12 KiB
Vue
417 lines
12 KiB
Vue
<template>
|
||
<view class="activitypage">
|
||
<template v-if="userInfo">
|
||
<view class="bg-white flex-col" style="height: 100%;">
|
||
<scroll-view scroll-x class="bg-white nav">
|
||
<view class="flex text-center">
|
||
<view class="cu-item flex-sub tab" :class="tabCur == 0?'active cur':''" @tap="tabSelect"
|
||
:data-id="0">
|
||
累积活动
|
||
</view>
|
||
<view class="cu-item flex-sub tab" :class="tabCur == 1?'active cur':''" @tap="tabSelect"
|
||
:data-id="1">
|
||
啤酒币换购
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
<scroll-view v-if="tabCur == 0" scroll-y
|
||
style="padding: 16rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
|
||
@scrolltolower="changePage">
|
||
<view class="padding-lr 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="activity-item flex" v-for="(it, index) in myJoinList" :key="index" @click="toInfo(it)">
|
||
<view class="left flex flex-col justify-between align-center">
|
||
<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;">
|
||
</image>
|
||
<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">距离达成还剩</view>
|
||
<view>
|
||
<text v-if="it.remainingBeerCount <= 0"
|
||
style="font-size: 40rpx; color: #DE3C4B;">已达标</text>
|
||
<text v-else>
|
||
<text style="font-size: 72rpx; color: #DE3C4B;">{{ it.remainingBeerCount}}</text>桶
|
||
</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="right">
|
||
<view class="title">{{ it.activityName }}</view>
|
||
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
|
||
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
|
||
<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
|
||
<view class="beer-box" v-for="(it, index) in it.beers" :key="index"
|
||
@click="toReview(it)">
|
||
<image v-if="it.cover" :src="it.cover" class="cover"></image>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="flex align-center">
|
||
<text class="zeng">赠</text>
|
||
<text v-if="it.activityRewardType == 1 && it.activityRewardGoods"
|
||
style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
|
||
<text v-if="it.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
|
||
<text v-if="it.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cu-load" :class="'over'"></view>
|
||
</scroll-view>
|
||
<scroll-view v-if="tabCur == 1" scroll-y
|
||
style="padding: 16rpx 28rpx 0;background-color: #F2F2F2;overflow-y: auto;flex:1"
|
||
@scrolltolower="changePageCoin">
|
||
<view class="padding-lr flex justify-start" style="margin-bottom: 28rpx;margin-top: 28rpx;">
|
||
<view class="text-sm tag" :class="{'active-tag': curCoinTag == 0}" @click="changeCoinTag(0)">全部</view>
|
||
<view class="text-sm tag" :class="{'active-tag': curCoinTag == 1}" @click="changeCoinTag(1)">待发货</view>
|
||
<view class="text-sm tag" :class="{'active-tag': curCoinTag == 2}" @click="changeCoinTag(2)">待收货</view>
|
||
<view class="text-sm tag" :class="{'active-tag': curCoinTag == 3}" @click="changeCoinTag(3)">已完成</view>
|
||
</view>
|
||
<view class="coin-item" v-for="(it, index) in myExchangeOrder" :key="index" @click="toOrderInfo(it)">
|
||
|
||
<view class="flex justify-between" style="margin-bottom: 16rpx;">
|
||
<text style="color: #0B0E26;font-size: 28rpx;">
|
||
<image src="@/static/beerCoin.png" style="width: 24rpx;height: 24rpx;margin-right: 16rpx;"></image>
|
||
啤酒币兑换</text>
|
||
<text style="color: #5E5F60;font-size: 24rpx;">已完成</text>
|
||
</view>
|
||
<view class="flex justify-between">
|
||
<image :src="it.goodsCover" class="coverImg"></image>
|
||
<view class="flex justify-between flex-col flex-1" style="padding: 24rpx 0">
|
||
<text class="title word-all">{{ it.goodsName }}</text>
|
||
<!-- <text class="subTitle word-all">品牌名称</text> -->
|
||
</view>
|
||
<view class="flex flex-col justify-center align-end">
|
||
<view class="margin-bottom">
|
||
<text class="num">{{ it.beerCoinNum}}</text>
|
||
<text class="cuIcon-rechargefill"
|
||
style="color:rgba(255, 213, 43, 1);font-size: 36rpx;margin-left: 6rpx;"></text>
|
||
</view>
|
||
<text style="color: #5E5F60;font-size: 20rpx;">共{{it.redeemNum}}件</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view v-if="myExchangeOrder.length == 0">
|
||
<view class="flex-direction flex align-center">
|
||
<text class="text-lg margin-top">暂无历史订单</text>
|
||
|
||
</view>
|
||
</view> -->
|
||
<view class="cu-load" :class="orderTotal == myExchangeOrder.length ? 'over': 'more'"></view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="flex justify-center align-center" style="height: 100vh;background-color: #FDFDFD;">
|
||
<view class="flex-direction flex align-center">
|
||
<text class="text-lg margin-top">暂无法查看信息</text>
|
||
<text class="margin-top" style="color: #979797;font-size: 24rpx;">您还没有登录，请登录后查看信息</text>
|
||
<button class="cu-btn bg-zd margin-top" style="width: 306rpx;height: 88rpx;" @click="toLogin">
|
||
<image src="@/static/send.png" style="width: 48rpx;height: 48rpx;margin-right: 16rpx;"></image>
|
||
登录/认证</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import loginPopup from '@/components/loginPopup.vue';
|
||
import { myJoinListApi, getMyExchangeOrder } from "@/api/user.js"
|
||
export default {
|
||
components: {
|
||
loginPopup
|
||
},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
// statusBaeHeight: 40,
|
||
userInfo: null,
|
||
tabCur: 0,
|
||
curTag: 0, //
|
||
curCoinTag: 0,
|
||
myJoinList: [], // 我参与的活动
|
||
queryForm: {
|
||
status: 1,
|
||
// pageNum: 1,
|
||
// pageSize: 5,
|
||
},
|
||
total: 0,
|
||
myExchangeOrder:[],
|
||
orderQuery: {
|
||
pageNum: 1,
|
||
pageSize: 5
|
||
},
|
||
orderTotal: 0,
|
||
};
|
||
},
|
||
mounted() {
|
||
},
|
||
onShow() {
|
||
this.userInfo = uni.getStorageSync('userInfo')
|
||
if (this.userInfo) {
|
||
this.loading = false
|
||
this.getMyJoinList()
|
||
// this.getMyExchangeOrderFun()
|
||
}
|
||
},
|
||
methods: {
|
||
loginSuccess() {
|
||
this.userInfo = uni.getStorageSync('userInfo')
|
||
if (this.userInfo) {
|
||
this.loading = false
|
||
this.getMyJoinList()
|
||
}
|
||
},
|
||
// 跳转登录
|
||
toLogin() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/index/chooseLogin'
|
||
// })
|
||
this.$refs.loginRef.open()
|
||
},
|
||
// 我的兑换订单
|
||
getMyExchangeOrderFun() {
|
||
getMyExchangeOrder(this.orderQuery).then(res => {
|
||
console.log(res)
|
||
this.orderTotal = res.total
|
||
if (res.rows && res.rows.length > 0) {
|
||
res.rows.forEach(it => {
|
||
this.myExchangeOrder.push(it)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
tabSelect(e) {
|
||
console.log(e)
|
||
this.tabCur = e.currentTarget.dataset.id;
|
||
if (this.tabCur == 0) {
|
||
this.myJoinList = []
|
||
// this.queryForm.pageNum = 1
|
||
this.getMyJoinList()
|
||
} else {
|
||
this.myExchangeOrder = []
|
||
this.orderQuery.pageNum = 1
|
||
this.getMyExchangeOrderFun()
|
||
}
|
||
|
||
},
|
||
getMyJoinList() {
|
||
myJoinListApi(this.queryForm).then(res => {
|
||
this.myJoinList = []
|
||
if (res.data.activities && res.data.activities.length > 0) {
|
||
res.data.activities.forEach(it => {
|
||
this.myJoinList.push(it)
|
||
})
|
||
}
|
||
if (res.data.platformActivities && res.data.platformActivities.length > 0) {
|
||
res.data.platformActivities.forEach(it => {
|
||
this.myJoinList.push(it)
|
||
})
|
||
}
|
||
})
|
||
},
|
||
changePage() {
|
||
console.log('翻页')
|
||
if (this.myJoinList.length < this.total) {
|
||
this.queryForm.pageNum++
|
||
this.getMyJoinList()
|
||
}
|
||
},
|
||
toInfo(it) {
|
||
uni.navigateTo({
|
||
url: '/pagesActivity/myActivityDetail?batchId=' + it.batchId
|
||
})
|
||
},
|
||
// 订单详情
|
||
toOrderInfo(it) {
|
||
uni.navigateTo({
|
||
url: '/pagesCoin/orderInfo?orderId=' + it.id + '&goodsId=' + it.goodsId
|
||
})
|
||
},
|
||
changeTag(key) {
|
||
this.curTag = key
|
||
this.orderQuery.pageNum = 1
|
||
this.myExchangeOrder = []
|
||
if(key == 0) {
|
||
this.queryForm.status = 1
|
||
} else if(key == 1) {
|
||
this.queryForm.status = 2
|
||
}else if(key == 2) {
|
||
delete this.queryForm.status
|
||
}
|
||
this.getMyJoinList()
|
||
},
|
||
changeCoinTag(key) {
|
||
this.curCoinTag = key
|
||
this.orderQuery.pageNum = 1
|
||
this.myExchangeOrder = []
|
||
if(this.curCoinTag == 0) {
|
||
delete this.orderQuery.status
|
||
}else {
|
||
this.orderQuery.status = key
|
||
}
|
||
this.getMyExchangeOrderFun()
|
||
},
|
||
changePageCoin() {
|
||
console.log('翻页2')
|
||
if (this.myExchangeOrder.length < this.orderTotal) {
|
||
this.orderQuery.pageNum++
|
||
this.getMyExchangeOrderFun()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.activitypage {
|
||
// background: #FDFDFD;
|
||
height: 100vh;
|
||
|
||
.tab {
|
||
color: #A5A7B9;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.active {
|
||
color: #0B0E26;
|
||
}
|
||
|
||
// 累积活动
|
||
.activity-item {
|
||
border-radius: 20rpx;
|
||
background: #FDFDFD;
|
||
box-sizing: border-box;
|
||
border: 1px solid #F2F2F2;
|
||
width: 694rpx;
|
||
margin-bottom: 32rpx;
|
||
|
||
.left {
|
||
padding: 24rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
background: #FFFFFF;
|
||
box-sizing: border-box;
|
||
border: 1px solid #EFEDE9;
|
||
width: 180rpx;
|
||
margin-top: -10rpx;
|
||
margin-bottom: -10rpx;
|
||
}
|
||
|
||
.right {
|
||
padding: 20rpx;
|
||
flex: 1;
|
||
|
||
.title {
|
||
font-family: Source Han Sans;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
line-height: 30rpx;
|
||
color: #0B0E26;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.sub {
|
||
font-family: Source Han Sans;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 30rpx;
|
||
color: #0B0E26;
|
||
margin-bottom: 16rpx;
|
||
|
||
}
|
||
|
||
.scroll-img {
|
||
width: 470rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
white-space: nowrap;
|
||
height: 144rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.beer-box {
|
||
width: 100rpx;
|
||
background: #FFFFFF;
|
||
margin-right: 20rpx;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
|
||
// &:nth-child(1) {
|
||
// margin-left: 32rpx;
|
||
// }
|
||
|
||
.cover {
|
||
width: 100rpx;
|
||
height: 144rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.zeng {
|
||
font-family: Source Han Sans;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
line-height: normal;
|
||
text-align: center;
|
||
color: #0B0E26;
|
||
padding: 8rpx 12rpx;
|
||
border-radius: 10rpx;
|
||
background: #FEE034;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.coin-item {
|
||
border-radius: 12rpx;
|
||
background: #FDFDFD;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 32rpx;
|
||
.coverImg {
|
||
border-radius: 12rpx;
|
||
background: #E9E9E9;
|
||
width: 132rpx;
|
||
height: 176rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
.title {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #0B0E26;
|
||
}
|
||
.subTitle {
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #979797;
|
||
}
|
||
.num {
|
||
font-size: 48rpx;
|
||
font-weight: 500;
|
||
color: #2B2D33;
|
||
}
|
||
}
|
||
}
|
||
.tag {
|
||
background-color: transparent;
|
||
border-radius: 12rpx;
|
||
padding: 12rpx 30rpx;
|
||
border: 1px solid #000;
|
||
margin-right: 24rpx;
|
||
color: #0B0E26;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.active-tag {
|
||
background: #39E5B1;
|
||
font-weight: bold;
|
||
border: 1px solid #39E5B1;
|
||
}
|
||
</style> |