caimei-applets-hehe/pages/user/order/order-list.vue

<template>
	<view class="container" :style="{paddingTop:navbarHeight+'px'}">
		<!-- 自定义返回 -->
		<header-back :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :isDelete="isDelete" @goSearchPath="handlSearchPath"></header-back>
		<view class="order-section-top" :style="{marginTop:navbarHeight+'px'}">
			<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
				<view v-for="(item,index) in orderTabBar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
				 :data-current="index" @tap.stop="onClickTab">
					<text class="tab-bar-title">{{item.text}}</text>
					<text class="line"></text>
				</view>
			</scroll-view>
		</view>
		<swiper class="tab-content" :current="currentTab" duration="80" @animationfinish="onChange" :style="{height:winHeight+'px'}" >
			<swiper-item v-for="(tabItem,index) in orderTabBar" :key="index">
				<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="false" :loadingType="5"></tui-skeleton>
				<scroll-view scroll-y class="scoll-y tui-skeleton" @scrolltolower="scrolltolower">
					<view  :class="{'tui-order-list':scrollTop >= 0}" class="tui-skeleton clearfix">
						<!-- 空白页 -->
						<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0" :typeIndex="currentTab" :navbarHeight="navbarHeight"></empty>
						<!-- 列表 -->
						<view v-else class="tui-order-content">
							<view  class="tui-order-item" v-for="(order,orderIndex) in tabItem.orderList" :key="orderIndex" >
								<view class="order-title">
									<view class="order-title-t">
										<text class="bage-text tui-skeleton-fillet"><text class="text">订单编号：</text>{{order.orderNo}}</text>
									</view>
									<view class="order-title-b">
										<view class="order-title-btxt tui-skeleton-fillet"><text class="text">下单时间：</text>{{order.orderTime}}</view>
										<view class="order-title-tip tui-skeleton-fillet">{{ StateExpFormat(order.status) }}</view>
									</view>
								</view>
								<block v-for="(shop,sindex) in order.shopOrderList" :key="sindex">
									<view class="goods-title">
										<view class="title-logo"><image :src="shop.shopLogo" mode=""></image></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" @click.stop="detail(order.orderId)">
										<view class="goods-pros-t">
											<view class="pros-img tui-skeleton-fillet">
												<image :src="pros.productImage" alt="" />
											</view>
											<view class="pros-product clearfix">
												<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="floor-item-act" v-if="pros.ladderPriceFlag == 1">
													<view class="tag" @click.stop="clickPopupShow(pros,2)">活动价</view>
												</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>	
										</view>
									</view>	
								</block>
								<view class="order-footer">
									<view class="order-footer-bot">
										<view class="count tui-skeleton-fillet">共{{order.productCount}}件商品</view>
										<view class="money tui-skeleton-fillet" v-if="order.status==31||order.status==32||order.status==33">
											已支付：<text class="color">¥{{ order.receiptAmount | NumFormat }}</text>
										</view>
										<view class="money tui-skeleton-fillet" v-else>
											待付总额：<text class="color">¥{{ order.pendingPayments | NumFormat }}</text>
										</view>
									</view>
								</view>
								<!-- 底部button -->
								<order-button ref="orderButton" 
											  :status="order.status" 
											  :order="order" 
											  @buttonConfirm="handButtonConfirm">
								</order-button>
							</view>
							<!--加载loadding-->
							<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
							<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text='nomoreText'></tui-nomore>
							<!--加载loadding-->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 操作弹窗 -->
		<tui-modal :show="modal" @click="handleClick" @cancel="hideMobel(1)" :content="contentModalText" color="#333" :size="32" shape="circle" :maskClosable="false"></tui-modal>
		<!-- 再次购买订单商品全部下架弹窗 -->
		<tui-modal :show="modal2" @click="handleClick2" @cancel="hideMobel(2)" shape="circle" content="订单内商品已全部下架，不能购买！" :button="button"></tui-modal>
		<!-- 再次购买部分商品失效弹窗 -->
		<tui-modal :show="modal3" @cancel="hideMobel(3)" :custom="true">
			<view class="tui-modal-custom">
				<view class="tui-modal-custom-text">
					<view class="title">以下商品已失效，不能进行购买；是否先将其他商品加入购物车？</view>
					<scroll-view scroll-y class="tui-modal-custom-list">
						<view class="custom-list" v-for="(invalid,index) in invalidList" :key="index">
							<view class="custom-list-image"><image :src="invalid.productImage" mode=""></image></view>
							<view class="custom-list-name">{{ invalid.name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="tui-modal-button">
					<button  class="modal-button cancel" @click="hideMobel(3)">我再想想</button>
					<button  class="modal-button confirm" @click="handleClick3">加入购物车</button>
				</view>
			</view>
		</tui-modal>
		<!-- 透明模态层 -->
		<modal-layer v-if='isModalLayer'></modal-layer>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	import headerBack from '@/components/cm-module/headerNavbar/header-back' 		 	 //自定义导航
	import btSearch from '@/components/uni-search/bt-search.vue'						//搜索
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	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";
	
	export default {
		components: {
			headerBack,
			empty,
			btSearch,
			tuiLoadmore,
			tuiNomore,
			orderButton,
			tuiSkeleton,
			modalLayer,
		},
		data() {
			return {
				CustomBar:this.CustomBar,// 顶部导航栏高度
				orderTabBar: [{state: 0,text: '全部',orderList: []},
							  {state: 1,text: '待付款',orderList: []},
							  {state: 2,text: '待发货',orderList: []},
							  {state: 3,text: '已发货',orderList: []},
							  {state: 4,text: '退货/款',orderList: []}
							 ],
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo:  this.setSysteminfo(),		 //获取设备信息
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 1,
					title: '我的订单', // 导航栏 中间的标题
				},
				winHeight: "", //窗口高度
				currentTab: 0, //预设当前项的值
				scrollLeft: 0 ,//tab标题的滚动条位置
				userId:0,
				orderData: [],
				btnoRderID: 0, //点击按钮传入的的订单ID
				pageNum: 1,	  //页数
				pageSize: 10,  //条数
				scrollTop: 0,
				skeletonShow: true,
				isDelete:false,
				isClickChange: false,
				isModalLayer: false,
				isPayModel:false,
				loadding: false,
				pullUpOn: true,
				hasNextPage: false,
				pullFlag: true,
				navbarHeight:'',
				payModelData:{},
				hanldOrderData:{},
				modelType:0,
				nomoreText: '上拉显示更多',
				isOnloadFlag:false,
				modal:false,
				modal2:false,
				modal3:false,
				OperationType:'',
				contentModalText:'',
				button: [
					{
						text: '确定',
						type:'danger'
					}
				],
				invalidList:[]
			}
		},
		onLoad(e) {
			let self = this;
			if(e.type ==='detele'){self.isDelete = true}
			self.currentTab = e.state
			self.isOnloadFlag = true
			self.getHeaderTopHeight()//设置自定义导航高度
			//  高度自适应
			uni.getSystemInfo({
				success: function(res) {
					let calc = res.windowHeight;
					self.winHeight = calc - self.CustomBar;
				}
			});
		},
		filters:{
			NumFormat(value) {//处理金额
				return Number(value).toFixed(2);
			},
		},	
		methods: {
			// 滚动切换标签样式
			onChange: function(e) {
				let index = e.target.current || e.detail.current;
				if (this.isClickChange) {
					this.currentTab = index;
					this.isClickChange = false;
					return;
				}
				this.isClickChange = false;
				this.currentTab = index; 
				this.checkCor();
				this.pageNum = 1
				this.pullUpOn = true //切换时隐藏
				this.loadding =  false //切换时隐藏
				this.nomoreText = ''
				if(!this.isOnloadFlag){
					this.GetOrderDatainit(this.currentTab,'tabChange')
				}
			},
			// 点击标题切换当前页时改变样式
			onClickTab: function(e) {
				let tabIndex = e.target.dataset.current || e.currentTarget.dataset.current;
				if (this.currentTab === tabIndex) {
					return false;
				} else {
					this.isClickChange = true;
					this.currentTab = tabIndex
					this.pageNum = 1
					this.pullUpOn = true //切换时隐藏
					this.loadding =  false //切换时隐藏
					this.GetOrderDatainit(this.currentTab)
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 3) {
					//这里距离按实际计算
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			GetOrderDatainit(index,source){
				/**
				 * @订单初始化加载  仅加载第一页码
				 * @param：orderState(订单状态:0全部,1待付款,2待发货,3已发货,4退货款)
				 * @param：userId(用户ID)
				 * @param：pageNum(页码数)
				 * @param：pageSize(每页条数)
				 * @param：organizeID(全局变量组织ID)
				 */ 
				setTimeout(()=>{
					this.skeletonShow = false
					this.isOnloadFlag = false
				},1500)
				let orderItem = this.orderTabBar[index];
				let state = orderItem.state;
				if(source === 'tabChange' && orderItem.loaded === true){
					//tab切换只有第一次需要加载数据
					return;
				}
				setTimeout(()=>{
					this.$api.getStorage().then((resolve) =>{
						this.userId = resolve.userId
						this.OrderService.QueryOrderList(
							{
								orderState:index,
								userId:resolve.userId,
								pageNum:1,
								pageSize:this.pageSize,
							}
						)
						.then(response =>{
							let data = response.data
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							let orderList = data.list.filter(item=>{
								//添加不同状态下订单的表现形式
								item = Object.assign(item, this.StateExpFormat(item.state));
								return item;
							});
							orderItem.orderList =[];
							orderList.forEach(item=>{
								orderItem.orderList.push(item);
							})
							this.$set(orderItem, 'loaded', true);
							this.hasNextPage = data.hasNextPage;
							if(this.hasNextPage){
								this.pullUpOn = false
								this.nomoreText = '上拉显示更多'
							}else{
								if(orderItem.orderList.length < 2){
									this.pullUpOn = true
								}else{
									this.pullUpOn = false
									this.nomoreText = '已至底部'
								}
							}
						}).catch(error =>{
							this.$util.msg(error.msg,2000);
						})
					})
				}, 600);	
			}, 
			getOnReachBottomData(index){//上拉加载
				this.pageNum+=1
				this.OrderService.QueryOrderList(
					{
						orderState:index,
						userId:this.userId,
						pageNum:this.pageNum,
						pageSize:this.pageSize
					}
				)
				.then(response =>{
					let orderItem = this.orderTabBar[index];
					let data = response.data
					this.hasNextPage = data.hasNextPage;
					orderItem.orderList = orderItem.orderList.concat(data.list)
					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.getOnReachBottomData(this.currentTab);
				}	
			},
			detail(id) {//订单详情跳转
				this.isModalLayer = true;	
				this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&orderId=${id}`)
			},
			handButtonConfirm(data) {//获取点击
				this.hanldOrder = data
				this.btnoRderID = data.orderId
				this.OperationType = data.type
				this.handShowAlert(data)
			},
			handShowAlert(data) {//执行
				switch(data.type){
					case 'cancel':
						this.modal = true;
						this.contentModalText = '确认取消该订单吗？';
						break;
					case 'delete':
						this.modal = true;
						this.contentModalText = '确认删除该订单吗？';
						break;
					case 'confirm':
						this.modal = true;
						this.contentModalText = '是否确认收货？'	
						break;
					case 'query':
						this.isModalLayer = true;
						this.$api.navigateTo('/pages/user/order/order-logistics?orderId='+data.orderId)
						break;
					case 'again':
						this.handBuyAgainInfo()					
						break;
					case 'pay':
						this.MiniWxPayFor(data.order)
						break;
				}
			},
			handleClick(e) {//用户操作订单
				let index = e.index;
				if(index == 1){
					switch(this.OperationType){
						case 'delete':
							this.handOrderDetele(this.btnoRderID);
							break
						case 'cancel':
							this.handCenceConfirm(this.btnoRderID)
							break
						case 'confirm':
							this.handOrderConfirm(this.btnoRderID);
							break
					}
				}
				this.modal = false;
			},
			handleClick2(){
				this.modal2 = false;
			},
			handleClick3(){
				this.handShoppingAgainCart()
				this.modal3 = false
			},
			hideMobel(index) {
				switch(index){
					case 1:this.modal = false;break;
					case 2:this.modal2 = false;break;
					case 3:this.modal3 = false;break;
				}
				
			},
			handBuyAgainInfo(){//再次购买初始化查询订单商品信息
				this.OrderService.GetOrderBuyAgain(
					{
						orderId:this.btnoRderID,
					}
				)
				.then(response =>{
					this.handShoppingAgainCart()
				})
				.catch(error =>{
					if(error.data && error.data.length > 0){
						this.modal3 = true
						this.invalidList = error.data
					}else{
						this.modal2 = true
					}
				})
			},
			handShoppingAgainCart(){ //一键加入购物车
				this.ProductService.ShoppingAgainCart(
					{
						orderId:this.btnoRderID,
					}
				)
				.then(response => {
					this.ProductService.QueryShoppingQuantity({userId:this.userId}).then(response => {
						this.$api.switchTabTo('/pages/tabBar/cart/index');
					}).catch(error =>{
						console.log('查询购物车数量错误信息',error)
					})
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			handOrderConfirm (id){//确认收货
				this.OrderService.ConfirmReceipt({orderId:id}).then(response =>{
					this.$util.msg(response.msg,2000,true,'success');
					setTimeout(() => {
						this.GetOrderDatainit(this.currentTab)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			handOrderDetele(id){//删除订单
				this.OrderService.DeleteOrder({orderId:id}).then(response =>{
					this.$util.msg(response.msg,2000,true,'success');
					setTimeout(() => {
						this.GetOrderDatainit(this.currentTab)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			handCenceConfirm(id){//取消订单
				this.OrderService.CancelOrder({orderId:id}).then(response =>{
					this.$util.msg(response.msg,2000,true,'success');
					setTimeout(() => {
						this.GetOrderDatainit(this.currentTab)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			async MiniWxPayFor(data){
				const wechatCode = await authorize.getCode('weixin')
				this.PayService.WeChatMiniWxPay(
					{
						payAmount:data.payableAmount*100,
						payWay:"WEIXIN",
						code:wechatCode,
						orderId:data.orderId
					}
				)
				.then(response =>{
					let PayInfo = JSON.parse(response.data.data.payInfo);
					this.WxRequestPayment(PayInfo)
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			WxRequestPayment(data){
				let self = this
				wx.requestPayment({
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					'signType': data.signType,
					'paySign': data.paySign,
					'success':function(res){
						wx.reLaunch({url: '/pages/tabBar/index/index'});
					},
					'fail':function(res){
						console.log(res)
						self.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({data:self.hanldOrder.order})}`)
					},
					'complete':function(res){
			
					}
				})
			},
			handlSearchPath(){
				this.$api.navigateTo('/pages/user/order/search-order')
			},
			orderPriceToFixed (n){
				let price ='';
				price = n.toFixed(2);
				return price
			},
			getHeaderTopHeight (){ // 状态栏高度
				let statusBarHeight = this.systeminfo.statusBarHeight
				let headerPosi = this.headerBtnPosi
				let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
				      height: headerPosi.height,
				      width: headerPosi.width,
				      // 胶囊top - 状态栏高度
				      top: headerPosi.top - statusBarHeight,
				      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
				      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
				      // 屏幕宽度 - 胶囊right
				      right: this.systeminfo.screenWidth - headerPosi.right
				}
				this.navbarHeight= headerPosi.bottom + btnPosi.bottom// 原胶囊bottom + 现胶囊bottom
			},
			setHeaderBtnPosi (){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo (){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
			PromotionsFormat(promo){//促销活动类型数据处理
				if(promo!=null){
					if(promo.type == 1 && promo.mode == 1){
						return true
					}else{
						return false
					}
				}
				return false
			},
			StateExpFormat(state){ //订单状态文字和颜色
				var HtmlStateText = '',
					stateTextObject={
						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.isModalLayer = false;
			this.GetOrderDatainit(this.currentTab)
			// console.log(this.orderTabBar)
		}
	}
</script>

<style lang="scss">
	/*tabbar start*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.order-section-top{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #FFFFFF;
	}
	.tab-view::before {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}
	.tab-view {
		width: 100%;
		height: 80rpx;
		overflow: hidden;
		box-sizing: border-box;
		background: #fff;
		white-space: nowrap;
		border-top: 1px solid #F7F7F7;
	}
	.tab-bar-item {
		padding: 0;
		height: 80rpx;
		min-width: 90rpx;
		line-height: 80rpx;
		margin: 0 28rpx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
		position: relative;
		.tab-bar-title {
			height: 80rpx;
			line-height: 80rpx;
			font-size:$font-size-28;
			color: $text-color;
		}
		.line{
			width: 40rpx;
			height: 4rpx;
			border-radius: 2rpx;
			position: absolute;
			bottom: 8rpx;
			left: 50%;
			margin-left: -20rpx;
			background-color: #FFFFFF;
		}
		&.active {
			.line{
				background-color: $color-system;
			}
			.tab-bar-title {
				color:$color-system !important;
			}
		}
	}
	/*tabbar end*/
	.scoll-y {
		height: 100%;
	}
	page{
		background: #F7F7F7;
	}
	.container {
		padding-bottom: env(safe-area-inset-bottom);
		height: auto;
		position: relative;
	}
	.tui-order-content{
		width: 100%;
		height: auto;
	}
	.tui-order-list {
		margin-top: 90rpx;
		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;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #e1e1e1;
		.order-title-t{
			width: 100%;
			height: 48rpx;
			float: left;
			line-height: 48rpx;
			position: relative;
			.bage-icon{
				width: 50rpx;
				height: 50rpx;
				display: block;
				position: absolute;
				right: 0;
				top: 9rpx;
			}
			.bage-text{
				display: inline-block;
				font-size: $font-size-28;
				line-height: 48rpx;
				text-align: left;
				color: $text-color;
				.text{
					color: #999999;
				}
			}
		}
		.order-title-b{
			width: 100%;
			height: 48rpx;
			float: left;
			margin-top: 8rpx;
			.order-title-btxt{
				float: left;
				font-size: $font-size-28;
				line-height: 48rpx;
				color: $text-color;
				text-align: left;
				.text{
					color: #999999;
				}
			}
			.order-title-tip{
				float: right;
				font-size: $font-size-28;
				line-height: 48rpx;
				text-align: right;
				color: #FF2A2A;
			}
		}
	}
	.goods-title{
		width: 100%;
		height: 56rpx;
		float: left;
		margin-top:10rpx;
		.title-logo{
			width: 56rpx;
			height: 56rpx;
			float: left;
			border-radius: 8rpx;
			border: 1px solid #e1e1e1;
			margin-right: 8rpx;
			image{
				border-radius: 8rpx;
				width: 56rpx;
				height: 56rpx;
			}
		}
		.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{
		width: 100%;
		height: auto;
		padding:24rpx 0;
		.pros-img{
			float: left;
			width: 210rpx;
			height: 100%;
			border-radius: 10rpx;
			margin:0 26rpx 0 0;
			position: relative;
			image{
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
				border:1px solid #f3f3f3;
			}
		}
	}
	.pros-product{
		width: 460rpx;
		height: 100%;
		line-height: 36rpx;
		font-size: $font-size-26;	
		position: relative;
		float: left;
		.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;
			margin: 10rpx 0 0 0;
		}
		.productprice{
			height: 48rpx;
			width: 100%;
			float: left;
			margin-top: 10rpx;
			.price{
				line-height: 48rpx;
				font-size: $font-size-28;
				width: 48%;
				color: $color-system;
				float: left;
				font-weight: bold;
				&.disabled{
					color: #999999;
					text-decoration: line-through;
				}
			}
			.count{
				height: 100%;
				float: right;
				position: relative;
				.small{
					color: #666666;
				}
			}
		}
		.floor-item-act{
			width: 100%;
			height: 30rpx;
			margin-top: 8rpx;
			float: left;
			.tag{
				display: inline-block;
				width: 80rpx;
				height: 30rpx;
				background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
				background-size: contain;
				font-size: 22rpx;
				line-height: 30rpx;
				text-align: center;
				color: #f83c6c;
				float: left;
			}
		}
	}
	.order-footer{
		width: 100%;
		height: 78rpx;
		float: left;
		margin-top: 20rpx;
		.order-footer-bot{
			width: 100%;
			float: left;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $font-size-28;
			color: $text-color;
			.count{
				width: 50%;
				float: left;
				text-align: left;
				font-weight: bold;
			}
			.money{
				width: 50%;
				float: right;
				text-align: right;
				.color{
					color: $color-system;
					font-weight: bold;
				}
			}
		}
	}
	.tui-modal-custom-text{
		min-height: 300rpx;
		margin-bottom: 30rpx;
		.title{
			width: 100%;
			height: auto;
			font-size: $font-size-30;
			text-align: justify;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 30rpx;
		}
		.tui-modal-custom-list{
			width: 100%;
			height: 350rpx;
			overflow: hidden;
			.custom-list{
				width: 100%;
				height: 117rpx;
				box-sizing: border-box;
				float: left;
				padding: 15rpx 0;
				.custom-list-image{
					width: 86rpx;
					height: 86rpx;
					float: left;
					border-radius: 6rpx;
					box-sizing: border-box;
					border: 1px solid #e1e1e1;
					image{
						width: 84rpx;
						height: 84rpx;
						border-radius: 6rpx;
						display: block;
					}
				}
				.custom-list-name{
					width: 400rpx;
					height: 86rpx;
					float: right;
					line-height: 43rpx;
					font-size: $font-size-26;
					color: #666666;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	.tui-modal-button{
		width: 100%;
		height: 72rpx;
		display: flex;
		.modal-button{
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 36rpx;
			box-sizing: border-box;
			&.cancel{
				border: 1px solid #b2b2b2;
				background: #FFFFFF;
				color: #333333;
			}
			&.confirm{
				background: $btn-confirm;
				color: #FFFFFF;
			}
		}
	}
</style>