zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

健康超市列表

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

184
pages/bookShop/classify.vue
View File

@@ -1,12 +1,12 @@
<template>
<view class="">
<view class="">
<z-nav-bar title="健康超市"></z-nav-bar>
<!-- 一级分类 -->
<view class="oneBox">
<view class="oneLevel" style="width: unset;">
<u-tabs :scrollable="false" :current="current" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :list="oneLevel"
@click="getTowLevel" lineColor="#54a966"
:activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.2)'}"></u-tabs>
<view class="oneLevel">
<u-tabs :scrollable="false" :current="current" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}"
:list="oneLevel" @click="getTowLevel" lineColor="#54a966"
:activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
</view>
</view>
<view class="search_box" @click="onPageJump('./searchFor')">
@@ -15,40 +15,40 @@
</view>
<!-- 二级分类、商品 -->
<view class="twoBox" style="">
<u-sticky>
<u-tabs :scrollable="false" :list="towLevel" @click="getCategoryList($event.catId, $event.index)"></u-tabs>
</u-sticky>
<!-- <u-sticky> -->
<u-tabs :list="towLevel" :inactiveStyle="{fontSize:'28rpx'}" lineWidth="40" @click="getCategoryList"
:activeStyle="{transform: 'scale(1.01)'}"></u-tabs>
<!-- </u-sticky> -->
</view>
<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="commodityItem" v-for="(item,index) in commodityList" :key="index"
@click.stop="toDetail(item.productId)">
<view class="box">
<image :src="item.productImages" mode=""></image>
<view class="commodityContent">
<view class="commodityTitle">
{{item.productName}}
<span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（暂无库存）</span>
</view>
<view class="commodityPrice">
<text class="price" v-if="item.price">￥
<b style="font-size: 40rpx;">{{item.price}}</b><span class="priceTag">折后价</span>
</text>
<text class="SoldNumber">已售<span>400</span>件</text>
<!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock">
<image :src="item.productImages" mode=""></image>
<view class="commodityContent">
<view class="commodityTitle">
{{item.productName}}
<span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（暂无库存）</span>
</view>
<view class="commodityPrice">
<text class="price" v-if="item.price">￥
<b style="font-size: 40rpx;">{{item.price}}</b><span class="priceTag">折后价</span>
</text>
<text class="SoldNumber">已售<span>400</span>件</text>
<!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock">
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
</text> -->
<view class="publierInfo">
<span class="c999 f24">张三1著</span><span class="c999 f24">/ xx出版社出版</span>
<view class="publierInfo">
<span class="c999 f24">张三1著</span><span class="c999 f24">/ xx出版社出版</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else style="text-align: center;font-size: 30rpx;color: #888;margin: 20rpx 0 0 0;flex: 1;">
暂无商品
@@ -73,12 +73,12 @@
current: 0,
oneLevel: [],
towLevel: [],
commodityList: [] // 商品列表
commodityList: [] // 商品列表
}
},
contentButtonClick(e){
console.log(e)
},
// contentButtonClick(e) {
// console.log(e)
// },
// 跳转
onPageJump(url) {
uni.navigateTo({
@@ -102,7 +102,7 @@
computed: {
...mapState(['userInfo']),
},
methods: {
methods: {
// 获取一级分类
getOneLevel() {
this.$http
@@ -122,19 +122,20 @@
if (this.towLevel == '') {
this.commodityList = []
} else {
this.getCategoryList(res.list[0].catId, 0)
this.getCategoryList(res.list[0])
}
})
},
// 点击二级分类
getCategoryList(catId, index) {
/// console.log(e)
this.highlight = index
getCategoryList(e) {
// console.log(e)
// return false
// this.highlight = index
this.$http
.post('book/shopproduct/appGetCategoryList', {
'catId': catId
'catId': e.catId
})
.then(res => {
this.commodityList = res.list
@@ -142,7 +143,7 @@
},
// 加入购物车
addShopCar(e) {
this.$http
this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => {
// 获得用户的购物车列表信息
@@ -162,7 +163,7 @@
flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) {
shagnpin = item
shagnpin.productAmount = item.productAmount + 1
shagnpin.productAmount = item.productAmount + 1
return true
}
})
@@ -233,9 +234,24 @@
</script>
<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;}
.c999{color: #999;}
.f24{font-size: 24rpx;}
.publierInfo {
display: inline-block;
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 {
width: 90%;
height: 64upx;
@@ -245,15 +261,15 @@
align-items: center;
padding: 0upx 40upx;
position: relative;
margin-left: -46%;
left: 50%;
margin: 30rpx 0 15rpx -46%;
left: 50%;
box-shadow: 0 0px 10px 1px #54a96633;
.prompt {
color: #cccccc;
}
.icon_search {
background-image: url('@/static/icon/map_ic_search.png');
background-position: center center;
@@ -264,25 +280,29 @@
margin-right: 20upx;
}
}
.oneBox{
width: 30%; margin: 10rpx auto;
.oneLevel {
}
}
.twoBox{width: 100%;}
.oneBox {
margin: 10rpx auto;
.oneLevel {}
}
.twoBox {
width: 95%;
margin: 0 auto;
}
.classfyBody {
margin: 5rpx auto;
// width: 100%;
height: 100%;
.towLevel {
width: 100%;
height: 100%;
display: flex;
display: flex;
.towLevelTitle {
width: 28%;
@@ -302,22 +322,36 @@
}
.towLevelContent {
display: flex;flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx;
width: 100%;
.commodityItem {
.commodityItem {
width: 50%;
// background-color: #fff;
padding: 10rpx;
.box{background-color: #fff; padding: 10rpx; border-radius: 20rpx !important; overflow: hidden; box-shadow: 0 0px 10px 1px #54a96633;}
.commodityTitle{font-size: 28rpx; margin:10rpx 0;}
.box {
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 {
width: 100%; border-radius: 10rpx;
width: 100%;
border-radius: 10rpx;
height: 300rpx;
margin-right: 20rpx;
}
.commodityContent {
flex: 1;
font-size: 16px;
@@ -329,15 +363,29 @@
.commodityPrice {
width: 100%;
position: relative;
margin: 0 0 20rpx 0;
margin: 0 0 3rpx 0;
.price {
vertical-align: middle;
color: #ffa200;
.priceTag{flex-direction:row;
color: #f56c6c;
display: inline-block; zoom:.7; margin-left: 6rpx; margin-bottom: 6px;}
}
.SoldNumber{font-size: 24rpx; color: #999; float: right; margin-top: 16rpx;}
.priceTag {
flex-direction: row;
color: #f56c6c;
display: inline-block;
zoom: .7;
margin-left: 6rpx;
margin-bottom: 6px;
}
}
.SoldNumber {
font-size: 24rpx;
color: #999;
float: right;
margin-top: 16rpx;
}
.icon {
background-color: #fbf6ec;
border-radius: 50rpx;

2
pages/bookShop/commodityDetail.vue
View File

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

9
pages/user/login.vue
View File

@@ -48,10 +48,10 @@
<button @click="onSubmit" class="active" v-if="btnShow">登 录</button>
<button v-else>登 录</button>
</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>
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
</view>
</view> -->
<view class="third_party_login_box">
<view class="third_party_title"><text>第三方登录</text></view>
<view class="third_party_content">
@@ -129,8 +129,9 @@
isSee: false,
code: '',
// phone: '15022449475',
phone: '18047689535',
password: '123456z',
// phone: '18047689535',
phone: '',
password: '',
//验证码
codeText: '获取验证码',
//验证码已发