407 lines
13 KiB
Vue
407 lines
13 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="top" :style="{'padding-top': navHeight + 'px'}">
|
||
<view class="title">品牌返利 一扫即得</view>
|
||
<view class="flex justify-around align-center">
|
||
<view class="flex flex-col align-center" @click="openP(1)">
|
||
<view class="flex align-center justify-center" style="border-radius: 50%;background: #D8D8D8;width: 166rpx;height: 166rpx;margin-bottom: 22rpx;">
|
||
<image src="http://ma.zdtap.com/profile/upload/2025/02/20/KXT1kQ1PlQxG56e382d9a28dfd20f3c2782e0a3009ef_20250220012559A002.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text style="font-size: 32rpx;margin-bottom: 6rpx;" class="back-f">1 扫码酒签</text>
|
||
<text style="font-size: 24rpx;" class="back-f">什么酒参与></text>
|
||
</view>
|
||
<image src="@/static/arrow-right.png" style="width: 30rpx;height: 30rpx;margin-bottom: 100rpx;"></image>
|
||
<view class="flex flex-col align-center" @click="openP(2)">
|
||
<view class="flex align-center justify-center" style="border-radius: 50%;background: #D8D8D8;width: 166rpx;height: 166rpx;margin-bottom: 22rpx;">
|
||
<image src="http://ma.zdtap.com/profile/upload/2025/02/20/KXT1kQ1PlQxG56e382d9a28dfd20f3c2782e0a3009ef_20250220012559A002.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text style="font-size: 32rpx;margin-bottom: 6rpx;" class="back-f">2 累积目标</text>
|
||
<text style="font-size: 24rpx;" class="back-f">目标值多少></text>
|
||
</view>
|
||
<image src="@/static/arrow-right.png" style="width: 30rpx;height: 30rpx;margin-bottom: 100rpx;"></image>
|
||
<view class="flex flex-col align-center" @click="openP(3)">
|
||
<view class="flex align-center justify-center" style="border-radius: 50%;background: #D8D8D8;width: 166rpx;height: 166rpx;margin-bottom: 22rpx;">
|
||
<image src="http://ma.zdtap.com/profile/upload/2025/02/20/KXT1kQ1PlQxG56e382d9a28dfd20f3c2782e0a3009ef_20250220012559A002.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text style="font-size: 32rpx;margin-bottom: 6rpx;" class="back-f">3 品牌返利</text>
|
||
<text style="font-size: 24rpx;" class="back-f">如何返利></text>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="cu-btn scan-btn" @click="handleScan">
|
||
<text class="cuIcon-qr_code" style="margin-right: 16rpx;font-size: 36rpx;"></text>
|
||
立即扫码累积</button>
|
||
</view>
|
||
<view class="bottom">
|
||
<view style="font-size:32rpx;color: #3D3D3D;margin-bottom: 36rpx;">品牌返利 + 高效运营</view>
|
||
<view class="flex justify-between" style="margin-bottom:74rpx;">
|
||
<view class="nav-item">
|
||
<view class="flex justify-center align-center img-box">
|
||
<image src="http://ma.zdtap.com/profile/upload/2025/02/20/HnII7AUyYqVH8cb6799a504fef2edf24081848a96f84_20250220003107A003.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text >累计返利</text>
|
||
</view>
|
||
<view class="nav-item flex flex-col justify-center align-center">
|
||
<view class="flex justify-center align-center img-box">
|
||
<image src="@/static/beerCoin.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text >啤酒币兑换</text>
|
||
</view>
|
||
<view class="nav-item">
|
||
<view class="flex justify-center align-center img-box">
|
||
<image src="http://ma.zdtap.com/profile/upload/2025/02/20/3J1Tp20vyIcRc06cf8171d377895c7deeb0edbb4f2dc_20250220003140A004.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text >酒款评分</text>
|
||
</view>
|
||
<view class="nav-item">
|
||
<view class="flex justify-center align-center img-box">
|
||
<image src="http://ma.zdtap.com/profile/upload/2025/02/20/qREGgW8ALJ1hd80993817aa74a4924a38f5432fca060_20250220002923A002.png" style="width: 48rpx;height: 48rpx;"></image>
|
||
</view>
|
||
<text >生成酒单</text>
|
||
</view>
|
||
</view>
|
||
<view style="font-size:32rpx;color: #3D3D3D;margin-bottom: 54rpx;">常见问题</view>
|
||
<view class="flex align-center">
|
||
<view class="dat"></view>
|
||
<view style="font-size: 28rpx;color: #3D3D3D;margin-bottom: 8rpx;">需要在平台下单采购吗?</view>
|
||
</view>
|
||
<view class="content">任意渠道您采购的桶装产品,都可以参与活动,只要确定酒标有'枝点酒掌柜'的二维码,扫码即可.</view>
|
||
<view class="flex align-center">
|
||
<view class="dat"></view>
|
||
<view style="font-size: 28rpx;color: #3D3D3D;margin-bottom: 8rpx;">我的酒,没有二维码怎么办?</view>
|
||
</view>
|
||
<view class="content">1.如果您商品品牌方未入驻"枝点"暂时无法提供服务 </br>2.若品牌方已入驻,需最新批次产品将会体现"枝点"二维码.</view>
|
||
</view>
|
||
<!-- <template v-else>
|
||
<view class="flex justify-center align-center" style="height: 100vh;">
|
||
<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"></loginPopup>
|
||
<uni-popup ref="p1" type="center" :is-mask-click="false">
|
||
<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
|
||
<view style="padding: 28rpx;flex:1">
|
||
<view class="title">什么酒参与</view>
|
||
<view class="p-text margin-bottom">您可查看桶装啤酒的酒标/吊牌等,只要发现有'枝点酒掌柜'标志的二维码,扫码即可参与. </view>
|
||
<view class="p-text">多家精酿品牌陆续入驻中.敬请期待</view>
|
||
</view>
|
||
<view class="p-btn" @click="closeP(1)">我知道了</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="p2" type="center" :is-mask-click="false">
|
||
<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
|
||
<view style="padding: 28rpx;flex:1">
|
||
<view class="title">目标多少</view>
|
||
<view class="p-text margin-bottom">可以查看枝点发布的'活动招募',不同品牌方发布的活动目标不同. </view>
|
||
<view class="p-text">扫码后系统会自动判定酒款符合的活动,您选择要参与的具体活动即可开始,无需额外报名. </view>
|
||
</view>
|
||
<view class="p-btn" @click="closeP(2)">我知道了</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="p3" type="center" :is-mask-click="false">
|
||
<view class="p-body flex flex-col" style="width: 500rpx;height: 660rpx;">
|
||
<view style="padding: 28rpx;flex:1">
|
||
<view class="title">如何返利</view>
|
||
<view class="p-text margin-bottom">累积活动达成目标值后,系统自动发起兑付,无需人工操作,对应活动的品牌方会安排兑付相应的返利商品/啤酒币. 您可以在'我参与的'栏目查看进度.</view>
|
||
</view>
|
||
<view class="p-btn" @click="closeP(3)">我知道了</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import loginPopup from '@/components/loginPopup.vue';
|
||
export default {
|
||
components: {
|
||
loginPopup
|
||
},
|
||
data() {
|
||
return {
|
||
userInfo: null,
|
||
barInfo: null,
|
||
isLoggedIn: false,
|
||
isVerified: false,
|
||
isVerifying: false,
|
||
navHeight: 0,
|
||
};
|
||
},
|
||
onLoad() {
|
||
let a = uni.getMenuButtonBoundingClientRect()
|
||
this.navHeight = a.bottom +18
|
||
this.checkLoginStatus()
|
||
},
|
||
onShow() {
|
||
this.checkLoginStatus()
|
||
},
|
||
methods: {
|
||
// 检查登录状态
|
||
checkLoginStatus() {
|
||
const token = uni.getStorageSync('token')
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
const barInfo = uni.getStorageSync('barInfo')
|
||
|
||
// 重置状态
|
||
this.isLoggedIn = false
|
||
this.isVerified = false
|
||
this.isVerifying = false
|
||
this.userInfo = null
|
||
this.barInfo = null
|
||
|
||
// 检查登录状态
|
||
if (!token || !userInfo) {
|
||
return
|
||
}
|
||
|
||
this.isLoggedIn = true
|
||
this.userInfo = userInfo
|
||
this.barInfo = barInfo
|
||
|
||
// 检查认证状态
|
||
if (barInfo) {
|
||
if (barInfo.authState === 1) {
|
||
// 已认证
|
||
this.isVerified = true
|
||
this.isVerifying = false
|
||
} else if (barInfo.authState === 2) {
|
||
// 认证中
|
||
this.isVerified = false
|
||
this.isVerifying = true
|
||
} else {
|
||
// 未认证
|
||
this.isVerified = false
|
||
this.isVerifying = false
|
||
}
|
||
} else {
|
||
// 兼容旧版本，使用userInfo中的isVerified
|
||
this.isVerified = userInfo?.isVerified === 1
|
||
this.isVerifying = false
|
||
}
|
||
},
|
||
// 登录成功回调
|
||
loginSuccess() {
|
||
this.checkLoginStatus()
|
||
},
|
||
openP(index) {
|
||
uni.hideTabBar()
|
||
this.$refs['p' + index].open()
|
||
},
|
||
closeP(index) {
|
||
this.$refs['p' + index].close()
|
||
uni.showTabBar()
|
||
},
|
||
// 跳转登录
|
||
toLogin() {
|
||
this.$refs.loginRef.open()
|
||
},
|
||
handleScan() {
|
||
if (!this.isLoggedIn) {
|
||
this.$refs.loginRef.open()
|
||
return
|
||
}
|
||
|
||
if (!this.isVerified && !this.isVerifying) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先认证门店',
|
||
showCancel: true,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/registration'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
|
||
if (this.isVerifying) {
|
||
uni.showToast({
|
||
title: '您的门店正在认证中，请耐心等待',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
if (!res.authSetting['scope.userLocation']) {
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success: (res) => {
|
||
console.log(res)
|
||
this.startScan()
|
||
},
|
||
fail: (err) => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先授权获取您的位置信息',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userLocation']) {
|
||
this.startScan()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.startScan()
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// 开始扫码
|
||
startScan() {
|
||
this.handleGetLocation()
|
||
},
|
||
handleGetLocation() {
|
||
uni.getLocation({
|
||
type: "gcj02",
|
||
success: (resLoc) => {
|
||
console.log(resLoc)
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
if(!resLoc.latitude && !resLoc.longitude) {
|
||
uni.showToast({
|
||
title: '位置信息获取失败',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pagesActivity/scanResult?result=' + res.result + '&latitude=' + resLoc.latitude + '&longitude=' + resLoc.longitude
|
||
})
|
||
}
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
font-family: Roboto;
|
||
background-color: #fff;
|
||
height: 100vh;
|
||
.top {
|
||
height: 700rpx;
|
||
// background: rgba(57, 229, 177, 0.8);
|
||
// background: rgba(25, 54, 122, 1);
|
||
background: #19367A;
|
||
padding: 36rpx 30rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
.title {
|
||
font-family: Alimama ShuHeiTi;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.scan-btn {
|
||
position: absolute;
|
||
width: 690rpx;
|
||
height: 116rpx;
|
||
bottom: -58rpx;
|
||
border-radius: 58rpx;
|
||
background: #D42E78;
|
||
font-family: Roboto;
|
||
font-size: 40rpx;
|
||
font-weight: normal;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
flex: 1;
|
||
background: #FFFFFF;
|
||
padding: 100rpx 30rpx 0;
|
||
// padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||
// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||
// 快捷导航
|
||
.nav-item {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
|
||
.img-box {
|
||
width: 106rpx;
|
||
height: 106rpx;
|
||
background: #F2F2F2;
|
||
border-radius: 50%;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
}
|
||
.dat{
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border: 6rpx solid #39E5B1;
|
||
border-radius: 50%;
|
||
margin-right: 14rpx;
|
||
}
|
||
.content {
|
||
margin-left: 34rpx;
|
||
font-family: Roboto;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #3D3D3D;
|
||
line-height: 130%;
|
||
margin-bottom: 34rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
.p-body {
|
||
border-radius: 12rpx;
|
||
background: #F2F2F2;
|
||
.title {
|
||
margin-bottom: 46rpx;
|
||
font-family: Roboto;
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
text-align: center;
|
||
color: #3D3D3D;
|
||
}
|
||
.p-text {
|
||
font-family: Roboto;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
color: #9E9E9E;
|
||
}
|
||
.p-btn {
|
||
width: 100%;
|
||
height: 90rpx;
|
||
border-radius: 0px 0px 12rpx 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #D42E78;
|
||
font-family: Roboto;
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
.back-f{
|
||
color: #FFFFFF;
|
||
}
|
||
</style> |