<template> <view class="page"> <view class="form"> <u-form :model="form" ref="uForm"> <u-form-item label-width="150" label="跟进方式" prop="recordEstateActionName"> <u-input type="select" inputAlign="right" :select-open="actionSelectShow" v-model="form.recordEstateActionName" placeholder="请选择跟进方式" @click="actionSelectShow = true"></u-input> </u-form-item> <u-form-item label-width="150" label="跟进楼盘" prop="estate_name"> <u-input type="select" :select-open="propertySelectShow" v-model="form.estate_name" inputAlign="right" placeholder="请选择跟进楼盘" @click="propertySelectShow = true"></u-input> </u-form-item> <u-form-item label-width="150" label="提醒时间" prop="remind" required> <u-input placeholder="请输入" v-model="form.remind" type="number" inputAlign="right"></u-input> <view style="color: #333" slot="right">天后提醒我</view> </u-form-item> <u-form-item label-width="150" label="备注信息" prop="record_remark" required label-position="top"> <u-input :placeholder="remarkTips" v-model="form.record_remark" type="textarea"></u-input> </u-form-item> </u-form> <view class="scoped-more-img"> <view class="si-op" v-for="(url, index) in imgArr" :key="index"> <u-image :src="url" class="img" mode="heightFix" height="150rpx" @click="previewImageHandle(url)" ></u-image> <u-image src="/static/icon_g_close.png" class="i" height="40rpx" @click="delImg(index)"></u-image> </view> <view class="si-op" @click="addImg"> <u-image src="/static/icon_upload_img.png" mode="heightFix" height="150rpx" class="img"></u-image> </view> </view> <u-gap height="60"></u-gap> <u-button type="primary" @click="submitHandle">提交</u-button> </view> <!-- utoast --> <u-toast ref="uToast" /> <u-select mode="single-column" :list="groupTypeSelectList" v-model="actionSelectShow" @confirm="groupTypeSelectConfirm"></u-select> <!-- modal --> <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="form.estate_id == item.id ? '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 class="p3" v-if="userInfo2.auth_state == 1">预计奖励:{{ item.brokerage }}</view> --> </view> </view> </view> </scroll-view> <view class="popup-footer" style="position: fixed;bottom: 12rpx;"> <u-button size="medium" @click="propertySelectShow = false">关闭</u-button> <u-button size="medium" type="primary" @click="propertySelectShow = false">确定</u-button> </view> </view> </u-popup> </view> </template> <script> import { arrToObj } from '@/utils' export default { data() { return { actionSelectShow: false, groupTypeSelectList: [], estateList: [], areaTypeObj: {}, userInfo2: {}, curEstateName: '', propertySelectShow: false, imgArr: [], form: { estate_id: '', estate_name: '', remind: '', record_remark: null, }, customer_id: null, rules: { record_remark: [ { required: true, message: '备注不能为空', trigger: ['change'] }, ], remind: [ { required: true, message: "提醒时间不能为空", trigger: ['blur', 'change'] } ], }, remarkTips: '请输入', }; }, onLoad(data) { this.customer_id = data.id let userInfo2 = this.userInfo2 = uni.getStorageSync('MD_userInfo2') const dictObj = uni.getStorageSync('MD_dict') this.areaTypeObj = arrToObj(dictObj.area_type) this.getEstateList() this.form.action = userInfo2.record_estate_action || '' let list = dictObj.record_estate_action || [] let groupTypeSelectList = [] list.forEach(item => { if (item.val == userInfo2.record_estate_action) { this.form.recordEstateActionName = item.key } groupTypeSelectList.push({ value: item.val, label: item.key, }) }) this.groupTypeSelectList = [...groupTypeSelectList] }, created() { }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { groupTypeSelectConfirm(e) { e.map((val, index) => { this.form.action = val.value; this.form.recordEstateActionName = val.label; }); }, getEstateList () { uni.api.estate.apiestatelist({page_size: 100, report_open: 1, estate_name: this.curEstateName}).then(res => { let list = res.list || [] this.estateList = [...list] }) }, listItemHandle (val) { this.form.estate_id = val.estate_id; this.form.estate_name = val.estate_name; }, addImg () { this.uploadComImg((arr) => { let imgArr = [...this.imgArr, ...arr] this.imgArr = [...imgArr] }, 9) }, uploadComImg (bc, count, moreStr) { const that = this uni.chooseImage({ count: count ? count : 1, // 默认9 sizeType: ['compressed'], // original sourceType: ['album', 'camera'], success: function (res) { const tempFilePaths = res.tempFilePaths if (tempFilePaths.length > 0) { let imgBcArr = [] tempFilePaths.forEach((p, i) => { that.diyUploadFile(p, moreStr).then(url => { imgBcArr.push(url) if (bc && imgBcArr.length === tempFilePaths.length) { bc(imgBcArr) } }) }) } } }) }, diyUploadFile (filePath, moreStr) { return new Promise((resolve, reject) => { let token = uni.getStorageSync('MD_token') let url = uni.baseUrl + 'api/upload/cloud' // if (moreStr === 'noSign') url = uni.baseUrl + 'api/upload/cloud' uni.uploadFile({ url, filePath, name: 'upload', formData: { 'token': token }, success (res){ const cData = JSON.parse(res.data) let curImg = cData.data.url || '' resolve(curImg) } }) }) }, delImg (index) { let imgArr = [...this.imgArr] imgArr.splice(index, 1) this.imgArr = [...imgArr] }, previewImageHandle (current, arr) { uni.previewImage({ current, urls: this.imgArr }) }, submitHandle() { const that = this this.$refs.uForm.validate(valid => { if (valid) { // 验证成功 let apiStr = 'apiprivaterecordadd' let params = { record_remark: that.form.record_remark, estate_id: that.form.estate_id, estate_name: that.form.estate_name, action: that.form.action, remind: that.form.remind, customer_id: that.customer_id } if (that.imgArr) params.record_img = that.imgArr.join(',') if (that.isEdit) { apiStr = 'apiprivaterecordedit' params.id = that.form.id } uni.api.cust[apiStr](params).then(res => { if (that.isEdit) { uni.$msgConfirm('编辑成功', () => { uni.reLaunch({ url: '/pages/cust/my' }) }, () => { uni.reLaunch({ url: '/pages/cust/my' }) }) } else { uni.$msgConfirm('添加跟进记录成功,是否前往列表?', () => { uni.navigateBack() }, () => { that.imgArr = [] that.form = { record_remark: null, } }) } }) } else { console.log('验证失败'); } }); }, } }; </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-more-img { padding-top: 30rpx; .si-op { display: inline-block; vertical-align: middle; width: 150rpx; height: 150rpx; margin-right: 30rpx; margin-bottom: 30rpx; position: relative; border: 1PX solid #f2f2f2; .img { width: 150rpx; height: 150rpx; } .i { position: absolute; top: -20rpx; right: -20rpx; width: 40rpx; height: 40rpx; z-index: 9; } } } .scoped-estate-popup { height: 100%; padding-bottom: 100rpx; .popup-body { box-sizing: border-box; border-bottom: 1PX solid #dcdcdc; } } .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-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>