caimei-applets-caimei/pages/seller/order/order-historylist.vue

<template>
	<view class="container" :style="{ paddingTop: 82 + 'px' }">
		<view class="order-section-top">
			<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 class="tab-screen">
				<view
					v-for="(item, index) in screenTabBar"
					:key="index"
					class="tab-screen-item"
					:class="[screenTab == index ? 'active' : '']"
					:data-current="index"
					@tap.stop="onClickScreenTab(index)"
					>{{ item.text }}</view
				>
			</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"
					:style="{ height: winHeight + 'px' }"
				>
					<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"
								@click.stop="detail(order)"
							>
								<view class="order-title">
									<view class="order-title-name">
										<text>{{ order.clubName ? order.clubName : '' }}</text>
										<text class="tags" v-if="order.svipUserFlag == 0 && order.userIdentity === 2 ">VIP</text>
										<text class="tags sv" v-if="order.svipUserFlag == 1">SVIP</text>
									</view>
									<view class="order-title-t">
										<view class="order-title-tip tui-skeleton-fillet">
											{{ order.status | statusFilters }}
										</view>
										<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>
										<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 num tui-skeleton-fillet">
											订单编号：{{ order.shopOrderNo }}({{ order.shopOrderId }})
										</view>
									</view>
									<view class="order-title-b">
										<view class="order-title-btxt tui-skeleton-fillet">
											下单时间：{{ order.orderTime }}
										</view>
									</view>
								</view>
								<view class="goods-title">
									<view v-if="order.shopPromotion" class="floor-item-act">
										<view class="floor-tags"> {{ order.shopPromotion.name }} </view>
									</view>
									<view class="title-text tui-skeleton-fillet"> {{ order.shopName }} </view>
								</view>
								<view
									class="goods-item"
									v-for="(pros, prosIndex) in order.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.giftType == 2 || pros.giftType == 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 ? 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>
								<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.itemCount }}件商品</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.obligation | NumFormat }}</label
											>
										</view>
									</view>
								</view>
								<!-- 底部button -->
								<cm-list-button
									v-if="clubSpId === listQuery.serviceProviderId"
									ref="orderButton"
									:order="order"
									:status="order.status"
									:userId="order.userId"
									:shopOrderId="order.shopOrderId"
									:rechargeGoods="order.rechargeGoods"
									:secondHandOrderFlag="order.secondHandOrderFlag"
									@buttonConfirm="handButtonConfirm"
								/>
							</view>
							<!--加载loadding-->
							<tui-loadmore :visible="loadding" :index="3" type="black"/>
							<tui-nomore
								:visible="!pullUpOn"
								:backgroundColor="'#ffffff'"
								:text="nomoreText"
							/>
							<!--加载loadding-->
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 分享弹窗 -->
		<cm-share-popup
			:shopOrderId="handleShopOrderId"
			:shareType="isShareType"
			v-if="isShareModal"
			@shareConfirm="onShareAppMessage"
		/>
		<!-- 再来一单弹窗 -->
		<view class="aganBj" v-show="showAgan">
			<view class="alertAgan">
				<text class="title">{{ promptitle }}</text>
				<view class="goods">
					<view class="list" v-for="(item, index) in failList" :key="index">
						<image class="image-left" :src="item.image"></image>
						<view class="name-right">{{ item.name }}</view>
					</view>
				</view>
				<view class="BtnAll">
					<view class="closebtn btn" @click="showAgan = false">取消</view>
					<view class="cancel btn" @click="handleAddAgian">确定</view>
				</view>
			</view>
		</view>
		<!-- 提示弹窗 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>
		<!-- 透明模态层 -->
		<modal-layer v-if="isModalLayer"></modal-layer>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'		
import headerBack from '@/components/cm-module/headerNavbar/header-back' // 自定义顶部导航
import modalLayer from '@/components/modal-layer'
import empty from '@/components/empty'
import cmListButton from './components/cm-list-button' //操作按钮
import cmSharePopup from './components/cm-share-popup' //分享弹窗
import orderMixins from './mixins/orderMixins.js'

export default {
	mixins: [orderMixins],
	components: {
		headerBack,
		empty,
		modalLayer,
		cmListButton,
		cmSharePopup,
	},
	data() {
		return {
			orderTabBar: [
				{ listType: 0, text: '全部订单', orderList: [] },
				{ listType: 1, text: '待确认', orderList: [] },
				{ listType: 2, text: '待付款', orderList: [] },
				{ listType: 3, text: '待发货', orderList: [] },
				{ listType: 4, text: '已发货', orderList: [] },
				{ listType: 5, text: '退货/款', orderList: [] }
			],
			screenTabBar: [
				{ type: 0, text: '全部订单' },
				{ type: 1, text: '自主订单' },
				{ type: 2, text: '协销订单' }
			],
			winHeight: '', //窗口高度
			currentTab: 0, //预设当前项的值
			screenTab: 0, //筛选预设当前项的值
			scrollLeft: 0, //tab标题的滚动条位置
			clubSpId:0, // 机构协销Id
			listQuery:{
				listType: 0,
				clubId: 0,
				orderSubmitType: 0,
				serviceProviderId: 0,
				pageNum: 1,
				pageSize: 10
			},
			orderData: [],
			scrollTop: 0,
			skeletonShow: true,
			isClickChange: false,
			isShareModal: false, //控制分享弹窗
			isShareType:2,
			isModalLayer: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			showAgan: false,
			failList: [], // 再来一单可购买商品
			promptitle: '',
			authType:0
		}
	},
	onLoad(option) {
		let self = this
		this.currentTab = this.listQuery.listType = option.listType
		this.authType = option.authType
		this.initDataInfo()
		uni.getSystemInfo({
			//  高度自适应
			success: function(res) {
				let calc = res.windowHeight
				self.winHeight = calc - 82
			}
		})
	},
	methods: {
		async initDataInfo() {
			const clubInfo = await this.$api.getComStorage('orderUserInfo')
			const userInfo = await this.$api.getStorage()
			this.listQuery.clubId = clubInfo.clubId
			this.clubSpId = clubInfo.serviceProviderId
			this.listQuery.serviceProviderId = userInfo.serviceProviderId
			this.getOrderDatainit(this.currentTab)
		},
		onChange(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.listQuery.listType = index
			this.checkCor()
			this.pageNum = 1
			this.pullUpOn = true //切换时隐藏
			this.loadding = false //切换时隐藏
			this.nomoreText = ''
			this.getOrderDatainit(this.currentTab, 'tabChange')
		},
		// 点击标题切换当前页时改变样式
		onClickTab(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.listQuery.listType = tabIndex
				this.pullUpOn = true //切换时隐藏
				this.loadding = false //切换时隐藏
				this.getOrderDatainit(this.currentTab)
			}
		},
		onClickScreenTab(index) {
			console.log(index)
			this.screenTab = index
			this.listQuery.orderSubmitType = tabIndex
			this.pullUpOn = true //切换时隐藏
			this.loadding = false //切换时隐藏
			this.nomoreText = ''
			this.getOrderDatainit(this.currentTab)
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor: function() {
			if (this.currentTab > 3) {
				//这里距离按实际计算
				this.scrollLeft = 300
			} else {
				this.scrollLeft = 0
			}
		},
		async getOrderDatainit(index, source) {
			try {
				this.listQuery.pageNum = 1
				let orderItem = this.orderTabBar[index]
				if (source === 'tabChange' && orderItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return
				}
				const res = await this.SellerService.GetSellerClubOrderList(this.listQuery)
				const data = res.data
				if (data.list && data.list.length > 0) {
					orderItem.orderList =[]
					orderItem.orderList = data.list
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					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 = '已至底部'
						}
					}
				} else {
					this.$set(orderItem, 'loaded', true)
					orderItem.orderList = []
				}
				this.skeletonShow = false
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		async getOnReachBottomData(index) {
			//上拉加载
			try {
				this.listQuery.pageNum += 1
				const res = await this.SellerService.GetSellerClubOrderList(this.listQuery)
				const data = res.data
				const orderItem = this.orderTabBar[index]
				orderItem.orderList = orderItem.orderList.concat(data.list)
				this.hasNextPage = data.hasNextPage
				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)
			}
		},
		handButtonConfirm(data) {
			//获取点击
			this.handleShopOrderId = data.shopOrderId
			switch (data.type) {
				case 'cancel': //取消订单
					this.modal = true
					this.contentModalText = '确认取消该订单吗？'
					this.handleModelEven = 1
					break
				case 'delete': //删除订单
					this.modal = true
					this.contentModalText = '确认删除该订单吗？'
					this.handleModelEven = 2
					break
				case 'confirm': // 确认订单
					this.modal = true
					this.contentModalText = '确认此订单吗？'
					this.handleModelEven = 3
					break
				case 'again':
					this.handOrderAgain(data.shopOrderId)
					break
				case 'query':
					this.isModalLayer = true
					this.$api.navigateTo('/pages/user/order/order-logistics?shopOrderId=' + data.shopOrderId)
					break
			}
		},
		scrolltolower() {
			if (this.hasNextPage) {
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData(this.currentTab)
			}
		},
		detail(order) {
			//订单详情跳转
			this.isModalLayer = true
			if(this.authType === '1' || this.authType === '2'){
				this.$api.navigateTo(
					`/pages/seller/order/order-club-details?listType=${this.currentTab}&shopOrderId=${order.shopOrderId}&userId=${
						order.userId
					}`
				)
			}else{
				this.$api.navigateTo(
					`/pages/seller/order/order-details?listType=${this.currentTab}&shopOrderId=${order.shopOrderId}&userId=${
						order.userId
					}`
				)
			}
		},
		handlSearchPath() {
			this.$api.navigateTo('/pages/seller/order/search-order')
		},
		PromotionsFormat(promo) {
			//促销活动类型数据处理
			if (promo != null) {
				if (promo.type == 1 && promo.mode == 1) {
					return true
				} else {
					return false
				}
			}
			return false
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onShow() {
		this.isModalLayer = false
	}
}
</script>

<style lang="scss">
/*tabbar end*/
page {
	background: #ffffff;
}
/*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-screen {
		height: 60rpx;
		width: 702rpx;
		padding: 10rpx 24rpx;
		border-top: 1px solid #f7f7f7;
		border-bottom: 1px solid #f7f7f7;
		display: flex;
		justify-content: center;
		justify-items: center;
		.tab-screen-item {
			flex: 1;
			height: 60rpx;
			border-radius: 10rpx;
			background: #f7f7f7;
			margin-right: 22rpx;
			line-height: 66rpx;
			font-size: $font-size-28;
			color: #333333;
			text-align: center;
			&.active {
				color: $color-system;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
}
.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;
	&.active {
		border-bottom: 6rpx solid $color-system;
	}
	.tab-bar-title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: $font-size-28;
		color: $text-color;
	}
	&.active .tab-bar-title {
		color: $color-system !important;
	}
}
.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: 0 24rpx;
	background: #fff;
	border-bottom: 20rpx solid #f7f7f7;
}
.order-title {
	width: 100%;
	height: auto;
	.order-title-name {
		width: 100%;
		height: 72rpx;
		border-bottom: 1px solid #f7f7f7;
		line-height: 72rpx;
		text-align: left;
		font-size: $font-size-28;
		color: #333333;
		.tags {
			display: inline-block;
			width: 60rpx;
			height: 32rpx;
			border-radius: 16rpx 0;
			background: #f0cb72;
			font-size: $font-size-22;
			color: #4e4539;
			text-align: center;
			line-height: 32rpx;
			margin-left: 10rpx;
			&.sv {
				background: #333333;
				color: #f0cb72;
			}
		}
	}
	.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: 110rpx;
			top: 12rpx;
		}
		.bage{
			display: inline-block;
			width: 72rpx;
			height: 32rpx;
			margin: 19rpx 10rpx 0 10rpx;
			border-radius: 16rpx 0;
			line-height: 32rpx;
			font-size: $font-size-22;
			text-align: center;
			color: #ffffff;
			float: right;
			&.buss{
				background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
			}
			&.auto{
				background: #7fba4f;
				color: #ffffff;
			}
		}
		.order-title-tip {
			float: left;
			font-size: $font-size-28;
			line-height: 68rpx;
			text-align: right;
			color: #ff2a2a;
		}
	}
	.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;
			&.num{
				color: #333333;
			}
		}
		.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 {
	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;
		text-overflow: ellipsis;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.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;
			&.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;
		}
	}
}
.aganBj {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999999;
	.alertAgan {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 580rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.title {
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
			padding: 30rpx;
			display: block;
		}
		.goods {
			padding: 0 30rpx;
			.list {
				padding: 10px 0;
				border-bottom: 1rpx solid #e1e1e1;
				margin: 10rpx 0;
				.image-left {
					width: 86rpx;
					height: 86rpx;
					border: 2rpx solid #e1e1e1;
					border-radius: 6rpx;
					display: inline-block;
					vertical-align: middle;
				}
				.name-right {
					display: inline-block;
					width: 416rpx;
					margin-left: 15rpx;
					font-size: 26rpx;
					color: #666666;
					vertical-align: middle;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-inline-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		.BtnAll {
			margin-top: 30rpx;
			.btn {
				display: inline-block;
				width: 290rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				&.closebtn {
					border-radius: 0px 0px 0px 10px;
					color: #999999;
					background: #efefef;
				}
				&.cancel {
					border-radius: 0px 0px 8px 0px;
					background: $btn-confirm;
					color: #fff;
				}
			}
		}
	}
}
</style>