630 lines
14 KiB
Vue
630 lines
14 KiB
Vue
<!-- 里海云仓小分类 -->
|
||
<template>
|
||
<view class="smallClassification">
|
||
<!-- 占位 -->
|
||
<view style="height: var(--status-bar-height);"></view>
|
||
|
||
<!-- 搜索 -->
|
||
<view class="search">
|
||
<view class="icon" @click="handleBack" />
|
||
<view class="input-wrap">
|
||
<icon type="search" size="18" />
|
||
<input type="text" class="uni-input" placeholder="搜索商品" @input="" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- goods -->
|
||
<view class="con">
|
||
<view class="con-left" :style="{'height':leftDomHeight}">
|
||
<!-- 侧边栏商品类型 -->
|
||
<block v-for="(item,indx) in cateData" :key="indx">
|
||
<view class="con-left-bili_num_2" @click="handleChooseSideBar(item.store_category_id)">
|
||
<u--image :src="item.pic" width="100rpx" height="100rpx" style="margin-bottom: 20rpx;"
|
||
shape="circle">
|
||
<template v-slot:loading>
|
||
<u-loading-icon color="#999"></u-loading-icon>
|
||
</template>
|
||
</u--image>
|
||
<text class="cate-name"
|
||
:class="{active:searchParam.mer_cate_id == item.store_category_id?true:false}">{{item.cate_name}}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="con-right">
|
||
<!-- 补贴比例标签 -->
|
||
<view class="con-right-proportion">
|
||
<image src="../../../static/cloud_warehouse/dkbl.png" />
|
||
<block v-for="(item,indx) in propotionData" :key="indx">
|
||
<view class="con-right-proportion-item"
|
||
:class="{active:searchParam.deduction_rate == item.product_label_id}"
|
||
@click="handleChooseProp(item.product_label_id)">{{item.label_name}}</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<scroll-view scroll-y="true" class="con-right-goods" :style="{'height':goodsListHeight}"
|
||
:show-scrollbar="false" :scroll-with-animation="true" @scrolltolower="scrolltolower">
|
||
<view v-if="goodsData.length > 0">
|
||
<view class="con-right-goods-item" v-for="(item,indx) in goodsData" :key="indx">
|
||
<view class="goods-item-left">
|
||
<u--image :src="item.image" width="190rpx" height="190rpx" radius="10" />
|
||
</view>
|
||
<view class="goods-item-right">
|
||
<view class="goods-item-right-title">
|
||
<text class="city">同城</text>
|
||
<text class="name line1">{{item.store_name}}</text>
|
||
</view>
|
||
<view class="goods-item-right-redpackat line1">可使用补贴抵扣20%</view>
|
||
<view class="goods-item-right-rules">
|
||
<text class="unit">规格：1{{item.unit_name}}</text>
|
||
<!-- 方山镇 -->
|
||
<text class="addr"></text>
|
||
</view>
|
||
<view class="goods-item-right-purchase">
|
||
<text class="num">￥{{item.price}}</text>
|
||
<text class="buy"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="loadingicon acea-row row-center-wrapper" style="color: #ccc;">
|
||
<text class="loading iconfont icon-jiazai" :hidden="hotLoading == false"></text>
|
||
{{ hotTitle }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class='empty-box' v-else>
|
||
<view class='pictrue'>
|
||
<u--image src='../../../static/images/empty-box.png' width="414rpx"
|
||
height="240rpx"></u--image>
|
||
<view class="txt">暂无更多商品~</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 悬浮购买按钮 -->
|
||
<view class="flow">
|
||
<image src="../../../static/cloud_warehouse/gwc.png"></image>
|
||
<text>11</text>
|
||
</view>
|
||
|
||
<!-- 底部结算 -->
|
||
<view class="footer">
|
||
<view class="footer-left">
|
||
<text class="price">￥184.00</text>
|
||
<text class="desc">支持配送 售后无忧</text>
|
||
</view>
|
||
<view class="footer-right">去结算</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getProportion,
|
||
getCategory,
|
||
goodsList
|
||
} from "@/api/cloud_warehouse.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
leftDomHeight: 0, //左侧农产品类型高度
|
||
goodsListHeight: 0, //右侧商品列表高度
|
||
propotionData: [], //比例
|
||
cateData: [], //分类
|
||
goodsData: [], //商品列表
|
||
pid: '', //上一级id
|
||
searchParam: {
|
||
mer_cate_id: '', //商品类型id
|
||
mer_id: '', //商铺id
|
||
deduction_rate: '', //抵扣比例id
|
||
keyword: '', //关键字查询
|
||
page: 1,
|
||
limit: 10
|
||
},
|
||
// 滚动加载
|
||
hotTitle: '加载更多',
|
||
hotLoading: false,
|
||
hotScroll: true,
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
this.pid = opt.pid;
|
||
this.searchParam.mer_id = opt.mer_id; //商铺id
|
||
|
||
this.initHeight();
|
||
this.initGoodsListHeight();
|
||
this.initConfig();
|
||
},
|
||
methods: {
|
||
// 返回
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
|
||
// 初始化商品列表参数
|
||
initConfig() {
|
||
uni.showLoading({
|
||
title: "加载中",
|
||
})
|
||
Promise.all([getProportion({
|
||
mer_id: this.searchParam.mer_id
|
||
}), getCategory(this.searchParam.mer_id, this.pid)]).then(res => {
|
||
uni.hideLoading();
|
||
const [proportion, cate] = res;
|
||
this.cateData = cate.data;
|
||
this.propotionData = proportion.data;
|
||
|
||
//初始化
|
||
this.searchParam.mer_cate_id = this.cateData[0].store_category_id;
|
||
// this.searchParam.deduction_rate = this.propotionData[0].product_label_id;
|
||
|
||
this.getGoodsList();
|
||
}).catch(er => {
|
||
uni.hideLoading();
|
||
})
|
||
},
|
||
|
||
// 滚动到底部
|
||
scrolltolower(e) {
|
||
this.getGoodsList();
|
||
},
|
||
|
||
// 获取商品分类列表
|
||
getGoodsList() {
|
||
let that = this;
|
||
let num = that.searchParam.limit;
|
||
if (!that.hotScroll) return;
|
||
if (that.hotLoading) return;
|
||
that.hotLoading = true;
|
||
that.hotTitle = '';
|
||
|
||
goodsList(this.searchParam).then(res => {
|
||
let list = res.data.list;
|
||
let hotScroll;
|
||
if (list.length < num && list.length != 0 || list.length == 0)
|
||
hotScroll = true;
|
||
else
|
||
hotScroll = false;
|
||
that.hotScroll = hotScroll;
|
||
that.hotLoading = false;
|
||
that.hotTitle = hotScroll ? '已全部加载' : '加载更多';
|
||
that.goodsData = that.goodsData.concat(list);
|
||
that.searchParam.page += 1;
|
||
});
|
||
},
|
||
|
||
// 比例
|
||
handleChooseProp(e) {
|
||
this.goodsData = [];
|
||
this.searchParam.page = 1;
|
||
this.searchParam.deduction_rate = e;
|
||
this.getGoodsList();
|
||
},
|
||
|
||
// 侧边栏商品类型
|
||
handleChooseSideBar(e) {
|
||
this.goodsData = [];
|
||
this.searchParam.page = 1;
|
||
this.searchParam.mer_cate_id = e;
|
||
this.getGoodsList();
|
||
},
|
||
|
||
// 具体商品列表高度
|
||
initGoodsListHeight() {
|
||
this.$nextTick(async () => {
|
||
let footerDom = await this.getDomInfo(".footer");
|
||
let goodsDom = await this.getDomInfo(".con-right-goods");
|
||
this.goodsListHeight = footerDom.top - goodsDom.top + "px";
|
||
})
|
||
},
|
||
|
||
// 农产品类型高度
|
||
initHeight() {
|
||
this.$nextTick(async () => {
|
||
let leftDom = await this.getDomInfo(".con-left");
|
||
let flowDom = await this.getDomInfo(".flow");
|
||
this.leftDomHeight = flowDom.top - leftDom.top + "px";
|
||
})
|
||
},
|
||
|
||
// 获取dom布局信息
|
||
getDomInfo(selector) {
|
||
return new Promise((resolve, reject) => {
|
||
uni.createSelectorQuery().in(this).select(selector).boundingClientRect((data) => {
|
||
resolve(data);
|
||
}).exec();
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
height: 100%;
|
||
background-color: #F7F7F7;
|
||
}
|
||
|
||
view,
|
||
text {
|
||
line-height: 1;
|
||
}
|
||
|
||
.smallClassification {
|
||
width: 100%;
|
||
height: 760rpx;
|
||
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/80b54202402290906142644.webp");
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
|
||
.search {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 102rpx 30rpx 0;
|
||
box-sizing: border-box;
|
||
margin-bottom: 42rpx;
|
||
|
||
.icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border: 2rpx solid #fff;
|
||
border-bottom-color: transparent;
|
||
border-right-color: transparent;
|
||
transform: rotate(-45deg);
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.input-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
border-radius: 29rpx;
|
||
height: 58rpx;
|
||
padding-left: 16rpx;
|
||
|
||
input {
|
||
width: 494rpx;
|
||
height: 100%;
|
||
margin-right: 20rpx;
|
||
box-sizing: border-box;
|
||
margin-left: 20rpx;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.uni-input-placeholder {
|
||
font-size: 28rpx;
|
||
color: #9f9f9f;
|
||
}
|
||
}
|
||
|
||
text {
|
||
width: 100rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
image {
|
||
width: 42rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.con {
|
||
display: flex;
|
||
|
||
.con-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 176rpx;
|
||
overflow: auto;
|
||
|
||
.con-left-bili_title {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
[class^=con-left-bili_num_] {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
text {
|
||
position: relative;
|
||
display: inline-block;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #262626;
|
||
text-align: center;
|
||
width: 80%;
|
||
}
|
||
|
||
.active {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #252525;
|
||
|
||
&::after {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80rpx;
|
||
height: 18rpx;
|
||
background: linear-gradient(90deg, #FF8057 0%, rgba(86, 197, 113, 0) 100%);
|
||
border-radius: 9rpx 0rpx 0rpx 9rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.con-right {
|
||
width: calc(100vw - 176rpx);
|
||
padding-right: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.con-right-proportion {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 38rpx;
|
||
margin-bottom: 25rpx;
|
||
|
||
image {
|
||
width: 154rpx;
|
||
height: 28rpx;
|
||
margin-right: 50rpx;
|
||
}
|
||
|
||
.con-right-proportion-item {
|
||
margin-right: 22rpx;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.active {
|
||
padding: 7rpx 22rpx;
|
||
background: #FEE109;
|
||
border-radius: 17rpx;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #616161;
|
||
}
|
||
}
|
||
|
||
.con-right-goods {
|
||
overflow: auto;
|
||
|
||
.con-right-goods-item {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
|
||
.goods-item-left {
|
||
background: #A3CAB9;
|
||
border-radius: 20rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.goods-item-right {
|
||
flex: 1;
|
||
|
||
.goods-item-right-title {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
|
||
.city {
|
||
margin-right: 10rpx;
|
||
padding: 4rpx 8rpx;
|
||
background: #FF8056;
|
||
border-radius: 6rpx;
|
||
font-size: 20rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.name {
|
||
width: 206rpx;
|
||
height: 28rpx;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
color: #1A1A1A;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.goods-item-right-redpackat {
|
||
display: inline-block;
|
||
margin-bottom: 18rpx;
|
||
padding: 6rpx 14rpx;
|
||
background: rgba(246, 68, 39, .28);
|
||
border-radius: 17rpx;
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #F23131;
|
||
}
|
||
|
||
.goods-item-right-rules {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 25rpx;
|
||
|
||
.unit,
|
||
.addr {
|
||
font-size: 22rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #7A7A7A;
|
||
}
|
||
|
||
.unit {}
|
||
|
||
.addr {}
|
||
}
|
||
|
||
.goods-item-right-purchase {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.num {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #1A1A1A;
|
||
}
|
||
|
||
.buy {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #FF8056;
|
||
border-radius: 50%;
|
||
|
||
&::after,
|
||
&::before {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 24rpx;
|
||
height: 4rpx;
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
&::before {
|
||
transform: translate(-50%, -50%) rotate(90deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx 0 40rpx;
|
||
width: 750rpx;
|
||
height: 166rpx;
|
||
background: #FFFFFF;
|
||
box-sizing: border-box;
|
||
|
||
.footer-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 14rpx;
|
||
|
||
.price {
|
||
width: 131rpx;
|
||
height: 28rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #1A1A1A;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #616161;
|
||
}
|
||
}
|
||
|
||
.footer-right {
|
||
width: 200rpx;
|
||
height: 78rpx;
|
||
line-height: 78rpx;
|
||
text-align: center;
|
||
background: linear-gradient(-20deg, #FF8154 0%, #FF8154 100%);
|
||
border-radius: 39rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.flow {
|
||
position: fixed;
|
||
bottom: 180rpx;
|
||
left: 35rpx;
|
||
|
||
image {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
}
|
||
|
||
text {
|
||
position: absolute;
|
||
top: -3rpx;
|
||
right: -2rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
background: #FFCE51;
|
||
border-radius: 50%;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #616161;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.empty-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 100rpx auto 0;
|
||
|
||
image {
|
||
width: 414rpx;
|
||
height: 240rpx;
|
||
}
|
||
|
||
.txt {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style> |