h5-elab-open-ownerUnion/components/subComponents/dmPickerViewCompleteMobile.vue

<template>
	<dm-pop-view ref='popView' :isShowClose="false" :isShowTitle="false" :maskTapHide='maskTapHide' :isShowConfirm='false'>
		<view class="titleDiv">
			<view class="title">补全录入号码</view>
			<image class="pop-close" src="../../static/icons/icon_close@2x.png" mode="" @click="handleCancel"></image>
		</view>
		<view class="content_options" v-if="isShowComplet">
			<text class="options_title">补充客户完整号码后，系统将判定是否补录成功，并实时反馈补充结果。</text>
			<input class="input-info" placeholder="请输入完整号码" type="number" maxlength="11" @input="setInputPhone" />
			<view class="confirm" @click="upload" :style="{background: themeColor}">提交</view>
			<view class="think_again" @click="thinkAgain">我再想想</view>
		</view>
		<view v-else>
			<view class="content_options" v-if="isSuccess==1">
				<image src="../../static/icons/complete_success.png" mode="" class="icon_complete"></image>
				<text style="font-size: 36rpx;font-family: Verdana, Verdana-Bold;font-weight: 700;text-align: center;color: #333333;">补充成功</text>
				<text style="margin-top: 10rpx;font-size: 24rpx;font-family: Verdana, Verdana-Regular;font-weight: 400;text-align: center;color: #333333;">该客户全号码补充成功，点击确认刷新报备列表。</text>
				<view class="success_confirm" @click="successConfirm" :style="{background: themeColor}">确认</view>
			</view>

			<view class="content_options" v-if="isSuccess==2">
				<image src="../../static/icons/complete_failure.png" mode="" class="icon_complete"></image>
				<text style="font-size: 36rpx;font-family: Verdana, Verdana-Bold;font-weight: 700;text-align: center;color: #333333;">补充失败</text>
				<text style="margin-top: 10rpx;font-size: 24rpx;font-family: Verdana, Verdana-Regular;font-weight: 400;text-align: center;color: #333333; width: 504rpx;">{{message}}</text>
				<view class="success_confirm" @click="failureConfirm" :style="{background: themeColor}">确认</view>
			</view>
		</view>

	</dm-pop-view>
</template>

<script>
	import dmPopView from './dmPopView.vue'
	export default {
		props: {
			maskTapHide: {
				type: Boolean,
				default: true
			},
			options:{
				type:Object
			}
		},
		data() {
			return {
				themeColor: "",
				fuzhuClolor: "",
				themeColor25: "",
				themeColor50: "",
				isSuccess: -1,
				isShowComplet: true,
				completionPhone: "",
				completePhoneParam: null,
				message: "",
				brandId:"",
				userMobile:""
				
			}
		},
		mounted() {
			let app = getApp();
			this.themeColor = app.globalData.themeColor;
			this.fuzhuClolor = app.globalData.fuzhuColor;
			this.themeColor25 = app.globalData.themeColor25;
			this.themeColor50 = app.globalData.themeColor50;
			uni.getStorage({
				//获得保存在本地的用户信息
				key: 'userInfo',
				success: res => {
					if (res.data) {
						this.brandId = res.data.brandId;
						this.userMobile = res.data.mobile;
					}
				}
			});
		},
		methods: {
			setInputPhone(event) {
				this.completionPhone = event.detail.value
			},
			
			handleCancel() {
				this.$refs.popView.hide()
			},
			show() {
				this.isSuccess = -1
				this.isShowComplet = true
				this.$refs.popView.show()
			},
			thinkAgain() {
				this.$refs.popView.handleCancel();
			},
			failureConfirm() {
				this.$emit('updataDataPage','')
				this.$refs.popView.handleConfirm();
			},
			successConfirm() {
				this.$emit('updataDataPage','')
				this.$refs.popView.handleConfirm();
			},
			upload() {
				let item = this.options;
				let hiddenMobile = item.userMobile;
				let userId = item.userId;
				let name = item.userName;
				let reportTime =  item.reportTime;
				let houseId = item.houseId;
				let reportId = item.id;
				let terminal = item.terminal;
				let reporterMobile = item.reporterMobile;
				this.completePhoneParam = {
				      hiddenMobile,
				      userId,
				      houseId,
				      reportId,
				      name,
				      reportTime,
					  terminal,
					  reporterMobile
				   }
				if (this.completionPhone != '') { //输入了手机号
					if (this.completionPhone.length == 11) {
						let startPhone3 = this.completionPhone.slice(0, 3)
						let endPhone4 = this.completionPhone.slice(7)
						let start3 = this.completePhoneParam.hiddenMobile.slice(0, 3)
						let end4 = this.completePhoneParam.hiddenMobile.slice(7)
						if (startPhone3 == start3 && endPhone4 == end4) {
							if (this.faSongFangLJ) {
								return
							}
							this.faSongFangLJ = true;
							this.commitReport();
						} else {
							uni.showToast({
								title: '请输入与前三后四号码相匹配的手机号码',
								icon: "none",
								duration: 2000
							})
						}

					} else {
						uni.showToast({
							title: '请输入完整的手机号码',
							icon: "none",
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 2000
					})
				}
			},
			dateFormat(fmt, date) {
				date = new Date(date);
			    let ret;
			    const opt = {
			        "Y+": date.getFullYear().toString(),        // 年
			        "m+": (date.getMonth() + 1).toString(),     // 月
			        "d+": date.getDate().toString(),            // 日
			        "H+": date.getHours().toString(),           // 时
			        "M+": date.getMinutes().toString(),         // 分
			        "S+": date.getSeconds().toString()          // 秒
			        // 有其他格式化字符需求可以继续添加，必须转化成字符串
			    };
			    for (let k in opt) {
			        ret = new RegExp("(" + k + ")").exec(fmt);
			        if (ret) {
			            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			        };
			    };
			    return fmt;
			},
			/**
			 * 补全号码
			 */
			async commitReport() {
				let data = {
					brandId: this.brandId,
					hiddenMobile: this.completePhoneParam.hiddenMobile,
					houseId: this.completePhoneParam.houseId,
					mobile: this.completionPhone,
					name: this.completePhoneParam.name,
					reportId: this.completePhoneParam.reportId,
					reportTime:  this.dateFormat("YYYY-mm-dd HH:MM:SS",this.completePhoneParam.reportTime),
					reporterMobile: this.completePhoneParam.reporterMobile,
					terminal: this.completePhoneParam.terminal,
					userId: this.completePhoneParam.userId,
				};
				let res = await this.$myRequest({
					url: "/elab-marketing-user/pre3post4/completePhone",
					data: data
				});
				if (res.data.success) {
					this.isSuccess = 1
					this.isShowComplet = false
					this.faSongFangLJ = false;
				} else {
					this.isSuccess = 2
					this.isShowComplet = false
					this.faSongFangLJ = false;
					this.message = res.data.message
				}

			},

		},
		components: {
			dmPopView
		}
	}
</script>

<style scoped lang="scss">
	
	.titleDiv {
		width: 100%;
		padding: 56rpx 30rpx 10rpx 40rpx;
		box-sizing: border-box;
		display: flex; 
		justify-content: space-between;
		
		.title {
			font-size: 36rpx; 
			font-weight: bold;
		}
		
		.pop-close {
			position: absolute;
			top: 64rpx;
			right: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.content_options {
		width: 100%;
		display: flex;
		height: 700rpx;
		align-items: center;
		flex-direction: column;
		overflow-y: scroll;
		overflow-x: hidden;


		.options_title {
			font-size: 24rpx;
			font-family: Verdana, 'Verdana-Regular';
			font-weight: 400;
			text-align: left;
			color: #333333;
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;

		}

		.input-info {
			width: calc(100% - 60rpx);
			height: 96rpx;
			background: #f1f5f9;
			border-radius: 16rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			line-height: 96rpx;
			margin-top: 50rpx;
			margin-bottom: 140rpx;
		}

		.confirm {
			width: 260rpx;
			height: 84rpx;
			border-radius: 42rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;

		}

		.think_again {
			font-size: 32rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: center;
			color: #666666;
			margin-top: 50rpx;
		}

		.icon_complete {
			width: 118rpx;
			height: 118rpx;
			margin-top: 100rpx;
			margin-bottom: 30rpx;
		}

		.success_confirm {
			width: 280rpx;
			height: 84rpx;
			border-radius: 42rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			margin-top: 160rpx;
		}
	}
</style>