401 lines
11 KiB
Vue
401 lines
11 KiB
Vue
<template>
|
||
<view class="page-content">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-nav" :style="{ paddingTop: statusBaeHeight + 'px' }">
|
||
<view class="nav-content">
|
||
<view class="back-btn" @click="goBack">
|
||
<text class="cuIcon-back"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bg-white progress-box margin-bottom-sm" style="height: 600rpx;border-radius: 0 0 36rpx 36rpx;"
|
||
:style="{'margin-top': statusBaeHeight + 88 + 'px'}">
|
||
<process v-if="activityInfo.stage == 1" :value="processNum" progress_width="360" bg_color="#E3E3E5" border_width="6" progress_height="350"
|
||
start_color="#FEE034" end_color="#71F4B4" :total="activityInfo.duration"></process>
|
||
<process v-else :value="0" progress_width="360" bg_color="#E3E3E5" border_width="6" progress_height="350"
|
||
start_color="#FEE034" end_color="#71F4B4" :total="activityInfo.duration"></process>
|
||
<view v-if="activityInfo.stage == 1" class="progress-text">
|
||
<view class="margin-bottom-sm">活动招募还剩</view>
|
||
<view class="text-red margin-bottom-lg">
|
||
<text class="text-sl text-bold">{{ activityInfo.remainingDays}}</text>天
|
||
</view>
|
||
<view>招募截止 {{ activityInfo.endDate }}</view>
|
||
</view>
|
||
<view v-if="activityInfo.stage == 0" class="progress-text">
|
||
|
||
<view class="margin-bottom-sm">活动未开始</view>
|
||
</view>
|
||
<view v-if="activityInfo.stage == 2 || activityInfo.stage == 3" class="progress-text">
|
||
<view class="margin-bottom-sm">活动已结束</view>
|
||
</view>
|
||
<view v-if="activityInfo.stage == 4" class="progress-text">
|
||
<view class="margin-bottom-sm">活动停止</view>
|
||
</view>
|
||
</view>
|
||
<view class="bg-white padding margin-bottom-sm" style="border-radius:36rpx;">
|
||
<view v-if="activityInfo.beers" class="flex justify-between align-center margin-bottom" @click="toBrand">
|
||
<image :src="activityInfo.beers[0].breweryLogo" class="margin-right"
|
||
style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image>
|
||
<view class="flex-1">
|
||
<view style="color:#979797">活动发起方</view>
|
||
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{ activityInfo.beers[0].brandName}}</view>
|
||
</view>
|
||
<view class="cuIcon-right"></view>
|
||
</view>
|
||
<template v-if="currentTab == 1">
|
||
<view class="margin-bottom-xs" style="color:#0B0E26">首次扫码开始累计 <text style="color: #DE3C4B;">{{activityInfo.duration || '-'}} 天内</text></view>
|
||
<view class="margin-bottom-xs" style="color:#0B0E26">以下酒款累计扫码 ≥ {{activityInfo.activityTarget || '-'}} 桶 </view>
|
||
</template>
|
||
<scroll-view v-if="currentTab == 1" scroll-x="true" class="scroll-container">
|
||
<view v-for="(it, index) in activityInfo.beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
|
||
<view class="beer-box">
|
||
<image :src="it.cover" class="cover"></image>
|
||
<view class="title word-all">{{ it.beerName || ''}}</view>
|
||
<view class="desc word-all">{{ it.beerStyles || '' }}</view>
|
||
<view class="desc word-all">{{ it.brandName ||'' }}</view>
|
||
<view class="flex align-center num">
|
||
<image src="@/static/vector.png" style="width: 20rpx;height: 20rpx;margin-right: 10rpx;">
|
||
</image>
|
||
{{ it.beerOverallRating || 0 }}（{{ it.beerReviewsCount || 0}}）
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 1 商品 2 啤酒币 -->
|
||
<view v-if="activityInfo.activityRewardType == 1 || currentTab == 1" class="bg-white padding margin-bottom-sm"
|
||
style="border-radius:36rpx;">
|
||
<view class="margin-bottom-sm">挑战奖励</view>
|
||
<view v-if="activityInfo.activityRewardGoods" class="flex align-center">
|
||
<image :src="activityInfo.activityRewardGoods.goodsCover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
|
||
<view class="flex-1">
|
||
<view class="flex flex-1 align-center">
|
||
<view class="flex-1">
|
||
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{activityInfo.activityRewardGoods.goodsName}}</view>
|
||
<!-- <view class="word-all margin-bottom-sm" style="color:rgba(30, 32, 25, 0.8)">风味西打酒</view>
|
||
<view class="word-all margin-bottom-sm" style="color:#1E2019">TasteRoom 风味屋</view> -->
|
||
</view>
|
||
<view class="text-red text-right">x<text class="text-xxl text-bold">{{activityInfo.activityRewardCount}}</text></view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="activityInfo.activityRewardType == 2" class="bg-white padding margin-bottom-sm"
|
||
style="border-radius:36rpx;">
|
||
<view class="margin-bottom-sm">奖励</view>
|
||
<view class="flex align-center">
|
||
<!-- <image src="@/static/img/icon-logo.png" class="margin-right"
|
||
style="width: 72rpx;height: 72rpx;border-radius: 30rpx;"></image> -->
|
||
<view class="flex flex-1 align-center">
|
||
<view class="flex-1 word-all" style="color:#1E2019">啤酒币</view>
|
||
<view class="text-red text-right">x<text
|
||
class="text-xxl text-bold">{{ activityInfo.activityRewardCount }}</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="height: 200rpx;background-color: transparent;"></view> -->
|
||
<view class="bg-white flex justify-center align-start padding-top"
|
||
style="border-radius:36rpx 36rpx 0 0;height: 182rpx;width: 100%;position: fixed;bottom:0;gap:50rpx">
|
||
<!-- 活动未开始 -->
|
||
<template v-if="true">
|
||
<view class="bg-zd2 padding text-center" style="border-radius: 30rpx;width: 434rpx;font-size: 36rpx;" @click="handleScan">
|
||
<text class="cuIcon-qr_code margin-right-xs"></text>
|
||
扫桶标自动开始累计
|
||
</view>
|
||
</template>
|
||
<!-- <template v-if="false">
|
||
<view class="flex flex-col justify-center align-start">
|
||
<text style="color: #909090;font-size: 28rpx;">活动状态</text>
|
||
<text style="color: #FFD52B;font-size: 36rpx;">累计中</text>
|
||
</view>
|
||
<view class="bg-zd2 padding text-center" style="border-radius: 30rpx;width: 434rpx;font-size: 36rpx;">
|
||
<text class="cuIcon-qr_code margin-right-xs"></text>
|
||
扫码累计
|
||
</view>
|
||
</template> -->
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getActivityInfo
|
||
} from '@/api/bar.js'
|
||
import process from './components/progress.vue';
|
||
export default {
|
||
components: {
|
||
process
|
||
},
|
||
data() {
|
||
return {
|
||
statusBaeHeight: 40,
|
||
id: '',
|
||
activityInfo: {},
|
||
currentTab: 1,
|
||
};
|
||
},
|
||
onLoad({
|
||
id
|
||
}) {
|
||
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
||
this.id = id
|
||
this.init()
|
||
},
|
||
computed: {
|
||
processNum() {
|
||
if(this.activityInfo.duration) {
|
||
return (this.activityInfo.duration - this.activityInfo.remainingDays) / this.activityInfo.duration * 100
|
||
}else {
|
||
return 0
|
||
}
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
init() {
|
||
getActivityInfo(this.id).then(res => {
|
||
this.activityInfo = res.data
|
||
this.activityInfo.remainingDays = this.getRemainingDays(res.data.endDate)
|
||
})
|
||
},
|
||
changeTab(index) {
|
||
this.currentTab = index
|
||
},
|
||
// 跳转 品牌方
|
||
toBrand() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/brandHome?breweryId=' + this.activityInfo.breweryId
|
||
})
|
||
},
|
||
|
||
// 计算剩余天数
|
||
getRemainingDays(date) {
|
||
const targetDate = new Date(date);
|
||
const currentDate = new Date();
|
||
const timeDiff = targetDate.getTime() - currentDate.getTime();
|
||
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
||
return remainingDays;
|
||
},
|
||
handleScan() {
|
||
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)
|
||
}
|
||
})
|
||
},
|
||
goBack() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-content {
|
||
min-height: 100vh;
|
||
padding-bottom: 200rpx;
|
||
|
||
.custom-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
background: transparent;
|
||
|
||
.nav-content {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
|
||
.back-btn {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
border-radius: 50%;
|
||
|
||
.cuIcon-back {
|
||
font-size: 36rpx;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
margin-right: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-box {
|
||
position: relative;
|
||
margin-top: v-bind('statusBaeHeight + 44 + "px"');
|
||
|
||
.progress-text {
|
||
position: absolute;
|
||
top: 200rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-box {
|
||
position: absolute;
|
||
width: 674rpx;
|
||
top: 475rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 30rpx;
|
||
background: #F2F2F2;
|
||
padding: 8rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.defTab {
|
||
width: 50%;
|
||
border-radius: 30rpx;
|
||
background: #F2F2F2;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: Source Han Sans;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #0B0E26;
|
||
padding: 16rpx 48rpx;
|
||
}
|
||
|
||
.active {
|
||
background-color: #71F4B4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-container {
|
||
display: flex;
|
||
flex-direction: row;
|
||
white-space: nowrap;
|
||
min-height: 505rpx;
|
||
.row-box {
|
||
&:nth-child(1) {
|
||
margin-left: 32rpx;
|
||
}
|
||
}
|
||
.beer-box {
|
||
width: 208rpx;
|
||
background: #FFFFFF;
|
||
margin-right: 16rpx;
|
||
margin-bottom: 36rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
|
||
.cover {
|
||
width: 208rpx;
|
||
height: 300rpx;
|
||
border-radius: 30rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
color: #1E2019;
|
||
margin-bottom: 12rpx;
|
||
color: #19191B;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 24rpx;
|
||
color: #A5A7B9;
|
||
margin-bottom: 12rpx;
|
||
color: #979797;
|
||
}
|
||
|
||
.num {
|
||
|
||
font-size: 20rpx;
|
||
color: #5F5F63;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 奖励盒子
|
||
.reward-box {
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 36rpx;
|
||
}
|
||
}
|
||
</style> |