健康超市列表

This commit is contained in:
徐哼唧L
2023-03-03 17:42:11 +08:00
parent 302249e244
commit 82ba99f4fd
3 changed files with 122 additions and 73 deletions

View File

@@ -3,10 +3,10 @@
<z-nav-bar title="健康超市"></z-nav-bar> <z-nav-bar title="健康超市"></z-nav-bar>
<!-- 一级分类 --> <!-- 一级分类 -->
<view class="oneBox"> <view class="oneBox">
<view class="oneLevel" style="width: unset;"> <view class="oneLevel">
<u-tabs :scrollable="false" :current="current" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :list="oneLevel" <u-tabs :scrollable="false" :current="current" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}"
@click="getTowLevel" lineColor="#54a966" :list="oneLevel" @click="getTowLevel" lineColor="#54a966"
:activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.2)'}"></u-tabs> :activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
</view> </view>
</view> </view>
<view class="search_box" @click="onPageJump('./searchFor')"> <view class="search_box" @click="onPageJump('./searchFor')">
@@ -15,15 +15,15 @@
</view> </view>
<!-- 二级分类商品 --> <!-- 二级分类商品 -->
<view class="twoBox" style=""> <view class="twoBox" style="">
<u-sticky> <!-- <u-sticky> -->
<u-tabs :scrollable="false" :list="towLevel" @click="getCategoryList($event.catId, $event.index)"></u-tabs> <u-tabs :list="towLevel" :inactiveStyle="{fontSize:'28rpx'}" lineWidth="40" @click="getCategoryList"
</u-sticky> :activeStyle="{transform: 'scale(1.01)'}"></u-tabs>
<!-- </u-sticky> -->
</view> </view>
<view class="classfyBody"> <view class="classfyBody">
<!-- 二级分类商品 --> <!-- 二级分类商品 -->
<view class="towLevel" v-if="towLevel.length > 0"> <view class="towLevel" v-if="towLevel.length > 0">
<view class="towLevelContent" v-if="commodityList.length > 0"> <view class="towLevelContent" v-if="commodityList.length > 0">
<view class="commodityItem" v-for="(item,index) in commodityList" :key="index" <view class="commodityItem" v-for="(item,index) in commodityList" :key="index"
@click.stop="toDetail(item.productId)"> @click.stop="toDetail(item.productId)">
<view class="box"> <view class="box">
@@ -76,9 +76,9 @@
commodityList: [] // 商品列表 commodityList: [] // 商品列表
} }
}, },
contentButtonClick(e){ // contentButtonClick(e) {
console.log(e) // console.log(e)
}, // },
// 跳转 // 跳转
onPageJump(url) { onPageJump(url) {
uni.navigateTo({ uni.navigateTo({
@@ -122,19 +122,20 @@
if (this.towLevel == '') { if (this.towLevel == '') {
this.commodityList = [] this.commodityList = []
} else { } else {
this.getCategoryList(res.list[0].catId, 0) this.getCategoryList(res.list[0])
} }
}) })
}, },
// 点击二级分类 // 点击二级分类
getCategoryList(catId, index) { getCategoryList(e) {
/// console.log(e) // console.log(e)
this.highlight = index // return false
// this.highlight = index
this.$http this.$http
.post('book/shopproduct/appGetCategoryList', { .post('book/shopproduct/appGetCategoryList', {
'catId': catId 'catId': e.catId
}) })
.then(res => { .then(res => {
this.commodityList = res.list this.commodityList = res.list
@@ -233,9 +234,24 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.publierInfo{display: inline-block;background-color: #f1f1f1; flex-direction: row; border-radius:10px; vertical-align: middle; padding: 0 12rpx; line-height: 32rpx;} .publierInfo {
.c999{color: #999;} display: inline-block;
.f24{font-size: 24rpx;} background-color: #f1f1f1;
flex-direction: row;
border-radius: 10px;
vertical-align: middle;
padding: 0 12rpx;
line-height: 32rpx;
}
.c999 {
color: #999;
}
.f24 {
font-size: 24rpx;
}
.search_box { .search_box {
width: 90%; width: 90%;
height: 64upx; height: 64upx;
@@ -245,7 +261,7 @@
align-items: center; align-items: center;
padding: 0upx 40upx; padding: 0upx 40upx;
position: relative; position: relative;
margin-left: -46%; margin: 30rpx 0 15rpx -46%;
left: 50%; left: 50%;
box-shadow: 0 0px 10px 1px #54a96633; box-shadow: 0 0px 10px 1px #54a96633;
@@ -264,14 +280,18 @@
margin-right: 20upx; margin-right: 20upx;
} }
} }
.oneBox { .oneBox {
width: 30%; margin: 10rpx auto; margin: 10rpx auto;
.oneLevel {
.oneLevel {}
}
.twoBox {
width: 95%;
margin: 0 auto;
} }
}
.twoBox{width: 100%;}
.classfyBody { .classfyBody {
margin: 5rpx auto; margin: 5rpx auto;
// width: 100%; // width: 100%;
@@ -302,7 +322,8 @@
} }
.towLevelContent { .towLevelContent {
display: flex;flex-wrap: wrap; display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
width: 100%; width: 100%;
@@ -311,13 +332,26 @@
// background-color: #fff; // background-color: #fff;
padding: 10rpx; padding: 10rpx;
.box{background-color: #fff; padding: 10rpx; border-radius: 20rpx !important; overflow: hidden; box-shadow: 0 0px 10px 1px #54a96633;} .box {
.commodityTitle{font-size: 28rpx; margin:10rpx 0;} background-color: #fff;
padding: 10rpx;
border-radius: 20rpx !important;
overflow: hidden;
box-shadow: 0 0px 10px 1px #54a96633;
}
.commodityTitle {
font-size: 32rpx;
margin: 20rpx 0 10rpx 0;
}
image { image {
width: 100%; border-radius: 10rpx; width: 100%;
border-radius: 10rpx;
height: 300rpx; height: 300rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
.commodityContent { .commodityContent {
flex: 1; flex: 1;
font-size: 16px; font-size: 16px;
@@ -329,15 +363,29 @@
.commodityPrice { .commodityPrice {
width: 100%; width: 100%;
position: relative; position: relative;
margin: 0 0 20rpx 0; margin: 0 0 3rpx 0;
.price { .price {
vertical-align: middle; vertical-align: middle;
color: #ffa200; color: #ffa200;
.priceTag{flex-direction:row;
.priceTag {
flex-direction: row;
color: #f56c6c; color: #f56c6c;
display: inline-block; zoom:.7; margin-left: 6rpx; margin-bottom: 6px;} display: inline-block;
zoom: .7;
margin-left: 6rpx;
margin-bottom: 6px;
} }
.SoldNumber{font-size: 24rpx; color: #999; float: right; margin-top: 16rpx;} }
.SoldNumber {
font-size: 24rpx;
color: #999;
float: right;
margin-top: 16rpx;
}
.icon { .icon {
background-color: #fbf6ec; background-color: #fbf6ec;
border-radius: 50rpx; border-radius: 50rpx;

View File

@@ -350,7 +350,7 @@ formatRichText (html) { //控制小程序中图片大小
.swiperBox { .swiperBox {
width: 100%; width: 100%;
height: 375px; height: 375px;
margin-top: 50px; margin-top: 150rpx;
} }
.commodityContent { .commodityContent {

View File

@@ -48,10 +48,10 @@
<button @click="onSubmit" class="active" v-if="btnShow"> </button> <button @click="onSubmit" class="active" v-if="btnShow"> </button>
<button v-else> </button> <button v-else> </button>
</view> </view>
<view class="password_register" style="margin: 0 auto; text-align: center; display: block;"> <!-- <view class="password_register" style="margin: 0 auto; text-align: center; display: block;">
<button @click="onPageJump('/pages/user/register')">注册账号</button> <button @click="onPageJump('/pages/user/register')">注册账号</button>
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码</text> <text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码</text>
</view> </view> -->
<view class="third_party_login_box"> <view class="third_party_login_box">
<view class="third_party_title"><text>第三方登录</text></view> <view class="third_party_title"><text>第三方登录</text></view>
<view class="third_party_content"> <view class="third_party_content">
@@ -129,8 +129,9 @@
isSee: false, isSee: false,
code: '', code: '',
// phone: '15022449475', // phone: '15022449475',
phone: '18047689535', // phone: '18047689535',
password: '123456z', phone: '',
password: '',
//验证码 //验证码
codeText: '获取验证码', codeText: '获取验证码',
//验证码已发 //验证码已发