|
@@ -1,57 +1,121 @@
|
|
|
<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="search-from name">
|
|
|
- <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
- <input class="input"
|
|
|
- type="text"
|
|
|
- focus
|
|
|
- confirm-type="search"
|
|
|
- v-model="searchInputVal"
|
|
|
- placeholder="请输入商品关键词"
|
|
|
- @input="onShowClose"
|
|
|
- @confirm="searchOpertor"
|
|
|
- maxlength="20"/>
|
|
|
- <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
- </view>
|
|
|
- <view class="search-btn">
|
|
|
- <button class="search-btn" type="default" @click.stop="searchOpertor">搜索</button>
|
|
|
- </view>
|
|
|
+ <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' :class="{ current: tabIndex === index }">
|
|
|
+ <view class="tabstyle u-f-ajc" :class="{'addstyle':tabIndex==index}" @tap="changeTab(index)">{{tab.name}}
|
|
|
+ <i v-if='(tabIndex==index)' class='nav-tab-line iconfont icon-gou'></i>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ <view class="search-from name">
|
|
|
+ <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
+ <input class="input"
|
|
|
+ type="text"
|
|
|
+ focus
|
|
|
+ confirm-type="search"
|
|
|
+ v-model="searchInputVal"
|
|
|
+ placeholder="请输入商品关键词"
|
|
|
+ @input="onShowClose"
|
|
|
+ @confirm="searchOpertor(tabIndex)"
|
|
|
+ maxlength="20"/>
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText(tabIndex)"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn" :class="tabIndex">
|
|
|
+ <button class="search-btn" type="default" @click.stop="searchOpertor(tabIndex)" >搜索</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<list-skeleton v-if="showSkeleton"></list-skeleton>
|
|
|
<view class="empty-container" v-if="isShowEmpty" >
|
|
|
<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>
|
|
|
- <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>
|
|
|
- </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="product-container" v-else >
|
|
|
+ <view :class="tabIndex" v-if="tabIndex === 0" :style="{paddingTop:searchStatus?'128rpx':''}">
|
|
|
+ <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower(tabIndex)" 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 list-details-specs">起订量:{{item.minBuyNumber}}</text>
|
|
|
+ <view class="list-details-specs" v-if="item.productCode!=''&&item.productCode!=null">
|
|
|
+ <view>商品编码:{{item.productCode}}</view>
|
|
|
+ </view>
|
|
|
+ <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'" @click.stop="alertjieti(item)">阶</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>
|
|
|
+ </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>
|
|
|
+ <!-- 组合商品 -->
|
|
|
+ <view :class="tabIndex" v-if="tabIndex === 1">
|
|
|
+ <scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower(tabIndex)" scroll-y>
|
|
|
+ <view class="all-zuhe-list" v-for="(item,index) in combinationProduct" :key="index" :id="item.id" :style="{paddingTop:searchStatus?'112rpx':''}" >
|
|
|
+ <view class="zuhe_title" :class="index%2==0 ? 'active' : ''">{{item.name}}</view>
|
|
|
+ <view v-for="(pros,proIndex) in item.combinationProductList" :class="index%2==0 ? 'stylecontent' : ''" :key="proIndex" :id="pros.productID" class="zuhe-list-content commodity-list" >
|
|
|
+ <view class="list-details-info" >
|
|
|
+ <text class="list-details-title zuhe_list_text">商品编码:{{pros.productCode}}</text>
|
|
|
+ <text class="list-details-specs zuhe_list_text" @click.stop="navToDetailPage(pros.productID)">{{pros.name}}</text>
|
|
|
+ <view class="list-details-price zuhe_list_price">
|
|
|
+ <view class="list-shop">
|
|
|
+ <view class="list-price zuhe_list_price" >
|
|
|
+ <view class="zuhe_price-larger zuhe_list_text" >价格:¥{{pros.retailPrice.toFixed(2)}}</view>
|
|
|
+ <view :style="{'overflow':'hidden'}">
|
|
|
+ <view class="price-two zuhe_list_text" >总价:<text class="zuhe_list_zj">¥ {{pros.totalPrice.toFixed(2)}}</text></view>
|
|
|
+ <text class="price-view ladder zuhe-price-ladder" v-if="pros.ladderPriceFlag == '1'" @click.stop="alertjieti(pros)">阶</text>
|
|
|
+ <text class="price-view activity" v-if="pros.actStatus == '1'">活动价</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-price-none" v-if="pros.repurchasePriceState">
|
|
|
+ <text class="price-none">价格:¥{{pros.discountPrice}}</text>
|
|
|
+ <text class="iconfont icon-wenhao" @click.stop="repurchModel"></text>
|
|
|
+ </view>
|
|
|
+ <view class="count">
|
|
|
+ <view class="number-box">
|
|
|
+ <view class="iconfont icon-jianhao" @click.stop="changeCountSub(item,pros)"></view>
|
|
|
+ <input class="btn-input" type="number" maxlength='6' v-model="pros.initProductNum" @blur="changeNnmber($event,item,pros)">
|
|
|
+ <view class="iconfont icon-jiahao" @click.stop="changeCountAdd(item,pros)"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="foot_conten" >
|
|
|
+ <view class="zuhe_foot-box">
|
|
|
+ <view class="">
|
|
|
+ <text>种类:{{item.productKind}}</text>
|
|
|
+ <text >总数:{{item.productTotalNum}}</text>
|
|
|
+ </view>
|
|
|
+ <text>总额:<text class="foot_text">{{item.productTotalAmount.toFixed(2)}}</text></text>
|
|
|
+ </view>
|
|
|
+ <button type="default" class="buycart" @click.stop="operationHanld(item)">加入购物车</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="showLoading && combinationProduct.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>
|
|
|
</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">
|
|
@@ -60,7 +124,7 @@
|
|
|
<image src='../../../static/icon-cart-active@3x.png' mode="widthFix"></image>
|
|
|
</view>
|
|
|
<!-- 透明模态层 -->
|
|
|
- <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
+ <modal-layer v-if='isModallayer'></modal-layer>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -68,7 +132,7 @@
|
|
|
import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
|
|
|
import modalLayer from "@/components/modal-layer"
|
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
- import { getSellerProduct } from "@/api/seller.js"
|
|
|
+ import { getSellerProduct,getcombinationProduct } from "@/api/seller.js"
|
|
|
import { mapState,mapMutations } from 'vuex';
|
|
|
export default{
|
|
|
name:'productList',
|
|
@@ -94,18 +158,29 @@
|
|
|
isShowEmptyText: '搜索相关商品',
|
|
|
clubUserId: '',
|
|
|
scrollHeight: '',
|
|
|
- productList: [],
|
|
|
+ productList: [],
|
|
|
+ combinationProduct:[],
|
|
|
+ zuheProductList:[],//组合商品列表
|
|
|
showLoading: false,
|
|
|
loadingNow: true,
|
|
|
loadingText: '上拉加载更多',
|
|
|
- pageSize: 10,
|
|
|
+ pageSize: 10,
|
|
|
+ zuhepageSize:5,
|
|
|
pageNum: 1,
|
|
|
hasNextPage: false,
|
|
|
pullFlag: true,
|
|
|
fromRegularPurchasePage: false,
|
|
|
cartQuantity: 0,
|
|
|
showRegularBtn: false,
|
|
|
- isPrecedence:false,
|
|
|
+ isPrecedence:false,
|
|
|
+ ladderPriceList:[],//是否 阶梯,
|
|
|
+ tabIndex:0,
|
|
|
+ goodsList:[],
|
|
|
+ tabBars:[
|
|
|
+ {name:'单一',id:'danyi'},
|
|
|
+ {name:'组合',id:'zuhe'}
|
|
|
+ ],
|
|
|
+ isShow: false,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -118,15 +193,19 @@
|
|
|
...mapState(['hasLogin','userInfo'])
|
|
|
},
|
|
|
methods:{
|
|
|
- scrolltolower() {
|
|
|
- if(this.hasNextPage && this.pullFlag) {
|
|
|
- this.getProductAgainInfo(true);
|
|
|
+ scrolltolower(tabIndex) {
|
|
|
+ if(this.hasNextPage && this.pullFlag) {
|
|
|
+ if(tabIndex ==0){
|
|
|
+ this.getProductAgainInfo(true);
|
|
|
+ }else if(tabIndex==1){
|
|
|
+ this.getcombinationProduct(true);
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
setScrollHeight() {
|
|
|
const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
this.windowHeight = windowHeight - 1;
|
|
|
- this.scrollHeight = windowHeight - 1;
|
|
|
+ this.scrollHeight = windowHeight - 1;
|
|
|
},
|
|
|
getProductAgainInfo(loadMore) {
|
|
|
this.showLoading = true;
|
|
@@ -137,7 +216,7 @@
|
|
|
let params = {clubUserId:this.clubUserId,pageNum:this.pageNum,pageSize:this.pageSize,searchWord:this.searchInputVal}
|
|
|
getSellerProduct(params).then(response =>{
|
|
|
this.isShowWrapper = true
|
|
|
- const responseData = response.data;
|
|
|
+ const responseData = response.data;
|
|
|
if(responseData.results && responseData.results.length > 0){
|
|
|
this.hasNextPage = responseData.hasNextPage;
|
|
|
this.isShowEmpty = false;
|
|
@@ -172,7 +251,8 @@
|
|
|
this.showLoading = true;
|
|
|
this.loadingNow = false;
|
|
|
}
|
|
|
- } else {
|
|
|
+ } else {
|
|
|
+ console.log('111111111')
|
|
|
this.isShowEmpty = true;
|
|
|
this.isShowEmptyText ='暂无相关商品'
|
|
|
}
|
|
@@ -180,17 +260,164 @@
|
|
|
this.$util.msg(error.msg,2000);
|
|
|
})
|
|
|
},
|
|
|
- searchOpertor(){//搜索商品
|
|
|
- if(this.searchInputVal == ''){
|
|
|
- this.$util.msg('请输入商品关键词',2000)
|
|
|
- }else{
|
|
|
- this.pageNum = 1
|
|
|
- this.showSkeleton = true;
|
|
|
- this.getProductAgainInfo();
|
|
|
+ searchOpertor(tabIndex){//搜索商品
|
|
|
+ if(tabIndex == 0){
|
|
|
+ if(this.searchInputVal == ''){
|
|
|
+ this.$util.msg('请输入商品关键词',2000)
|
|
|
+ }else{
|
|
|
+ this.pageNum = 1
|
|
|
+ this.showSkeleton = true;
|
|
|
+ this.getProductAgainInfo();
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.pageNum = 1
|
|
|
+ this.showSkeleton = true;
|
|
|
+ this.getcombinationProduct();
|
|
|
}
|
|
|
- },
|
|
|
- operationHanld(prop){
|
|
|
- this.$emit('operationConfim',prop)
|
|
|
+ },
|
|
|
+ getcombinationProduct(loadMore){//组合搜索商品
|
|
|
+ this.showLoading = true;
|
|
|
+ this.loadingNow = true;
|
|
|
+ this.loadingText = '加载中';
|
|
|
+ this.isShowEmpty = false;
|
|
|
+ if(loadMore) {this.pageNum += 1;}
|
|
|
+ let params = {clubUserId:this.clubUserId,pageNum:this.pageNum,pageSize:this.zuhepageSize,searchWord:this.searchInputVal}
|
|
|
+ getcombinationProduct(params).then(response =>{
|
|
|
+ this.isShowWrapper = true
|
|
|
+ const responseData = response.data;
|
|
|
+ if(responseData.results && responseData.results.length > 0){
|
|
|
+ this.hasNextPage = responseData.hasNextPage;
|
|
|
+
|
|
|
+ this.isShowEmpty = false;
|
|
|
+ if(loadMore) {
|
|
|
+ this.combinationProduct = [...this.combinationProduct,...responseData.results];
|
|
|
+ } else {
|
|
|
+ this.combinationProduct = [...responseData.results];
|
|
|
+
|
|
|
+ this.showSkeleton = false;
|
|
|
+ }
|
|
|
+ // 防上拉暴滑
|
|
|
+ this.pullFlag = false;
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.pullFlag = true;
|
|
|
+ },500)
|
|
|
+ // 底部提示文案
|
|
|
+ if(this.hasNextPage) {
|
|
|
+ this.loadingText = '上拉加载更多';
|
|
|
+ } else {
|
|
|
+ this.showLoading = true;
|
|
|
+ this.loadingNow = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isShowEmpty = true;
|
|
|
+ this.isShowEmptyText ='暂无相关商品'
|
|
|
+ }
|
|
|
+ }).catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeCountAdd(item,pros){//商品数量加加
|
|
|
+ if(pros.initProductNum == 0){
|
|
|
+ pros.initProductNum = pros.minBuyNumber
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }else if(pros.initProductNum >= pros.minBuyNumber){
|
|
|
+ pros.initProductNum++
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.totalPeice(item)
|
|
|
+ this.totalCount(item)
|
|
|
+ this.totalKind(item)
|
|
|
+ },
|
|
|
+ changeCountSub(item,pros){//商品数量减减
|
|
|
+ if(pros.initProductNum==0){
|
|
|
+ this.$util.msg(`采购数量不能小于0`,2000);
|
|
|
+ return
|
|
|
+ }else if(pros.initProductNum == pros.minBuyNumber){
|
|
|
+ pros.initProductNum = 0;
|
|
|
+ this.processActivityPrice(pros);
|
|
|
+ }else{
|
|
|
+ pros.initProductNum--
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.totalPeice(item)
|
|
|
+ this.totalCount(item)
|
|
|
+ this.totalKind(item)
|
|
|
+ },
|
|
|
+ changeNnmber(e,item,pros){//输入商品数量更新
|
|
|
+ let _value = e.detail.value;
|
|
|
+ if(!this.$api.isNumber(_value)){
|
|
|
+ pros.initProductNum = pros.minBuyNumber
|
|
|
+ }else if(_value < pros.minBuyNumber){
|
|
|
+ this.$util.msg(`该商品最小起订量为${pros.minBuyNumber}`,2000);
|
|
|
+ pros.initProductNum = pros.minBuyNumber
|
|
|
+ }else{
|
|
|
+ pros.initProductNum = parseInt(e.detail.value)
|
|
|
+ this.processActivityPrice(pros)
|
|
|
+ }
|
|
|
+ this.totalPeice(item)
|
|
|
+ this.totalCount(item)
|
|
|
+ this.totalKind(item)
|
|
|
+ },
|
|
|
+ totalPeice(item){ //计算总价格,每次调用此方法,将初始值为0,遍历价格并累加
|
|
|
+ let prosPrice=0;
|
|
|
+ let productsList =[];
|
|
|
+ productsList=item.combinationProductList;
|
|
|
+ productsList.forEach(pros=>{
|
|
|
+ prosPrice+=pros.retailPrice*pros.initProductNum;
|
|
|
+ item.productTotalAmount = prosPrice;
|
|
|
+ })
|
|
|
+ // console.log(prosPrice)
|
|
|
+ },
|
|
|
+ totalCount(item){//计算总数量
|
|
|
+ let prosAllCount=0
|
|
|
+ let productsList =[];
|
|
|
+ productsList = item.combinationProductList
|
|
|
+ productsList.forEach(pros=>{
|
|
|
+ prosAllCount+=parseInt(pros.initProductNum);
|
|
|
+ item.productTotalNum = prosAllCount
|
|
|
+ })
|
|
|
+ // console.log(prosAllCount)
|
|
|
+ },
|
|
|
+ totalKind(item){//计算商品种类
|
|
|
+ let productsList =[];
|
|
|
+ let checkList = [];
|
|
|
+ productsList=item.combinationProductList;
|
|
|
+ productsList.forEach(pros=>{
|
|
|
+ if(pros.initProductNum>0){
|
|
|
+ checkList.push(pros)
|
|
|
+ item.productKind = checkList.length;
|
|
|
+ }else{
|
|
|
+ item.productKind = checkList.length;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ processActivityPrice(pros){//单独处理活动价格和阶梯价格
|
|
|
+ let ladderPriceList = pros.ladderPriceList;
|
|
|
+ if(pros.ladderPriceFlag == '0' || pros.actStatus == 1){
|
|
|
+ pros.totalPrice = pros.initProductNum*pros.retailPrice
|
|
|
+ }else{
|
|
|
+ ladderPriceList.forEach((item,index)=>{
|
|
|
+ if(pros.initProductNum>=item.buyNum){
|
|
|
+ pros.retailPrice = item.buyPrice
|
|
|
+ pros.totalPrice = pros.initProductNum*item.buyPrice
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ operationHanld(prop){
|
|
|
+ this.$emit('operationConfim',prop);
|
|
|
+ },
|
|
|
+ alertjieti(pros){
|
|
|
+ this.$emit('alertjietiConfim',pros);
|
|
|
+ },
|
|
|
+ changeTab(index){
|
|
|
+ this.tabIndex = index;
|
|
|
+ if(index == 0){
|
|
|
+ this.loadingNow = false
|
|
|
+ this.isShowEmpty = true;
|
|
|
+ this.isShowEmptyText ='暂无相关商品'
|
|
|
+ }
|
|
|
+ this.$emit('changetab',index);
|
|
|
},
|
|
|
navToDetailPage(id) {
|
|
|
this.isModallayer = true;
|
|
@@ -207,18 +434,107 @@
|
|
|
if(this.searchInputVal != ''){
|
|
|
this.isShowClose = true
|
|
|
}else{
|
|
|
- this.isShowClose = false
|
|
|
+ this.isShowClose = false
|
|
|
}
|
|
|
},
|
|
|
- delInputText(){//清除输入框内容
|
|
|
- this.searchInputVal = ''
|
|
|
- this.isShowClose = false
|
|
|
+ delInputText(tabIndex){//清除输入框内容
|
|
|
+ if(tabIndex==0){
|
|
|
+ this.searchInputVal = '';
|
|
|
+ this.productList =[];
|
|
|
+ this.isShowClose = false;
|
|
|
+ this.loadingNow = false;
|
|
|
+ this.isShowEmpty = true;
this.isShowEmptyText ='暂无相关商品'
|
|
|
+ }else{
|
|
|
+ this.searchInputVal = '';
|
|
|
+ this.isShowClose = false;
|
|
|
+ this.getcombinationProduct();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+ .all-zuhe-list{
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .foot_conten{
|
|
|
+ width: 655rpx;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ // line-height: 80rpx;
|
|
|
+ display: inherit;
|
|
|
+ padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ }
|
|
|
+ .zuhe_foot-box{
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ width: 490rpx;
|
|
|
+ }
|
|
|
+ .zuhe_foot-box text{
|
|
|
+ margin-right: 36rpx;
|
|
|
+ }
|
|
|
+ .foot_text{
|
|
|
+ color: #FF2A2A;
|
|
|
+ }
|
|
|
+ .foot_conten .buycart{
|
|
|
+ width: 162rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background: #EFAF00 !important;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 64rpx;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .price-none{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .zuhe_title{
|
|
|
+ background:#FFFFFF;
|
|
|
+ height: 76rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #1675E1;
|
|
|
+ border-bottom: 4rpx solid #1675E1 ;
|
|
|
+ line-height: 76rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ &.active{
|
|
|
+ color: #E15616;
|
|
|
+ border-bottom: 4rpx solid #E15616;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-gou{
|
|
|
+ color: #E15616;
|
|
|
+ position: absolute;
|
|
|
+ top: 30rpx;
|
|
|
+ right: 0rpx;
|
|
|
+ font-weight: bold
|
|
|
+ }
|
|
|
+ .addstyle{
|
|
|
+ background: linear-gradient(-42deg, transparent 28rpx, #E15616 0) top right;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .tabstyle{
|
|
|
+ width: 128rpx;
|
|
|
+ height: 76rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 76rpx;
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ position: relative;
|
|
|
+ margin-right: 12rpx;
|
|
|
+
|
|
|
+ }
|
|
|
.commodity-list-wrapper {
|
|
|
scroll-view {
|
|
|
height: 100%;
|
|
@@ -237,8 +553,8 @@
|
|
|
}
|
|
|
}
|
|
|
.good-search{
|
|
|
- height: 64rpx;
|
|
|
- width: 702rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ width: 100%;
|
|
|
padding: 24rpx;
|
|
|
background: #FFFFFF;
|
|
|
display: flex;
|
|
@@ -249,24 +565,24 @@
|
|
|
left: 0;
|
|
|
z-index: 999;
|
|
|
.search-from{
|
|
|
- width: 582rpx;
|
|
|
- height: 64rpx;
|
|
|
+ width: 326rpx;
|
|
|
+ height: 80rpx;
|
|
|
background: #F7F7F7;
|
|
|
border-radius: 14rpx;
|
|
|
float: left;
|
|
|
position: relative;
|
|
|
.input{
|
|
|
- width: 500rpx;
|
|
|
- height: 64rpx;
|
|
|
+ // width: 500rpx;
|
|
|
+ height: 80rpx;
|
|
|
float: left;
|
|
|
- line-height: 64rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
color: $text-color;
|
|
|
font-size: $font-size-24;
|
|
|
}
|
|
|
.icon-iconfonticonfontsousuo1{
|
|
|
width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
text-align: center;
|
|
|
display: block;
|
|
|
font-size: $font-size-38;
|
|
@@ -277,9 +593,9 @@
|
|
|
font-size: $font-size-32;
|
|
|
color: #999999;
|
|
|
position: absolute;
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- line-height: 64rpx;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
text-align: center;
|
|
@@ -287,17 +603,18 @@
|
|
|
}
|
|
|
}
|
|
|
.search-btn{
|
|
|
- width: 120rpx;
|
|
|
+ // width: 120rpx;
|
|
|
line-height: 64rpx;
|
|
|
text-align: center;
|
|
|
font-size: $font-size-28;
|
|
|
color: $color-system;
|
|
|
float: left;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #FFFFFF;
|
|
|
+ margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
.all-type-list-content {
|
|
|
- height: 240rpx;
|
|
|
+ // height: 240rpx;
|
|
|
padding: 24rpx;
|
|
|
background: #fff;
|
|
|
margin-bottom: 2rpx;
|
|
@@ -305,15 +622,32 @@
|
|
|
flex-direction: row;
|
|
|
box-sizing: content-box;
|
|
|
.list-img {
|
|
|
- width: 240rpx;
|
|
|
- height: 240rpx !important;
|
|
|
+ width: 312rpx;
|
|
|
+ height: 207rpx !important;
|
|
|
margin-right: 26rpx;
|
|
|
border-radius: 10rpx;
|
|
|
border: 2rpx solid #f3f3f3;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ .zuhe-list-content{
|
|
|
+ width: 655rpx;
|
|
|
+ // height: 214rpx;
|
|
|
+ background: #fff;
|
|
|
+ border: 2rpx solid #DEF4FF;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ box-sizing: content-box;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin: 10rpx auto;
|
|
|
+ padding: 20rpx;
|
|
|
+ &.stylecontent{
|
|
|
+ border: 2rpx solid #FFF0DE;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.list-details-info {
|
|
|
- width: 442rpx;
|
|
|
+ width: 100%;
|
|
|
flex-direction: column;
|
|
|
font-size: 26rpx;
|
|
|
position: relative;
|
|
@@ -330,7 +664,7 @@
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
margin-top: 8rpx;
|
|
|
- color: #999999;
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
.list-details-miniQuantity {
|
|
|
width: 100%;
|
|
@@ -380,9 +714,10 @@
|
|
|
.list-shop{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
- flex: 6;
|
|
|
+ flex: 6;
|
|
|
+ overflow: hidden;
|
|
|
.list-price {
|
|
|
- width: 100%;
|
|
|
+ // width: 100%;
|
|
|
color: #FF2A2A;
|
|
|
float: left;
|
|
|
line-height:36rpx ;
|
|
@@ -391,13 +726,27 @@
|
|
|
.price-larger {
|
|
|
margin-top: 20rpx;
|
|
|
font-size: $font-size-30;
|
|
|
- display: inline-block;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .zuhe_price-larger{
|
|
|
+ color: #666666;
|
|
|
+ // float: left;
|
|
|
+ // margin-right: 85rpx;
|
|
|
+ }
|
|
|
+ .price-two{
|
|
|
+ color: #666666;
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ }
|
|
|
+ .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;
|
|
@@ -410,7 +759,47 @@
|
|
|
background: linear-gradient(135deg,rgba(128,0,255,1) 0%,rgba(242,49,153,1) 100%);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ .zuhe_list_price .price-view{
|
|
|
+ margin-left:20rpx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 5rpx;
|
|
|
+ }
|
|
|
+ .zuhe_list_price{
|
|
|
+ width: 400rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ .count{
|
|
|
+ margin-top: 50rpx;
|
|
|
+ float: right;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ .number-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .iconfont{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding:0 16rpx;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .btn-input{
|
|
|
+ width: 100rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ background: #F8F8F8;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ border-right: 1px solid #EEEEEE;
|
|
|
+ border-left: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.list-price-none{
|
|
|
width: 100%;
|
|
|
.price-none{
|
|
@@ -431,12 +820,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;
|
|
@@ -459,5 +856,8 @@
|
|
|
top: -10rpx;
|
|
|
right: 0;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+ .zuhe_list_text{
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
</style>
|