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> <template>
<view class=""> <view class="">
<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,40 +15,40 @@
</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">
<image :src="item.productImages" mode=""></image> <image :src="item.productImages" mode=""></image>
<view class="commodityContent"> <view class="commodityContent">
<view class="commodityTitle"> <view class="commodityTitle">
{{item.productName}} {{item.productName}}
<span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（暂无库存）</span> <span v-if="item.productStock==0" style="color: #aaa;font-size:26rpx;">（暂无库存）</span>
</view> </view>
<view class="commodityPrice"> <view class="commodityPrice">
<text class="price" v-if="item.price">￥ <text class="price" v-if="item.price">￥
<b style="font-size: 40rpx;">{{item.price}}</b><span class="priceTag">折后价</span> <b style="font-size: 40rpx;">{{item.price}}</b><span class="priceTag">折后价</span>
</text> </text>
<text class="SoldNumber">已售<span>400</span>件</text> <text class="SoldNumber">已售<span>400</span>件</text>
<!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock"> <!-- <text class="icon" @click.stop="addShopCar(item)" v-if="item.productStock">
<u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon> <u-icon name="shopping-cart" :size="26" color="#eba00b"></u-icon>
</text> --> </text> -->
<view class="publierInfo"> <view class="publierInfo">
<span class="c999 f24">张三1著</span><span class="c999 f24">/ xx出版社出版</span> <span class="c999 f24">张三1著</span><span class="c999 f24">/ xx出版社出版</span>
</view>
</view> </view>
</view> </view>
</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;"> <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, current: 0,
oneLevel: [], oneLevel: [],
towLevel: [], towLevel: [],
commodityList: [] // 商品列表 commodityList: [] // 商品列表
} }
}, },
contentButtonClick(e){ // contentButtonClick(e) {
console.log(e) // console.log(e)
}, // },
// 跳转 // 跳转
onPageJump(url) { onPageJump(url) {
uni.navigateTo({ uni.navigateTo({
@@ -102,7 +102,7 @@
computed: { computed: {
...mapState(['userInfo']), ...mapState(['userInfo']),
}, },
methods: { methods: {
// 获取一级分类 // 获取一级分类
getOneLevel() { getOneLevel() {
this.$http this.$http
@@ -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
@@ -142,7 +143,7 @@
}, },
// 加入购物车 // 加入购物车
addShopCar(e) { addShopCar(e) {
this.$http this.$http
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`) .post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
.then(res => { .then(res => {
// 获得用户的购物车列表信息 // 获得用户的购物车列表信息
@@ -162,7 +163,7 @@
flag = this.cartList.some((item, index) => { flag = this.cartList.some((item, index) => {
if (item.productId == data.productId) { if (item.productId == data.productId) {
shagnpin = item shagnpin = item
shagnpin.productAmount = item.productAmount + 1 shagnpin.productAmount = item.productAmount + 1
return true return true
} }
}) })
@@ -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,15 +261,15 @@
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;
.prompt { .prompt {
color: #cccccc; color: #cccccc;
} }
.icon_search { .icon_search {
background-image: url('@/static/icon/map_ic_search.png'); background-image: url('@/static/icon/map_ic_search.png');
background-position: center center; background-position: center center;
@@ -264,25 +280,29 @@
margin-right: 20upx; margin-right: 20upx;
} }
} }
.oneBox{
width: 30%; margin: 10rpx auto; .oneBox {
.oneLevel { margin: 10rpx auto;
.oneLevel {}
} }
}
.twoBox{width: 100%;} .twoBox {
width: 95%;
margin: 0 auto;
}
.classfyBody { .classfyBody {
margin: 5rpx auto; margin: 5rpx auto;
// width: 100%; // width: 100%;
height: 100%; height: 100%;
.towLevel { .towLevel {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
.towLevelTitle { .towLevelTitle {
width: 28%; width: 28%;
@@ -302,22 +322,36 @@
} }
.towLevelContent { .towLevelContent {
display: flex;flex-wrap: wrap; display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
width: 100%; width: 100%;
.commodityItem { .commodityItem {
width: 50%; width: 50%;
// 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;
color: #f56c6c; .priceTag {
display: inline-block; zoom:.7; margin-left: 6rpx; margin-bottom: 6px;} flex-direction: row;
} color: #f56c6c;
.SoldNumber{font-size: 24rpx; color: #999; float: right; margin-top: 16rpx;} display: inline-block;
zoom: .7;
margin-left: 6rpx;
margin-bottom: 6px;
}
}
.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;

2
pages/bookShop/commodityDetail.vue
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 {

9
pages/user/login.vue
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: '获取验证码',
//验证码已发 //验证码已发