caimei-applets-crm/pages/relation/ordinary/index.vue

<template>
	<view class="container mine clearfix">
		<view
			class="tui-header-box first"
			:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 6 + 'px' : CustomBar + 6 + 'px' }"
			:class="isCmcustomClass"
		>
			<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>
			</view>
		</view>
		<view class="tui-header-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
			<view class="tui-header-top">
				<view class="title"> 收款信息 </view>
				<view class="tui-header-button">
					<view class="button btn-error" @click.stop="btnConfirm"> 设为非订单款项 </view>
					<view class="button btn-confirm" @click="toNoSms('/pages/collection/list')">
						<text class="iconfont icon-wodedingdan"></text> 收款列表
					</view>
				</view>
			</view>
			<view class="tui-header-item">
				<view class="list-title-t">
					<view class="list-title-tip">
						<text class="badges">{{ paymentInfo.sourceType | formatSourceType }}</text>
					</view>
					<view class="list-title-num" :style="{ color: formatColor(paymentInfo.confirmType) }">{{
						paymentInfo.confirmType | formatStateType
					}}</view>
				</view>
				<view class="list-title-b">
					<view class="list-title-b-item "> 收款金额：￥{{ paymentInfo.receiptAmount | NumFormat }} </view>
					<view class="list-title-b-item "> 收款类型：{{ paymentInfo.payType }} </view>
				</view>
				<view class="list-title-b">收款时间：{{ paymentInfo.receiptDate }}</view>
				<template v-if="paymentInfo.smsContent">
					<view class="list-title-b">收款短信：</view>
					<view class="list-title-b sms">{{ paymentInfo.smsContent }}</view>
				</template>
				<view class="list-icon">无人确认</view>
			</view>
			<view class="tui-header-tabmain">
				<input
					class="input"
					type="text"
					confirm-type="search"
					@confirm="subMitSearch()"
					placeholder="请输入供应商名称"
				/>
				<text class="iconfont icon-sousuo"></text>
			</view>
			<view class="tui-header-tabmain">
				<view
					class="main-item one"
					v-for="(item, index) in listTabs"
					:key="index"
					:class="{ active: currents == index }"
					@click="tabClick(1, index)"
				>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
			<view class="tui-header-tabmain day">
				<view
					class="main-item tab"
					v-for="(item, index) in listReturnType"
					:key="index"
					:class="{ tabActive: tabCurrents == index }"
					@click="tabClick(2, index)"
				>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view
			class="user-section"
			:style="{
				top: isIphoneX ? CustomBar + 330 + 'px' : CustomBar + 315 + 'px',
				left: 0 + 'px',
				paddingBottom: isIphoneX ? '178rpx' : '144rpx'
			}"
		>
			<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="(payment, payIndex) in payList"
							:key="payIndex"
							@click.stop="orderDetail(payment.id)"
						>
							<view class="list-title">
								<view class="list-title-t">
									<view class="list-title-tip">
										<text class="badges">{{ payment.orderType | formatOrderType }}</text>
									</view>
									<view class="list-title-num">{{ payment.confirmType | StateExpFormat }}</view>
								</view>
								<view class="list-title-b">客户名称：{{ payment.userName }}</view>
								<view class="list-title-b">订单编号：{{ payment.number }} ( {{ payment.id }} )</view>
								<view class="list-title-b">下单日期：{{ payment.receiptDate }}</view>
								<view class="list-title-b">
									<view class="list-title-b-item ">
										订单金额：￥{{ payment.receiptAmount | NumFormat }}
									</view>
									<view class="list-title-b-item ">
										余额抵扣：￥{{ payment.receiptAmount | NumFormat }}
									</view>
								</view>
								<view class="list-title-b">经理折扣：￥{{ payment.receiptAmount }}</view>
								<view class="list-title-b">
									<view class="list-title-b-item ">
										应收金额：￥{{ payment.receiptAmount | NumFormat }}
									</view>
									<view class="list-title-b-item ">
										已收金额：￥{{ payment.receiptAmount | NumFormat }}
									</view>
								</view>
								<view class="list-title-b">
									<view class="list-title-b-item ">
										剩余应收：￥{{ payment.receiptAmount | NumFormat }}
									</view>
									<view class="list-title-b-item ">
										待审金额：￥{{ payment.receiptAmount | NumFormat }}
									</view>
								</view>
							</view>
							<view class="list-checked" @click="checkedOrder(payment)">
								<text
									class="iconfont"
									:class="payment.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
								></text>
							</view>
							<view class="list-detail" @click="handelDetail(payment)">
								<text class="iconfont icon-xiayibu"></text>
							</view>
						</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="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
			<view class="button" @click="confirmDistinguish">确认</view>
		</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">{{ queryData.startAddTime }}</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">{{ queryData.endAddTime }}</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="params.remarks" />
					</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>
	</view>
</template>
<script>
import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
import modalLayer from '@/components/modal-layer'
import empty from '@/components/empty'
import wxLogin from '@/services/wxLogin.js'
import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	pageNum: 1, //页数
	pageSize: 10, //条数
	orderNum: '',
	phone: '',
	date: '', //订单提交时间
	classification: '', //订单分类
	merchantId: 0,
	source: '' //订单来源
}
export default {
	components: {
		empty
	},
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isIphoneX: this.$store.state.isIphoneX,
			paymentInfo: {
				id: 6090,
				receiptAmount: 5000, //收款金额
				associateAmount: 5000, //关联金额
				payType: '广发银行-0115', //收款类型
				receiptDate: '2022-02-15 10:58:25', // 收款时间
				reviewDate: '2022-02-15 10:58:25', // 审核时间
				smsContent:
					'【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
				confirmType: 0,
				userName: '采美网络信息有限公司',
				sourceType: 1,
				state: 1
			},
			listTabs: [
				{
					name: '商品订单',
					type: 1
				},
				{
					name: '订金订单',
					type: 2
				},
				{
					name: '小程序订单',
					type: 3
				},
				{
					name: '退款子订单',
					type: 4
				}
			],
			listReturnType: [
				{
					name: '待确认',
					type: 2
				},
				{
					name: '已确认',
					type: 3
				}
			],
			queryData: {
				startAddTime: '',
				endAddTime: ''
			},
			date: currentDate,
			listCount: {
				toBeClosed: 0,
				toBeDelivered: 0,
				toBePaid: 0,
				toBeReceived: 0,
				toBeSuccess: 0
			},
			currents: 0,
			tabCurrents: 0,
			userID: 0,
			openId: '',
			listQuery: Object.assign({}, defaultListQuery),
			payList: [
				{
					id: 6090,
					number: 'W164488903271223',
					receiptAmount: 5000, //收款金额
					associateAmount: 5000, //关联金额
					orderType: 1, //收款类型
					receiptDate: '2022-02-15 10:58:25', // 收款时间
					reviewDate: '2022-02-15 10:58:25', // 审核时间
					smsContent:
						'【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
					confirmType: 11,
					userName: '采美网络信息有限公司',
					sourceType: 1,
					state: 1,
					isChecked: false
				},
				{
					id: 6090,
					number: 'W164488903271223',
					receiptAmount: 5000, //收款金额
					associateAmount: 5000, //关联金额
					orderType: 1, //收款类型
					receiptDate: '2022-02-15 10:58:25', // 收款时间
					reviewDate: '2022-02-15 10:58:25', // 审核时间
					smsContent:
						'【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
					confirmType: 11,
					userName: '采美网络信息有限公司',
					sourceType: 2,
					state: 1,
					isChecked: false
				},
				{
					id: 6092,
					number: 'W164488903271223',
					receiptAmount: 5000, //收款金额
					associateAmount: 5000, //关联金额
					orderType: 2, //收款类型
					receiptDate: '2022-02-15 10:58:25', // 收款时间
					reviewDate: '2022-02-15 10:58:25', // 审核时间
					smsContent:
						'【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
					confirmType: 11,
					userName: '采美网络信息有限公司',
					sourceType: 3,
					state: 2,
					isChecked: false
				},
				{
					id: 6092,
					number: 'W164488903271223',
					receiptAmount: 5000, //收款金额
					associateAmount: 5000, //关联金额
					orderType: 3, //收款类型
					receiptDate: '2022-02-15 10:58:25', // 收款时间
					reviewDate: '2022-02-15 10:58:25', // 审核时间
					smsContent:
						'【中信银行】您尾号0897的中信卡于05月29日14:42，二代支付存入人民币99.00元，当前余额为人民币13871.67元。',
					confirmType: 11,
					userName: '采美网络信息有限公司',
					sourceType: 4,
					state: 2,
					isChecked: false
				}
			],
			btnoRderID: 0, //点击按钮传入的的订单ID
			scrollTop: 0,
			deteleType: '',
			skeletonShow: true,
			isEmpty: false,
			isDelete: false,
			isModalLayer: false,
			loadding: false,
			pullUpOn: true,
			total: 0,
			pullFlag: true,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			contentModalText: '', //操作文字提示语句
			modal: false,
			rightDrawer: false,
			hanldOrder: '', //储存监听订单信息
			OperationType: '', //操作类型
			isCmcustomClass: 'left',
			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
			}
		})
	},
	filters: {
		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
		},
		formatSourceType(value) {
			switch (value) {
				case 1:
					return '订单'
					break
				case 2:
					return '非订单'
					break
				case 3:
					return '返佣'
					break
				case 4:
					return '供应商退款'
					break
			}
		},
		formatStateType(value) {
			switch (value) {
				case 0:
					return '待确认'
					break
				case 1:
					return '已确认'
					break
				case 2:
					return '待审核'
					break
				case 3:
					return '审核通过'
					break
			}
		},
		formatOrderType(value) {
			switch (value) {
				case 1:
					return '自主订单'
					break
				case 2:
					return '协销订单'
					break
				case 3:
					return '客服订单'
					break
			}
		},
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo']),
		startDate() {
			return this.getDate('start')
		},
		endDate() {
			return this.getDate('end')
		}
	},
	methods: {
		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) {
			//开始时间
			console.log('开始时间==>', event.detail.value)
			this.queryData.startAddTime = event.detail.value
		},
		bindEndDateChange(event) {
			//结束时间
			console.log('结束时间==>', event.detail.value)
			this.queryData.endAddTime = event.detail.value
		},
		getOrderDatainit(index) {
			this.listQuery.pageNum = 1
			this.OrderService.OrderList(
				Object.assign(
					{
						status: index
					},
					this.listQuery
				)
			)
				.then(response => {
					let resData = response.data.list
					this.total = response.data.total
					if (resData && resData.length > 0) {
						this.isEmpty = false
						this.orderData = [...resData]
						this.hanldOrderList(this.orderData)
						if (this.total > this.orderData.length) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.orderData.length < 5) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.isEmpty = true
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getOnReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.OrderService.OrderList(
				Object.assign(
					{
						status: index
					},
					this.listQuery
				)
			).then(response => {
				let resData = response.data.list
				this.total = response.data.total
				this.orderData = this.orderData.concat(resData)
				this.hanldOrderList(this.orderData)
				this.pullFlag = false // 防上拉暴滑
				setTimeout(() => {
					this.pullFlag = true
				}, 500)
				if (this.total > this.orderData.length) {
					this.pullUpOn = false
					this.nomoreText = '上拉显示更多'
				} else {
					this.loadding = false
					this.pullUpOn = false
					this.nomoreText = '已至底部'
				}
			})
		},
		change(e) {
			//切换tab传递当前tab[index]执行初始化方法
			this.currentTabs = e.index
			switch (e.index) {
				case 0:
					this.currentTab = -1
					break
				case 1:
					this.currentTab = 0
					break
				case 2:
					this.currentTab = 1
					break
				case 3:
					this.currentTab = 2
					break
				case 4:
					this.currentTab = 3
					break
				case 5:
					this.currentTab = 4
					break
			}
			this.pageNum = 1
			this.orderData = []
			this.pullUpOn = true //切换时隐藏
			this.loadding = false //切换时隐藏
			this.getOrderDatainit(this.currentTab)
		},
		orderDetail(id) {
			//订单详情跳转
			this.isModalLayer = true
			this.$api.navigateTo(`/pages/relation/order/detail?orderId=${id}`)
		},
		handButtonConfirm(data) {
			//获取点击
			console.log('data', data)
			// this.handShowAlert(data)
		},
		handShowAlert(data) {
			console.log('data', data)
			//执行
			switch (data.type) {
				case 'pay':
					this.$api.navigateTo(`/pages/user/order/order-details?path=pay&state=0&orderID=${this.btnoRderID}`)
					break
				case 'delete':
					this.modal = true
					this.contentModalText = '确认删除该订单吗？'
					break
				case 'cancel':
					this.modal = true
					this.contentModalText = '确认关闭该订单吗？'
					break
				case 'refund':
					uni.setStorageSync('refundData', data.order)
					this.$api.navigateTo('/pages/user/order/order-refund')
					break
				case 'returned':
					uni.setStorageSync('refundData', data.order)
					this.$api.navigateTo('/pages/user/order/order-refund')
					break
				case 'query':
					this.isModalLayer = true
					this.$api.navigateTo('/pages/user/order/order-logistics?orderID=' + data.orderId)
					break
				case 'confirm':
					this.modal = true
					this.contentModalText = '是否确认收货？'
					// this.handOrderConfirm(data.orderId);
					break
				case 'cancelRefund':
					this.modal = true
					this.contentModalText = '确定取消退货/退款？'
					// this.handCancelRefundConfirm(data.orderId);
					break
			}
		},
		handleClick(e) {
			//用户操作订单
			let index = e.index
			if (index == 1) {
				switch (this.OperationType) {
					case 'delete': //删除订单
						this.handOrderDetele(this.hanldOrder)
						break
					case 'cancel': //取消订单
						this.modal = true
						this.handCenceConfirm(this.hanldOrder)
						break
					case 'refund': //退款
						this.modal = true
						this.handRefundConfirm(this.hanldOrder)
						break
					case 'returned': //退货
						this.modal = true
						this.handReturnedConfirm(this.hanldOrder)
						break
					case 'confirm': //确认收货
						this.handOrderConfirm(this.hanldOrder)
						break
					case 'cancelRefund': //确认收货
						this.handCancelRefundConfirm(this.hanldOrder)
						break
				}
			}
			this.modal = false
		},
		checkedOrder(payment) {
			// 勾选关联订单
			payment.isChecked = !payment.isChecked
		},
		hideMobel() {
			this.modal = false
		},
		hanldOrderList(list) {
			let state = ''
			for (let i = 0; i < list.length; i++) {
				if (list[i].status == 4) {
					state = list[i].returnApplyStatus
					switch (state) {
						case 0:
							list[i].status = 40
							break
						case 1:
							list[i].status = 41
							break
						case 2:
							list[i].status = 42
							break
						case 3:
							list[i].status = 43
							break
					}
				}
			}
		},
		//订单状态文字和颜色
		orderStateExp(state) {
			let stateText = '',
				stateTextObject = {
					0: '待付款',
					1: '待发货',
					2: '已发货',
					3: '已完成',
					4: '已关闭',
					5: '无效订单'
				}
			Object.keys(stateTextObject).forEach(key => {
				if (key == state) {
					stateText = stateTextObject[key]
				}
			})
			return stateText
		},
		formatColor(state) {
			//设置邀请码状态亚瑟
			let stateColor = '',
				stateColorObject = {
					0: '#f0ad4e',
					1: '#4cd964',
					2: '#dd524d',
					3: '#007aff'
				}
			Object.keys(stateColorObject).forEach(function(key) {
				if (key == state) {
					stateColor = stateColorObject[key]
				}
			})
			return stateColor
		},
		orderPriceToFixed(n) {
			let price = ''
			price = Number(n).toFixed(2)
			return price
		},
		tabClick(type, index) {
			switch (type) {
				case 1:
					this.currents = index
					this.getOrderDatainit(this.currents)
					this.tabCurrents = 0
					break
				case 2:
					this.tabCurrents = index
					this.getOrderDatainit(this.currents)
			}
		},
		bindDateChange: function(e) {
			//选择筛选时间
			console.log(e)
			this.listQuery.date = e.detail.value
			console.log(this.listQuery.date)
		},
		bindPickerChange: function(type, e) {
			//选择筛选条件
			if (type == 1) {
				this.listQuery.classification = this.Array[e.target.value].name
				console.log(this.listQuery.classification)
			} else {
				this.listQuery.source = this.Array1[e.target.value].name
				console.log(this.listQuery.source)
			}
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		if (e.scrollTop > 30) {
			this.isCmcustomClass = 'fiexd'
		} else {
			this.isCmcustomClass = 'left'
		}
	},
	onReachBottom() {
		if (this.total > this.orderData.length) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData(this.currents)
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.listQuery.pageNum = 1
			this.currents = 0
			// this.getOrderDatainit(this.currents)
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShareAppMessage(res) {
		//分享购买优惠券
		const payment = res.target.dataset.payment
		console.log('payment', payment)
		if (res.from === 'button') {
			// console.log('来自页面内转发按钮')
			return {
				title: `【待确认】收款金额${payment.receiptAmount.toFixed(2)}元,收款时间:${payment.receiptDate}`,
				path: `pages/seller/cart/coupon-share?payment=${payment.id}`,
				imageUrl: 'https://static.caimei365.com/app/img/icon/icon-shareCoupon@2x.png'
			}
		}
	},
	onShow() {
		this.$api.getComStorage('userInfo').then(resolve => {
			this.listQuery.merchantId = resolve.id
			// this.getOrderDatainit(this.currents)
		})
	}
}
</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);

	&.fiexd {
	}

	&.first {
	}
}
.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;
	padding: 0 24rpx;
	color: #ffffff;
	.header-sit-text {
		text-align: left;
		font-size: $font-size-40;
		font-weight: 600;
		font-family: '正楷';
	}
	.icon-fanhui {
		font-size: 42rpx;
		margin-right: 10rpx;
	}
}

.tui-header-tabs {
	width: 100%;
	height: auto;
	margin-bottom: 40rpx;
	padding: 20rpx 24rpx;
	background: #ffffff;
	box-sizing: border-box;
	position: fixed;
	z-index: 999;
	box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
	.tui-header-top {
		width: 100%;
		height: 66rpx;
		box-sizing: border-box;
		float: left;
		.title {
			float: left;
			line-height: 66rpx;
			color: #333333;
			text-align: left;
			font-size: $font-size-30;
			font-weight: 600;
		}
		.tui-header-button {
			float: right;
			box-sizing: border-box;
			height: 100%;
			line-height: 66rpx;
			padding: 5rpx 0;
			.button {
				float: left;
				box-sizing: border-box;
				padding: 0 24rpx;
				height: 100%;
				line-height: 56rpx;
				border-radius: 8rpx;
				text-align: center;
				color: #ffffff;
				margin-left: 10rpx;
				&.btn-confirm {
					background: $btn-confirm;
				}
				&.btn-error {
					background: #ff5000;
				}
			}
		}
	}
	.tui-header-item {
		width: 100%;
		height: auto;
		margin-top: 10rpx;
		position: relative;
		float: left;
		.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: 4rpx;
					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: #999999;
			text-align: left;
			.list-title-b-item {
				width: 50%;
				height: 100%;
				float: left;
			}
			&.sms {
				height: 100rpx;
				padding: 10rpx;
				border-radius: 4rpx;
			}
		}
		.list-icon {
			width: 120rpx;
			height: 60rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			text-align: center;
			font-size: 20rpx;
			line-height: 60rpx;
			position: absolute;
			right: 90rpx;
			top: 40rpx;
			color: #dd524d;
			z-index: 99;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			font-family: '正楷';
		}
	}
	.tui-header-tabmain {
		width: 100%;
		height: 70rpx;
		float: left;
		position: relative;
		&.day {
			height: 70rpx;
			box-sizing: border-box;
			padding: 20rpx 0;
			border-top: 1px solid #efefef;
		}
		.main-item {
			float: left;
			text-align: left;
			color: #ffffff;
			box-sizing: border-box;
			&.one {
				width: 25%;
				.text {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					display: block;
					float: left;
					font-size: $font-size-28;
					color: #666666;
					text-align: left;
					font-weight: 600;
					font-family: '正楷';
				}
			}

			&.tab {
				width: 140rpx;
				border-radius: 8rpx;
				background: #f7f7f7;
				margin-right: 15rpx;
				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: #576efa;
					font-size: $font-size-28;
				}
			}

			&.tabActive {
				background: #576efa;
				.text {
					color: #ffffff;
				}
			}
		}
		.input {
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-right: 100rpx;
			background: #f7f7f7;
			border-radius: 8rpx;
		}
		.icon-sousuo {
			width: 100rpx;
			height: 70rpx;
			display: block;
			line-height: 70rpx;
			text-align: center;
			color: $color-system;
			font-size: $font-size-36;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
	.button-content {
		width: 100%;
		height: auto;
		float: left;
		position: relative;
		.btn {
			height: 64rpx;
			padding: 0 20rpx;
			margin: 10rpx 0 0 0;
			line-height: 64rpx;
			font-size: $font-size-26;
			text-align: center;
			border-radius: 6rpx;
			float: right;
		}
		.btn-confirm {
			background-color: #ff5000;
			color: #ffffff;
		}
	}
}

.distinguish-button {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	padding: 0 50rpx;
	padding-top: 20rpx;
	.button {
		width: 100%;
		height: 80rpx;
		background: $btn-confirm;
		border-radius: 40rpx;
		text-align: center;
		color: #ffffff;
		line-height: 80rpx;
		font-size: $font-size-28;
		box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
	}
}

.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: 8rpx;
	position: relative;
	.list-checked {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		.iconfont {
			font-size: 38rpx;
			color: $color-system;
		}
	}
	.list-detail {
		width: 80rpx;
		height: 290rpx;
		line-height: 290rpx;
		text-align: center;
		position: absolute;
		right: 0;
		top: 80rpx;
		.iconfont {
			font-size: $font-size-30;
			color: #999999;
		}
	}
}

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

	.list-title-t {
		width: 100%;
		height: 50rpx;
		float: left;
		font-size: $font-size-24;
		padding-bottom: 10rpx;
		.list-title-tip {
			float: left;
			.badges {
				display: block;
				float: left;
				padding: 0 15rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4rpx;
				background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
				font-size: $font-size-24;
				text-align: center;
				color: #ffffff;
			}
		}
		.list-title-num {
			float: left;
			text-align: left;
			color: #e15616;
			line-height: 40rpx;
			margin-left: 20rpx;
		}
	}
	.list-title-b {
		width: 100%;
		height: 40rpx;
		float: left;
		font-size: $font-size-24;
		line-height: 40rpx;
		color: #999999;
		text-align: left;
		.list-title-b-item {
			width: 50%;
			height: 100%;
			float: left;
		}
		&.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;
			}
		}
	}
}
</style>