<template> <view class="page"> <view class="form"> <u-form :model="form" ref="uForm"> <u-form-item label-width="150" label="姓名" prop="name" required> <u-input placeholder="请输入客户姓名" v-model="form.name" type="text"></u-input> </u-form-item> <u-form-item label-width="150" label="性别" prop="sex" required> <u-radio-group v-model="form.sex" active-color="#2979ff"> <u-radio name="male">先生</u-radio> <u-radio name="female">女士</u-radio> </u-radio-group> </u-form-item> <u-form-item label-width="150" label="意向项目" prop="estate_name" required> <u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" placeholder="请选择推荐项目" @click="propertySelectShow = true"></u-input> <!-- <u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" placeholder="请选择推荐项目" @click="openEstateList"></u-input> --> </u-form-item> <u-form-item v-if="form.phone_type == '2'" label-width="150" label="手机号"> <view @click.native="phoneHandle" style="position: absolute;left: 0;top: 0;width: 40px;height: 40px;"></view> <u-input placeholder="输前三" v-model="phoneBefore3" type="number" style="display: inline-block;width: 70px;" input-align="right"></u-input> <view style="display: inline-block;">****</view> <u-input placeholder="输后四" v-model="phoneAfter4" type="number" style="display: inline-block;width: 70px;"></u-input> </u-form-item> <u-form-item v-else label-width="150" label="手机号" prop="phone" required> <view @click.native="phoneHandle" style="position: absolute;left: 0;top: 0;width: 40px;height: 40px;"></view> <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input> </u-form-item> <u-form-item label-width="150" label="备注信息" prop="remark" label-position="top"> <u-input placeholder="客户描述说明,如客户意向户型或面积等信息" v-model="form.remark" type="textarea"></u-input> </u-form-item> </u-form> <u-gap height="60"></u-gap> <u-button type="primary" :diabled="submitButtonDisabled" @click="submitHandle">提交</u-button> </view> <!-- 列表选择 --> <!-- <u-select mode="single-column" :list="propertySelectList" v-model="propertySelectShow" @confirm="propertySelectConfirm"></u-select> --> <u-select mode="single-column" :list="salerSelectList" v-model="salerSelectShow" @confirm="salerSelectConfirm"></u-select> <!-- modal --> <u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submit()"></u-modal> <u-modal v-model="modalShow" :content="modalContent" :show-cancel-button="true" @cancel="modalCancel()" @confirm="modalConfirm()"></u-modal> <!-- utoast --> <u-toast ref="uToast" /> <u-popup v-model="propertySelectShow" mode="center" width="90%" height="100%"> <view class="bwin-popup scoped-estate-popup"> <view class="scoped-popup-header-input"> <u-input class="input" v-model="curEstateName" placeholder="没找到楼盘??点这输入关键字搜索"></u-input> <view class="b" @click="getEstateList">搜索</view> </view> <scroll-view :scroll-y="true" class="popup-body"> <view class="scoped-estate-list"> <view v-for="(item, index) in estateList" :class="eIds.indexOf(item.id) > -1 ? 'sel-item cur' : 'sel-item'" @click="listItemHandle(item)" :key="index"> <view class="sel-left"> <image class="img" :src="item.pri_image" mode="aspectFill"></image> </view> <view class="sel-right"> <view class="p1">{{item.estate_name}}</view> <view class="p2"> <u-tag :text="areaTypeObj[item.area_type]" :type="'success'" size="mini" ></u-tag> </view> <view class="p3" v-if="userInfo2.auth_state == 1">带看需收集:{{ item.report_visit }}</view> <view class="p3" v-if="userInfo2.auth_state == 1">报备/带看保护期:{{ item.report_lock }}天/{{ item.lead_lock }}天</view> </view> </view> </view> </scroll-view> <view class="popup-footer" style="position: fixed;bottom: 12rpx;"> <u-button size="medium" @click="clearListHandle">清空</u-button> <u-button size="medium" type="primary" @click="saveListHandle">确定</u-button> </view> </view> </u-popup> </view> </template> <script> import { arrToObj } from '@/utils' export default { data() { return { form: { name: null, phone: null, sex: 'male', remark: null, phone_type: '1', saler_id: null, saler_name: null }, eIds: [], eArr: [], phoneBefore3: '', phoneAfter4: '', customer_id: null, submitButtonDisabled: true, rules: { name: [ { required: true, message: '姓名不得为空', trigger: ['change', 'blur'] }, ], phone: [ { required: true, message: '手机号不得为空', trigger: ['change', 'blur'] }, // 11个字符判断 { len: 11, message: '手机号格式不正确', trigger: ['change', 'blur'] }, ], estate_name: [ { required: true, message: '意向项目不能为空', trigger: ['change'] }, ] }, propertySelectShow: false, propertySelectList: [], estateList: [], areaTypeObj: {}, userInfo2: {}, curEstateName: '', salerSelectShow: false, salerSelectList: [], submitModalShow: false, modalShow: false, modalContent: '' }; }, onLoad(data) { const that = this const eventChannel = that.getOpenerEventChannel(); // that 需指向 this // 监听data事件,获取上一页面通过eventChannel.emit传送到当前页面的数据 if (eventChannel.on) { eventChannel.on('data', data => { if(data.info.name) that.form.name = data.info.name; if(data.info.phone) that.form.phone = data.info.phone; if(data.info.sex) that.form.sex = data.info.sex; if(data.info.demand) that.form.remark = data.info.demand; }) } }, created () { this.userInfo2 = uni.getStorageSync('MD_userInfo2') const dictObj = uni.getStorageSync('MD_dict') this.areaTypeObj = arrToObj(dictObj.area_type) uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_pub: 1}).then(res => { let list = res.list || [] this.estateList = [...list] }) }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { phoneHandle () { let p = this.form.phone p = p.replace(/ /g, '') this.form.phone = p this.form = {...this.form} }, getEstateList () { uni.api.estate.apiestatelist({page_size: 100, report_open: 1, is_pub: 1, estate_name: this.curEstateName}).then(res => { let list = res.list || [] this.estateList = [...list] }) }, listItemHandle (val) { let eIds = [...this.eIds] let eArr = [...this.eArr] let cIndex = eIds.indexOf(val.estate_id) if (cIndex > -1 ) { eIds.splice(cIndex,1) eArr.splice(cIndex,1) } else { eIds.push(val.estate_id) eArr.push(val) } this.eIds = [...eIds] this.eArr = [...eArr] }, clearListHandle () { this.propertySelectShow = false this.eIds = [] this.eArr = [] this.form.estate_name = '' }, saveListHandle () { let errMsg = '' let eNames = this.eArr.map(item => { if (item.phone_type == '2') { errMsg = item.estate_name } return item.estate_name }) this.form.estate_name = eNames.join(',') if (this.eArr.length === 1 && this.eArr[0].phone_type == '2') { this.form.phone_type = '2' } else { this.form.phone_type = '1' } if (errMsg && this.eArr.length > 1) { uni.$msg(`${errMsg}是前三后四报备项目,请单独报备`) } else { this.propertySelectShow = false } }, // // 选择所属项目回调 // propertySelectConfirm(e) { // e.map((val, index) => { // this.form.estate_id = val.value; // this.form.estate_name = val.label; // }); // }, // openEstateList () { // uni.navigateTo({ // url: `/pages/estate/list?eid=${this.form.estate_id}&ename=${this.form.estate_name}` // }) // }, submitHandle() { const that = this this.$refs.uForm.validate(valid => { if (valid) { // 验证成功 let params = { phone_type: that.form.phone_type || '1', name: that.form.name, phone: that.form.phone.replace(/\s+/g, ''), sex: that.form.sex, remark: that.form.remark, // estate_id: that.form.estate_id, // estate_name: that.form.estate_name, } if (params.phone_type == '2') { if (that.phoneBefore3 && that.phoneAfter4) { params.phone = `${that.phoneBefore3}****${that.phoneAfter4}` } else { that.$refs.uToast.show({ title: '请输入报备手机号的前三后四', type: 'warning' }); return } } this.eArr.forEach((eObj, i) => { let newParams = {...params} newParams.estate_id = eObj.estate_id newParams.estate_name = eObj.estate_name uni.api.estate.apireportadd(newParams).then(res => { if (i === this.eArr.length - 1) { uni.$msgConfirm('报备成功,是否前往报备列表?', () => { uni.navigateTo({ url: '/pages/agent/recommend/list' }) }, () => { this.form = { name: null, phone: null, sex: 'male', remark: null, } }) } }) }) } else { console.log('验证失败'); } }); }, // 获取手机号 getPhoneNumber: function(e) { // 点击获取手机号码按钮 let _that = this; if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { _that.$refs.uToast.show({ title: '您可以在个人设置中再次绑定', type: 'warning' }); setTimeout(() => { _that.reLunchUser(); }, 1500); return; // 即用户拒绝授权 } console.log(e.detail.errMsg); console.log(e.detail.iv); console.log(e.detail.encryptedData); let iv = e.detail.iv; let encryptedData = e.detail.encryptedData; // 不是登陆完第一时间授权 wx.login({ success(res) { if (res.code) { // 设置用户手机号 _that.setUserPhoneNumber(encryptedData, iv, res.code); } else { this.$refs.uToast.show({ title: res.errMsg, type: 'warning' }); console.log('登录失败!' + res.errMsg); } } }); }, // 以下是工具函数 // 关闭键盘 hideKeyboard() { uni.hideKeyboard(); }, // 格式化日期的月份或天数的显示(小于10,在前面增加0) getFormatDate(value) { if (value == undefined || value == '') { return ''; } var str = value; if (parseInt(value) < 10) { str = '0' + value; } return str; } } }; </script> <style lang="scss"> .page { padding: 20rpx; background-color: #ffffff; } .form { border-radius: 10rpx; padding: 0 40rpx; } .popup-body { .tips-title { font-size: $u-p; margin-bottom: 20rpx; } .tips-content { font-size: $u-p2; color: $u-tips-color; margin-bottom: 60rpx; } } .id_card { color: #606266; width: 100%; height: 350rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f4f5f6; font-size: $u-p2; } .footer { position: absolute; text-align: center; bottom: 40rpx; font-size: $u-p2; .agreement { color: $u-type-error; } } .slot-content { font-size: 28rpx; color: $u-content-color; padding: 20rpx; } .scoped-estate-list { .sel-item { display: flex; border-bottom: 1PX solid #dcdcdc; padding: 20rpx; &.cur { background: #369af7; border-radius: 10rpx; overflow: hidden; .img { opacity: .6; } .p1 { color: #fff; } .p3 { color: #fff; } } } .sel-left { width: 180rpx; border-radius: 10rpx; .img { width: 180rpx; height: 120rpx; border-radius: 10rpx; } } .sel-right { // width: 450rpx; margin-left: 20rpx; .p1 { font-size: 30rpx; font-weight: bold; margin-bottom: 10rpx; } .p2 { margin-bottom: 10rpx; } .p3 { color: #369af7; font-size: 24rpx; font-weight: bold; } } } .scoped-estate-popup { height: 100%; padding-bottom: 100rpx; .popup-body { box-sizing: border-box; border-bottom: 1PX solid #dcdcdc; } } .scoped-popup-header-input { position: fixed; width: 90%; display: flex; border-bottom: 1PX solid #dcdcdc; .input { flex: 1; padding-left: 20rpx; height: 80rpx; .u-input__input { height: 80rpx; } } .b { width: 200rpx; height: 80rpx; line-height: 80rpx; background: #2d8cf0; color: #fff; text-align: center; margin-left: 20rpx; } } </style>