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  :border="false" >
          <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; " suffixIcon="arrow-right"
                    :icon-style="{color:'#020B18'}" @click="showTypePicker"></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; " suffixIcon="arrow-right"
                    :icon-style="{color:'#AFB5BE'}" @click="showTypePicker"></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  :border="false">
          <template #title>
            <u-text v-if="model.line.address" :text="model.line.address" size="28" color="#020B18" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; " suffixIcon="arrow-right"
                    :icon-style="{color:'#020B18'}" @click="selectAddress"></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; " suffixIcon="arrow-right"
                    :icon-style="{color:'#AFB5BE'}" @click="selectAddress"></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 fastTags">
            <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
                    accept="video"
                    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>
  <uv-picker
      ref="typePicker"
      :show="typeShow"
      :columns="tags"
      keyName="name"
      @close="typeShow = false"
      @cancel="typeShow = false"
      @confirm="selectType"
      @change="changeHandler"></uv-picker>
  <u-popup :show="popDone" mode="center"  @close="close" @open="open" round="20">
    <view class="pop-container" style="padding:98rpx 40rpx 48rpx 40rpx;">
      <view class="icon-container" style="margin-bottom: 26rpx;">
        <view class="icon" style="text-align: center;margin-bottom: 24rpx;">
          <u-image :src="staticImage.lineSubmit" mode="widthFix" width="260" height="240" custom-style="margin: auto;"></u-image>
        </view>
        <view class="title">
          <u-text text="上传成功" size="32" color="#020b18" align="center"></u-text>
        </view>
      </view>
      <view class="body-container">
        <view class="title-group">
          <view class="title" style="margin-bottom:18rpx;">
            <u-text text="丰行侠 您好！" size="32" color="#020b18" align="left"></u-text>
          </view>
        </view>
        <view class="content-group" style="margin-bottom:80rpx;">
          <view class="content">
            <u-text text="·  感谢您提交的线索" size="28" color="#AFB5BE" align="left" line-height="48"></u-text>
          </view>
          <view class="content">
            <u-text text="·  我们会第一时间派发处理" size="28" color="#AFB5BE" align="left" line-height="48"></u-text>
          </view>
          <view class="content">
            <u-text text="·  结案后您可获得对应的暖新币" size="28" color="#AFB5BE" align="left" line-height="48"></u-text>
          </view>
          <view class="content row">
            <u-text text="·  " size="28" color="#AFB5BE" align="left" line-height="48"></u-text>
            <view class="" style="color:#AFB5BE;font-size:28rpx; line-height:1.5;">
              请您在 <text style="color:#FF9545;">我的-我的线索</text> 随时关注线索进度
            </view>
          </view>
        </view>
        <view class="button">
          <u-button
              type="primary"
              text="确定"
              shape="circle"
              :custom-style="{
              color:'#020B18',
              backgroundColor:'#FF9545',
              border:'none',
              fontSize:'36',
              fontWeight:'400',
              height:'80rpx',
              width:'320rpx'
            }"
              @click="submitDone"
          ></u-button>
        </view>
      </view>
    </view>
  </u-popup>
</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";
import {userExtends} from "@/api/user";


export default {
  components:{
    MzCard
  },
  data() {
    return {
      popDone:false,
      typeList:[],
      typeShow:false,
      imageList: [],
      videoList: [],
      fastTags: [],
      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 + '/index-user-title-hi.png',
        dogImage: imghost + '/index-user-title-dog.png',
        couponsImage: imghost + '/index-user-coupons-background.png',
        lineSubmit: imghost + '/line-submit.png',
        indexButtonGroup: [{
          image: imghost + '/index-five-1.png',
          url: '/pages/Authentication/index',
          title: '丰行侠认证'
        }, {
          image: imghost + '/index-five-2.png',
          url: '/pages/Index/index',
          title: '顾问认证'
        }, {
          image: imghost + '/index-five-3.png',
          url: '/pages/Index/index',
          title: '线索上传'
        }, {
          image: imghost + '/index-five-4.png',
          url: '/pages/Index/index',
          title: '社区顾问库'
        }, {
          image: imghost + '/index-five-5.png',
          url: '/pages/Index/index',
          title: '暖新服务'
        },
        ],
        wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        bg: imghost + '/BG.png',
      },
      indexBanner: [
        {
          image: imghost + '/banner.png',
          url: '',
        }
      ],
      user: {
        avatar: imghost + '/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: {
    showTypePicker(){
      this.$refs.typePicker.setColumnValues(0, this.tags[0])
      this.$refs.typePicker.setColumnValues(1, this.tagsData[0])
      this.$refs.typePicker.open();
    },
    //文字说明快速选择
    checkboxClick(index){
      this.fastTags[index].checked = !this.fastTags[index].checked;
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    //获取线索类型
    getLineType(){
      lineType({}).then((res) => {
        this.tags[0] = res.data;
        this.fastTags = res.data.map(item => {
          return {
            name:item.name,
            checked:false,
          }
        });
        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.uploadOssFile(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.uploadOssFile(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() {
      let that = this;
      uni.getLocation({
        type: 'gcj02',
        success: function (res1) {
          uni.chooseLocation({
            latitude:res1.latitude||'',
            longitude:res1.longitude||'',
            success: (res) => {
              that.lat = res.latitude;
              that.lng = res.longitude;
              that.model.line.coordinate = res.latitude+','+res.longitude;
              that.model.line.address  = res.name+res.address;
              // this.getRegionFn(res);
            },
            fail: (err) => {
              console.log(err)
            }
          });
        },
      });

    },
    //提交
    submit(){
      let userInfo = uni.getStorageSync('user');
      if(userInfo){
        if(userInfo?.fxx?.number){

        }else{
              uni.$u.toast('您不是丰行侠,请点击首页丰行侠认证');
          return false;
        }
      }else{
        this.navTo('/pages/Login/index')
      }
      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();

      console.log(123)
      if(!this.model.line.describe){
        console.log(456)
        let tags = [];
        this.fastTags.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 => {
        if (res.code === 200){
          // uni.$u.toast('上传成功');
          this.popDone = true;
        }else{
          uni.$u.toast(res.msg);
        }

      });
    },
    changeHandler(e){
      const {
        columnIndex,
        index
      } = e;
      console.log(e)
      if (columnIndex === 0) {
        this.tags[1] = this.tagsData[index];
        this.$refs.typePicker.setColumnValues(1, this.tagsData[index])
      }

    },
    submitDone(){
      this.popDone = false;
      uni.redirectTo({
        url:'/pages/Line/user'
      })
    },
    getUserExtend() {
      userExtends().then((res) => {
        if(res.code === 200){
          this.model.line.phone = res.data.phone;
          uni.setStorageSync('user', res.data);
          this.$store.commit('userInfo', res.data);
        }
      });
    }
  },
  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.getUserExtend();
    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>