643 lines
17 KiB
Vue
643 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view class="page-content">
|
|||
|
|
<image class="banner" :src="breweryInfo.brandCover"></image>
|
|||
|
|
<view class="brand-header">
|
|||
|
|
<view style="padding:0 24rpx">
|
|||
|
|
<view class="flex align-start justify-between margin-bottom-xl">
|
|||
|
|
<view class="flex align-center">
|
|||
|
|
<image :src="breweryInfo.brandLogo" style="width: 72rpx;height: 72rpx;margin-right: 36rpx;">
|
|||
|
|
</image>
|
|||
|
|
<view class="flex flex-col">
|
|||
|
|
<text class="margin-bottom-xs"
|
|||
|
|
style="color: #0B0E26;font-size: 32rpx;">{{ breweryInfo.brandName}}</text>
|
|||
|
|
<text class=""
|
|||
|
|
style="color: #5E5F60;font-size: 24rpx;">{{breweryInfo.country}}·{{breweryInfo.province}}·{{breweryInfo.city}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex align-center">
|
|||
|
|
<text v-if="!isFavor" class="cuIcon-like"
|
|||
|
|
style="font-size: 50rpx;color: #0B0E26;margin-right: 30rpx;"
|
|||
|
|
@click="favorBreweryFun(1)"></text>
|
|||
|
|
<text v-else class="cuIcon-likefill" style="font-size: 50rpx;color: pink;margin-right: 30rpx;"
|
|||
|
|
@click="favorBreweryFun(2)"></text>
|
|||
|
|
<image src="/static/send.png" style="width: 50rpx;height: 50rpx;" @click="share"></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="flex justify-between align-center">
|
|||
|
|
<view style="width: 226rpx;text-align: center;">
|
|||
|
|
<view class="margin-bottom-xs" style="font-size: 36rpx;">{{ beerTotal}}</view>
|
|||
|
|
<view style="font-size: 24rpx;">在售酒款</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="solid-left solid-right" style="width: 226rpx;text-align: center;">
|
|||
|
|
<view class="margin-bottom-xs" style="font-size: 36rpx;">
|
|||
|
|
{{ breweryInfo.buildingDate && breweryInfo.buildingDate.substr(0,4)}}
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 24rpx;">since</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 226rpx;text-align: center;">
|
|||
|
|
<view class="margin-bottom-xs" style="font-size: 36rpx;">{{myCoin || '--'}}</view>
|
|||
|
|
<view style="font-size: 24rpx;">啤酒币</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="color: #A1A1A1;font-size: 24rpx;margin-top:28rpx;text-indent: 2em;">
|
|||
|
|
{{breweryInfo.desc}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="content-box">
|
|||
|
|
<view class="top flex align-center justify-between">
|
|||
|
|
<view class="def-box" :class="{'active':currentTab == 1}" @click="changeTab(1)">累积活动</view>
|
|||
|
|
<view class="def-box" :class="{'active':currentTab == 2}" @click="changeTab(2)">在售酒款</view>
|
|||
|
|
<view class="def-box" :class="{'active':currentTab == 3}" @click="changeTab(3)">啤酒币兑换</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 累积活动 -->
|
|||
|
|
<view v-if="currentTab == 1">
|
|||
|
|
<scroll-view scroll-y enable-flex class="scroll-container" @scrolltolower="changeActPage">
|
|||
|
|
<view class="activity-item flex" v-for="(it, index) in activityList" :key="index">
|
|||
|
|
<view class="left flex flex-col justify-between align-center">
|
|||
|
|
<image :src="it.brandLogo" style="width: 140rpx;height: 140rpx;"></image>
|
|||
|
|
<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募即将结束</view>
|
|||
|
|
<view>
|
|||
|
|
<text style="font-size: 72rpx; color: #DE3C4B;">{{it.remainingDays}}</text>天
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<!-- <view class="title">{{ it.activityName }}</view> -->
|
|||
|
|
<view class="title">{{ it.breweryName }}</view>
|
|||
|
|
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
|
|||
|
|
<view class="sub">目标：全系列酒款累积扫码 ≥ {{ it.activityTarget}}桶</view>
|
|||
|
|
<scroll-view v-if="it.beers" scroll-x="true" class="scroll-img">
|
|||
|
|
<view class="beer-box" v-for="(it, index) in it.beers" :key="index"
|
|||
|
|
@click="toReview(it)">
|
|||
|
|
<image v-if="it.cover" :src="it.cover" class="cover"></image>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="flex align-center">
|
|||
|
|
<text
|
|||
|
|
v-if="it.activityRewardType == 2 || (it.activityRewardType == 1 && it.activityRewardGoods)"
|
|||
|
|
class="zeng">赠</text>
|
|||
|
|
<text v-if="it.activityRewardType == 1 && it.activityRewardGoods"
|
|||
|
|
style="color: #0B0E26;font-size: 24rpx;">{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}</text>
|
|||
|
|
<text v-if="it.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{it.activityRewardCount}}个</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-load" style="width: 100%;"
|
|||
|
|
:class="loading?'loading': activityList.length == activityTotal ? 'over' :'more'"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 在售酒款 -->
|
|||
|
|
<view v-if="currentTab == 2" class="">
|
|||
|
|
<scroll-view scroll-y enable-flex class="scroll-container flex justify-start flex-wrap" @scrolltolower="changeBeerPage">
|
|||
|
|
<view class="beer-box" v-for="(it, index) in beerList" :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>
|
|||
|
|
<view class="cu-load" style="width: 100%;"
|
|||
|
|
:class="loading?'loading': beerList.length == beerTotal ? 'over' :'more'"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 啤酒币兑换 -->
|
|||
|
|
<view v-if="currentTab == 3" class="goods-container">
|
|||
|
|
<scroll-view scroll-y enable-flex class="flex justify-start flex-wrap" style="height: 100%;"
|
|||
|
|
lower-threshold="20" @scrolltolower="changeGoodsPage">
|
|||
|
|
<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
|
|||
|
|
<view class="cover-box">
|
|||
|
|
<image :src="item.goodsCover" class="cover"></image>
|
|||
|
|
<!-- <view class="like">
|
|||
|
|
<text v-if="index % 2 == 0" class="cuIcon-like" style="color: #1E2019"></text>
|
|||
|
|
<text v-else class="cuIcon-likefill" style="color: pink"></text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="title">
|
|||
|
|
<text>{{ item.goodsName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex justify-between align-center" style="padding:26rpx 16rpx">
|
|||
|
|
<view class="flex align-center">
|
|||
|
|
<text class="num">{{ item.redeemedNum}}</text>
|
|||
|
|
<image src="@/static/beerCoin.png"
|
|||
|
|
style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
<!-- <text style="color: #979797;font-size: 20rpx;">青岛啤酒</text> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="cu-load" style="width: 100%;"
|
|||
|
|
:class="loading?'loading': goodsList.length == goodsTotal ? 'over' :'more'"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getBreweryInfo,
|
|||
|
|
getBreweryActivities,
|
|||
|
|
getBreweryBeerList,
|
|||
|
|
getBreweryGoodsList,
|
|||
|
|
favorBrewery,
|
|||
|
|
getBreweryFavorStatus,
|
|||
|
|
getBreweryCoinBalance
|
|||
|
|
} from '@/api/bar.js'
|
|||
|
|
import loginPopup from '@/components/loginPopup.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
loginPopup,
|
|||
|
|
// createPoster
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
breweryId: '',
|
|||
|
|
currentTab: 1,
|
|||
|
|
breweryInfo: {}, // 品牌方详情
|
|||
|
|
activityList: [],
|
|||
|
|
goodsList: [],
|
|||
|
|
beerList: [],
|
|||
|
|
loading: false,
|
|||
|
|
beerTotal: 0, // 在售酒款总数
|
|||
|
|
goodsTotal: 0, // 兑换商品总数
|
|||
|
|
activityTotal: 0, // 活动总数
|
|||
|
|
total: 0,
|
|||
|
|
formattedDate: '', // 当前年月日
|
|||
|
|
isFavor: false, // 是否收藏
|
|||
|
|
myCoin: 0, // 我的啤酒币
|
|||
|
|
queryForm: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 4,
|
|||
|
|
id: ''
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad({
|
|||
|
|
breweryId
|
|||
|
|
}) {
|
|||
|
|
this.breweryId = breweryId
|
|||
|
|
this.queryForm.id = breweryId
|
|||
|
|
this.getBreweryInfoFun()
|
|||
|
|
this.getBreweryActivitiesFun()
|
|||
|
|
this.getBreweryBeerListFun()
|
|||
|
|
this.getBreweryGoodsListFun()
|
|||
|
|
this.getDate()
|
|||
|
|
this.getBreweryFavorStatusFun()
|
|||
|
|
this.getBreweryCoinBalanceFun() // 啤酒币余额
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
changeTab(index) {
|
|||
|
|
this.currentTab = index
|
|||
|
|
this.queryForm.pageNum = 1
|
|||
|
|
if (index == 1) {
|
|||
|
|
this.activityList = []
|
|||
|
|
this.getBreweryActivitiesFun()
|
|||
|
|
|
|||
|
|
} else if (index == 2) {
|
|||
|
|
this.beerList = []
|
|||
|
|
this.getBreweryBeerListFun()
|
|||
|
|
} else if (index == 3) {
|
|||
|
|
this.goodsList = []
|
|||
|
|
this.getBreweryGoodsListFun()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 登录成功回调
|
|||
|
|
loginSuccess() {
|
|||
|
|
this.getBreweryFavorStatusFun()
|
|||
|
|
this.getBreweryCoinBalanceFun()
|
|||
|
|
},
|
|||
|
|
share() {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: this.breweryInfo.brandCover,
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 啤酒币余额
|
|||
|
|
getBreweryCoinBalanceFun() {
|
|||
|
|
if (!uni.getStorageSync('token')) {
|
|||
|
|
this.$refs.loginRef.open()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
getBreweryCoinBalance(this.breweryId).then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.myCoin = res.data.balance
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 收藏品牌方状态
|
|||
|
|
getBreweryFavorStatusFun() {
|
|||
|
|
if (!uni.getStorageSync('token')) {
|
|||
|
|
this.$refs.loginRef.open()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
getBreweryFavorStatus(this.breweryId).then(res => {
|
|||
|
|
if (res.data) {
|
|||
|
|
this.isFavor = true
|
|||
|
|
} else {
|
|||
|
|
this.isFavor = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取当前年月日
|
|||
|
|
getDate() {
|
|||
|
|
const currentDate = new Date();
|
|||
|
|
// 获取年份
|
|||
|
|
const year = currentDate.getFullYear();
|
|||
|
|
// 获取月份（注意：月份是从 0 开始计数的，所以要加 1）
|
|||
|
|
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
|
|||
|
|
// 获取日期
|
|||
|
|
const day = String(currentDate.getDate()).padStart(2, '0');
|
|||
|
|
// 格式化日期为 YYYY-MM-DD 格式
|
|||
|
|
this.formattedDate = `${year}-${month}-${day}`;
|
|||
|
|
},
|
|||
|
|
// 计算剩余天数
|
|||
|
|
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;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 品牌方详情
|
|||
|
|
getBreweryInfoFun() {
|
|||
|
|
getBreweryInfo(this.breweryId).then(res => {
|
|||
|
|
this.breweryInfo = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 累积活动
|
|||
|
|
getBreweryActivitiesFun() {
|
|||
|
|
this.loading = true
|
|||
|
|
getBreweryActivities(this.queryForm).then(res => {
|
|||
|
|
this.loading = false
|
|||
|
|
this.activityTotal = res.total
|
|||
|
|
if (res.rows && res.rows.length > 0) {
|
|||
|
|
let arr = res.rows.map(it => {
|
|||
|
|
it.remainingDays = this.getRemainingDays(it.endDate)
|
|||
|
|
return it
|
|||
|
|
})
|
|||
|
|
arr.forEach(it => {
|
|||
|
|
this.activityList.push(it)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeActPage() {
|
|||
|
|
if (this.activityList.length < this.activityTotal) {
|
|||
|
|
this.queryForm.pageNum++
|
|||
|
|
this.getBreweryActivitiesFun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 在售酒款
|
|||
|
|
getBreweryBeerListFun() {
|
|||
|
|
this.loading = true
|
|||
|
|
getBreweryBeerList(this.queryForm).then(res => {
|
|||
|
|
this.loading = false
|
|||
|
|
this.beerTotal = res.total
|
|||
|
|
if (res.rows && res.rows.length > 0) {
|
|||
|
|
res.rows.forEach(it => {
|
|||
|
|
this.beerList.push(it)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeBeerPage() {
|
|||
|
|
if (this.beerList.length < this.beerTotal) {
|
|||
|
|
this.queryForm.pageNum++
|
|||
|
|
this.getBreweryBeerListFun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 兑换商品
|
|||
|
|
getBreweryGoodsListFun() {
|
|||
|
|
this.loading = true
|
|||
|
|
getBreweryGoodsList(this.queryForm).then(res => {
|
|||
|
|
this.loading = false
|
|||
|
|
this.goodsTotal = res.total
|
|||
|
|
if (res.rows && res.rows.length > 0) {
|
|||
|
|
res.rows.forEach(it => {
|
|||
|
|
this.goodsList.push(it)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeGoodsPage() {
|
|||
|
|
if (this.goodsList.length < this.goodsTotal) {
|
|||
|
|
this.queryForm.pageNum++
|
|||
|
|
this.getBreweryGoodsListFun()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 收藏品牌方
|
|||
|
|
favorBreweryFun(status) {
|
|||
|
|
if (!uni.getStorageSync('token')) {
|
|||
|
|
this.$refs.loginRef.open()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let data = {
|
|||
|
|
breweryId: this.breweryId,
|
|||
|
|
status
|
|||
|
|
}
|
|||
|
|
favorBrewery(data).then(res => {
|
|||
|
|
if (status == 1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '收藏成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '取消收藏',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
this.getBreweryFavorStatusFun()
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 跳转详情
|
|||
|
|
toDetail(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pagesCoin/goodsDetail?id=" + item.id + "&breweryId=" + item.breweryId
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 跳转酒评页
|
|||
|
|
toReview(it) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/index/review?beerId=" + it.id
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.page-content {
|
|||
|
|
.banner {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 724rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.brand-header {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
margin-top: -150rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
padding: 22rpx 26rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
|
|||
|
|
.top {
|
|||
|
|
padding: 0 72rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.def-box {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
width: 146rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 13rpx;
|
|||
|
|
background-color: #F2F2F2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
background: #39E5B1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 累积活动
|
|||
|
|
.activity-item {
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: #FDFDFD;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #F2F2F2;
|
|||
|
|
width: 702rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
padding: 24rpx 20rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #EFEDE9;
|
|||
|
|
width: 180rpx;
|
|||
|
|
margin-top: -10rpx;
|
|||
|
|
margin-bottom: -10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 30rpx;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-img {
|
|||
|
|
width: 500rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
height: 144rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.beer-box {
|
|||
|
|
width: 100rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: inline-block;
|
|||
|
|
|
|||
|
|
// &:nth-child(1) {
|
|||
|
|
// margin-left: 32rpx;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.cover {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 144rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zeng {
|
|||
|
|
font-family: Source Han Sans;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: normal;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
padding: 8rpx 12rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background: #FEE034;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 在售酒款
|
|||
|
|
.scroll-container {
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
.beer-box {
|
|||
|
|
width: 208rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
margin-left: 12rpx;
|
|||
|
|
margin-bottom: 36rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
// display: inline-block;
|
|||
|
|
min-height: 490rpx;
|
|||
|
|
// &:nth-child(1) {
|
|||
|
|
// margin-left: 32rpx;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 兑换商品
|
|||
|
|
.goods-container {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding-bottom: calc(60rpx + constant(safe-area-inset-bottom));
|
|||
|
|
padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
|
|||
|
|
|
|||
|
|
.goods-item {
|
|||
|
|
width: 334rpx;
|
|||
|
|
height: 605rpx;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.59);
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid rgba(242, 242, 242, 0.702);
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
margin-bottom: 56rpx;
|
|||
|
|
|
|||
|
|
&:nth-child(2n) {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cover-box {
|
|||
|
|
width: 334rpx;
|
|||
|
|
height: 440rpx;
|
|||
|
|
border-radius: 30rpx 30rpx 0 0;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.cover {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 30rpx 30rpx 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.like {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 16rpx;
|
|||
|
|
bottom: 18rpx;
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
padding: 16rpx 14rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|