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-shouye1"
					v-if="isShareType"
					@click.stop="this.$api.navigateLinkJump()"
				></text>
				<text class="iconfont icon-fanhui" v-else @click.stop="this.$api.navigateBack(1)"></text>
				<text class="header-sit-text">关联订单</text>
			</view>
		</view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="7"
		/>
		<view class="container-content" v-else>
			<view class="tui-header-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
				<view v-if="!isShowHeader">
					<view class="tui-header-top">
						<view class="title"> 收款信息 </view>
						<view class="tui-header-button">
							<view
								class="button btn-error"
								@click.stop="showReceiptModel"
								v-if="receiptInfo.shopOrderList.length > 0"
							>
								查看关联信息
							</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">{{ receiptInfo.receiptType | formatReceiptType }}款</text>
							</view>
							<view class="list-title-num" :style="{ color: formatColor(receiptInfo.receiptStatus) }">{{
								receiptInfo.receiptStatus | formatStateType
							}}</view>
						</view>
						<view class="list-title-b">
							<view class="list-title-b-item ">
								收款金额：<text class="text">￥{{ receiptInfo.receiptAmount | NumFormat }} </text>
							</view>
							<view class="list-title-b-item ">
								收款账号：<text class="text">{{ receiptInfo.payTypeText }}</text>
							</view>
						</view>
						<view class="list-title-b">
							收款时间：<text class="text">{{ receiptInfo.receiptDate }}</text>
						</view>
						<view class="list-title-b">收款短信：</view>
						<view class="list-title-b sms">
							<text class="text">{{ receiptInfo.smsContent ? receiptInfo.smsContent : '无' }}</text>
						</view>
						<view class="list-icon" v-if="receiptInfo.tipMsg">
							<image
								class="list-icon-image"
								src="https://static.caimei365.com/app/crm/image/icon-noconfirm@2x.png"
								mode=""
								v-if="receiptInfo.receiptStatus == 1"
							></image>
							<image
								class="list-icon-image"
								src="https://static.caimei365.com/app/crm/image/icon-noaudit@2x.png"
								mode=""
								v-if="receiptInfo.receiptStatus == 2"
							></image>
						</view>
					</view>
				</view>
				<view class="tui-header-tabmain">
					<input
						v-if="currents == 3"
						class="input"
						type="text"
						v-model="refundListQuery.keyword"
						confirm-type="search"
						@confirm="subMitSearch(2)"
						placeholder="搜索关键词(供应商名称)"
					/>
					<input
						v-else
						class="input"
						type="text"
						v-model="listQuery.keyword"
						confirm-type="search"
						@confirm="subMitSearch(1)"
						placeholder="搜索关键词(客户名称/订单ID)"
					/>
					<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="(order, orderIndex) in shopOrderList" :key="orderIndex">
								<template v-if="currents != 3">
									<receipt-details :orderInfo="order" />
									<view
										class="list-checked"
										@click="checkedOrder(order)"
										v-if="order.surplusAmount > 0"
									>
										<text
											class="iconfont"
											:class="order.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
										></text>
									</view>
									<view class="list-detail" @click="orderDetail(order.shopOrderId)">
										<text class="iconfont icon-xiayibu"></text>
									</view>
								</template>
								<template v-if="currents == 3">
									<receipt-refund :orderInfo="order" />
									<view class="list-checked" @click="checkedRefundOrder(order, orderIndex)">
										<text
											class="iconfont"
											:class="order.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
										></text>
									</view>
									<view class="list-detail" @click="orderDetail(order.shopOrderId)">
										<text class="iconfont icon-xiayibu"></text>
									</view>
								</template>
							</view>
							<!--加载loadding-->
							<tui-loadmore :visible="loadding" :index="3" type="black" />
							<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text="nomoreText" />
							<!--加载loadding-->
						</view>
					</view>
				</view>
			</view>
			<view class="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
				<view class="button" @click="confirmDistinguishRefund" v-if="currents == 3">确认关联退款子订单</view>
				<view class="button" @click="confirmDistinguish" v-else>确认</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel(0)"
			:content="contentModalText"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>
		<!-- 关联提示弹窗 -->
		<receipt-modal
			v-if="modal1"
			:show="modal1"
			:amount="receiptInfo.receiptAmount"
			:totalOrder="totalOrder"
			:modelTpye="modelTpye"
			@cancel="hideMobel(1)"
			@click="handleClick1"
		/>
		<!-- 关联信息 -->
		<receipt-orderDetails v-if="modal2" :receipt="receiptInfo" @cancel="hideMobel(2)" />
		<!-- 供应商退款子订单关联弹窗 -->
		<tui-modal :show="modal3" :padding="'40rpx 30rpx'" @cancel="hideMobel(3)" :custom="true" fadeIn>
			<view class="tui-modal-custom">
				<view class="tui-prompt-text"> {{ contentModalText }} </view>
				<view class="tui-prompt-flex"> <view class="btn btn-confirm" @click="hideMobel(3)">知道了</view> </view>
			</view>
		</tui-modal>
	</view>
</template>
<script>
import receiptModal from '@/components/cm-module/receipt/receipt-modal'
import receiptDetails from '@/components/cm-module/receipt/receipt-details'
import receiptRefund from '@/components/cm-module/receipt/receipt-refund'
import receiptOrderDetails from '@/components/cm-module/receipt/receipt-orderDetails'
import empty from '@/components/empty'
import { listOrderTabs, listOrderStateTabs } from '@/utils/config.tabs.js'

import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	id: 0, //收款Id
	keyword: '', // 搜索关键词(客户名称/订单号)
	orderReceiptStatus: '1,2', //订单收款状态：1待收款(协销待确认款项的订单)，2部分收款（已确认款项的订单），3已收款（已确认款项的订单）
	organizeId: 0, // 商品订单 0 定金订单 0 小程序订单 3 退款子订单 4
	pageNum: 1, // 页码
	pageSize: 10, // 条数
	type: 0 // 0商品订单(默认)，1订金订单
}
const defaultRefundListQuery = {
	id: 0, //收款Id
	confirmedType: 0, // 0待确认，2已确认
	keyword: '', //供应商名称
	pageNum: 1, // 页码
	pageSize: 10 // 条数
}
export default {
	components: {
		empty,
		receiptModal,
		receiptDetails,
		receiptRefund,
		receiptOrderDetails
	},
	data() {
		return {
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isIphoneX: this.$store.state.isIphoneX,
			receiptInfo: {},
			listTabs: listOrderTabs,
			listReturnType: listOrderStateTabs,
			listQuery: Object.assign({}, defaultListQuery),
			refundListQuery: Object.assign({}, defaultRefundListQuery),
			currents: 0,
			tabCurrents: 0,
			shopOrderList: [],
			scrollTop: 0,
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			contentModalText: '', //操作文字提示语句
			modal: false,
			modal1: false,
			modal2: false,
			modal3: false,
			hanldOrder: '', //储存监听订单信息
			OperationType: '', //操作类型
			isCmcustomClass: 'left',
			isShowHeader: false,
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1,
			checkedOrderList: [],
			checkedIds: [],
			checkedRefundIndex: '',
			confirmParams: {
				confirmType: 4,
				id: 0,
				orderIds: ''
			},
			confirmRefundParams: {
				shopOrderId: 0,
				id: 0
			},
			skeletonShow: true,
			modelTpye: 1, // 收款弹窗类型
			totalOrder: {
				orderNums: 1,
				payTotalFee: 0, // 订单金额
				balancePayFee: 0, // 余额抵扣
				payableAmount: 0, // 应收金额
				paidAmount: 0, //  已收金额
				surplusAmount: 0 // 剩余应收
			}, // 统计都选相同的订单数据
			isShareType: false
		}
	},
	onLoad(option) {
		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
			}
		})
		if (option.type == 'share') {
			this.isShareType = true
		}
		this.listQuery.id = this.confirmParams.id = this.confirmRefundParams.id = option.id
		this.getOrderReceiptDetail(this.listQuery.id)
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		getOrderReceiptDetail(id) {
			// 收款详情
			this.OrderService.orderReceiptDetail({ id: id })
				.then(response => {
					this.receiptInfo = response.data
					this.getOrderReceiptOrders()
				})
				.catch(err => {
					this.$api.navigateTo('/pages/login/login-error')
				})
		},
		getOrderReceiptOrders() {
			// 收款详情-订单列表
			this.initListQuery()
			this.OrderService.orderReceiptOrders(this.listQuery)
				.then(response => {
					let data = response.data
					this.hasNextPage = response.data.hasNextPage
					if (data.list && data.list.length > 0) {
						this.isEmpty = false
						this.shopOrderList = data.list.map((el, index) => {
							el.isChecked = false
							return el
						})
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.shopOrderList.length < 3) {
								this.pullUpOn = true
								this.loadding = false
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.isEmpty = true
					}
					this.skeletonShow = false
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		orderReceiptRefundOrders() {
			// 收款详情-退款子订单列表
			this.OrderService.orderReceiptRefundOrders(this.refundListQuery)
				.then(response => {
					let data = response.data
					this.hasNextPage = response.data.hasNextPage
					if (data.list && data.list.length > 0) {
						this.isEmpty = false
						this.shopOrderList = data.list.map((el, index) => {
							el.isChecked = false
							return el
						})
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.shopOrderList.length < 3) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.isEmpty = true
					}
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		orderReceiptRefundOrdersBottom() {
			this.refundListQuery.pageNum += 1
			this.OrderService.orderReceiptRefundOrders(this.refundListQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.hasNextPage = data.hasNextPage
						let list = data.list.map((el, index) => {
							el.isChecked = false
							return el
						})
						this.shopOrderList = this.shopOrderList.concat(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(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		orderReceiptOrdersBottom() {
			this.listQuery.pageNum += 1
			this.OrderService.orderReceiptOrders(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.hasNextPage = data.hasNextPage
						let list = data.list.map((el, index) => {
							el.isChecked = false
							return el
						})
						this.shopOrderList = this.shopOrderList.concat(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(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		subMitSearch(type) {
			// 确认搜索
			switch (type) {
				case 1: // 订单
					this.getOrderReceiptOrders()
					break
				case 2: // 订单
					this.refundListQuery.pageNum = 1
					this.orderReceiptRefundOrders()
					break
			}
		},
		getOnReachBottomData() {
			//上拉加载
			if (this.currents == 3) {
				this.orderReceiptRefundOrdersBottom()
			} else {
				this.orderReceiptOrdersBottom()
			}
		},
		orderDetail(shopOrderId) {
			//订单详情跳转
			this.$api.navigateTo(`/pages/relation/order/detail?shopOrderId=${shopOrderId}`)
		},
		handleClick(e) {
			//用户操作订单
			let index = e.index
			if (index == 1) {
			}
			this.modal = false
		},
		confirmDistinguish() {
			// 点击确认
			const list = []
			this.checkedOrderList.forEach(el => {
				if (list.indexOf(el.userId) == -1) {
					list.push(el.userId)
				}
			})
			if (this.checkedOrderList.length == 0) {
				this.$util.msg('请选择订单!', 2000)
				return
			}
			// if (this.currents === 1) {
			// 	// 订金订单每次只能关联一个订单
			// 	if (this.checkedOrderList.length > 1) {
			// 		this.$util.msg('订金订单每次只能关联一个订单!', 2000)
			// 		return
			// 	}
			// }
			if (list.length > 1) {
				this.$util.msg('请选择相同机构的订单!', 2000)
				return
			}
			let totalAmount = 0 //订单金额
			let accountAmount = 0 //余额抵扣
			let realPay = 0 //应收金额
			let receiptAmount = 0 //已收金额
			let surplusAmount = 0 //剩余应收
			console.log('1111111',this.checkedOrderList)
			this.checkedOrderList.forEach(el => {
				totalAmount += el.totalAmount
				accountAmount += el.accountAmount
				realPay += el.realPay
				receiptAmount += el.receiptAmount
				surplusAmount += el.surplusAmount
				this.checkedIds.push(el.shopOrderId)
			})
			console.log('checkedIds',this.checkedIds)
			// 赋值
			this.totalOrder.totalAmount = Number(totalAmount.toFixed(2))
			this.totalOrder.surplusAmount = Number(surplusAmount.toFixed(2))
			this.totalOrder.accountAmount = Number(accountAmount.toFixed(2))
			this.totalOrder.realPay = Number(realPay.toFixed(2))
			this.totalOrder.receiptAmount = Number(receiptAmount.toFixed(2))
			this.totalOrder.orderNums = this.checkedOrderList.length
			// if (this.currents === 1) {
			// 	// 收款金额必须等于订金订单金额才能关联
			// 	if (this.receiptInfo.receiptAmount != this.totalOrder.payTotalFee) {
			// 		this.$util.msg('收款金额必须等于订金订单金额才能关联!', 2000)
			// 		return
			// 	}
			// }
			console.log('totalOrder', this.totalOrder)
			//处理收款状态的几种类型
			if (
				this.receiptInfo.receiptAmount == this.totalOrder.surplusAmount ||
				this.totalOrder.surplusAmount - this.receiptInfo.receiptAmount >= 10
			) {
				//收款金额等于订单应收金额 或者是 订单应收总金额减去收款金额大于等于10
				this.modelTpye = 1
				console.log(
					'收款金额等于订单剩余应收金额 或者是 收款金额减去订单剩余应收金额大于等于10',
					this.modelTpye
				)
			} else if (this.receiptInfo.receiptAmount > this.totalOrder.surplusAmount) {
				//收款金额大于订单神域应收金额(可退款到余额)
				this.modelTpye = 2
				console.log('收款金额大于订单应收金额(可退款到余额)', this.modelTpye)
			} else if (this.totalOrder.surplusAmount - this.receiptInfo.receiptAmount <= 10) {
				//订单剩余应收总金额减去收款金额小于等于10元时，才能抹平确认
				this.modelTpye = 3
				console.log('订单剩余应收总金额减去收款金额小于等于10元时，才能抹平确认)', this.modelTpye)
			}
			this.modal1 = true
		},
		confirmDistinguishRefund() {
			//确认关联供应商退款子订单
			if (this.confirmRefundParams.shopOrderId == 0) {
				this.$util.msg('请选择订单!', 2000)
				return
			}
			this.orderReceiptConfirmRefund(this.confirmRefundParams)
		},
		handleClick1(data) {
			switch (data) {
				case 1: // 小额抹平确认
					this.confirmParams.confirmType = data
					this.confirmParams.orderIds = this.checkedIds.join(',')
					this.orderReceiptConfirm()
					this.modal1 = false
					break
				case 3: // 大额退款余额
					this.confirmParams.confirmType = data
					this.confirmParams.orderIds = this.checkedIds.join(',')
					this.orderReceiptConfirm()
					this.modal1 = false
					break
				case 4: // 确认关联
					this.confirmParams.confirmType = data
					this.confirmParams.orderIds = this.checkedIds.join(',')
					this.orderReceiptConfirm()
					this.modal1 = false
					break
			}
		},
		orderReceiptConfirmRefund(params) {
			//确认关联退款子订单
			this.OrderService.orderReceiptConfirmRefund(params)
				.then(response => {
					this.$util.msg('关联成功~', 2000, true, 'success')
					setTimeout(() => {
						this.$api.redirectTo(`/pages/relation/refund/detail?id=${this.confirmRefundParams.id}`)
					}, 2000)
				})
				.catch(err => {
					this.modal3 = true
					this.contentModalText = err.msg
				})
		},
		orderReceiptConfirm() {
			//确认关联订单或抹平或退款余额
			this.OrderService.orderReceiptConfirm(this.confirmParams)
				.then(response => {
					this.$api.redirectTo(`/pages/relation/ordinary/examine-detail?id=${this.confirmParams.id}`)
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		checkedOrder(order) {
			// 勾选关联订单
			order.isChecked = !order.isChecked
			if (order.isChecked) {
				if(!this.contains(this.checkedOrderList,order.shopOrderId)){
					this.checkedOrderList.push(order)
				}
			} else {
				this.checkedOrderList.splice(this.checkedOrderList.indexOf(order), 1)
			}
		},
		contains(arr, val) {// 校验
			return arr.some(item => item.shopOrderId === val)
		},
		checkedRefundOrder(order, index) {
			// 勾选退款子订单
			this.checkedOrderList = []
			this.checkedRefundIndex = index
			this.shopOrderList.forEach((el, index) => {
				if (this.checkedRefundIndex == index) {
					el.isChecked = true
					this.confirmRefundParams.shopOrderId = el.shopOrderId
				} else {
					el.isChecked = false
				}
			})
		},
		hideMobel(type) {
			switch (type) {
				case 0:
					this.modal = false
					break
				case 1:
					this.modal1 = false
					break
				case 2:
					this.modal2 = false
					break
				case 3:
					this.modal3 = false
					break
			}
		},
		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
		},
		tabClick(type, index) {
			this.pullUpOn = true //切换时隐藏
			this.loadding = false //切换时隐藏
			switch (type) {
				case 1: // 切换订单类型
					this.currents = index
					this.tabCurrents = 0
					this.listQuery.orderReceiptStatus = '1,2'
					switch (this.currents) {
						case 0: // 商品订单
							this.listQuery.type = 0
							this.listQuery.organizeId = 0
							this.getOrderReceiptOrders()
							break
						// case 1: // 定金订单
						// 	this.listQuery.type = 1
						// 	this.listQuery.organizeId = 0
						// 	this.getOrderReceiptOrders()
						// 	break
						case 1: // 集团
							this.listQuery.type = 0
							this.listQuery.organizeId = 3
							this.getOrderReceiptOrders()
							break
						// case 2: // 供应商退款 （暂时停用,后续可视情况废除）
						// 	this.listQuery.type = 0
						// 	this.refundListQuery.pageNum = 1
						// 	this.orderReceiptRefundOrders()
						// 	break
					}
					break
				case 2: // 切换收款状态
					this.tabCurrents = index
					if (this.currents == 3) {
						if (this.tabCurrents == 0) {
							this.refundListQuery.confirmedType = 0
						} else {
							this.refundListQuery.confirmedType = 2
						}
						this.refundListQuery.pageNum = 1
						this.orderReceiptRefundOrders()
					} else {
						if (this.tabCurrents == 0) {
							this.listQuery.orderReceiptStatus = '1,2'
						} else {
							this.listQuery.orderReceiptStatus = '3'
						}
						this.getOrderReceiptOrders()
					}
			}
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		},
		showReceiptModel() {
			//
			this.modal2 = true
		},
		initListQuery() {
			// 初始化
			this.loadding = true
			this.pullUpOn = true
			this.shopOrderList = []
			this.checkedOrderList = []
			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) {
		//实时获取到滚动的值
		if (e.scrollTop > 30) {
			this.isCmcustomClass = 'fiexd'
		} else {
			this.isCmcustomClass = 'left'
		}
		if (e.scrollTop > 180) {
			this.isShowHeader = true
		} else {
			this.isShowHeader = false
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getOrderReceiptOrders()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShareAppMessage(res) {
		//分享购买优惠券
		const receipt = this.receiptInfo
		const receiptTypeText = this.formatReceiptType(receipt.receiptType)
		if (res.from === 'button') {
			// console.log('来自页面内转发按钮')
		}
		return {
			title: `￥${receipt.receiptAmount.toFixed(2)} | ${receipt.receiptDate}  |  ${
				receipt.receiptStatusText
			}(${receiptTypeText})`,
			path: `/pages/login/login-share?id=${receipt.id}`,
			imageUrl: 'https://static.caimei365.com/app/crm/image/icon-share@2x.jpg'
		}
	},
	onShow() {}
}
</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;
	color: #ffffff;
	.header-sit-text {
		text-align: left;
		font-size: $font-size-40;
		font-weight: 600;
		font-family: '正楷';
	}
	.iconfont {
		display: block;
		width: 80rpx;
		height: 80rpx;
		float: left;
		text-align: center;
		line-height: 80rpx;
		font-size: 42rpx;
	}
}

.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;
			.button {
				float: left;
				box-sizing: border-box;
				padding: 0 24rpx;
				height: 100%;
				line-height: 66rpx;
				border-radius: 35rpx;
				text-align: center;
				color: #ffffff;
				margin-left: 10rpx;
				&.btn-confirm {
					background: $color-system;
				}
				&.btn-error {
					background: #fdf6ec;
					color: #e6a23c;
					font-size: $font-size-24;
				}
			}
		}
	}
	.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;
				font-size: $font-size-24;
			}
			.list-title-tip {
				float: left;

				.badges {
					display: block;
					float: left;
					padding: 0 15rpx;
					height: 36rpx;
					line-height: 36rpx;
					border-radius: 18rpx;
					background: #ecf5ff;
					font-size: $font-size-22;
					text-align: center;
					color: #409eff;
				}
			}
		}

		.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;
			}
			.list-title-b-item {
				width: 50%;
				height: 100%;
				float: left;
			}
			&.sms {
				height: 100rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				.text {
					height: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
		.list-icon {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
			position: absolute;
			right: 0;
			top: 0;
			color: #dd524d;
			z-index: 99;
			.list-icon-image {
				width: 120rpx;
				height: 120rpx;
				display: block;
			}
		}
	}
	.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: 30rpx;
				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: $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: -60rpx;
					}
				}
			}

			&.tabActive {
				background: $btn-confirm;
				.text {
					color: #ffffff;
				}
			}
		}
		.input {
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-left: 70rpx;
			background: #f7f7f7;
			border-radius: 35rpx;
			font-size: $font-size-26;
		}
		.icon-sousuo {
			width: 80rpx;
			height: 70rpx;
			display: block;
			line-height: 70rpx;
			text-align: center;
			color: #999999;
			font-size: $font-size-38;
			position: absolute;
			left: 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;
	z-index: 1000;
	.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-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: 70rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: absolute;
		right: 0;
		bottom: 0;
		.iconfont {
			font-size: $font-size-32;
			color: #999999;
		}
	}
}
.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;
		}
	}
}
.tui-prompt-text {
	line-height: 44rpx;
	font-size: $font-size-26;
	color: #333333;
	.text {
		color: $color-system;
	}
}
</style>