wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2026-02-05 05:19:49 +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; .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; .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; .content { flex: 1; overflow: hidden; width: 100%; display: flex;
.menus { width: 200rpx; overflow: hidden; background-color: #F5F5F5; .menus { width: 200rpx; overflow: hidden; background-color: #F5F5F5;
.wrapper { width: 100%; height: 100%; .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; .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; } &: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; } .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; .wrapper { width: 100%; height: 100%; padding: 20rpx;
.ads { height: calc(300 / 550 * 510rpx); .ads { height: calc(300 / 550 * 510rpx);
image { width: 100%; height: 100%; border-radius: 8rpx; } 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; } .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; } .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; .mark { padding-left: 46rpx; margin-right: 30rpx; position: relative;
@@ -103,7 +131,17 @@
.price { flex: 1; color: #5A5B5C; } .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-base { color: #5A5B5C; }
text-color-assist { color: #919293; } text-color-assist { color: #919293; }
@@ -111,3 +149,222 @@ text-color-assist { color: #919293; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col3Box { width: 33%; padding: 5px; float: left; } .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;
}
}
}

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

@@ -1,48 +1,53 @@
<template> <template>
<view class="u-wrap"> <view class="u-wrap">
<u-toast ref="uToast" /><u-no-network></u-no-network> <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"> <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> </view>
<u-icon name="scan" color="#fff" size="16" slot="right"></u-icon> <u-icon name="scan" color="#fff" size="16" slot="right"></u-icon>
</u-navbar> </u-navbar>
<view class="coreshop-padding-10" v-if="CateStyle==1"> <view class="coreshop-padding-10" v-if="CateStyle == 1">
<view v-for="(item,index) in tabbar" :key="index" @click="goClass(item.id)"> <view v-for="(item, index) in tabbar" :key="index" @click="goClass(item.id)">
<u--image width="100%" height="195px" :src="item.imageUrl" :showLoading="false"></u--image> <u--image width="100%" height="195px" :src="item.imageUrl" :showLoading="false"></u--image>
<view class="coreshop-text-center coreshop-padding-top-10 coreshop-padding-bottom-10"> <view class="coreshop-text-center coreshop-padding-top-10 coreshop-padding-bottom-10">
{{item.name}} {{ item.name }}
</view> </view>
</view> </view>
</view> </view>
<view class="coreshop-padding-10" v-if="CateStyle==2"> <view class="coreshop-padding-10" v-if="CateStyle == 2">
<div class="col3Box" v-for="(item,index) in tabbar" :key="index" @click="goClass(item.id)"> <div class="col3Box" v-for="(item, index) in tabbar" :key="index" @click="goClass(item.id)">
<u--image width="100%" height="80px" :src="item.imageUrl" :showLoading="false"></u--image> <u--image width="100%" height="80px" :src="item.imageUrl" :showLoading="false"></u--image>
<view class="coreshop-text-center coreshop-padding-top-15 coreshop-padding-bottom-15 coreshop-font-sm"> <view class="coreshop-text-center coreshop-padding-top-15 coreshop-padding-bottom-15 coreshop-font-sm">
{{item.name}} {{ item.name }}
</view> </view>
</div> </div>
</view> </view>
<view class="u-menu-wrap coreshop-flex-direction-row" v-if="CateStyle==3"> <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"> <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' : '']" <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
:data-current="index" @tap.stop="swichMenu(index)"> :class="[current == index ? 'u-tab-item-active' : '']" :data-current="index"
<text class="u-line-1">{{item.name}}</text> @tap.stop="swichMenu(index)">
<text class="u-line-1">{{ item.name }}</text>
</view> </view>
</scroll-view> </scroll-view>
<block v-for="(item,index) in tabbar" :key="index"> <block v-for="(item, index) in tabbar" :key="index">
<scroll-view scroll-y class="right-box" v-if="current==index"> <scroll-view scroll-y class="right-box" v-if="current == index">
<view class="coreshop-padding-10"> <view class="coreshop-padding-10">
<coreshop-advert code="TplIndexBanner1"></coreshop-advert> <coreshop-advert code="TplIndexBanner1"></coreshop-advert>
<view class="class-item"> <view class="class-item">
<view class="item-title"> <view class="item-title">
<text>{{item.name}}</text> <text>{{ item.name }}</text>
</view> </view>
<view class="item-container coreshop-flex-direction-row"> <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)"> <view class="thumb-box" v-for="(item1, index1) in item.child" :key="index1"
<u--image width="60px" height="60px" :src="item1.imageUrl" :showLoading="false"></u--image> @click="goClass(item1.id)">
<view class="item-menu-name">{{item1.name}}</view> <u--image width="60px" height="60px" :src="item1.imageUrl"
:showLoading="false"></u--image>
<view class="item-menu-name">{{ item1.name }}</view>
</view> </view>
</view> </view>
</view> </view>
@@ -50,20 +55,26 @@
</scroll-view> </scroll-view>
</block> </block>
</view> </view>
<view class="u-menu-wrap coreshop-flex-direction-row" v-if="CateStyle==4"> <view class="u-menu-wrap coreshop-flex-direction-row" v-if="CateStyle == 4">
<view class="main" :style="'height:' + scorllH+'px;'"> <view class="main" :style="'height:' + scorllH + 'px;'">
<view class="content" :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="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> <text>{{ item.name }}</text>
</view> </view>
</view> </view>
</scroll-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"> <u-sticky v-if="menuChilds">
<view class="coreshop-bg-white coreshop-padding-left-10"> <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> </view>
</u-sticky> </u-sticky>
@@ -78,7 +89,8 @@
<view class="items"> <view class="items">
<view class="good"> <view class="good">
<view class="image"> <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>
<view class="right"> <view class="right">
<text class="u-line-2" @tap="goGoodsDetail(good.id)">{{ good.name }}</text> <text class="u-line-2" @tap="goGoodsDetail(good.id)">{{ good.name }}</text>
@@ -87,7 +99,8 @@
<view class="price_and_action"> <view class="price_and_action">
<text class="price">￥{{ good.price }}</text> <text class="price">￥{{ good.price }}</text>
<view class="btn-group"> <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> </button>
</view> </view>
@@ -96,7 +109,8 @@
</view> </view>
</view> </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>
</view> </view>
</scroll-view> </scroll-view>
@@ -105,24 +119,165 @@
<view class="cart-box"> <view class="cart-box">
<view class="mark" @tap="redirectCart()"> <view class="mark" @tap="redirectCart()">
<image src="/static/images/common/cart.png" class="cart-img"></image> <image src="/static/images/common/cart.png" class="cart-img"></image>
<view class="tag">{{cartNums}}</view> <view class="tag">{{ cartNums }}</view>
</view> </view>
<view class="price">￥{{cartMoney}}</view> <view class="price">￥{{ cartMoney }}</view>
<button type="primary" class="pay-btn" @tap="redirectCart()" :disabled="cartNums<=0">去结算</button> <button type="primary" class="pay-btn" @tap="redirectCart()" :disabled="cartNums <= 0">去结算</button>
</view> </view>
<!-- 购物车栏 end --> <!-- 购物车栏 end -->
</view> </view>
<vk-data-goods-sku-popup ref="skuPopup" <vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :amount-type="0"
v-model="skuKey" :localdata="goodsSkuInfo" :mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup"
border-radius="20" @add-cart="addCart" @buy-now="buyNow"></vk-data-goods-sku-popup>
:amount-type="0" </view>
:localdata="goodsSkuInfo"
:mode="skuMode" <view class="u-menu-wrap coreshop-flex-direction-row" style="flex-direction: column;" v-if="CateStyle == 5">
@open="onOpenSkuPopup" <!-- 全部一级分类 -->
@close="onCloseSkuPopup" <view class="primary-classification">
@add-cart="addCart" <scroll-view class="primary-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
@buy-now="buyNow"></vk-data-goods-sku-popup> <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> </view>
<!-- 登录提示 --> <!-- 登录提示 -->
@@ -130,8 +285,8 @@
</view> </view>
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
export default { export default {
data() { data() {
return { return {
@@ -175,7 +330,16 @@
skuMode: 1, skuMode: 1,
// 后端返回的商品信息 // 后端返回的商品信息
goodsSkuInfo: {}, goodsSkuInfo: {},
// 一级分类索引
primaryClassificationIndex: 0,
scrollLeft: 0,
showPrimaryClassification: false,
// 二级分类
secondaryClassification: [],
showThreeClassification: false,
scrollLeftSticky: 0,
contentScrollW: 0,
stickyViewW:0,
} }
}, },
computed: { computed: {
@@ -214,11 +378,11 @@
this.headerH = e.statusBarHeight + 45; this.headerH = e.statusBarHeight + 45;
}; };
// #endif // #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.goodsList = [];
this.page = 1; this.page = 1;
this.limit = 10; this.limit = 10;
@@ -230,11 +394,72 @@
}, },
onShow() { onShow() {
// 获取购物车数量 // 获取购物车数量
if (this.$store.state.config.cateStyle == 4) { if (this.$store.state.config.cateStyle == 5) {
this.getCartNums(); this.getCartNums();
} }
}, },
methods: { 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) { async swichMenu(index) {
if (index == this.current) return; if (index == this.current) return;
@@ -279,6 +504,7 @@
this.$u.api.categories().then(res => { this.$u.api.categories().then(res => {
if (res.status) { if (res.status) {
this.tabbar = res.data; this.tabbar = res.data;
if (this.$store.state.config.cateStyle == 4) { if (this.$store.state.config.cateStyle == 4) {
this.menus = res.data; this.menus = res.data;
if (res.data.length > 0) { if (res.data.length > 0) {
@@ -299,7 +525,39 @@
this.getGoods(); 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); this.getGoods(0);
}, },
clickChange(e) { clickChange(e) {
this.childCurrent = e.index; this.childCurrent = e.index;
if (e.id != 0) { if (e.id != 0) {
@@ -518,8 +777,8 @@
} }
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "index.scss"; @import "index.scss";
</style> </style>

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> <style>
/* 重写样式 */ /* 重写样式 */
.layui-form-item label { width: 140px; } .layui-form-item label { width: 140px; }
.classifyimg { margin-bottom: 20px; width: 672px !important; } .classifyimg { margin-bottom: 20px; width: 900px !important; }
.classifyimg-item { display: inline-block; width: 140px; } .classifyimg-item { display: inline-block; width: 160px; }
.classifyimg img { width: 100px; display: block; } .classifyimg img { width: 100px; display: block; }
.classifyimg .layui-form-radio { vertical-align: top; display: block; margin-bottom: 10px; } .classifyimg .layui-form-radio { vertical-align: top; display: block; margin-bottom: 10px; }
.image_storage_type .item { display: none; } .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':''}}> <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')"> <img src="/static/images/common/diancan.png" onclick="layui.coreHelper.viewImage('/static/images/common/diancan.png')">
</div> </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"> <div class="layui-form-mid layui-word-aux list-tag">
1、一级大图分类图标尺寸建议：350px*150px<br /> 1、一级大图分类图标尺寸建议：350px*150px<br />
2、一级小图分类图标尺寸建议：105px*105px<br /> 2、一级小图分类图标尺寸建议：105px*105px<br />