caimei-applets-crm/pages/collection/sms.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-fanhui" @click.stop="checkedSms" v-if="receiptType == 2"></text>
				<text class="header-sit-text">{{ receiptType == 1 ? '款项识别' : '无短信收款' }}</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>
		<view class="distinguish-section" :style="{ top: CustomBar + 'px', left: 0 + 'px' }">
			<view class="distinguish-section-conten">
				<view class="section-top">
					<view class="title" v-if="receiptType == 1">收款短信</view>
					<view class="button" @click="toNoSms('/pages/collection/list')">
						<text class="iconfont icon-wodedingdan"></text> 收款列表
					</view>
				</view>
				<view class="section-textarea" v-if="receiptType == 1">
					<textarea
						class="textarea"
						placeholder="收款短信内容..."
						:disabled="modal"
						v-model="params.smsContent"
						@blur="onBlurSmsContent"
					/>
				</view>
				<template v-if="isConfirm">
					<view class="section-rows">
						<view class="rows-label">款项类型：</view>
						<view class="rows-mains">
							<picker
								@change="bindPickerChange(1, $event)"
								:value="index"
								:range="paymentActions"
								range-key="name"
							>
								<input
									class="input"
									type="text"
									disabled="true"
									v-model="paymentTypeText"
									value=""
									placeholder="请选择款项类型"
								/>
							</picker>
						</view>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<view class="section-rows">
						<view class="rows-label">收款时间：</view>
						<view class="rows-mains">
							<input
								class="input"
								type="text"
								v-model="params.receiptDate"
								disabled="true"
								placeholder="请选择收款时间"
								@click="showTuiDateTime"
							/>
						</view>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<view class="section-rows" :class="isReceiptType ? 'disabled' : ''">
						<view class="rows-label">收款类型：</view>
						<view class="rows-mains">
							<picker
								@change="bindPickerChange(2, $event)"
								:value="index"
								:range="receiptTypeActions"
								:disabled="isReceiptType"
								range-key="name"
							>
								<input
									class="input"
									type="text"
									disabled="true"
									v-model="banksTypeText"
									placeholder="请选择收款类型"
								/>
							</picker>
						</view>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<view class="section-rows">
						<view class="rows-label">收款金额：</view>
						<view class="rows-mains">
							<input
								class="input"
								v-model="params.receiptAmount"
								@blur="changeNumber($event)"
								type="text"
								placeholder="请输入收款金额"
							/>
						</view>
					</view>
					<view class="section-rows" :class="isCheckedCharge ? '' : 'disabled'">
						<view class="rows-label" @click="checkedCharge">
							<text class="iconfont" :class="isCheckedCharge ? 'icon-yixuanze' : 'icon-weixuanze'"></text>
							手续费：
						</view>
						<view class="rows-mains">
							<input
								class="input"
								v-model="params.handlingFee"
								@blur="handlingFeeNumber($event)"
								:disabled="!isCheckedCharge"
								type="text"
								placeholder="请输入手续费"
							/>
						</view>
					</view>
					<template v-if="receiptType == 2">
						<view class="section-text">收款短信(备注,必填)</view>
						<view class="section-textarea">
							<textarea
								class="textarea"
								:disabled="modal"
								placeholder="请输入收款备注..."
								v-model="params.smsContent"
							/>
						</view>
					</template>
				</template>
			</view>
			<view class="distinguish-button">
				<tui-button
					type="primary"
					:disabledGray="true"
					:disabled="disabled"
					:height="'80rpx'"
					:shadow="true"
					shape="circle"
					@click="confirmDistinguish"
					>收款</tui-button
				>
			</view>
			<view class="distinguish-button-text" @click="checkedNoSms" v-if="receiptType == 1">无短信收款</view>
		</view>
		<!-- 时间组件 -->
		<tui-datetime
			ref="dateTime"
			:type="7"
			:startYear="startYear"
			:endYear="endYear"
			cancelColor="#555555"
			color="#4688fa"
			@confirm="bindStartDateChange"
		></tui-datetime>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:title="contentModalTitle"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
const defaultParams = {
	smsContent: '', // 收款短信
	payType: null,
	receiptType: 1, // 收款款项类型：1订单款，2非订单款，3返佣款 4订单款或者非订单款（因财务阶段无法区分订单非订单）, 5供应商退款
	receiptAmount: '', //收款金额
	handlingFee: '', //手续费
	receiptDate: null // 收款时间
}
export default {
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '', // 导航栏 中间的标题
				haveBack: false,
				home: false,
				textLeft: this.$store.state.isIphone,
				bgColor: '#D33020',
				textColor: '#ffffff'
			},
			receiptType: 1, //收款方式 1 短信收款 2 无短信收款
			infoData: {},
			isCmcustomClass: 'left',
			CustomBar: this.CustomBar, // 顶部导航栏高度
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1,
			isConfirm: false,
			type: 7,
			setDateTime: '',
			startYear: 1980,
			endYear: 2030,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: '#4688fa'
					},
					plain: false
				}
			],
			paymentActions: [
				{ name: '普通款项', value: 1 },
				{ name: '返佣款项', value: 3 },
				{ name: '供应商退款', value: 5 }
			],
			receiptTypeActions: [],
			paymentTypeText: '普通款项', // 款项类型显示文案
			banksTypeText: '', // 款项类型显示文案
			params: {
				smsContent:'', // 收款短信
				payType: null, //付款类型
				receiptType: 1, // 收款款项类型：1订单款，2非订单款，3返佣款 4订单款或者非订单款（因财务阶段无法区分订单非订单）, 5供应商退款
				receiptAmount: '', //收款金额
				handlingFee: '', //手续费
				receiptDate: null // 收款时间
			},
			handleCharge: 0,
			handleReceiptAmount: 0,
			isCheckedCharge: false,
			isReceiptType: false,
			contentModalTitle: '',
			contentModalText: '', //操作文字提示语句
			modal: false
		}
	},
	onLoad() {
		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
			}
		})
		this.getOrderReceiptType()
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		}
	},
	computed: {
		...mapState(['hasLogin']),
		disabled: function() {
			let bool = true
			if (this.receiptType == 1) {
				if (this.params.smsContent || this.params.receiptAmount) {
					bool = false
				}
			} else {
				if (this.params.receiptAmount) {
					bool = false
				}
			}
			return bool
		}
	},
	methods: {
		getOrderReceiptType() {
			// 获取收款类型列表
			this.OrderService.orderReceiptType()
				.then(response => {
					this.receiptTypeActions = response.data.map(item => ({
						...item,
						name: item.type,
						value: item.id
					}))
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		orderReceiptReadSms() {
			// 识别收款短信
			this.OrderService.orderReceiptReadSms({smsContent:this.params.smsContent})
				.then(response => {
					const data = response.data
					this.params.payType = data.payType
					this.params.orderFlag = data.orderFlag
					this.params.receiptAmount = this.handleReceiptAmount = data.receiptAmount
					this.params.receiptDate = data.receiptDate
					this.handleCharge = this.params.handlingFee = data.handlingFee
					this.receiptTypeActions.forEach(el => {
						if (this.params.payType === el.value) {
							this.banksTypeText = el.name
						}
					})
					if (this.params.handlingFee > 0) {
						this.isCheckedCharge = true
					}
					// 处理收款类型禁止点击
					this.isReceiptType = true
					console.log('isReceiptType', this.isReceiptType)
					this.initInput()
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		
		confirmDistinguish() {
			if (this.params.receiptAmount == '') {
				this.$util.msg('请输入收款金额', 2000)
				return
			}
			if (this.isCheckedCharge) {
				if (this.params.handlingFee == '') {
					this.$util.msg('请输入手续费', 2000)
					return
				}
			}
			if (this.receiptType == 2) {
				if (this.params.smsContent == '') {
					this.$util.msg('请填写收款备注', 2000)
					return
				}
			}
			if (this.params.receiptType == 1) {
				// 普通订单款
				this.contentModalTitle = '确定收款吗？'
				this.contentModalText = '确认前请仔细检查各项数据是否正确，确认收款后将不能进行修改。' //操作文字提示语句
			} else if (this.params.receiptType == 3) {
				// 返佣款
				this.contentModalTitle = ''
				this.contentModalText = '确定返佣收款吗？' //操作文字提示语句
			} else if (this.params.receiptType == 5) {
				// 供应商退款
				this.contentModalTitle = ''
				this.contentModalText = '确定供应商退款吗？' //操作文字提示语句
			}
			this.modal = true
		},
		getOrderReceiptSave() {
			// 收款保存
			this.OrderService.orderReceiptSave(this.params)
				.then(response => {
					this.$util.msg('收款成功', 1500, true, 'success')
					setTimeout(() => {
						this.params.smsContent = ''
						this.params.receiptAmount = ''
						this.params.handlingFee = ''
						this.$api.navigateTo(`/pages/collection/detail?id=${response.data.id}&receiptType=${response.data.receiptType}`)
					}, 1500)
				})
				.catch(err => {
					this.$util.msg(err.msg, 2000)
				})
		},
		bindPickerChange(type, e) {
			// 选择选项
			switch (type) {
				case 1:
					this.paymentTypeText = this.paymentActions[e.target.value].name
					this.params.receiptType = this.paymentActions[e.target.value].value
					break
				case 2:
					this.banksTypeText = this.receiptTypeActions[e.target.value].name
					this.params.payType = this.receiptTypeActions[e.target.value].value
					break
			}
		},
		checkedNoSms() {
			// 切换无短信收款
			this.receiptType = 2
			this.isConfirm = true
			this.isReceiptType = false
			this.isCheckedCharge = false
			this.params = Object.assign(this.params, defaultParams)
			this.params.receiptDate = this.$api.getNowFormatDate()
			this.params.payType = this.receiptTypeActions[0].value
			this.banksTypeText = this.receiptTypeActions[0].name
		},
		checkedSms() {
			// 切换款项识别
			this.receiptType = 1
			this.isConfirm = false
		},
		onBlurSmsContent(e) {
			this.params.smsContent = e.detail.value
			if (this.params.smsContent) {
				this.orderReceiptReadSms()
			}
		},
		showTuiDateTime() {
			this.$refs.dateTime.show()
		},
		bindStartDateChange(event) {
			//开始时间
			this.params.receiptDate = event.result
		},
		checkedCharge() {
			// 勾选手续费
			this.isCheckedCharge = !this.isCheckedCharge
			if (this.receiptType == 1) {
				// 短信收款处理勾选手续费
				if (!this.isCheckedCharge) {
					//未勾选手续费
					this.params.handlingFee = 0
					this.params.receiptAmount =(this.handleReceiptAmount*100 - this.handleCharge*100)/100
				} else {
					//已勾选手续费
					this.params.handlingFee = this.handleCharge
					this.params.receiptAmount =(this.params.receiptAmount*100 + this.params.handlingFee*100)/100
				}
			} else {
				// 无短信收款处理勾选手续费计算
				if (!this.isCheckedCharge) {
					//未勾选手续费
					console.log('未勾选手续费')
					this.params.receiptAmount =(this.params.receiptAmount*100 - this.params.handlingFee*100)/100
					this.params.handlingFee = ''
				} else {
					//已勾选手续费
					console.log('已勾选手续费')
					this.params.receiptAmount =(this.params.receiptAmount*100 + this.params.handlingFee*100)/100
				}
			}
		},
		handleClick(e) {
			// 确认收款
			if (e.index == 1) {
				this.getOrderReceiptSave()
			}
			this.modal = false
		},
		hideMobel() {
			// 取消收款
			this.modal = false
		},
		changeNumber(e) {
			// 校验输入为数字
			this.params.receiptAmount = this.handleReceiptAmount = this.checkedNumberVal(e.detail.value)
			console.log('receiptAmount', this.params.receiptAmount)
		},
		handlingFeeNumber(e) {
			// 校验输入为数字
			this.params.handlingFee = Number(this.checkedNumberVal(e.detail.value))
			if (this.isCheckedCharge) {
				this.params.receiptAmount = (Number(this.params.receiptAmount)*100 + this.params.handlingFee*100)/100
			}
		},
		checkedNumberVal(val) {
			// 校验是否输入的是数字
			if (!this.$api.isNumber(val)) {
				return ''
			} else {
				return val
			}
		},
		initInput() {
			if (this.params.smsContent != '') {
				this.isConfirm = true
			} else {
				this.isConfirm = false
			}
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		// if (e.scrollTop > 30) {
		// 	this.isCmcustomClass = 'fiexd'
		// } else {
		// 	this.isCmcustomClass = 'left'
		// }
	},
	onShow() {
		
	}
}
</script>

<style lang="scss">
@import '@/uni.scss';

page {
	background: #fff;
}

.tui-header-box {
	width: 100%;
	background: #ffffff;
	z-index: 999;
	background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
	background-size: cover;
	&.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;
	padding: 0 24rpx;
	.header-sit-text {
		text-align: left;
		font-size: $font-size-40;
		font-weight: 600;
		font-family: '正楷';
	}
	.icon-fanhui {
		display: block;
		width: 56rpx;
		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: 20rpx 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 14rpx 0 rgba(86, 119, 252, 0.2);
	.section-top {
		width: 100%;
		height: 86rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		.title {
			float: left;
			line-height: 66rpx;
			font-size: $font-size-28;
			color: #333333;
			.iconfont {
				color: #666666;
				font-size: $font-size-44;
			}
		}

		.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-rows {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		border-radius: 8rpx;
		background: #f8f8f8;
		margin-top: 20rpx;
		line-height: 80rpx;
		display: flex;
		position: relative;
		&.disabled {
			background: #e1e1e1;
		}
		.rows-label {
			flex: 3;
			.iconfont {
				margin-right: 8rpx;
				&.icon-yixuanze {
					color: $color-system;
				}
			}
		}
		.rows-mains {
			flex: 7;
			.input {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				padding-right: 40rpx;
				text-align: left;
				font-size: $font-size-28;
				color: #333333;
			}
		}
		.icon-xiayibu {
			display: block;
			width: 40rpx;
			height: 80rpx;
			position: absolute;
			right: 0;
			text-align: center;
			font-size: $font-size-32;
		}
	}
	.section-text {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		font-size: $font-size-24;
		color: #333333;
	}
	.section-textarea {
		width: 100%;
		height: 220rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background: #f7f7f7;
		border-radius: 8rpx;
		.textarea {
			width: 100%;
			height: 100%;
		}
	}
}

.distinguish-button {
	width: 100%;
	height: 80rpx;
	margin-top: 100rpx;
	box-sizing: border-box;
	padding: 0 50rpx;

	.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);
		&.disabled {
			background: #f7f7f7;
			color: #e1e1e1;
		}
	}
}

.distinguish-button-text {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: $btn-confirm;
	font-size: $font-size-28;
}

.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;
}
</style>