caimei-applets-mcare/pages/search/search-order.vue

<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="listQuery.searchWord"
					/>
					<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="https://static.caimei365.com/app/img/icon/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.image" 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"
													:class="
														pros.svipPriceFlag == 1 ||
														PromotionsFormat(pros.productPromotion)
															? 'none'
															: ''
													"
												>
													<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">
												<template v-if="pros.productPromotion">
													<view
														v-if="PromotionsFormat(pros.productPromotion)"
														class="floor-tags"
														@click.stop="clickPopupShow(pros.productPromotion)"
													>
														{{ 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"
														@click.stop="clickPopupShow(pros.productPromotion)"
														>{{ pros.productPromotion.name }}</view
													>
												</template>
												<template v-if="pros.svipPriceFlag == 1">
													<view class="svip-tags">
														<view class="tags">SVIP</view>
														<view class="price">{{ pros.svipPriceTag }}</view>
													</view>
												</template>
											</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"
										v-if="order.status == 31 || order.status == 32 || order.status == 33"
									>
										已支付：<label style="color:#f94b4b ;"
											>¥{{ order.receiptAmount | NumFormat }}</label
										>
									</view>
									<view class="money tui-skeleton-fillet" v-else>
										待付总额：<label style="color:#f94b4b ;"
											>¥{{ order.pendingPayments | NumFormat }}</label
										>
									</view>
								</view>
							</view>
							<!-- 底部button -->
							<order-button
								ref="orderButton"
								:status="order.status"
								:order="order"
								:onlinePayFlag="order.onlinePayFlag"
								@buttonConfirm="handButtonConfirm"
							>
							</order-button>
						</view>
						<!--加载loadding-->
						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
						<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :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'
const defaultListQuery = {
	pageNum: 1, // 页码
	pageSize: 10, // 每页条数
	userId: 0, // 用户Id
	searchWord: '' // 搜索关键词
}
export default {
	components: {
		orSearch,
		tuiLoadmore,
		tuiNomore,
		orderButton,
		empty,
		shareAlert,
	},
	data() {
		return {
			listQuery: Object.assign({}, defaultListQuery),
			themeClass: 'block',
			isShowClose: false, // 是否显示清空输入框图标
			isSearchHistory: false, // 是都显示搜索历史
			serachRecordList: [],
			isShowWrapper: false,
			isModallayer: false,
			isShowEmpty: false,
			windowHeight: '',
			showSkeleton: true,
			orderList: [],
			btnoRderID: 0, // 点击按钮传入的的订单ID
			scrollTop: 0,
			skeletonShow: true,
			isShareModal: false, // 控制分享弹窗
			isCenceModal: false, // 控制取消订单弹窗
			isShowDelModal: false, // 控制删除订单弹窗
			isModalLayer: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			scrollHeight: '',
			beansType: 1,
			beanNumber: 0,
			isActivityBean: false
		}
	},
	onLoad() {
		this.initGetSerachRecord()
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	methods: {
		subMitSearch() {
			if (this.listQuery.searchWord == '') {
				this.$util.msg('请输入商品关键词', 2000)
			} else {
				this.commodityList = []
				this.getOrderDatainit()
			}
		},
		async initGetSerachRecord() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
			this.OrderService.SearchOrderHistory({ userId: this.listQuery.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.listQuery.searchWord)
		},
		onFocus() {
			//输入框获取焦点时触发
			this.inputEmpty(this.listQuery.searchWord)
			this.initGetSerachRecord()
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.searchWord = ''
			this.isShowClose = false
			this.isShowWrapper = false
			this.inputEmpty(this.listQuery.searchWord)
			this.initGetSerachRecord()
		},
		keywordsClick(item) {
			//关键词搜索与历史搜索
			this.listQuery.searchWord = item
			this.isShowClose = true
			this.subMitSearch()
		},
		confirmDetele() {
			//清空历史记录
			this.$util.modal('提示', '确定删除历史记录？', '确定', '取消', true, () => {
				this.OrderService.ClearOrderHistory({ userId: this.listQuery.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) {
			this.OrderService.SearchOrderInfo(this.listQuery)
				.then(response => {
					this.isShowWrapper = true
					this.showSkeleton = true
					let data = response.data
					if (data && data.list.length > 0) {
						let filrerData = data.list.filter(item => {
							//添加不同状态下订单的表现形式
							item = Object.assign(item, this.StateExpFormat(item.status))
							return item
						})
						this.orderList = []
						filrerData.forEach(item => {
							this.orderList.push(item)
						})
						this.hasNextPage = data
						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() {
			//上拉加载
			this.listQuery.pageNum += 1
			this.OrderService.SearchOrderInfo(this.listQuery)
				.then(response => {
					let data = response.data
					this.hasNextPage = data.hasNextPage
					this.orderList = this.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.showSkeleton = false
				this.getOnReachBottomData()
			}
		},
		detail(orderId) {
			//订单详情跳转
			this.isModalLayer = true
			this.$api.navigateTo(`/pages/user/order/order-details?type=search&orderId=${orderId}`)
		},
		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(orderId) {
			//确认收货
			this.$util.modal('提示', '是否确认收货', '确定', '取消', true, () => {
				this.OrderService.ConfirmReceipt({ orderId: orderId })
					.then(response => {
						this.beansType = 7
						this.beanNumber = 100
						this.isActivityBean = true
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		handOrderConfirmation(orderId) {
			//确认订单
			this.$util.modal('提示', '确认此订单？', '确定', '取消', true, () => {
				this.OrderService.AffirmOrder({ orderId: orderId })
					.then(response => {
						this.$util.msg(response.msg, 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit()
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		handOrderDetele(orderId) {
			//删除订单
			this.$util.modal('提示', '确认删除该订单吗？', '确定', '取消', true, () => {
				this.OrderService.DeleteOrder({ orderId: orderId })
					.then(response => {
						this.$util.msg(response.msg, 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit()
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		handCenceConfirm(orderId) {
			//取消订单
			this.$util.modal('提示', '确认取消该订单吗？', '确定', '取消', true, () => {
				this.OrderService.CancelOrder({ orderId: orderId , userIdentity : 0})
					.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.listQuery.userId}`,
				imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
			}
		},
		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
		},
		handleBeanlClick() {
			//关闭采美豆弹窗
			this.isActivityBean = false
			this.getOrderDatainit()
		}
	},
	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;
	}
	.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;
			&.none {
				text-decoration: line-through;
				color: #999999;
			}
		}
		.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;
	}
}
.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>