<template>
|
<view class="font-14 container">
|
<view class="content-row">
|
<view class="input-group-cloume">
|
<textarea v-model="formData.content" maxlength="300" placeholder="请填写跟进记录" placeholder-class='placeholder' />
|
</view>
|
<view class="img-wrap">
|
<image v-for="(item, index) in formData.albums" :src="item.img" @click="editImg(index)"></image>
|
<view class="add-img" @click="showUploadImage">
|
<text class="iconfont iconxiangji"></text>
|
</view>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">客户</text>
|
<navigator url="../../member/selectCustomer" hover-class="none" class="gray right-text">
|
<text>{{formData.vipName || '请选择'}}</text>
|
<text class="iconfont iconarrow-backimg"></text>
|
</navigator>
|
</view>
|
<view class="input-group-row">
|
<text class="label">相关订单</text>
|
<navigator url="./orderList" hover-class="none" class="gray right-text flex align-center justify-end">
|
<text class="ellipsis" v-if="formData.orderId">{{orderName}}</text>
|
<text class="ellipsis" v-else-if="formData.serviceId">{{serviceName}}</text>
|
<text v-else>请选择</text>
|
<text class="iconfont iconarrow-backimg"></text>
|
</navigator>
|
</view>
|
<view class="input-group-row">
|
<text class="label">下次跟进提醒</text>
|
<view class="right-text gray">
|
<text @click="showTime()">{{formData.nextNotifyTime || '请选择'}}</text>
|
<text class="iconfont iconarrow-backimg"></text>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">设置可见范围</text>
|
<view class="right-text">
|
<radio-group name="visible" @change="privacyChange">
|
<label><radio value="1" color="#518EFF" class="radio" :checked="formData.visible==1"/>公开</label>
|
<label><radio value="2" color="#518EFF" class="radio" :checked="formData.visible==2"/>仅自己可见</label>
|
</radio-group>
|
</view>
|
</view>
|
<button class="blue-btn sticky-footer" :disabled="isDisabled" @click="submit">提交跟进</button>
|
<date-time-picker ref='date-time' :startDate="startDate" type='datetime' @change='dateTimeChange'></date-time-picker>
|
</view>
|
</template>
|
|
<script>
|
import imageUploadUtils from '../../../common/jssdk/uploadImg.js'
|
import DateTimePicker from '../../../components/bory-dateTimePicker/bory-dateTimePicker.vue'
|
export default{
|
components:{
|
DateTimePicker
|
},
|
data(){
|
return{
|
formData: {
|
content: '',
|
nextNotifyTime: '',
|
visible: 1,
|
vipId: '',
|
vipName: '',
|
orderId: '',
|
serviceId: '',
|
albums: []
|
},
|
orderName: '',
|
serviceName:'',
|
isDisabled: false
|
}
|
},
|
computed:{
|
startDate(){
|
return this.$utils.formmatTime('YY-mm-dd')
|
}
|
},
|
onLoad() {
|
uni.$on('orderChange', (data) => {
|
// type: 0 订单， 1服务单
|
if(data.type==0){
|
this.formData.orderId = data.id;
|
this.formData.serviceId = '';
|
this.loadOrderDetail();
|
}else{
|
this.formData.serviceId = data.id;
|
this.formData.orderId = '';
|
this.loadServiceOrderDetail();
|
}
|
this.formData.vipName = data.vipName;
|
this.formData.vipId = data.vipId;
|
})
|
},
|
methods:{
|
showTime () {
|
this.$refs['date-time'].show();
|
},
|
dateTimeChange(val) {
|
this.formData.nextNotifyTime = val;
|
},
|
privacyChange(e){
|
this.formData.visible = e.detail.value;
|
},
|
setData(selectItem){
|
let data = selectItem[0];
|
this.formData.vipId = data.id;
|
this.formData.vipName = data.vipName;
|
},
|
// 图片上传
|
showUploadImage(){
|
if(this.formData.albums.length >= 9){
|
this.$toast.info('最多只能上传9张图片');
|
return;
|
}
|
imageUploadUtils.show((res) => {
|
this.formData.albums.push({img: res});
|
})
|
},
|
// 图片编辑
|
editImg(index){
|
imageUploadUtils.show((res) => {
|
this.formData.albums[index].img = res;
|
})
|
},
|
loadOrderDetail(){
|
this.$httpUtils.request('/api/order/findOrderDetail/'+this.formData.orderId).then((res) => {
|
if(res.status == 200){
|
let result = res.mapInfo.orderDetail;
|
this.orderName = result.items.length?result.items[0].goodsName:'';
|
}
|
})
|
},
|
loadServiceOrderDetail(){
|
this.$httpUtils.request('/api/serviceOrder/findServiceOrderDetail/'+this.formData.serviceId).then((res) => {
|
if(res.status == 200){
|
let result = res.mapInfo.detail;
|
this.serviceName = result.items.length?result.items[0].name:'';
|
}
|
})
|
},
|
valid(){
|
const {content, vipId, orderId, serviceId} = this.formData;
|
if(!content){
|
this.$toast.info('请填写跟进记录');
|
return false
|
}
|
if(!vipId){
|
this.$toast.info('请选择客户');
|
return false
|
}
|
if(!orderId && !serviceId){
|
this.$toast.info('请选择相关订单');
|
return false
|
}
|
},
|
submit(){
|
if(this.valid() === false){
|
return;
|
}
|
this.isDisabled = true;
|
this.$httpUtils.request('/api/followup/addFollowup', this.formData, 'POST').then((res) => {
|
if(res.status == 200){
|
uni.navigateBack()
|
}
|
this.$toast.info(res.info)
|
this.isDisabled = false
|
}).catch((err) => {
|
this.isDisabled = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.container{
|
padding: 0 10px;
|
}
|
.content-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 15px 0;
|
}
|
|
.input-group-cloume uni-textarea{
|
border: 0;
|
height: 58px;
|
padding: 0;
|
}
|
.ellipsis{
|
max-width: 200px;
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
}
|
.img-wrap{
|
display: flex;
|
flex-wrap: wrap;
|
margin-left: -5px;
|
margin-right: -5px;
|
}
|
.img-wrap image{
|
width: 50px;
|
height: 50px;
|
margin: 5px;
|
}
|
.add-img{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 50px;
|
height: 50px;
|
color: #a5abaf;
|
border: 1px solid #EDEAF4;
|
border-radius: 2px;
|
box-sizing: border-box;
|
margin: 5px;
|
}
|
.add-img .iconfont{
|
font-size: 22px;
|
}
|
</style>
|
