test

pages/search/search-second.vue

@@ -0,0 +1,913 @@
+<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>
+		</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>
+						<!--加载loadding-->
+						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
+						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
+						<!--加载loadding-->
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		<!-- 分享弹窗 -->
+		<share-alert   v-if="isShareModal"
+					   :orderID="btnoRderID" 
+					   @shareConfirm ='onShareAppMessage'>
+		</share-alert>
+		<!-- 透明模态层 -->
+		<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 modalLayer from "@/components/modal-layer"
+	import empty from "@/components/empty";
+	import shareAlert from '@/components/cm-module/modelAlert/shareAlert'			 //分享弹窗
+	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,
+		},
+		data() {
+			return {
+				themeClass: 'block',
+				searchInputVal:'',
+				isShowClose:false,							//是否显示清空输入框图标
+				isSearchHistory:false,						//是都显示搜索历史
+				serachRecordList:[],
+				isShowWrapper:false,
+				isModallayer:false,
+				isShowEmpty:false,
+				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,
+				pullFlag: true,
+				navbarHeight:'',
+				nomoreText: '上拉显示更多',
+				scrollHeight:''
+			}
+		},
+		onLoad() {
+		  this.initGetSerachRecord()
+		},
+		filters:{
+			NumFormat(value) {//处理金额
+				return Number(value).toFixed(2);
+			}
+		},
+		methods:{
+			subMitSearch() {
+				if (this.searchInputVal == '') {
+					this.$util.msg('请输入商品关键词',2000);
+				}else{
+					this.commodityList =[]
+					this.getOrderDatainit()
+				}
+			},
+			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
+				}
+			},
+			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 =>{
+					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 = '已至底部'
+							}
+						}
+						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)
+					})
+				})
+			},
+			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)
+					})
+				})
+			},
+			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)
+					})
+				})
+			},
+			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'
+				}
+			},
+			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
+			},
+			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();
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "@/uni.scss";
+	page{
+		background-color: #F7F7F7 !important;
+	}
+	.search{
+		width: 702rpx;
+		height: 70rpx;
+		padding: 12rpx 24rpx;
+		border-bottom: 1px solid #F0F0F0;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: #FFFFFF;
+		z-index: 1001;
+		.search-input{
+			width: 448rpx;
+			height: 70rpx;
+			padding: 0 68rpx;
+			line-height: 70rpx;
+			border-radius: 40rpx;
+			position: relative;
+			background: #F0F0F0;
+			float: left;
+			.icon-iconfonticonfontsousuo1{
+				font-size: 36rpx;
+				color: #8A8A8A;
+				position: absolute;
+				left: 24rpx;
+				z-index: 10;
+			}
+			.icon-shanchu1{
+				font-size: 36rpx;
+				color: #8A8A8A;
+				position: absolute;
+				right: 24rpx;
+				top: 0;
+				padding: 0 10rpx;
+				z-index: 10;
+			}
+			input{
+				width: 448rpx;
+				height: 70rpx;
+				background-color: #F0F0F0; 
+				font-size: 26rpx;
+			}
+		}
+		.search-btn{
+			width: 118rpx;
+			height: 70rpx;
+			line-height: 70rpx;
+			color: $color-system;
+			font-size: 30rpx;
+			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;
+		}
+		
+	}
+	.search-container{
+		padding-top: 106rpx;
+	}
+	.s-block{
+		background: #FFFFFF;
+		.header{
+			font-size: 32rpx;
+			padding:40rpx 24rpx 22rpx 24rpx;
+			line-height: 42rpx;
+			font-size: 30rpx;
+			font-weight: bold;
+			position: relative;
+			.icon-shanchu{
+				font-size: 36rpx;
+				color: #333333;
+				float: right;
+				padding: 0 10rpx;
+				z-index: 10;
+				font-weight: normal;
+			}
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			padding-bottom: 40rpx;
+			view{
+				color: #8A8A8A;
+				font-size: 24rpx;
+				box-sizing: border-box;
+				text-align: center;
+				height: 48rpx;
+				line-height: 48rpx;
+				border-radius: 24rpx;
+				margin:12rpx;
+				padding:.0 30rpx;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				background-color: #F3F3F3;
+			}
+		}
+	}
+	.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 {
+		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;
+			}
+			.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{
+				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;
+				position: relative;
+				.small{
+					color: #666666;
+				}
+			}
+		}
+		.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%;
+				float: right;
+				text-align: right;
+			}
+		}
+	}
+</style>