Skip to content

G
groupPurchase-miniapp
Commit ec72c5c5 authored by 陈宗胤（贵阳日报）'s avatar 陈宗胤（贵阳日报）
Browse files
Options

金刚区分类ui

parent 6192296c
Show whitespace changes
Inline Side-by-side
Showing with 558 additions and 27 deletions
src/Components/index/Classification.vue 0 → 100644
View file @ ec72c5c5
<template>
<view class="classification" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['全部烧烤烤肉', '烤肉', '烤鱼', '烤串']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.classification {
position: absolute;
top: 100%;
// width: 100%;
// height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/Components/index/Position.vue
View file @ ec72c5c5
<template> <template>
<view class="pop-upNotification"> <view class="pop-upNotification" :style="{ width: width }">
<view class="left-classification"> <view class="left-classification">
<view @tap="choice(0)" class="option" :class="light2 === 0 ? 'light2' : ''">推荐</view> <view @tap="choice(0)" class="option" :class="light2 === 0 ? 'light2' : ''">推荐</view>
<view @tap="choice(1)" class="option" :class="light2 === 1 ? 'light2' : ''">行政区</view> <view @tap="choice(1)" class="option" :class="light2 === 1 ? 'light2' : ''">行政区</view>
...@@ -51,7 +51,13 @@ ...@@ -51,7 +51,13 @@
</template> </template>
<script setup> <script setup>
import {} from 'vue'; import { defineProps } from 'vue';
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const light2 = ref(0); const light2 = ref(0);
const light3 = ref(0); const light3 = ref(0);
const items = reactive(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']); const items = reactive(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
...@@ -86,7 +92,7 @@ const selectItem2 = (selectItem) => { ...@@ -86,7 +92,7 @@ const selectItem2 = (selectItem) => {
.pop-upNotification { .pop-upNotification {
position: absolute; position: absolute;
top: 100%; top: 100%;
width: 710rpx; // width: 710rpx;
height: 780rpx; height: 780rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx; border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff; background: #ffffff;
......
src/Components/index/Sort.vue 0 → 100644
View file @ ec72c5c5
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/components/index/Search.vue
View file @ ec72c5c5
<template> <template>
<view class="search"> <view class="search" :style="{ background: background }">
<image <wd-icon name="thin-arrow-left" class="icon" @tap="back" :style="{ color: backIcon }"></wd-icon>
@tap="test2"
class="arrow"
src="../../static/index/arrow.png"
mode="aspectFit|aspectFill|widthFix"
/>
<slot></slot> <slot></slot>
<view class="searchBox"> <view class="searchBox">
<image <image
...@@ -20,8 +15,17 @@ ...@@ -20,8 +15,17 @@
<script setup> <script setup>
import { useCountStore } from '@/store'; import { useCountStore } from '@/store';
import { onMounted } from 'vue'; import { onMounted, defineProps } from 'vue';
const props = defineProps({
background: {
type: String,
default: '',
},
backIcon: {
type: String,
default: 'white',
},
});
const title = ref('小程序平台'); const title = ref('小程序平台');
const { countInfo, addCount } = useCountStore(); const { countInfo, addCount } = useCountStore();
const test = ref(''); const test = ref('');
...@@ -40,6 +44,13 @@ const test2 = () => { ...@@ -40,6 +44,13 @@ const test2 = () => {
url: '/pages/shop/shop', url: '/pages/shop/shop',
}); });
}; };
// 返回上一级
const back = () => {
xma.navigateBack({
delta: 1,
});
};
function toUIComponentsDoc() { function toUIComponentsDoc() {
window.open('https://wot-design-uni.netlify.app/component/button.html'); window.open('https://wot-design-uni.netlify.app/component/button.html');
} }
...@@ -53,7 +64,7 @@ function onHandleClick() { ...@@ -53,7 +64,7 @@ function onHandleClick() {
.search { .search {
width: 710rpx; width: 710rpx;
height: 80rpx; height: 80rpx;
background: rgba(255, 255, 255, 0.8); // background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx 16rpx 16rpx 16rpx; border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8; opacity: 0.8;
margin: 0 auto; margin: 0 auto;
...@@ -66,6 +77,9 @@ function onHandleClick() { ...@@ -66,6 +77,9 @@ function onHandleClick() {
width: 15rpx; width: 15rpx;
height: 24rpx; height: 24rpx;
} }
.icon {
font-size: 28rpx;
}
.searchBox { .searchBox {
opacity: 1; opacity: 1;
width: 256rpx; width: 256rpx;
......
src/pages.json
View file @ ec72c5c5
...@@ -12,6 +12,12 @@ ...@@ -12,6 +12,12 @@
"navigationBarTitleText": "小程序平台" "navigationBarTitleText": "小程序平台"
} }
}, },
{
"path": "pages/index/foodClassification",
"style": {
"navigationBarTitleText": ""
}
},
{ {
"path": "pages/shop/shop", "path": "pages/shop/shop",
"style": { "style": {
......
src/pages/index/foodClassification.vue 0 → 100644
View file @ ec72c5c5
<template>
<div class="container">
<view class="bg-img"></view>
<view class="top">
<!-- 搜索 -->
<Search>
<image class="food" src="../../static/index/skimg.png" mode="widthFix" />
</Search>
<!-- 类别选择 -->
<scroll-view class="scroll-x" scroll-x="true" @scroll="scroll">
<view class="foodCard" v-for="(item, index) in 5" :key="index">
<image class="test5" src="../../static/index/test5.png" mode="widthFix" />
<view class="content">
<text class="title">【热销】贵阳火神烧烤单人畅吃</text>
<view class="labelBox">
<view class="item" v-for="(item, index) in 4" :key="index">30天有效</view>
</view>
<view class="price">
<view class="discounts">4.5折</view>
<text class="text">￥39.9</text>
<text class="text2">￥58</text>
<view class="btn">
<text class="text3">仅剩余5张</text>
<image class="qiang" src="../../static/index/qiang.png" mode="widthFix" />
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="bootom">
<view class="bootom-top">
<view class="option" @tap="locationFiltering(0)">
<text :class="{ rotate: rotate }">全部烧烤烤肉</text>
<wd-icon
:class="{ rotate: rotate }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<view class="option" @tap="locationFiltering(1)">
<text :class="{ rotate: rotate2 }">附近</text>
<wd-icon
:class="{ rotate: rotate2 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
<view class="option" @tap="locationFiltering(2)">
<text :class="{ rotate: rotate3 }">智能排序</text>
<wd-icon
:class="{ rotate: rotate3 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view>
</view>
<view class="bootom-bottom">
<view
@tap="choice(index)"
class="item"
:class="{ light: active === index }"
v-for="(item, index) in business"
:key="index"
>
{{ item }}
</view>
</view>
<!-- 美食类别 -->
<Classification v-show="rotate" />
<!-- 附近筛选 -->
<Position v-show="rotate2" />
<!-- 排序筛选 -->
<Sort v-show="rotate3" />
</view>
<FoodDetails :cardData="cardData" />
</div>
</template>
<script setup>
import {} from 'vue';
import FoodDetails from '../../components/index/FoodDetails.vue';
import Search from '../../components/index/Search.vue';
import Classification from '../../components/index/Classification.vue';
import Position from '../../components/index/Position.vue';
import Sort from '../../components/index/Sort.vue';
const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
const active = ref(null);
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const choice = (index) => {
active.value = index;
};
const cardData = reactive([
{
text: '测试',
},
{
text: '测试',
},
{
text: '测试',
},
]);
const locationFiltering = (index) => {
switch (index) {
case 0:
rotate.value = !rotate.value;
rotate2.value = false;
rotate3.value = false;
break;
case 1:
rotate2.value = !rotate2.value;
rotate.value = false;
rotate3.value = false;
break;
case 2:
rotate3.value = !rotate3.value;
rotate.value = false;
rotate2.value = false;
break;
}
};
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.container {
.bg-img {
width: 100%;
height: 440rpx;
background: url('../../static/index/barbecueBg.png') no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
}
.top {
width: 100%;
height: 666rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
overflow: hidden;
.food {
width: 178rpx;
height: 45rpx;
margin-left: 25rpx;
}
.scroll-x {
padding-top: 26rpx;
white-space: nowrap;
width: 100%;
.foodCard {
width: 536rpx;
height: 516rpx;
border-radius: 16rpx;
background: #ffffff;
margin-left: 20rpx;
display: inline-block;
box-sizing: border-box;
overflow: hidden;
.test5 {
width: 100%;
}
.content {
display: flex;
flex-direction: column;
box-sizing: border-box;
.title {
font-size: 24rpx;
color: #3d3d3d;
font-weight: bold;
margin-left: 10rpx;
margin-top: 8rpx;
}
.labelBox {
display: flex;
margin-left: 20rpx;
align-items: center;
margin-top: 16rpx;
.item {
width: 100rpx;
height: 36rpx;
border-radius: 6rpx;
background: #fcdbdb;
font-size: 20rpx;
color: #fa5151;
text-align: center;
line-height: 36rpx;
margin-right: 8rpx;
}
}
.price {
display: flex;
align-items: center;
padding-left: 20rpx;
margin-top: 16rpx;
.discounts {
width: 56rpx;
height: 36rpx;
border-radius: 6rpx 6rpx 0rpx 6rpx;
background: #fa5151;
color: #ffffff;
font-size: 20rpx;
text-align: center;
line-height: 36rpx;
}
.text {
font-size: 28rpx;
color: #fa5151;
font-weight: bold;
margin-left: 12rpx;
}
.text2 {
text-decoration: line-through;
font-size: 22rpx;
margin-left: 12rpx;
color: #abaaaa;
}
.btn {
position: relative;
min-width: 224rpx;
height: 48rpx;
border-radius: 10rpx;
background: #fcdbdb;
box-sizing: border-box;
margin-left: 66rpx;
.text3 {
font-size: 20rpx;
color: #fa5151;
line-height: 47rpx;
margin-left: 14rpx;
}
.qiang {
width: 94rpx;
position: absolute;
right: 0;
}
}
}
}
}
}
}
.bootom {
height: 124rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
border-radius: 6rpx;
background: #ffffff;
position: relative;
margin-top: 10rpx;
.bootom-top {
display: flex;
align-items: center;
padding: 0 20rpx;
justify-content: space-between;
.option {
text {
font-size: 24rpx;
color: #343434;
}
.red {
color: #fa5151;
}
.icon {
color: #d8d8d8;
transform: rotate(-180deg);
transition: all 0.3s linear;
}
.rotate {
transform: rotate(0deg);
transition: all 0.3s linear;
color: #fa5151;
}
}
}
.bootom-bottom {
display: flex;
align-items: center;
padding-left: 40rpx;
.item {
height: 36rpx;
width: 96rpx;
border-radius: 6rpx;
font-size: 20rpx;
text-align: center;
line-height: 36rpx;
color: #abaaaa;
background: #eeeeee;
margin-right: 20rpx;
}
.light {
color: #ff7c00;
background: #ffdcbb;
}
}
}
}
</style>
src/pages/index/index.vue
View file @ ec72c5c5
...@@ -2,19 +2,29 @@ ...@@ -2,19 +2,29 @@
<view class="container"> <view class="container">
<view class="top"> <view class="top">
<!-- 搜索 --> <!-- 搜索 -->
<Search> <Search background="rgba(255, 255, 255, 0.8)" backIcon="black">
<image class="food" src="../../static/index/food.png" mode="widthFix" /> <image class="food" src="../../static/index/food.png" mode="widthFix" />
</Search> </Search>
<!-- 类别选择 --> <!-- 类别选择 -->
<view class="classification"> <view class="classification">
<view class="classification-top"> <view class="classification-top">
<view class="choice" v-for="(item, index) in classificationT" :key="index"> <view
@tap="jingang(index)"
class="choice"
v-for="(item, index) in classificationT"
:key="index"
>
<image class="imgs" :src="'../../static/index/' + item.img + '.png'" mode="widthFix" /> <image class="imgs" :src="'../../static/index/' + item.img + '.png'" mode="widthFix" />
<text class="introduce">{{ item.text }}</text> <text class="introduce">{{ item.text }}</text>
</view> </view>
</view> </view>
<view class="classification-bottom"> <view class="classification-bottom">
<view class="choice" v-for="(item, index) in classificationB" :key="index"> <view
@tap="jingang(index)"
class="choice"
v-for="(item, index) in classificationB"
:key="index"
>
<image class="imgs" :src="'../../static/index/' + item.img + '.png'" mode="widthFix" /> <image class="imgs" :src="'../../static/index/' + item.img + '.png'" mode="widthFix" />
<text class="introduce">{{ item.text }}</text> <text class="introduce">{{ item.text }}</text>
</view> </view>
...@@ -86,7 +96,7 @@ ...@@ -86,7 +96,7 @@
name="fill-arrow-down" name="fill-arrow-down"
size="22rpx" size="22rpx"
class="icon" class="icon"
:class="rotate ? 'rotate' : ''" :class="{ rotate: rotate }"
></wd-icon> ></wd-icon>
</view> </view>
<view class="box"> <view class="box">
...@@ -153,8 +163,22 @@ const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/gu ...@@ -153,8 +163,22 @@ const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/gu
const choice = (index) => { const choice = (index) => {
light.value = index; light.value = index;
}; };
// 金刚区分类选择
const jingang = (index) => {
switch (index) {
case 0:
xma.navigateTo({
url: '/pages/index/foodClassification',
});
break;
case 1:
xma.navigateTo({});
break;
case 2:
xma.navigateTo({});
}
};
const locationFiltering = () => { const locationFiltering = () => {
console.log('打印', 1111);
rotate.value = !rotate.value; rotate.value = !rotate.value;
}; };
const handleClick = (e) => { const handleClick = (e) => {
......
src/pages/index/listFood.vue
View file @ ec72c5c5
...@@ -6,17 +6,32 @@ ...@@ -6,17 +6,32 @@
</view> </view>
<view class="bootom"> <view class="bootom">
<view class="bootom-top"> <view class="bootom-top">
<view class="option"> <view class="option" @tap="locationFiltering(0)">
<text class="">全部烧烤烤肉</text> <text :class="{ rotate: rotate }">全部烧烤烤肉</text>
<wd-icon name="fill-arrow-down" size="24rpx" class="icon"></wd-icon> <wd-icon
:class="{ rotate: rotate }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view> </view>
<view class="option"> <view class="option" @tap="locationFiltering(1)">
<text class="">附近</text> <text :class="{ rotate: rotate2 }">附近</text>
<wd-icon name="fill-arrow-down" size="24rpx" class="icon"></wd-icon> <wd-icon
:class="{ rotate: rotate2 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view> </view>
<view class="option"> <view class="option" @tap="locationFiltering(2)">
<text class="">智能排序</text> <text :class="{ rotate: rotate3 }">智能排序</text>
<wd-icon name="fill-arrow-down" size="24rpx" class="icon"></wd-icon> <wd-icon
:class="{ rotate: rotate3 }"
name="fill-arrow-down"
size="24rpx"
class="icon"
></wd-icon>
</view> </view>
</view> </view>
<view class="bootom-bottom"> <view class="bootom-bottom">
...@@ -30,6 +45,12 @@ ...@@ -30,6 +45,12 @@
{{ item }} {{ item }}
</view> </view>
</view> </view>
<!-- 美食类别 -->
<Classification v-show="rotate" />
<!-- 附近筛选 -->
<Position v-show="rotate2" />
<!-- 排序筛选 -->
<Sort v-show="rotate3" />
</view> </view>
</view> </view>
<FoodDetails :cardData="cardData" /> <FoodDetails :cardData="cardData" />
...@@ -39,10 +60,16 @@ ...@@ -39,10 +60,16 @@
<script setup> <script setup>
import {} from 'vue'; import {} from 'vue';
import FoodDetails from '../../components/index/FoodDetails.vue'; import FoodDetails from '../../components/index/FoodDetails.vue';
import Classification from '../../components/index/Classification.vue';
import Position from '../../components/index/Position.vue';
import Sort from '../../components/index/Sort.vue';
const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']); const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
const active = ref(null); const active = ref(null);
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const back = () => { const back = () => {
xma.navigateBack({ xma.navigateBack({
delta: 1, delta: 1,
...@@ -62,6 +89,26 @@ const cardData = reactive([ ...@@ -62,6 +89,26 @@ const cardData = reactive([
text: '测试', text: '测试',
}, },
]); ]);
const locationFiltering = (index) => {
switch (index) {
case 0:
rotate.value = !rotate.value;
rotate2.value = false;
rotate3.value = false;
break;
case 1:
rotate2.value = !rotate2.value;
rotate.value = false;
rotate3.value = false;
break;
case 2:
rotate3.value = !rotate3.value;
rotate.value = false;
rotate2.value = false;
break;
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -89,6 +136,7 @@ page { ...@@ -89,6 +136,7 @@ page {
justify-content: space-around; justify-content: space-around;
border-radius: 6rpx; border-radius: 6rpx;
background: #ffffff; background: #ffffff;
position: relative;
.bootom-top { .bootom-top {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -99,8 +147,18 @@ page { ...@@ -99,8 +147,18 @@ page {
font-size: 24rpx; font-size: 24rpx;
color: #343434; color: #343434;
} }
.red {
color: #fa5151;
}
.icon { .icon {
color: #d8d8d8; color: #d8d8d8;
transform: rotate(-180deg);
transition: all 0.3s linear;
}
.rotate {
transform: rotate(0deg);
transition: all 0.3s linear;
color: #fa5151;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment