625 lines
18 KiB
Vue
625 lines
18 KiB
Vue
<template>
|
||
<view class="page">
|
||
<template v-if="showError">
|
||
<view class="flex flex-col align-center justify-center" style="height: 100vh;">
|
||
<view class="err-title">无效的二维码</view>
|
||
<view class="cu-btn err-btn" @click="back"><image src="@/static/undo.png" style="width: 42rpx;height: 42rpx;margin-right: 10rpx;"></image>返回</view>
|
||
</view>
|
||
|
||
</template>
|
||
<template v-else>
|
||
<view class="flex-1" style="overflow-y: auto;">
|
||
<!-- 已领取 -->
|
||
<view v-if="info.qrcode.qrcodeStatus == 1" class="lq-state-box">
|
||
<image src="@/static/information.png" class="img"></image>
|
||
<text>该桶产品已于 {{ info.qrcode.verifyTime }} 扫码领取返利</text>
|
||
</view>
|
||
<!-- 扫码成功 -->
|
||
<view v-if="info.qrcode.qrcodeStatus == 0" class="scs-state-box">
|
||
<image src="@/static/tick-circle@2x.png" class="img"></image>
|
||
<!-- <text>{{ info.qrcodeStatus == 3 ? '领取成功啦！' : '扫码成功！'}}</text> -->
|
||
<text>扫码成功！</text>
|
||
</view>
|
||
<view v-if="info.qrcode.qrcodeStatus == 0" class="flex align-center"
|
||
style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;">
|
||
<image src="@/static/flag.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
识别产品
|
||
</view>
|
||
<view v-if="beer" class="goods-box">
|
||
<image :src="beer.cover" class="cover"></image>
|
||
<view class="flex-1">
|
||
<view class="flex justify-between align-center" style="margin-bottom: 28rpx;">
|
||
<view class="flex align-center">
|
||
<text
|
||
style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;">{{ beer.beerName}}</text>
|
||
<!-- <image src="@/static/verify-mark.png" style="width: 48rpx;height: 48rpx;"></image> -->
|
||
</view>
|
||
|
||
<!-- <text class="cuIcon-like" style="color: #979797;font-size: 48rpx;"></text> -->
|
||
</view>
|
||
<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.brandName}}</view>
|
||
<view style="margin-bottom: 38rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.launchDate }}</view>
|
||
<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
|
||
<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
|
||
{{ beer.beerOverallRating}}
|
||
</text>
|
||
<text style="color: #5F5F63;margin-left: 16rpx;">{{beer.beerReviewsCount}} 条评论</text>
|
||
</view>
|
||
</view>
|
||
<!-- 去评论区域 -->
|
||
<!-- <view v-if="info.qrcodeStatus == 1" class="flex align-center justify-between tip">
|
||
<view class="flex align-center">
|
||
<image src="@/static/add.png" class="icon"></image>
|
||
<text>首次写酒评还能领取<text style="color: #DE3C4B;;">XXX</text>品牌啤酒币哦</text>
|
||
</view>
|
||
|
||
<text style="color: #DE3C4B;;">这就去评</text>
|
||
</view> -->
|
||
<!-- 参与活动提示 -->
|
||
<template v-if="info.qrcode.qrcodeStatus == 0">
|
||
<view class="flex align-center"
|
||
style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;margin-top: 52rpx;">
|
||
<image src="@/static/cup-green.png" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
|
||
</image>
|
||
品牌福利等你领
|
||
</view>
|
||
<view class="active-box">
|
||
<view class="title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币</view>
|
||
<text class="sub">品牌啤酒币可用于兑换好礼</text>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 厂牌返利提示 -->
|
||
<template v-if="info.qrcode.qrcodeStatus == 1">
|
||
<view class="flex align-center"
|
||
style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;margin-top: 52rpx;">
|
||
<image src="@/static/cup-red.png" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
|
||
</image>
|
||
厂牌返利已领取
|
||
</view>
|
||
<view class="active-box">
|
||
<view class="title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
|
||
<text class="sub">品牌啤酒币可用于兑换好礼</text>
|
||
</view>
|
||
</template>
|
||
<view v-if="activitySum > 1 && info.qrcode.qrcodeStatus == 0" style="margin-bottom: 32rpx">
|
||
*该产品有多个进行中活动重叠，请<text style="color:#DE3C4B">选择要计入的活动</text></view>
|
||
<template v-if="info.qrcode.qrcodeStatus == 0">
|
||
<view v-for="(it, index) in activity" :key="index" :class="{'active': it.id == activityId}"
|
||
@click="selectPPF(it)">
|
||
<view class="activity-item flex">
|
||
<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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-for="(it, index) in platformActivity" :key="index"
|
||
:class="{'ptActive': it.id == platformActivityId}" @click="selectPlatform(it)">
|
||
<view class="activity-item flex">
|
||
<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 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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="flex align-end flex-col">
|
||
<view v-if="info.qrcode.qrcodeStatus == 2" class="lq-tip flex align-center">
|
||
<image src="@/static/warning-2.png" style="width: 30rpx;height:30rpx;margin-right: 12rpx;"></image>
|
||
所有酒款只可领取一次，请确认后操作
|
||
</view>
|
||
<view class="flex justify-between align-center" style="width: 100%;">
|
||
<view v-if="info.qrcode.qrcodeStatus != 1" class="btn" @click="back">
|
||
<image src="@/static/undo.png" class="icon"></image>
|
||
回头再说
|
||
</view>
|
||
<view v-else class="btn" @click="toWinelist">
|
||
<image src="@/static/document.png" class="icon"></image>
|
||
生成酒单
|
||
</view>
|
||
<view v-if="info.qrcode.qrcodeStatus == 0" class="btn"
|
||
style="background-color: #71F4B4;" @click="handleReceive">
|
||
<image src="@/static/send.png" class="icon"></image>
|
||
立即领取
|
||
</view>
|
||
<view v-else class="btn" style="background-color: #71F4B4;" @click="share">
|
||
<image src="@/static/send.png" class="icon"></image>
|
||
分享上新
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
consumeCode,
|
||
getQrcodeInfo
|
||
} from '@/api/bar.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
showError: false,
|
||
info: {
|
||
qrcode: {
|
||
qrcodeStatus: null, // 1 已领取 2 扫码成功 3 核销成功
|
||
},
|
||
},
|
||
activity: [], // 活动列表
|
||
platformActivity: [], // 平台活动
|
||
activityList: [],
|
||
activitySum: 0, // 活动数量
|
||
beer: null,
|
||
result: null, // 扫码结果 code
|
||
activityId: null, // 活动id
|
||
platformActivityId: null, // 平台活动id
|
||
latitude: null,
|
||
longitude: null,
|
||
};
|
||
},
|
||
onLoad({
|
||
result,
|
||
latitude,
|
||
longitude
|
||
}) {
|
||
this.result = result
|
||
this.latitude = latitude
|
||
this.longitude = longitude
|
||
// 查询二维码信息
|
||
this.getQrcodeInfoFun(result)
|
||
},
|
||
methods: {
|
||
// 查询二维码信息
|
||
getQrcodeInfoFun(code) {
|
||
getQrcodeInfo({
|
||
code,
|
||
latitude: this.latitude,
|
||
longitude: this.longitude
|
||
}).then(res => {
|
||
console.log(res.data)
|
||
this.info = res.data
|
||
this.beer = res.data.beer
|
||
this.activity = res.data.activity || [] // 活动列表
|
||
this.platformActivity = res.data.platformActivity || [] // 平台活动
|
||
if (this.activity && this.activity.length > 0) {
|
||
this.activitySum += this.activity.length
|
||
this.activityId = this.activity[0].id
|
||
}
|
||
if (this.platformActivity && this.platformActivity.length > 0) {
|
||
this.activitySum += this.platformActivity.length
|
||
this.platformActivityId = this.platformActivity[0].id
|
||
}
|
||
// if (this.activitySum > 0) return
|
||
// if (res.data.qrcode.qrcodeStatus == 0) { // 未核销
|
||
// this.consumeCodeFun(code)
|
||
// } else
|
||
// if (res.data.qrcode.qrcodeStatus == 1) { // 已核销
|
||
// uni.showToast({
|
||
// title: '该二维码已核销',
|
||
// icon: 'none'
|
||
// })
|
||
// } else if (res.data.qrcode.qrcodeStatus == 2) { // 已失效
|
||
// uni.showToast({
|
||
// title: '该二维码已失效',
|
||
// icon: 'none'
|
||
// })
|
||
// }
|
||
}).catch(err => {
|
||
console.log(err, 'err')
|
||
this.showError = true
|
||
})
|
||
},
|
||
// 核销二维码
|
||
consumeCodeFun(code) {
|
||
consumeCode({
|
||
code,
|
||
latitude: this.latitude,
|
||
longitude: this.longitude
|
||
}).then(res => {
|
||
console.log(res)
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
icon: 'none'
|
||
})
|
||
this.getQrcodeInfoFun(code)
|
||
})
|
||
},
|
||
// 立即领取
|
||
handleReceive() {
|
||
const data = {
|
||
code: this.result,
|
||
latitude: this.latitude,
|
||
longitude: this.longitude
|
||
}
|
||
if (this.activityId) {
|
||
data.activityId = this.activityId
|
||
}
|
||
if (this.platformActivityId) {
|
||
data.platformActivityId = this.platformActivityId
|
||
}
|
||
consumeCode(data).then(res => {
|
||
console.log(res)
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
icon: 'none'
|
||
})
|
||
this.getQrcodeInfoFun(this.result)
|
||
})
|
||
},
|
||
back() {
|
||
uni.navigateBack()
|
||
},
|
||
// 选择品牌方活动
|
||
selectPPF(item) {
|
||
this.activityId = item.id
|
||
},
|
||
// 选择平台活动
|
||
selectPlatform(item) {
|
||
this.platformActivityId = item.id
|
||
},
|
||
// 生成酒单
|
||
toWinelist() {
|
||
uni.navigateTo({
|
||
url: '/pagesActivity/winelist?beerId=' + this.beer.id
|
||
})
|
||
},
|
||
share() {
|
||
uni.downloadFile({
|
||
url: this.beer.cover,
|
||
success: (res) => {
|
||
console.log(res)
|
||
// #ifdef MP-WEIXIN
|
||
uni.showShareImageMenu({
|
||
provider: 'weixin',
|
||
// path: '/pages/index/featureInfo?id=' + this.id,
|
||
path: res.tempFilePath,
|
||
shareType: 0,
|
||
success: (res) => {
|
||
console.log(res)
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
// #endif
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
height: 100vh;
|
||
background-color: #FDFDFD;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 0rpx 26rpx 60rpx;
|
||
.err-title {
|
||
font-family: Roboto;
|
||
font-size: 36rpx;
|
||
font-weight: normal;
|
||
color: #3D3D3D;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.err-btn {
|
||
font-family: Roboto;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
color: #0B0E26;
|
||
border-radius: 12rpx;
|
||
background: #39E5B1;
|
||
width: 200rpx;
|
||
height: 88rpx;
|
||
}
|
||
// 已领取
|
||
.lq-state-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 92rpx;
|
||
padding-top: 116rpx;
|
||
|
||
.img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
}
|
||
|
||
// 扫码成功
|
||
.scs-state-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
padding-top: 30rpx;
|
||
font-size: 36rpx;
|
||
color: #1E2019;
|
||
font-weight: bold;
|
||
|
||
.img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 48rpx;
|
||
}
|
||
}
|
||
|
||
.goods-box {
|
||
border-radius: 30rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
box-sizing: border-box;
|
||
border: 1px solid #F2F2F2;
|
||
box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
|
||
display: flex;
|
||
padding: 16rpx 32rpx;
|
||
|
||
.cover {
|
||
width: 208rpx;
|
||
height: 300rpx;
|
||
border-radius: 30rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
|
||
.tip {
|
||
padding: 12rpx 40rpx 12rpx 18rpx;
|
||
font-size: 20rpx;
|
||
color: #5E5F60;
|
||
background: rgba(254, 224, 52, 0.36);
|
||
border-radius: 20rpx;
|
||
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.active-box {
|
||
border-radius: 32rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
box-sizing: border-box;
|
||
border: 1px solid #F2F2F2;
|
||
box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
|
||
padding: 24rpx 38rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
.title {
|
||
font-family: Source Han Sans;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
color: #3D3D3D;
|
||
|
||
}
|
||
|
||
.sub {
|
||
font-family: Source Han Sans;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
color: rgba(151, 151, 151, 0.749);
|
||
}
|
||
}
|
||
|
||
// .card {
|
||
// border-radius: 40rpx;
|
||
// background: #FFFFFF;
|
||
// box-sizing: border-box;
|
||
// border: 1px solid #F2F2F2;
|
||
// .avatar {
|
||
// width: 160rpx;
|
||
// height:160rpx;
|
||
// border-radius: 8rpx;
|
||
// }
|
||
// }
|
||
.ptActive {
|
||
border: 1px solid #71F4B4;
|
||
padding: 14rpx 10rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
.activity-item {
|
||
width: 673rpx;
|
||
margin-bottom: 0px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 1px solid #FEE034;
|
||
padding: 14rpx 10rpx;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 32rpx;
|
||
box-sizing: border-box;
|
||
|
||
.activity-item {
|
||
width: 673rpx;
|
||
margin-bottom: 0px;
|
||
}
|
||
}
|
||
|
||
// 累积活动
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lq-tip {
|
||
border-radius: 20rpx;
|
||
background: rgba(233, 233, 233, 0.38);
|
||
box-sizing: border-box;
|
||
border: 1px solid rgba(233, 233, 233, 0.3804);
|
||
padding: 10rpx;
|
||
font-size: 20rpx;
|
||
color: #5E5F60;
|
||
margin-bottom: 14rpx;
|
||
width: 400rpx;
|
||
}
|
||
|
||
.btn {
|
||
border-radius: 30rpx;
|
||
box-sizing: border-box;
|
||
width: 306rpx;
|
||
height: 96rpx;
|
||
border-radius: 30rpx;
|
||
background-color: #FEE034;
|
||
font-size: 28rpx;
|
||
color: #1E2019;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |