149 lines
3.4 KiB
Vue
149 lines
3.4 KiB
Vue
<template>
|
|
<JyPopup ref="popup" type="bottom" title="筛选">
|
|
<view class="content">
|
|
<!-- 筛选内容 -->
|
|
<JyLinkage v-if="scrollList.length > 0" ref="jy_linkage" class="jy-linkage" :scrollList="scrollList"
|
|
@clickTips="onGoodItem">
|
|
</JyLinkage>
|
|
<!-- 幽灵盒子 -->
|
|
<view class="jy-bottom-btn-ghost"></view>
|
|
<view class="btn-group">
|
|
<view class="reset" @click="reset">重置</view>
|
|
<view class="determine" @click="close">确定</view>
|
|
</view>
|
|
</view>
|
|
</JyPopup>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import JyLinkage from '../jy-linkage'
|
|
import JyPopup from '@/components/public/jy-popup'
|
|
const popup = ref(null)
|
|
const jy_linkage = ref(null)
|
|
const scrollList = ref([{
|
|
"id": 6905,
|
|
"goods_list": [
|
|
{
|
|
"id": 65825,
|
|
"content": "享早餐指定饮品半价",
|
|
"name": "晨间套餐",
|
|
"tips": ['1', '2', '3']
|
|
}
|
|
],
|
|
"name": "早晨的享受"
|
|
},
|
|
{
|
|
"id": 6906,
|
|
"goods_list": [
|
|
{
|
|
"id": 65826,
|
|
"content": "购买牛角包,享咖啡买一送一",
|
|
"name": "午后小食",
|
|
"tips": ['1', '2', '3']
|
|
},
|
|
{
|
|
"id": 65827,
|
|
"content": "购买鸡蛋饼,享茶饮半价",
|
|
"name": "中午套餐",
|
|
"tips": ['1', '2', '3']
|
|
}
|
|
],
|
|
"name": "午间时光"
|
|
}])
|
|
const onGoodItem = (item) => {
|
|
console.log(item);
|
|
uni.showToast({
|
|
title: `点击了 ${item.name}`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
const reset = () => {
|
|
jy_linkage.value.resetTips()
|
|
}
|
|
const close = () => {
|
|
popup.value.close()
|
|
}
|
|
const open = () => {
|
|
popup.value.open()
|
|
}
|
|
defineExpose({
|
|
close, open
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #eee;
|
|
}
|
|
|
|
$bg-text: #F6F6F6;
|
|
|
|
.content {
|
|
width: 100%;
|
|
background: $uni-bg-color;
|
|
//上面两个圆角
|
|
border-top-left-radius: 50rpx;
|
|
border-top-right-radius: 50rpx;
|
|
|
|
.jy-linkage {
|
|
height: calc(100% - 120px);
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
font-weight: 600;
|
|
font-size: $uni-font-size-lg;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 30rpx;
|
|
display: inline-block;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.jy-bottom-btn-ghost {
|
|
height: 124rpx;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding-bottom: 40rpx;
|
|
width: 100%;
|
|
|
|
.determine {
|
|
width: 428rpx;
|
|
height: 84rpx;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
|
}
|
|
|
|
.reset {
|
|
/* 自动布局子元素 */
|
|
width: 234rpx;
|
|
height: 84rpx;
|
|
border-radius: 10rpx;
|
|
|
|
/* 自动布局 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #F6F8FE;
|
|
}
|
|
}
|
|
}
|
|
</style> |