gx

queenwuli

2021-01-12 a6653e19d20a61e7b8f788037d2a4df3f93a4f32

 hive-app/pages/workbench/followRecords/addRecord.vue

@@ -1,61 +1,169 @@
<template>
   <view class="font-14 container">
      <view class="content-row">
         <view>
            <input placeholder="请填写跟进记录" placeholder-class="placeholder font-14"/>
         <view class="input-group-cloume">
            <textarea v-model="formData.content" maxlength="300" placeholder="请填写跟进记录" placeholder-class='placeholder' />
         </view>
         <view class="mt-15">
            <view class="add-img">
               <text class="iconfont iconxiangji gray icon"></text>
         <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="content-row flex align-center justify-between">
         <text>客户</text>
         <navigator url="../../member/selectCustomer" hover-class="none" class="gray flex align-center">
            <text>刘亦菲</text>
      <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="content-row flex align-center justify-between">
         <text>相关订单</text>
         <navigator url="./orderList" hover-class="none" class="gray flex align-center">
            <text>水光面膜等三件产品</text>
      <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="content-row flex align-center justify-between">
         <text>下次跟进提醒</text>
         <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="gray flex align-center">
               <text>请选择</text>
      <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>
         </picker>
      </view>
      <view class="content-row flex align-center justify-between">
         <text>设置可见范围</text>
         <view>
            <radio-group name="privacy" @change="privacyChange">
               <label class="mr-20"><radio value="公共" color="#518EFF"  class="radio" :checked="sex==='公共'"/>公开</label>
               <label><radio value="私人" color="#518EFF" class="radio" :checked="sex==='私人'"/>仅自己可见</label>
      <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">提交跟进</button>
      <button class="blue-btn sticky-footer" @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{
            privacy: '私人',
            formData: {
               content: '',
               nextNotifyTime: '',
               visible: 1,
               vipId: '',
               vipName: '',
               orderId: '',
               serviceId: '',
               albums: []
            },
            orderName: '',
            serviceName:''
         }
      },
      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.privacy = e.detail.value;
            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.$httpUtils.request('/api/followup/addFollowup', this.formData, 'POST').then((res) => {
               if(res.status == 200){
                  uni.navigateBack()
               }
               this.$toast.info(res.info)
            })
         }
      }
   }
@@ -69,16 +177,42 @@
      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{
      width: 40px;
      height: 40px;
      border: 1px solid #EDEAF4;
      padding: 10px;
      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;
   }
   .icon{
      font-size: 30px;
   .add-img .iconfont{
      font-size: 22px;
   }
</style>