395 lines
9.8 KiB
Vue
395 lines
9.8 KiB
Vue
<template>
|
||
<view class="page">
|
||
<image class="banner" mode="aspectFill" :src="info.cover"></image>
|
||
<view class="container">
|
||
<view class="rules-btn" @click="handleRules">活动细则</view>
|
||
<view class="share-btn" @click="handleShare">分享</view>
|
||
<view class="header-box">
|
||
<view class="title">{{info.pageName}}</view>
|
||
<view class="desc">本月完成限定酒款累计目标，赢取奖励</view>
|
||
</view>
|
||
<view v-if="info.activity" class="top">
|
||
<view class="box-title">活动即将结束</view>
|
||
<view style="color: #9E9E9E;font-size: 24rpx;font-weight: 500;margin-bottom: 16rpx;">
|
||
{{info.activity.endDate}}
|
||
</view>
|
||
<view class="num-box flex justify-between" style="color: #9E9E9E;font-size: 24rpx;font-weight: 500;">
|
||
<text>0桶</text>
|
||
<text>{{ info.activity.activityTarget}}桶</text>
|
||
</view>
|
||
<view class="num-box">
|
||
<view class="sub" style="margin-bottom: 16rpx;">时间：首次扫码开始累计 <text
|
||
style="color:#DE3C4B">{{info.activity.duration || '30'}}天内</text></view>
|
||
<view class="sub">目标：<text style="color:#DE3C4B">限定酒款</text>累计扫码 ≥
|
||
{{ info.activity.activityTarget}}桶
|
||
</view>
|
||
</view>
|
||
<view v-if="info.activity.activityRewardType == 1">
|
||
<view class="margin-bottom-sm" style="padding-top: 24rpx;">目标奖励</view>
|
||
<view v-if="info.activity.activityRewardGoods" class="flex align-center">
|
||
<image :src="info.activity.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="info.activity.activityRewardType == 2" class="bg-white margin-bottom-sm"
|
||
style="border-radius:36rpx;">
|
||
<view class="margin-bottom-sm" style="padding-top: 24rpx;">目标奖励</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">{{ info.activity.activityRewardCount }}</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="flex justify-between">
|
||
<text class="box-title">限定酒款11</text>
|
||
<image src="@/static/arrow-right.png" class="more-icon"></image>
|
||
</view>
|
||
<!-- <scroll-view scroll-x="true" class="scroll-container">
|
||
|
||
<view class="beer-box" v-for="(it, index) in info.beers" :key="index" @click="toReview(it)">
|
||
<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>
|
||
</scroll-view> -->
|
||
<rowBeer :beers="info.beers" />
|
||
</view>
|
||
<view class="flex justify-center">
|
||
<button class="cu-btn bg-zd scan-btn" @click="startScan">
|
||
<text class="cuIcon-qr_code" style="margin-right: 20rpx;"></text>
|
||
扫桶标自动开始累计</button>
|
||
</view>
|
||
</view>
|
||
|
||
<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>
|
||
<view class="p-btn" @click="closeP(1)">我知道了</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getFeaturePage
|
||
} from "@/api/platform.js"
|
||
import rowBeer from '@/components/rowBeer.vue'
|
||
export default {
|
||
components: {
|
||
rowBeer
|
||
},
|
||
data() {
|
||
return {
|
||
id: '',
|
||
info: {}, // 专辑信息
|
||
showRules: false, // 活动细则
|
||
};
|
||
},
|
||
onLoad({
|
||
id
|
||
}) {
|
||
this.id = id
|
||
this.getFeatureInfo()
|
||
uni.showShareMenu({
|
||
menus: ['shareAppMessage', 'shareTimeline']
|
||
})
|
||
},
|
||
methods: {
|
||
// 获取专辑信息
|
||
getFeatureInfo() {
|
||
getFeaturePage(this.id).then(res => {
|
||
console.log(res)
|
||
this.info = res.data
|
||
})
|
||
},
|
||
// 跳转酒评页
|
||
toReview(it) {
|
||
uni.navigateTo({
|
||
url: "/pages/index/review?beerId=" + it.id
|
||
})
|
||
},
|
||
// 活动细则
|
||
handleRules() {
|
||
this.$refs.p1.open()
|
||
},
|
||
// 关闭弹窗
|
||
closeP() {
|
||
this.$refs.p1.close()
|
||
},
|
||
// 分享
|
||
handleShare() {
|
||
if(this.info.cover.include('http://')){
|
||
this.info.cover.replace('http://','https://')
|
||
}
|
||
uni.downloadFile({
|
||
url: this.info.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
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
startScan() {
|
||
uni.switchTab({
|
||
url: "/pages/index/scan?featureId=" + this.id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
.banner {
|
||
width: 100%;
|
||
min-height: 600rpx;
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||
background: #F2F2F2;
|
||
margin-top: -40rpx;
|
||
z-index: 1;
|
||
|
||
.rules-btn {
|
||
position: absolute;
|
||
top: -70rpx;
|
||
left: 24rpx;
|
||
font-family: Roboto;
|
||
font-size: 20rpx;
|
||
font-weight: normal;
|
||
color: #0B0E26;
|
||
border-radius: 40rpx;
|
||
background: #D8D8D8;
|
||
width: 126rpx;
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.share-btn {
|
||
position: absolute;
|
||
top: -70rpx;
|
||
right: 24rpx;
|
||
font-family: Roboto;
|
||
font-size: 20rpx;
|
||
font-weight: normal;
|
||
color: #0B0E26;
|
||
border-radius: 40rpx;
|
||
background: #D8D8D8;
|
||
|
||
width: 114rpx;
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-box {
|
||
.title {
|
||
font-family: Roboto;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #0B0E26;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-family: Roboto;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
color: #9D9D9D;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
border-radius: 12rpx;
|
||
background: #FFFFFF;
|
||
padding: 24rpx;
|
||
margin-bottom: 36rpx;
|
||
|
||
.box-title {
|
||
font-family: Roboto;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #3D3D3D;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.num-box {
|
||
padding: 24rpx 0;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
|
||
.sub {
|
||
font-family: Roboto;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.bottom {
|
||
border-radius: 12rpx;
|
||
background: #FFFFFF;
|
||
padding: 24rpx;
|
||
margin-bottom: 36rpx;
|
||
|
||
.box-title {
|
||
font-family: Roboto;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.more-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
transition: all 0.3;
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
// .scroll-container {
|
||
// display: flex;
|
||
// flex-direction: row;
|
||
// white-space: nowrap;
|
||
// height: 490rpx;
|
||
|
||
// .beer-box {
|
||
// width: 208rpx;
|
||
// background: #FFFFFF;
|
||
// margin-right: 16rpx;
|
||
// margin-bottom: 36rpx;
|
||
// box-sizing: border-box;
|
||
// display: inline-block;
|
||
|
||
// &:nth-child(1) {
|
||
// margin-left: 32rpx;
|
||
// }
|
||
|
||
// .cover {
|
||
// width: 208rpx;
|
||
// height: 300rpx;
|
||
// border-radius: 12rpx;
|
||
// 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;
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
|
||
.scan-btn {
|
||
border-radius: 12rpx;
|
||
width: 654rpx;
|
||
height: 88rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.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: #39E5B1;
|
||
font-family: Roboto;
|
||
font-size: 32rpx;
|
||
font-weight: normal;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
</style> |