更新项目

components/cm-module/listTemplate/immediatelyList.vue

@@ -1,968 +1,960 @@
 <template>
-	<view class="container commodity-list-wrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
+	<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' :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="isFocus"
-						   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>
+				<text class="iconfont icon-sousuo"></text>
+				<input
+					class="input"
+					type="text"
+					:focus="isFocus"
+					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>
+		<!-- 骨架 -->
 		<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 class="empty-container" v-if="true">
+			<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 >
-			<view :class="tabIndex" v-if="tabIndex === 0"  :style="{paddingTop:searchStatus?'128rpx':''}">
-				<scroll-view :style="{'height':scrollHeight+'px'}" @scrolltolower="scrolltolower(tabIndex)" scroll-y v-if="listData.length > 0">
-					<view v-for="(item,index) in listData" :key="index" :id="item.id" class="all-type-list-content commodity-list" @click.stop="navToDetailPage(item.p_id)"  >
-					    <image mode='widthFix' :src="item.p_image"  class="list-img" alt="list-img"></image>
-						<view class="list-details-info">
-							<text class="list-details-title">{{isInterceptHtmlFn(item.p_name)}}</text>
-							<text class="list-details-specs">规格：{{item.p_unit?item.p_unit:''}}</text>
-							<text class="list-details-miniQuantity list-details-specs">起订量：{{item.minBuyNumber}}</text>
-							<view class="list-details-specs" v-if="item.p_code!=''&&item.p_code!=null">
-								<view>商品编码：{{item.p_code}}</view>
-							</view>
-							<view class="list-details-price">
-								<template v-if="priceLoading">
-									<view class="list-price-loding">正在获取价格...</view>
-								</template>
-								<template v-else>
-									<view class="list-shop">
-										<view class="list-price">
-											<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
-												￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat }}
-											</text>
-										</view>
-									</view>
-									<button class="add-cart-btn" @click.stop="operationHanld(item)">数量</button>
-								</template>
-							</view>
-							<view class="list-details-price">
-								<view class="floor-item-act" v-if="item.actStatus==1">
-									<view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
-										{{item.promotions.name}}<text>:￥{{ item.price | NumFormat }}</text>
-									</view>
-									<view class="floor-tags" v-else>{{item.promotions.name}}</view>	
-								</view>
-								<view class="floor-item-act" v-if="item.actStatus ==0  &&  item.ladderPriceFlag==1">
-									<view class="floor-tags">阶梯价格</view>	
-								</view>
-							</view>	
+		<view class="product-container" v-else>
+			<scroll-view
+				:style="{ height: scrollHeight + 'px' }"
+				@scrolltolower="scrolltolower(tabIndex)"
+				scroll-y
+				v-if="listData.length > 0"
+			>
+				<view
+					v-for="(item, index) in listData"
+					:key="index"
+					:id="item.id"
+					class="all-type-list-content commodity-list"
+					@click.stop="navToDetailPage(item.p_id)"
+				>
+					<image mode="widthFix" :src="item.p_image" class="list-img" alt="list-img"></image>
+					<view class="list-details-info">
+						<text class="list-details-title">{{ isInterceptHtmlFn(item.p_name) }}</text>
+						<text class="list-details-specs">规格：{{ item.p_unit ? item.p_unit : '' }}</text>
+						<text class="list-details-miniQuantity list-details-specs">起订量：{{ item.minBuyNumber }}</text>
+						<view class="list-details-specs" v-if="item.p_code != '' && item.p_code != null">
+							<view>商品编码：{{ item.p_code }}</view>
 						</view>
-					</view>
-					<view v-if="showLoading && listData.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',paddingTop:searchStatus?'112rpx':''}" @scrolltolower="scrolltolower(tabIndex)" scroll-y>
-					<view class="all-zuhe-list" v-for="(item,index) in combinationProduct" :key="index" :id="item.id">
-						<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 com">
-										<view class="list-price zuhe_list_price" >
-											<view class="zuhe_price-larger zuhe_list_text" >
-												<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="price-larger">价格：￥{{ pros.retailPrice | NumFormat }}</view>
-											</view>
-											<view class="zuhe_price-larger zuhe_list_text" >
-												<view class="floor-item-act" v-if="pros.actStatus==1">
-													<view class="floor-tags" v-if="PromotionsFormat(pros.promotions)">
-														{{pros.promotions.name}}<text>:￥{{ pros.price | NumFormat }}</text>
-													</view>
-													<view class="floor-tags" v-else>{{pros.promotions.name}}</view>	
-												</view>
-												<view class="floor-item-act" v-if="pros.actStatus ==0  &&  pros.ladderPriceFlag==1">
-													<view class="floor-tags">阶梯价格</view>	
-												</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 class="list-price-all" :style="{'overflow':'hidden'}">
-												<view class="price-two zuhe_list_text" >总价：<text class="zuhe_list_zj">￥ {{ pros.totalPrice | NumFormat }}</text></view>
-											</view>
-										</view>
+						<view class="list-details-price">
+							<template v-if="priceLoading">
+								<view class="list-price-loding">正在获取价格...</view>
+							</template>
+							<template v-else>
+								<view class="list-shop">
+									<view class="list-price">
+										<text class="price-larger" :class="PromotionsFormat(item.promotions) ? 'none' : ''">
+											￥{{ (PromotionsFormat(item.promotions) ? item.originalPrice : item.price) | NumFormat }}
+										</text>
 									</view>
 								</view>
-							</view>
+								<button class="add-cart-btn" @click.stop="operationHanld(item)">数量</button>
+							</template>
 						</view>
-						<view class="foot_conten" >
-							<view class="zuhe_foot-box">
-								<view class="">
-									<text>种类：{{item.productKind}}</text>
-									<text >总数：{{item.productTotalNum}}</text>
+						<view class="list-details-price">
+							<view class="floor-item-act" v-if="item.actStatus == 1">
+								<view class="floor-tags" v-if="PromotionsFormat(item.promotions)">
+									{{ item.promotions.name }}<text>:￥{{ item.price | NumFormat }}</text>
 								</view>
-								<text>总额：<text class="foot_text">{{ item.productTotalAmount | NumFormat }}</text></text>
+								<view class="floor-tags" v-else>{{ item.promotions.name }}</view>
+							</view>
+							<view class="floor-item-act" v-if="item.actStatus == 0 && item.ladderPriceFlag == 1">
+								<view class="floor-tags">阶梯价格</view>
 							</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 v-if="showLoading && listData.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>
 		<!-- 可拖动悬浮按钮 -->
-		<cm-drag :cartNum="cartQuantity" 
-				 :isDock="true"
-				 :existTabBar="true" 
-				 @btnClick="btnClick" 
-				 @btnTouchstart="btnTouchstart" 
-				 @btnTouchend="btnTouchend">
-		</cm-drag>		
+		<cm-drag
+			:cartNum="cartQuantity"
+			:isDock="true"
+			:existTabBar="true"
+			@btnClick="btnClick"
+			@btnTouchstart="btnTouchstart"
+			@btnTouchend="btnTouchend"
+		>
+		</cm-drag>
 		<!-- 透明模态层 -->
-		<modal-layer v-if='isModallayer'></modal-layer>
+		<modal-layer v-if="isModallayer"></modal-layer>
 	</view>
 </template>
 
 <script>
-	import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
-	import modalLayer from "@/components/modal-layer"
-	import uniStars from '@/components/uni-stars/uni-stars.vue'
-	import cmDrag from '@/components/cm-custom/cm-drag.vue'
-	import { mapState,mapMutations } from 'vuex';
-	export default{
-		name:'productList',
-		components:{
-			listSkeleton,
-			modalLayer,
-			uniStars,
-			cmDrag
-		},
-		props: {
-			searchStatus:{
-				type:Boolean,
-				default:false
-			}
-		},
-		data(){
-			return{
-				isShowClose:false,
-				searchInputVal:'',
-				isModallayer:false,
-				windowHeight: '',
-				showSkeleton: false,
-				priceLoading:true,
-				isShowEmpty: false,
-				isShowEmptyText: '搜索相关商品',
-				clubUserId: '',
-				identity:'',
-				isFocus:false,
-				scrollHeight: '',
-				listData: [],
-				combinationProduct:[],
-				zuheProductList:[],//组合商品列表
-				showLoading: false,
-				loadingNow: true,
-				loadingText: '上拉加载更多',
-				pageSize: 20,
-				zuhepageSize:5,
-				pageNum: 1,
-				totalPage:1,
-				hasNextPage: false,
-				pullFlag: true,
-				fromRegularPurchasePage: false,
-				cartQuantity: 0,
-				showRegularBtn: false,
-				isPrecedence:false,
-				ladderPriceList:[],//是否 阶梯,
-				tabIndex:0,
-				goodsList:[],
-				tabBars:[
-					{name:'单一',id:'danyi'},
-					{name:'组合',id:'zuhe'}
-				],
-				 isShow: false,
-			}
-		},
-		created() {
-			this.setScrollHeight();		
-			this.$api.getComStorage('userInfo').then((resolve) =>{
-				if(resolve.userIdentity == 1){
+import listSkeleton from '@/components/cm-module/listTemplate/listSkeleton'
+import modalLayer from '@/components/modal-layer'
+import uniStars from '@/components/uni-stars/uni-stars.vue'
+import cmDrag from '@/components/cm-custom/cm-drag.vue'
+import { mapState, mapMutations } from 'vuex'
+export default {
+	name: 'productList',
+	components: {
+		listSkeleton,
+		modalLayer,
+		uniStars,
+		cmDrag
+	},
+	props: {
+		searchStatus: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isShowClose: false,
+			searchInputVal: '',
+			isModallayer: false,
+			windowHeight: '',
+			showSkeleton: false,
+			priceLoading: true,
+			isShowEmpty: false,
+			isShowEmptyText: '搜索相关商品',
+			clubUserId: '',
+			identity: '',
+			isFocus: false,
+			scrollHeight: '',
+			listData: [],
+			combinationProduct: [],
+			zuheProductList: [], //组合商品列表
+			showLoading: false,
+			loadingNow: true,
+			loadingText: '上拉加载更多',
+			pageSize: 20,
+			zuhepageSize: 5,
+			pageNum: 1,
+			totalPage: 1,
+			hasNextPage: false,
+			pullFlag: true,
+			fromRegularPurchasePage: false,
+			cartQuantity: 0,
+			showRegularBtn: false,
+			isPrecedence: false,
+			ladderPriceList: [], //是否 阶梯,
+			tabIndex: 0,
+			goodsList: [],
+			tabBars: [{ name: '单一', id: 'danyi' }, { name: '组合', id: 'zuhe' }],
+			isShow: false
+		}
+	},
+	created() {
+		this.setScrollHeight()
+		this.$api
+			.getComStorage('userInfo')
+			.then(resolve => {
+				if (resolve.userIdentity == 1) {
 					this.identity = 1
 				}
-			}).catch(error =>{
-				console.log(error)
 			})
-			this.$api.getComStorage('orderUserInfo').then((resolve) =>{
-				this.clubUserId = resolve.userID
+			.catch(error => {
+				console.log(error)
 			})
-			this.getProductAgainInfo()
-			this.isFocus = true
-		},
-		filters: {
-			NumFormat:function(text) {//处理金额
-				return Number(text).toFixed(2);
-			},
+		this.$api.getComStorage('orderUserInfo').then(resolve => {
+			this.clubUserId = resolve.userID
+		})
+		this.getProductAgainInfo()
+		this.isFocus = true
+	},
+	filters: {
+		NumFormat: function(text) {
+			//处理金额
+			return Number(text).toFixed(2)
+		}
+	},
+	computed: {
+		...mapState(['hasLogin', 'userInfo'])
+	},
+	methods: {
+		scrolltolower(tabIndex) {
+			if (tabIndex == 0) {
+				if (this.totalPage > this.listData.length && this.pullFlag) {
+					this.getProductAgainInfo(true)
+				}
+			} else if (tabIndex == 1) {
+				if (this.hasNextPage && this.pullFlag) {
+					this.getcombinationProduct(true)
+				}
+			}
 		},
-		computed: {
-			...mapState(['hasLogin','userInfo'])
+		setScrollHeight() {
+			const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
+			this.windowHeight = windowHeight - 1
+			this.scrollHeight = windowHeight - 1
 		},
-		methods:{
-			scrolltolower(tabIndex) {
-				if(tabIndex ==0){
-					if(this.totalPage>this.listData.length && this.pullFlag) {
-						this.getProductAgainInfo(true);
-					}
-				}else if(tabIndex==1){
-					if(this.hasNextPage && this.pullFlag) {
-						this.getcombinationProduct(true);
-					}
-				}
-			},
-			setScrollHeight() {
-				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
-				this.windowHeight = windowHeight - 1;
-				this.scrollHeight = windowHeight - 1;
-			},
-			getProductAgainInfo(loadMore) {
-				this.showLoading = true;
-				this.priceLoading = true;
-				this.loadingNow = true;
-				this.loadingText = '加载中';
-				this.isShowEmpty = false;				
-				if(loadMore) {this.pageNum += 1;}
-				let params = {identity:this.identity,keyword:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize,sortField:'',sortType:''}
-				this.ProductService.GetProductSearchList(params).then(response =>{
+		getProductAgainInfo(loadMore) {
+			this.showLoading = true
+			this.priceLoading = true
+			this.loadingNow = true
+			this.loadingText = '加载中'
+			this.isShowEmpty = false
+			if (loadMore) {
+				this.pageNum += 1
+			}
+			let params = {
+				identity: this.identity,
+				keyword: this.searchInputVal,
+				pageNum: this.pageNum,
+				pageSize: this.pageSize,
+				sortField: '',
+				sortType: ''
+			}
+			this.ProductService.GetProductSearchList(params)
+				.then(response => {
 					this.isShowWrapper = true
-					const resData = JSON.parse(response.data);
-					const resList = resData.items;
-					if(resList && resList.length > 0){
-						this.totalPage = resData.total;
-						this.showEmpty = false;
-						if(loadMore) {
-							this.listData = [...this.listData,...resList];
+					const resData = JSON.parse(response.data)
+					const resList = resData.items
+					if (resList && resList.length > 0) {
+						this.totalPage = resData.total
+						this.showEmpty = false
+						if (loadMore) {
+							this.listData = [...this.listData, ...resList]
 							this.getProductPrice()
 						} else {
-							this.listData = [...resList];
+							this.listData = [...resList]
 							this.getProductPrice()
-							this.showSkeleton = false;
+							this.showSkeleton = false
 						}
 						// 防上拉暴滑
-						this.pullFlag = false;
-						setTimeout(()=>{ this.pullFlag = true; },500)
+						this.pullFlag = false
+						setTimeout(() => {
+							this.pullFlag = true
+						}, 500)
 						// 底部提示文案
-						if(this.totalPage>this.listData.length) {
-							this.loadingText = '上拉加载更多';
+						if (this.totalPage > this.listData.length) {
+							this.loadingText = '上拉加载更多'
 						} else {
-							this.showLoading = true;
-							this.loadingNow = false;
+							this.showLoading = true
+							this.loadingNow = false
 						}
 					} else {
-						if(!loadMore) {
-							this.isShowEmpty = true;
-							this.isShowEmptyText ='暂无相关商品'
+						if (!loadMore) {
+							this.isShowEmpty = true
+							this.isShowEmptyText = '暂无相关商品'
 						}
 					}
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000);
 				})
-			},
-			getProductPrice(){//获取商品或者活动价格
-				let productIdArr = [];
-				let productIds ='';
-				this.listData.map(item=>{// 0公开价格 1不公开价格 2仅对会员机构公开
-					productIdArr.push(item.p_id)
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
 				})
-				productIds = productIdArr.join(",");
-				this.ProductService.querySearchProductPrice({userId: this.clubUserId,productIds:productIds}).then(response =>{
-					this.listData = this.ReturnNewProducts(this.listData,response.data);
-					this.priceLoading = false;
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
+		},
+		getProductPrice() {
+			//获取商品或者活动价格
+			let productIdArr = []
+			let productIds = ''
+			this.listData.map(item => {
+				// 0公开价格 1不公开价格 2仅对会员机构公开
+				productIdArr.push(item.p_id)
+			})
+			productIds = productIdArr.join(',')
+			this.ProductService.querySearchProductPrice({ userId: this.clubUserId, productIds: productIds })
+				.then(response => {
+					this.listData = this.ReturnNewProducts(this.listData, response.data)
+					this.priceLoading = false
 				})
-			},
-			ReturnNewProducts(Array,list){//合并字段
-				let NewArray = []
-				Array.map(item=>{
-					for (let i = 0; i < list.length; i++) {
-						if( item.p_id == list[i].productId ){
-							NewArray.push(Object.assign(item,list[i])) 
-						}
-					}
-				});
-				return NewArray
-			},
-			searchOpertor(tabIndex){//搜索商品
-				if(tabIndex == 0){
-					if(this.searchInputVal == ''){
-						this.$util.msg('请输入商品关键词',2000)
-					}else{
-						this.pageNum = 1
-						this.showSkeleton = true;
-						this.getProductAgainInfo();
-						this.isFocus = false
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		ReturnNewProducts(Array, list) {
+			//合并字段
+			let NewArray = []
+			Array.map(item => {
+				for (let i = 0; i < list.length; i++) {
+					if (item.p_id == list[i].productId) {
+						NewArray.push(Object.assign(item, list[i]))
 					}
-				}else{
+				}
+			})
+			return NewArray
+		},
+		searchOpertor(tabIndex) {
+			//搜索商品
+			if (tabIndex == 0) {
+				if (this.searchInputVal == '') {
+					this.$util.msg('请输入商品关键词', 2000)
+				} else {
 					this.pageNum = 1
-					this.showSkeleton = true;
-					this.getcombinationProduct();
+					this.showSkeleton = true
+					this.getProductAgainInfo()
 					this.isFocus = false
 				}
-			},
-			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}
-				this.SellerService.GetCombinationProduct(params).then(response =>{
+			} else {
+				this.pageNum = 1
+				this.showSkeleton = true
+				this.getcombinationProduct()
+				this.isFocus = false
+			}
+		},
+		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
+			}
+			this.SellerService.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];
+					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.combinationProduct = [...responseData.results]
+
+							this.showSkeleton = false
 						}
 						// 防上拉暴滑
-						this.pullFlag = false;
-						setTimeout(()=>{
-							this.pullFlag = true;
-						},500)
+						this.pullFlag = false
+						setTimeout(() => {
+							this.pullFlag = true
+						}, 500)
 						// 底部提示文案
-						if(this.hasNextPage) {
-							this.loadingText = '上拉加载更多';
+						if (this.hasNextPage) {
+							this.loadingText = '上拉加载更多'
 						} else {
-							this.showLoading = true;
-							this.loadingNow = false;
+							this.showLoading = true
+							this.loadingNow = false
 						}
 					} else {
-						this.isShowEmpty = true;
-						this.isShowEmptyText ='暂无相关商品'
+						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
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
 				})
-				// 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.pageNum = 1
-					this.getProductAgainInfo()
-				}else{
-					this.getcombinationProduct()
-				}
-				// this.$emit('changetab',index);
-			},
-			navToDetailPage(id) {
-				this.isModallayer = true;
-				this.$api.navigateTo(`/pages/goods/product?id=${id}`);
-				this.isModallayer = false;
-			},
-			repurchModel(){
-				this.$util.modal('','此商品的价格有变化,原来的购买价已不适用','知道了','',false,() =>{})
-			},
-			onShowClose () {//输入框失去焦点时触发
-				if(this.searchInputVal != ''){
-					this.isShowClose = true
-				}else{					
-					this.isShowClose = false
-				}
-			},
-			delInputText(tabIndex){//清除输入框内容
-				if(tabIndex==0){
-					this.searchInputVal = '';
-					this.listData =[];
-					this.isFocus = true
-					this.isShowClose = false;
-					this.loadingNow = false;
-					this.isShowEmpty = true;
-					this.isShowEmptyText ='暂无相关商品'
-				}else{
-					this.searchInputVal = '';
-					this.isShowClose = false;
-					this.isFocus = true
-					this.getcombinationProduct();
+		},
+		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
 				}
-			},
-			isInterceptHtmlFn(text){
-				let name = this.$reg.interceptHtmlFn(text)
-				return name
-			},
-			PromotionsFormat(promo){//促销活动类型数据处理
-				if(promo!=null){
-					if(promo.type == 1 && promo.mode == 1){
-						return true
-					}else{
-						return false
+			})
+		},
+		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.pageNum = 1
+				this.getProductAgainInfo()
+			} else {
+				this.getcombinationProduct()
+			}
+			// this.$emit('changetab',index);
+		},
+		navToDetailPage(id) {
+			this.isModallayer = true
+			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
+			this.isModallayer = false
+		},
+		repurchModel() {
+			this.$util.modal('', '此商品的价格有变化,原来的购买价已不适用', '知道了', '', false, () => {})
+		},
+		onShowClose() {
+			//输入框失去焦点时触发
+			if (this.searchInputVal != '') {
+				this.isShowClose = true
+			} else {
+				this.isShowClose = false
+			}
+		},
+		delInputText(tabIndex) {
+			//清除输入框内容
+			if (tabIndex == 0) {
+				this.searchInputVal = ''
+				this.listData = []
+				this.isFocus = true
+				this.isShowClose = false
+				this.loadingNow = false
+				this.isShowEmpty = true
+				this.isShowEmptyText = '暂无相关商品'
+			} else {
+				this.searchInputVal = ''
+				this.isShowClose = false
+				this.isFocus = true
+				this.getcombinationProduct()
+			}
+		},
+		isInterceptHtmlFn(text) {
+			let name = this.$reg.interceptHtmlFn(text)
+			return name
+		},
+		PromotionsFormat(promo) {
+			//促销活动类型数据处理
+			if (promo != null) {
+				if (promo.type == 1 && promo.mode == 1) {
+					return true
+				} else {
+					return false
 				}
-				return false
-			},
-			btnClick() {
-				this.$emit('goCartPage')
-			},
-			btnTouchstart() {
-				// console.log('btnTouchstart');
-			},
-			btnTouchend() {
-				// console.log('btnTouchend');
 			}
+			return false
+		},
+		btnClick() {
+			this.$emit('goCartPage')
+		},
+		btnTouchstart() {
+			// console.log('btnTouchstart');
+		},
+		btnTouchend() {
+			// console.log('btnTouchend');
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	
-	.all-zuhe-list{
-		background: #FFFFFF;
+.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: 26rpx;
+	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;
 	}
-	.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;
+}
+.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;
+	&.addstyle {
+		background: $btn-confirm;
+		color: #ffffff;
+		&::before {
+			content: '';
+			width: 0;
+			height: 0;
+			border-top: 20rpx solid transparent;
+			border-right: 20rpx solid #ffffff;
+			border-left: 20rpx solid transparent;
+			border-bottom: 20rpx solid #ffffff;
+			position: absolute;
+			right: 0;
+			bottom: 0;
+		}
 	}
-	.zuhe_foot-box text{
-		margin-right: 36rpx;
+	.icon-gou {
+		width: 36rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		text-align: center;
+		color: #e15616;
+		position: absolute;
+		bottom: -5rpx;
+		right: -5rpx;
+		font-weight: bold;
+		font-size: $font-size-28;
 	}
-	.foot_text{
-		color: #FF2A2A;
+}
+.commodity-list-wrapper {
+	scroll-view {
+		height: 100%;
 	}
-	.foot_conten .buycart{
-		width: 162rpx;
-		height: 64rpx;
-		background: #EFAF00 !important;
-		color: #fff;
+	.show-more-btn {
+		width: 276rpx;
+		height: 52rpx;
+		line-height: 52rpx;
+		border: 2rpx solid #d8d8d8;
+		background: #f7f7f7;
 		font-size: 26rpx;
-		border-radius: 36rpx;
-		text-align: center;
-		line-height: 64rpx;
-		float: right;
+		margin: 26rpx 0;
+		position: absolute;
+		left: 50%;
+		margin-left: -138rpx;
 	}
-	.price-none{
-		font-size: 24rpx;
-		color: #666666;
+}
+.good-search {
+	height: 80rpx;
+	width: 100%;
+	padding: 24rpx;
+	background: #ffffff;
+	display: flex;
+	align-items: center;
+	margin-bottom: 20rpx;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 19;
+	.search-from {
+		width: 702rpx;
+		height: 66rpx;
+		background: #f7f7f7;
+		border-radius: 40rpx;
+		float: left;
+		position: relative;
+		.input {
+			width: 702rpx;
+			height: 66rpx;
+			float: left;
+			line-height: 66rpx;
+			color: $text-color;
+			font-size: $font-size-24;
+		}
+		.icon-iconfonticonfontsousuo1 {
+			width: 64rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			display: block;
+			font-size: $font-size-38;
+			float: left;
+			color: #999999;
 		}
-	.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-shanchu1 {
+			font-size: $font-size-32;
+			color: #999999;
+			position: absolute;
+			width: 120rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			top: 0;
+			right: 0;
+			text-align: center;
+			z-index: 10;
 		}
 	}
-	.tabstyle{
-		width: 128rpx;
-		height: 76rpx;
-		font-size: 26rpx;
-		display: inline-block;
+	.search-btn {
+		// 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 {
+	// height: 240rpx;
+	padding: 24rpx;
+	background: #fff;
+	margin-bottom: 2rpx;
+	display: flex;
+	flex-direction: row;
+	box-sizing: content-box;
+	.list-img {
+		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: 100%;
+	flex-direction: column;
+	font-size: 26rpx;
+	position: relative;
+	.list-details-title {
+		line-height: 38rpx;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+	.list-details-specs {
+		width: 100%;
+		display: inline-block;
+		margin: 5rpx 0;
+		color: #666666;
+	}
+	.list-details-miniQuantity {
+		width: 100%;
+		display: inline-block;
+		margin-top: 7rpx;
+	}
+}
+.list-details-price {
+	width: 100%;
+	.floor-item-act {
+		height: 54rpx;
 		text-align: center;
-		line-height: 76rpx;
-		border: 2rpx solid #EEEEEE;
-		position: relative;
-		margin-right: 12rpx;
-		&.addstyle{
-			background: $btn-confirm;
-			color: #FFFFFF;
-			&::before{
-				content: "";
-				width: 0;
-				height: 0;
-				border-top: 20rpx solid transparent;
-				border-right: 20rpx solid #FFFFFF;
-				border-left: 20rpx solid transparent;
-				border-bottom: 20rpx solid #FFFFFF;
-				position: absolute;
-				right: 0;
-				bottom: 0;
-			}
-		}
-		.icon-gou{
-			width: 36rpx;
-			height: 36rpx;
-			line-height: 36rpx;
+		box-sizing: border-box;
+		float: left;
+		.floor-tags {
+			height: 28rpx;
+			border-radius: 6rpx;
+			background-color: #ffffff;
+			line-height: 28rpx;
+			color: $color-system;
 			text-align: center;
-			color: #E15616;	
-			position: absolute;
-			bottom: -5rpx;
-			right: -5rpx;
-			font-weight: bold;
-			font-size: $font-size-28;
+			display: inline-block;
+			padding: 0 16rpx;
+			font-size: $font-size-20;
+			margin-left: 15rpx;
+			border: 1px solid #e15616;
 		}
 	}
-	.commodity-list-wrapper {
-		scroll-view {
-			height: 100%;
-		}
-		.show-more-btn {
-			width: 276rpx;
-			height: 52rpx;
-			line-height: 52rpx;
-			border: 2rpx solid #D8D8D8;
-			background: #F7F7F7;
-			font-size: 26rpx;
-			margin: 26rpx 0;
-			position: absolute;
-			left: 50%;
-			margin-left: -138rpx;
-		}
+	.price-icon {
+		width: 22rpx;
+		height: 28rpx;
+		vertical-align: middle;
+		margin-right: 10rpx;
 	}
-	.good-search{
-		height: 80rpx;
-		width: 100%;
-		padding: 24rpx;
-		background: #FFFFFF;
-		display: flex;
-		align-items: center;
-		margin-bottom: 20rpx;
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 19;
-		.search-from{
-			width: 420rpx;
-			height: 80rpx;
-			background: #F7F7F7;
-			border-radius: 40rpx;
+	.price-icon + text {
+		font-size: 25rpx;
+		vertical-align: middle;
+	}
+	.list-login-now {
+		width: 375rpx;
+		color: #f8c499;
+		.p-no {
 			float: left;
-			position: relative;
-			.input{
-				width: 340rpx;
-				height: 80rpx;
-				float: left;
-				line-height: 80rpx;
-				color: $text-color;
-				font-size: $font-size-24;
-			}
-			.icon-iconfonticonfontsousuo1{
-				width: 64rpx;
-				height: 80rpx;
-				line-height: 80rpx;
-				text-align: center;
-				display: block;
-				font-size: $font-size-38;
-				float: left;
-				color: #999999;
-			}
-			.icon-shanchu1{
-				font-size: $font-size-32;
-				color: #999999;
-				position: absolute;
-				width: 120rpx;
-				height: 80rpx;
-				line-height: 80rpx;
-				top: 0;
-				right: 0;
-				text-align: center;
-				z-index: 10;
-			}
-		}
-		.search-btn{
-			// width: 120rpx;
-			line-height: 64rpx;
-			text-align: center;
-			font-size: $font-size-28;
+			font-size: $font-size-24;
 			color: $color-system;
-			float: left;
-			background: #FFFFFF;
-			margin-left: 10rpx;
+			margin-right: 10rpx;
 		}
 	}
-	.all-type-list-content {
-		// height: 240rpx;
-		padding: 24rpx;
-		background: #fff;
-		margin-bottom: 2rpx;
-		display: flex;
-		flex-direction: row;
-		box-sizing: content-box;
-		.list-img {
-			width: 312rpx;
-			height: 207rpx !important;
-			margin-right: 26rpx;
-			border-radius: 10rpx;
-			border: 2rpx solid #f3f3f3;
-		}
+	.login-now {
+		padding: 10rpx 10rpx 10rpx 0;
 	}
-	.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-none {
+		margin-top: 15rpx;
+		.price-small {
+			font-size: $font-size-24;
+			line-height: 40rpx;
+			color: #ff2a2a;
 		}
 	}
-	
-	.list-details-info {
-		width: 100%;
-		flex-direction: column;
-		font-size: 26rpx;
-		position: relative;
-		.list-details-title {
-			line-height: 38rpx;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			display: -webkit-box;
-			-webkit-line-clamp: 2;
-			line-clamp: 2;
-			-webkit-box-orient: vertical;
-		}
-		.list-details-specs {
-			width: 100%;
-			display: inline-block;
-			margin: 5rpx 0;
-			color: #666666;
-		}
-		.list-details-miniQuantity {
+	.list-price-loding {
+		font-size: $font-size-24;
+		line-height: 54rpx;
+		color: #ff2a2a;
+	}
+	.list-shop {
+		float: left;
+		overflow: hidden;
+		&.com {
 			width: 100%;
-			display: inline-block;
-			margin-top: 7rpx;
 		}
-	}
-	.list-details-price {
-		width: 100%;
-		.floor-item-act{
-			height: 54rpx;
-			text-align: center;
-			box-sizing: border-box;
+		.list-price {
+			color: #ff2a2a;
 			float: left;
-			.floor-tags{
-				height:28rpx;
-				border-radius: 6rpx;
-				background-color: #FFFFFF;
-				line-height: 28rpx;
-				color: $color-system;
-				text-align: center;
+			line-height: 54rpx;
+			align-items: center;
+			justify-content: center;
+			.price-larger {
+				font-size: $font-size-26;
 				display: inline-block;
-				padding:0 16rpx;
-				font-size: $font-size-20;
-				margin-left: 15rpx;
-				border: 1px solid #E15616;
+				&.none {
+					text-decoration: line-through;
+					color: #999999;
+				}
 			}
-		}
-		.price-icon {
-			width: 22rpx;
-			height: 28rpx;
-			vertical-align: middle;
-			margin-right: 10rpx;
-		}
-		.price-icon + text {
-			font-size: 25rpx;
-			vertical-align: middle;
-		}
-		.list-login-now {
-			width: 375rpx;
-			color: #F8C499;
-			.p-no{
+			.list-price-all {
+				width: 100%;
 				float: left;
-				font-size: $font-size-24;
-				color: $color-system;
-				margin-right: 10rpx;
-			}
-		}
-		.login-now {
-			padding: 10rpx 10rpx 10rpx 0;
-		}
-		.list-none{
-			margin-top: 15rpx;
-			.price-small{
-				font-size:$font-size-24;
-				line-height: 40rpx;
-				color: #FF2A2A;
 			}
-		}
-		.list-price-loding{
-			font-size:$font-size-24;
-			line-height: 54rpx;
-			color: #FF2A2A;
-		}
-		.list-shop{
-			float: left;
-			overflow: hidden;
-			&.com{
+			.zuhe_price-larger {
 				width: 100%;
-			}
-			.list-price {
-				color: #FF2A2A;
 				float: left;
-				line-height:54rpx ;
-				align-items: center;
-				justify-content: center;
+				height: 54rpx;
+				color: #666666;
 				.price-larger {
-					font-size: $font-size-26;
-					display: inline-block;
-					&.none{
-						text-decoration: line-through;
-						color: #999999;
-					}
-				}
-				.list-price-all{
-					width: 100%;
-					float: left;
-				}
-				.zuhe_price-larger{
-					width: 100%;
 					float: left;
-					height: 54rpx;
-					color: #666666;
-					.price-larger{
-						float: left;
-						margin-right: 20rpx;
-					}
-					
-				}
-				.price-two{
-					color: #666666;
-					float: left;
-					
-				}
-				.zuhe_list_zj{
-					color: #FF2A2A;
-				}
-				.price-view{
-					display: inline-block;
-					width: 40rpx;
-					border-radius: 10rpx;
-					font-size: $font-size-22;
-					text-align: center;
-					color: #FFFFFF;
-					height: 36rpx;
-					line-height: 36rpx;
-					margin-right: 8rpx;
-					&.ladder{
-						background: linear-gradient(135deg,rgba(255,0,0,1) 0%,rgba(242,143,49,1) 100%);
-					}
-					&.activity{
-						background: linear-gradient(135deg,rgba(128,0,255,1) 0%,rgba(242,49,153,1) 100%);
-					}
+					margin-right: 20rpx;
 				}
 			}
-			.zuhe_list_price .price-view{
-				margin-left:20rpx;
+			.price-two {
+				color: #666666;
 				float: left;
-				margin-top: 5rpx;
 			}
-			.zuhe_list_price{
-				width: 100%;
-				overflow: hidden;
-				margin-top: 10rpx;
+			.zuhe_list_zj {
+				color: #ff2a2a;
 			}
-			.count{
-				float: right;
-				border: 1px solid #EEEEEE;
+			.price-view {
+				display: inline-block;
+				width: 40rpx;
 				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{
-					text-decoration: line-through;
-					color: #999999;
-					display: inline-block;
+				font-size: $font-size-22;
+				text-align: center;
+				color: #ffffff;
+				height: 36rpx;
+				line-height: 36rpx;
+				margin-right: 8rpx;
+				&.ladder {
+					background: linear-gradient(135deg, rgba(255, 0, 0, 1) 0%, rgba(242, 143, 49, 1) 100%);
 				}
-				.icon-wenhao{
-					font-size: $font-size-32;
-					color: #0091FF;
-					margin-left: 6rpx;
+				&.activity {
+					background: linear-gradient(135deg, rgba(128, 0, 255, 1) 0%, rgba(242, 49, 153, 1) 100%);
 				}
 			}
 		}
-		.add-cart-btn {
-			flex: 4;
-			width: 140rpx;
-			height: 54rpx;
-			line-height: 54rpx;
-			border-radius: 27rpx;
-			color: #fff;
-			font-size: 24rpx;
-			margin-right: 0;
-			background:#FFFFFF;
-			border: 1px solid #C9C9C9;
-			color: $text-color;
+		.zuhe_list_price .price-view {
+			margin-left: 20rpx;
+			float: left;
+			margin-top: 5rpx;
+		}
+		.zuhe_list_price {
+			width: 100%;
+			overflow: hidden;
+			margin-top: 10rpx;
 		}
-		.zuhe_btn{
+		.count {
 			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 {
+				text-decoration: line-through;
+				color: #999999;
+				display: inline-block;
+			}
+			.icon-wenhao {
+				font-size: $font-size-32;
+				color: #0091ff;
+				margin-left: 6rpx;
+			}
 		}
 	}
-	.zuhe_list_price{
-		display: block !important;
+	.add-cart-btn {
+		flex: 4;
+		width: 140rpx;
+		height: 54rpx;
+		line-height: 54rpx;
+		border-radius: 27rpx;
+		color: #fff;
+		font-size: 24rpx;
+		margin-right: 0;
+		background: #ffffff;
+		border: 1px solid #c9c9c9;
+		color: $text-color;
 	}
-	.zuhe_list_text{
-		margin-top: 0;
+	.zuhe_btn {
+		float: right;
 	}
+}
+.zuhe_list_price {
+	display: block !important;
+}
+.zuhe_list_text {
+	margin-top: 0;
+}
 </style>

pages.json

@@ -1,6 +1,13 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+			"path": "pages/test/test",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "维沙采购商城",
@@ -30,6 +37,7 @@
 				"enablePullDownRefresh": true
 			}
 		}
+
 	],
 	"subPackages": [{
 			"root": "pages/goods/", //商品模块

pages/test/test.vue

@@ -0,0 +1,26 @@
+<template>
+	<view>
+		<button type="default" @click="goPage">跳转</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			goPage(){
+				uni.navigateTo({
+					url:'../user/cart/immediately'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pages/user/club/club-list.vue

@@ -2,384 +2,434 @@
 	<view class="container club clearfix">
 		<view class="club-search clearfix">
 			<view class="search-from name">
-				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
-				<input class="input" 
-					   type="text" 
-					   confirm-type="search" 
-					   v-model="searchInputVal" 
-					    @input="onShowClose" 
-					   @confirm="initclubList()" 
-					   placeholder="机构名称/联系人" 
-					   maxlength="12"/>
-				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
+				<text class="iconfont icon-sousuo"></text>
+				<input
+					class="input"
+					type="text"
+					confirm-type="search"
+					v-model="searchInputVal"
+					@input="onShowClose" 
+					@confirm="initclubList()"
+					placeholder="请输入机构名称/机构联系人"
+					maxlength="12"
+					@focus="searchInputFoucs"
+					@blur="hideSearchModalHandle"
+				/>
+				<text class="iconfont icon-guanbi" v-if="isShowClose" @click="delInputText()"></text>
 			</view>
-			<view class="search-btn">
-				<button class="search-btn" type="default" @click.stop="searchClubList">搜索</button>
+			<!-- 模糊搜索区域 -->
+			<view class="mask" v-if="showSearchModal">
+				<view class="mask-item"> 公司名公司名公司名公司名公司名公司名公司名公司名公司名公司名 </view>
+				<view class="mask-item"> <text>公司名公司名</text> <text>联系人联系人</text> </view>
+				<view class="mask-item"> <text>公司名公司名</text> <text>联系人联系人</text> </view>
+				<view class="mask-item"> <text>公司名公司名</text> <text>联系人联系人</text> </view>
 			</view>
 		</view>
 		<view class="club-main">
 			<view v-if="isEmpty" class="empty-container">
-				<image class="club-empty-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png" mode="aspectFit"></image>
+				<image
+					class="club-empty-image"
+					src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
+					mode="aspectFit"
+				></image>
 				<view class="txt">暂无机构数据</view>
 			</view>
 			<view v-else class="club-list">
-				<scroll-view scroll-y="true" >
-					<view class="list">
+				<scroll-view scroll-y="true">
+					<view class="list" v-for="item in 10">
 						<view class="list-left">
-							<view class="list-head"><image src="https://static.caimei365.com/app/img/icon/icon-club@3x.png" mode=""></image></view>
+							<view class="list-head"
+								><image src="https://static.caimei365.com/app/img/icon/icon-club@3x.png" mode=""></image
+							></view>
 						</view>
 						<view class="list-item">
-							<view class="list-title">
-								<text class="list-name">机构名称名称</text>
-							</view>
+							<view class="list-title"> <text class="list-name">机构名称名称</text> </view>
 							<view class="list-contact">
-								<view class="list-row">
-									<text class="iconfont icon-lianxiren"></text>
-									<text>李艳华</text>
-								</view>
-								<view class="list-row">
-									<text class="iconfont icon-dianhua"></text>
-									<text>18888888888</text>
-								</view>
+								<view class="list-row"> <text class="iconfont icon-lianxiren"></text> <text>李艳华</text> </view>
+								<view class="list-row"> <text class="iconfont icon-dianhua"></text> <text>18888888888</text> </view>
 							</view>
 							<view class="list-opea">
-								<view class="btn border-btn" @click.stop="_goHistory()">
-									<text>订单列表</text>
-								</view>
-								<view class="btn border-btn" @click.stop="_goImmediately()">
-									<text>立即下单</text>
-								</view>
+								<view class="btn border-btn" @click.stop="_goHistory(item)"> <text>订单列表</text> </view>
+								<view class="btn border-btn" @click.stop="_goImmediately(item)"> <text>立即下单</text> </view>
 							</view>
 						</view>
 					</view>
 					<!--加载loadding-->
 					<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
-					<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text='nomoreText'></tui-nomore>
+					<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
 					<!--加载loadding-->
 				</scroll-view>
 			</view>
 		</view>
+		<view class="over-bg" @click="hideSearchModalHandle" v-if="showSearchModal"></view>
 	</view>
 </template>
 
 <script>
-	import authorize from '@/common/config/authorize.js'	
-	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
-	import tuiNomore from "@/components/tui-components/nomore/nomore"
-	export default {
-		components:{
-			tuiLoadmore,
-			tuiNomore,
+import authorize from '@/common/config/authorize.js'
+import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
+import tuiNomore from '@/components/tui-components/nomore/nomore'
+export default {
+	components: {
+		tuiLoadmore,
+		tuiNomore
+	},
+
+	data() {
+		return {
+			serviceProviderId: '',
+			isShowClose: false,
+			searchInputVal: '',
+			isEmpty: false,
+			nomoreText: '上拉显示更多',
+			status: 66,
+			pageNum: 1,
+			pageSize: 10,
+			hasNextPage: false,
+			loadding: false,
+			pullUpOn: true,
+			pullFlag: true,
+			scrollHeight: '',
+			currPage: '', //当前页面
+			prevPage: '', //上一个页面
+			clubList: [],
+			showSearchModal: false //模糊搜索框是否显示
+		}
+	},
+	onLoad() {
+		this.setScrollHeight()
+	},
+
+	methods: {
+		hideSearchModalHandle(){
+			this.showSearchModal = false
 		},
-		data() {
-			return {
-				serviceProviderId:'',
-				isShowClose:false,
-				searchInputVal:'',
-				isEmpty:false,
-				nomoreText: '上拉显示更多',
-				status:66,
-				pageNum:1,
-				pageSize:10,
-				hasNextPage:false,
-				loadding: false,
-				pullUpOn: true,
-				pullFlag: true,
-				scrollHeight:'',
-				currPage:'',//当前页面
-				prevPage:'',//上一个页面
-				clubList:[],
-			}
+		searchInputFoucs(){
+			this.showSearchModal = true
 		},
-		onLoad(){				
-			this.setScrollHeight();
+		setScrollHeight() {
+			// 窗口高度 - 底部距离
+			setTimeout(() => {
+				const query = wx.createSelectorQuery().in(this)
+				query.selectAll('.add-btn').boundingClientRect()
+				query.exec(res => {
+					if (res[0][0]) {
+						let winHeight = this.$api.getWindowHeight(),
+							eleTop = res[0][0].top - 1
+						this.scrollHeight = eleTop
+					}
+				})
+			}, 500)
 		},
-		methods: {
-			setScrollHeight() {
-				// 窗口高度 - 底部距离
-				setTimeout(()=> {
-					const query = wx.createSelectorQuery().in(this);
-					query.selectAll('.add-btn').boundingClientRect();
-					query.exec(res => {
-						if(res[0][0]){
-							let winHeight = this.$api.getWindowHeight(),
-								eleTop = res[0][0].top - 1;
-								this.scrollHeight =  eleTop;
-						}
-					})
-				}, 500)
-			},
-			searchClubList(){
-				this.pageNum=1
-				this.initclubList()
-			},
-			initclubList(){
-				let params = {userIdentity:'',name:this.searchInputVal,pageNum:1,pageSize:this.pageSize,spId:this.serviceProviderId,status:this.status}
-				this.SellerService.GetSellerClubList(params).then(response =>{
+		searchClubList() {
+			this.pageNum = 1
+			this.initclubList()
+		},
+		initclubList() {
+			let params = {
+				userIdentity: '',
+				name: this.searchInputVal,
+				pageNum: 1,
+				pageSize: this.pageSize,
+				spId: this.serviceProviderId,
+				status: this.status
+			}
+			this.SellerService.GetSellerClubList(params)
+				.then(response => {
 					let responseData = response.data
-					if(responseData.results&&responseData.results.length > 0){
+					if (responseData.results && responseData.results.length > 0) {
 						this.isEmpty = false
 						this.hasNextPage = response.data.hasNextPage
-						this.clubList =responseData.results
-						this.pullFlag = false;
-						setTimeout(()=>{this.pullFlag = true;},500)
-						if(this.hasNextPage){
+						this.clubList = responseData.results
+						this.pullFlag = false
+						setTimeout(() => {
+							this.pullFlag = true
+						}, 500)
+						if (this.hasNextPage) {
 							this.pullUpOn = false
 							this.nomoreText = '上拉显示更多'
-						}else{
+						} else {
 							this.pullUpOn = true
 							this.loadding = false
 							this.nomoreText = '已至底部'
 						}
-					}else{
+					} else {
 						this.isEmpty = true
 					}
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
 				})
-			},	
-			getOnReachBottomData(){
-				this.pageNum+=1
-				let params = {userIdentity:'',name:this.searchInputVal,pageNum:this.pageNum,pageSize:this.pageSize,spId:this.serviceProviderId,status:this.status}
-				this.SellerService.GetSellerClubList(params).then(response =>{
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		getOnReachBottomData() {
+			this.pageNum += 1
+			let params = {
+				userIdentity: '',
+				name: this.searchInputVal,
+				pageNum: this.pageNum,
+				pageSize: this.pageSize,
+				spId: this.serviceProviderId,
+				status: this.status
+			}
+			this.SellerService.GetSellerClubList(params)
+				.then(response => {
 					let responseData = response.data
-					if(responseData.results&&responseData.results.length > 0){
+					if (responseData.results && responseData.results.length > 0) {
 						this.hasNextPage = response.data.hasNextPage
-						this.clubList = this.clubList.concat(responseData.results) 
-						this.pullFlag = false;// 防上拉暴滑
-						setTimeout(()=>{this.pullFlag = true;},500)
-						if(this.hasNextPage){
+						this.clubList = this.clubList.concat(responseData.results)
+						this.pullFlag = false // 防上拉暴滑
+						setTimeout(() => {
+							this.pullFlag = true
+						}, 500)
+						if (this.hasNextPage) {
 							this.pullUpOn = false
 							this.nomoreText = '上拉显示更多'
-						}else{
+						} else {
 							this.pullUpOn = false
 							this.loadding = false
 							this.nomoreText = '已至底部'
 						}
 					}
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
 				})
-			},
-			onShowClose () {//输入框失去焦点时触发
-				if(this.searchInputVal != ''){
-					this.isShowClose = true
-				}else{					
-					this.isShowClose = false
-				}
-			},
-			delInputText(){//清除输入框内容
-				this.searchInputVal = ''
+				.catch(error => {
+					this.$util.msg(error.msg, 2000)
+				})
+		},
+		onShowClose() {
+			//输入框失去焦点时触发
+			if (this.searchInputVal != '') {
+				this.isShowClose = true
+			} else {
 				this.isShowClose = false
-			},
-			_goImmediately(item){
-				this.$api.setStorage('orderUserInfo',item)
-				this.$api.navigateTo('/seller/pages/cart/immediately')
-			},
-			_goBuyagain(item ){
-				this.$api.setStorage('orderUserInfo',item)
-				this.$api.navigateTo('/seller/pages/cart/buyagain')
-			},
-			_goSecond(item ){
-				this.$api.setStorage('orderUserInfo',item)
-				this.$api.navigateTo('/seller/pages/cart/second')
-			},
-			_goHistory(item){
-				this.$api.setStorage('orderUserInfo',item)
-				this.$api.navigateTo(`/seller/pages/order/order-historylist?clubID=${item.clubID}&listType=0`)
 			}
 		},
-		onReachBottom() {
-			if(this.hasNextPage){
-				this.loadding = true
-				this.pullUpOn = true
-				this.getOnReachBottomData()
-			}	
+		delInputText() {
+			//清除输入框内容
+			this.searchInputVal = ''
+			this.isShowClose = false
+		},
+		_goImmediately(item) {
+			this.$api.setStorage('orderUserInfo', item)
+			this.$api.navigateTo('/seller/pages/cart/immediately')
+		},
+		_goBuyagain(item) {
+			this.$api.setStorage('orderUserInfo', item)
+			this.$api.navigateTo('/seller/pages/cart/buyagain')
 		},
-		onShow() {
-			this.$api.getStorage().then(response =>{
-				this.serviceProviderId = response.serviceProviderID
-				this.pageNum = 1;
-				this.initclubList();
-			})
+		_goSecond(item) {
+			this.$api.setStorage('orderUserInfo', item)
+			this.$api.navigateTo('/seller/pages/cart/second')
+		},
+		_goHistory(item) {
+			this.$api.setStorage('orderUserInfo', item)
+			this.$api.navigateTo(`/seller/pages/order/order-historylist?clubID=${item.clubID}&listType=0`)
+		}
+	},
+	onReachBottom() {
+		if (this.hasNextPage) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.getOnReachBottomData()
 		}
+	},
+	onShow() {
+		this.$api.getStorage().then(response => {
+			this.serviceProviderId = response.serviceProviderID
+			this.pageNum = 1
+			this.initclubList()
+		})
 	}
+}
 </script>
 
-<style lang='scss'>
-	page {
-		height: auto;
-	}
-	page,.container{
-		/* padding-bottom: 120upx; */
-		background: #F7F7F7;
-	}
-	.container{
-		position: relative;
+<style lang="scss">
+page {
+	height: auto;
+}
+page,
+.container {
+	/* padding-bottom: 120upx; */
+	background: #fff;
+}
+.container {
+	position: relative;
+}
+.over-bg{
+	top: 0;
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	z-index: 888;
+	background: rgba(0,0,0,.2);
+}
+.club-search {
+	height: 74rpx;
+	width: 750rpx;
+	padding-bottom: 40rpx;
+	background: #ffffff;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+	.mask{
+		padding: 0 24rpx 40rpx 90rpx;
+		line-height: 60rpx;
+		background-color: #fff;
+		text-align: left;
+		font-size: $font-size-30;
+		color: $text-color;
+		box-sizing: border-box;
+		.mask-item{
+			width: 100%;
+			white-space: nowrap;
+			overflow: hidden;
+			height: 60rpx;
+			text-overflow: ellipsis;
+		}
 	}
-	.club-search{
-		height: 64rpx;
+	.search-from {
+		margin: 24rpx;
 		width: 702rpx;
-		padding: 24rpx;
-		background: #FFFFFF;
-		display: flex;
-		align-items: center;
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 999;
-		.search-from{
-			width: 582rpx;
+		height: 64rpx;
+		background: #f7f7f7;
+		border-radius: 32rpx;
+		float: left;
+		position: relative;
+		.icon-sousuo {
+			width: 64rpx;
 			height: 64rpx;
-			background: #F7F7F7;
-			border-radius: 32rpx;
+			line-height: 64rpx;
+			text-align: center;
+			display: block;
+			font-size: $font-size-28;
 			float: left;
-			position: relative;
-			.icon-iconfonticonfontsousuo1{
-				width: 64rpx;
-				height: 64rpx;
-				line-height: 64rpx;
-				text-align: center;
-				display: block;
-				font-size: $font-size-38;
-				float: left;
-				color: #999999;
-			}
-			.icon-shanchu1{
-				font-size: $font-size-32;
-				color: #999999;
-				position: absolute;
-				width: 64rpx;
-				height: 64rpx;
-				line-height: 64rpx;
-				text-align: center;
-				top: 0;
-				right: 0;
-				z-index: 10;
-			}
-			.input{
-				width: 500rpx;
-				height: 64rpx;
-				float: left;
-				line-height: 64rpx;
-				color: $text-color;
-				font-size: $font-size-24;
-			}
+			color: #999999;
 		}
-		.search-btn{
-			width: 120rpx;
+		.icon-guanbi {
+			font-size: $font-size-28;
+			color: #999999;
+			position: absolute;
+			width: 64rpx;
+			height: 64rpx;
 			line-height: 64rpx;
 			text-align: center;
-			font-size: $font-size-28;
-			color: $color-system;
+			top: 0;
+			right: 0;
+			z-index: 10;
+		}
+		.input {
+			width: 500rpx;
+			height: 64rpx;
 			float: left;
-			background: #FFFFFF;
+			line-height: 64rpx;
+			color: $text-color;
+			font-size: $font-size-24;
 		}
 	}
-	.club-main{
-		padding-top: 122rpx;
-		.list{
-			align-items: center;
-			width: 702rpx;
-			height: auto;
-			padding: 24rpx;
-			background: #FFFFFF;
-			position: relative;
-			border-bottom: 1px solid #EBEBEB;
+	.search-btn {
+		width: 120rpx;
+		line-height: 64rpx;
+		text-align: center;
+		font-size: $font-size-28;
+		color: $color-system;
+		float: left;
+		background: #ffffff;
+	}
+}
+.club-main {
+	position: relative;
+	padding-top: 122rpx;
+	.list {
+		align-items: flex-start;
+		width: 702rpx;
+		height: auto;
+		margin: 0 auto;
+		padding: 24rpx 0;
+		background: #ffffff;
+		position: relative;
+		border-bottom: 1px solid #ebebeb;
+		display: flex;
+		.list-left {
+			height: 140rpx;
+			flex: 2;
+			margin-right: 24rpx;
+			.list-head {
+				width: 180rpx;
+				height: 180rpx;
+				image {
+					width: 180rpx;
+					height: 180rpx;
+				}
+			}
+		}
+		.list-item {
+			flex: 8;
 			display: flex;
-			.list-left{
-				height: 140rpx;
+			flex-direction: column;
+			align-items: flex-start;
+			.list-title {
 				flex: 2;
-				margin-right: 10rpx;
-				.list-head{
-					width: 140rpx;
-					height: 140rpx;
-					border-radius: 14rpx;
-					image{
-						width: 140rpx;
-						height: 140rpx;
-						border-radius: 14rpx;
-					}
+				width: 100%;
+				color: $text-color;
+				flex-direction: row;
+				justify-content: flex-start;
+				.list-name {
+					font-size: $font-size-30;
+					width: 400rpx;
+					display: block;
+					float: left;
+					text-align: left;
+					-o-text-overflow: ellipsis;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					word-break: break-all;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+					overflow: hidden;
 				}
 			}
-			.list-item{
-				height: 140rpx;
-				flex: 8;
-				display: flex;
-				flex-direction:column ;
-				.list-title{
-					flex: 2;
-					line-height: 80rpx;
-					width: 100%;
-					font-size: $font-size-28;
-					color: $text-color;
-					padding-left: 11rpx;
-					flex-direction: row;
+			.list-contact {
+				padding: 20rpx 0;
+				.list-row {
+					margin: 10rpx 0;
+					display: flex;
 					justify-content: flex-start;
-					.list-name{
-						width: 400rpx;
-						display: block;
-						float: left;
-						text-align: left;
-						-o-text-overflow: ellipsis;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						word-break: break-all;
-						-webkit-box-orient: vertical;
-						-webkit-line-clamp: 1;
-						overflow: hidden;
+					align-items: center;
+					color: #666;
+					text {
+						font-size: $font-size-26;
 					}
-				}
-				.list-contact{
-					.list-row{
-						display: flex;
-						justify-content: flex-start;
-						align-items: center;
-						text{
-							font-size: 24rpx;
-						}
-						.iconfont{
-							font-size: 24rpx;
-						}
+					.iconfont {
+						font-size: $font-size-26;
+						margin-right: 10rpx;
 					}
 				}
-				.list-opea{
-					width: 100%;
-					display: flex;
-					justify-content: flex-end;
-					flex: 4;
-					color: #166CE1;
-					flex-direction: row;
-					align-items: center;
-					.btn{
-						width: 160rpx; 
-						height: 56rpx;
-						line-height: 60rpx;
-						border-radius: 30rpx;
-						font-size: $font-size-24;
-						color: $text-color;
-						text-align: center;
-						margin: 0 17rpx;
-						border: 1px solid #333333;
-						&.border-btn{
-							color: #333;
-						}
-						&.org{
-							background:rgba(22,225,77,.1);
-							color: #16E14D;
-						}
-						&.gre{
-							background:rgba(22,123,225,.1);
-							color: #167BE1;
-						}
-						&.yel{
-							background:rgba(225,86,22,.1);
-							color: #E15616;
-						}
+			}
+			.list-opea {
+				width: 100%;
+				display: flex;
+				justify-content: flex-end;
+				flex: 4;
+				color: #166ce1;
+				flex-direction: row;
+				align-items: center;
+				.btn {
+					width: 160rpx;
+					height: 56rpx;
+					line-height: 54rpx;
+					border-radius: 30rpx;
+					font-size: $font-size-24;
+					color: $text-color;
+					text-align: center;
+					margin: 0 17rpx;
+					border: 1px solid #333333;
+					box-sizing: border-box;
+					&.border-btn {
+						color: #333;
 					}
 				}
 			}
 		}
 	}
+}
 </style>
-