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>
|