增加新模块
This commit is contained in:
+123
@@ -0,0 +1,123 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const common_classify_data = require("../../common/classify.data.js");
|
||||
const _sfc_main = {
|
||||
data() {
|
||||
return {
|
||||
selCategory: 1,
|
||||
tabbar: common_classify_data.classifyData,
|
||||
scrollTop: 0,
|
||||
//tab标题的滚动条位置
|
||||
current: 0,
|
||||
// 预设当前项的值
|
||||
menuHeight: 0,
|
||||
// 左边菜单的高度
|
||||
menuItemHeight: 0,
|
||||
// 左边菜单item的高度
|
||||
bannerList: ["/static/common/product_def_banner.png", "/static/common/product_def_banner.png", "/static/common/product_def_banner.png"]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkCategory(val) {
|
||||
this.selCategory = val;
|
||||
},
|
||||
jumpSearch() {
|
||||
common_vendor.index.navigateTo({
|
||||
url: "/pages/search/search"
|
||||
});
|
||||
},
|
||||
getImg() {
|
||||
return Math.floor(Math.random() * 35);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (index == this.current)
|
||||
return;
|
||||
this.current = index;
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect("menu-scroll-view", "menuHeight");
|
||||
await this.getElRect("u-tab-item", "menuItemHeight");
|
||||
}
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = common_vendor.index.createSelectorQuery().in(this);
|
||||
query.select("." + elClass).fields({ size: true }, (res) => {
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
}).exec();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_up_search2 = common_vendor.resolveComponent("up-search");
|
||||
const _easycom_up_swiper2 = common_vendor.resolveComponent("up-swiper");
|
||||
(_easycom_up_search2 + _easycom_up_swiper2)();
|
||||
}
|
||||
const _easycom_up_search = () => "../../uni_modules/uview-plus/components/u-search/u-search.js";
|
||||
const _easycom_up_swiper = () => "../../uni_modules/uview-plus/components/u-swiper/u-swiper.js";
|
||||
if (!Math) {
|
||||
(_easycom_up_search + _easycom_up_swiper)();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.selCategory === 1
|
||||
}, $data.selCategory === 1 ? {} : {}, {
|
||||
b: common_vendor.n($data.selCategory === 1 ? "category_item category_item_sel" : "category_item"),
|
||||
c: common_vendor.o(($event) => $options.checkCategory(1)),
|
||||
d: $data.selCategory === 2
|
||||
}, $data.selCategory === 2 ? {} : {}, {
|
||||
e: common_vendor.n($data.selCategory === 2 ? "category_item category_item_sel" : "category_item"),
|
||||
f: common_vendor.o(($event) => $options.checkCategory(2)),
|
||||
g: common_vendor.p({
|
||||
shape: "square",
|
||||
bgColor: "#EEEEEEFF",
|
||||
color: "#666666FF",
|
||||
showAction: false,
|
||||
placeholder: "搜索"
|
||||
}),
|
||||
h: common_vendor.o((...args) => $options.jumpSearch && $options.jumpSearch(...args)),
|
||||
i: common_vendor.f($data.tabbar, (item, index, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(item.name),
|
||||
b: index,
|
||||
c: common_vendor.n($data.current == index ? "u-tab-item-active" : ""),
|
||||
d: index,
|
||||
e: common_vendor.o(($event) => $options.swichMenu(index), index)
|
||||
};
|
||||
}),
|
||||
j: $data.scrollTop,
|
||||
k: common_vendor.f($data.tabbar, (item, index, i0) => {
|
||||
return common_vendor.e({
|
||||
a: $data.current == index
|
||||
}, $data.current == index ? {
|
||||
b: "1255c49a-1-" + i0,
|
||||
c: common_vendor.p({
|
||||
list: $data.bannerList,
|
||||
height: "80px"
|
||||
}),
|
||||
d: common_vendor.t(item.name),
|
||||
e: common_vendor.f(item.foods, (item1, index1, i1) => {
|
||||
return {
|
||||
a: item1.icon,
|
||||
b: common_vendor.t(item1.name),
|
||||
c: index1
|
||||
};
|
||||
})
|
||||
} : {}, {
|
||||
f: index
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1255c49a"]]);
|
||||
wx.createPage(MiniProgramPage);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/sort/sort.js.map
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"usingComponents": {
|
||||
"up-search": "../../uni_modules/uview-plus/components/u-search/u-search",
|
||||
"up-swiper": "../../uni_modules/uview-plus/components/u-swiper/u-swiper"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<view class="sort_warp data-v-1255c49a"><view class="sort_header data-v-1255c49a"><view class="sort_category_header data-v-1255c49a"><view class="{{['data-v-1255c49a', b]}}" bindtap="{{c}}"><view class="data-v-1255c49a">分类</view><view wx:if="{{a}}" class="category_item_sel_but data-v-1255c49a"></view></view><view class="{{['data-v-1255c49a', e]}}" bindtap="{{f}}"><view class="data-v-1255c49a">品牌</view><view wx:if="{{d}}" class="category_item_sel_but data-v-1255c49a"></view></view></view><view class="data-v-1255c49a" style="width:200rpx" bindtap="{{h}}"><up-search wx:if="{{g}}" class="data-v-1255c49a" u-i="1255c49a-0" bind:__l="__l" u-p="{{g}}"></up-search></view></view><view class="u-menu-wrap data-v-1255c49a"><scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view data-v-1255c49a" scroll-top="{{j}}"><view wx:for="{{i}}" wx:for-item="item" wx:key="b" class="{{['u-tab-item', 'data-v-1255c49a', item.c]}}" data-current="{{item.d}}" catchtap="{{item.e}}"><text class="u-line-1 data-v-1255c49a">{{item.a}}</text></view></scroll-view><block wx:for="{{k}}" wx:for-item="item" wx:key="f"><scroll-view wx:if="{{item.a}}" scroll-y class="right-box data-v-1255c49a"><view class="data-v-1255c49a" style="padding:0rpx 20rpx"><up-swiper wx:if="{{item.c}}" class="data-v-1255c49a" u-i="{{item.b}}" bind:__l="__l" u-p="{{item.c}}"></up-swiper></view><view class="page-view data-v-1255c49a"><view class="class-item data-v-1255c49a"><view class="item-title data-v-1255c49a"><text class="data-v-1255c49a">{{item.d}}</text></view><view class="item-container data-v-1255c49a"><view wx:for="{{item.e}}" wx:for-item="item1" wx:key="c" class="thumb-box data-v-1255c49a"><image class="item-menu-image data-v-1255c49a" src="{{item1.a}}" mode=""></image><view class="item-menu-name data-v-1255c49a">{{item1.b}}</view></view></view></view></view></scroll-view></block></view></view>
|
||||
+146
@@ -0,0 +1,146 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/* uni.scss */
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
.sort_warp.data-v-1255c49a {
|
||||
padding: 130rpx 0rpx 0rpx;
|
||||
height: calc(100vh - 130rpx);
|
||||
}
|
||||
.sort_header.data-v-1255c49a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.sort_header .sort_category_header.data-v-1255c49a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sort_header .category_item.data-v-1255c49a {
|
||||
width: 140rpx;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.sort_header .category_item_sel.data-v-1255c49a {
|
||||
font-size: 44rpx;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.sort_header .category_item_sel_but.data-v-1255c49a {
|
||||
height: 8rpx;
|
||||
width: 50rpx;
|
||||
background: #FF7C41;
|
||||
margin-top: 4rpx;
|
||||
margin-left: 12%;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.u-menu-wrap.data-v-1255c49a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
margin-top: 20rpx;
|
||||
height: calc(100vh - 216rpx);
|
||||
}
|
||||
.u-search-inner.data-v-1255c49a {
|
||||
background-color: #eaeaea;
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
.u-search-text.data-v-1255c49a {
|
||||
font-size: 26rpx;
|
||||
color: #909193;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
.u-tab-view.data-v-1255c49a {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
}
|
||||
.u-tab-item.data-v-1255c49a {
|
||||
height: 110rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
.u-tab-item-active.data-v-1255c49a {
|
||||
position: relative;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
.u-tab-item-active.data-v-1255c49a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid #FF7C41;
|
||||
height: 32rpx;
|
||||
left: 0;
|
||||
top: 39rpx;
|
||||
}
|
||||
.u-tab-view.data-v-1255c49a {
|
||||
height: 100%;
|
||||
}
|
||||
.right-box.data-v-1255c49a {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.page-view.data-v-1255c49a {
|
||||
padding: 16rpx;
|
||||
}
|
||||
.class-item.data-v-1255c49a {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.item-title.data-v-1255c49a {
|
||||
font-size: 26rpx;
|
||||
color: #303133;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-menu-name.data-v-1255c49a {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #303133;
|
||||
}
|
||||
.item-container.data-v-1255c49a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.thumb-box.data-v-1255c49a {
|
||||
width: 33.333333%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.item-menu-image.data-v-1255c49a {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user