bigdata_WX/pages/afterSale/addafter.vue

<template>
  <view class="service-sale">
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100">
        <uni-nav-bar
          @clickLeft="clickLeft"
          left-icon="back"
          left-text="返回"
          title="设备报修"
        ></uni-nav-bar>
      </view>
      <view class="addafter_con">
        <view class="addafter_con_top">
          <p>基本信息</p>
          <view class="" style="display: flex; margin-top: 20rpx">
            <span style="color: #ff0000">*</span>
            <input
              type="number"
              v-model="adddata.id"
              placeholder="请填写设备ID"
              placeholder-style="color: #62BF89;font-size:24rpx"
              @blur="addID"
            />
          </view>
          <view class="" style="display: flex; margin-top: 20rpx">
            <span style="color: #ff0000">*</span>
            <!-- <input
              type="select"
              v-model="adddata.type"
              placeholder="请选择设备类型"
              placeholder-style="color: #62BF89;font-size:24rpx"
              disabled
			  style="width:100%"
            /> -->
            <view class="text-input" @click="handleTypeSelect">{{
              adddata.type || '请选择设备类型'
            }}</view>
          </view>
          <view class="" style="display: flex; margin-top: 20rpx">
            <span style="color: #fff">*</span>
            <input
              type="text"
              v-model="adddata.name"
              placeholder="请填写联系人名称"
              placeholder-style="color: #62BF89;font-size:24rpx"
            />
          </view>
          <view class="" style="display: flex; margin-top: 20rpx">
            <span style="color: #ff0000">*</span>
            <input
              type="number"
              v-model="adddata.phone"
              placeholder="请填写联系人电话"
              placeholder-style="color: #62BF89;font-size:24rpx"
              @blur="iphone"
            />
          </view>
          <view class="" style="display: flex; margin-top: 20rpx">
            <span style="color: #fff">*</span>
            <input
              type="text"
              v-model="adddata.site"
              placeholder="请填写联系人地址"
              placeholder-style="color: #62BF89;font-size:24rpx"
            />
          </view>
        </view>
        <view class="addafter_con_connect">
          <image
            :src="
              $imageURL +
              '/bigdata_app/image/afterSale/5d9b8db91f11175aa5277fef40581ab.png'
            "
            mode=""
          ></image>
          <image
            :src="
              $imageURL +
              '/bigdata_app/image/afterSale/5d9b8db91f11175aa5277fef40581ab.png'
            "
            mode=""
          ></image>
        </view>
        <view class="addafter_con_bot">
          <p class="addafter_con_bot_title">报修详情</p>
          <textarea
            v-model="adddata.text"
            placeholder="请描述设备问题"
            class="textarea"
            placeholder-style="color: #62BF89;font-size:26rpx"
          />
          <p style="color: #808080; font-size: 24rpx">
            {{ adddata.text.length }}/140
          </p>
          <view class="imgvideo">
            <view class="imgvideo_img" v-for="(item, index) in 3">
              <view @click="gainimg(index)">
                <image
                  :src="
                    $imageURL +
                    '/bigdata_app/image/afterSale/eee1e84bb85f6f6ff5c5866a3a42779.png'
                  "
                  mode=""
                  v-if="!uploadingTF[index]"
                ></image>
              </view>
              <view class="sim_info_loding" v-if="loding">
                <image
                  src="../../static/images/cb/6286299.gif"
                  mode=""
                  class="img"
                ></image>
              </view>
              <view class="uploading" v-if="uploadingTF[index]">
                <u-icon
                  name="close"
                  class="delete"
                  @click="deletes(index)"
                ></u-icon>
                <image
                  :src="imageList[index]"
                  mode=""
                  class="uploading"
                  @click="examine(imageList[index])"
                ></image>
              </view>
            </view>
            <view class="imgvideo_video" v-for="(item, index) in 1">
              <view @click="gainvideo(index)">
                <image
                  :src="
                    $imageURL +
                    '/bigdata_app/image/afterSale/80314eaa07c32e9c76537a8a8224130.png'
                  "
                  mode=""
                  v-if="!uploadingTF[index + 3]"
                ></image>
              </view>
              <view class="uploading" v-if="uploadingTF[index + 3]">
                <video
                  :src="BASE_URL + selfList"
                  :controls="false"
                  class="uploading"
                ></video>
                <view class="yulan" @click="yulan(index)"> 预览 </view>
                <view class="deletes" @click="deletes(index + 3)"> 删除 </view>
              </view>
            </view>
          </view>
          <button @click="btn" :disabled="btnisTorF">提 交</button>
        </view>
      </view>
    </view>
    <kps-image-cutter
      @ok="onok"
      @cancel="oncancle"
      :url="imgs"
      :fixed="false"
      :blob="false"
      :maxWidth="500"
      :maxHeight="500"
    ></kps-image-cutter>
    <u-modal
      v-model="videoshow"
      :mask-close-able="true"
      :show-confirm-button="false"
      title="视频预览"
      class="model"
    >
      <view class="model_box">
        <video
          :src="'https://web.hnyfwlw.com' + selfList"
          controls
          style="width: 90%"
        ></video>
      </view>
    </u-modal>

    <!-- <u-action-sheet
	  :list="actionSheetList"
	  v-model="show"
	  @click="actionSheetCallback"
	></u-action-sheet> -->
    <u-picker
      v-model="show"
      mode="selector"
      :range="actionSheetList"
      range-key="text"
      @confirm="handleTypeConfirm"
    ></u-picker>
  </view>
</template>
<script>
import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue';
export default {
  components: {
    kpsImageCutter,
  },
  data() {
    return {
      BASE_URL: 'https://web.hnyfwlw.com',
      adddata: {
        //设备参数
        id: '',
        name: '',
        phone: '',
        text: '',
        site: '',
        type: '',
        type_id: '',
      },
      loding: false,
      imageList: [], //图片链接
      uploadingTF: [false, false, false, false, false, false], //图片的删除
      selfList: '', //视频链接
      actionSheetList: [
        //设备选项
        // {
        //   text: '杀虫灯',
        //   id: 2,
        // },
        // {
        //   text: '测报灯',
        //   id: 3,
        // },
        // {
        //   text: '智能性诱',
        //   id: 4,
        // },
        // {
        //   text: '环境监测',
        //   id: 5,
        // },
        // {
        //   text: '监控设备',
        //   id: 6,
        // },
        // {
        //   text: '孢子仪',
        //   id: 7,
        // },
        // {
        //   text: '性诱2.0',
        //   id: 10,
        // },
        // {
        //   text: '水肥一体化',
        //   id: 13,
        // },
        // {
        //   text: '天牛监测设备',
        //   id: 32,
        // },
        // {
        //   text: '色诱测报设备2.0',
        //   id: 33,
        // },
        // {
        //   text: '色诱测报设备1.0',
        //   id: 34,
        // },
        // {
        //   text: '虫情测报设备5.0',
        //   id: 35,
        // },
      ],
      columns: [],
      show: false, //选择器的显示
      btnisTorF: false,
      deviceid: false, //设备号判断
      imageFile: [],
      phoneTF: true, //手机号判断
      imgs: '',
      imgindex: null,
      videoindex: 0,
      videoshow: false,
    };
  },
  onLoad(option) {
    if (option.device_id) {
      this.getDeviceTypeList().then(() => {
        console.log(option);
        this.adddata.id = option.device_id;
        var typedata = this.actionSheetList.filter((item) => {
          return item.id == Number(option.device_type);
        });
        console.log(typedata);
        this.adddata.type = typedata[0].text;
        this.adddata.type_id = typedata[0].id;
      });
    } else {
      this.getDeviceTypeList();
    }
  },
  methods: {
    async getDeviceTypeList() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=home.homes.user_device_type',
      });

      console.log(res);

      this.actionSheetList = (res || []).map((item) => {
        return {
          ...item,
          text: item.type_name,
        };
      });

      this.columns = [this.actionSheetList];

      return res;
    },
    clickLeft() {
      //返回
      uni.navigateBack({
        delta: 1,
      });
    },
    gainimg(index) {
      //添加图片
      this.imgindex = index;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: (res) => {
          this.imgs = res.tempFilePaths[0];
          this.loding = true;
        },
      });
    },
    gainvideo(index) {
      //添加视频
      uni.chooseVideo({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          console.log(res);
          uni.uploadFile({
            url: 'https://web.hnyfwlw.com/api/api_gateway?method=after_sale.after_sale_manage.video_upload', //仅为示例，非真实的接口地址
            filePath: res.tempFilePath,
            name: 'upload',
            fileType: 'video',
            formData: {
              user: 'test',
            },
            success: (uploadFileRes) => {
              console.log(uploadFileRes);
              if (uploadFileRes.statusCode == 200) {
                this.selfList = JSON.parse(uploadFileRes.data).data.data.src;
                this.$forceUpdate(); //强制刷新视图
                this.uploadingTF[index + 3] = true;
              } else {
                uni.showToast({
                  title: '请将视频压缩后上传!',
                  duration: 2000,
                  icon: 'none',
                });
              }
            },
          });
        },
      });
    },
    deletes(index) {
      //删除
      this.uploadingTF[index] = false;
      if (index == 3) {
        this.selfList = '';
      } else {
        this.imageList.splice(index, 1);
      }
      this.$forceUpdate(); //强制刷新视图
    },
    async getaddafter(data) {
      //提交数据
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=after_sale.after_sale_manage.aftersale_apply',
        data: {
          device_id: data.id,
          d_type: data.type,
          errordesc: data.text,
          errorimg: data.imageList,
          errorvideo: data.selfList,
          addr: data.site,
          user: data.name,
          userphone: data.phone,
          is_pc: 0,
        },
      });
      console.log(res);
      if (res) {
        uni.showToast({
          title: '提交成功',
          duration: 2000,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      } else {
        uni.showToast({
          title: '提交失败',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    async getID(data) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=after_sale.after_sale_manage.device_check',
        data: {
          device_id: data,
        },
      });
      if (res != '') {
        this.deviceid = false;
      } else {
        this.deviceid = true;
      }
    },
    btn() {
      //提交按钮
      this.getID(this.adddata.id);
      let obj = {};
      obj.id = this.adddata.id;
      obj.type = this.adddata.type_id;
      obj.text = this.adddata.text;
      if (this.imageList.length == 0) {
        obj.imageList = '';
      } else {
        obj.imageList = JSON.stringify(this.imageList);
      }
      obj.site = this.adddata.site;
      obj.name = this.adddata.name;
      obj.phone = this.adddata.phone;
      obj.selfList = this.selfList;
      console.log(this.selfList);
      // 设备号错误
      if (this.deviceid) {
        uni.showToast({
          title: '设备号错误',
          duration: 2000,
          icon: 'none',
        });
      } else if (this.adddata.type_id == '') {
        uni.showToast({
          title: '设备类型不能为空',
          duration: 2000,
          icon: 'none',
        });
      } else if (this.phoneTF) {
        uni.showToast({
          title: '请输入正确的手机号',
          duration: 2000,
          icon: 'none',
        });
      } else {
        console.log(obj);
        this.getaddafter(obj);
      }
    },
    actionSheetCallback(index) {
      //选择器选择
      this.adddata.type = this.actionSheetList[index].text;
      this.adddata.type_id = this.actionSheetList[index].id;
    },
    handleTypeConfirm(e) {
      const index = e[0];
      //选择器选择
      this.adddata.type = this.actionSheetList[index].text;
      this.adddata.type_id = this.actionSheetList[index].id;
    },
    iphone() {
      //检测手机
      if (!/^1[23456789]\d{9}$/.test(this.adddata.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          duration: 2000,
          icon: 'none',
        });
        this.phoneTF = true;
      } else {
        this.phoneTF = false;
      }
    },
    addID() {
      this.getID(this.adddata.id);
    },
    examine(url) {
      var imgarr = [];
      imgarr.push(url);
      console.log(imgarr);
      uni.previewImage({
        urls: imgarr,
      });
    },
    onok(ev) {
      uni.uploadFile({
        url: 'https://web.hnyfwlw.com/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
        filePath: ev.path,
        name: 'img_file',
        formData: {
          user: 'test',
        },
        success: (uploadFileRes) => {
          this.imageList[this.imgindex] = JSON.parse(
            uploadFileRes.data,
          ).data.src;
          this.$forceUpdate(); //强制刷新视图
          this.uploadingTF[this.imgindex] = true;
          this.loding = false;
        },
      });
      this.imgs = '';
    },
    oncancle() {
      this.imgs = '';
    },
    yulan(index) {
      this.videoindex = index;
      this.videoshow = !this.videoshow;
    },
    handleTypeSelect() {
      console.log('type click');
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  min-height: 100vh;
  background-color: #71cd9a;
}

.service-sale {
  // height: 100vh;
}

.addafter_con {
  width: 100%;
  position: absolute;
  top: 54px;
  .addafter_con_top {
    width: 90%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 16rpx 30rpx 36rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    p {
      text-align: center;
      font-size: 30rpx;
      color: #62bf89;
    }
    input {
      width: 95%;
      background-color: #f1faf5;
      color: #62bf89;
      font-size: 26rpx;
      padding: 8rpx 26rpx;
      border-radius: 20rpx;
    }

    .text-input {
      width: 95%;
      background-color: #f1faf5;
      color: #62bf89;
      font-size: 26rpx;
      padding: 8rpx 26rpx;
      border-radius: 20rpx;
    }
  }
  .addafter_con_connect {
    width: 90%;
    margin: -20rpx auto;
    display: flex;
    justify-content: space-between;
    padding: 0 16rpx;
    box-sizing: border-box;
    image {
      width: 20rpx;
      height: 60rpx;
    }
  }
  .addafter_con_bot {
    width: 90%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 30rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    .addafter_con_bot_title {
      text-align: center;
      font-size: 30rpx;
      color: #62bf89;
    }
    .textarea {
      width: 94%;
      height: 240rpx;
      padding: 20rpx;
      background-color: #f1faf5;
      margin-top: 20rpx;
      font-size: 26rpx;
      border-radius: 20rpx;
      color: #62bf89;
    }
  }
  .imgvideo {
    width: 100%;
    margin-top: 20rpx;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    .imgvideo_img,
    .imgvideo_video {
      width: 30%;
      height: 160rpx;
      border: 2rpx dashed #a3dabd;
      text-align: center;
      line-height: 160rpx;
      margin: 0 8rpx 20rpx 8rpx;
      position: relative;
      image {
        width: 40rpx;
        height: 32rpx;
      }
      .sim_info_loding {
        width: 100%;
        height: 160rpx;
        position: absolute;
        top: 0;
        left: 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .uploading {
        width: 100%;
        height: 160rpx;
        position: absolute;
        top: 0;
        left: 0;
      }
      .delete {
        position: absolute;
        top: -12rpx;
        right: -12rpx;
        font-size: 36rpx;
        background-color: #fe0000;
        border-radius: 50%;
        color: #ffffff;
        z-index: 50;
      }
      .deletes {
        width: 80%;
        height: 50rpx;
        margin-left: 110%;
        font-size: 24rpx;
        background-color: #fe0000;
        color: #fffdef;
        line-height: 50rpx;
      }
      .yulan {
        width: 80%;
        height: 50rpx;
        margin: 0 0 20rpx 110%;
        font-size: 24rpx;
        background-color: #62bf89;
        color: #fffdef;
        line-height: 50rpx;
      }
    }
  }
  button {
    width: 100%;
    height: 60rpx;
    font-size: 30rpx;
    line-height: 60rpx;
    color: #ffffff;
    background-color: #50ce87;
    margin-top: 60rpx;
  }
}
.model {
  width: 90%;
  .model_box {
    width: 90%;
    margin: 40rpx auto 48rpx;
    display: flex;
    justify-content: center;
  }
}

::v-deep .u-drawer {
  &__scroll-view {
    max-height: 80vh;
    height: 50vh;
  }
}
::v-deep .uni-scroll-view-content {
  overflow-y: scroll;
  // background-color: #00f;
}
</style>