caimei-applets-crm/pages/collection/list.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>
				<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)">
					<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)">
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
			<view class="main day" v-if="currents == 2">
				<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: currents == 1 || currents == 3 ? 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="(payment, payIndex) in payList" :key="payIndex"
							@click.stop="paymentDetail(payment)">
							<view class="list-title">
								<view class="list-title-t">
									<view class="list-title-tip">
										<text class="badges">{{ payment.sourceType | formatSourceType }}</text>
									</view>
									<view class="list-title-num" :style="{ color: formatColor(payment.confirmType) }">{{
										payment.confirmType | formatStateType
									}}</view>
								</view>
								<view class="list-title-b">收款金额：￥{{ payment.receiptAmount | NumFormat }}</view>
								<view class="list-title-b" v-if="payment.associateAmount">
									关联金额：￥{{ payment.associateAmount | NumFormat }}</view>
								<view class="list-title-b">收款类型：{{ payment.payType }}</view>
								<view class="list-title-b">收款时间：{{ payment.receiptDate }}</view>
								<view class="list-title-b" v-if="payment.reviewDate">审核时间：{{ payment.reviewDate }}
								</view>
								<view class="list-title-b" v-if="userName">客户名称：{{ payment.userName }}</view>
								<template v-if="payment.smsContent">
									<view class="list-title-b">收款短信：</view>
									<view class="list-title-b sms">{{ payment.smsContent }}</view>
								</template>
							</view>
							<view class="list-icon">{{ payment.state == 1 ? '无人确认' : '无人审核' }}</view>
							<button class="list-shaore" open-type="share" :data-payment="payment">
								<text class="iconfont icon-fenxiang"></text>
							</button>
							<!-- 底部button -->
							<list-button ref="listButton" :status="payment.confirmType" :dataInfo="payment"
								@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>
		<!--右抽屉-->
		<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 listButton from '@/components/cm-module/orderDetails/list-button' //按钮
	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: {
			listButton,
			empty
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				CustomBar: this.CustomBar, // 顶部导航栏高度
				isIphoneX: this.$store.state.isIphoneX,
				Array: [{
					name: '正常订单'
				}, {
					name: '秒杀订单'
				}],
				Array1: [{
					name: '小程序订单'
				}, {
					name: 'APP订单'
				}],
				listTabs: [{
						name: '订单',
						type: 1
					},
					{
						name: '非订单',
						type: 2
					},
					{
						name: '返佣',
						type: 3
					},
					{
						name: '供应商退款',
						type: 4
					}
				],
				listTabsType: [{
						name: '全部',
						type: 1
					},
					{
						name: '待确认',
						type: 2
					},
					{
						name: '待审核',
						type: 3
					},
					{
						name: '审核通过',
						type: 4
					}
				],
				listReturnType: [{
					name: '全部',
					type: 1
				}, {
					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: 6091,
						receiptAmount: 5000, //收款金额
						associateAmount: null, //关联金额
						payType: '广发银行-0115', //收款类型
						receiptDate: '2022-02-15 10:58:25', // 收款时间
						reviewDate: null, // 审核时间
						smsContent: null,
						confirmType: 0,
						userName: null,
						sourceType: 1,
						state: 1
					},
					{
						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: 2,
						state: 1
					},
					{
						id: 6092,
						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: 3,
						state: 2
					},
					{
						id: 6092,
						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: 4,
						state: 2
					}
				],
				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: {
			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
				}
			},
			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)
			},
			paymentDetail(payment) {
				switch(payment.sourceType){
					case 1:// 1:订单
						this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
						break
					case 2:// 2：非订单 
						this.$api.navigateTo(`/pages/relation/ordinary/index?id=${payment.id}`)
						break
					case 3:// 3：返佣 
						this.$api.navigateTo(`/pages/relation/return/index?id=${payment.id}`)
						break
					case 4:// 4：供应商退款
						this.$api.navigateTo(`/pages/relation/refund/index?id=${payment.id}`)
						break
						
				}
				this.isModalLayer = true
				this.$api.navigateTo(`/pages/user/order/order-details?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
			},
			handOrderConfirm(data) {
				//确认收货
				this.OrderService.OrderConfirmReceiveOrder({
						orderId: data.id
					})
					.then(response => {
						this.$util.msg(response.message, 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currentTab)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.message, 2000)
					})
			},
			handOrderDetele(data) {
				//删除订单
				this.OrderService.OrderDeleteOrder({
						ids: data.id
					})
					.then(response => {
						this.$util.msg('删除订单成功', 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currents)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.message, 2000)
					})
			},
			handCenceConfirm(data) {
				//关闭订单
				this.OrderService.OrderCloseOrder({
						ids: data.id
					})
					.then(response => {
						this.$util.msg('关闭订单成功', 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currents)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.message, 2000)
					})
			},
			handRefundConfirm(data) {
				//申请退款
				this.OrderService.OrderCancelUserOrder({
						orderId: data.id
					})
					.then(response => {
						this.$util.msg('取消订单成功', 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currentTab)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.message, 2000)
					})
			},
			handCancelRefundConfirm(data) {
				//取消退款
				this.OrderService.OrderCancellationOrder({
						id: data.id
					})
					.then(response => {
						this.$util.msg('取消退款成功', 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currentTab)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.message, 2000)
					})
			},
			handReturnedConfirm(data) {
				//申请退货
				this.OrderService.OrderCancelUserOrder({
						orderId: data.id
					})
					.then(response => {
						this.$util.msg('取消订单成功', 2000, true, 'success')
						setTimeout(() => {
							this.getOrderDatainit(this.currentTab)
						}, 2000)
					})
					.catch(error => {
						this.$util.msg(error.message, 2000)
					})
			},
			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
			},
			rDrawer() {
				//弹出抽屉
				this.rightDrawer = true
			},
			closeDrawer(e) {
				//关闭抽屉
				this.leftDrawer = false
				this.rightDrawer = false
			},
			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)
				}
			},
			handSearchList() {
				//搜索
				this.getOrderDatainit(this.currents)
				this.leftDrawer = false
				this.rightDrawer = false
			},
			navBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		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 {}
	}

	.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: #576efa;
						font-size: $font-size-28;
					}
				}

				&.tabActive {
					.text {
						color: #576efa;
					}
				}
			}
		}
	}

	.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: 20rpx;
		}

		.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: 8rpx;
		position: relative;

		.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: 40rpx;
			top: 50rpx;
			color: #dd524d;
			z-index: 99;
			transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			font-family: "正楷";
		}

		.list-shaore {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			position: absolute;
			right: 18rpx;
			top: 18rpx;

			.icon-fenxiang {
				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: 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;

			&.sms {
				height: auto;
			}
		}
	}

	.goods-title {
		width: 100%;
		height: 48rpx;
		float: left;
		margin-top: 24rpx;

		.title-logo {
			width: 48rpx;
			height: 48rpx;
			float: left;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.title-text {
			float: left;
			margin-left: 16rpx;
			font-size: $font-size-28;
			color: $text-color;
			text-align: left;
			line-height: 48rpx;
			font-weight: bold;
		}
	}

	.goods-item {
		width: 100%;
		height: auto;
		padding: 24rpx 0;

		.pros-img {
			width: 210rpx;
			height: 210rpx;
			border-radius: 10rpx;
			margin: 0 26rpx 0 0;
			border: 1px solid #f3f3f3;
			float: left;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.pros-product {
		width: 465rpx;
		height: 210rpx;
		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;
		}

		.productprice {
			height: 48rpx;
			position: absolute;
			width: 100%;
			bottom: 0;

			.price {
				line-height: 48rpx;
				font-size: $font-size-28;
				width: 48%;
				color: #ff2a2a;
				float: left;
			}

			.count {
				height: 100%;
				float: right;
				position: relative;

				.small {
					color: #666666;
				}
			}
		}
	}

	.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>