11 changed files with 503 additions and 36 deletions
-
6src/pages.json
-
2src/subpackage/mall/components/index_classify_bar.vue
-
13src/subpackage/mall/components/index_search_bar.vue
-
2src/subpackage/mall/components/specification_modal.vue
-
2src/subpackage/mall/js/api.js
-
25src/subpackage/mall/js/handle.js
-
441src/subpackage/mall/pages/classify.vue
-
34src/subpackage/mall/pages/goods_info.vue
-
12src/subpackage/mall/pages/index.vue
-
BINsrc/subpackage/mall/static/images/arrow_094.png
-
BINsrc/subpackage/mall/static/images/arrow_9ad_down.png
@ -0,0 +1,25 @@ |
|||||
|
import { MALL_API } from "./api"; |
||||
|
import server from "./server"; |
||||
|
|
||||
|
// 购物车商品列表
|
||||
|
export function goodsCartList(brand_id){ |
||||
|
return server.post({ |
||||
|
url: MALL_API.goodsCartList, |
||||
|
data: { brand_id }, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
let _ls = _data?.data ?? []; |
||||
|
//product_invalid 商品状态 0-正常 1-已失效
|
||||
|
return ({ |
||||
|
totalList: _ls, |
||||
|
validList: _ls.filter(item => item.product_invalid === 0), |
||||
|
invalidList: _ls.filter(item => item.product_invalid === 0), |
||||
|
}); |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,441 @@ |
|||||
|
<template> |
||||
|
<view class="mall-classify"> |
||||
|
<view class="mc-search-bar"> |
||||
|
<index-search-bar shopping-cart :cart-num="goodsCartNum"></index-search-bar> |
||||
|
</view> |
||||
|
<view class="mc-section"> |
||||
|
<scroll-view class="ms-classify" :style="scrollStyle" scroll-y> |
||||
|
<view class="mc-box"> |
||||
|
<view :class="['mc-item','defaultOne', curTab == -1 ? 'activeOne' : '',curTab==0?'filletOne':'']" @click="likeChange()">❤️猜你喜欢</view> |
||||
|
<view |
||||
|
v-for="(e, i) in goodsCateList" |
||||
|
:key="i" |
||||
|
:class="['mc-item', curTab == i ? 'active' : '',curTab == (i + 1)?'filletUnder':'', curTab == (i - 1)?'filletOn':'']" |
||||
|
@click="tabChange(e,i)" |
||||
|
> |
||||
|
{{ e.product_cate_name || '-' }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<scroll-view class="ms-goods" :style="scrollStyle" scroll-y scroll-with-animation> |
||||
|
<!-- 除猜你喜欢外显示 --> |
||||
|
<view class="mg-tab" v-if="curTab != -1"> |
||||
|
<view v-for="(e, i) in goodsKeyList" :key="i" :class="['mt-item', curItemTab == e.id ? 'active' : '']" @click="tabItemChange(e)"> |
||||
|
{{ e.name }} |
||||
|
<view v-if="curItemTab == i && curItemTab!=0"> |
||||
|
<image |
||||
|
:src="isSort ? '/subpackage/mall/static/images/arrow_9ad_down.png' : '/subpackage/mall/static/images/arrow_094.png'" |
||||
|
:style="isSort ? 'transform: rotateZ(180deg)' : ''" |
||||
|
></image> |
||||
|
<image |
||||
|
:src="isSort ? '/subpackage/mall/static/images/arrow_094.png' : '/subpackage/mall/static/images/arrow_9ad_down.png'" |
||||
|
:style="isSort ? 'transform: rotateZ(180deg)' : ''" |
||||
|
></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="mg-list"> |
||||
|
<view class="ml-item" v-for="(e, i) in goodsList" :key="i" @click="goodsItemChange(e.id)"> |
||||
|
<image mode="aspectFill" :src="e.product_imgs[0] || ''"></image> |
||||
|
<view> |
||||
|
<view>{{e.product_name || ''}}</view> |
||||
|
<view>{{e.product_text || ''}}</view> |
||||
|
<!-- 特价标签 现在不做 --> |
||||
|
<!-- <view class="mi-tags"> |
||||
|
<view class="mt-b">特价</view> |
||||
|
</view> --> |
||||
|
<view class="mi-price"> |
||||
|
<view class="mp-price"> |
||||
|
<text>¥</text> |
||||
|
<text>{{e.product_price || 0}}</text> |
||||
|
<!-- 单位: /2支 现在不做 --> |
||||
|
<text>{{''}}</text> |
||||
|
<text v-if="e.product_spec_multi == 0 && e.product_price_show != 0">¥{{e.product_price_show || 0}}</text> |
||||
|
</view> |
||||
|
<view class="mp-btn" @click.stop="addGoodsChange(e)"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="mg-tip">我是有底线的～</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
<!-- 分类 --> |
||||
|
<spacification-modal ref="spacificationModal" button-txt="加入购物车"></spacification-modal> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { routeTo, showLoad, hideLoad, showModal, getNodeMes } from "@/utils/util.js"; |
||||
|
import { MALL_API } from "../js/api"; |
||||
|
import server from "../js/server"; |
||||
|
import { goodsCartList } from "../js/handle"; |
||||
|
import spacificationModal from "../components/specification_modal.vue"; |
||||
|
import indexSearchBar from "../components/index_search_bar.vue"; |
||||
|
export default { |
||||
|
components: { spacificationModal, indexSearchBar }, |
||||
|
computed: { |
||||
|
scrollStyle() { |
||||
|
let { scrollHeight } = this; |
||||
|
return `height: ${scrollHeight}px;`; |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
scrollHeight: 658, // 658 为ipx的高度 |
||||
|
brand_id: '', |
||||
|
curTab: -1, //当前选中的商品分类列表id, 默认固定-1为猜你喜欢 |
||||
|
curItemTab: 0, |
||||
|
isSort: true, |
||||
|
goodsKeyList: [{id: 0, name: '综合'},{id: 1, name: '销量'},{id: 2, name: '价格'}], |
||||
|
goodsCateList: [], //商品分类列表 |
||||
|
goodsList: [], //商品列表 |
||||
|
goodsCartNum: 0, // 购物车数量 |
||||
|
cateId: -1, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
async onLoad(opts) { |
||||
|
let _bid = opts?.brand_id ?? ''; |
||||
|
this.brand_id = _bid |
||||
|
this.setScrollHeight(); |
||||
|
this.getCateList(_bid); |
||||
|
this.getGoodsList({ brand_id: _bid, recommend: 1 }); |
||||
|
}, |
||||
|
async onShow() { |
||||
|
let { brand_id } = this; |
||||
|
this.getCartList(brand_id); |
||||
|
}, |
||||
|
methods: { |
||||
|
async setScrollHeight() { |
||||
|
let searchBar = await getNodeMes('.mc-search-bar'); |
||||
|
let sysInfo = uni.getWindowInfo(); |
||||
|
this.scrollHeight = (sysInfo.windowHeight - searchBar.height) || 658; // 658 为ipx的高度 |
||||
|
}, |
||||
|
// 商品分类列表 |
||||
|
tabChange(e,i) { |
||||
|
let { brand_id } = this; |
||||
|
this.isSort = true |
||||
|
this.curTab = i; |
||||
|
this.cateId = e.id |
||||
|
this.getGoodsList({ brand_id, cateid: e.id }); |
||||
|
}, |
||||
|
// 猜你喜欢 |
||||
|
likeChange(){ |
||||
|
let { brand_id } = this; |
||||
|
this.curTab = -1; |
||||
|
this.getGoodsList({ brand_id, recommend: 1 }); |
||||
|
}, |
||||
|
// 综合 销量 价格 |
||||
|
tabItemChange(e) { |
||||
|
let { brand_id } = this; |
||||
|
this.curItemTab = e.id; |
||||
|
this.isSort = !this.isSort; |
||||
|
let sort = ''; |
||||
|
if(e.id == 1 && !this.isSort) sort = 'product_sale_nums|desc'; //销量从高到低 |
||||
|
if(e.id == 1 && this.isSort) sort = 'product_sale_nums|asc'; //销量从低到高 |
||||
|
if(e.id == 2 && !this.isSort) sort = 'product_price|desc'; //价格从高到低 |
||||
|
if(e.id == 2 && this.isSort) sort = 'product_price|asc'; //价格从低到高 |
||||
|
|
||||
|
this.$nextTick(_=>{ |
||||
|
this.getGoodsList({ |
||||
|
brand_id, |
||||
|
cateid: this.cateId, |
||||
|
show_sort: sort, |
||||
|
}); |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
goodsItemChange(id) { |
||||
|
let { brand_id } = this; |
||||
|
routeTo(`/subpackage/mall/pages/goods_info?id=${id}&brand_id=${brand_id}`,'nT') |
||||
|
}, |
||||
|
async addGoodsChange(e) { |
||||
|
let { brand_id } = this; |
||||
|
// 如果商品是多个规格属性的，则出现弹窗给用户选择规格加入购物车，如果是单规格的则直接加入购物车 |
||||
|
// 根据product_spec_multi字段做判断 等于1则是多规格 |
||||
|
if(e.product_spec_multi == 1){ |
||||
|
return this.$refs.spacificationModal.alert({ |
||||
|
id: e?.id ?? '', |
||||
|
brand_id: brand_id, |
||||
|
poster: e?.product_imgs?.[0] ?? '', |
||||
|
name: e?.product_name ?? '', |
||||
|
price: e?.product_price ?? '', |
||||
|
specArr: e?.product_spec ?? [], |
||||
|
addCartComplete: res => { |
||||
|
this.getCartList(brand_id); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
// 单规格 |
||||
|
await this.$refs?.spacificationModal?.goodsCartAdd({ brand_id, id: e?.id, }); |
||||
|
this.getCartList(brand_id); |
||||
|
}, |
||||
|
// 商品分类列表 |
||||
|
getCateList(brand_id) { |
||||
|
showLoad(); |
||||
|
return server.post({ |
||||
|
url: MALL_API.goodsCateList, |
||||
|
data: { brand_id}, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
hideLoad(); |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
return this.goodsCateList = _data?.data ?? []; |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
hideLoad(); |
||||
|
showModal({ content: err.message || '加载失败！' }); |
||||
|
console.warn('subpackage mall pages classify getCateList err --->', err); |
||||
|
}) |
||||
|
}, |
||||
|
// 商品列表 ps：猜你喜欢分类，recommend固定为1，分类ID传空; 其他分类又分 综合 销量 价格 |
||||
|
getGoodsList({brand_id, cateid='', show_sort='', recommend='', page = 1, page_size = 20}){ |
||||
|
// show_sort: 排序，eg：价格高到低（product_price|desc），销量低到高（product_sale_nums|asc） |
||||
|
// product_price这个表示价格的字段 product_sale_nums这个表示销量的字段 desc这个表示排序方法（desc是倒序asc是正序） |
||||
|
// show_sort等于空或者不传就是综合的 |
||||
|
let _query = { brand_id, cateid, show_sort, recommend, page, page_size }; |
||||
|
showLoad(); |
||||
|
return server.post({ |
||||
|
url: MALL_API.goodsList, |
||||
|
data: _query, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
hideLoad(); |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
return this.goodsList = _data?.data?.list ?? []; |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
hideLoad(); |
||||
|
showModal({ content: err.message || '加载失败！' }); |
||||
|
console.warn('subpackage mall pages classify getGoodsList err --->', err); |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 购物车-商品列表 |
||||
|
async getCartList(brand_id) { |
||||
|
try{ |
||||
|
let { validList } = await goodsCartList(brand_id); |
||||
|
let _length = validList?.length ?? 0; |
||||
|
this.goodsCartNum = _length > 100 ? 99 : _length; |
||||
|
}catch(err){ |
||||
|
console.warn('subpackage mall pages classify getCartList err --->', err); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.mall-classify { |
||||
|
.mc-section { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.ms-classify { |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
width: 180upx; |
||||
|
background-color: #ededf5; |
||||
|
.mc-box{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.mc-item { |
||||
|
padding: 0 10upx; |
||||
|
height: 92upx; |
||||
|
line-height: 92upx; |
||||
|
text-align: center; |
||||
|
font-size: 28upx; |
||||
|
color: #9a9a9d; |
||||
|
background-color: #ededf5; |
||||
|
@include tHide(1); |
||||
|
} |
||||
|
.active { |
||||
|
font-weight: 500; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.filletOn{ |
||||
|
border-top-right-radius: 10rpx; |
||||
|
} |
||||
|
.filletUnder{ |
||||
|
border-bottom-right-radius: 10rpx; |
||||
|
} |
||||
|
.filletOne{ |
||||
|
border-bottom-right-radius: 10rpx; |
||||
|
} |
||||
|
.defaultOne { |
||||
|
color: #333; |
||||
|
} |
||||
|
.activeOne { |
||||
|
color: $mColor; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.ms-goods { |
||||
|
// width: 570upx; |
||||
|
flex-grow: 1; |
||||
|
.mg-tab { |
||||
|
flex-grow: 1; |
||||
|
width: 100%; |
||||
|
height: 92rpx; |
||||
|
padding: 0rpx 40rpx; |
||||
|
background-color: #fbfbff; |
||||
|
@include ctf(space-between); |
||||
|
//吸顶 |
||||
|
/* #ifndef APP-PLUS-NVUE */ |
||||
|
display: flex; |
||||
|
position: -webkit-sticky; |
||||
|
/* #endif */ |
||||
|
position: sticky; |
||||
|
top: var(--window-top); |
||||
|
z-index: 6; |
||||
|
.mt-item { |
||||
|
color: #9a9a9d; |
||||
|
font-size: 24rpx; |
||||
|
min-width: 80rpx; |
||||
|
@include ctf(flex-start); |
||||
|
> view { |
||||
|
margin-left: 10rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
> image { |
||||
|
flex-shrink: 0; |
||||
|
width: 12rpx; |
||||
|
height: 12rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.active { |
||||
|
color: $mColor; |
||||
|
} |
||||
|
} |
||||
|
.mg-list { |
||||
|
padding: 20upx 20upx 30upx; |
||||
|
background-color: #fff; |
||||
|
.ml-item { |
||||
|
padding-bottom: 28upx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
> image { |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 20upx; |
||||
|
width: 172upx; |
||||
|
height: 172upx; |
||||
|
} |
||||
|
> view { |
||||
|
flex-grow: 1; |
||||
|
background-color: #fff; |
||||
|
> view:first-child { |
||||
|
margin-bottom: 10upx; |
||||
|
font-size: 28upx; |
||||
|
line-height: 40upx; |
||||
|
@include tHide(2); |
||||
|
} |
||||
|
> view:nth-child(2) { |
||||
|
margin-bottom: 14upx; |
||||
|
line-height: 32upx; |
||||
|
min-height: 32rpx; |
||||
|
font-size: 22upx; |
||||
|
color: #9a9a9d; |
||||
|
@include tHide(1); |
||||
|
} |
||||
|
.mi-tags { |
||||
|
margin-bottom: 10upx; |
||||
|
@include ctf(flex-start); |
||||
|
.mt-a { |
||||
|
margin-right: 10upx; |
||||
|
padding: 0 6upx; |
||||
|
border-radius: 6upx; |
||||
|
line-height: 28upx; |
||||
|
font-size: 20upx; |
||||
|
color: #ff873d; |
||||
|
background: rgba(246, 132, 62, 0.28); |
||||
|
} |
||||
|
.mt-b { |
||||
|
padding: 0 8upx; |
||||
|
font-size: 20upx; |
||||
|
line-height: 28upx; |
||||
|
border-radius: 8upx; |
||||
|
color: #e60012; |
||||
|
border: 2upx solid rgba($color: #e60213, $alpha: 0.5); |
||||
|
// background: rgba(230, 0, 18, 0.13); |
||||
|
} |
||||
|
} |
||||
|
.mi-price { |
||||
|
@include ctf(space-between); |
||||
|
.mp-price { |
||||
|
flex-grow: 1; |
||||
|
@include tHide(1); |
||||
|
line-height: 40upx; |
||||
|
color: #ff873d; |
||||
|
> text { |
||||
|
&:first-child { |
||||
|
font-size: 28upx; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
font-size: 36upx; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
font-size: 26upx; |
||||
|
color: #333; |
||||
|
} |
||||
|
&:nth-child(4) { |
||||
|
font-size: 26upx; |
||||
|
color: #9a9a9d; |
||||
|
text-decoration: line-through; |
||||
|
margin-left: 30upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.mp-btn { |
||||
|
flex-shrink: 0; |
||||
|
flex-grow: 0; |
||||
|
position: relative; |
||||
|
margin-left: 10upx; |
||||
|
width: 36upx; |
||||
|
height: 36upx; |
||||
|
border-radius: 50%; |
||||
|
background-color: $mColor; |
||||
|
&::before, |
||||
|
&::after { |
||||
|
content: ''; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
background-color: #fff; |
||||
|
border-radius: 2upx; |
||||
|
width: 20upx; |
||||
|
height: 4upx; |
||||
|
} |
||||
|
&::after { |
||||
|
height: 20upx; |
||||
|
width: 4upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.mg-tip { |
||||
|
height: 200upx; |
||||
|
line-height: 200upx; |
||||
|
text-align: center; |
||||
|
font-size: 28upx; |
||||
|
color: #9a9a9d; |
||||
|
background-color: #f2f2f7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 12 | Height: 14 | Size: 169 B |
|
After Width: 12 | Height: 14 | Size: 165 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue