wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 19:43:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

【新增】商品分类增加【三级分类仿叮咚买菜】界面风格。

Browse Source
This commit is contained in:
jianweie
2024-02-29 21:33:31 +08:00
parent b7cda465f4
commit 64a5d1875b
4 changed files with 938 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
CoreCms.Net.Uni-App/CoreShop/pages/category/index/index.scss
View File

@@ -19,7 +19,7 @@
}
.main { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
.main {position: relative; width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
.nav { width: 100%; height: 212rpx; flex-shrink: 0; display: flex; flex-direction: column;
.header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20rpx; background-color: #ffffff; height: 140rpx;
@@ -47,16 +47,44 @@
}
.content { flex: 1; overflow: hidden; width: 100%; display: flex;
.menus { width: 200rpx; overflow: hidden; background-color: #F5F5F5;
.wrapper { width: 100%; height: 100%;
.menu { display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 20rpx; font-size: 26rpx; color: #919293; position: relative;
.wrapper { width: 100%; height: 100%; background-color: #fafafa;
.menu {
display: flex; align-items: center; justify-content: flex-start; padding: 30rpx 20rpx; font-size: 26rpx; color: #919293; position: relative;
&:nth-last-child(1) { margin-bottom: 130rpx; }
&.current { background-color: #ffffff; color: #5A5B5C; }
&.current {
position: relative;
background-color: #ffffff; color: #1aad19;
&::before{
display: block;
content: "";
width: 8rpx;
height: 70%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #1aad19;
border-radius: 0 5rpx 5rpx 0;
}
}
.tit-box{
display: flex;
align-items: center;
margin: auto;
}
.tip{
width: 25rpx;
height: 25rpx;
display: inline-block;
margin-right: 5rpx;
}
.dot { position: absolute; width: 34rpx; height: 34rpx; line-height: 34rpx; font-size: 22rpx; background-color: #ADB838; color: #ffffff; top: 16rpx; right: 10rpx; border-radius: 100%; text-align: center; }
}
}
}
.goods { flex: 1; overflow: hidden; background-color: #ffffff;
.goods {position: relative; flex: 1; overflow: hidden; background-color: #ffffff;
.wrapper { width: 100%; height: 100%; padding: 20rpx;
.ads { height: calc(300 / 550 * 510rpx);
image { width: 100%; height: 100%; border-radius: 8rpx; }
@@ -94,7 +122,7 @@
}
.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 10;
.cart-box { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; height: 96rpx; border-radius: 48rpx; box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; z-index: 99;
.cart-img { width: 96rpx; height: 96rpx; position: relative; margin-top: -48rpx; }
.pay-btn { height: 100%; padding: 0 30rpx; color: #FFFFFF; border-radius: 0 50rpx 50rpx 0; display: flex; align-items: center; font-size: 28rpx; }
.mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;
@@ -103,7 +131,17 @@
.price { flex: 1; color: #5A5B5C; }
}
// .main-icon{
// position: absolute;
// left: 0;
// top: -5px;
// width: 0;
// height: 0;
// border-left: 5px solid transparent;
// border-right: 5px solid transparent;
// border-bottom: 5px solid #fff;
// }
.text-color-base { color: #5A5B5C; }
text-color-assist { color: #919293; }
@@ -111,3 +149,222 @@ text-color-assist { color: #919293; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col3Box { width: 33%; padding: 5px; float: left; }
.primary-classification{
height: 90px;
padding: 10px 0 0;
display: flex;
justify-content: space-between;
background-color: #e9f6ec;
.primary-view{
width: 90%;
white-space: nowrap;
.menu-box{
display: inline-block;
width: 140rpx;
.img{
display: block;
margin: 0 auto;
width: 80rpx;
height: 80rpx;
border-radius: 15px;
margin-bottom: 5rpx;
border: 2px solid #fff;
}
.name{
padding: 5rpx 0;
margin: 0 5rpx;
font-size: 25rpx;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowap;
}
}
.active{
.img{
border: 2px solid #1aad19;
}
.name{
background-color: #1aad19;
border-radius: 20rpx;
color: #fff;
}
}
}
.primary-classification-all{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 15rpx;
margin-top: -15rpx;
.tit{
writing-mode:vertical-rl;
font-size: 27rpx;
color: #1aad19;
margin-right: 2rpx;
letter-spacing: 5rpx;
}
.close{
padding: 20rpx;
}
}
}
.all-primary-popup{
position: fixed;
left: 0;
top: 88px;
z-index: 1000;
width: 100%;
height: 100%;
.mask{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.list-box{
padding: 10px;
background-color: #fff;
position: relative;
z-index: 9999;
.title-box{
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.tit{
font-size: 30rpx;
color: #5A5B5C;
}
}
.menu-layout{
display: flex;
flex-wrap: wrap;
.menu-box{
display: inline-block;
width: 140rpx;
margin-bottom: 25rpx;
.img{
display: block;
margin: 0 auto;
width: 80rpx;
height: 80rpx;
border-radius: 15px;
margin-bottom: 10rpx;
}
.name{
padding: 5rpx 0;
margin: 0 5rpx;
font-size: 25rpx;
text-align: center;
}
}
.active{
.img{
border: 2px solid #1aad19;
}
.name{
background-color: #1aad19;
border-radius: 20rpx;
color: #fff;
}
}
}
}
}
.sticky-box{
display: flex;
justify-content:space-between;
padding: 20rpx;
background-color: #fff;
.sticky-view{
width: 90%;
white-space: nowrap;
height: 50rpx;
.item{
display: inline-block;
width: 156rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 27rpx;
background-color: #f7f7f7;
text-align: center;
border-radius: 5rpx;
margin-right:20rpx ;
padding: 0 5rpx;
.name{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.active{
background-color: #edf8f2;
color: #1aad19;
}
}
.icon{
position: relative;
width: 10%;
height: 50rpx;
line-height: 50rpx;
display: flex;
justify-content: center;
&::before{
display: block;
content: "";
width: 1rpx;
height: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #f7f7f7;
box-shadow: -1px 0 5rpx rgba(0,0,0,.2);
}
}
}
.sticky-popup-box{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 44px;
z-index: 999;
.mask{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
}
.popup-layout{
position: relative;
padding: 10px;
display: flex;
flex-wrap: wrap;
background-color: #fff;
gap: 20rpx;
.popup{
width: 156rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 27rpx;
background-color: #f7f7f7;
text-align: center;
border-radius: 5rpx;
}
.active{
background-color: #edf8f2;
color: #1aad19;
}
}
}

313
CoreCms.Net.Uni-App/CoreShop/pages/category/index/index.vue
View File

@@ -1,9 +1,11 @@
<template>
<view class="u-wrap">
<u-toast ref="uToast" /><u-no-network></u-no-network>
<u-navbar safeAreaInsetTop fixed placeholder>
<u-navbar safeAreaInsetTop fixed placeholder :bgColor="CateStyle == 4 ? '#e9f6ec' : '#fff'">
<view slot="left">
<u-search :show-action="true" shape="round" v-model="searchKey" actionText="搜索" placeholder="请输入搜索内容" @custom="goSearch" @search="goSearch"></u-search>
<u-search :show-action="true" shape="round" v-model="searchKey"
:bgColor="CateStyle == 4 ? '#fff' : '#f2f2f2'" actionText="搜索" placeholder="请输入搜索内容" @custom="goSearch"
@search="goSearch"></u-search>
</view>
<u-icon name="scan" color="#fff" size="16" slot="right"></u-icon>
</u-navbar>
@@ -26,8 +28,9 @@
</view>
<view class="u-menu-wrap coreshop-flex-direction-row" v-if="CateStyle == 3">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
:data-current="index" @tap.stop="swichMenu(index)">
<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
@tap.stop="swichMenu(index)">
<text class="u-line-1">{{ item.name }}</text>
</view>
</scroll-view>
@@ -40,8 +43,10 @@
<text>{{ item.name }}</text>
</view>
<view class="item-container coreshop-flex-direction-row">
<view class="thumb-box" v-for="(item1, index1) in item.child" :key="index1" @click="goClass(item1.id)">
<u--image width="60px" height="60px" :src="item1.imageUrl" :showLoading="false"></u--image>
<view class="thumb-box" v-for="(item1, index1) in item.child" :key="index1"
@click="goClass(item1.id)">
<u--image width="60px" height="60px" :src="item1.imageUrl"
:showLoading="false"></u--image>
<view class="item-menu-name">{{ item1.name }}</view>
</view>
</view>
@@ -53,17 +58,23 @@
<view class="u-menu-wrap coreshop-flex-direction-row" v-if="CateStyle == 4">
<view class="main" :style="'height:' + scorllH + 'px;'">
<view class="content" :style="'height:' + scorllH + 'px;'">
<scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'">
<scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH"
:style="'height:' + scorllH + 'px;'">
<view class="wrapper">
<view class="menu" :id="`menu-${item.id}`" :class="{'current': item.id === currentCateId}" v-for="(item, index) in menus" :key="index" @tap="handleMenuTap(item.id,index)">
<view class="menu" :id="`menu-${item.id}`" :class="{ 'current': item.id === currentCateId }"
v-for="(item, index) in menus" :key="index" @tap="handleMenuTap(item.id, index)">
<text>{{ item.name }}</text>
</view>
</view>
</scroll-view>
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="headerH" :style="'height:' + scorllH+'px;'" @scrolltolower="scrolltolower">
<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="headerH"
:style="'height:' + scorllH + 'px;'" @scrolltolower="scrolltolower">
<u-sticky v-if="menuChilds">
<view class="coreshop-bg-white coreshop-padding-left-10">
<u-tabs :list="menuChilds" :current="childCurrent" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)',fontSize:'14px'}" :inactiveStyle="{color: '#606266',transform: 'scale(1)',fontSize:'14px'}" @change="clickChange"></u-tabs>
<u-tabs :list="menuChilds" :current="childCurrent"
:activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)', fontSize: '14px' }"
:inactiveStyle="{ color: '#606266', transform: 'scale(1)', fontSize: '14px' }"
@change="clickChange"></u-tabs>
</view>
</u-sticky>
@@ -78,7 +89,8 @@
<view class="items">
<view class="good">
<view class="image">
<u--image :showLoading="true" :src="good.image" width="83px" height="83px" radius="4px" @click="goGoodsDetail(good.id)"></u--image>
<u--image :showLoading="true" :src="good.image" width="83px" height="83px"
radius="4px" @click="goGoodsDetail(good.id)"></u--image>
</view>
<view class="right">
<text class="u-line-2" @tap="goGoodsDetail(good.id)">{{ good.name }}</text>
@@ -87,7 +99,8 @@
<view class="price_and_action">
<text class="price">￥{{ good.price }}</text>
<view class="btn-group">
<button type="primary" class="btn property_btn" hover-class="none" size="mini" @tap="showGoodSkuModal(good)">
<button type="primary" class="btn property_btn" hover-class="none"
size="mini" @tap="showGoodSkuModal(good)">
选规格
</button>
</view>
@@ -96,7 +109,8 @@
</view>
</view>
</view>
<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" margin-top="20"
margin-bottom="20" />
</view>
</view>
</scroll-view>
@@ -113,16 +127,157 @@
<!-- 购物车栏 end -->
</view>
<vk-data-goods-sku-popup ref="skuPopup"
v-model="skuKey"
border-radius="20"
:amount-type="0"
:localdata="goodsSkuInfo"
:mode="skuMode"
@open="onOpenSkuPopup"
@close="onCloseSkuPopup"
@add-cart="addCart"
@buy-now="buyNow"></vk-data-goods-sku-popup>
<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :amount-type="0"
:localdata="goodsSkuInfo" :mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup"
@add-cart="addCart" @buy-now="buyNow"></vk-data-goods-sku-popup>
</view>
<view class="u-menu-wrap coreshop-flex-direction-row" style="flex-direction: column;" v-if="CateStyle == 5">
<!-- 全部一级分类 -->
<view class="primary-classification">
<scroll-view class="primary-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
<view :class="[{ 'active': index == primaryClassificationIndex }, 'menu-box classification-box']"
v-for="(item, index) in menus" :key="index" @click="hanldePrimaryClassificationChange(index)">
<image class="img" v-if="index != 0" :src="item.imageUrl"></image>
<image class="img" v-else
src="https://ts1.cn.mm.bing.net/th/id/R-C.3562db2b97df44ad0a2913367e923bc9?rik=F0gPEgEKbhChlw&riu=http%3a%2f%2fpic.962.net%2fup%2f2016-10%2f14760807179493223.gif&ehk=1QnaRGwQ3oUxW2TtYQHyQM5fm9qkakLLshGCLtGyzE0%3d&risl=&pid=ImgRaw&r=0">
</image>
<view class="name">{{ item.name }}</view>
</view>
</scroll-view>
<view class="primary-classification-all" @click="handleShowPrimaryClassification">
<view class="tit">全部</view>
<u-icon name="grid" color="#1aad19" size="20"></u-icon>
</view>
</view>
<!-- 全部分类弹框 -->
<view class="all-primary-popup" v-show="showPrimaryClassification">
<view class="mask" @click="hanldeClosePopup"></view>
<view class="list-box">
<view class="title-box">
<view class="tit">全部分类</view>
<view class="close" @click="hanldeClosePopup"><u-icon name="close"></u-icon></view>
</view>
<view class="menu-layout">
<view :class="[{ 'active': index == primaryClassificationIndex }, 'menu-box']"
v-for="(item, index) in menus" :key="index" @click="hanldePrimaryClassificationChange(index)">
<image class="img" :src="item.imageUrl"></image>
<view class="name">{{ item.name }}</view>
</view>
</view>
</view>
</view>
<!-- 二级分类 -->
<view class="main" :style="'height:' + scorllH + 'px;'">
<view class="content" :style="'height:' + scorllH + 'px;'">
<scroll-view class="menus" scroll-with-animation scroll-y :scroll-top="headerH"
:style="'height:' + scorllH + 'px;'">
<view class="wrapper">
<view class="menu" :id="`menu-${item.id}`" :class="{ 'current': item.id === currentCateId }"
v-for="(item, index) in secondaryClassification" :key="index"
@tap="handleMenuTapNew(item.id)">
<view class="tit-box">
<image class="tip" v-if="index == 1"
src="https://ts1.cn.mm.bing.net/th/id/R-C.3562db2b97df44ad0a2913367e923bc9?rik=F0gPEgEKbhChlw&riu=http%3a%2f%2fpic.962.net%2fup%2f2016-10%2f14760807179493223.gif&ehk=1QnaRGwQ3oUxW2TtYQHyQM5fm9qkakLLshGCLtGyzE0%3d&risl=&pid=ImgRaw&r=0">
</image>
<text>{{ item.name }}</text>
</view>
</view>
</view>
</scroll-view>
<view class="goods">
<!-- 三级分类 -->
<u-sticky v-if="menuChilds.length > 1">
<view class="sticky-box">
<scroll-view class="sticky-view" scroll-x="true" scroll-with-animation
:scroll-left="scrollLeftSticky">
<view :class="[{ 'active': index == childCurrent }, 'item']"
@click="hanldeThreeClassification(item.id, index)"
v-for="(item, index) in menuChilds" :key="item.id">
<view class="name">{{ item.name }}</view>
</view>
</scroll-view>
<view class="icon" v-if="menuChilds.length > 2" @click="handleShowThreeClassificationPopup">
<u-icon v-if="!showThreeClassification" name="arrow-down" font-size="25"></u-icon>
<u-icon v-else name="arrow-up" font-size="25"></u-icon>
</view>
</view>
</u-sticky>
<!-- 三级分类弹框 -->
<view class="sticky-popup-box" v-show="showThreeClassification">
<view class="mask" @click="showThreeClassification = !showThreeClassification"></view>
<view class="popup-layout">
<view :class="[{ 'active': index == childCurrent }, 'popup']"
v-for="item, index in menuChilds" :key="item.id"
@click="hanldeThreeClassification(item.id, index)">
{{ item.name }}
</view>
</view>
</view>
<scroll-view class="goods" scroll-with-animation :scroll-y="showThreeClassification ? false : true"
:scroll-top="headerH"
:style="'height:' + parseInt(Number(scorllH) - (menuChilds.length > 1 ? 45 : 0)) + 'px;'"
@scrolltolower="scrolltolower" :show-scrollbar="false">
<!-- <view class="coreshop-padding-10">
<coreshop-advert code="TplIndexBanner1" showTitle="true"></coreshop-advert>
</view> -->
<view class="wrapper">
<view class="list">
<view class="category" v-for="(good, key) in goodsList" :key="key"
:id="`cate-${good.id}`">
<view class="items">
<view class="good">
<view class="image">
<u--image :showLoading="true" :src="good.image" width="83px"
height="83px" radius="4px"
@click="goGoodsDetail(good.id)"></u--image>
</view>
<view class="right">
<text class="u-line-2" @tap="goGoodsDetail(good.id)">{{ good.name
}}</text>
<u--text type="info" size="12px" lines="1" :text="good.brief"></u--text>
<!--<text class="tips u-line-1" @tap="goGoodsDetail(good.id)">{{ good.brief }}</text>-->
<view class="price_and_action">
<text class="price">￥{{ good.price }}</text>
<view class="btn-group">
<button type="primary" class="btn property_btn"
hover-class="none" size="mini"
@tap="showGoodSkuModal(good)">
选规格
</button>
</view>
</view>
</view>
</view>
</view>
</view>
<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText"
margin-top="20" margin-bottom="20" />
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 购物车栏 begin -->
<view class="cart-box">
<view class="mark" @tap="redirectCart()">
<image src="/static/images/common/cart.png" class="cart-img"></image>
<view class="tag">{{ cartNums }}</view>
</view>
<view class="price">￥{{ cartMoney }}</view>
<button type="primary" class="pay-btn" @tap="redirectCart()" :disabled="cartNums <= 0">去结算</button>
</view>
<!-- 购物车栏 end -->
</view>
<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :amount-type="0"
:localdata="goodsSkuInfo" :mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup"
@add-cart="addCart" @buy-now="buyNow"></vk-data-goods-sku-popup>
</view>
<!-- 登录提示 -->
@@ -175,7 +330,16 @@
skuMode: 1,
// 后端返回的商品信息
goodsSkuInfo: {},
// 一级分类索引
primaryClassificationIndex: 0,
scrollLeft: 0,
showPrimaryClassification: false,
// 二级分类
secondaryClassification: [],
showThreeClassification: false,
scrollLeftSticky: 0,
contentScrollW: 0,
stickyViewW:0,
}
},
computed: {
@@ -214,11 +378,11 @@
this.headerH = e.statusBarHeight + 45;
};
// #endif
this.scorllH = e.windowHeight - e.statusBarHeight - 50;
this.scorllH = parseInt(e.windowHeight - e.statusBarHeight - 50 - 90);
}
})
// 获取购物车数量
if (this.$store.state.config.cateStyle == 4) {
if (this.$store.state.config.cateStyle == 5) {
this.goodsList = [];
this.page = 1;
this.limit = 10;
@@ -230,11 +394,72 @@
},
onShow() {
// 获取购物车数量
if (this.$store.state.config.cateStyle == 4) {
if (this.$store.state.config.cateStyle == 5) {
this.getCartNums();
}
},
methods: {
hanldePrimaryClassificationChange(index) {
if (this.primaryClassificationIndex != index) {
this.primaryClassificationIndex = index;
this.scrollLeft = this.menus[index].left - this.contentScrollW / 2 + this.menus[index].width / 2;
this.showPrimaryClassification = false;
this.secondaryClassification = this.menus[index].child || [];
this.currentCateId = this.menus[index].child[0].id;
this.needCurrentCateId = this.menus[index].child[0].id;
this.menuChilds = this.menus[index].child[0].child;
this.showThreeClassification = false;
this.handleMenuTapNew(this.currentCateId);
}
},
handleShowPrimaryClassification() {
this.showPrimaryClassification = true;
},
handleMenuTapNew(id) {
const _this = this;
let menu = _this.menus[_this.primaryClassificationIndex].child.filter((res) => res.id == id);
_this.needCurrentCateId = menu[0].id;
_this.currentCateId = menu[0].id;
_this.menuChilds = menu[0].child || [];
this.page = 1;
this.goodsList = [];
if (_this.menuChilds.length > 0 && _this.menuChilds[0].id != 0) {
this.menuChilds.unshift({
id: 0,
imageUrl: "",
name: "全部",
sort: 0,
});
}
_this.childCurrent = 0;
_this.headerH = 0;
_this.getGoods();
},
hanldeClosePopup() {
this.showPrimaryClassification = false;
},
handleShowThreeClassificationPopup() {
this.showThreeClassification = !this.showThreeClassification;
},
hanldeThreeClassification(id, index) {
if (this.childCurrent != index) {
this.childCurrent = index;
this.scrollLeftSticky = index * 88 - this.stickyViewW / 2 + 88 /2;
if (id != 0) {
this.needCurrentCateId = id;
} else {
this.needCurrentCateId = this.currentCateId;
}
if (this.showThreeClassification) {
this.showThreeClassification = !this.showThreeClassification
}
this.page = 1;
this.goodsList = [];
this.getGoods();
}
},
// 点击左边的栏目切换
async swichMenu(index) {
if (index == this.current) return;
@@ -279,6 +504,7 @@
this.$u.api.categories().then(res => {
if (res.status) {
this.tabbar = res.data;
if (this.$store.state.config.cateStyle == 4) {
this.menus = res.data;
if (res.data.length > 0) {
@@ -299,7 +525,39 @@
this.getGoods();
}
} else if (this.$store.state.config.cateStyle == 5) {
this.menus = res.data;
this.secondaryClassification = res.data[0].child || [];
this.currentCateId = res.data[0].child[0].id;
this.needCurrentCateId = res.data[0].child[0].id;
this.menuChilds = res.data[0].child[0].child;
this.menuChilds.unshift({
id: 0,
imageUrl: "",
name: "全部",
sort: 0,
});
this.getGoods();
}
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.primary-view').boundingClientRect(data => {
this.contentScrollW = data.width;
}).exec();
query.select('.sticky-view').boundingClientRect(data => {
this.stickyViewW = data.width;
}).exec();
query.selectAll('.classification-box').boundingClientRect(data => {
let dataLen = data.length;
for (let i = 0; i < dataLen; i++) {
// scroll-view 子元素组件距离左边栏的距离 还有宽度
this.$set(this.menus[i], 'left', data[i].left)
this.$set(this.menus[i], 'width', data[i].width)
}
}).exec();
})
}
});
},
@@ -453,6 +711,7 @@
this.getGoods(0);
},
clickChange(e) {
this.childCurrent = e.index;
if (e.id != 0) {

BIN
CoreCms.Net.Web.Admin/wwwroot/static/images/common/dingdong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

8
CoreCms.Net.Web.Admin/wwwroot/views/shop/setting/index.html
View File

@@ -10,8 +10,8 @@
<style>
/* 重写样式 */
.layui-form-item label { width: 140px; }
.classifyimg { margin-bottom: 20px; width: 672px !important; }
.classifyimg-item { display: inline-block; width: 140px; }
.classifyimg { margin-bottom: 20px; width: 900px !important; }
.classifyimg-item { display: inline-block; width: 160px; }
.classifyimg img { width: 100px; display: block; }
.classifyimg .layui-form-radio { vertical-align: top; display: block; margin-bottom: 10px; }
.image_storage_type .item { display: none; }
@@ -301,6 +301,10 @@
<input type="radio" lay-filter="cateStyle" name="cateStyle" value="4" title="仿点餐模式" {{d.data.configs['cateStyle']['sValue']==="4" ? 'checked':''}}>
<img src="/static/images/common/diancan.png" onclick="layui.coreHelper.viewImage('/static/images/common/diancan.png')">
</div>
<div class="classifyimg-item">
<input type="radio" lay-filter="cateStyle" name="cateStyle" value="5" title="三级分类仿叮咚买菜" {{d.data.configs['cateStyle']['sValue']==="5" ? 'checked':''}}>
<img src="/static/images/common/dingdong.png" onclick="layui.coreHelper.viewImage('/static/images/common/dingdong.png')">
</div>
<div class="layui-form-mid layui-word-aux list-tag">
1、一级大图分类图标尺寸建议：350px*150px<br />
2、一级小图分类图标尺寸建议：105px*105px<br />