caimei-applets-crm/pages/relation/nonorder/add.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="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>
		<view class="distinguish-section" :style="{ top: CustomBar + 'px', left: 0 + 'px' }">
			<view class="distinguish-section-conten">
				<view class="section-rows">
					<view class="rows-label">款项类型：</view>
					<view class="rows-mains">
						<input
							class="input"
							type="text"
							disabled="true"
							value=""
							v-model="mainsText"
							placeholder="非订单款"
						/>
					</view>
				</view>
				<view class="section-rows">
					<view class="rows-label">二级类别：</view>
					<view class="rows-mains">
						<picker
							@change="bindPickerChange($event)"
							:value="index"
							:range="categoryActions"
							range-key="name"
						>
							<input
								class="input"
								type="text"
								disabled="true"
								v-model="categoryTypeText"
								placeholder="请选择类别类型"
							/>
						</picker>
					</view>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="section-rows" v-if="operateParams.newReceiptType == 2">
					<view class="rows-label">关联订单：</view>
					<view class="rows-mains">
						<input
							class="input"
							type="text"
							disabled="true"
							placeholder="请选择订单"
							v-model="shopOrderTerxt"
							@click="handleChangeOrder"
						/>
					</view>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="section-rows" v-if="operateParams.newReceiptType == 1">
					<view class="rows-label">供应商：</view>
					<view class="rows-mains">
						<input
							class="input"
							type="text"
							disabled="true"
							v-model="handleShopInfo.shopName"
							placeholder="请选择上架的供应商"
							@click="handleShowClubpopup(1)"
						/>
					</view>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="section-rows" v-if="operateParams.newReceiptType == 3">
					<view class="rows-label">供应商：</view>
					<view class="rows-mains">
						<input
							class="input"
							type="text"
							disabled="true"
							v-model="handleShopInfo.shopName"
							placeholder="请选择购买认证通会员的供应商"
							@click="handleShowClubpopup(3)"
						/>
					</view>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="section-rows" v-if="operateParams.newReceiptType == 4">
					<view class="rows-label">供应商：</view>
					<view class="rows-mains">
						<input
							class="input"
							type="text"
							disabled="true"
							v-model="handleShopInfo.shopName"
							placeholder="请选择缴纳认证通企划费用的供应商"
							@click="handleShowClubpopup(4)"
						/>
					</view>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="section-text">备注信息</view>
				<view class="section-textarea">
					<textarea
						class="textarea"
						:disabled="modal"
						placeholder="请输入备注信息..."
						v-model="operateParams.noOrderReason"
					/>
				</view>
			</view>
			<view class="distinguish-button"> 
				<view class="button cancel" @click.stop="this.$api.navigateBack(1)">取消</view>
				<view class="button confirm" @click="confirmDistinguish">确定</view>
			 </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>
		<!-- 关联提示弹窗 -->
		<receipt-popup
			ref="clubpopup"
			:newReceiptType="operateParams.newReceiptType"
			v-if="isClubpopupShow"
			:show="isClubpopupShow"
			@handleChoiceaShop="handleChoiceaShopData"
		>
		</receipt-popup>
	</view>
</template>
<script>
import receiptPopup from '@/components/cm-module/receipt/receipt-popup'
import { mapState, mapMutations } from 'vuex'

export default {
	components:{
		receiptPopup
	},
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '', // 导航栏 中间的标题
				haveBack: false,
				home: false,
				textLeft: this.$store.state.isIphone,
				bgColor: '#D33020',
				textColor: '#ffffff'
			},
			type: 7,
			setDateTime: '',
			startYear: 1980,
			endYear: 2030,
			receiptId:0,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: '#4688fa'
					},
					plain: false
				}
			],
			categoryActions: [
				{
					name: '上架费',
					value: 1
				},
				{
					name: '服务返佣',
					value: 2
				},
				{
					name: '认证通会员',
					value: 3
				},
				{
					name: '认证通企划',
					value: 4
				},
				{
					name: '其他',
					value: 5
				}
			],
			shopOrderTerxt:'',
			mainsText: '非订单款',
			paymentTypeText: '普通款项', // 款项类型显示文案
			categoryTypeText: '请选择类别', // 款项类型显示文案
			isClubpopupShow: false,
			handleShopInfo:{
				shopName:''
			},
			operateParams: {
				id : 0,
				newReceiptType: 0,
				receiptType: 2,
				noOrderReason:'',
				shopId:'',
				shopOrderId:'',
				shopName:''
			},
			infoData: {},
			isCmcustomClass: 'left',
			CustomBar: this.CustomBar, // 顶部导航栏高度
			height: 64, //header高度
			top: 0, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			opcity: 1,
			contentModalTitle: '',
			contentModalText: '', //操作文字提示语句
			modal: false,
			receiptAmount:0
		}
	},
	onLoad(option) {
		this.operateParams.id = option.id
		this.getOrderReceiptDetail(option.id)
		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
			}
		})
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		getOrderReceiptDetail(id) {
			// 收款详情
			this.OrderService.orderReceiptDetail({ id: id })
				.then(response => {
					this.receiptAmount = response.data.receiptAmount
				})
				.catch(err => {
					console.log('款项详情异常')
				})
		},
		bindPickerChange(e) {
			// 选择类别
			this.handleShopInfo = {}
			this.categoryTypeText = this.categoryActions[e.target.value].name
			this.operateParams.newReceiptType = this.categoryActions[e.target.value].value
			console.log('类别', this.categoryTypeText)
			console.log('款项类型', this.operateParams.newReceiptType)
		},
		showTuiDateTime() {
			this.$refs.dateTime.show()
		},
		bindStartDateChange(event) {
			//开始时间
			console.log('开始时间==>', event.result)
			this.operateParams.time = event.result
		},
		confirmDistinguish() {
			if (this.operateParams.newReceiptType === 0) {
				this.$util.msg('请选择二级类别', 2000)
				return
			}
			if (this.operateParams.newReceiptType === 3 || this.operateParams.newReceiptType === 4) {
				if(this.operateParams.shopId === '' ){
					this.$util.msg('请选择供应商', 2000)
					return
				}
			}
			if (this.operateParams.newReceiptType === 2) {
				if(this.operateParams.shopOrderId == '' ){
					this.$util.msg('请选择关联订单', 2000)
					return
				}
			}
			this.handReceiptConfirm()
		},
		handReceiptConfirm() {
			//操作款项
			this.OrderService.orderReceiptOperate(this.operateParams)
				.then(response => {
					this.$util.msg(response.msg, 2000, true, 'success')
					setTimeout(() => {
						uni.navigateBack({
						    delta: 1
						})
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleShowClubpopup(type) {
			// 点击操作
			this.isClubpopupShow = true
		},
		handleChoiceaShopData(data){
			// 监听获取勾选供应商信息
			this.handleShopInfo = data
			this.operateParams.shopId = data.shopId
			this.operateParams.shopName = data.shopName
			console.log('监听获取勾选供应商信息',this.operateParams.shopId)
		},
		handleChangeOrder(){
			//跳转选择订单关联
			this.$api.navigateTo(`/pages/relation/nonorder/list?receiptAmount=${this.receiptAmount}`)
		},
		handleClick(e) {
			// 确认收款
			if (e.index == 1) {
				this.$api.navigateTo('/pages/collection/detail')
			}
			this.modal = false
		},
		hideMobel() {
			this.modal = false
		},
		toNoSms(url) {
			this.$api.navigateTo(url)
		},
		navBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		if (e.scrollTop > 30) {
			this.isCmcustomClass = 'fiexd'
		} else {
			this.isCmcustomClass = 'left'
		}
	},
	onShow() {
		let pages = getCurrentPages()
		let currPage = pages[pages.length-1]
		if(currPage.data.select =='select'){
			let order = uni.getStorageSync('selectOrder')
			console.log('order=======>',order)
			this.operateParams.shopOrderId = order.shopOrderId
			this.shopOrderTerxt = `${order.shopOrderNo}(${order.shopOrderId})`
		}
	}
}
</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;
	.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: 46rpx;
	}
}

.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 14rpx 0 rgba(86, 119, 252, 0.2);

	.section-top {
		width: 100%;
		height: 86rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.title {
			float: left;
			width: 66rpx;
			line-height: 66rpx;
			color: #333333;
			text-align: left;

			.iconfont {
				color: #666666;
				font-size: $font-size-40;
			}
		}

		.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-bottom: 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-26;
				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: 200rpx;
		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;
	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: $btn-cancel;
			color: #999999;
		}
	}
}

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