caimei-applets-caimei/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>
				</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-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, sindex) in order.shopOrderList" :key="sindex">
									<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" v-if="order.secondHandOrderFlag == 1"
											>{{ shop.shopName }}
											<label class="paymenttext" v-if="order.affirmPaymentFlag == 1"
												>已确认打款供应商</label
											>
										</view>
										<view
											class="title-text tui-skeleton-fillet"
											v-else
											@click="goShophome(shop.shopId)"
											>{{ shop.shopName }}<label class="iconfont icon-jinrudianpu"></label
										></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.image" alt="" />
												<text class="tips" v-if="pros.productType == 2 || pros.productType == 1"
													>赠品</text
												>
											</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="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">
													<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"
									@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>
			</swiper-item>
		</swiper>
		<!-- 付款弹窗 -->
		<order-model
			v-if="isPayModel"
			:payModelData="payModelData"
			:modelType="modelType"
			@cancelConfirm="hanldCancelConfirm"
			@paymentConfirm="hanldPaymentConfirm"
		/>
		<!-- 分享弹窗 -->
		<share-alert v-if="isShareModal" :orderId="btnoRderID" @shareConfirm="onShareAppMessage" />
		<!-- 透明模态层 -->
		<modal-layer v-if="isModalLayer"></modal-layer>
		<!-- 采美豆提示弹窗 -->
		<activityBean
			v-if="isActivityBean"
			:show="isActivityBean"
			:beansType="beansType"
			:beanNumber="beanNumber"
			@cancel="handleBeanlClick"
		></activityBean>
	</view>
</template>

<script>
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'
import shareAlert from '@/components/cm-module/modelAlert/shareAlert' //分享弹窗
import orderModel from '@/components/cm-module/modelAlert/order-alert' //付款弹窗
import activityBean from '@/components/cm-module/activity/activityBean.vue'

export default {
	components: {
		headerBack,
		empty,
		btSearch,
		tuiLoadmore,
		tuiNomore,
		orderButton,
		tuiSkeleton,
		modalLayer,
		shareAlert,
		orderModel,
		activityBean
	},
	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: [] },
				{ state: 5, 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,
			isShareModal: false, //控制分享弹窗
			isModalLayer: false,
			isPayModel: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			navbarHeight: '',
			payModelData: {},
			hanldOrderData: {},
			modelType: 0,
			nomoreText: '上拉显示更多',
			isOnloadFlag: false,
			beansType: 1,
			beanNumber: 0,
			isActivityBean: false
		}
	},
	onLoad(e) {
		let self = this
		if (e.type === 'detele') {
			this.isDelete = true
		}
		this.currentTab = e.state
		this.isOnloadFlag = true
		this.getHeaderTopHeight() //设置自定义导航高度
		//  高度自适应
		uni.getSystemInfo({
			success: function(res) {
				let calc = res.windowHeight
				self.winHeight = calc - self.CustomBar
			}
		})
	},
	filters: {
		NumFormat(value) {
			//处理金额
			return Number(value).toFixed(2)
		}
	},
	methods: {
		goShophome(id) {
			this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${id}`)
		},
		// 滚动切换标签样式
		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]
			if (source === 'tabChange' && orderItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return
			}
			setTimeout(() => {
				this.$api.getStorage().then(resolve => {
					this.userId = resolve.userId ? resolve.userId : 0
					let params = { orderState: index, userId: this.userId, pageNum: 1, pageSize: this.pageSize }
					this.OrderService.QueryOrderList(params)
						.then(response => {
							let data = response.data
							let orderList = data.list.filter(item => {
								//添加不同状态下订单的表现形式
								item = Object.assign(item, this.StateExpFormat(item.status))
								return item
							})
							orderItem.orderList = []
							orderList.forEach(item => {
								orderItem.orderList.push(item)
							})
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							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
			let params = { orderState: index, userId: this.userId, pageNum: this.pageNum, pageSize: this.pageSize }
			this.OrderService.QueryOrderList(params)
				.then(response => {
					let data = response.data
					let orderItem = this.orderTabBar[index]
					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(orderId) {
			//订单详情跳转
			this.isModalLayer = true
			this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&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 'pay':
					this.hanldOrderData = data.order
					this.getOrderPaymentValidation(data)
					break
				case 'confirmation':
					this.handOrderConfirmation(data.orderId)
					break
				case 'payment':
					this.hanldConfirmFn(data.orderId)
					break
			}
		},
		getOrderPaymentValidation(data) {
			//监听根据付款状态做操作
			this.OrderService.OrderPaymentValidation({ orderId: data.orderId })
				.then(response => {
					let dataCode = response.data.code
					this.payModelData = response.data
					switch (dataCode) {
						case 1:
							this.isPayModel = true
							this.modelType = 1
							break
						case 2:
							this.isPayModel = true
							this.modelType = 2
							break
						case -1:
							this.$util.modal('', '订单已申请全部退款，无需再付款！', '确定', '', false, () => {})
							break
						default:
							if (response.data.onlinePayFlag == '1') {
								this.$api.navigateTo(
									`/pages/user/order/order-payment?type=onlinePay&Amount=${
										response.data.pendingPayments
									}&orderId=${data.orderId}`
								)
							} else {
								this.$api.navigateTo(
									`/pages/user/order/order-payment?type=payfirm&orderId=${data.orderId}`
								)
							}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hanldPaymentConfirm(data) {
			//余额抵扣跳转
			this.OrderService.OrderBalanceDeduction({ orderId: data.order.orderId })
				.then(response => {
					if (data.type === 2) {
						let _data = { orderId: data.order.orderId }
						this.$api.navigateTo(
							`/pages/user/order/success?type=deduction&data=${JSON.stringify({ data: _data })}`
						)
					} else {
						if (data.order.onlinePayFlag === '1') {
							this.$api.navigateTo(
								`/pages/user/order/order-payment?type=onlinePay&Amount=${
									data.order.pendingPayments
								}&orderId=${data.order.orderId}`
							)
						} else {
							this.$api.navigateTo(
								`/pages/user/order/order-payment?type=payfirm&orderId=${data.order.orderId}`
							)
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hanldCancelConfirm(data) {
			//不使用余额抵扣直接跳转收银台
			if (data.onlinePayFlag == '1') {
				this.$api.navigateTo(
					`/pages/user/order/order-payment?type=onlinePay&Amount=${
						this.hanldOrderData.pendingPayments
					}&orderId=${data.orderId}`
				)
			} else {
				this.$api.navigateTo(`/pages/user/order/order-payment?type=payfirm&orderId=${data.orderId}`)
			}
		},
		hanldConfirmFn(orderId) {
			//确认打款供应商
			this.$util.modal(
				'提示',
				'确定委托采美平台打款给供应商吗？确定之前请务必确保货品完好？',
				'确定',
				'取消',
				true,
				() => {
					this.OrderService.confirmpayment({ orderId: orderId })
						.then(response => {
							this.$util.msg('确认成功', 2000, true, 'success')
							setTimeout(() => {
								this.getOrderDatainit(this.currentTab)
							}, 2000)
						})
						.catch(error => {
							this.$util.msg(error.msg, 2000)
						})
				}
			)
		},
		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(this.currentTab)
						}, 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(this.currentTab)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		handCenceConfirm(orderId) {
			//取消订单
			this.$util.modal('提示', '确认取消该订单吗？', '确定', '取消', true, () => {
				this.OrderService.CancelOrder({ orderId: orderId })
					.then(response => {
						this.$util.msg(response.msg, 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currentTab)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		handlSearchPath() {
			this.$api.navigateTo('/pages/search/search-order')
		},
		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/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
			}
		},
		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 = {
					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(this.currentTab)
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onShow() {
		this.isModalLayer = false
		this.getOrderDatainit(this.currentTab)
	}
}
</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: 80rpx;
	line-height: 80rpx;
	margin: 0 28rpx;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
}
.tab-bar-title {
	height: 80rpx;
	line-height: 80rpx;
	font-size: $font-size-28;
	color: $text-color;
}

.active {
	border-bottom: 6rpx solid $color-system;
}

.active .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;
	.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: $text-color;
			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;
		.iconfont {
			color: #999999;
			font-size: 28rpx;
			margin-left: 10rpx;
		}
		.paymenttext {
			color: #f9a94b;
			font-size: $font-size-22;
			margin-left: 20rpx;
		}
	}
}
.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;
		.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: 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: 30rpx 0;
	}
	.productprice {
		height: 48rpx;
		width: 100%;
		float: left;
		.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;
	}
}
.order-footer {
	width: 100%;
	height: 78rpx;
	float: left;
	margin-top: 20rpx;
	.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;
		color: $text-color;
		.count {
			width: 50%;
			float: left;
			text-align: left;
			font-weight: bold;
		}
		.money {
			width: 50%;
			float: right;
			text-align: right;
		}
	}
}
</style>