topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加分类组件

This commit is contained in:
TOP糯米 2023-02-09 19:21:48 +08:00
parent 864146b790
commit b100ae86ee
24 changed files with 708 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/app-layout/app-login/app-login.vue → src/components/auth/login.vue
View File

@ -7,7 +7,7 @@
<script>
import { mapState } from "vuex";
export default {
name: "app-login",
name: "component-auth-login",
data() {
return {};
},

2
src/components/app-banner/app-banner.vue → src/components/banner/banner.vue
View File

@ -28,7 +28,7 @@
<script>
export default {
name: "app-slide",
name: "component-banner",
data() {
return {
currentIndex: 0,

266
src/components/cate/cate.vue Normal file
View File

@ -0,0 +1,266 @@
<template>
<view class="component-wrap" :style="{height: wrapHeight + 'px'}">
<view class="component-menu-wrap">
<scroll-view scroll-y class="component-tab-view menu-scroll-view" :scroll-top="scrollTop"
:scroll-into-view="itemId">
<view
class="component-tab-item"
v-for="(item, index) in data"
:key="index"
:class="[current == index ? 'component-tab-item-active' : '']"
@tap.stop="swichMenu(index)"
>
<text class="component-line-1">{{item.name}}</text>
</view>
</scroll-view>
<scroll-view
:scroll-top="scrollRightTop"
scroll-y
scroll-with-animation
class="right-box"
@scroll="rightScroll"
>
<view class="page-view">
<view
class="class-item"
v-for="(item, index) in data"
:id="'item' + index"
:key="index"
:style="{height: (index == data.length - 1 ? (cateType == 'parent' ? 'calc(100vh - 70rpx)' : '100vh') : 'auto')}"
>
<parent-tmpl v-if="cateType === 'parent'" :data="item" @clickParent="clickParent"></parent-tmpl>
<child-tmpl v-if="cateType === 'child'" :data="item" @clickChild="clickChild"></child-tmpl>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import ParentTmpl from "@/components/cate/template/parent"
import ChildTmpl from "@/components/cate/template/child"
export default {
name: "component-cate",
data() {
return {
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0, // tab标题的滚动条旧位置
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 50, // 左边菜单item的高度
itemId: "", // 栏目右边scroll-view用于滚动的id
arr: [], // 储存距离顶部高度的数组
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
wrapHeight: 0,
}
},
props: {
cateType: {
type: String,
default: "parent"
},
offsetHeight: {
type: Number,
default: 0
},
data: {
type: Array,
default: []
}
},
components: {
ParentTmpl,
ChildTmpl
},
created() {},
mounted() {
this.getMenuItemTop();
let headerHeight = 40;
const { windowHeight, statusBarHeight } = uni.getSystemInfoSync();
this.wrapHeight = windowHeight - headerHeight - this.offsetHeight;
// #ifdef MP-WEIXIN
this.wrapHeight = this.wrapHeight - statusBarHeight;
// #endif
},
destroyed() {},
methods: {
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
this.getElRect(elClass);
return;
}
this[dataVal] = res.height;
resolve();
}).exec();
})
},
/**
* 获取右边菜单每个item到顶部的距离
* 储存到 arr 数组里面用于后面滚动判断
*/
getMenuItemTop() {
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery().in(this);
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if(!rects.length) {
this.getMenuItemTop();
return ;
}
rects.forEach((rect) => {
// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
this.arr.push(rect.top - rects[0].top);
// this.arr.push(rect.top)
resolve();
})
}).exec()
})
},
/**
* 观测元素相交状态
* 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
* 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
*/
async observer() {
this.data.map((val, index) => {
let observer = uni.createIntersectionObserver(this);
observer.relativeTo('.right-box', {
top: 0
}).observe('#item' + index, res => {
if (res.intersectionRatio > 0) {
let id = res.id.substring(4);
this.leftMenuStatus(id);
}
})
})
},
/**
* 设置左边菜单的滚动状态
* @index 传入的 ID
*/
async leftMenuStatus(index) {
this.current = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('component-tab-item', 'menuItemHeight');
}
// 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
/**
* 点击左边的栏目切换
* @index 传入的 ID
*/
async swichMenu(index) {
if(this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function(){
this.scrollRightTop = this.arr[index];
this.current = index;
this.leftMenuStatus(index);
})
},
/**
* 右边菜单滚动
* 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
*/
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
if(this.arr.length == 0) {
await this.getMenuItemTop();
}
if(!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight');
}
// scrollHeight为右边菜单垂直中点位置
// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
// scrollHeight为右边菜单头部位置
let scrollHeight = e.detail.scrollTop + 10;
for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i];
let height2 = this.arr[i + 1];
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i);
return ;
}
}
},
clickParent(id) {
this.$emit('clickParent', id);
},
clickChild(id) {
this.$emit('clickChild', id);
}
},
};
</script>
<style lang="less" scoped>
.component-wrap {
display: flex;
flex-direction: column;
width: 100%;
}
.component-search-box {
padding: 18rpx 30rpx;
}
.component-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.component-tab-view {
width: 200rpx;
height: 100%;
background-color: #F6F6F6;
}
.component-tab-item {
height: 100rpx;
box-sizing: border-box;
padding-left: 20rpx;
display: flex;
align-items: center;
font-size: 24rpx;
color: #8B8B8B;
font-weight: 400;
line-height: 1;
}
.component-tab-item-active {
position: relative;
color: #4B65ED;
background: #FFFFFF;
}
.component-tab-item-active::before {
content: "";
position: absolute;
border-left: 4px solid #4B65ED;
height: 24rpx;
left: 0;
top: 38rpx;
}
.component-tab-view {
height: 100%;
}
.right-box {
width: 550rpx;
}
.page-view {
padding-right: 16rpx;
}
.class-item {
background-color: #ffffff;
padding: 36rpx 32rpx 0 32rpx;
}
</style>

79
src/components/cate/template/child.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<view>
<view class="item-title">
<text>{{data.name}}</text>
</view>
<view class="item-container">
<view
class="thumb-box"
v-for="(child, index1) in data.child"
:key="index1"
@click="clickItem(child.id, child.name)"
>
<image class="item-menu-image" :src="child.icon" mode=""></image>
<view class="item-menu-name">{{child.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "component-cate-template-child",
data() {
return {};
},
props: {
data: {
type: Object,
default: []
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
clickItem(id, name) {
this.$emit('clickParent', id);
}
},
};
</script>
<style lang="less" scoped>
.item-title {
font-size: 26rpx;
color: #8B8B8B;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
margin-top: 40rpx;
margin-right: 40rpx;
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #D8D8D8;
}
.item-menu-name {
margin-top: 15rpx;
font-weight: normal;
color: #333333;
font-size: 24rpx;
}
</style>

80
src/components/cate/template/parent.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<view>
<view class="item-title">
<text>{{data.name}}</text>
</view>
<view class="item-container">
<view
class="thumb-box"
v-for="(child, index1) in data.child"
:key="index1"
@click="clickItem(child.id, child.name)"
>
<image class="item-menu-image" :src="child.icon" mode=""></image>
<view class="item-menu-name">{{child.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "component-cate-template-parent",
data() {
return {};
},
props: {
data: {
type: Object,
default: []
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
clickItem(id, name) {
this.$emit('clickParent', id);
}
},
};
</script>
<style lang="less" scoped>
.item-title {
font-size: 26rpx;
color: #010101;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 130rpx;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 40rpx;
margin-right: 40rpx;
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #D8D8D8;
}
.item-menu-name {
margin-top: 15rpx;
font-weight: normal;
color: #333333;
font-size: 24rpx;
}
</style>

22
src/components/app-layout/app-layout.vue → src/components/layout/layout.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="page-layout">
<view class="page-layout" :style="{backgroundColor: pageBackgroundColor}">
<view
class="page-header"
:class="[textColor]"
@ -7,14 +7,22 @@
>
<!-- 首页选择地址 -->
<block v-if="btnType === 'city'">
<view class="page-index-btn change-city" :style="{height: header.height + 'rpx'}" @click="changeCity">
<view
class="page-index-btn change-city"
:style="{height: header.height + 'rpx'}"
@click="changeCity"
>
<text class="iconfont icon-31dingwei"></text>
<text class="city">成都市</text>
</view>
</block>
<!-- 正常返回按钮 -->
<block v-if="btnType === 'back'">
<view class="page-index-btn back" :style="{height: header.height + 'rpx'}" @click="onClick">
<view
class="page-index-btn back"
:style="{height: header.height + 'rpx'}"
@click="onClick"
>
<text class="iconfont icon-fanhui"></text>
</view>
</block>
@ -31,7 +39,7 @@
<script>
export default {
name: "app-layout",
name: "component-layout",
data() {
return {
header: {
@ -43,6 +51,10 @@ export default {
},
components: {},
props: {
pageBackgroundColor: {
type: String,
default: "unset",
},
customBtn: {
type: Boolean,
default: false,
@ -104,7 +116,7 @@ export default {
margin: 0 auto;
/* #ifdef H5 */
// 修复自定义tabBar后的遮挡问题
padding-bottom: calc(@tabBarHeight - 50px);
// padding-bottom: calc(@tabBarHeight - 50px);
/* #endif */
}
.page-header.dark {

20
src/pages.json
View File

@ -20,15 +20,21 @@
}
},
{
"path": "pages/auth/pageA",
"path": "pages/member/address",
"style": {
"navigationBarTitleText": "我的"
"navigationBarTitleText": "分类"
}
},
{
"path": "pages/auth/pageB",
"path": "pages/service/cate",
"style": {
"navigationBarTitleText": "我的"
"navigationBarTitleText": "分类"
}
},
{
"path": "pages/service/list",
"style": {
"navigationBarTitleText": "分类"
}
}
],
@ -59,19 +65,19 @@
"text": "首页"
},
{
"pagePath": "pages/auth/auth",
"pagePath": "pages/service/cate",
"iconPath": "static/temp/tabbar/2.png",
"selectedIconPath": "static/temp/tabbar/2a.png",
"text": "分类"
},
{
"pagePath": "pages/auth/pageA",
"pagePath": "pages/auth/auth",
"iconPath": "static/temp/tabbar/3.png",
"selectedIconPath": "static/temp/tabbar/3a.png",
"text": "联保"
},
{
"pagePath": "pages/auth/pageB",
"pagePath": "pages/member/address",
"iconPath": "static/temp/tabbar/4.png",
"selectedIconPath": "static/temp/tabbar/4a.png",
"text": "订单"

2
src/pages/auth/auth.vue
View File

@ -5,7 +5,7 @@
</template>
<script>
import AppLayout from "@/components/app-layout/app-layout";
import AppLayout from "@/components/layout/layout";
export default {
name: "auth",
data() {

20
src/pages/auth/pageA.vue
View File

@ -1,20 +0,0 @@
<template></template>
<script>
export default {
name: "pageA",
data() {
return {};
},
components: {},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped>
</style>

20
src/pages/auth/pageB.vue
View File

@ -1,20 +0,0 @@
<template></template>
<script>
export default {
name: "pageB",
data() {
return {};
},
components: {},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped>
</style>

4
src/pages/index/index.vue
View File

@ -69,8 +69,8 @@
</template>
<script>
import AppLayout from "@/components/app-layout/app-layout";
import AppBanner from "@/components/app-banner/app-banner";
import AppLayout from "@/components/layout/layout";
import AppBanner from "@/components/banner/banner";
export default {
name: "index",
data() {

24
src/pages/member/address.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<app-layout backgroundColor="#00418c" textColor="light">
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
export default {
name: "member-address",
data() {
return {};
},
components: { AppLayout },
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped></style>

2
src/pages/member/member.vue
View File

@ -3,7 +3,7 @@
</template>
<script>
import AppLayout from "@/components/app-layout/app-layout";
import AppLayout from "@/components/layout/layout";
import { mapState } from "vuex";
export default {
name: "member",

136
src/pages/service/cate.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<app-layout btnType="unset" title="分类" pageBackgroundColor="#F6F6F6">
<view class="search">
<view class="input-box">
<view class="icon">
<text class="iconfont icon-sousuo"></text>
</view>
<input
class="input"
type="text"
:model="keywords"
placeholder="搜索您需要的服务"
placeholder-class="placeholder"
/>
</view>
</view>
<view class="cate">
<app-cate :offsetHeight="60" :data="data" cateType="parent" @clickParent="clickParent" />
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import AppCate from "@/components/cate/cate";
export default {
name: "service-cate",
data() {
return {
keywords: "",
data: [
{
id: 1,
name: "热门推荐",
icon: "",
child: [
{
id: 2,
name: "空调安装",
icon: require("@/static/temp/cate/1.png"),
},
{
id: 3,
name: "空调拆卸",
icon: require("@/static/temp/cate/2.png"),
},
{
id: 4,
name: "热水器安装",
icon: require("@/static/temp/cate/3.png"),
},
{
id: 5,
name: "油烟机安装",
icon: require("@/static/temp/cate/4.png"),
},
],
},
{
id: 5,
name: "电器安装",
icon: "",
child: [
{
id: 6,
name: "空调安装",
icon: require("@/static/temp/cate/2.png"),
},
{
id: 7,
name: "空调拆卸",
icon: require("@/static/temp/cate/3.png"),
},
{
id: 8,
name: "热水器安装",
icon: require("@/static/temp/cate/4.png"),
},
],
},
],
};
},
components: {
AppLayout,
AppCate,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {
clickParent(id) {
uni.navigateTo({
url: '/pages/service/list?id=' + id
});
}
},
};
</script>
<style lang="less" scoped>
.search {
width: 100%;
height: 120rpx;
display: flex;
align-items: center;
justify-content: center;
.input-box {
width: 670rpx;
height: auto;
background-color: #fff;
border-radius: 10rpx;
display: flex;
justify-content: space-between;
line-height: 65rpx;
.icon,
.input,
.placeholder {
color: #bebebe;
}
.icon {
width: 85rpx;
height: 65rpx;
font-size: 30rpx;
text-align: center;
}
.input {
width: 585rpx;
height: 65rpx;
font-size: 28rpx;
}
}
}
</style>

79
src/pages/service/list.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
<view class="cate">
<app-cate :offsetHeight="0" :data="data" cateType="child" />
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import AppCate from "@/components/cate/cate";
export default {
name: "service-list",
data() {
return {
data: [
{
id: 1,
name: "热门推荐",
icon: "",
child: [
{
id: 2,
name: "空调安装",
icon: require("@/static/temp/cate/1.png"),
},
{
id: 3,
name: "空调拆卸",
icon: require("@/static/temp/cate/2.png"),
},
{
id: 4,
name: "热水器安装",
icon: require("@/static/temp/cate/3.png"),
},
{
id: 5,
name: "油烟机安装",
icon: require("@/static/temp/cate/4.png"),
},
],
},
{
id: 5,
name: "电器安装",
icon: "",
child: [
{
id: 6,
name: "空调安装",
icon: require("@/static/temp/cate/2.png"),
},
{
id: 7,
name: "空调拆卸",
icon: require("@/static/temp/cate/3.png"),
},
{
id: 8,
name: "热水器安装",
icon: require("@/static/temp/cate/4.png"),
},
],
},
],
};
},
components: { AppLayout, AppCate },
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped></style>

14
src/static/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3642656 */
src: url('@/static/iconfont/iconfont.woff2?t=1666835957947') format('woff2'),
url('@/static/iconfont/iconfont.woff?t=1666835957947') format('woff'),
url('@/static/iconfont/iconfont.ttf?t=1666835957947') format('truetype');
src: url('@/static/iconfont/iconfont.woff2?t=1675847767279') format('woff2'),
url('@/static/iconfont/iconfont.woff?t=1675847767279') format('woff'),
url('@/static/iconfont/iconfont.ttf?t=1675847767279') format('truetype');
}
.iconfont {
@ -12,6 +12,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-touxiang:before {
content: "\e60c";
}
.icon-guanbi:before {
content: "\e64d";
}
@ -52,10 +56,6 @@
content: "\e68d";
}
.icon-shenfenzhengfanmian:before {
content: "\e68e";
}
.icon-icon-truck:before {
content: "\e60b";
}

BIN
src/static/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
src/static/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
src/static/iconfont/iconfont.woff2
View File

Binary file not shown.

BIN
src/static/temp/cate/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/static/temp/cate/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/static/temp/cate/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/static/temp/cate/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

2
vue.config.js
View File

@ -3,7 +3,7 @@ module.exports = {
loaderOptions: {
less: {
globalVars: {
tabBarHeight: '115rpx',
tabBarHeight: '100rpx',
tabBarIconWidth: '40rpx',
tabBarIconHeight: '40rpx',
tabBarFontSize: '22rpx'