caimei-applets-crm/pages/collection/list.vue

<template>
	<view class="container mine clearfix">
		<view class="tui-header-box first"
			:style="{ height: CustomBar + 6 + 'px' }">
			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + 'px' }"></view>
			<view class="header-sit">
				<text class="iconfont icon-fanhui" @click.stop="this.$api.navigateBack(1)"></text>
				<text class="header-sit-text">收款列表</text>
				<text class="iconfont icon-iconfonticonfontsousuo1" @click.stop="rDrawer"></text>
			</view>
		</view>
		<view class="tui-header-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
			<view class="main one">
				<view class="main-item one" v-for="(item, index) in listTabs" :key="index"
					:class="{ active: currents == index }" @click="tabClick(1, index, item.type)">
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
			<view class="main day" v-if="currents == 0">
				<view class="main-item tab" v-for="(item, index) in listTabsType" :key="index"
					:class="{ tabActive: tabCurrents == index }" @click="tabClick(2, index, item.type)">
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
			<view class="main day" v-if="currents == 2 || currents == 3">
				<view class="main-item tab" v-for="(item, index) in listReturnType" :key="index"
					:class="{ tabActive: tabCurrents == index }" @click="tabClick(2, index, item.type)">
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="7"></tui-skeleton>
		<view class="user-section" v-else :style="{
				top: currents == 1 ? CustomBar + 71 + 'px' : CustomBar + 105 + 'px',
				left: 0 + 'px'
			}">
			<view class="header-content">
				<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
					<!-- 空白页 -->
					<empty v-if="isEmpty" :typeIndex="currents" :navbarHeight="navbarHeight"></empty>
					<!-- 列表 -->
					<view v-else class="tui-order-content">
						<view class="tui-order-item" v-for="(receipt, payIndex) in payList" :key="payIndex">
							<view class="list-title" @click.stop="receiptDetail(receipt)">
								<view class="list-title-t">
									<view class="list-title-tip">
										<text class="badges">{{ receipt.receiptType | formatReceiptType }}</text>
									</view>
									<view class="list-title-num" :style="{ color: formatColor(receipt.receiptStatus) }">{{
										receipt.receiptStatusText 
									}}</view>
								</view>
								<view class="list-title-b">
									收款金额：<text class="text">￥{{ receipt.receiptAmount | NumFormat }}</text>
								</view>
								<view class="list-title-b" v-if="receipt.associateAmount">
									关联金额：<text class="text">￥{{ receipt.associateAmount | NumFormat }}</text>
								</view>
								<view class="list-title-b">
									收款类型：<text class="text">{{ receipt.payTypeText }}</text>
								</view>
								<view class="list-title-b">
									收款时间：<text class="text">{{ receipt.receiptDate }}</text>
								</view>
								<view class="list-title-b" v-if="receipt.reviewDate">
									审核时间：<text class="text">{{ receipt.reviewDate }}</text>
								</view>
								<view class="list-title-b" v-if="userName">
									客户名称：<text class="text">{{ receipt.userName }}</text>
								</view>
								<template v-if="receipt.smsContent">
									<view class="list-title-b">收款短信：</view>
									<view class="list-title-b sms">
										<text class="text">{{ receipt.smsContent }}</text>
									</view>
								</template>
							</view>
							<button class="list-shaore" 
									open-type="share" 
									:data-receipt="receipt" 
									v-if="USER_TYPE!=1 && receipt.receiptType !=3 "
								>
								<text class="iconfont icon-fenxiang"></text>
							</button>
							<!-- 底部button -->
							<list-button ref="listButton" :status="receipt.receiptStatus" :dataInfo="receipt" v-if="handlebBtnVisible"
								@buttonConfirm="handButtonConfirm">
							</list-button>
						</view>
						<!--加载loadding-->
						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text="nomoreText"></tui-nomore>
						<!--加载loadding-->
					</view>
				</view>
			</view>
		</view>
		<!-- 口头返佣按钮 -->
		<view class="tui-icon-button" v-if="currents == 2 && returnBtnVisible" @click="toNoSms('/pages/relation/return/list')">
			<text class="iconfont icon-jiahao"></text>
		</view>
		<!--右抽屉-->
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<view class="d-container clearfix" :style="{ paddingTop: CustomBar + 10 + 'px' }">
				<view class="drawer-main">
					<view class="drawer-main-name">日期</view>
					<view class="drawer-main-time">
						<view class="drawer-main-time-input">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindStartDateChange">
								<text class="input-text">{{ listQuery.startDate }}</text>
							</picker>
							<text class="iconfont icon-riqi"></text>
						</view>
						<view class="line">-</view>
						<view class="drawer-main-time-input">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindEndDateChange">
								<text class="input-text">{{ listQuery.endDate }}</text>
							</picker>
							<text class="iconfont icon-riqi"></text>
						</view>
					</view>
					<view class="drawer-main-name">收款短信(全匹配)</view>
					<view class="drawer-main-textarea">
						<textarea class="textarea" placeholder="收款短信内容..." v-model="listQuery.smsContent" />
					</view>
				</view>
				<view class="drawer-input btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="drawer-btn clear" @click="closeDrawer">取消</view>
					<view class="drawer-btn comfrim" @click="handSearchConfirm">确定</view>
				</view>
			</view>
		</tui-drawer>
		<!-- 弹窗 -->
		<tui-modal :show="modal" @click="handleClick" @cancel="hideMobel" :content="contentModalText" color="#333"
			:size="32" shape="circle" :maskClosable="false"></tui-modal>
		<!--设非订单款项弹窗  -->
		<tui-modal :show="modal1" :padding="'40rpx 30rpx'" @cancel="hideMobel1" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">非订单款项</view>
				<view class="tui-prompt-textarea" >
					<textarea
						:class="modal1 ? 'show' : 'none'"
						class="textarea"
						placeholder="请填写说明(必填)"
						v-model="noOrderReason"
					/>
				</view>
				<view class="tui-prompt-flex">
					<view class="btn btn-cancel" @click="hideMobel1">取消</view>
					<view class="btn btn-confirm" @click="handleClick1">确定</view>
				</view>
			</view>
		</tui-modal>	
	</view>
</template>
<script>
	import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
	import listButton from '@/components/cm-module/orderDetails/list-button' //按钮
	import modalLayer from '@/components/modal-layer'
	import empty from '@/components/empty'
	import { 
		defaultAllTabs,
		defaultServiceTabs ,
		listTabsType,
		listReturnType
	} from '@/utils/config.tabs.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	const defaultListQuery = {
			endDate : '',//筛选结束时间
			pageNum:1,	//页码
			pageSize:10,	//每页数量
			receiptStatus:0, //收款状态：0全部 1待确认、2已确认(待审核)、3审核通过、4审核未通过、5收款撤销【线上支付成功为审核通过】
			receiptType:1,	//收款款项类型：1订单款，2非订单款，3返佣款 4订单款或者非订单款（因财务阶段无法区分订单非订单）, 5供应商退款
			smsContent:'',	//收款短信
			startDate:''//筛选开始时间
	}
	export default {
		components: {
			listButton,
			empty
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				CustomBar: this.CustomBar, // 顶部导航栏高度
				isIphoneX: this.$store.state.isIphoneX,
				skeletonShow:true,
				listTabs: [],// 收款款项类型
				listTabsType: listTabsType, //收款状态：
				listReturnType: listReturnType, //收款状态：
				date: currentDate,
				currents: 0,
				tabCurrents: 0,
				listQuery: Object.assign({}, defaultListQuery),
				operateParams:{
					id : 0,
					receiptType: 0,
					delFlag:0,
				},
				payList: [],
				noOrderReason:'',//设置费订单款备注
				scrollTop: 0,
				isEmpty: false,
				loadding: false,
				pullUpOn: true,
				hasNextPage: false,
				pullFlag: true,
				navbarHeight: '',
				nomoreText: '上拉显示更多',
				contentModalText: '', //操作文字提示语句
				modal: false,
				modal1: false,
				rightDrawer: false,
				hanldReceipt: {}, //储存监听收款信息
				handleOperId: 0, //操作类型
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 1
			}
		},
		onLoad() {
			let obj = {}
			uni.getSystemInfo({
				success: res => {
					this.width = obj.left || res.windowWidth
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
					this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		computed: {
			...mapState(['USER_TYPE','handlebBtnVisible','returnBtnVisible']),
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			},
			
		},
		methods: {
			async initGetStotage() {
				if(this.USER_TYPE === 2){
					this.listTabs = defaultServiceTabs
				}else{
					this.listTabs = defaultAllTabs
				}
				this.getOrderDatainit()
			},
			getOrderDatainit() {
				this.initListQuery()
				this.OrderService.orderReceiptList(this.listQuery)
					.then(response => {
						let data = response.data
						if (data.list && data.list.length > 0) {
							this.isEmpty = false
							this.hasNextPage = response.data.hasNextPage
							this.payList = data.list
							this.pullFlag = false
							setTimeout(() => {
								this.pullFlag = true
							}, 500)
							if (this.hasNextPage) {
								this.pullUpOn = false
								this.nomoreText = '上拉显示更多'
							} else {
								if (this.payList.length < 4) {
									this.pullUpOn = true
									this.loadding = false
								} else {
									this.pullUpOn = false
									this.loadding = false
									this.nomoreText = '已至底部'
								}
							}
						} else {
							this.isEmpty = true
						}
						this.skeletonShow = false
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			},
			getOnReachBottomData() {
				//上拉加载
				this.listQuery.pageNum += 1
				this.OrderService.orderReceiptList(this.listQuery).then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.hasNextPage = data.hasNextPage
						this.payList = this.payList.concat(data.list)
						this.pullFlag = false // 防上拉暴滑
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
			},
			receiptDetail(receipt) {
				switch(receipt.receiptType){
					case 1:// 1:订单 1待确认、2已确认(待审核)、3审核通过、4审核未通过、5收款撤销【线上支付成功为审核通过】
						if(receipt.receiptStatus == 1 || receipt.receiptStatus == 4 || receipt.receiptStatus == 5){// 订单待确认
							this.$api.navigateTo(`/pages/relation/ordinary/index?id=${receipt.id}`)
						}else if(receipt.receiptStatus == 2){// 待审核
							this.$api.navigateTo(`/pages/relation/ordinary/examine-detail?id=${receipt.id}`)
						}else if(receipt.receiptStatus == 3){// 审核通过
							this.$api.navigateTo(`/pages/relation/ordinary/detail?id=${receipt.id}`)
						}
						break
					case 2:// 2：非订单 
						this.$api.navigateTo(`/pages/relation/nonorder/detail?id=${receipt.id}`)
						break
					case 3:// 3：返佣 
						if(receipt.receiptStatus == 1 || receipt.receiptStatus == 4 || receipt.receiptStatus == 5){// 返佣待确认
							this.$api.navigateTo(`/pages/relation/return/index?id=${receipt.id}`)
						}else if(receipt.receiptStatus == 2){
							this.$api.navigateTo(`/pages/relation/return/detail?id=${receipt.id}`)
						}
						break
					case 5:// 4：供应商退款
						if(receipt.receiptStatus == 1 || receipt.receiptStatus == 4 || receipt.receiptStatus == 5){// 返佣待确认
							this.$api.navigateTo(`/pages/relation/refund/index?id=${receipt.id}`)
						}else if(receipt.receiptStatus == 2){
							this.$api.navigateTo(`/pages/relation/refund/detail?id=${receipt.id}`)
						}
						break
				}
			},
			handButtonConfirm(data) {
				//获取点击操作
				console.log('data',data)
				this.handShowAlert(data.handleAction,data.receipt)
			},
			handShowAlert(handleAction,receipt) {
				//执行
				switch (handleAction.handleId) {
					case 0: // 作废
						this.contentModalText = '该款项将作废，请重新识别收款短信！'
						this.modal = true
						break
					case 1:// 设为普通款
						this.contentModalText = '确认将该款项设为普通款项？'
						this.modal = true
						break
					case 2:// 设为非订单款
						this.modal1 = true
						break
					case 3:// 设为返佣款
						this.contentModalText = '确认将该款项设为返佣款项？'
						this.modal = true
						break
					case 4:// 设为供应商退款
						this.contentModalText = '确认将该款项设为供应商退款？'
						this.modal = true
						break
				}
				this.hanldReceipt = receipt
				this.handleOperId = handleAction.handleId
			},
			handleClick(e) {
				// 确定操作
				let index = e.index
				if (index == 1) {
					switch (this.handleOperId) {
						case 0: // 作废
							this.handReceiptConfirm(this.handleOperId,this.hanldReceipt)
							break
						case 1: // 设为普通款
							this.handReceiptConfirm(this.handleOperId,this.hanldReceipt)
							break
						case 3: // 设为返佣款
							this.handReceiptConfirm(this.handleOperId,this.hanldReceipt)
							break
						case 4: // 设为供应商退款
							this.handReceiptConfirm(this.handleOperId,this.hanldReceipt)
							break
					}
				}
				this.modal = false
			},
			handleClick1(){
				// 确认设为非订单款项
				console.log('handleOperId',this.handleOperId)
				console.log('hanldReceipt',this.hanldReceipt)
				if(this.noOrderReason == ''){
					this.$util.msg('请输入设为非订单款项说明！', 2000)
					return
				}
				this.modal1 = false
				this.handReceiptConfirm(this.handleOperId,this.hanldReceipt)
			},
			handReceiptConfirm(handleOperId,hanldReceipt) {
				//操作款项
				this.operateParams.id = hanldReceipt.id		
				switch (this.handleOperId) {// 设置接口参数
					case 0: // 作废
						this.operateParams.delFlag = 1
						this.operateParams.receiptType = hanldReceipt.receiptType
						break
					case 1: // 设为普通款
						this.operateParams.receiptType = 1
						break
					case 2: // 设为非订单款
						this.operateParams.receiptType = 2
						this.operateParams.noOrderReason = this.noOrderReason
						break
					case 3: // 设为返佣款
						this.operateParams.receiptType = 3
						break
					case 4: // 设为供应商退款
						this.operateParams.receiptType = 5
						break
				}
				this.OrderService.orderReceiptOperate(this.operateParams)
					.then(response => {
						this.$util.msg(response.msg, 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit()
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			},
			handSearchConfirm(){
				this.getOrderDatainit()
				this.rightDrawer = false
			},
			hideMobel() {
				this.modal = false
			},
			hideMobel1(){
				this.modal1 = false
			},
			formatColor(state) {
				//设置邀请码状态亚瑟
				let stateColor = '',
					stateColorObject = {
						1: '#ff7900',
						2: '#4cd964',
						3: '#19be6b',
						4: '#ed3f14',
						5: '#F74D54'
					}
				Object.keys(stateColorObject).forEach(function(key) {
					if (key == state) {
						stateColor = stateColorObject[key]
					}
				})
				return stateColor
			},
			getDate(type) {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				if (type === 'start') {
					year = year - 1
				} else if (type === 'end') {
					year = year + 1
				}
				month = month > 9 ? month : '0' + month
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			},
			bindStartDateChange(event) {
				//开始时间
				this.listQuery.startDate = event.detail.value
			},
			bindEndDateChange(event) {
				//结束时间
				this.listQuery.endDate = event.detail.value
			},
			rDrawer() {
				//弹出抽屉
				this.rightDrawer = true
			},
			closeDrawer(e) {
				//关闭抽屉
				this.rightDrawer = false
			},
			tabClick(num, index, type) {
				switch (num) {
					case 1:
						this.isEmpty = false
						this.pullUpOn = true
						this.currents = index
						this.listQuery.receiptType = type
						this.listQuery.receiptStatus = 0
						this.listQuery.startDate = ''
						this.listQuery.endDate = ''
						this.listQuery.smsContent = ''
						this.getOrderDatainit()
						this.tabCurrents = 0
						break
					case 2:
						this.isEmpty = false
						this.pullUpOn = true
						this.tabCurrents = index
						this.listQuery.startDate = ''
						this.listQuery.endDate = ''
						this.listQuery.smsContent = ''
						this.listQuery.receiptStatus = type
						this.getOrderDatainit()
				}
			},
			toNoSms(url) {
				this.$api.navigateTo(url)
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			initListQuery(){// 初始化
				this.payList =[]
				this.loadding = true
				this.pullUpOn = true
				this.listQuery.pageNum = 1
			},
			formatReceiptType(value) {
				//订单状态文字和颜色
				var HtmlStateText = '',
					stateTextObject = {
						1: '订单款',
						2: '非订单款',
						3: '返佣款',
						4: '订单款或者非订单款',
						5: '供应商退款'
					}
				Object.keys(stateTextObject).forEach(function(key) {
					if (key == value) {
						HtmlStateText = stateTextObject[key]
					}
				})
				return HtmlStateText
			},
		},
		onPageScroll(e) {
			//实时获取到滚动的值
		},
		onReachBottom() {
			if (this.hasNextPage) {
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData()
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getOrderDatainit()
				uni.stopPullDownRefresh()
			}, 200)
		},
		onShareAppMessage(res) {
			//分享购买优惠券
			const receipt = res.target.dataset.receipt
			const receiptTypeText = this.formatReceiptType(receipt.receiptType)
			if (res.from === 'button') {
				// console.log('来自页面内转发按钮')
				return {
					title: `【${receipt.receiptStatusText}(${receiptTypeText})】收款金额${receipt.receiptAmount.toFixed(2)}元,收款时间:${receipt.receiptDate}`,
					path: `/pages/login/login-share?id=${receipt.id}`,
					imageUrl: 'https://static.caimei365.com/app/crm/image/icon-share@2x.jpg'
				}
			}
		},
		onShow() {
			this.initGetStotage()
		}
	}
</script>

<style lang="scss">
	@import '@/uni.scss';

	page {
		background: #f7f7f7;
	}

	.tui-header-box {
		width: 100%;
		background: #ffffff;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		background-size: cover;
		background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
	}
	.tui-header-tabs {
		width: 100%;
		height: auto;
		margin-bottom: 40rpx;
		padding: 20rpx;
		background: #4688fa;
		box-sizing: border-box;
		position: fixed;
		z-index: 999;
		border-radius: 0 0 10rpx 10rpx;
		&.day {
			background: #ffffff;
			padding: 20rpx 24rpx;
			box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
		}

		.title {
			font-size: $font-size-36;
			line-height: 60rpx;
			color: #fff;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.main {
			width: 100%;
			height: 80rpx;

			&.day {
				height: 70rpx;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-top: 1px solid #efefef;
			}

			&.one {}

			.main-item {
				float: left;
				text-align: center;
				color: #ffffff;
				box-sizing: border-box;

				&.one {
					width: 25%;

					.text {
						width: 100%;
						height: 80rpx;
						line-height: 80rpx;
						display: block;
						float: left;
						font-size: $font-size-28;
						color: #666666;
						text-align: center;
						font-weight: 600;
						font-family: '正楷';
					}
				}

				&.tab {
					width: 140rpx;
					border-radius: 8rpx;
					background: #f7f7f7;
					margin: 0 10rpx;
					padding: 0 20rpx;

					.text {
						width: 100%;
						height: 50rpx;
						line-height: 50rpx;
						display: block;
						float: left;
						font-size: $font-size-24;
						color: #666666;
						text-align: center;
					}
				}

				&.active {
					.text {
						color: $btn-confirm;
						font-size: $font-size-28;
						position: relative;
						&::before{
							content: '';
							width: 60rpx;
							height: 4rpx;
							background: $btn-confirm;
							position: absolute;
							left: 50%;
							bottom: 0;
							margin-left: -30rpx;
						}
					}
				}

				&.tabActive {
					.text {
						color: $btn-confirm;
					}
				}
			}
		}
	}

	.header-top {
		width: 100%;
		font-size: 16px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 0 40rpx;
	}

	.header-sit {
		width: 100%;
		box-sizing: border-box;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		color: #ffffff;

		.header-sit-text {
			text-align: left;
			font-size: $font-size-40;
			font-weight: 600;
			font-family: '正楷';
		}

		.icon-fanhui {
			display: block;
			width: 80rpx;
			height: 80rpx;
			float: left;
			text-align: center;
			line-height: 80rpx;
			font-size: 42rpx;
		}

		.icon-iconfonticonfontsousuo1 {
			font-size: 42rpx;
			margin-left: 30rpx;
		}
	}

	.mine {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.user-section {
		position: absolute;
		width: 100%;
	}

	.header-content {
		width: 100%;
		height: auto;
		position: relative;
		background-color: #f7f7f7;

		.tui-header-btm {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
		}

		.tui-btm-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.tui-btm-num {
			font-size: 32rpx;
			font-weight: 600;
			position: relative;
		}

		.tui-btm-text {
			font-size: 24rpx;
			opacity: 0.85;
			padding-top: 4rpx;
		}
	}

	.uni-badge--small {
		-webkit-transform: scale(0.8);
		-ms-transform: scale(0.8);
		transform: scale(0.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}

	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}

	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}

	.tui-order-list {
		margin-top: 24rpx;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.tui-order-content {
		width: 100%;
		height: auto;
	}

	.tui-order-item {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20rpx 20rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-radius: 10rpx;
		position: relative;
		.list-shaore {
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			background: transparent;
			border-radius: 0;
			border: 0;
			margin: 0;
			.iconfont {
				font-size: 48rpx;
				color: $color-system;
			}
		}
	}

	.list-title {
		width: 100%;
		height: auto;

		.list-title-t {
			width: 100%;
			height: 50rpx;
			float: left;
			font-size: $font-size-28;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;

			.list-title-num {
				float: left;
				text-align: left;
				color: #999999;
				margin-left: 30rpx;
				line-height: 40rpx;
			}

			.list-title-tip {
				float: left;

				.badges {
					display: block;
					float: left;
					padding: 0 15rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 6rpx;
					background: $btn-confirm;
					font-size: $font-size-24;
					text-align: center;
					color: #ffffff;
				}
			}
		}

		.list-title-b {
			width: 100%;
			height: 40rpx;
			float: left;
			font-size: $font-size-24;
			line-height: 40rpx;
			color: #666666;
			text-align: left;
			.text{
				color: #999999;
			}
			&.sms {
				height: auto;
			}
		}
	}
	.d-container {
		width: 580rpx;
		padding: 80rpx 0;

		.drawer-main {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			float: left;

			.drawer-main-name {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: left;
				font-size: $font-size-26;
				color: #333333;
				box-sizing: border-box;
				padding: 0 20rpx;
				font-weight: bold;
			}

			.drawer-main-time {
				width: 100%;
				height: 56rpx;
				box-sizing: border-box;

				.line {
					color: #999999;
					float: left;
					line-height: 56rpx;
				}

				.drawer-main-time-input {
					width: 228rpx;
					height: 56rpx;
					background: #f7f7f7;
					border-radius: 28rpx;
					box-sizing: border-box;
					padding: 0 20rpx;
					line-height: 56rpx;
					float: left;
					margin: 0 20rpx;
					position: relative;
					box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);

					.input-text {
						display: block;
						height: 56rpx;
						font-size: 26rpx;
						color: #666666;
					}

					.icon-riqi {
						color: $color-system;
						display: block;
						width: 40rpx;
						height: 56rpx;
						position: absolute;
						right: 10rpx;
						top: 0;
						line-height: 56rpx;
					}
				}
			}

			.drawer-main-textarea {
				width: 100%;
				height: 160rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				background: #ffffff;
				border-radius: 8rpx;

				.textarea {
					width: 100%;
					height: 100%;
					background: #f7f7f7;
					box-sizing: border-box;
					padding: 20rpx 20rpx;
					font-size: $font-size-24;
					border-radius: 8rpx;
					box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
				}
			}
		}

		.drawer-input {
			width: 100%;
			float: left;
			box-sizing: border-box;
			padding: 24rpx 10rpx 0 10rpx;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 4rpx;
			position: relative;
			background-color: #ffffff;

			&.btn {
				border: none;
				display: flex;
				position: fixed;
				left: 0;
				bottom: 0;
			}

			.drawer-btn {
				width: 210rpx;
				height: 84rpx;
				border-radius: 42rpx;
				background: $btn-confirm;
				line-height: 84rpx;
				text-align: center;
				font-size: $font-size-26;
				color: #ffffff;
				flex: 1;
				margin: 0 10rpx;

				&.comfrim {
					background: $btn-confirm;
				}

				&.clear {
					background: #f7f7f7;
					color: #999999;
				}
			}
		}
	}
	.tui-icon-button{
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50%;
		background: linear-gradient(45deg, #1CBBB4 0%, #0081FF 100%);
		box-shadow: 0 8rpx 8rpx 0 rgba(86, 119, 252, 0.2);
		position: fixed;
		bottom: 120rpx;
		right: 20rpx;
		.icon-jiahao{
			font-size: $font-size-44;
			color: #FFFFFF;
		}
	}
	.tui-prompt-title{
		line-height: 44rpx;
		text-align: center;
	}
	.tui-prompt-textarea{
		width: 100%;
		height: 160rpx;
		box-sizing: border-box;
		background: #f7f7f7;
		border-radius: 8rpx;
		padding:15rpx 20rpx;
		margin-top: 10rpx;
		.textarea {
			width: 100%;
			height: 100%;
			font-size: $font-size-26;
			&.none{
				display: none;
			}
		}
	}
	.tui-prompt-flex{
		width: 100%;
		height: 70rpx;
		display: flex;
		margin-top: 20rpx;
		.btn{
			flex: 1;
			line-height: 70rpx;
			font-size: $font-size-26;
			text-align: center;
			color: #FFFFFF;
			border-radius: 33rpx;
			margin: 0 24rpx;
			&.btn-cancel{
				background: #F7F7F7;
				color: #999999;
			}
			&.btn-confirm{
				background: $color-system;
			}
		}
		
	}
</style>