caimei-applets-crm/pages/relation/service/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>
			</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 class="tui-header-tabmain">
					<input
						class="input"
						type="text"
						confirm-type="search"
						@confirm="subMitSearch()"
						placeholder="请输入供应商名称/子订单ID"
					/>
					<text class="iconfont icon-sousuo"></text>
				</view>
			</view>
			<view
				class="user-section"
				:style="{
					top: isIphoneX ? CustomBar + 66 + 'px' : CustomBar + 56 + '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, index) in orderList" :key="index">
								<view class="list-title" @click.stop="orderDetail(order.shopOrderId)">
									<view class="list-title-t">
										<view class="list-title-tip">
											<text
												class="badges"
												:class="{
													success: order.orderType === 1,
													warning: order.orderType === 0
												}"
												>{{ order.orderType | formatOrderType }}</text
											>
											<text class="badgesb" v-if="order.secondHandOrderFlag == 1">二手</text>
										</view>
										<view class="list-title-tag">
											<text class="badges">{{ order.organizeId | organizeName }}</text>
										</view>
										<view class="list-title-num">{{
											order.status | stateExpFormat
										}}</view>
									</view>
									<view class="list-title-a">
										<view class="list-title-a-text">
											子订单编号：<text class="text"
												>{{ order.shopOrderNo }} ( {{ order.shopOrderId }} )</text
											>
										</view>
										<view class="list-title-a-text">
											下单日期：<text class="text">{{ order.orderTime }}</text>
										</view>
										<view class="list-title-a-text">
											供应商名称：<text class="text">{{ order.shopName }}</text>
										</view>
									</view>
									<view class="list-title-b">
										客户名称：<text class="text">{{
											order.userName ? order.userName : '无'
										}}</text>
									</view>
									<view class="list-title-b">
										子订单金额：<text class="text"
											>￥{{ order.needPayAmount | NumFormat }}</text
										>
									</view>
									<view class="list-title-b">
										应收金额：<text class="text"
											>￥{{ order.needPayAmount | NumFormat }}</text
										>
									</view>
									<view class="list-title-b">
										已收金额：<text class="text"
											>￥{{ order.receiptAmount | NumFormat }}</text
										>
									</view>
									<view class="list-title-b">
										平台服务费：<text class="text"> ￥{{
											order.cmCostPrice | NumFormat
										}}</text>
									</view>
								</view>
								<view class="list-checked" @click="checkedOrder(order, index)">
									<text
										class="iconfont"
										:class="order.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
									></text>
								</view>
								<view class="list-detail" @click.stop="orderDetail(order.shopOrderId)">
									<text class="iconfont icon-xiayibu"></text>
								</view>
							</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="confirmDistinguish">录入平台服务费欠款</view>
			</view>
		</view>
		<!--弹窗  -->
		<tui-modal :show="modal" :padding="'40rpx 30rpx'" @cancel="hideMobel(0)" :custom="true" fadeIn>
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">平台服务费欠款</view>
				<view class="tui-prompt-input">
					<text class="text">￥</text>
					<input
						class="input"
						:class="modal ? 'show' : 'none'"
						type="text"
						placeholder="请输入子订单的平台服务费欠款金额(必填)"
						@blur="changeNumber($event)"
						v-model="confirmParams.verbalAmount"
					/>
				</view>
				<view class="tui-prompt-text">
					欠款确认后，供应商对平台的欠款将转移给采美自营供应商，自营供应商可在以后对该供应商的付款中进行欠款抵扣。
				</view>
				<view class="tui-prompt-flex">
					<view class="btn btn-cancel" @click="hideMobel(0)">取消</view>
					<view class="btn btn-confirm" @click="handleClick">确定</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>
<script>
import empty from '@/components/empty'
import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	pageNum: 1, //页数
	pageSize: 10, //条数
	id: 0,
	shopName: ''
}
export default {
	components: {
		empty
	},
	data() {
		return {
			CustomBar: this.CustomBar, // 顶部导航栏高度
			isIphoneX: this.$store.state.isIphoneX,
			skeletonShow: true,
			listQuery: Object.assign({}, defaultListQuery),
			orderList: [],
			checkedOrderList: [],
			checkedIndex: '',
			scrollTop: 0,
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			hasNextPage: false,
			pullFlag: true,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			contentModalText: '', //操作文字提示语句
			modal: false,
			cmCostPrice: 0,
			confirmParams: {
				shopOrderId: 0,
				verbalAmount: '',
				rebateRemarks: ''
			},
			rightDrawer: false,
			hanldReceipt: {}, //储存监听收款信息
			handleOperId: 0, //操作类型
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1
		}
	},
	onLoad() {
		let obj = {}
		uni.getSystemInfo({
			success: res => {
				this.width = obj.left || res.windowWidth
				this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
				this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
				this.scrollH = res.windowWidth * 0.6
			}
		})
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		getOrderReceiptRebateOrders() {
			// 收款详情-订单列表
			this.initListQuery()
			this.OrderService.orderReceiptPlatformOrders(this.listQuery)
				.then(response => {
					let data = response.data
					this.hasNextPage = response.data.hasNextPage
					if (data.list && data.list.length > 0) {
						this.isEmpty = false
						this.orderList = 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.orderList.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)
				})
		},
		getOnReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.OrderService.orderReceiptPlatformOrders(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.orderList = this.orderList.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(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		subMitSearch() {
			// 确认搜索
			this.getOrderReceiptRebateOrders()
		},
		confirmDistinguish() {
			// 点击确认 
			const list = []
			this.checkedOrderList.forEach(el => {
				if (list.indexOf(el.userId) == -1) {
					list.push(el.userId)
				}
			})
			if (this.confirmParams.shopOrderId == 0) {
				this.$util.msg('请选择一个订单!', 2000)
				return
			}
			this.confirmParams.verbalAmount = ''
			this.modal = true
		},
		checkedOrder(order, index) {
			// 勾选关联订单
			this.checkedIndex = index
			this.orderList.forEach((el, index) => {
				if (this.checkedIndex == index) {
					el.isChecked = true
					this.confirmParams.shopOrderId = el.shopOrderId
					this.cmCostPrice = el.cmCostPrice
				} else {
					el.isChecked = false
				}
			})
			console.log('shopOrderId', this.confirmParams.shopOrderId)
			console.log('cmCostPrice', this.cmCostPrice)
		},
		handleClick() {
			//用户操作订单
			// 子订单的平台服务费欠款金为空时
			if (this.confirmParams.verbalAmount == 0) {
				this.$util.msg('请输入子订单的平台服务费欠款金额!', 2000)
				return
			}
			// 录入金额与子订单平台服务费金额不一致时
			if (this.confirmParams.verbalAmount != this.cmCostPrice) {
				this.modal = false
				this.$util.msg('录入金额需与平台服务费金额不一致!', 2000)
				return
			}
			this.orderReceiptConfirm(this.confirmParams)
		},
		async orderReceiptConfirm(params) {
			//确认关联平台服务费欠款
			try {
				const res = await this.OrderService.orderReceiptConfirmBill(params)
				this.modal = false
				this.$util.msg('关联成功~', 2000, true, 'success')
				setTimeout(() => {
					this.$api.navigateTo(`/pages/relation/service/detail?id=${res.data}`)
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		hideMobel(type) {
			switch (type) {
				case 0:
					this.modal = false
					break
				case 1:
					this.modal1 = false
					break
			}
		},
		orderDetail(shopOrderId) {
			//订单详情跳转
			this.$api.navigateTo(`/pages/relation/order/detail?shopOrderId=${shopOrderId}`)
		},
		changeNumber(e) {
			// 校验输入为数字
			this.confirmParams.receiptAmount = this.toFixedFn(e.detail.value)
			console.log('receiptAmount', this.confirmParams.receiptAmount)
		},
		toFixedFn(val) {
			//处理小数点后两位数
			return Number(Math.round(val * 100) / 100).toFixed(2)
		},
		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
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		},
		initListQuery() {
			// 初始化
			this.orderList = []
			this.loadding = true
			this.pullUpOn = true
			this.listQuery.pageNum = 1
		}
	},
	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.getOrderReceiptRebateOrders()
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {
		this.getOrderReceiptRebateOrders()
	}
}
</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: '正楷';
	}
	.icon-fanhui {
		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-tabmain {
		width: 100%;
		height: 70rpx;
		float: left;
		position: relative;
		.input {
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			padding-left: 70rpx;
			background: #f7f7f7;
			border-radius: 8rpx;
			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;
	.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-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;
		}
	}
}

.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: 36rpx;
				line-height: 36rpx;
				border-radius: 20rpx;
				font-size: $font-size-22;
				background-color: #f0f9eb;
				color: #67c23a;
				text-align: center;
				&.success {
					background-color: #ecf5ff;
					color: #409eff;
				}
				&.warning {
					background-color: #fdf6ec;
					color: #e6a23c;
				}
			}
			.badgesb {
				display: block;
				float: left;
				padding: 0 15rpx;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 20rpx;
				background: #f4f4f5;
				font-size: $font-size-22;
				text-align: center;
				color: #909399;
				margin-left: 24rpx;
			}
		}
		.list-title-tag {
			float: left;
			margin-left: 20rpx;
			.badges {
				display: block;
				float: left;
				padding: 0 15rpx;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 20rpx;
				font-size: $font-size-22;
				text-align: center;
				background-color: #ecf5ff;
				color: #409eff;
			}
		}
		.list-title-num {
			float: left;
			text-align: left;
			color: #42b983;
			line-height: 40rpx;
			margin-left: 20rpx;
			font-size: $font-size-24;
		}
	}
	.list-title-a {
		width: 100%;
		height: auto;
		float: left;
		// padding: 5rpx 8rpx;
		// border-radius: 4rpx;
		// background-color: rgba(247, 247, 247, 1);
		// margin-bottom: 10rpx;
		.text {
			color: #999999;
		}
		.list-title-a-text {
			width: 100%;
			height: 44rpx;
			float: left;
			font-size: $font-size-24;
			line-height: 44rpx;
			color: #666666;
			text-align: left;
		}
	}
	.list-title-b {
		width: 100%;
		height: 44rpx;
		float: left;
		font-size: $font-size-24;
		line-height: 44rpx;
		color: #666666;
		text-align: left;
		.text {
			color: #999999;
		}
		.list-title-b-item {
			width: 50%;
			height: 100%;
			float: left;
		}
		&.sms {
			height: auto;
		}
	}
}
.tui-prompt-title {
	line-height: 44rpx;
	text-align: center;
}
.tui-prompt-input {
	width: 100%;
	height: 80rpx;
	box-sizing: border-box;
	background: #f7f7f7;
	border-radius: 8rpx;
	padding: 15rpx 20rpx;
	padding-left: 50rpx;
	margin: 20rpx 0;
	position: relative;
	.text {
		display: block;
		width: 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #666666;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
	}
	.input {
		width: 100%;
		height: 100%;
		line-height: 80rpx;
		font-size: $font-size-26;
		color: $color-system;
		&.none {
			display: none;
		}
	}
}
.tui-prompt-flex {
	width: 100%;
	height: 70rpx;
	display: flex;
	margin-top: 20rpx;
	.btn {
		flex: 1;
		line-height: 70rpx;
		font-size: $font-size-26;
		text-align: center;
		color: #ffffff;
		border-radius: 33rpx;
		margin: 0 24rpx;
		&.btn-cancel {
			background: #f7f7f7;
			color: #999999;
		}
		&.btn-confirm {
			background: $color-system;
		}
	}
}
.tui-prompt-text {
	line-height: 44rpx;
	font-size: $font-size-26;
	color: #333333;
	.text {
		color: $color-system;
	}
}
</style>