warm_man/pages/Line/components/SubmitPage/index.vue

<template>
  <view class="list-page" :style="{padding:'20rpx',marginBottom:'100rpx'}">
    <u-form
        labelPosition="left"
        :model="model"
        :rules="rules"
        ref="form1"
        labelWidth="200rpx"
        :labelStyle="{
          fontSize:'32rpx',
          fontWeight:'400',
          color:'#020b18',
          lineHeight:'50rpx',
        }"
    >
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          label="事件类型"
          prop="line.type_id"
          borderBottom
      >
        <u-cell :is-link="true" :border="false" @click="typeShow = true" >
          <template #title>
            <u-text v-if="type_name" :text="type_name" size="28" color="#020B18" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>
            <u-text v-else text="请选择" size="28" color="#AFB5BE" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>
          </template>
        </u-cell>
      </u-form-item>
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          label="手机号"
          prop="line.phone"
          borderBottom
      >
        <u-input
            fontSize="28"
            placeholder="请输入"
            v-model="model.line.phone"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          label="事件地址"
          prop="line.address"
          borderBottom
      >
        <u-cell :is-link="true" :border="false" @click="selectAddress">
          <template #title>
            <u-text :text="model.line.address" size="28" color="#020B18" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>
          </template>
        </u-cell>
      </u-form-item>
      <u-form-item
          :custom-style="{
                  padding:'34rpx 0'
              }"
          prop="line.describe"
      >
        <view class="label-title">文字说明</view>

        <view class="tag-group row">
          <view class="tag-container" v-for="(item,index) in tags[0]">
            <view class="tag border-box" :class="{checked:item.checked}" @click="checkboxClick(index)">
              {{ item.name }}
            </view>
          </view>
        </view>
        <u-textarea
            border="none"
            placeholder="请描述您遇到的问题"
            height="220"
            :custom-style="{
                backgroundColor:'#FAFAFA',
                padding:'8rpx 20rpx'
              }"
            v-model="model.line.describe"
        ></u-textarea>
      </u-form-item>

      <u-form-item
          :custom-style="{
                  padding:'0 0 34rpx 0'
              }"
          prop="userInfo.name"
      >
          <view class="upload-container row">
            <view class="row">
              <view class="label-title">上传照片或视频</view>
              <view class="label-desc">(非必填)</view>
            </view>
            <view class="upload-item">
              <view class="upload">
                <u-upload
                    width="160"
                    height="160"
                    :fileList="imageList"
                    name="img"
                    multiple
                    :maxCount="10"
                    :previewFullImage="true"
                    uploadIcon="plus"
                    @afterRead="afterImgRead"
                    @delete="deleteImg"
                ></u-upload>
              </view>
              <view class="title">上传照片</view>
            </view>
            <view class="upload-item">
              <view class="upload">
                <u-upload
                    width="160"
                    height="160"
                    :fileList="videoList"
                    name="video"
                    :maxCount="1"
                    uploadIcon="plus"
                    @afterRead="afterVideoRead"
                    @delete="deleteVideo"
                ></u-upload>
              </view>
              <view class="title">上传视频</view>
            </view>

        </view>
      </u-form-item>
    </u-form>
  </view>
  <view class="foot-button border-box">
    <u-button
        type="primary"
        text="保存"
        shape="circle"
        :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx'
            }"
        @click="submit"
    ></u-button>
  </view>
  <u-picker :show="typeShow"
            :columns="tags"
            keyName="name"
            @close="typeShow = false"
            @cancel="typeShow = false"
            @confirm="selectType"
            @change="changeHandler"></u-picker>

</template>

<script>
import {
  imghost
} from '@/config/host.js'
import api from '@/utils/functions.js';
import MzCard from "@/components/MzCard/index.vue";
import {lineSubmit, lineType} from "@/api/line";
import login from "@/pages/Login/index.vue";


export default {
  components:{
    MzCard
  },
  data() {
    return {
      typeList:[],
      typeShow:false,
      imageList: [],
      videoList: [],
      tags: [],
      tagsData: [],
      fileList1: [],
      model: {
        line: {
          clue_type_id: '',
          phone: '',
          address: '',
          coordinate: '',
          describe: '',
          images: [],
          video: '',
        },
      },
      rules: {
        'line.clue_type_id ': {
          type: 'string',
          required: true,
          message: '请选择线索类型',
          trigger: ['blur', 'change']
        },'line.phone ': {
          type: 'string',
          required: true,
          message: '请填写手机号',
          trigger: ['blur', 'change']
        },'line.address': {
          type: 'string',
          required: true,
          message: '请填写地址',
          trigger: ['blur', 'change']
        },'line.describe ': {
          type: 'string',
          required: true,
          message: '请填写文字说明',
          trigger: ['blur', 'change']
        },
      },
      sexList: [
        {
          id: 1,
          name: '男',
          disabled: false,
        },
        {
          i: 2,
          name: '女',
          disabled: false,
        },
      ],
      list1: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      ],
      title: '暖新人',
      loading: true,
      staticImage: {
        hiImage: imghost + '/static/image/index-user-title-hi.png',
        dogImage: imghost + '/static/image/index-user-title-dog.png',
        couponsImage: imghost + '/static/image/index-user-coupons-background.png',
        indexButtonGroup: [{
          image: imghost + '/static/image/index-five-1.png',
          url: '/pages/Authentication/index',
          title: '丰行侠认证'
        }, {
          image: imghost + '/static/image/index-five-2.png',
          url: '/pages/Index/index',
          title: '顾问认证'
        }, {
          image: imghost + '/static/image/index-five-3.png',
          url: '/pages/Index/index',
          title: '线索上传'
        }, {
          image: imghost + '/static/image/index-five-4.png',
          url: '/pages/Index/index',
          title: '社区顾问库'
        }, {
          image: imghost + '/static/image/index-five-5.png',
          url: '/pages/Index/index',
          title: '暖新服务'
        },
        ],
        wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        bg: imghost + '/static/image/BG.png',
      },
      indexBanner: [
        {
          image: imghost + '/static/image/banner.png',
          url: '',
        }
      ],
      user: {
        avatar: imghost + '/static/image/banner.png',
        nickname: '清晨的风',
        coupons: 221,
        id: 88685
      },
      isTop: false,
      pagePadding: 100,
      userInfo: {},
      userExtends: {},
      size: {
        height: 0
      },
      lat:'',
      lng:'',
      type_name:'',
    }
  },
  onLoad() {

  },
  onReady() {
    let that = this;
    let info = uni.createSelectorQuery().in(this).select('.foot-button');
    info.boundingClientRect(function (data) {
      that.size.height = data.height;
    }).exec(function (res) {});
  },
  methods: {
    //文字说明快速选择
    checkboxClick(index){
      this.tags[index].checked = !this.tags[index].checked;
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    //获取线索类型
    getLineType(){
      lineType({}).then((res) => {
        this.tags[0] = res.data;
        this.tagsData = [];
            res.data.forEach(item => {
              this.tagsData.push(item.children);
            })
        this.tags[1] = this.tagsData[0];
      })
    },
    //选择线索类型
    selectType(e){
      console.log(e)
      this.model.line.clue_type_id = e.value[1].id;
      this.type_name = e.value[1].name;
      this.typeShow = false;
    },
    //上传图片
    async afterImgRead  (event){
      let lists = [].concat(event.file);

      let fileListLen = this.imageList.length;
      lists.map((item) => {
        this.imageList.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {

        api.upfile(lists[i].url).then(res => {
          let item = this.imageList[fileListLen];
          this.imageList.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.show_path,
          });
          fileListLen++;
        })
        // const result = await uploadFilePromise(lists[i].url);

      }
    },
    //上传视频
    async afterVideoRead  (event){
      let lists = [].concat(event.file);

      let fileListLen = this.videoList.length;
      lists.map((item) => {
        this.videoList.push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {

        api.upfile(lists[i].url).then(res => {
          let item = this.videoList[fileListLen];
          this.videoList.splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.show_path,
          });
          fileListLen++;
        })

      }
    },
    //删除上传图片
    deleteImg(event){
      this.imageList.splice(event.index, 1);
    },
    //删除上传视频
    deleteVideo(event){
      this.videoList.splice(event.index, 1);
    },
    //选择地址
    selectAddress() {
      uni.chooseLocation({
        latitude:this.lat||'',
        longitude:this.lng||'',
        success: (res) => {
          this.lat = res.latitude;
          this.lng = res.longitude;
          this.model.line.coordinate = res.latitude+','+res.longitude;
          this.model.line.address  = res.name+res.address;
          // this.getRegionFn(res);
        },
        fail: (err) => {
          console.log(err)
        }
      });
    },
    //提交
    submit(){
      let image = [];
      this.imageList.forEach(item => {
        image.push(item.url)
      });
      this.model.line.images = image;

      let video = [];
      this.videoList.forEach(item => {
        video.push(item.url);
      });
      this.model.line.video = video.join();

      if(!this.model.line.describe){
        let tags = [];
        this.tags.forEach(item => {
          if(item.checked){
            tags.push(item.name);
          }
        });
        this.model.line.describe = tags.join(',');
      }

      console.log(this.model.line)
      lineSubmit(this.model.line).then(res => {
        uni.$u.toast('上传成功');
      });
    },
    changeHandler(e){
      const {
        columnIndex,
        value,
        values,
        index,
        picker
      } = e;
      console.log(e)
      if (columnIndex === 0) {
        console.log(picker)
        this.tags[1] = this.tagsData[index];
      }

    }
  },
  onPageScroll(res) {
    if (res.scrollTop <= 20) {
      uni.$emit('isTop', true);
    } else {
      uni.$emit('isTop', false);
    }

  },
  created() {
    this.pagePadding = (api.navHeight().navPaddingTop +
        api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
  },
  mounted() {
    this.getLineType();
  },
  updated() {

  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.userInfo = newVal;
        this.updateUserInfo();
      }
    },
    "$store.state.userExtends": {
      handler(newVal, oldVal) {
        this.userExtends = newVal;
        this.updateUserInfo();
      }
    }
  }
}
</script>

<style lang="scss">
@import './components/index.scss';

</style>