搜索

pages/search/search-second.vue

@@ -1,450 +1,198 @@
 <template>
 	<view class="search-container">
-		<!-- <or-search :theme="themeClass" @getSearchText="getSearchText"></or-search> -->
 		<view class="search-main">
-			<view class="search">
-				<view class="search-input">
-					<text class="iconfont icon-iconfonticonfontsousuo1"></text>
-					<input maxlength="20" focus type="text" value="" confirm-type="search" @focus="onFocus" @input="onShowClose" @confirm="subMitSearch()" placeholder="请输入商品关键词" v-model.trim="searchInputVal"/>
-					<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
-				</view>
-				<view class="search-btn" @click="subMitSearch()">搜索</view>
+			<view class="gosearch-btn">
+				<text class="iconfont icon-sousuo"></text>
+				<input class="input" maxlength="20" type="text" value="" confirm-type="search" @confirm="subMitSearch()" placeholder="请输入关键词" v-model.trim="name"/>
+				<text class="iconfont icon-shanchu1" v-if="isShowClose" @click.stop="delInputText()"></text>
 			</view>
 		</view>
-		<view class="search-container-history" v-if="!isShowWrapper">
-			<view :class="'s-' + themeClass" v-if="serachRecordList.length>0">
-				<view class="header">
-					搜索历史
-					<text class="iconfont icon-shanchu" @click="confirmDetele"></text>
-				</view>
-				<view class="list">
-					<view v-for="(item,index) in serachRecordList" :key="index" @click="keywordsClick(item.searchWord)">{{item.searchWord}}</view>
-				</view>
-			</view>
-		</view>
-		<view class=" order-container" v-if="isShowWrapper" :style="{'overflow' : 'auto','height': (showSkeleton? windowHeight + 'px' : 'auto')}">
-			<scroll-view  class="tui-skeleton" :style="{'height':scrollHeight+'px'}"  @scrolltolower="scrolltolower" scroll-y >
-				<view  :class="{'tui-order-list':scrollTop >= 0}" class="tui-skeleton clearfix">
-					<!-- 空白页 -->
-					<empty v-if="isShowEmpty" :navbarHeight="navbarHeight"></empty>
-					<!-- 列表 -->
-					<view v-else class="tui-order-content">
-						<view  class="tui-order-item" v-for="(order,orderIndex) in orderList" :key="orderIndex" @click.stop="detail(order.orderID)">
-							<view class="order-title">
-								<view class="order-title-t">
-									<text class="bage-buss tui-skeleton-fillet" v-if="order.orderSubmitType == 3 || order.orderSubmitType == 4">协销</text>
-									<text class="bage-auto tui-skeleton-fillet" v-if="order.orderSubmitType == 0 || order.orderSubmitType == 1 || order.orderSubmitType == 2">自主</text>
-									<text class="bage-text tui-skeleton-fillet">订单号：{{order.orderNo}}</text>
-									<image class="bage-icon" src="../../static/temp/icon-type@3x.png" mode="widthFix" v-if="order.secondHandOrderFlag == 1"></image>
-								</view>
-								<view class="order-title-b">
-									<view class="order-title-btxt tui-skeleton-fillet">下单时间：{{order.orderTime}}</view>
-									<view class="order-title-tip tui-skeleton-fillet">{{ StateExpFormat(order.status) }}</view>
-								</view>
-							</view>
-							<block v-for="(shop,index) in order.shopOrderList" :key="index">
-								<view class="goods-title">
-										<view v-if="shop.shopPromotion" class="floor-item-act">
-											<view class="floor-tags">{{shop.shopPromotion.name}}</view>	
-										</view>
-										<view class="title-text tui-skeleton-fillet">{{shop.shopName}}</view>	
-								</view>
-								<view class="goods-item" v-for="(pros,prosIndex) in shop.orderProductList" :key="prosIndex">
-									<view class="goods-pros-t">
-										<view class="pros-img tui-skeleton-fillet">
-											<image :src="pros.productImage" alt="" />
-											<text class="tips" v-if="pros.productType ==2 || pros.productType ==1">赠品</text>
-										</view>
-										<view class="pros-product">
-											<view class="producttitle tui-skeleton-fillet">{{pros.name}}</view>
-											<view class="productspec tui-skeleton-fillet" v-if="pros.productCategory!=2">规格:{{pros.productUnit}}</view>
-											<view class="productprice">
-												<view class="price tui-skeleton-fillet">
-													<text>￥{{pros.price | NumFormat}}</text>
-												</view>
-												<view class="count tui-skeleton-fillet">
-													<text class="small">x</text>{{pros.num}}
-												</view>
-											</view>
-											<view class="floor-item-act" v-if="pros.productPromotion!=null">
-												<view v-if="PromotionsFormat(pros.productPromotion)"  class="floor-tags">
-													{{pros.productPromotion.name}}
-													<text v-if ="pros.productPromotion!=null && pros.productPromotion.type !=3">
-														:￥{{ pros.productPromotion == null ? '0.00' : pros.productPromotion.touchPrice | NumFormat}}
-													</text>
-												</view>
-												<view v-else-if="pros.productPromotion.type !=3" class="floor-tags">{{pros.productPromotion.name}}</view>	
-											</view>
-										</view>	
-									</view>
-								</view>	
-							</block>
-							<view class="order-footer">
-								<view class="order-footer-top" v-if="order.discountFee!=0">经理折扣：¥{{ order.discountFee | NumFormat }}</view>
-								<view class="order-footer-bot">
-									<view class="count tui-skeleton-fillet">共{{order.productCount}}件商品</view>
-									<view class="money tui-skeleton-fillet">待付总额：¥{{ order.pendingPayments | NumFormat}}</view>
-								</view>
-							</view>
-							<!-- 底部button -->
-							<order-button ref="orderButton" 
-										  :status="order.status" 
-										  :orderID="order.orderID" 
-										  :onlinePayFlag = "order.onlinePayFlag"
-										  @buttonConfirm="handButtonConfirm">
-							</order-button>
+		<view  class="commodity-list-wrapper"  :style="{'overflow':'auto','height':(listData.length>4? windowHeight + 'px' : 'auto')}">
+			<scroll-view :style="{'height':(listData.length>4? scrollHeight+'px' : 'auto')}" @scrolltolower="scrolltolower" scroll-y v-if="!showEmpty">
+				<view class="Listitem" v-for="(item, index) in listData" :key="index" :class="item.sold==1?'activeImg':''"
+				 :productid="item.productID" @click.stop="navToDetailPage(item.productID)">
+				    <view class="itemImg onhref" >
+				        <image :src="item.imageList[0]" class="bigImg"></image>
+						<image src="http://static-b.caimei365.com/app/img/icon/yishou.png" class="yishou_bg" v-if="item.sold==1&&item.newAdded==1||item.sold==1&&item.newAdded==0"></image>
+				    </view>
+				   <view class="ItemInfo">
+						<text class="infotag news" v-if="item.sold==0&&item.newAdded==1">新</text>
+				        <view class="productname" href="" :style="item.sold==0&&item.newAdded==1?'text-indent:60rpx':''">
+				            {{item.name}}
+				        </view>
+				        <view class="targetprice" >
+				            <text v-if="item.detailTalkFlag ==2 && hasLogin==false">价格详聊</text>
+				            <text v-else-if="!hasLogin" class="priceparam">登录查看价格</text>
+				            <text v-else-if="hasLogin && item.detailTalkFlag==2">价格详聊</text>
+				            <text v-else>￥{{item.price1Str}}</text>
+				        </view>
+						<view class="shijian">
+							<text class="iconfont  icon-shijian"></text> {{item.onLineDateStr}}
 						</view>
-						<!--加载loadding-->
-						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
-						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
-						<!--加载loadding-->
-					</view>
+				        <view class="dizhi">
+							<view class="dizhi_left">
+								<text class="iconfont  icon-dizhi1"></text>
+								{{item.provinceCityDistrict}}
+							</view>
+				            <view class="liulan_right">
+								<text class="iconfont  icon-kejian1"></text>
+				               {{item.viewingNum}}
+				            </view>
+				        </view>
+				    </view>
+				</view>
+				<view v-if="showLoading && listData.length > 4">
+					<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="empty-container" v-if="showEmpty">
+				<image class="empty-container-image" src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"></image>
+				<text class="error-text">抱歉，没有相关商品！</text>
+			</view>
 		</view>
-		<!-- 分享弹窗 -->
-		<share-alert   v-if="isShareModal"
-					   :orderID="btnoRderID" 
-					   @shareConfirm ='onShareAppMessage'>
-		</share-alert>
 		<!-- 透明模态层 -->
-		<modal-layer v-if='isModalLayer'></modal-layer>
+		<modal-layer v-if='isModallayer'></modal-layer>
 	</view>
 </template>
 
 <script>
-	import orSearch from '@/components/uni-search/or-search.vue'
-	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
-	import tuiNomore from "@/components/tui-components/nomore/nomore"
-	import orderButton from '@/components/cm-module/orderDetails/orderListButton'	 //按钮
+	import { mapState,mapMutations } from 'vuex'
 	import modalLayer from "@/components/modal-layer"
-	import empty from "@/components/empty";
-	import shareAlert from '@/components/cm-module/modelAlert/shareAlert'			 //分享弹窗
+	import uniGrader from '@/components/uni-grade/uni-grade.vue'
 	import authorize from '@/common/config/authorize.js'
-	import { 
-		searchOrderInfo, 
-		searchOrderHistory,
-		clearOrderHistory,
-		queryOrderList,
-		cancelOrder,
-		deleteOrder,
-		confirmReceipt,
-		affirmOrder
-	} from "@/api/order.js"
+	
 	export default {
 		components: {
-			orSearch,
-			tuiLoadmore,
-			tuiNomore,
-			orderButton,
-			empty,
-			shareAlert,
+			modalLayer,
+			uniGrader
 		},
 		data() {
 			return {
+				shopId:0,
+				userID:0,
 				themeClass: 'block',
-				searchInputVal:'',
-				isShowClose:false,							//是否显示清空输入框图标
-				isSearchHistory:false,						//是都显示搜索历史
-				serachRecordList:[],
+				show:false,
+				userIdentity:'',	
+				identity:2,
+				searchKeyType:1,
+				isShowClose:false,	//是否显示清空输入框图标
+				isSearchHistory:false,//是都显示搜索历史
 				isShowWrapper:false,
 				isModallayer:false,
-				isShowEmpty:false,
+				isFocus:false,
+				priceLoading:true,
 				windowHeight: '',
-				showSkeleton: true,
-				userID:0,
-				orderList: [],
-				btnoRderID: 0, //点击按钮传入的的订单ID
-				pageNum: 1,	  //页数
-				pageSize: 10,  //条数
-				scrollTop: 0,
-				deteleType:'',
-				skeletonShow: true,
-				isShareModal: false,//控制分享弹窗
-				isCenceModal: false,//控制取消订单弹窗
-				isShowDelModal: false,//控制删除订单弹窗
-				isModalLayer: false,
-				loadding: false,
-				pullUpOn: true,
-				hasNextPage: false,
+				showEmpty: false,
+				scrollHeight: '',
+				listData: [],
+				showLoading: false,
+				loadingNow: true,
+				loadingText: '上拉加载更多',
 				pullFlag: true,
-				navbarHeight:'',
-				nomoreText: '上拉显示更多',
-				scrollHeight:''
+				pageNum: 1,
+				pageSize: 10,
+				secondHandType:1,
+				instrumentType:0,
+				name:'',
+				total:0
 			}
 		},
-		onLoad() {
-		  this.initGetSerachRecord()
+		onLoad(option) {
+			this.getListFromServer()
 		},
-		filters:{
-			NumFormat(value) {//处理金额
-				return Number(value).toFixed(2);
-			}
+		computed: {
+			...mapState(['hasLogin','userInfo'])
 		},
 		methods:{
-			subMitSearch() {
-				if (this.searchInputVal == '') {
+			subMitSearch() {//搜索
+				if (this.name == '') {
 					this.$util.msg('请输入商品关键词',2000);
 				}else{
-					this.commodityList =[]
-					this.getOrderDatainit()
+					this.getListFromServer()
 				}
 			},
-			initGetSerachRecord(){
-				this.$api.getStorage().then((resolve) =>{
-					this.userID = resolve.userID
-					searchOrderHistory({userId:this.userID}).then(response =>{
-						this.serachRecordList = response.data
-						if(this.serachRecordList.length>0){
-							this.isSearchHistory = true
-						}else{
-							this.isSearchHistory = false
-						}
-					}).catch(error =>{
-						this.$util.msg(error.msg,2000)
-					})
-				})	
-			},
-			onShowClose () { //输入框失去焦点时触发
-				this.inputEmpty(this.searchInputVal)
-			},
-			onFocus () { //输入框获取焦点时触发
-				this.inputEmpty(this.searchInputVal)
-				this.initGetSerachRecord()
-			},
-			delInputText () { //清除输入框内容
-				this.searchInputVal = ''
-				this.isShowClose = false
-				this.isShowWrapper = false
-				this.inputEmpty(this.searchInputVal)
-				this.initGetSerachRecord()
-			},
-			keywordsClick (item) {	//关键词搜索与历史搜索
-				this.searchInputVal = item;
-				this.isShowClose = true;
-				this.subMitSearch();
-			},
-			confirmDetele () {//清空历史记录
-				this.$util.modal('提示','确定删除历史记录？','确定','取消',true,() =>{
-					clearOrderHistory({userId:this.userID}).then(response =>{
-						this.$util.msg('删除记录成功',2000,true,'success')
-						this.serachRecordList=[]
-					}).catch(error =>{
-						this.$util.msg(error.msg,2000)
-					})
-				})
-			},
-			inputEmpty(val){
-				this.isShowWrapper = false
-				if(val != ''){
-					this.isShowClose = true
-				}else{					
-					this.isShowClose = false
+			scrolltolower() {
+				if(this.total>this.listData.length && this.pullFlag) {
+					this.getListFromServer(true);
 				}
 			},
-			getOrderDatainit(index,source){
-				/**
-				 * @订单初始化加载  仅加载第一页码
-				 * @param：searchWord(搜索关键词)
-				 * @param：userId(用户ID)
-				 * @param：pageNum(页码数)
-				 * @param：pageSize(每页条数)
-				 * @param：organizeID(全局变量组织ID)
-				 */ 
-				let params = {searchWord:this.searchInputVal,userId:this.userID,pageNum:1,pageSize:this.pageSize};
-				searchOrderInfo(params).then(response =>{
+			getListFromServer(loadMore) {
+				this.showLoading = true;
+				this.loadingNow = true;
+				this.loadingText = '加载中';
+				this.showEmpty = false;				
+				if(loadMore) {
+					this.pageNum += 1;
+				}
+				let params = {
+						secondHandType:1,
+						instrumentType:0,
+						name:this.name,
+						pageNum:this.pageNum,
+						pageSize:this.pageSize
+				}
+				this.SecondService.SeconHandProductList(params).then(response =>{
 					this.isShowWrapper = true
-					this.showSkeleton = true
-					const _responseData = response.data.results;
-					if(_responseData && _responseData.length > 0){
-						let filrerData = _responseData.filter(item=>{
-							//添加不同状态下订单的表现形式
-							item = Object.assign(item, this.StateExpFormat(item.state));
-							return item;
-						});
-						this.orderList =[];
-						filrerData.forEach(item=>{
-							this.orderList.push(item);
-						})
-						this.hasNextPage = response.data.hasNextPage;
-						if(this.hasNextPage){
-							this.pullUpOn = false
-							this.nomoreText = '上拉显示更多'
-						}else{
-							if(this.orderList.length < 2){
-								this.pullUpOn = true
-							}else{
-								this.pullUpOn = false
-								this.nomoreText = '已至底部'
-							}
+					const resData = response.data;
+					const resList = resData.results;
+					if(resList && resList.length > 0){
+						this.total = resData.totalRecord;
+						this.showEmpty = false;
+						if(loadMore) {
+							this.listData = [...this.listData,...resList];
+						} else {
+							this.listData = [...resList];
+						}
+						// 防上拉暴滑
+						this.pullFlag = false;
+						setTimeout(()=>{ this.pullFlag = true; },500)
+						// 底部提示文案
+						if(this.totalPage>this.listData.length) {
+							this.loadingText = '上拉加载更多';
+						} else {
+							this.showLoading = true;
+							this.loadingNow = false;
+						}
+					} else {
+						if(!loadMore) {
+							this.showEmpty = true;
 						}
-						this.isShowEmpty = false
-					}else{
-						this.isShowEmpty = true
-					}
-				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
-				})
-			}, 
-			getOnReachBottomData(index){//上拉加载
-				this.pageNum+=1
-				let params = {searchWord:this.searchInputVal,userId:this.userID,pageNum:this.pageNum,pageSize:this.pageSize}
-				searchOrderInfo(params).then(response =>{
-					let resData = response.data.results
-					this.hasNextPage = response.data.hasNextPage;
-					this.orderList = this.orderList.concat(resData)
-					this.pullFlag = false;// 防上拉暴滑
-					setTimeout(()=>{this.pullFlag = true;},500)
-					if(this.hasNextPage){
-						this.pullUpOn = false
-						this.nomoreText = '上拉显示更多'
-					}else{
-						this.loadding = false
-						this.pullUpOn = false
-						this.nomoreText = '已至底部'
 					}
 				}).catch(error =>{
-					this.$util.msg(error.msg,2000)
-				})
-			},
-			scrolltolower() {
-				if(this.hasNextPage){
-					this.loadding = true
-					this.pullUpOn = true
-					this.showSkeleton = false
-					this.getOnReachBottomData();
-				}	
-			},
-			detail(id) {//订单详情跳转
-				this.isModalLayer = true;	
-				this.$api.navigateTo(`/pages/user/order/order-details?type=search&orderID=${id}`)
-			},
-			handButtonConfirm(data) {//获取点击
-				this.handShowAlert(data)
-				this.btnoRderID = data.orderId
-			},
-			handShowAlert(data) {//执行
-				switch(data.type){
-					case 'delete':
-						this.handOrderDetele(data.orderId);
-						break
-					case 'cancel':
-						this.handCenceConfirm(data.orderId)
-						break
-					case 'query':
-						this.isModalLayer = true;
-						this.$api.navigateTo('/pages/user/order/order-logistics?orderID='+data.orderId)
-						break
-					case 'confirm':
-						this.handOrderConfirm(data.orderId);
-						break
-					case 'confirmation':
-						this.handOrderConfirmation(data.orderId);
-						break	
-				}
-			},
-			handOrderConfirm (id){//确认收货
-				this.$util.modal('提示','是否确认收货','确定','取消',true,() =>{
-					confirmReceipt({orderID:id}).then(response =>{
-						this.$util.msg(response.msg,2000,true,'success');
-						this.getOrderDatainit()
-					}).catch(error =>{
-						this.$util.msg(error.msg,2000)
-					})
+					this.$util.msg(error.msg,2000);
 				})
 			},
-			handOrderConfirmation (id){//确认订单
-				this.$util.modal('提示','确认此订单？','确定','取消',true,() =>{
-					affirmOrder({orderID:id}).then(response =>{
-						this.$util.msg(response.msg,2000,true,'success');
-						setTimeout(() => {
-							this.getOrderDatainit()
-						},2000)
-					}).catch(error =>{
-						this.$util.msg(error.msg,2000)
-					})
-				})
+			delInputText () { //清除输入框内容
+				this.name = ''
+				this.isShowClose = false
+				this.isShowWrapper = false
+				this.getListFromServer()
 			},
-			handOrderDetele(id){//删除订单
-				this.$util.modal('提示','确认删除该订单吗？','确定','取消',true,() =>{
-					deleteOrder({orderID:id}).then(response =>{
-						this.$util.msg(response.msg,2000,true,'success');
-						setTimeout(() => {
-							this.getOrderDatainit()
-						},2000)
-					}).catch(error =>{
-						this.$util.msg(error.msg,2000)
-					})
-				})
+			keywordsClick (item) {//关键词搜索与历史搜索
+				this.name = item;
+				this.isShowClose = true;
+				this.subMitSearch();
 			},
-			handCenceConfirm(id){//取消订单
-				this.$util.modal('提示','确认取消该订单吗？','确定','取消',true,() =>{
-					cancelOrder({orderID:id}).then(response =>{
-						this.$util.msg(response.msg,2000,true,'success');
-						setTimeout(() => {
-							this.getOrderDatainit()
-						},2000)
-					}).catch(error =>{
-						this.$util.msg(error.msg,2000)
-					})
-				})
-			},
-			onShareAppMessage (res){//分享转发
-				this.isShareModal = false
-				if (res.from === 'button') {// 来自页面内转发按钮
-			    }
-				return {
-					title: '您有新的分享订单，快来查看吧~',
-					path: `/pages/user/order/order-sharelogin?orderID=${this.btnoRderID}&userID=${this.userID}`,
-					imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
-				}
+			navToDetailPage(id) {
+				this.isModallayer = true;
+				this.$api.navigateTo(`/second/pages/product/product-details?id=${id}`);
+				this.isModallayer = false;
 			},
 			setScrollHeight() {
 				const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
 				this.windowHeight = windowHeight - 1;
 				this.scrollHeight = windowHeight - 1;
 			},
-			PromotionsFormat(promo){//促销活动类型数据处理
-				if(promo!=null){
-					if(promo.type == 1 && promo.mode == 1){
-						return true
-					}else{
-						return false
-					}
-				}
-				return false
+			toLoginPage() {
+				let searchLoginType = 'search'
+				uni.navigateTo({
+					url:`/pages/login/login?type=${searchLoginType}`
+				})
+			},
+			topBubble() {//显隐搜索项
+				this.show = !this.show;
 			},
-			StateExpFormat(state){ //订单状态文字和颜色
-				var HtmlStateText = '',
-					stateTextObject={
-						0:'待确认',
-						4:'交易完成',
-						5:'订单完成',
-						6:'已关闭',
-						7:'交易全退',
-						77:'交易全退',
-						11:'待付款待发货',
-						12:'待付款部分发货',
-						13:'待付款已发货',
-						21:'部分付款待发货',
-						22:'部分付款部分发货',
-						23:'部分付款已发货',
-						31:'已付款待发货',
-						32:'已付款部分发货',
-						33:'已付款已发货',
-						111:'待付款待发货'
-					};
-				Object.keys(stateTextObject).forEach(function(key){
-					if(key == state){
-						HtmlStateText = stateTextObject[key]
-					}
-				});
-				return HtmlStateText;
-			}
-		},
-		onPageScroll(e) {
-			this.scrollTop = e.scrollTop;
-			
 		},
 		onShow() {
 			this.setScrollHeight();
@@ -455,72 +203,75 @@
 <style lang="scss">
 	@import "@/uni.scss";
 	page{
-		background-color: #F7F7F7 !important;
+		background-color:#fff;
 	}
-	.search{
-		width: 702rpx;
-		height: 70rpx;
-		padding: 12rpx 24rpx;
-		border-bottom: 1px solid #F0F0F0;
+	.search-main{
+		width: 100%;
+		height: 88rpx;
 		position: fixed;
 		top: 0;
 		left: 0;
 		background: #FFFFFF;
 		z-index: 1001;
-		.search-input{
-			width: 448rpx;
-			height: 70rpx;
-			padding: 0 68rpx;
-			line-height: 70rpx;
+		box-sizing: border-box;
+		padding: 9rpx 0;
+		.gosearch-btn{
+			width: 702rpx;
+			height: 100%;
 			border-radius: 40rpx;
-			position: relative;
 			background: #F0F0F0;
-			float: left;
-			.icon-iconfonticonfontsousuo1{
-				font-size: 36rpx;
-				color: #8A8A8A;
+			margin: 0 auto;
+			padding:0 20rpx;
+			font-size: 28rpx;
+			line-height: 70rpx;
+			padding-left: 70rpx;
+			color: #8A8A8A;
+			background: #F7F7F7;
+			position: relative;
+			box-sizing: border-box;
+			.icon-sousuo{
+				width: 70rpx;
+				height: 70rpx;
+				line-height: 70rpx;
+				text-align: center;
+				display: block;
 				position: absolute;
-				left: 24rpx;
+				left: 0;
+				top: 0;
+				font-size: 34rpx;
+				color: #8A8A8A;
 				z-index: 10;
 			}
 			.icon-shanchu1{
 				font-size: 36rpx;
 				color: #8A8A8A;
 				position: absolute;
-				right: 24rpx;
+				right: 10rpx;
 				top: 0;
 				padding: 0 10rpx;
-				z-index: 10;
+				z-index: 100;
 			}
-			input{
-				width: 448rpx;
-				height: 70rpx;
-				background-color: #F0F0F0; 
-				font-size: 26rpx;
+			.input{
+				width: 400rpx;
+				height: 100%;
+				float: left;
+				font-size: $font-size-24;
+				box-sizing: border-box;
+				padding-right: 66rpx;
 			}
 		}
 		.search-btn{
-			width: 118rpx;
+			width: 120rpx;
 			height: 70rpx;
 			line-height: 70rpx;
-			color: $color-system;
-			font-size: 30rpx;
+			float: right;
 			text-align: center;
-			float: left;
-		}
-		.voice-icon{
-			width: 36rpx;
-			height: 36rpx;
-			padding: 16rpx 20rpx 16rpx 0;
-			position: absolute;
-			left: 16rpx;
-			top: 4rpx;
-			z-index: 10;
+			color: #666666;
+			font-size: $font-size-24;
 		}
-		
 	}
 	.search-container{
-		padding-top: 106rpx;
+		padding-top: 96rpx;
 	}
 	.s-block{
 		background: #FFFFFF;
@@ -561,353 +312,107 @@
 			}
 		}
 	}
-	.s-circle{
-		margin-top: 30rpx;
-		.header{
-			font-size: 32rpx;
-			padding: 30rpx;
-			border-bottom: 2rpx solid #F9F9F9;
-			position: relative;
-			image{
-				width: 36rpx;
-				height: 36rpx;
-				padding: 10rpx;
-				position: absolute;
-				right: 40rpx;
-				top: 24rpx;
-			}
-		}
-		.list{
-			display: flex;
-			flex-wrap: wrap;
-			padding: 0 30rpx 20rpx;
-			view{
-				padding: 8rpx 30rpx;
-				margin: 20rpx 30rpx 0 0;
-				font-size: 28rpx;
-				color: #8A8A8A;
-				background-color: #F7F7F7;
-				box-sizing: border-box;
-				text-align: center;
-				border-radius: 20rpx;
-			}
-		}
-	}
-	.wanted-block{
-		margin-top: 30rpx;
-		.header{
-			font-size: 32rpx;
-			padding: 30rpx;
-		}
-		.list{
-			display: flex;
-			flex-wrap: wrap;
-			view{
-				width: 50%;
-				color: #8A8A8A;
-				font-size: 28rpx;
-				box-sizing: border-box;
-				text-align: center;
-				padding: 20rpx 0;
-				border-top: 2rpx solid #FFF;
-				border-left: 2rpx solid #FFF;
-				background-color: #F7F7F7;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-		}
-	}
-	.wanted-circle{
-		margin-top: 30rpx;
-		.header{
-			font-size: 32rpx;
-			padding: 30rpx;
-		}
-		.list{
-			display: flex;
-			flex-wrap: wrap;
-			padding: 0 30rpx 20rpx;
-			view{
-				padding: 8rpx 30rpx;
-				margin: 20rpx 30rpx 0 0;
-				font-size: 28rpx;
-				color: #8A8A8A;
-				background-color: #F7F7F7;
-				box-sizing: border-box;
-				text-align: center;
-				border-radius: 20rpx;
-			}
-		}
-	}
-	.order-container {
+	.commodity-list-wrapper {
 		scroll-view {
 			height: 100%;
 			overflow: scroll;
 		}	
-	}	
-	.container {
-		padding-bottom: env(safe-area-inset-bottom);
-		height: auto;
-		position: relative;
-	}
-	.tui-order-content{
-		width: 100%;
-		height: auto;
-	}
-	.tui-order-list {
-		width: 100%;
-		position: relative;
-	}
-	.tui-order-item {
-		display: flex;
-		flex-direction: column;
-		width: 702rpx;
-		padding:20rpx 24rpx 0 24rpx;
-		background: #fff;
-		border-bottom: 20rpx solid #F7F7F7;
-	}
-	.order-title{
-		width: 100%;
-		height: auto;
-		.order-title-t{
-			width: 100%;
-			height: 68rpx;
-			float: left;
-			line-height: 68rpx;
-			position: relative;
-			.bage-icon{
-				width: 50rpx;
-				height: 50rpx;
-				display: block;
-				position: absolute;
-				right: 0;
-				top: 9rpx;
-			}
-			.bage-buss{
-				display: inline-block;
-				width: 72rpx;
-				height: 30rpx;
-				background:radial-gradient(circle,rgba(255,39,180,1) 0%,rgba(193,77,245,1) 100%);
-				border-radius: 4rpx;
-				line-height: 30rpx;
-				font-size: $font-size-22;
-				text-align: center;
-				color: #FFFFFF;
+		.Listitem{
+			height: 202rpx;
+			padding: 20rpx;
+			border-bottom: 2rpx solid #F0F2F4;
+			&.activeImg {
+				opacity: 0.5;
 			}
-			.bage-auto{
-				display: inline-block;
-				width: 72rpx;
-				height: 30rpx;
-				background:radial-gradient(circle,rgba(255,180,39,1) 0%,rgba(245,142,77,1) 100%);
-				border-radius: 4rpx;
-				line-height: 30rpx;
-				font-size: $font-size-22;
-				text-align: center;
-				color: #FFFFFF;
-			}
-			.bage-text{
-				display: inline-block;
-				font-size: $font-size-28;
-				line-height: 68rpx;
-				text-align: left;
-				color: $color-system;
-				margin-left: 10rpx;
-			}
-		}
-		.order-title-b{
-			width: 100%;
-			height: 40rpx;
-			float: left;
-			margin-top: 8rpx;
-			.order-title-btxt{
-				float: left;
-				font-size: $font-size-28;
-				line-height: 40rpx;
-				color: #999999;
-				text-align: lef
-			}
-			.order-title-tip{
-				float: right;
-				font-size: $font-size-28;
-				line-height: 40rpx;
-				text-align: right;
-				color: #FF2A2A;
-			}
-		}
-	}
-	.goods-title{
-		width: 100%;
-		height: 56rpx;
-		float: left;
-		margin-top:10rpx;
-		.floor-item-act{
-			height: 56rpx;
-			text-align: center;
-			box-sizing: border-box;
-			float: left;
-			padding: 10rpx 0;
-			margin-right: 12rpx;
-			.floor-tags{
+			.itemImg {
+				width: 180rpx;
+				height: 180rpx;
 				float: left;
-				height: 36rpx;
-				border-radius: 4rpx;
-				background-color: rgba(225, 86, 22, 0.1);
-				line-height: 36rpx;
-				color: $color-system;
-				text-align: center;
-				display: inline-block;
-				padding:0 16rpx;
-				font-size: $font-size-20;
-			}
-		}
-		.title-text{
-			width: 400rpx;
-			overflow: hidden;
-			text-overflow:ellipsis;
-			white-space: nowrap;
-			float: left;
-			font-size: $font-size-28;
-			color: $text-color;
-			text-align: left;
-			line-height: 56rpx;
-			font-weight: bold;
-		}
-	}
-	.goods-item{
-		width: 100%;
-		height: auto;
-	}	
-	.goods-pros-t{
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: 217rpx;
-		padding:24rpx 0;
-		.pros-img{
-			float: left;
-			width: 210rpx;
-			height: 100%;
-			border-radius: 10rpx;
-			margin:0 26rpx 0 0;
-			position: relative;
-			.tips{
-				display: inline-block;
-				width: 80rpx;
-				height: 40rpx;
-				background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);
-				line-height: 40rpx;
-				text-align: center;
-				font-size: $font-size-24;
-				color: #FFFFFF;
-				border-radius:10rpx 0 10rpx 0 ;
-				position: absolute;
-				top:0;
-				left: 0;
-			}
-			image{
-				width: 210rpx;
-				height: 210rpx;
-				border-radius: 10rpx;
-				border:1px solid #f3f3f3;
-			}
-		}
-	}
-	.pros-product{
-		width: 468rpx;
-		height: 100%;
-		line-height: 36rpx;
-		font-size: $font-size-26;	
-		position: relative;
-		.producttitle{
-			width: 100%;
-			display: inline-block;
-			height: auto;							
-			text-overflow:ellipsis;
-			display: -webkit-box;
-			word-break: break-all;
-			-webkit-box-orient: vertical;
-			-webkit-line-clamp: 2;
-			overflow: hidden;
-			margin-bottom: 8rpx;
-		}
-		.productspec{
-			height: 36rpx;
-			color: #999999;
-		}
-		.productprice{
-			height: 48rpx;
-			position: absolute;
-			width: 100%;
-			bottom: 0;
-			.price{
-				line-height: 48rpx;
-				font-size: $font-size-28;
-				width: 48%;
-				color: #FF2A2A;
-				float: left;
-				font-weight: bold;
-			}
-			.count{
-				height: 100%;
-				float: right;
+				background: #000;
 				position: relative;
-				.small{
-					color: #666666;
+				.yishou_bg{
+					width: 90rpx;
+					height: 90rpx;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%)
+				}
+				.bigImg {
+					width: 100%;
+					height: 100%;
 				}
 			}
-		}
-		.floor-item-act{
-			width: 100%;
-			height: 56rpx;
-			text-align: center;
-			box-sizing: border-box;
-			float: left;
-			padding:0 0 10rpx 0;
-			.floor-tags{
-				float: left;
-				height: 36rpx;
-				border-radius: 4rpx;
-				background-color: rgba(225, 86, 22, 0.1);
-				line-height: 36rpx;
-				color: $color-system;
-				text-align: center;
-				display: inline-block;
-				padding:0 16rpx;
-				font-size: $font-size-20;
-			}
-		}
-	}
-	.order-footer{
-		width: 100%;
-		height: 78rpx;
-		float: left;
-		.order-footer-top{
-			width: 100%;
-			height: 34rpx;
-			line-height: 34rpx;
-			font-size: $font-size-24;
-			color: #999999;
-			text-align: right;
-		}
-		.order-footer-bot{
-			width: 100%;
-			float: left;
-			height: 48rpx;
-			line-height: 48rpx;
-			font-size: $font-size-28;
-			font-weight: bold;
-			color: $text-color;
-			.count{
-				width: 50%;
-				float: left;
-				text-align: left;
-			}
-			.money{
-				width: 50%;
+			.ItemInfo {
 				float: right;
-				text-align: right;
+				width:500rpx;
+				.infotag{
+					font-size: 20rpx;
+					padding: 5rpx 15rpx;
+					background: #f94b4b;
+					color: #fff;
+					position: absolute;
+					border-radius: 6rpx;
+				}
+				.productname{
+					display: inline-block;
+					font-size: 28rpx;
+					color: #333333;
+					vertical-align: top;
+					text-overflow: -o-ellipsis-lastline;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					line-clamp: 2;
+					-webkit-box-orient: vertical;
+					width: 500rpx;
+				}
+				.targetprice {
+					font-size: 26rpx;
+					color: #f94b4b;
+					cursor: pointer;
+					margin: 15rpx 0;
+				}
+				.shijian{
+					font-size: 24rpx;
+					color: #999999;
+					margin-top: 10rpx;
+					.icon-shijian{
+						font-size: 30rpx;
+						color: #999999;
+						margin-right: 10rpx;
+					}
+				}
+				.dizhi{
+					font-size: 24rpx;
+					color: #999999;
+					margin-top: 10rpx;
+					.dizhi_left{
+						float: left;
+						.icon-dizhi1{
+							font-size: 30rpx;
+							color: #999999;
+							margin-right: 10rpx;
+						}
+					}
+					.liulan_right{
+						float: right;
+						margin-right: 25rpx;
+						.icon-kejian1{
+							font-size: 30rpx;
+							color: #999999;
+							margin-right: 10rpx;
+						}
+					}
+				}
+				.shijian{
+					font-size: 24rpx;
+					color: #999999;
+					margin-top: 10rpx;
+				}
 			}
 		}
 	}
+	
 </style>