|
|
@@ -1,6 +1,13 @@
|
|
|
<template>
|
|
|
<view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
<view class="good-search clearfix" v-if="searchStatus">
|
|
|
+ <view class="nav-tab-bar u-f-ajc">
|
|
|
+ <block v-for="(tab,index) in tabBars" :key='tab.id'>
|
|
|
+ <view class="tabstyle u-f-ajc" :class="{'addstyle':tabIndex==index}" @click="changeTab(index)">{{tab.name}}
|
|
|
+ <i v-if='(tabIndex==index)' class='nav-tab-line'>√</i>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
<view class="search-from name">
|
|
|
<text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
<input class="input"
|
|
|
@@ -23,35 +30,77 @@
|
|
|
<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"></image>
|
|
|
<text class="error-text">{{isShowEmptyText}}</text>
|
|
|
</view>
|
|
|
- <view class="product-container" v-else :style="{paddingTop:searchStatus?'112rpx':''}">
|
|
|
- <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="productList.length > 0">
|
|
|
- <view v-for="(item,index) in productList" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
|
|
|
- <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
- <view class="list-details-info">
|
|
|
- <text class="list-details-title">{{item.name}}</text>
|
|
|
- <text class="list-details-specs">规格：{{item.unit?item.unit:''}}</text>
|
|
|
- <text class="list-details-miniQuantity">起订量：{{item.minBuyNumber}}</text>
|
|
|
- <view class="list-details-price">
|
|
|
- <view class="list-shop">
|
|
|
- <view class="list-price" >
|
|
|
- <text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
|
|
|
- <text class="price-view ladder" v-if="item.ladderPriceFlag == '1'">阶梯价</text>
|
|
|
- <text class="price-larger">￥{{item.retailPrice.toFixed(2)}}</text>
|
|
|
+
|
|
|
+ <view class="product-container" v-else :style="{paddingTop:searchStatus?'112rpx':''}" >
|
|
|
+ <swiper :current="tabIndex" style="height: 1190rpx;">
|
|
|
+ <swiper-item>
|
|
|
+ <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y v-if="productList.length > 0">
|
|
|
+ <view v-for="(item,index) in productList" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
|
|
|
+ <image mode='widthFix' :src="item.mainImage" class="list-img" alt="list-img"></image>
|
|
|
+ <view class="list-details-info">
|
|
|
+ <text class="list-details-title">{{item.name}}</text>
|
|
|
+ <text class="list-details-specs">规格：{{item.unit?item.unit:''}}</text>
|
|
|
+ <text class="list-details-miniQuantity">起订量：{{item.minBuyNumber}}</text>
|
|
|
+ <view class="list-details-price">
|
|
|
+ <view class="list-shop">
|
|
|
+ <view class="list-price" >
|
|
|
+ <text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
|
|
|
+ <text class="price-larger">￥{{item.retailPrice.toFixed(2)}}</text>
|
|
|
+ <text class="price-view ladder" v-if="item.ladderPriceFlag == '1'">阶</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-price-none" v-if="item.repurchasePriceState">
|
|
|
+ <text class="price-none">￥{{item.discountPrice}}</text>
|
|
|
+ <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
|
|
|
</view>
|
|
|
- <view class="list-price-none" v-if="item.repurchasePriceState">
|
|
|
- <text class="price-none">￥{{item.discountPrice}}</text>
|
|
|
- <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showLoading && productList.length > 4 && !showRegularBtn">
|
|
|
+ <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
|
|
|
+ <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ <!-- 组合商品list -->
|
|
|
+ <swiper-item>
|
|
|
+ <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower" scroll-y>
|
|
|
+ <view class="zuhe_title">组合组合组合组合组合</view>
|
|
|
+ <view v-for="(item,index) in productList" :key="index" :id="item.id" class="zuhe-list-content commodity-list" @click.stop="navToDetailPage(item.productID)">
|
|
|
+ <view class="list-details-info">
|
|
|
+ <text class="list-details-title zuhe_list_text">商品编码：{{item.name}}</text>
|
|
|
+ <text class="list-details-specs zuhe_list_text">{{item.name}}</text>
|
|
|
+ <view class="list-details-price zuhe_list_price">
|
|
|
+ <view class="list-shop">
|
|
|
+ <view class="list-price zuhe_list_price" >
|
|
|
+ <text class="zuhe_price-larger zuhe_list_text" >价格:￥{{item.retailPrice.toFixed(2)}}</text>
|
|
|
+ <text class="price-two zuhe_list_text">总价:<text class="zuhe_list_zj">￥ 12451.00</text></text>
|
|
|
+ <text class="price-view ladder" v-if="item.ladderPriceFlag == '1'">阶</text>
|
|
|
+ <text class="price-view activity" v-if="item.isShowActFlg">活动价</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-price-none" v-if="item.repurchasePriceState">
|
|
|
+ <!-- -->
|
|
|
+ <text class="price-none">价格：￥{{item.discountPrice}}</text>
|
|
|
+ <text class="price-two">总价：<span>￥12401.00</span></text>
|
|
|
+ <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="add-cart-btn zuhe_btn" @click.stop="operationHanld(item)">选择数量</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <button class="add-cart-btn" @click.stop="operationHanld(item)">选择数量</button>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="showLoading && productList.length > 4 && !showRegularBtn">
|
|
|
- <view class="loading-wrapper loading-wrapper-now" v-if="loadingNow">{{loadingText}}<text v-if="loadingText === '已至底部'">‧ ‧ ‧</text></view>
|
|
|
- <view class="loading-wrapper loading-wrapper-btm" v-else>———<text class="btm-text">已至底部</text>———</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
+ <view class="foot_conten" >
|
|
|
+ <view class="zuhe_foot-box">
|
|
|
+ <text>种类:10</text>
|
|
|
+ <text>总数:12450</text>
|
|
|
+ <text>总额:1215421</text>
|
|
|
+ </view>
|
|
|
+ <button type="default" class="buycart" @click.stop="operationHanld(item)">加入购物车</button>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
</view>
|
|
|
<view class="cart-icon" @click="toCartPage">
|
|
|
<text v-if="cartQuantity > 0" class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
|
|
|
@@ -106,6 +155,11 @@
|
|
|
cartQuantity: 0,
|
|
|
showRegularBtn: false,
|
|
|
isPrecedence:false,
|
|
|
+ tabIndex:0,
|
|
|
+ tabBars:[
|
|
|
+ {name:'单一商品',id:'danyi'},
|
|
|
+ {name:'组合商品',id:'zuhe'}
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -123,6 +177,9 @@
|
|
|
this.getProductAgainInfo(true);
|
|
|
}
|
|
|
},
|
|
|
+ changeTab(index){
|
|
|
+ this.tabIndex = index;
|
|
|
+ },
|
|
|
setScrollHeight() {
|
|
|
const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
this.windowHeight = windowHeight - 1;
|
|
|
@@ -219,6 +276,74 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+ .foot_conten{
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ left:0px;
|
|
|
+ bottom:100rpx;
|
|
|
+ z-index: 9999;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 120rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .zuhe_foot-box{
|
|
|
+ width: 70%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .zuhe_foot-box text{
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+ .foot_conten .buycart{
|
|
|
+ width: 162rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #EFAF00 !important;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ margin-top: 25rpx
|
|
|
+ }
|
|
|
+ .price-none{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .zuhe_title{
|
|
|
+ background:#FFFFFF;
|
|
|
+ height: 76rpx;
|
|
|
+ color: #E15616;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-bottom: 2rpx solid #E15616;
|
|
|
+ line-height: 76rpx;
|
|
|
+ padding-left: 30rpx;;
|
|
|
+ }
|
|
|
+ .nav-tab-line{
|
|
|
+ color: #E15616;
|
|
|
+ position: absolute;
|
|
|
+ top: 20rpx;
|
|
|
+ right: 4rpx;
|
|
|
+ font-weight: bold
|
|
|
+ }
|
|
|
+ .addstyle{
|
|
|
+ background: linear-gradient(-42deg, transparent 28rpx, #E15616 0) top right;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .tabstyle{
|
|
|
+ width: 128rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 12rpx;
|
|
|
+
|
|
|
+ }
|
|
|
.commodity-list-wrapper {
|
|
|
scroll-view {
|
|
|
height: 100%;
|
|
|
@@ -249,14 +374,14 @@
|
|
|
left: 0;
|
|
|
z-index: 999;
|
|
|
.search-from{
|
|
|
- width: 582rpx;
|
|
|
+ width: 326rpx;
|
|
|
height: 64rpx;
|
|
|
background: #F7F7F7;
|
|
|
border-radius: 14rpx;
|
|
|
float: left;
|
|
|
position: relative;
|
|
|
.input{
|
|
|
- width: 500rpx;
|
|
|
+ // width: 500rpx;
|
|
|
height: 64rpx;
|
|
|
float: left;
|
|
|
line-height: 64rpx;
|
|
|
@@ -287,13 +412,14 @@
|
|
|
}
|
|
|
}
|
|
|
.search-btn{
|
|
|
- width: 120rpx;
|
|
|
+ // width: 120rpx;
|
|
|
line-height: 64rpx;
|
|
|
text-align: center;
|
|
|
font-size: $font-size-28;
|
|
|
color: $color-system;
|
|
|
float: left;
|
|
|
background: #FFFFFF;
|
|
|
+ margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
.all-type-list-content {
|
|
|
@@ -312,8 +438,21 @@
|
|
|
border: 2rpx solid #f3f3f3;
|
|
|
}
|
|
|
}
|
|
|
+ .zuhe-list-content{
|
|
|
+ width: 655rpx;
|
|
|
+ // height: 214rpx;
|
|
|
+ background: #fff;
|
|
|
+ border: 2px solid #FFF0DE;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: content-box;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin: 10rpx auto;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
.list-details-info {
|
|
|
- width: 442rpx;
|
|
|
+ width: 100%;
|
|
|
flex-direction: column;
|
|
|
font-size: 26rpx;
|
|
|
position: relative;
|
|
|
@@ -393,11 +532,23 @@
|
|
|
font-size: $font-size-30;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
+ .zuhe_price-larger{
|
|
|
+ color: #666666;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .price-two{
|
|
|
+ color: #666666;
|
|
|
+ float: left;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ }
|
|
|
+ .zuhe_list_zj{
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
.price-view{
|
|
|
display: inline-block;
|
|
|
- width: 78rpx;
|
|
|
- border-radius: 18rpx;
|
|
|
- font-size: $font-size-20;
|
|
|
+ width: 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
text-align: center;
|
|
|
color: #FFFFFF;
|
|
|
height: 36rpx;
|
|
|
@@ -411,6 +562,14 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .zuhe_list_price .price-view{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ float: right;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .zuhe_list_price{
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
.list-price-none{
|
|
|
width: 100%;
|
|
|
.price-none{
|
|
|
@@ -431,12 +590,20 @@
|
|
|
height: 64rpx;
|
|
|
line-height: 64rpx;
|
|
|
border-radius: 32rpx;
|
|
|
- color: #fff;
|
|
|
+ color: #333333;
|
|
|
font-size: 26rpx;
|
|
|
margin-right: 0;
|
|
|
- background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
|
|
|
+ // background:linear-gradient(135deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 2rpx solid #C9C9C9;
|
|
|
+ }
|
|
|
+ .zuhe_btn{
|
|
|
+ float: right;
|
|
|
}
|
|
|
}
|
|
|
+ .zuhe_list_price{
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
.cart-icon {
|
|
|
width: 92rpx;
|
|
|
height: 92rpx;
|
|
|
@@ -460,4 +627,7 @@
|
|
|
right: 0;
|
|
|
}
|
|
|
}
|
|
|
+ .zuhe_list_text{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
</style>
|
Administrator