refactor: 清理未使用的组件和资源文件 1. 删除未使用的组件文件 2. 删除未使用的静态资源 3. 优化页面结构
This commit is contained in:
davy
parent
14bc63d2cf
commit
a4d2f1e2ac
BIN
components/.DS_Store
vendored
BIN
components/.DS_Store
vendored
Binary file not shown.
@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<view
|
||||
class="custom-nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', background: bgcolor }"
|
||||
>
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
|
||||
<!-- 导航栏内容 -->
|
||||
<view class="nav-bar-content" :style="{ height: navBarContentHeight + 'px' }">
|
||||
<!-- 左侧返回按钮 -->
|
||||
<view class="nav-bar-left" v-if="showBackButton">
|
||||
<view class="back-button" @click="goBack">
|
||||
<uni-icons type="back" size="24" color="#000"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 中间标题 -->
|
||||
<view class="nav-bar-center">
|
||||
<text class="nav-titles">{{ title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧插槽 -->
|
||||
<view class="nav-bar-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomNavBar',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
showBackButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
navBarHeight: 0, // 导航栏总高度（状态栏 + 导航栏内容）
|
||||
navBarContentHeight: 44 // 导航栏内容高度（默认 44px）
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSystemInfo();
|
||||
},
|
||||
methods: {
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.statusBarHeight = res.statusBarHeight; // 获取状态栏高度
|
||||
this.navBarHeight = this.statusBarHeight + this.navBarContentHeight; // 计算导航栏总高度
|
||||
// 将 navBarHeight 传递给父组件
|
||||
this.$emit('updateHeight', this.navBarHeight);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-bar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nav-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nav-bar-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-titles {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.nav-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<view style="padding:32rpx 24rpx;" :style="{'background': bg}">
|
||||
<view class="text-bold" style="font-size: 40rpx;color: #1A1A1A;">{{title}}</view>
|
||||
<image src="/static/home-arrow-down.png" style="width: 80rpx;height: 70rpx;"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "commonTitle",
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: "#F6F6F6"
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,126 +0,0 @@
|
||||
<template>
|
||||
<view
|
||||
class="custom-nav-bar"
|
||||
:style="{ height: navBarHeight + 'px', background: bgcolor }"
|
||||
>
|
||||
<!-- 状态栏占位 -->
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
|
||||
<!-- 导航栏内容 -->
|
||||
<view class="nav-bar-content" :style="{ height: navBarContentHeight + 'px' }">
|
||||
<!-- 左侧返回按钮 -->
|
||||
<view class="nav-bar-left" v-if="showBackButton">
|
||||
<view class="back-button" @click="goBack">
|
||||
<uni-icons type="back" size="24" color="#000"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 中间标题 -->
|
||||
<view class="nav-bar-center">
|
||||
<text class="nav-titles">{{ title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧插槽 -->
|
||||
<view class="nav-bar-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomNavBar',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
showBackButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
bgcolor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
navBarHeight: 0, // 导航栏总高度（状态栏 + 导航栏内容）
|
||||
navBarContentHeight: 44 // 导航栏内容高度（默认 44px）
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSystemInfo();
|
||||
},
|
||||
methods: {
|
||||
// 获取系统信息
|
||||
getSystemInfo() {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
this.statusBarHeight = res.statusBarHeight; // 获取状态栏高度
|
||||
this.navBarHeight = this.statusBarHeight + this.navBarContentHeight; // 计算导航栏总高度
|
||||
// 将 navBarHeight 传递给父组件
|
||||
this.$emit('updateHeight', this.navBarHeight);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-bar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nav-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.nav-bar-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-titles {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.nav-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,373 +0,0 @@
|
||||
<template>
|
||||
<view style="background: #FFF;border-radius: 32rpx 32rpx 0 0;margin-top: 25rpx;">
|
||||
<view class="selects-page" style="">
|
||||
<view style="position: relative;" @click="brandClick()" :class="brandFlag?'selectedTxt':''">品牌
|
||||
<view class="" style="position: absolute;top:-20rpx;right: -8rpx;" v-if="brandFlag && selectedFirstColumnIndex ">
|
||||
<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="beerClick()" style="margin-left: 100rpx; position: relative;" :class="beerFlag?'selectedTxt':''">啤酒风格
|
||||
<view class="" style="position: absolute;top:-20rpx;right: -8rpx;" v-if="beerFlag && selectedThreeColumnIndexes.length>0 ">
|
||||
<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='productNav' v-if="brandFlag">
|
||||
<!-- 左侧导航 -->
|
||||
<view class='left' >
|
||||
<view style="position: relative;" :class="posi == item.id ? 'selected' : 'normal'" @tap="switchNav(item)" v-for="(item, index) in dataList" :key="index">
|
||||
{{ item.name }}
|
||||
<view class="" style="position: absolute;top:-20rpx;right: 8rpx;" v-if="(posi == item.id ) && selectedFirstColumnIndex ">
|
||||
<image src="@/static/bg/yuandian.png" style="width: 12rpx;height: 12rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右侧内容 -->
|
||||
<view class='right'>
|
||||
<view class="content">
|
||||
<view class="divider"></view>
|
||||
<!-- 第一列 -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="scroll-1"
|
||||
@scroll="scrollLeft"
|
||||
|
||||
:scroll-top="scrollTopLeft"
|
||||
>
|
||||
<!-- 添加“全部”按钮 -->
|
||||
<view
|
||||
class="wh-1"
|
||||
style="margin:0 auto 26rpx auto;"
|
||||
@tap="selectFirstColumnAll"
|
||||
>
|
||||
<view class="right-one" :class="isFirstColumnAllSelected ? 'selecteds' : ''">全部</view>
|
||||
</view>
|
||||
<view
|
||||
:id="item.id"
|
||||
v-for="(item, index) in selectedData"
|
||||
:key="index"
|
||||
@tap="selectFirstColumn(item)"
|
||||
class="wh-1" style="margin:0 auto 26rpx auto;"
|
||||
>
|
||||
<view class="right-one" :class="selectedFirstColumnIndex === item.id ? 'selecteds' : ''">{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 第二列 -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="scroll"
|
||||
@scroll="scrollRight"
|
||||
:scroll-into-view="posi"
|
||||
:scroll-top="scrollTopRight"
|
||||
>
|
||||
<!-- 添加“全部”按钮 -->
|
||||
<view
|
||||
class=""
|
||||
style="margin: 0 24rpx 24rpx 24rpx;"
|
||||
@tap="selectSecondColumnAll"
|
||||
>
|
||||
<view class="right-one" style="padding: 20rpx 0;" :class="isSecondColumnAllSelected ? 'selecteds' : ''">全部</view>
|
||||
</view>
|
||||
<view
|
||||
:id="item.id"
|
||||
v-for="(item, index) in selectedSecondColumnData"
|
||||
:key="item.ids"
|
||||
@tap="toggleSecondColumnSelection(item)"
|
||||
class=""
|
||||
>
|
||||
<view class="right-one"
|
||||
:class="selectedSecondColumnIndexes.includes(item.ids) ? 'selecteds' : ''"
|
||||
style="padding:20rpx 0;margin: 0 24rpx 24rpx 24rpx;">{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="" v-if="beerFlag" style="padding: 0 44rpx 0 54rpx;">
|
||||
<!-- 第一列 -->
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="scroll"
|
||||
@scroll="scrollLeft"
|
||||
:scroll-into-view="posi"
|
||||
>
|
||||
<!-- 添加“全部”按钮 -->
|
||||
<view
|
||||
style="margin:0 auto 26rpx auto;"
|
||||
@tap="selectBeerAll"
|
||||
>
|
||||
<view class="right-one" style="padding:20rpx 0;" :class="selectBeerSelected ? 'selecteds' : ''">全部</view>
|
||||
</view>
|
||||
<view
|
||||
:id="item.id"
|
||||
v-for="(item, index) in beerList"
|
||||
:key="index"
|
||||
@tap="toggleThreeColumnSelection(item)"
|
||||
class=""
|
||||
>
|
||||
<view class="right-one" style="padding:20rpx 0;margin: 0 0 24rpx 0;" :class="selectedThreeColumnIndexes.includes(item.id) ? 'selecteds' : ''">{{ item.name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="flex align-center" style="width:100%;margin:0 22rpx; font-size: 28rpx;padding-bottom: 20rpx;">
|
||||
<view class="btns btn1" style="">重置</view>
|
||||
<view class="btns btn2" style="color:#FFF;">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
posi: '1', // 当前选中的左侧导航项
|
||||
scrollTopLeft: 0, // 左侧滚动位置
|
||||
scrollTopRight: 0, // 右侧滚动位置
|
||||
data: [], // 模拟数据
|
||||
dataList: [{name:'国家/地区',id:'1'},{name:'我的关注',id:'2'}], // 循环数据
|
||||
dataEleHeight: [], // 获取data数组中各个元素的高度
|
||||
topList: [], // 计算得到各个元素与顶部的距离
|
||||
scrollHeight: 500, // 滚动区域的高度
|
||||
flag: true, // 判断左侧是否做高亮显示判断
|
||||
selectedFirstColumnIndex: '', // 当前选中的第一列索引
|
||||
isFirstColumnAllSelected: true, // 第一列“全部”按钮的选中状态
|
||||
selectedData: [
|
||||
{name:'浙江',id:'1-1',parentId: '1'},
|
||||
{name:'呼市',id:'1-2',parentId: '1'},
|
||||
{name:'北京',id:'1-3',parentId: '1'},
|
||||
{name:'天津',id:'1-4',parentId: '1'},
|
||||
{name:'上海',id:'1-5',parentId: '1'},
|
||||
], // 根据选中的左侧按钮更新右侧第一列显示的数据
|
||||
selectedSecondColumnData: [
|
||||
{name:'风格1',parentId:'1-1',ids: '02'},
|
||||
{name:'风格2',parentId:'1-1',ids: '03'},
|
||||
{name:'风格3',parentId:'1-1',ids: '04'},
|
||||
{name:'风格4',parentId:'1-1',ids: '05'},
|
||||
{name:'风格5',parentId:'1-1',ids: '06'},
|
||||
], // 根据选中的第一列数据更新右侧第二列显示的数据
|
||||
selectedSecondColumnIndexes: [], // 右侧第二列选中的索引数组
|
||||
isSecondColumnAllSelected: true, // 第二列“全部”按钮的选中状态
|
||||
beerFlag:false,
|
||||
brandFlag: true,
|
||||
beerList:[
|
||||
{name:'西打酒1',id: '01'},
|
||||
{name:'西打酒2',id: '02'},
|
||||
{name:'西打酒3',id: '03'},
|
||||
{name:'西打酒4',id: '04'},
|
||||
{name:'西打酒5',id: '05'},
|
||||
],
|
||||
selectBeerSelected: true,
|
||||
selectedThreeColumnIndexes: []//啤酒风格选中的索引数组，
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
beerClick() {
|
||||
this.beerFlag = true
|
||||
this.brandFlag = false
|
||||
},
|
||||
brandClick(){
|
||||
this.brandFlag = true
|
||||
this.beerFlag = false
|
||||
|
||||
},
|
||||
// 左侧导航切换
|
||||
switchNav(item, index) {
|
||||
if (this.posi !== item.id) {
|
||||
this.posi = item.id;
|
||||
this.selectedFirstColumnIndex = null; // 清空第一列选中状态
|
||||
this.isFirstColumnAllSelected = false; // 清空第一列“全部”按钮选中状态
|
||||
this.selectedData = []; // 更新右侧第一列显示的数据
|
||||
this.selectedSecondColumnData = []; // 更新右侧第二列显示的数据
|
||||
this.selectedSecondColumnIndexes = []; // 清空右侧第二列选中状态
|
||||
this.isSecondColumnAllSelected = false; // 清空第二列“全部”按钮选中状态
|
||||
} else {
|
||||
// 重复点击一样要定位到最开头的位置
|
||||
this.scrollTopLeft = this.topList[index];
|
||||
this.scrollTopRight = this.topList[index];
|
||||
}
|
||||
},
|
||||
|
||||
// 选择第一列
|
||||
selectFirstColumn(row) {
|
||||
this.selectedFirstColumnIndex = row.id;
|
||||
this.isFirstColumnAllSelected = false; // 取消“全部”按钮的选中状态
|
||||
// 清空右侧第二列选中状态
|
||||
this.selectedSecondColumnIndexes = [];
|
||||
this.isSecondColumnAllSelected = false; // 取消第二列“全部”按钮的选中状态
|
||||
},
|
||||
|
||||
// 选择第一列“全部”按钮
|
||||
selectFirstColumnAll() {
|
||||
this.isFirstColumnAllSelected = !this.isFirstColumnAllSelected;
|
||||
if (this.isFirstColumnAllSelected) {
|
||||
this.selectedFirstColumnIndex = null; // 清空第一列选中状态
|
||||
this.selectedSecondColumnIndexes = [];
|
||||
}
|
||||
},
|
||||
|
||||
// 切换右侧第二列选中状态
|
||||
toggleSecondColumnSelection(item) {
|
||||
if (this.selectedSecondColumnIndexes.includes(item.ids)) {
|
||||
this.selectedSecondColumnIndexes = this.selectedSecondColumnIndexes.filter(i => i !== item.ids);
|
||||
} else {
|
||||
this.selectedSecondColumnIndexes.push(item.ids);
|
||||
}
|
||||
this.isSecondColumnAllSelected = false; // 取消“全部”按钮的选中状态
|
||||
},
|
||||
|
||||
// 选择第二列“全部”按钮
|
||||
selectSecondColumnAll() {
|
||||
this.isSecondColumnAllSelected = !this.isSecondColumnAllSelected;
|
||||
if (this.isSecondColumnAllSelected) {
|
||||
this.selectedSecondColumnIndexes = []; // 清空第二列选中状态
|
||||
}
|
||||
},
|
||||
//选择啤酒风格全部按钮
|
||||
selectBeerAll() {
|
||||
this.selectBeerSelected = !this.selectBeerSelected
|
||||
|
||||
if (this.selectedThreeColumnIndexes) {
|
||||
this.selectedThreeColumnIndexes = []; // 清空第二列选中状态
|
||||
}
|
||||
},
|
||||
toggleThreeColumnSelection(item) {
|
||||
if (this.selectedThreeColumnIndexes.includes(item.id)) {
|
||||
this.selectedThreeColumnIndexes = this.selectedThreeColumnIndexes.filter(i => i !== item.id);
|
||||
} else {
|
||||
this.selectedThreeColumnIndexes.push(item.id);
|
||||
}
|
||||
this.selectBeerSelected = false; // 取消“全部”按钮的选中状态
|
||||
},
|
||||
// 左侧滚动事件（取消滚动功能）
|
||||
scrollLeft(e) {
|
||||
// 不做任何处理，取消滚动功能
|
||||
},
|
||||
|
||||
// 右侧滚动事件
|
||||
scrollRight(e) {
|
||||
// let index = this.posi.substring(2);
|
||||
// if (this.flag) {
|
||||
// for (let i in this.topList) {
|
||||
// if (
|
||||
// i < this.topList.length - 1 &&
|
||||
// this.topList[i] <= e.detail.scrollTop &&
|
||||
// e.detail.scrollTop < this.topList[parseInt(i) + 1]
|
||||
// ) {
|
||||
// this.posi = this.dataList[i].id;
|
||||
// break;
|
||||
// }
|
||||
// this.posi = this.dataList[i].id;
|
||||
// }
|
||||
// }
|
||||
// this.flag = true;
|
||||
// this.scrollTopRight = e.detail.scrollTop;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.selects-page{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding:0rpx 0 56rpx 0;
|
||||
background: #FFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #030303;
|
||||
}
|
||||
.productNav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-family: Roboto;
|
||||
background-color: #fff;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.left {
|
||||
width: 25%;
|
||||
font-size: 30rpx;
|
||||
/* background-color: #f4f4f4; */
|
||||
}
|
||||
.left view {
|
||||
text-align: center;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.selected {
|
||||
background-color: #fff;
|
||||
/* border-left: 2px solid #e54847; */
|
||||
font-weight: bold;
|
||||
color: #4E63E0;
|
||||
}
|
||||
.normal {
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
}
|
||||
.right {
|
||||
width: 75%;
|
||||
margin: 0;
|
||||
}
|
||||
.right-one{
|
||||
border: 1px solid #606060;
|
||||
text-align: center;
|
||||
color: #606060;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.wh-1{
|
||||
width: 130rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.scroll {
|
||||
height: 424rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.scroll-1 {
|
||||
height: 424rpx;
|
||||
width: 174rpx;
|
||||
text-align: center;
|
||||
margin: 0 22rpx;
|
||||
}
|
||||
.title {
|
||||
background: #FFFFFF;
|
||||
color: white;
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.column {
|
||||
flex: 1;
|
||||
}
|
||||
.divider {
|
||||
width: 1px;
|
||||
background-color: #ccc;
|
||||
/* margin: 0 10rpx; */
|
||||
}
|
||||
.selecteds{
|
||||
border: 1px solid #19367A;
|
||||
color: #19367A;
|
||||
}
|
||||
.btns{
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
.btn1 {
|
||||
width: 28%;
|
||||
}
|
||||
.btn2 {
|
||||
border-radius: 8px;
|
||||
background: #4E63E0;
|
||||
width: 66%;
|
||||
}
|
||||
.selectedTxt{
|
||||
color: #19367A;
|
||||
}
|
||||
</style>
|
||||
@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<view class="popup-container">
|
||||
<view class="popup-header">
|
||||
<text class="title">筛选条件</text>
|
||||
<text class="close" @click="closePopup">关闭</text>
|
||||
</view>
|
||||
<view class="popup-content">
|
||||
<view class="row">
|
||||
<picker mode="selector" :range="brands" @change="onBrandChange">
|
||||
<view class="item">{{ selectedBrand || '选择品牌' }}</view>
|
||||
</picker>
|
||||
<picker mode="selector" :range="styles" @change="onStyleChange">
|
||||
<view class="item">{{ selectedStyle || '选择风格' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="column">
|
||||
<checkbox-group @change="onAreaChange">
|
||||
<label class="checkbox-item" v-for="(area, index) in areas" :key="index">
|
||||
<checkbox :value="area">{{ area }}</checkbox>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
brands: ['品牌A', '品牌B', '品牌C'], // 品牌列表
|
||||
styles: ['风格1', '风格2', '风格3'], // 风格列表
|
||||
areas: ['区域1', '区域2', '区域3'], // 区域列表
|
||||
selectedBrand: '', // 选中的品牌
|
||||
selectedStyle: '', // 选中的风格
|
||||
selectedAreas: [] // 选中的区域列表
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onBrandChange(e) {
|
||||
this.selectedBrand = this.brands[e.detail.value];
|
||||
},
|
||||
onStyleChange(e) {
|
||||
this.selectedStyle = this.styles[e.detail.value];
|
||||
},
|
||||
onAreaChange(e) {
|
||||
this.selectedAreas = e.detail.value;
|
||||
},
|
||||
closePopup() {
|
||||
this.$emit('close'); // 关闭弹出层，并触发父组件的方法处理筛选结果
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.popup-container {
|
||||
/* 样式 */
|
||||
}
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row, .column {
|
||||
display: flex;
|
||||
}
|
||||
.row {
|
||||
flex-direction: row; /* 横向排列 */
|
||||
}
|
||||
.column {
|
||||
flex-direction: column; /* 竖向排列 */
|
||||
}
|
||||
.item {
|
||||
margin: 10px; /* 间距 */
|
||||
}
|
||||
</style>
|
||||
12
pages.json
12
pages.json
@ -100,14 +100,6 @@
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/index/home",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path" : "pages/index/review",
|
||||
"style" :
|
||||
@ -291,7 +283,9 @@
|
||||
"path" : "coinCollect",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "品牌啤酒币"
|
||||
"navigationBarTitleText" : "品牌啤酒币",
|
||||
"navigationBarBackgroundColor": "#19367A",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -49,12 +49,10 @@
|
||||
import {
|
||||
listFeaturePage
|
||||
} from '@/api/platform.js'
|
||||
import commonTitle from '@/components/commonTitle.vue'
|
||||
import rowBeer from '@/components/rowBeer.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
commonTitle,
|
||||
rowBeer,
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -1,533 +0,0 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view :style="{'padding-top': statusBaeHeight + 58 + 'px'}">
|
||||
<view class="search-box">
|
||||
<input type="text" placeholder="搜索酒款/酒厂" @focus="toSearch">
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showJoinImg && bannerJoin" class="join-box" @click="toJoin">
|
||||
<!-- <view class="text-center" >加入我们，一起探索酒吧运营增长新模式🎈</view>
|
||||
<view class="flex justify-between align-center" style="margin-bottom:50rpx">
|
||||
<text>实时酒款评分</text>
|
||||
<text>无缝对接品牌活动</text>
|
||||
<text>酒币好礼兑换</text>
|
||||
</view>
|
||||
<view class="bg-zd btn" @click="toJoin">立即入驻</view> -->
|
||||
<image :src="bannerJoin.bannerUrl" class="img"></image>
|
||||
</view>
|
||||
<!-- 轮播 -->
|
||||
<swiper v-if="beerList.length > 0" class="swiper" circular :autoplay="true" :indicator-dots="true">
|
||||
<swiper-item v-for="(item,index) in beerList" :key="index">
|
||||
<view class="goods-box">
|
||||
<image :src="item.cover" class="cover"></image>
|
||||
<view class="flex-1">
|
||||
<view class="flex justify-between align-center" style="margin-bottom: 28rpx;">
|
||||
<view class="flex align-center">
|
||||
<text
|
||||
style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;">{{ item.beerName }}</text>
|
||||
<image src="@/static/verify-mark.png" style="width: 48rpx;height: 48rpx;">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<!-- <text class="cuIcon-like" style="color: #979797;font-size: 48rpx;"></text> -->
|
||||
</view>
|
||||
<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">品牌名称</view>
|
||||
<view style="margin-bottom: 38rpx;font-size: 30rpx;color: #5F5F63;">{{ item.launchDate }}</view>
|
||||
<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
|
||||
<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
|
||||
4.9
|
||||
</text>
|
||||
<text style="color: #5F5F63;margin-left: 16rpx;">20 条评论</text>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
|
||||
<!-- 快捷导航 -->
|
||||
<view class="flex justify-between bg-white" style="margin-bottom:32rpx;padding: 20rpx 36rpx">
|
||||
<view class="nav-item" @click="toGo(1)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-1.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">新酒上市</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="toGo(2)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-2.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">生成酒单</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="toGo(3)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-3.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">酒币换购</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="toGo(4)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-4.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">关注厂牌</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="flex quickNav-box">
|
||||
<image class="left" :src="quickNavList[0].bannerUrl"></image>
|
||||
<view style="width: 326rpx;">
|
||||
<image class="right" :src="quickNavList[1].bannerUrl"></image>
|
||||
<image class="right" :src="quickNavList[2].bannerUrl"></image>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="padding-lr flex justify-start">
|
||||
<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">为您推荐</view>
|
||||
<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">我的关注</view>
|
||||
<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">新酒上枪</view>
|
||||
<view class="text-sm tag" :class="{'active-tag': curTag == 3}" @click="changeTag(3)">风格分类</view>
|
||||
</view> -->
|
||||
<!-- <view style="padding:32rpx 24rpx;background: #F6F6F6;">
|
||||
<view class="text-bold" style="font-size: 40rpx;color: #1A1A1A;">热门活动招募</view>
|
||||
<image src="/static/home-arrow-down.png" style="width: 80rpx;height: 70rpx;"></image>
|
||||
</view> -->
|
||||
<commonTitle title="热门活动招募"></commonTitle>
|
||||
<!-- 专辑列表 -->
|
||||
<template v-for="(item,i) in featurePageList">
|
||||
<view class="flex justify-between align-center title-box">
|
||||
<view class="flex-1 flex flex-col">
|
||||
<text class="title">{{ item.pageName }}</text>
|
||||
<text class="sub">{{ item.subTitle}}</text>
|
||||
</view>
|
||||
<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<scroll-view scroll-x="true" class="scroll-container">
|
||||
<view class="beer-box" v-for="(it, index) in item.beers" :key="index" @click="toReview(it)">
|
||||
<image :src="it.cover" class="cover"></image>
|
||||
<view class="title">{{ it.beerName}}</view>
|
||||
<view class="desc">{{ it.beerStyles }}</view>
|
||||
<view class="desc">{{ 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>
|
||||
</template>
|
||||
<view v-if="showJoinImg" class="weixin-box">
|
||||
<text>入驻助理在线服务，1对1咨询入驻权益和使用指南！</text>
|
||||
<view class="bg-zd btn">立即添加</view>
|
||||
</view>
|
||||
<!-- 开屏广告 -->
|
||||
<uni-popup ref="ADRef" type="center" :is-mask-click="false">
|
||||
<view class="flex flex-col align-center justify-center" style="width: 630rpx;height: 61vh;">
|
||||
<swiper class="swiper" style="width: 630rpx;height: 58vh;" circular :autoplay="true"
|
||||
:indicator-dots="true">
|
||||
<swiper-item v-for="(item,index) in ADList" :key="index">
|
||||
<image :src="item.bannerUrl" style="width: 630rpx;height: 50vh;border-radius: 30rpx;"
|
||||
@click="handleAD(item)">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<text class="cuIcon-roundclose text-white" style="font-size: 68rpx !important;" @click="closeAd"></text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBeerList,
|
||||
getBannerList
|
||||
} from '@/api/bar.js'
|
||||
import {
|
||||
listFeaturePage
|
||||
} from '@/api/platform.js'
|
||||
import commonTitle from '@/components/commonTitle.vue'
|
||||
export default {
|
||||
components: {
|
||||
commonTitle
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBaeHeight: 0,
|
||||
curTag: 0,
|
||||
beerList: [],
|
||||
ADList: [], // 广告弹窗
|
||||
bannerJoin: null, // 入驻banner
|
||||
showJoinImg: false, // 是否显示入驻图片
|
||||
userInfo: null,
|
||||
featurePageList: [], // 专辑页列表
|
||||
quickNavList: [], // 快捷导航
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#000000',
|
||||
backgroundColor: '#FFFFFF',
|
||||
animation: {
|
||||
duration: 400,
|
||||
timingFunc: 'easeIn'
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
if (!this.userInfo || this.userInfo.userType == '09') { // 没登录或者没入驻
|
||||
this.showJoinImg = true
|
||||
}
|
||||
// this.getBeerListFun()
|
||||
this.getBannerListFun() // 广告轮播图
|
||||
this.getFeaturePageListFun() // 专辑页列表
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 搜索
|
||||
toSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/searchBeer'
|
||||
})
|
||||
},
|
||||
changeTag(index) {
|
||||
this.curTag = index
|
||||
},
|
||||
getBeerListFun() {
|
||||
getBeerList().then(res => {
|
||||
this.beerList = res.rows
|
||||
})
|
||||
},
|
||||
// 查询广告弹窗 banner列表
|
||||
getBannerListFun() {
|
||||
this.ADList = []
|
||||
this.bannerJoin = null
|
||||
getBannerList().then(res => {
|
||||
res.data.forEach(it => {
|
||||
if (it.bannerType == 'homeAD') { // 开屏广告
|
||||
this.ADList.push(it)
|
||||
} else if (it.bannerType == 'homeJoin') { // 入驻
|
||||
this.bannerJoin = it
|
||||
} else if (it.bannerType == 'quickNav') { // 快捷导航
|
||||
this.quickNavList.push(it)
|
||||
}
|
||||
})
|
||||
if (this.quickNavList.length > 0) {
|
||||
// 按照showOrder排序
|
||||
this.quickNavList.sort((a, b) => {
|
||||
return a.showOrder - b.showOrder
|
||||
})
|
||||
}
|
||||
let showHomeAD = uni.getStorageSync('showHomeAD')
|
||||
if (!showHomeAD) {
|
||||
this.$refs.ADRef.open()
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 关闭广告
|
||||
closeAd() {
|
||||
uni.setStorageSync('showHomeAD', true)
|
||||
this.$refs.ADRef.close()
|
||||
},
|
||||
handleAD(item) {
|
||||
this.closeAd()
|
||||
if (item.bannerLink) {
|
||||
uni.navigateTo({
|
||||
url: item.bannerLink,
|
||||
})
|
||||
}
|
||||
},
|
||||
// 立即入驻
|
||||
toJoin() {
|
||||
if (!this.bannerJoin) return
|
||||
uni.navigateTo({
|
||||
url: this.bannerJoin.bannerLink,
|
||||
})
|
||||
},
|
||||
// 跳转专辑页
|
||||
toFeaturePage(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/featurePage?id=${item.id}`
|
||||
})
|
||||
},
|
||||
// 查询专辑页列表
|
||||
getFeaturePageListFun() {
|
||||
listFeaturePage().then(res => {
|
||||
this.featurePageList = res.data
|
||||
})
|
||||
},
|
||||
// 跳转酒评页
|
||||
toReview(it) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/review?beerId=" + it.id
|
||||
})
|
||||
},
|
||||
toGo(key) {
|
||||
switch (key) {
|
||||
case 1: // 新酒上市
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/index/review?beerId=" + it.id
|
||||
// })
|
||||
break;
|
||||
case 2: // 生成酒单
|
||||
uni.navigateTo({
|
||||
url: "/pagesActivity/winelist?beerId=2"
|
||||
})
|
||||
break;
|
||||
case 3: //酒币换购
|
||||
if (!this.userInfo) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先登录',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/chooseLogin'
|
||||
})
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pagesCoin/beerCoin"
|
||||
})
|
||||
break;
|
||||
case 4: // 关注酒厂
|
||||
// uni.navigateTo({
|
||||
// url: "/pages/index/review?beerId=" + it.id
|
||||
// })
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/.uni-popup {
|
||||
z-index: 1025;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: #FDFDFD;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.search-box {
|
||||
border-radius: 20rpx;
|
||||
width: 466rpx;
|
||||
height: 60rpx;
|
||||
background-color: rgba(196, 196, 196, 0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
margin-left: 32rpx;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.join-box {
|
||||
margin: 20rpx 32rpx;
|
||||
border-radius: 30rpx;
|
||||
box-sizing: border-box;
|
||||
border: 1.5px solid #F2F2F2;
|
||||
padding: 34rpx 26rpx;
|
||||
height: 450rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.btn {
|
||||
width: 582rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 24rpx;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin-bottom: 20rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
// 快捷导航
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
color: #0B0E26;
|
||||
|
||||
.img-box {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quickNav-box {
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
padding: 32rpx 24rpx;
|
||||
height: 490rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
height: 416rpx;
|
||||
width: 352rpx;
|
||||
// width: 47%;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 196rpx;
|
||||
// width: 326rpx;
|
||||
width: 100%;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #F2F2F2;
|
||||
box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
padding: 16rpx 32rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
|
||||
.cover {
|
||||
width: 208rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: transparent;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
border: 1px solid #9D9D9D;
|
||||
;
|
||||
margin-right: 24rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.active-tag {
|
||||
background-color: #FEE034;
|
||||
font-weight: bold;
|
||||
border: 1px solid #FEE034;
|
||||
|
||||
}
|
||||
|
||||
.title-box {
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1E2019;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 20rpx;
|
||||
color: #9D9D9D;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
height: 490rpx;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.beer-box {
|
||||
width: 208rpx;
|
||||
background: #FFFFFF;
|
||||
margin-right: 28rpx;
|
||||
margin-bottom: 36rpx;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weixin-box {
|
||||
position: fixed;
|
||||
// bottom: 130rpx;
|
||||
bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
||||
background-color: #71F4B4;
|
||||
border-radius: 30rpx 30rpx 0px 0px;
|
||||
height: 80rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 40rpx 26rpx;
|
||||
font-size: 20rpx;
|
||||
color: #3D3D3D;
|
||||
|
||||
.btn {
|
||||
border-radius: 30rpx;
|
||||
background: #FEE034;
|
||||
width: 132rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
color: #3D3D3D;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -114,13 +114,11 @@
|
||||
import {
|
||||
listFeaturePage
|
||||
} from '@/api/platform.js'
|
||||
import commonTitle from '@/components/commonTitle.vue'
|
||||
import loginPopup from '@/components/loginPopup.vue';
|
||||
import rowBeer from '@/components/rowBeer.vue'
|
||||
import ActivityItem from '@/components/ActivityItem.vue'
|
||||
export default {
|
||||
components: {
|
||||
commonTitle,
|
||||
loginPopup,
|
||||
rowBeer,
|
||||
ActivityItem
|
||||
@ -199,122 +197,78 @@
|
||||
methods: {
|
||||
loginSuccess() {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没认证门店
|
||||
console.log('登录')
|
||||
this.showJoinImg = true
|
||||
} else {
|
||||
this.showJoinImg = false
|
||||
}
|
||||
this.showJoinImg = !this.userInfo || this.userInfo.userType === '09'
|
||||
this.resetAndLoadData()
|
||||
},
|
||||
// 重置并加载数据
|
||||
// 重置数据并重新加载
|
||||
resetAndLoadData() {
|
||||
this.pageNum = 1
|
||||
this.finished = false
|
||||
this.featurePageList = []
|
||||
this.finished = false
|
||||
this.getActivityList()
|
||||
},
|
||||
// 获取活动列表
|
||||
async getActivityList() {
|
||||
if (this.loading || this.finished) return
|
||||
|
||||
this.loading = true
|
||||
try {
|
||||
this.loading = true
|
||||
const res = await getActivities({
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
pageSize: this.pageSize,
|
||||
keyword: this.keyword
|
||||
})
|
||||
|
||||
if (res.code === 200) {
|
||||
const { rows, total } = res
|
||||
|
||||
// 处理数据，计算剩余天数和状态
|
||||
const processedRows = this.processActivityData(rows)
|
||||
|
||||
// 更新列表数据
|
||||
if (res.rows && res.rows.length > 0) {
|
||||
if (this.pageNum === 1) {
|
||||
this.featurePageList = processedRows
|
||||
this.featurePageList = res.rows
|
||||
} else {
|
||||
this.featurePageList = [...this.featurePageList, ...processedRows]
|
||||
this.featurePageList = [...this.featurePageList, ...res.rows]
|
||||
}
|
||||
|
||||
this.total = total
|
||||
this.finished = this.featurePageList.length >= total
|
||||
this.total = res.total
|
||||
this.pageNum++
|
||||
|
||||
// 判断是否加载完成
|
||||
if (this.featurePageList.length >= this.total) {
|
||||
this.finished = true
|
||||
}
|
||||
} else {
|
||||
this.finished = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取活动列表失败:', error)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
// 处理活动数据
|
||||
processActivityData(rows) {
|
||||
return rows.map(it => {
|
||||
// 计算剩余天数
|
||||
const targetDate = new Date(it.endDate)
|
||||
const currentDate = new Date()
|
||||
const timeDiff = targetDate.getTime() - currentDate.getTime()
|
||||
const remainingDays = Math.ceil(timeDiff / (1000 * 3600 * 24))
|
||||
|
||||
// 设置活动状态
|
||||
let activityState = 'recruiting'
|
||||
if (remainingDays <= 0) {
|
||||
activityState = 'completed'
|
||||
} else if (it.activityStatus === 2) {
|
||||
activityState = 'in_progress'
|
||||
} else if (it.activityStatus === 3) {
|
||||
activityState = 'completed'
|
||||
}
|
||||
|
||||
return {
|
||||
...it,
|
||||
remainingDays,
|
||||
activityState,
|
||||
remainingBeerCount: it.remainingBeerCount || 0,
|
||||
barAwardStatus: it.barAwardStatus || 0
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改页面加载更多方法
|
||||
async changePage() {
|
||||
if (!this.finished) {
|
||||
await this.getActivityList()
|
||||
// 加载更多
|
||||
changePage() {
|
||||
if (!this.loading && !this.finished) {
|
||||
this.getActivityList()
|
||||
}
|
||||
},
|
||||
// 更多热门活动
|
||||
moreHotActivity() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activityList/activityList'
|
||||
})
|
||||
},
|
||||
// 处理活动点击
|
||||
handleActivityClick(item) {
|
||||
console.log('handleActivityClick called', item)
|
||||
uni.navigateTo({
|
||||
url: "/pagesActivity/activityDetail?id=" + item.id
|
||||
url: `/pages/activityList/details?id=${item.id}`
|
||||
})
|
||||
},
|
||||
handlePopupChange(e) {
|
||||
if (e && e.detail) {
|
||||
this.currentAdIndex = e.detail.current;
|
||||
}
|
||||
},
|
||||
handleAdSwiperChange(e) {
|
||||
if (e && e.detail) {
|
||||
this.currentAdIndex = e.detail.current;
|
||||
}
|
||||
},
|
||||
toAddAiad() {
|
||||
// 跳转酒评页
|
||||
toReview(it) {
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/addAiad'
|
||||
url: "/pages/index/review?beerId=" + it.id
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
toSearch() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesActivity/homeSearch',
|
||||
success: () => {
|
||||
uni.$emit('openKeyboard')
|
||||
}
|
||||
})
|
||||
},
|
||||
changeTag(index) {
|
||||
this.curTag = index
|
||||
},
|
||||
// 查询广告弹窗 banner列表
|
||||
getBannerListFun() {
|
||||
this.ADList = []
|
||||
@ -331,26 +285,18 @@
|
||||
}
|
||||
})
|
||||
|
||||
// 检查是否需要显示开屏广告
|
||||
this.checkShowAD()
|
||||
let showHomeAD = uni.getStorageSync('showHomeAD')
|
||||
if (!showHomeAD) {
|
||||
this.$refs.ADRef.open()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 检查是否需要显示开屏广告
|
||||
checkShowAD() {
|
||||
if (this.ADList.length === 0) return
|
||||
|
||||
const currentSession = uni.getStorageSync('currentSession')
|
||||
const newSession = Date.now()
|
||||
|
||||
// 每次打开小程序都显示广告
|
||||
if (!currentSession || currentSession !== newSession) {
|
||||
this.$refs.ADRef.open()
|
||||
// 记录本次会话时间
|
||||
uni.setStorageSync('currentSession', newSession)
|
||||
}
|
||||
},
|
||||
// 关闭广告
|
||||
closeAd() {
|
||||
uni.setStorageSync('showHomeAD', true)
|
||||
uni.setTabBarStyle({
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
this.$refs.ADRef.close()
|
||||
},
|
||||
handleAD(item) {
|
||||
@ -361,62 +307,54 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转专辑页
|
||||
toFeaturePage(item) {
|
||||
// 立即认证门店
|
||||
toJoin() {
|
||||
if (!this.bannerJoin) return
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/featureInfo?id=${item.id}`
|
||||
url: this.bannerJoin.bannerLink,
|
||||
})
|
||||
},
|
||||
// 查询专辑页列表
|
||||
getFeaturePageListFun() {
|
||||
listFeaturePage().then(res => {
|
||||
this.featurePageList = res.data
|
||||
})
|
||||
},
|
||||
// 跳转酒评页
|
||||
toReview(it) {
|
||||
// 搜索
|
||||
toSearch() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/review?beerId=" + it.id
|
||||
url: '/pagesActivity/homeSearch'
|
||||
})
|
||||
},
|
||||
toGo(key) {
|
||||
switch (key) {
|
||||
// 导航跳转
|
||||
toGo(index) {
|
||||
switch(index) {
|
||||
case 1: // 新酒上市
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/newBeer"
|
||||
url: '/pages/index/newBeer'
|
||||
})
|
||||
break;
|
||||
case 2: // 生成酒单
|
||||
uni.navigateTo({
|
||||
url: "/pagesActivity/winelist"
|
||||
url: '/pages/index/featureInfo'
|
||||
})
|
||||
break;
|
||||
case 3: //酒币换购
|
||||
case 3: // 酒币换购
|
||||
uni.navigateTo({
|
||||
url: "/pagesCoin/beerCoin"
|
||||
url: '/pagesCoin/beerCoin'
|
||||
})
|
||||
break;
|
||||
case 4: // 关注酒厂
|
||||
case 4: // 关注厂牌
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/myAttention'
|
||||
url: '/pages/index/myJoin'
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 更多热门活动
|
||||
moreHotActivity() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/activityList/activityList"
|
||||
})
|
||||
},
|
||||
search() {
|
||||
// 实现搜索逻辑
|
||||
console.log('搜索关键词:', this.keyword);
|
||||
},
|
||||
changeSearch() {
|
||||
// 实现搜索逻辑
|
||||
console.log('搜索关键词:', this.keyword);
|
||||
// 处理广告轮播切换
|
||||
handleAdSwiperChange(e) {
|
||||
this.currentAdIndex = e.detail.current
|
||||
},
|
||||
// 处理弹窗状态变化
|
||||
handlePopupChange(e) {
|
||||
if (!e.show) {
|
||||
this.closeAd()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,542 +0,0 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- <view style="position: fixed;left:0px;z-index: 100;" :style="{'top': statusBaeHeight + 58 + 'px'}">
|
||||
<view class="search-box" style="background: #F2F2F2;">
|
||||
<input type="text" disabled placeholder="搜索酒款/酒厂" @click="toSearch">
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="showJoinImg && bannerJoin" class="join-box" @click="toJoin">
|
||||
<image :src="bannerJoin.bannerUrl" class="img"></image>
|
||||
</view>
|
||||
<!-- 轮播 -->
|
||||
<swiper v-else class="join-box" circular :autoplay="true" :indicator-dots="true">
|
||||
<swiper-item v-for="(item,index) in homeBanner" :key="index">
|
||||
<image :src="item.bannerUrl" class="img"></image>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
|
||||
<!-- 快捷导航 -->
|
||||
<view class="bg-white"
|
||||
style="border-radius: 30rpx 30rpx 12rpx 12rpx;padding-top:8rpx;position: relative;margin-top:-20rpx">
|
||||
<view class="search-box">
|
||||
<text class="cuIcon-search" style="font-size: 40rpx;color: #A2A2A2;margin-right: 24rpx;"></text>
|
||||
<input type="text" disabled placeholder="搜索酒款/酒厂" @click="toSearch">
|
||||
</view>
|
||||
<view class="flex justify-between bg-white" style="padding: 20rpx 36rpx;">
|
||||
<view class="nav-item" @click="toGo(1)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-1.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">新酒上市</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="toGo(2)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-2.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">生成酒单</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="toGo(3)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-3.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">酒币换购</text>
|
||||
</view>
|
||||
<view class="nav-item" @click="toGo(4)">
|
||||
<view class="flex justify-center align-center img-box">
|
||||
<image src="/static/nav-4.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<text class="text-bold">关注厂牌</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<commonTitle title="热门活动招募"></commonTitle>
|
||||
<!-- 专辑列表 -->
|
||||
<view v-for="(item,i) in featurePageList" :key="i" class="bg-white">
|
||||
<view class="flex justify-between align-center title-box" @click="toFeaturePage(item)">
|
||||
<view class="flex-1 flex flex-col">
|
||||
<text class="title">{{ item.pageName }}</text>
|
||||
<text class="sub">{{ item.subTitle}}</text>
|
||||
</view>
|
||||
<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
</view>
|
||||
<rowBeer :beers="item.beers" />
|
||||
<!-- <scroll-view scroll-x="true" class="scroll-container">
|
||||
<view v-for="(it, index) in item.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>
|
||||
<view v-if="showJoinImg" class="weixin-box">
|
||||
<text>入驻助理在线服务，1对1咨询使用指南~</text>
|
||||
<view class="bg-zd btn" @click="toAddAiad">立即添加</view>
|
||||
</view>
|
||||
<loginPopup ref="loginRef" @loginSuccess="loginSuccess"></loginPopup>
|
||||
<!-- 开屏广告 -->
|
||||
<uni-popup ref="ADRef" type="center" :is-mask-click="false" maskBackgroundColor="rgba(0,0,0,0.7)">
|
||||
<view class="flex flex-col align-center justify-center" style="width: 630rpx;height: 61vh;">
|
||||
<swiper class="swiper" style="width: 630rpx;height: 58vh;" circular :autoplay="true"
|
||||
:indicator-dots="true">
|
||||
<swiper-item v-for="(item,index) in ADList" :key="index">
|
||||
<image :src="item.bannerUrl" style="width: 630rpx;height: 50vh;border-radius: 30rpx;"
|
||||
@click="handleAD(item)">
|
||||
</image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<text class="cuIcon-roundclose text-white" style="font-size: 68rpx !important;" @click="closeAd"></text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getBannerList
|
||||
} from '@/api/bar.js'
|
||||
import {
|
||||
listFeaturePage
|
||||
} from '@/api/platform.js'
|
||||
import commonTitle from '@/components/commonTitle.vue'
|
||||
import loginPopup from '@/components/loginPopup.vue';
|
||||
import rowBeer from '@/components/rowBeer.vue'
|
||||
export default {
|
||||
components: {
|
||||
commonTitle,
|
||||
loginPopup,
|
||||
rowBeer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBaeHeight: 0,
|
||||
curTag: 0,
|
||||
ADList: [], // 广告弹窗
|
||||
bannerJoin: null, // 入驻banner
|
||||
showJoinImg: false, // 是否显示入驻图片
|
||||
userInfo: null,
|
||||
featurePageList: [], // 专辑页列表
|
||||
homeBanner: [], //首页banner
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// setTimeout(() => {
|
||||
// uni.setNavigationBarColor({
|
||||
// frontColor: '#ffffff',
|
||||
// backgroundColor: '#FFFFFF',
|
||||
// animation: {
|
||||
// duration: 400,
|
||||
// timingFunc: 'easeIn'
|
||||
// }
|
||||
// })
|
||||
// }, 500)
|
||||
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
||||
this.getBannerListFun() // 广告轮播图
|
||||
uni.showShareMenu({
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没入驻
|
||||
this.showJoinImg = true
|
||||
}else {
|
||||
this.showJoinImg = false
|
||||
}
|
||||
this.getFeaturePageListFun() // 专辑页列表
|
||||
},
|
||||
// onPullDownRefresh(){
|
||||
// this.getFeaturePageListFun() // 专辑页列表
|
||||
// },
|
||||
|
||||
methods: {
|
||||
loginSuccess() {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
|
||||
if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没入驻
|
||||
console.log('登录')
|
||||
this.showJoinImg = true
|
||||
}else {
|
||||
this.showJoinImg = false
|
||||
}
|
||||
},
|
||||
toAddAiad() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/addAiad'
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
toSearch() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/index/searchBeer'
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pagesActivity/homeSearch'
|
||||
})
|
||||
},
|
||||
changeTag(index) {
|
||||
this.curTag = index
|
||||
},
|
||||
// 查询广告弹窗 banner列表
|
||||
getBannerListFun() {
|
||||
this.ADList = []
|
||||
this.homeBanner = []
|
||||
this.bannerJoin = null
|
||||
getBannerList().then(res => {
|
||||
res.data.forEach(it => {
|
||||
if (it.bannerType == 'homeAD') { // 开屏广告
|
||||
this.ADList.push(it)
|
||||
} else if (it.bannerType == 'homeJoin') { // 入驻
|
||||
this.bannerJoin = it
|
||||
} else if (it.bannerType == 'homeBanner') { // 首页banner
|
||||
this.homeBanner.push(it)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
let showHomeAD = uni.getStorageSync('showHomeAD')
|
||||
if (!showHomeAD) {
|
||||
|
||||
this.$refs.ADRef.open()
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
// 关闭广告
|
||||
closeAd() {
|
||||
uni.setStorageSync('showHomeAD', true)
|
||||
uni.setTabBarStyle({
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
this.$refs.ADRef.close()
|
||||
|
||||
},
|
||||
handleAD(item) {
|
||||
this.closeAd()
|
||||
if (item.bannerLink) {
|
||||
uni.navigateTo({
|
||||
url: item.bannerLink,
|
||||
})
|
||||
}
|
||||
},
|
||||
// 立即入驻
|
||||
toJoin() {
|
||||
if (!this.bannerJoin) return
|
||||
uni.navigateTo({
|
||||
url: this.bannerJoin.bannerLink,
|
||||
})
|
||||
},
|
||||
// 跳转专辑页
|
||||
toFeaturePage(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/featureInfo?id=${item.id}`
|
||||
})
|
||||
},
|
||||
// 查询专辑页列表
|
||||
getFeaturePageListFun() {
|
||||
listFeaturePage().then(res => {
|
||||
this.featurePageList = res.data
|
||||
})
|
||||
},
|
||||
// 跳转酒评页
|
||||
toReview(it) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/review?beerId=" + it.id
|
||||
})
|
||||
},
|
||||
toGo(key) {
|
||||
switch (key) {
|
||||
case 1: // 新酒上市
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/newBeer"
|
||||
})
|
||||
break;
|
||||
case 2: // 生成酒单
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pagesActivity/winelist"
|
||||
})
|
||||
break;
|
||||
case 3: //酒币换购
|
||||
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pagesCoin/beerCoin"
|
||||
})
|
||||
break;
|
||||
case 4: // 关注酒厂
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/myAttention'
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/.uni-popup {
|
||||
z-index: 1025;
|
||||
}
|
||||
|
||||
.page {
|
||||
// background: #FDFDFD;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
// padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
|
||||
// padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.search-box {
|
||||
border-radius: 80rpx;
|
||||
width: 700rpx;
|
||||
height: 80rpx;
|
||||
background-color: rgba(243, 243, 243, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 30rpx;
|
||||
margin: 26rpx auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.join-box {
|
||||
// margin: 20rpx 0;
|
||||
// border-radius: 30rpx;
|
||||
box-sizing: border-box;
|
||||
// border: 1.5px solid #F2F2F2;
|
||||
// padding: 34rpx 26rpx;
|
||||
// height: 450rpx;
|
||||
// height: 1130rpx;
|
||||
height: 536rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.btn {
|
||||
width: 582rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 24rpx;
|
||||
text-align: center;
|
||||
line-height: 68rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
margin-bottom: 20rpx;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
// 快捷导航
|
||||
.nav-item {
|
||||
text-align: center;
|
||||
color: #0B0E26;
|
||||
|
||||
.img-box {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
background: #F2F2F2;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quickNav-box {
|
||||
border-radius: 20rpx;
|
||||
background: #FFFFFF;
|
||||
width: 100%;
|
||||
padding: 32rpx 24rpx;
|
||||
height: 490rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
height: 416rpx;
|
||||
width: 352rpx;
|
||||
// width: 47%;
|
||||
border-radius: 20rpx;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 196rpx;
|
||||
// width: 326rpx;
|
||||
width: 100%;
|
||||
margin-bottom: 22rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #F2F2F2;
|
||||
box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
padding: 16rpx 32rpx;
|
||||
margin: 20rpx 32rpx 0;
|
||||
|
||||
.cover {
|
||||
width: 208rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: transparent;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
border: 1px solid #9D9D9D;
|
||||
;
|
||||
margin-right: 24rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.active-tag {
|
||||
background-color: #FEE034;
|
||||
font-weight: bold;
|
||||
border: 1px solid #FEE034;
|
||||
|
||||
}
|
||||
|
||||
.title-box {
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 28rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1E2019;
|
||||
line-height: 130%;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 20rpx;
|
||||
color: #9D9D9D;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// .scroll-container {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// white-space: nowrap;
|
||||
// min-height: 505rpx;
|
||||
// // padding-bottom: 10rpx;
|
||||
// margin-bottom: 32rpx;
|
||||
// .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: 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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.weixin-box {
|
||||
position: fixed;
|
||||
// bottom: 130rpx;
|
||||
// bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
|
||||
bottom: 38rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 12rpx;
|
||||
height: 80rpx;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 34rpx;
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
.btn {
|
||||
border-radius: 12rpx;
|
||||
background: #39E5B1;
|
||||
width: 124rpx;
|
||||
height: 38rpx;
|
||||
line-height: 38rpx;
|
||||
text-align: center;
|
||||
font-size: 20rpx;
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,223 +0,0 @@
|
||||
<template>
|
||||
<view class="page flex flex-col">
|
||||
<view class="top flex align-center">
|
||||
<view style="font-size: 32rpx;width: 64rpx;flex-shrink: 0;">
|
||||
新酒上市
|
||||
</view>
|
||||
<view class="scroll-container">
|
||||
<view v-for="(it, index) in dataList" style="text-align: center;"
|
||||
:class="{active : currentMonthIndex == index}" @click="changeMonth(it, index)">
|
||||
<view style="font-size: 32rpx;">{{ it.month}}月</view>
|
||||
<view style="font-size: 20rpx;">共{{ it.beerCount}}款</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="container flex-1">
|
||||
<view class="flex justify-end">
|
||||
<view class="style-btn" @click="showStyle">全部风格<text class="cuIcon-filter"></text></view>
|
||||
</view>
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
||||
<view style="width: 100%;" v-for="it in currentMonth">
|
||||
<view v-if="it.launchDate" style="color: #979797;font-size: 24rpx;margin-bottom: 8rpx;">
|
||||
<text
|
||||
style="font-size: 36rpx;">{{ it.launchDate.slice(8, 10)}}</text>/<text>{{ it.launchDate.slice(5, 7)}}</text>月
|
||||
</view>
|
||||
<view class="beerItem">
|
||||
<view class="beerCard flex align-center" @click="toBeer(it)">
|
||||
<image :src="it.cover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
|
||||
<view class="flex-1">
|
||||
|
||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">
|
||||
{{it.beerName}}
|
||||
</view>
|
||||
<view class="word-all margin-bottom-sm"
|
||||
style="font-size: 24rpx;color: rgba(30, 32, 25, 0.8);">{{ it.beerStyles}}
|
||||
</view>
|
||||
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{ it.brandName}}</view>
|
||||
</view>
|
||||
<image src="@/static/right-arrow.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;color: #979797;margin-top: 60rpx;margin-bottom: 60rpx;text-align: center;">更多新品发布信息，敬请关注更新~</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- <view class="flex align-center justify-between tip">
|
||||
<text>开启新酒上枪通知，第一时间获取新酒资讯</text>
|
||||
<image src="@/static/add.png" style="width: 32rpx;height: 32rpx;"></image>
|
||||
</view> -->
|
||||
<uni-popup ref="popup" type="right" background-color="#fff">
|
||||
<scroll-view scroll-y="true" style="height: 90%;">
|
||||
<view v-for="(item, index) in popularStyleList" :key="index" class="padding"
|
||||
@click="searchByStyle(item)">
|
||||
<!-- <view class="flex-1"> -->
|
||||
<view class="word-all" :class="{active: item.beerStyles == queryForm.style}" >{{ item.beerStyles}}</view>
|
||||
<!-- <view class="sub">全系列{{item.popular}}款产品在售</view> -->
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="flex justify-center clearBtn" style="margin-top: 40rpx;" @click="clear">清除筛选</view>
|
||||
|
||||
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getLastSixMonth,
|
||||
getNewBeerListByMonth,
|
||||
popularStyle,
|
||||
} from "@/api/platform.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataList: [],
|
||||
currentMonth: [],
|
||||
currentMonthIndex: 0,
|
||||
popularStyleList: [],
|
||||
queryForm: {
|
||||
num: null
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getPopularStyle()
|
||||
this.getLastSixMonthFun()
|
||||
},
|
||||
methods: {
|
||||
// 获取热门风格
|
||||
getPopularStyle() {
|
||||
popularStyle().then(res => {
|
||||
console.log(res)
|
||||
this.popularStyleList = res.data
|
||||
})
|
||||
},
|
||||
changeMonth(item, index) {
|
||||
this.currentMonthIndex = index
|
||||
this.currentMonth = item.beers
|
||||
this.queryForm.num = index
|
||||
this.getNewBeerListByMonthFun()
|
||||
},
|
||||
getLastSixMonthFun() {
|
||||
getLastSixMonth().then(res => {
|
||||
console.log(res)
|
||||
this.dataList = res.data
|
||||
this.queryForm.num = 0
|
||||
this.getNewBeerListByMonthFun()
|
||||
})
|
||||
},
|
||||
// 跳转酒款详情
|
||||
toBeer(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/review?beerId=' + item.id
|
||||
})
|
||||
},
|
||||
showStyle() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
searchByStyle(item) {
|
||||
this.queryForm.style = item.beerStyles
|
||||
this.getNewBeerListByMonthFun()
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
// 获取新酒列表
|
||||
getNewBeerListByMonthFun() {
|
||||
getNewBeerListByMonth(this.queryForm).then(res => {
|
||||
console.log(res)
|
||||
this.currentMonth = res.data
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
delete this.queryForm.style
|
||||
this.$refs.popup.close()
|
||||
this.getNewBeerListByMonthFun()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
background: #F2F2F2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 172rpx;
|
||||
background: #3D3D3D;
|
||||
color: #FFFFFF;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
|
||||
.active {
|
||||
color: #FFC700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
height: calc(100vh - 182rpx);
|
||||
margin-top: -10rpx;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
background: #F2F2F2;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
.style-btn {
|
||||
border-radius: 12rpx;
|
||||
background: #39E5B1;
|
||||
font-family: Roboto;
|
||||
font-size: 24rpx;
|
||||
color: #0B0E26;
|
||||
padding: 6rpx 10rpx;
|
||||
}
|
||||
.beerItem {
|
||||
padding-left: 18rpx;
|
||||
margin-left: 18rpx;
|
||||
border-left: 4rpx dashed #FFF;
|
||||
|
||||
.beerCard {
|
||||
border-radius: 12rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 24rpx 24rpx 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 0 30rpx 0 48rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba(254, 224, 52, 0.36);
|
||||
height: 64rpx;
|
||||
position: fixed;
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
width: 100%;
|
||||
color: #5E5F60;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #FFC700;
|
||||
}
|
||||
.clearBtn {
|
||||
font-size: 24rpx;
|
||||
color: #5E5F60;
|
||||
}
|
||||
</style>
|
||||
@ -131,7 +131,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonTitle from '@/components/commonTitle.vue'
|
||||
import {
|
||||
commonSearch,
|
||||
popularStyle,
|
||||
@ -141,7 +140,6 @@
|
||||
} from "@/api/platform.js"
|
||||
export default {
|
||||
components: {
|
||||
commonTitle
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
BIN
pagesActivity/.DS_Store
vendored
BIN
pagesActivity/.DS_Store
vendored
Binary file not shown.
@ -139,11 +139,9 @@
|
||||
import {
|
||||
getActivityInfo
|
||||
} from '@/api/bar.js'
|
||||
import process from './components/progress.vue';
|
||||
import loginPopup from '@/components/loginPopup.vue';
|
||||
export default {
|
||||
components: {
|
||||
process,
|
||||
loginPopup
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<view class="progress_box">
|
||||
<canvas class="progress_bg" canvas-id="cpbg"
|
||||
:style="{width:progress_width+'px',height:progress_height+'px'}"></canvas>
|
||||
<canvas class="progress_bar" canvas-id="cpbar"
|
||||
:style="{width:progress_width+'px',height:progress_height+'px'}"></canvas>
|
||||
<view class="progress-num flex justify-between">
|
||||
<text style="color: #FFD52B;width: 200rpx;text-align: center;">0</text>
|
||||
<text style="color: #39E5B1;width: 200rpx;text-align: center;">{{ total }}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true
|
||||
},
|
||||
progress_time: {
|
||||
type: Number,
|
||||
default: 1500
|
||||
},
|
||||
progress_width: {
|
||||
type: Number,
|
||||
default: 250
|
||||
},
|
||||
progress_height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
border_width: {
|
||||
type: Number,
|
||||
default: 15
|
||||
},
|
||||
bg_color: {
|
||||
type: String,
|
||||
default: '#EDEDED'
|
||||
},
|
||||
start_color: {
|
||||
type: String,
|
||||
default: '#FF456B'
|
||||
},
|
||||
end_color: {
|
||||
type: String,
|
||||
default: '#FF879F'
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
percent: 0, // 保存进度值的变化前后值，用于比较用
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.value)
|
||||
this.drawProgressbg();
|
||||
this.drawCircle(this.value);
|
||||
},
|
||||
watch: {
|
||||
value(newVal, oldVal) {
|
||||
console.log(newVal, oldVal)
|
||||
this.drawCircle(newVal);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 背景
|
||||
drawProgressbg() {
|
||||
// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
||||
let ctx = uni.createCanvasContext('cpbg', this);
|
||||
ctx.setLineWidth(this.border_width);
|
||||
ctx.setStrokeStyle(this.bg_color);
|
||||
ctx.setLineCap('round');
|
||||
ctx.beginPath();
|
||||
ctx.arc(180, 165, 120, 0.99 * Math.PI, 0.01 * Math.PI, false);
|
||||
ctx.stroke();
|
||||
ctx.draw();
|
||||
},
|
||||
// 画圆（递归调用）
|
||||
drawCircle(step) {
|
||||
if (step === 0) return;
|
||||
let time = Math.floor(this.progress_time / 100)
|
||||
let ctx = uni.createCanvasContext('cpbar', this);
|
||||
let gradient = ctx.createLinearGradient(28, 55, 192, 55);
|
||||
gradient.addColorStop('0', this.start_color);
|
||||
gradient.addColorStop('1.0', this.end_color);
|
||||
ctx.setLineWidth(this.border_width);
|
||||
ctx.setStrokeStyle(gradient);
|
||||
ctx.setLineCap('round');
|
||||
ctx.beginPath();
|
||||
step = 0.01 * step + 0.99;
|
||||
if (step === 1) {
|
||||
step = 0.99
|
||||
}
|
||||
if (step >= 2) {
|
||||
step = step % 2;
|
||||
}
|
||||
if (step === 1.99) {
|
||||
step = 0.01
|
||||
}
|
||||
ctx.arc(180, 165, 120, 0.99 * Math.PI, step * Math.PI, false);
|
||||
ctx.stroke();
|
||||
ctx.draw();
|
||||
if (this.value > this.percent) {
|
||||
this.percent++
|
||||
setTimeout(() => {
|
||||
this.drawCircle(this.percent)
|
||||
},
|
||||
time)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress_box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
.progress-num {
|
||||
width: 620rpx;
|
||||
font-size: 40rpx;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
}
|
||||
.progress_bar {
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.progress_bg {
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -678,7 +678,7 @@
|
||||
// 跳转到添加新酒款页面
|
||||
toNewBeer() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/addBeer'
|
||||
url: '/pagesActivity/newWine'
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -181,11 +181,9 @@
|
||||
confirmPayApi
|
||||
|
||||
} from '@/api/user.js'
|
||||
import process from './components/progress.vue';
|
||||
import rowBeer from '@/components/rowBeer.vue'
|
||||
export default {
|
||||
components: {
|
||||
process,
|
||||
rowBeer
|
||||
},
|
||||
data() {
|
||||
|
||||
@ -1,64 +1,118 @@
|
||||
<template>
|
||||
<view class="page-content padding">
|
||||
<!-- 上传logo -->
|
||||
<view class="">
|
||||
<view class="flex justify-center" style="">
|
||||
<image v-if="form.barLogo" :src="form.barLogo" style="width: 202rpx;height: 202rpx;border-radius: 50%;">
|
||||
</image>
|
||||
<view v-else class="bg1 flex align-center justify-center"
|
||||
style="width: 202rpx;height: 202rpx;border-radius: 50%;position: relative;" @click="handleUpload('barLogo')">
|
||||
<view class="">
|
||||
<image src="@/static/bg/phones.svg" mode="" style="width: 60rpx;height: 60rpx;"></image>
|
||||
</view>
|
||||
<view class="" style="position: absolute;bottom: 0;right: 0;">
|
||||
<image src="@/static/adds.svg" mode="" style="width: 48rpx;height: 48rpx;"></image>
|
||||
<view class="page">
|
||||
<view class="page-content">
|
||||
<!-- 上传logo部分 -->
|
||||
<view class="section">
|
||||
<view class="section-title">酒款图片</view>
|
||||
<view class="upload-content">
|
||||
<view class="img-box" @click="handleUpload('barLogo')">
|
||||
<image v-if="form.barLogo" :src="form.barLogo" mode="aspectFill" class="preview-image"></image>
|
||||
<view v-else class="upload-placeholder">
|
||||
<text class="cuIcon-camerafill"></text>
|
||||
<text class="upload-text">添加图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="upload-tip">请上传酒款图片（必填）</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view :style="{ height: containerHeight + 'rpx' }" :class="filteredList.length>0?'bors':''" style="position: relative;">
|
||||
<view class="flex-col">
|
||||
<view class="label">酒厂名称</view>
|
||||
<input v-model="form.nickName" @input="handleSearch" placeholder="酒厂名称" class="zd-input wh1"></input>
|
||||
</view>
|
||||
<view class="" style="position: absolute;top:160rpx;left: 0;">
|
||||
<view class="" v-for="(item, index) in filteredList">
|
||||
<view style="width: 100%;" @click="breweryClick(item)">{{item}}</view>
|
||||
|
||||
<!-- 基本信息部分 -->
|
||||
<view class="section">
|
||||
<view class="section-title">基本信息</view>
|
||||
<view class="info-list">
|
||||
<!-- 酒厂名称 -->
|
||||
<view class="info-item">
|
||||
<text>酒厂名称</text>
|
||||
<view class="right-content">
|
||||
<input
|
||||
v-model="form.nickName"
|
||||
@input="handleBrewerySearch"
|
||||
placeholder="请输入酒厂名称"
|
||||
class="input-field"
|
||||
/>
|
||||
<!-- 搜索建议列表 -->
|
||||
<view v-if="brewerySuggestions.length > 0" class="suggestion-list">
|
||||
<view
|
||||
v-for="(item, index) in brewerySuggestions"
|
||||
:key="index"
|
||||
class="suggestion-item"
|
||||
@click="selectBrewery(item)"
|
||||
>
|
||||
<view class="suggestion-content">
|
||||
<image v-if="item.logo" :src="item.logo" class="suggestion-logo"></image>
|
||||
<view class="suggestion-info">
|
||||
<text class="suggestion-name">{{item.name}}</text>
|
||||
<text class="suggestion-desc">{{item.description || '已有品牌'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 酒款名称 -->
|
||||
<view class="info-item">
|
||||
<text>酒款名称</text>
|
||||
<view class="right-content">
|
||||
<input
|
||||
v-model="form.phone"
|
||||
@input="handleBeerSearch"
|
||||
placeholder="请输入酒款名称"
|
||||
class="input-field"
|
||||
/>
|
||||
<!-- 搜索建议列表 -->
|
||||
<view v-if="beerSuggestions.length > 0" class="suggestion-list">
|
||||
<view
|
||||
v-for="(item, index) in beerSuggestions"
|
||||
:key="index"
|
||||
class="suggestion-item"
|
||||
@click="selectBeer(item)"
|
||||
>
|
||||
<view class="suggestion-content">
|
||||
<image v-if="item.cover" :src="item.cover" class="suggestion-logo"></image>
|
||||
<view class="suggestion-info">
|
||||
<text class="suggestion-name">{{item.name}}</text>
|
||||
<text class="suggestion-desc">{{item.brewery || '已有酒款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 酒精含量 -->
|
||||
<view class="info-item">
|
||||
<text>酒精含量</text>
|
||||
<view class="right-content">
|
||||
<input
|
||||
v-model="form.barName"
|
||||
placeholder="请输入酒精含量"
|
||||
class="input-field"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 简介 -->
|
||||
<view class="info-item description-item">
|
||||
<text>简介</text>
|
||||
<view class="right-content">
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
placeholder="请输入酒款简介"
|
||||
class="textarea-field"
|
||||
maxlength="72"
|
||||
/>
|
||||
<text class="word-count">{{form.description ? form.description.length : 0}}/72</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex-col">
|
||||
<view class="label">酒款名称</view>
|
||||
<input v-model="form.phone" placeholder="酒款名称" class="zd-input wh1"></input>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="save-btn" @click="submitForm">
|
||||
确认提交
|
||||
</view>
|
||||
<view class="flex-col">
|
||||
<view class="label">酒精含量</view>
|
||||
<input v-model="form.barName" placeholder="酒精含量" class="zd-input wh1"></input>
|
||||
</view>
|
||||
<view class="flex-col">
|
||||
<view class="label">简介</view>
|
||||
<textarea placeholder="简介" class="zd-input wh2"/>
|
||||
|
||||
</view>
|
||||
|
||||
<button class="cu-btn btn" @click="submitForm">确认提交</button>
|
||||
</view>
|
||||
<!-- <view class="flex align-center justify-center" style="width: 100%; height: 90vh;">
|
||||
<view class="flex flex-col align-center justify-center" style="width: 100%;">
|
||||
|
||||
<image src="@/static/bg/kongs.svg" mode="aspectFit" style="width: 256rpx; height: 190rpx;"></image>
|
||||
|
||||
<view style="margin-top: 100rpx;">您搜索的内容没有收录</view>
|
||||
|
||||
<view style="margin-top: 28rpx;">请更换搜索词或新建酒款</view>
|
||||
|
||||
<view style="margin-top: 36rpx;">
|
||||
<button class="cu-btn btn" @click="submitForm">创建新酒款</button>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -83,11 +137,16 @@
|
||||
storefrontPhoto: '', // 门头照
|
||||
position: '', // 职务
|
||||
openId: '',
|
||||
description: '', // 简介
|
||||
},
|
||||
userInfo: {},
|
||||
QQMap: null,
|
||||
originalList: ['苹果', '香蕉', '橙子', '菠萝', '葡萄', '西瓜'],
|
||||
filteredList: [],
|
||||
// 酒厂搜索建议
|
||||
brewerySuggestions: [],
|
||||
// 酒款搜索建议
|
||||
beerSuggestions: [],
|
||||
// 搜索防抖定时器
|
||||
searchTimer: null,
|
||||
};
|
||||
},
|
||||
onLoad({
|
||||
@ -105,26 +164,121 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSearch() {
|
||||
if (this.form.nickName.trim() === '') {
|
||||
this.filteredList = this.originalList; // 如果关键词为空，显示全部数据
|
||||
return;
|
||||
}
|
||||
|
||||
// 模糊搜索逻辑
|
||||
this.filteredList = this.originalList.filter(item =>
|
||||
item.includes(this.form.nickName)
|
||||
);
|
||||
// 酒厂名称搜索
|
||||
handleBrewerySearch() {
|
||||
// 清除之前的定时器
|
||||
if (this.searchTimer) {
|
||||
clearTimeout(this.searchTimer);
|
||||
}
|
||||
|
||||
// 设置新的定时器，实现防抖
|
||||
this.searchTimer = setTimeout(() => {
|
||||
const keyword = this.form.nickName.trim();
|
||||
if (keyword === '') {
|
||||
this.brewerySuggestions = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用搜索接口
|
||||
this.searchBreweries(keyword);
|
||||
}, 300);
|
||||
},
|
||||
breweryClick(item){
|
||||
this.form.nickName = item
|
||||
this.filteredList = []
|
||||
|
||||
// 酒款名称搜索
|
||||
handleBeerSearch() {
|
||||
// 清除之前的定时器
|
||||
if (this.searchTimer) {
|
||||
clearTimeout(this.searchTimer);
|
||||
}
|
||||
|
||||
// 设置新的定时器，实现防抖
|
||||
this.searchTimer = setTimeout(() => {
|
||||
const keyword = this.form.phone.trim();
|
||||
if (keyword === '') {
|
||||
this.beerSuggestions = [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用搜索接口
|
||||
this.searchBeers(keyword);
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 搜索酒厂（预留接口）
|
||||
searchBreweries(keyword) {
|
||||
// 这里预留接口，后期对接数据库
|
||||
// 示例代码，实际应该调用API
|
||||
/*
|
||||
uni.request({
|
||||
url: base_url + '/api/breweries/search',
|
||||
method: 'GET',
|
||||
data: {
|
||||
keyword: keyword
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
this.brewerySuggestions = res.data.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
// 临时模拟数据
|
||||
this.brewerySuggestions = [
|
||||
{ id: 1, name: '青岛啤酒', logo: '/static/bg/pc-1.png', description: '中国知名啤酒品牌' },
|
||||
{ id: 2, name: '百威啤酒', logo: '/static/bg/pc-1.png', description: '国际知名啤酒品牌' },
|
||||
{ id: 3, name: '哈尔滨啤酒', logo: '/static/bg/pc-1.png', description: '中国知名啤酒品牌' }
|
||||
].filter(item => item.name.includes(keyword));
|
||||
},
|
||||
|
||||
// 搜索酒款（预留接口）
|
||||
searchBeers(keyword) {
|
||||
// 这里预留接口，后期对接数据库
|
||||
// 示例代码，实际应该调用API
|
||||
/*
|
||||
uni.request({
|
||||
url: base_url + '/api/beers/search',
|
||||
method: 'GET',
|
||||
data: {
|
||||
keyword: keyword
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
this.beerSuggestions = res.data.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
// 临时模拟数据
|
||||
this.beerSuggestions = [
|
||||
{ id: 1, name: '青岛纯生', cover: '/static/bg/pc-1.png', brewery: '青岛啤酒' },
|
||||
{ id: 2, name: '百威经典', cover: '/static/bg/pc-1.png', brewery: '百威啤酒' },
|
||||
{ id: 3, name: '哈尔滨冰纯', cover: '/static/bg/pc-1.png', brewery: '哈尔滨啤酒' }
|
||||
].filter(item => item.name.includes(keyword));
|
||||
},
|
||||
|
||||
// 选择酒厂
|
||||
selectBrewery(item) {
|
||||
this.form.nickName = item.name;
|
||||
this.brewerySuggestions = [];
|
||||
|
||||
// 可以在这里添加其他逻辑，如自动填充酒厂相关信息
|
||||
},
|
||||
|
||||
// 选择酒款
|
||||
selectBeer(item) {
|
||||
this.form.phone = item.name;
|
||||
this.beerSuggestions = [];
|
||||
|
||||
// 可以在这里添加其他逻辑，如自动填充酒款相关信息
|
||||
},
|
||||
|
||||
// 提交
|
||||
submitForm() {
|
||||
if (!this.form.barLogo) {
|
||||
uni.showToast({
|
||||
title: '请上传logo',
|
||||
title: '请上传酒款图片',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
@ -132,7 +286,7 @@
|
||||
}
|
||||
if (!this.form.nickName) {
|
||||
uni.showToast({
|
||||
title: '请输入昵称',
|
||||
title: '请输入酒厂名称',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
@ -140,7 +294,7 @@
|
||||
}
|
||||
if (!this.form.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入联系电话',
|
||||
title: '请输入酒款名称',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
@ -148,75 +302,108 @@
|
||||
}
|
||||
if (!this.form.barName) {
|
||||
uni.showToast({
|
||||
title: '请输入门店名称',
|
||||
title: '请输入酒精含量',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.address) {
|
||||
if (!this.form.description) {
|
||||
uni.showToast({
|
||||
title: '请输入门店地址',
|
||||
title: '请输入酒款简介',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.businessLicense) {
|
||||
uni.showToast({
|
||||
title: '请上传营业执照',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
|
||||
// 检查是否选择了已有品牌或酒款
|
||||
const isExistingBrewery = this.brewerySuggestions.some(item => item.name === this.form.nickName);
|
||||
const isExistingBeer = this.beerSuggestions.some(item => item.name === this.form.phone);
|
||||
|
||||
if (isExistingBrewery) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '该酒厂已存在，是否继续提交？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.submitData();
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.form.storefrontPhoto) {
|
||||
uni.showToast({
|
||||
title: '请上传门头照',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
|
||||
if (isExistingBeer) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '该酒款已存在，是否继续提交？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.submitData();
|
||||
}
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.form.position) {
|
||||
uni.showToast({
|
||||
title: '请输入店内职务',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
}
|
||||
if(!this.form.latitude || !this.form.longitude) {
|
||||
uni.showToast({
|
||||
title: '请通过定位获取位置',
|
||||
icon: 'none',
|
||||
mask: true,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 直接提交
|
||||
this.submitData();
|
||||
},
|
||||
|
||||
// 提交数据
|
||||
submitData() {
|
||||
uni.showLoading({
|
||||
title: '提交中',
|
||||
mask: true
|
||||
})
|
||||
barRegister(this.form).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.userInfo = res.data.register // 暂存用户信息
|
||||
uni.setStorageSync('token', res.data.token)
|
||||
uni.hideLoading()
|
||||
this.$refs.successRef.open()
|
||||
});
|
||||
|
||||
// 这里预留接口，后期对接数据库
|
||||
// 示例代码，实际应该调用API
|
||||
/*
|
||||
uni.request({
|
||||
url: base_url + '/api/beers/add',
|
||||
method: 'POST',
|
||||
data: this.form,
|
||||
success: (res) => {
|
||||
if (res.data.code === 200) {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.msg || '提交失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}).catch(() => {
|
||||
// uni.hideLoading()
|
||||
})
|
||||
|
||||
},
|
||||
toHome() {
|
||||
uni.setStorageSync('userInfo', this.userInfo)
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
});
|
||||
*/
|
||||
|
||||
// 临时模拟提交成功
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1500);
|
||||
}, 1000);
|
||||
},
|
||||
// 上传事件
|
||||
handleUpload(key) {
|
||||
@ -301,90 +488,227 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #F7F7F7;
|
||||
|
||||
.page-content {
|
||||
padding: 48rpx;
|
||||
background-color: #FDFDFD;
|
||||
min-height: 100vh;
|
||||
font-family: Roboto;
|
||||
.label {
|
||||
color: #000;
|
||||
margin-bottom: 26rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
.zd-input {
|
||||
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFF;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
margin-bottom: 24rpx;
|
||||
border: 1px solid #C8C8C8;
|
||||
}
|
||||
.wh1{
|
||||
width: 654rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
.wh2{
|
||||
width: 654rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
.zd-address {
|
||||
width: 654rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFF;
|
||||
padding: 0 0 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
margin-bottom: 24rpx;
|
||||
border: 1px solid #C8C8C8;
|
||||
}
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.zd-img-box {
|
||||
width: 654rpx;
|
||||
min-height: 96rpx;
|
||||
;
|
||||
max-height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFF;
|
||||
padding: 0 30rpx;
|
||||
box-sizing: border-box;
|
||||
color: #000;
|
||||
margin-bottom: 56rpx;
|
||||
border: 1px solid #C8C8C8;
|
||||
.section {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
.upload-text {
|
||||
font-size: 28rpx;
|
||||
line-height: normal;
|
||||
color: #FEE034;
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
position: relative;
|
||||
padding-left: 24rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
background: #19367A;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 654rpx;
|
||||
height: 104rpx;
|
||||
border-radius: 24rpx;
|
||||
margin:36rpx auto 30rpx auto;
|
||||
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
font-size: 32rpx;
|
||||
background: #4E63E0
|
||||
.upload-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.img-box {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
background: #F7F8FA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
position: relative;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
|
||||
.cuIcon-camerafill {
|
||||
font-size: 48rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.sucbtn {
|
||||
width: 314rpx;
|
||||
height: 76rpx;
|
||||
.info-list {
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
text {
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
background: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.textarea-field {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: #F7F8FA;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.word-count {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
&.description-item {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg1 {
|
||||
background: rgba(216, 216, 216, 0.75);
|
||||
color: #000;
|
||||
|
||||
.suggestion-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
max-height: 400rpx;
|
||||
overflow-y: auto;
|
||||
|
||||
.suggestion-item {
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #F7F8FA;
|
||||
}
|
||||
|
||||
.suggestion-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.suggestion-logo {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.suggestion-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.suggestion-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.suggestion-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bors{
|
||||
border: #000 2rpx solid;
|
||||
border-radius: 24rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #19367A;
|
||||
border-radius: 44rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 48rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(25, 54, 122, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,652 +0,0 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<template v-if="showError">
|
||||
<view class="flex flex-col align-center justify-center" style="height: 100vh;">
|
||||
<view class="err-title">无效的二维码</view>
|
||||
<view class="cu-btn err-btn" @click="back"><image src="@/static/undo.png" style="width: 42rpx;height: 42rpx;margin-right: 10rpx;"></image>返回</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="flex-1" style="overflow-y: auto;">
|
||||
<!-- 已领取 -->
|
||||
<view v-if="info.qrcode.qrcodeStatus == 1" class="lq-state-box">
|
||||
<image src="@/static/information.png" class="img"></image>
|
||||
<text>该桶产品已于 {{ info.qrcode.verifyTime }} 扫码领取返利</text>
|
||||
</view>
|
||||
<!-- 转为赠品 -->
|
||||
<view v-if="info.qrcode.qrcodeStatus == 3" class="lq-state-box gift-state">
|
||||
<image src="@/static/gift.png" class="img"></image>
|
||||
<text>该桶产品已转为赠品</text>
|
||||
</view>
|
||||
<!-- 扫码成功 -->
|
||||
<view v-if="info.qrcode.qrcodeStatus == 0" class="scs-state-box">
|
||||
<image src="@/static/tick-circle@2x.png" class="img"></image>
|
||||
<!-- <text>{{ info.qrcodeStatus == 3 ? '领取成功啦！' : '扫码成功！'}}</text> -->
|
||||
<text>扫码成功！</text>
|
||||
</view>
|
||||
<view v-if="info.qrcode.qrcodeStatus == 0" class="flex align-center"
|
||||
style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;">
|
||||
<image src="@/static/flag.png" style="width: 48rpx;height: 48rpx;"></image>
|
||||
识别产品
|
||||
</view>
|
||||
<view v-if="beer" class="goods-box">
|
||||
<image :src="beer.cover" class="cover"></image>
|
||||
<view class="flex-1">
|
||||
<view class="flex justify-between align-center" style="margin-bottom: 28rpx;">
|
||||
<view class="flex align-center">
|
||||
<text
|
||||
style="font-size: 40rpx;color: #141415;font-weight: 600;margin-right: 8rpx;">{{ beer.beerName}}</text>
|
||||
<!-- <image src="@/static/verify-mark.png" style="width: 48rpx;height: 48rpx;"></image> -->
|
||||
</view>
|
||||
|
||||
<!-- <text class="cuIcon-like" style="color: #979797;font-size: 48rpx;"></text> -->
|
||||
</view>
|
||||
<view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.brandName}}</view>
|
||||
<view style="margin-bottom: 38rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.launchDate }}</view>
|
||||
<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
|
||||
<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
|
||||
{{ beer.beerOverallRating}}
|
||||
</text>
|
||||
<text style="color: #5F5F63;margin-left: 16rpx;">{{beer.beerReviewsCount}} 条评论</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 去评论区域 -->
|
||||
<!-- <view v-if="info.qrcodeStatus == 1" class="flex align-center justify-between tip">
|
||||
<view class="flex align-center">
|
||||
<image src="@/static/add.png" class="icon"></image>
|
||||
<text>首次写酒评还能领取<text style="color: #DE3C4B;;">XXX</text>品牌啤酒币哦</text>
|
||||
</view>
|
||||
|
||||
<text style="color: #DE3C4B;;">这就去评</text>
|
||||
</view> -->
|
||||
<!-- 参与活动提示 -->
|
||||
<template v-if="info.qrcode.qrcodeStatus == 0">
|
||||
<view class="flex align-center"
|
||||
style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;margin-top: 52rpx;">
|
||||
<image src="@/static/cup-green.png" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
|
||||
</image>
|
||||
品牌福利等你领
|
||||
</view>
|
||||
<view class="active-box">
|
||||
<view class="title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币</view>
|
||||
<text class="sub">品牌啤酒币可用于兑换好礼</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 厂牌返利提示 -->
|
||||
<template v-if="info.qrcode.qrcodeStatus == 1">
|
||||
<view class="flex align-center"
|
||||
style="font-size: 36rpx;color: #3D3D3D;font-weight: bold;margin-bottom: 32rpx;margin-top: 52rpx;">
|
||||
<image src="@/static/cup-red.png" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;">
|
||||
</image>
|
||||
厂牌返利已领取
|
||||
</view>
|
||||
<view class="active-box">
|
||||
<view class="title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
|
||||
<text class="sub">品牌啤酒币可用于兑换好礼</text>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="activitySum > 1 && info.qrcode.qrcodeStatus == 0" style="margin-bottom: 32rpx">
|
||||
*该产品有多个进行中活动重叠，请<text style="color:#DE3C4B">选择要计入的活动</text></view>
|
||||
<template v-if="info.qrcode.qrcodeStatus == 0">
|
||||
<view v-for="(it, index) in activity" :key="index" :class="{'active': it.id == activityId}"
|
||||
@click="selectPPF(it)">
|
||||
<view class="activity-item flex">
|
||||
<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 v-if="it.remainingBeerCount <= 0"
|
||||
style="font-size: 40rpx; color: #DE3C4B;">已达标</text>
|
||||
<text v-else>
|
||||
<text
|
||||
style="font-size: 72rpx; color: #DE3C4B;">{{ it.remainingBeerCount}}</text>桶
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="title">{{ it.activityName }}</view>
|
||||
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
|
||||
<view class="sub">目标：{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累积扫码 ≥ {{ 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 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>
|
||||
|
||||
<view v-for="(it, index) in platformActivity" :key="index"
|
||||
:class="{'ptActive': it.id == platformActivityId}" @click="selectPlatform(it)">
|
||||
<view class="activity-item flex">
|
||||
<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 v-if="it.remainingBeerCount <= 0"
|
||||
style="font-size: 40rpx; color: #DE3C4B;">已达标</text>
|
||||
<text v-else>
|
||||
<text
|
||||
style="font-size: 72rpx; color: #DE3C4B;">{{ it.remainingBeerCount}}</text>桶
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="title">{{ it.activityName }}</view>
|
||||
<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{it.duration}}天内</text></view>
|
||||
<view class="sub">目标：{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累积扫码 ≥ {{ it.activityTarget}}桶</view>
|
||||
<scroll-view 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 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>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex align-end flex-col">
|
||||
<view v-if="info.qrcode.qrcodeStatus == 2" class="lq-tip flex align-center">
|
||||
<image src="@/static/warning-2.png" style="width: 30rpx;height:30rpx;margin-right: 12rpx;"></image>
|
||||
所有酒款只可领取一次，请确认后操作
|
||||
</view>
|
||||
<view class="flex justify-between align-center" style="width: 100%;">
|
||||
<view v-if="info.qrcode.qrcodeStatus != 1 && info.qrcode.qrcodeStatus != 3" class="btn" @click="back">
|
||||
<image src="@/static/undo.png" class="icon"></image>
|
||||
回头再说
|
||||
</view>
|
||||
<view v-else class="btn" @click="toWinelist">
|
||||
<image src="@/static/document.png" class="icon"></image>
|
||||
生成酒单
|
||||
</view>
|
||||
<view v-if="info.qrcode.qrcodeStatus == 0" class="btn"
|
||||
style="background-color: #71F4B4;" @click="handleReceive">
|
||||
<image src="@/static/send.png" class="icon"></image>
|
||||
立即领取
|
||||
</view>
|
||||
<view v-else-if="info.qrcode.qrcodeStatus == 3" class="btn gift-btn" @click="share">
|
||||
<image src="@/static/send.png" class="icon"></image>
|
||||
分享赠品
|
||||
</view>
|
||||
<view v-else class="btn" style="background-color: #71F4B4;" @click="share">
|
||||
<image src="@/static/send.png" class="icon"></image>
|
||||
分享上新
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
consumeCode,
|
||||
getQrcodeInfo
|
||||
} from '@/api/bar.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showError: false,
|
||||
info: {
|
||||
qrcode: {
|
||||
qrcodeStatus: null, // 1 已领取 2 扫码成功 3 核销成功
|
||||
},
|
||||
},
|
||||
activity: [], // 活动列表
|
||||
platformActivity: [], // 平台活动
|
||||
activityList: [],
|
||||
activitySum: 0, // 活动数量
|
||||
beer: null,
|
||||
result: null, // 扫码结果 code
|
||||
activityId: null, // 活动id
|
||||
platformActivityId: null, // 平台活动id
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
};
|
||||
},
|
||||
onLoad({
|
||||
result,
|
||||
latitude,
|
||||
longitude
|
||||
}) {
|
||||
this.result = result
|
||||
this.latitude = latitude
|
||||
this.longitude = longitude
|
||||
// 查询二维码信息
|
||||
this.getQrcodeInfoFun(result)
|
||||
},
|
||||
methods: {
|
||||
// 查询二维码信息
|
||||
getQrcodeInfoFun(code) {
|
||||
getQrcodeInfo({
|
||||
code,
|
||||
latitude: this.latitude,
|
||||
longitude: this.longitude
|
||||
}).then(res => {
|
||||
console.log(res.data)
|
||||
this.info = res.data
|
||||
this.beer = res.data.beer
|
||||
this.activity = res.data.activity || [] // 活动列表
|
||||
this.platformActivity = res.data.platformActivity || [] // 平台活动
|
||||
if (this.activity && this.activity.length > 0) {
|
||||
this.activitySum += this.activity.length
|
||||
this.activityId = this.activity[0].id
|
||||
}
|
||||
if (this.platformActivity && this.platformActivity.length > 0) {
|
||||
this.activitySum += this.platformActivity.length
|
||||
this.platformActivityId = this.platformActivity[0].id
|
||||
}
|
||||
// if (this.activitySum > 0) return
|
||||
// if (res.data.qrcode.qrcodeStatus == 0) { // 未核销
|
||||
// this.consumeCodeFun(code)
|
||||
// } else
|
||||
// if (res.data.qrcode.qrcodeStatus == 1) { // 已核销
|
||||
// uni.showToast({
|
||||
// title: '该二维码已核销',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// } else if (res.data.qrcode.qrcodeStatus == 2) { // 已失效
|
||||
// uni.showToast({
|
||||
// title: '该二维码已失效',
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
}).catch(err => {
|
||||
console.log(err, 'err')
|
||||
this.showError = true
|
||||
})
|
||||
},
|
||||
// 核销二维码
|
||||
consumeCodeFun(code) {
|
||||
consumeCode({
|
||||
code,
|
||||
latitude: this.latitude,
|
||||
longitude: this.longitude
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'none'
|
||||
})
|
||||
this.getQrcodeInfoFun(code)
|
||||
})
|
||||
},
|
||||
// 立即领取
|
||||
handleReceive() {
|
||||
const data = {
|
||||
code: this.result,
|
||||
latitude: this.latitude,
|
||||
longitude: this.longitude
|
||||
}
|
||||
if (this.activityId) {
|
||||
data.activityId = this.activityId
|
||||
}
|
||||
if (this.platformActivityId) {
|
||||
data.platformActivityId = this.platformActivityId
|
||||
}
|
||||
consumeCode(data).then(res => {
|
||||
console.log(res)
|
||||
uni.showToast({
|
||||
title: '领取成功',
|
||||
icon: 'none'
|
||||
})
|
||||
this.getQrcodeInfoFun(this.result)
|
||||
})
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
// 选择品牌方活动
|
||||
selectPPF(item) {
|
||||
this.activityId = item.id
|
||||
},
|
||||
// 选择平台活动
|
||||
selectPlatform(item) {
|
||||
this.platformActivityId = item.id
|
||||
},
|
||||
// 生成酒单
|
||||
toWinelist() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesActivity/winelist?beerId=' + this.beer.id
|
||||
})
|
||||
},
|
||||
share() {
|
||||
uni.downloadFile({
|
||||
url: this.beer.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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
height: 100vh;
|
||||
background-color: #FDFDFD;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 0rpx 26rpx 60rpx;
|
||||
.err-title {
|
||||
font-family: Roboto;
|
||||
font-size: 36rpx;
|
||||
font-weight: normal;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.err-btn {
|
||||
font-family: Roboto;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
color: #0B0E26;
|
||||
border-radius: 12rpx;
|
||||
background: #39E5B1;
|
||||
width: 200rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
// 已领取
|
||||
.lq-state-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 92rpx;
|
||||
padding-top: 116rpx;
|
||||
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 扫码成功
|
||||
.scs-state-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
padding-top: 30rpx;
|
||||
font-size: 36rpx;
|
||||
color: #1E2019;
|
||||
font-weight: bold;
|
||||
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-right: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
border-radius: 30rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #F2F2F2;
|
||||
box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
padding: 16rpx 32rpx;
|
||||
|
||||
.cover {
|
||||
width: 208rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
padding: 12rpx 40rpx 12rpx 18rpx;
|
||||
font-size: 20rpx;
|
||||
color: #5E5F60;
|
||||
background: rgba(254, 224, 52, 0.36);
|
||||
border-radius: 20rpx;
|
||||
|
||||
.icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.active-box {
|
||||
border-radius: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #F2F2F2;
|
||||
box-shadow: 0px 5.47px 43.78px 0px rgba(0, 0, 0, 0.05);
|
||||
padding: 24rpx 38rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.title {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: #3D3D3D;
|
||||
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
color: rgba(151, 151, 151, 0.749);
|
||||
}
|
||||
}
|
||||
|
||||
// .card {
|
||||
// border-radius: 40rpx;
|
||||
// background: #FFFFFF;
|
||||
// box-sizing: border-box;
|
||||
// border: 1px solid #F2F2F2;
|
||||
// .avatar {
|
||||
// width: 160rpx;
|
||||
// height:160rpx;
|
||||
// border-radius: 8rpx;
|
||||
// }
|
||||
// }
|
||||
.ptActive {
|
||||
border: 1px solid #71F4B4;
|
||||
padding: 14rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.activity-item {
|
||||
width: 673rpx;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #FEE034;
|
||||
padding: 14rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.activity-item {
|
||||
width: 673rpx;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// 累积活动
|
||||
.activity-item {
|
||||
border-radius: 20rpx;
|
||||
background: #FDFDFD;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #F2F2F2;
|
||||
width: 694rpx;
|
||||
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: 470rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lq-tip {
|
||||
border-radius: 20rpx;
|
||||
background: rgba(233, 233, 233, 0.38);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(233, 233, 233, 0.3804);
|
||||
padding: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: #5E5F60;
|
||||
margin-bottom: 14rpx;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 30rpx;
|
||||
box-sizing: border-box;
|
||||
width: 306rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #FEE034;
|
||||
font-size: 28rpx;
|
||||
color: #1E2019;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 转赠品状态
|
||||
.gift-state {
|
||||
.img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
text {
|
||||
color: #DE3C4B;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 赠品按钮样式
|
||||
.gift-btn {
|
||||
background-color: #DE3C4B !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -20,6 +20,7 @@
|
||||
:autoplay="true"
|
||||
:interval="2000"
|
||||
circular
|
||||
@click="toCoinCollect"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in sortedBrandCoins" :key="index">
|
||||
<view class="brand-content">
|
||||
@ -615,6 +616,13 @@ export default {
|
||||
} else {
|
||||
this.isLoadAll = true
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到啤酒币收集页面
|
||||
toCoinCollect() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesCoin/coinCollect'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,29 @@
|
||||
<template>
|
||||
<view class="page-content">
|
||||
<!-- <view class="flex justify-end align-center top">
|
||||
<text class="cuIcon-filter" style="color:rgba(61, 61, 61, 1);font-size: 36rpx;"></text>
|
||||
</view> -->
|
||||
<scroll-view scroll-y class="coin-container flex justify-start flex-wrap" lower-threshold="20"
|
||||
@scrolltolower="pageChange">
|
||||
<scroll-view scroll-y class="coin-container" lower-threshold="20" @scrolltolower="pageChange">
|
||||
<template v-if="coinList.length > 0">
|
||||
<view class="coin-item" v-for="(item, index) in coinList" :key="index">
|
||||
<image :src="item.brandLogo" class="cover"></image>
|
||||
<view style="flex: 1">
|
||||
<view class="flex flex-col justify-between">
|
||||
<text class="title">{{item.brandName || '--'}}</text>
|
||||
|
||||
<text class="sub">{{item.goodsNum}}款商品可兑换</text>
|
||||
<view class="coin-list">
|
||||
<view class="coin-item" v-for="(item, index) in coinList" :key="index" @click="toBrandHome(item)">
|
||||
<view class="coin-item__left">
|
||||
<image :src="item.brandLogo" class="brand-logo" mode="aspectFill"></image>
|
||||
<view class="brand-info">
|
||||
<text class="brand-name">{{item.brandName || '--'}}</text>
|
||||
<text class="exchange-info">{{item.goodsNum}}款商品可兑换</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coin-amount">
|
||||
<text class="amount">{{item.balance}}</text>
|
||||
<text class="cuIcon-rechargefill coin-icon"></text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view>
|
||||
<text class="num">{{item.balance}}</text>
|
||||
<text class="cuIcon-rechargefill"
|
||||
style="color:rgba(255, 213, 43, 1);font-size: 36rpx;margin-left: 6rpx;"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view class="flex align-center justify-center"
|
||||
style="height: 140rpx;width: 100%;color: #747783;font-size: 24rpx;">暂无品牌方啤酒币</view>
|
||||
<view class="empty-state">
|
||||
<image src="/static/empty.png" mode="aspectFit" class="empty-image"></image>
|
||||
<text class="empty-text">暂无品牌方啤酒币</text>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@ -54,66 +51,108 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
// 跳转到品牌方页面
|
||||
toBrandHome(item) {
|
||||
if (!item || !item.breweryId) return
|
||||
uni.navigateTo({
|
||||
url: `/pages/index/brandHome?breweryId=${item.breweryId}&tab=3`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-content {
|
||||
padding: 20rpx 0;
|
||||
background: #F2F2F2;
|
||||
;
|
||||
height: 100vh;
|
||||
.page-content {
|
||||
min-height: 100vh;
|
||||
background: #F6F7FB;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding-right: 50rpx;
|
||||
margin-bottom: 28rpx;
|
||||
.coin-container {
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.coin-container {
|
||||
.coin-list {
|
||||
.coin-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.coin-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #FFF;
|
||||
padding: 32rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.cover {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
// box-shadow: 0px 8px 20px 0px rgba(43, 45, 51, 0.16);
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 36rpx;
|
||||
font-weight: 350;
|
||||
line-height: 48rpx;
|
||||
color: #0B0E26;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
line-height: 48rpx;
|
||||
color: #2B2D33;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-family: Source Han Sans;
|
||||
font-size: 24rpx;
|
||||
font-weight: 350;
|
||||
line-height: 40rpx;
|
||||
color: #5E5F60;
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 24rpx;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.brand-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.brand-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.exchange-info {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.coin-amount {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.amount {
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
color: #FFD700;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 200rpx;
|
||||
|
||||
.empty-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -90,7 +90,7 @@
|
||||
<image src="@/static/beerCoin.png" class="coin-icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-button" @click="handleRedeem">
|
||||
<view class="action-button" @click="handleRedeem" :class="{'disabled': !canRedeem}">
|
||||
<text>立即兑换</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -253,6 +253,11 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
canRedeem() {
|
||||
return this.isLogin && this.coinBalance.balance && this.coinBalance.balance >= this.detail.redeemedNum
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -540,6 +545,13 @@
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #CCCCCC;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 12 KiB |
BIN
static/tabbar/.DS_Store
vendored
BIN
static/tabbar/.DS_Store
vendored
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user