NewZkgj/pages/center/consumer/newFollowup/newFollowup.vue

<template>
	<view class="box">

		<view class="screen">
			<!-- 录音标示 -->
			<view class="screen-record">
				<view class="screen-record-text">
					客户阶段
				</view>
				<view class="screen-record-tab">
					<scroll-view scroll-x style="width: 100%;">
						<view style="display: flex;">
							<block v-for="(item,index) in stateList" :key="index">
								<view style="flex-shrink: 0;"
									:class="[screen.state==index?'screen-record-chose':'screen-record-nochose']"
									@click="screen.state=index">
									{{item.stageName}}
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 录音标示 -->
			<view class="screen-record">
				<view class="screen-record-text">
					意向级别
				</view>
				<view class="screen-record-tab">
					<view :class="[screen.level==1?'screen-record-chose':'screen-record-nochose']"
						@click="screen.level=1">
						A
					</view>
					<view :class="[screen.level==2?'screen-record-chose':'screen-record-nochose']"
						@click="screen.level=2">
						B
					</view>
					<view :class="[screen.level==3?'screen-record-chose':'screen-record-nochose']"
						@click="screen.level=3">
						C
					</view>
					<view :class="[screen.level==4?'screen-record-chose':'screen-record-nochose']"
						@click="screen.level=4">
						D
					</view>
				</view>
			</view>
			<!-- 		<view class="screen-record" style="height: auto;">
						<view class="screen-record-text" style="margin-bottom: 20rpx;">
							客户类型
						</view>
						<u-search  placeholder="请输入搜索" v-model="keyword" :clearabled="true" :show-action="false" @change="search"></u-search>
							<scroll-view style="height: 180rpx;" scroll-y="true" >
								<view class="screen-record-tab" style="flex-wrap: wrap;">
									<view v-for="(item,index) in customerType" :key="index">
										<view :class="[item.check?'screen-record-chose':'screen-record-nochose']" style="margin-bottom: 20rpx;" @click="checkbox(index)">
											{{item.keywords}}
										</view>
									</view>
								</view>
							 </scroll-view>
						
					</view> -->
			<view class="screen-record">
				<view class="screen-record-text">
					跟进内容
				</view>
				<view class="screen-record-tab">
					<input type="text" placeholder="请输入跟进内容" v-model="screen.con" />
				</view>
			</view>
			<view class="screen-foot">
				<view class="screen-foot-sure" @click="screensure">
					保存
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				screenShow: false,
				selectshow: false,
				selectTipshow: false,
				buildingID: '',
				keyword: '',
				screen: {
					state: '0',
					con: "",
					level: '1'
				},
				stateList: [],
				recordList: [],
				nextPage: 1,
				totalRecord: '',
				freeList: [],
				customerType: [],
				customerId: ''
			}
		},
		onShow() {

		},
		onLoad(e) {
			this.customerId = e.id
			this.buildingID = uni.getStorageSync('buildingID').id;
			this.recordList = []
			if (e.level) {
				this.screen.level = Number(e.level)
			}
			// this.getMyCustom()
			// this.getFreeList()
			this.getNewStatus(e)
			this.getCustomerType();
		},
		methods: {
			//选择顾问
			actionSelectCallback(e) {
				this.screen.agentId = e[0].value;
				this.screen.agentIdtext = e[0].label;
			},
			getCustomerType() {
				this.$u.get("/customer/queryKeyWords").then(res => {
					res.map(item => {
						item.check = false
					})
					this.customerType = res;
				})
			},
			getNewStatus(e) {
				var that = this;
				let premo = {
					houseId: uni.getStorageSync('buildingID').id
				}
				this.$u.post('/customer/getStage', premo)
					.then(res => {
						console.log(res)
						console.log(e.stageName, res.findIndex(item =>  item.stageName == e.stageName ))
						if (e.stageName) {
							that.screen.state = res.findIndex(item => item.stageName == e.stageName )
						}
						that.stateList = res
					})

			},
			checkbox(idx) {
				console.log(idx)
				this.customerType[idx].check = !this.customerType[idx].check
			},
			search(e) {
				console.log(e)
			},
			//选择标签
			selectCallback(e) {
				console.log(e[0].label)
			},
			//筛选确认
			screensure() {
				// 获取选择过的数据
				// let type=[]
				let words = []
				this.customerType.map(item => {
					if (item.check) {
						// type.push(item.id)
						words.push(item.keywords)
					}
				})
				// if (words.length == 0 ) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请选择、类型',
				// 		showCancel: false
				// 	});
				// 	return;
				// }
				uni.showLoading({
					title: "保存中~",
					mask: true
				})
				// console.log(type)
				let param = {
					"stageCode": this.stateList[this.screen.state].stageCode,
					"stageName": this.stateList[this.screen.state].stageName,
					"remarks": this.screen.con,
					words,
					// "settingTime":"",
					"agentRelationPo": {
						"customerId": this.customerId,
						"level": this.screen.level,
						"state": this.stateList[this.screen.state].id
					}
				}
				this.$u.post('/customer/addZkDailyWorkRecord', param)
					.then(res => {
						// util.showSuccess("提交成功");
						uni.hideLoading();
						uni.navigateBack();
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #F8F8F8;
	}

	.screen {
		// box-sizing: border-box;
		// padding: 0 30rpx;
		background: #FFFFFF;

		.screen-counselor {
			display: flex;
			height: 106rpx;
			// padding: 40rpx 30rpx 36rpx 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #CCCCCC;

			.screen-text {
				margin: 40rpx 0 36rpx 0;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
			}

			.screen-sel {
				display: flex;
				justify-content: space-between;
				width: 500rpx;
				margin-left: 60rpx;

				.screen-sel-img {
					margin: 40rpx 0 36rpx 0;
					width: 14rpx;
					height: 30rpx;
				}

				.screen-inp {
					margin-top: 20rpx;
				}
			}
		}

		.screen-record {
			height: 192rpx;
			// width: 100%;
			overflow: hidden;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #CCCCCC;

			.screen-record-text {
				margin-top: 36rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;
			}

			.screen-record-tab {
				margin-top: 30rpx;
				display: flex;

				// justify-content: space-around;
				.screen-record-chose {
					width: 151rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #2671E2;
					text-align: center;
					line-height: 60rpx;
					margin-right: 22rpx;
				}

				.screen-record-nochose {
					width: 151rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					border: 1px solid #C9C9C9;
					text-align: center;
					line-height: 60rpx;
					margin-right: 22rpx;
				}

			}
		}

		.screen-foot {
			height: 88rpx;
			display: flex;
			width: 100%;
			margin-top: 160rpx;

			.screen-foot-reset {
				width: 80%;
				text-align: center;
				margin: 0 auto;
				line-height: 88rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #666666;
			}

			.screen-foot-sure {
				width: 80%;
				margin: 0 auto;
				text-align: center;
				line-height: 88rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: #2671E2;
			}
		}
	}
</style>