caimei-applets-crm/pages/relation/ordinary/examine-detail.vue

<template>
	<view class="container mine clearfix">
		<!-- <cu-custom :navbar-data='nvabarData'  @navigateBack="hanldNavigateBack"></cu-custom> -->
		<view
			class="tui-header-box first"
			:style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 10 + 'px' : CustomBar + 30 + 'px' }"
			:class="isCmcustomClass"
		>
			<view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 30 + '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>
		<view
			class="tui-header-box"
			:style="{
				height: CustomBar + 30 + 'px',
				backgroundImage: 'url(https://static.caimei365.com/app/crm/image/statistic_bg1.png)'
			}"
		>
		</view>
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="7"
		/>
		<view
			class="distinguish-section"
			v-else
			:style="{ top: CustomBar - 4 + 'px', left: 0 + 'px', paddingBottom: isIphoneX ? '148rpx' : '104rpx' }"
		>
			<view class="distinguish-section-conten">
				<view class="section-top">
					<view class="title"> <view class="title-text">收款信息</view> </view>
					<!-- 					<view class="button" @click="toNoSms('/pages/collection/list')">
						<text class="iconfont icon-wodedingdan"></text>
						收款列表
					</view> -->
				</view>
				<view class="section-top-item">
					<view class="list-title-t">
						<view class="list-title-tip">
							<text class="badges">{{ receiptInfo.receiptType | formatReceiptType }}款</text>
						</view>
					</view>
					<view class="list-title-b">
						收款金额：<text class="text">￥{{ receiptInfo.receiptAmount | NumFormat }}</text>
					</view>
					<view class="list-title-b">
						收款类型：<text class="text">{{ receiptInfo.payTypeText }}</text>
					</view>
					<view class="list-title-b">
						收款时间：<text class="text">{{ receiptInfo.receiptDate }}</text>
					</view>
					<template v-if="receiptInfo.smsContent">
						<view class="list-title-b">收款短信：</view>
						<view class="list-title-b sms">
							<text class="text">{{ receiptInfo.smsContent ? receiptInfo.smsContent : '无' }}</text>
						</view>
					</template>
					<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 class="section-title">关联订单</view>
				<view class="section-mid">
					<view class="tui-order-item" v-for="(order, orderIndex) in receiptInfo.shopOrderList" :key="orderIndex">
						<receipt-details :orderInfo="order"></receipt-details>
						<view class="list-detail" @click="orderDetail(order.shopOrderId)">
							<text class="iconfont icon-xiayibu"></text>
						</view>
					</view>
				</view>
				<view class="section-title">状态</view>
				<view class="section-mid">
					<view class="list-title">
						<view class="list-title-b"
							>进度：<text :style="{ color: formatColor(receiptInfo.receiptStatus) }">{{
								receiptInfo.receiptStatusText
							}}</text>
						</view>
						<view class="list-title-b">
							确认人：
							<text class="text">
								{{ receiptInfo.confirmUserName ? receiptInfo.confirmUserName : '无' }}
							</text>
						</view>
						<view class="list-title-b">
							确认时间：<text class="text">{{ receiptInfo.confirmDate }}</text>
						</view>
					</view>
				</view>
				<view class="section-tips">注：款项和订单已确认关联,等待审核</view>
			</view>
		</view>
		<view
			class="distinguish-button"
			v-if="examineBtnVisible"
			:style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }"
		>
			<view class="button cancel" @click="confirmDistinguish(2)">不通过</view>
			<view class="button confirm" @click="confirmDistinguish(1)">通过</view>
		</view>
		<!-- 审核通过弹窗 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel(0)"
			:content="contentModalText"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>
		<!--不通过审核备注弹窗  -->
		<tui-modal :show="modal1" :padding="'40rpx 30rpx'" @cancel="hideMobel(1)" :custom="true" fadeIn>
			<view class="tui-modal-custom">
				<view class="tui-prompt-title">确认不通过</view>
				<view class="tui-prompt-textarea">
					<textarea
						:class="modal1 ? 'show' : 'none'"
						class="textarea"
						placeholder="请输入不通过说明(必填)"
						v-model="noReviewReason"
					/>
				</view>
				<view class="tui-prompt-flex">
					<view class="btn btn-cancel" @click="hideMobel(1)">取消</view>
					<view class="btn btn-confirm" @click="handleClick1">确定</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>
<script>
import receiptDetails from '@/components/cm-module/receipt/receipt-details'
import { mapState, mapMutations } from 'vuex'

export default {
	components: {
		receiptDetails
	},
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar, // 顶部导航栏高度
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1,
			isCmcustomClass: 'left',
			skeletonShow: true,
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '', // 导航栏 中间的标题
				haveBack: false,
				home: false,
				textLeft: this.$store.state.isIphone,
				bgColor: '#D33020',
				textColor: '#ffffff'
			},
			receiptInfo: {},
			receiptId: 0,
			noReviewReason: '',
			params: {
				id: 0,
				receiptStatus: 1
			},
			contentModalText: '确认通过审核？', //操作文字提示语句
			modal: false,
			modal1: false,
			isShareType: false
		}
	},
	onLoad(option) {
		let obj = {}
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu()
		// #endif
		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.receiptId = this.params.id = option.id
		this.getOrderReceiptDetail(this.receiptId)
	},
	computed: {
		...mapState(['examineBtnVisible'])
	},
	methods: {
		getOrderReceiptDetail(id) {
			// 收款详情
			this.OrderService.orderReceiptDetail({ id: id })
				.then(response => {
					this.receiptInfo = response.data
					setTimeout(() => {
						this.skeletonShow = false
					}, 1000)
				})
				.catch(err => {
					this.$api.navigateTo('/pages/login/login-error')
				})
		},
		orderReceiptAudit(params) {
			//操作审核款项
			this.OrderService.orderReceiptAudit(params)
				.then(response => {
					this.$util.msg('操作成功~', 2000, true, 'success')
					setTimeout(() => {
						if (this.params.receiptStatus == 3) {
							//通过审核跳转
							this.$api.redirectTo(`/pages/relation/ordinary/detail?id=${this.params.id}`)
						} else {
							//不通过审核跳转
							this.$api.redirectTo(`/pages/relation/ordinary/index?id=${this.params.id}`)
						}
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		confirmDistinguish(type) {
			switch (type) {
				case 1:
					//通过审核
					this.params.receiptStatus = 3
					this.modal = true
					break
				case 2:
					//不通过审核显示备注弹窗
					this.params.receiptStatus = 4
					this.modal1 = true
					break
			}
		},
		handleClick(e) {
			// 通过审核
			let index = e.index
			if (index == 1) {
				this.orderReceiptAudit(this.params)
			}
			this.modal = false
		},
		handleClick1() {
			// 不通过审核
			if (this.noReviewReason == '') {
				this.$util.msg('请输入不通过说明！', 2000)
				return
			}
			this.params.reviewReason = this.noReviewReason
			this.orderReceiptAudit(this.params)
			this.modal1 = false
		},
		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}`)
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		},
		formatColor(state) {
			//设置颜色
			let stateColor = '',
				stateColorObject = {
					1: '#FEAC20',
					2: '#4cd964',
					3: '#34CC8C',
					4: '#F94B4B',
					5: '#007aff'
				}
			Object.keys(stateColorObject).forEach(function(key) {
				if (key == state) {
					stateColor = stateColorObject[key]
				}
			})
			return stateColor
		},
		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'
		// }
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getOrderReceiptDetail(this.receiptId)
			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: #fff;
}

.tui-header-box {
	width: 100%;
	background: #ffffff;
	z-index: 999;
	background-size: cover;
	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);

	&.fiexd {
		position: fixed;
		top: 0;
		left: 0;
	}
}

.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;
	}
}
.mine {
	width: 100%;
	height: 100%;
	position: relative;
}

.distinguish-section {
	width: 100%;
	position: absolute;
	padding: 40rpx 20rpx;
	box-sizing: border-box;
}

.distinguish-section-conten {
	width: 100%;
	height: auto;
	position: relative;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
	box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);

	.section-top {
		width: 100%;
		height: 66rpx;
		box-sizing: border-box;
		.title {
			float: left;
			height: 66rpx;
			padding: 13rpx 0;
			.title-text {
				float: left;
				line-height: 40rpx;
				height: 40rpx;
				color: #333333;
				text-align: left;
				font-weight: 600;
				font-size: $font-size-30;
			}
		}

		.button {
			float: right;
			box-sizing: border-box;
			padding: 0 24rpx;
			height: 100%;
			line-height: 66rpx;
			background: $btn-confirm;
			border-radius: 8rpx;
			text-align: center;
			color: #ffffff;
		}
	}

	.section-top-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;
			.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: 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;
				padding: 10rpx;
				border-radius: 4rpx;
				background: #f7f7f7;
			}
		}
		.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;
			}
		}
	}

	.section-title {
		width: 100%;
		height: 66rpx;
		float: left;
		font-size: $font-size-28;
		line-height: 66rpx;
		color: #333333;
		text-align: left;
		font-weight: 600;
	}

	.section-mid {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		border-radius: 0 0 20rpx 20rpx;
		.list-title {
			width: 100%;
			height: auto;
			.list-title-b {
				width: 100%;
				height: 50rpx;
				float: left;
				font-size: $font-size-24;
				line-height: 50rpx;
				color: #666666;
				text-align: left;
				.text {
					color: #999999;
				}
				.list-title-b-item {
					width: 50%;
					height: 100%;
					float: left;
				}
			}
		}
	}
	.section-tips {
		width: 100%;
		height: 50rpx;
		font-size: $font-size-28;
		line-height: 50rpx;
		color: $uni-color-error;
		text-align: left;
	}
}
.tui-order-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	margin-bottom: 24rpx;
	border-radius: 8rpx;
	position: relative;
	.list-detail {
		width: 70rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		position: absolute;
		right: 0;
		bottom: 0;
		.iconfont {
			font-size: $font-size-32;
			color: #999999;
		}
	}
}
.distinguish-button {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	padding: 0 50rpx;
	padding-top: 20rpx;
	display: flex;
	.button {
		flex: 1;
		height: 80rpx;
		margin: 0 20rpx;
		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);
		&.confirm {
			background: $btn-confirm;
		}
		&.cancel {
			background: $uni-color-error;
		}
	}
}
.tui-prompt-title {
	line-height: 44rpx;
	text-align: center;
}
.tui-prompt-textarea {
	width: 100%;
	height: 160rpx;
	box-sizing: border-box;
	background: #f7f7f7;
	border-radius: 8rpx;
	padding: 15rpx 20rpx;
	margin: 20rpx 0;
	.textarea {
		width: 100%;
		height: 100%;
		font-size: $font-size-26;
		&.none {
			display: none;
		}
	}
}
.tui-prompt-flex {
	width: 100%;
	height: 70rpx;
	display: flex;
	margin-top: 20rpx;
	.btn {
		flex: 1;
		line-height: 70rpx;
		font-size: $font-size-26;
		text-align: center;
		color: #ffffff;
		border-radius: 33rpx;
		margin: 0 24rpx;
		&.btn-cancel {
			background: #f7f7f7;
			color: #999999;
		}
		&.btn-confirm {
			background: $color-system;
		}
	}
}
</style>