338 lines
11 KiB
Vue
338 lines
11 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,
|
||
|
|
navHeight: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
let a = uni.getMenuButtonBoundingClientRect()
|
||
|
|
this.navHeight = a.bottom +18
|
||
|
|
},
|
||
|
|
// created(){
|
||
|
|
// this.userInfo = uni.getStorageSync('userInfo')
|
||
|
|
// if(this.userInfo) {
|
||
|
|
// this.handleScan()
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
methods: {
|
||
|
|
openP(index) {
|
||
|
|
uni.hideTabBar()
|
||
|
|
this.$refs['p' + index].open()
|
||
|
|
},
|
||
|
|
closeP(index) {
|
||
|
|
this.$refs['p' + index].close()
|
||
|
|
uni.showTabBar()
|
||
|
|
},
|
||
|
|
// 跳转登录
|
||
|
|
toLogin() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/index/chooseLogin'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleScan() {
|
||
|
|
if (!uni.getStorageSync('token')) {
|
||
|
|
this.$refs.loginRef.open()
|
||
|
|
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 if (res.cancel) {
|
||
|
|
console.log('用户点击取消')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}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>
|