guzijian / garbage-removal · Files

<template>
  <view class="company-clean-container">
    <view class="company-clean-container-box">
      <view class="company-clean-container-header">
        <view class="company-clean-container-header-address">
          {{ userAddress.garUserAddress }}{{ userAddress.garRemark }}
        </view>
        <view class="company-clean-container-header-base-info">
          {{ userAddress.garUserContactName }} {{ userAddress.garUserContactTel }}
        </view>
        <view class="company-clean-container-header-reservation">
          <view class="company-clean-container-header-reservation-left">
            <text style="color: red;">*</text> <u-icon name="calendar" size="40"></u-icon>预约时间
          </view>
          <view class="company-clean-container-header-reservation-right">
            <text style="margin-right: 10rpx;" @click="handleTimeChoose">{{ dayTime ? dayTime : "请选择时间" }}</text> <u-icon
              name="arrow-right" size="25"></u-icon>
            <liu-delivery-time @change="changeTime" ref="chooseTime" title="请选择预约时间"></liu-delivery-time>
          </view>
        </view>
      </view>
      <view class="company-clean-container-car-main">
        <!-- <view class="company-clean-container-car-main-title">
          自卸车
        </view> -->
        <view class="company-clean-container-car-main-content">
          <view class="company-clean-container-car-main-content-type">
            <text class="company-clean-container-car-main-content-type-price-area"><text
                style="color: red;">*</text>垃圾类型:</text>
            <uni-combox label="" :candidates="garbageTypeList" placeholder="请选择垃圾类型"
              v-model="paramFrom.garbageType"></uni-combox>
          </view>
          <!-- <view class="company-clean-container-car-main-content-img">
            <image class="company-clean-container-car-main-content-img" />
          </view>
          <view class="company-clean-container-car-main-content-remark">
            箱体长4.2m宽1.1，高0.7，最多课容纳约110袋袋装修垃圾（75cm*45每袋）
          </view> -->
          <view class="company-clean-container-car-main-content-type">
            <text class="company-clean-container-car-main-content-type-price-area"><text
                style="color: red;">*</text>车辆类型:</text>
            <uni-combox label="" :candidates="candidates" placeholder="请选择运输车辆类型"
              v-model="paramFrom.carType"></uni-combox>
          </view>
          <view class="company-clean-container-car-main-content-number">
            <view class="company-clean-container-car-main-content-number-txt">
              <text style="color: red;">*</text>添加车辆数量
            </view>
            <view class="company-clean-container-car-main-content-number-button">
              <u-number-box :min="1" integer buttonSize="46" v-model="paramFrom.carNumber"></u-number-box>
            </view>
          </view>
          <view class="company-clean-container-car-main-content-prompt">
            温馨提示：垃圾类型不符合，有权拒绝清运。
          </view>
        </view>
      </view>
      <view class="company-clean-container-site-image-info">
        <view class="company-clean-container-site-image-info-remark">
          <text style="color: red;">*</text>现场照片（最多上传10张）
        </view>
        <view class="company-clean-container-site-image-info-img">
          <u-upload width="200" height="150" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3"
            multiple :maxCount="10" :previewFullImage="true"></u-upload>
        </view>
        <view class="company-clean-container-site-image-info-input-remark">
          填写备注
        </view>
        <view class="company-clean-container-site-image-info-input-remark-box">
          <u--textarea v-model="paramFrom.remark" placeholder="请输入内容"></u--textarea>
        </view>
      </view>
      <view class="company-clean-container-site-image-info-sure-button">
        <view class="company-clean-container-site-image-info-sure-button-radio">
          <u-checkbox-group v-model="paramFrom.sureReadFlag" placement="row">
            <u-checkbox activeColor="#a9e08f" size="25" labelSize="25" shape="circle" @change="changeAgree" :key="0"
              :name="true" :labelDisabled="true" labelColor="#909399"
              label="本人已确认信息真实有效，并将上述信息告知市容环境卫生主管部门。"></u-checkbox>
          </u-checkbox-group>
        </view>
      </view>
    </view>
    <view class="company-clean-bottom">
      <movable-area ref="movableAreaElement" class="movableArea">
        <movable-view class="movableView" :x="x" :y="y" direction="all" @change="onChange">
          <view class="company-clean-call-box-container">
            <u-icon @click="handleContactClick(tel)" name="phone-fill" color="#ffffff" size="50"></u-icon>
          </view>
        </movable-view>
      </movable-area>
      <view class="company-clean-bottom-box">
        <view class="company-clean-bottom-left">
          <u-icon @click="handleCarInfo" :stop="true" size="50" name="car-fill"></u-icon>
        </view>
        <view class="company-clean-bottom-right">
          <u-button @click="handleOderSure" shape="circle" color="#a9e08f" text="立即派单"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { queryCarList } from '@/apis/carinfo.js';
import { uploadFilePromise } from '@/apis/common.js';
import { saveOrder } from '@/apis/order.js';
import liuDeliveryTime from "@/components/liu-delivery-time/liu-delivery-time.vue";
import uniCombox from "@/components/uni-combox/index.vue";
import { onLoad } from '@dcloudio/uni-app';
import { getCurrentInstance, onMounted, ref } from 'vue';
const { proxy } = getCurrentInstance();
const x = ref(5)
const y = ref()
const movableAreaElement = ref()
const companyObj = ref()
const tel = ref()
const userAddress = ref({
  garUserContactName: "",
  garUserContactTel: "",
  garRemark: "",
  garUserAddress: ""
})
const garbageTypeList = ref(["建筑垃圾", "装修垃圾"])
const paramFrom = ref({
  carNumber: 1,
  remark: "",
  sureReadFlag: [],
  carType: "",
  garbageType: "装修垃圾"
})
const dayTime = ref()

const chooseTime = ref()
const fileList = ref([])
const candidates = ref([])
const handleTimeChoose = () => {
  chooseTime.value.open();
}

const changeTime = (e) => {
  dayTime.value = e.value
}
const changeAgree = (e) => {
  // paramFrom.value.sureReadFlag = e
}
const onChange = (e) => {
  // console.log(e);
}
/**
 * 初始化信息
 */
onLoad((options) => {
  companyObj.value = JSON.parse(options.companyObj);
  tel.value = options.tel;
  userAddress.value = JSON.parse(options.userAddress);
  queryCarList({ companyId: companyObj.value.id }).then(res => {
    candidates.value = [...new Set(res.data.rows.map(item => item.carType))];
  })
})

/**
 * 拨打电话回调
 */
const handleContactClick = (val) => {
  uni.makePhoneCall({ phoneNumber: val }).then(res => {
  }).catch(err => { });
}

// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    let requestPath = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_BASE_FILE_UPLOAD_PREFIX;
    const result = await uploadFilePromise(requestPath, lists[i].url);
    let item = fileList.value[fileListLen];
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result.data.fileName,
    });
    fileListLen++;
  }
};



/**
 * 处理车子数量
 */
const handleCarInfo = () => {

}

/**
 * 处理下单
 */
const handleOderSure = () => {
  let params = {
    /**
     * 订单地址
     */
    garOrderAddress: userAddress.value.garUserAddress,

    /**
     * 订单详细地址
     */
    garOrderAddressDetails: userAddress.value.garRemark,

    /**
     * 订单姓名
     */
    garOrderContactName: userAddress.value.garUserContactName,
    garOrderCarNumber: paramFrom.value.carNumber,
    garOrderCarType: paramFrom.value.carType,

    /**
     * 垃圾类型
     */
    garOrderTrashType: paramFrom.value.garbageType,

    /**
     * 订单人电话
     */
    garOrderContactTel: userAddress.value.garUserContactTel,

    /**
     * 承接经营单位
     */
    garOrderCompanyId: companyObj.value.id,

    /**
     * 公司名称
     */
    garOrderCompanyName: companyObj.value.name,

    /**
     * 公司负责人电话
     */
    garOrderCompanyTel: companyObj.value.safetyManagerPhone,

    /**
     * 约定时间
     */
    garOrderAgreementTime: dayTime.value,
    /**
     * 备注
     */
    garRemark: paramFrom.value.remark,
    /**
   * 图片列表
   */
    imageUrls: fileList.value.map(item => item.url),
  }
  if (!validateParams(params)) {
    return;
  }
  saveOrder(params).then(res => {
    // TODO 订单详情
    if (res.data.success) {
      uni.$u.route({
        type: "redirect",
        url: `pages/order/detail/index`,
        params: {
          orderId: res.data.data
        }
      })
    }
    uni.$u.toast(res.data.msg)
  })

}

onMounted(() => {
  let areaHeight;
  // select中的参数就如css选择器一样选择元素
  let movableArea = uni.createSelectorQuery().in(proxy).select(".movableArea");
  movableArea.boundingClientRect(function (data) {
    //	data - 包含元素的高度等信息
    areaHeight = data.height;
    y.value = areaHeight > 20 ? (areaHeight - 20) : areaHeight;
  }).exec(function (res) {
    // 注意：exec方法必须执行，即便什么也不做，否则不会获取到任何数据
  })
})

/**
 * 校验参数
 * @param {Object} params
 */
const validateParams = (params) => {
  if (!paramFrom.value.sureReadFlag[0]) {
    jumpPrompt('请勾选"本人已确认信息真实有效，并将上诉信息告知市容环境卫生主管部门"')
    return false;
  }
  for (const key in params) {
    if (!params[key] && key != "garRemark") {
      switch (key) {
        case "garOrderAgreementTime":
          jumpPrompt('请选择预约时间')
          break;
        case "garOrderTrashType":
          jumpPrompt('请选择垃圾类型')
          break;
        case "garOrderCarType":
          jumpPrompt('请选择车辆类型')
          break;
      }
      return false;
    }
    if (key == "imageUrls") {
      if (params[key].length == 0) {
        jumpPrompt('请上传现场图片')
        return false;
      }
      if (!validateImage(params[key])) {
        uni.$u.toast('请等待图片上传完毕')
        return false;
      }
    }
  }
  return true;
}

const jumpPrompt = (msg) => {
  uni.showModal({
    title: '提示',
    content: msg,
    showCancel: false,
    success: function (res) {
      if (res.confirm) {
      } else if (res.cancel) {
      }
    }
  });
}
const validateImage = (fileList) => {

  for (let index = 0; index < fileList.length; index++) {
    const str = fileList[index];
    // #ifdef H5
    if (str.startsWith("blob")) {
      return false;
    }
    // #endif
    // #ifdef MP-WEIXIN
    if (uni.$u.test.contains(str, "/tmp/")) {
      return false;
    }
    // #endif

  }
  //
  // #ifdef

  return true;
}

</script>

<style lang="scss" scoped>
$custom-marin-bottom: 20rpx;
$custom-page-padding: 20rpx;
$custom-border-radio: 20rpx;
$custom-bottom-height: 200rpx;

.company-clean-container {
  height: 100%;
  width: 100%;
  background-color: $u-info-light;
  box-sizing: border-box;
  overflow-y: scroll;


  .company-clean-container-box {
    height: 100%;
    width: 100%;
    padding: $custom-page-padding;
    box-sizing: border-box;

    .company-clean-container-header {
      padding: $custom-page-padding;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: $custom-border-radio;
      margin-bottom: $custom-marin-bottom;

      .company-clean-container-header-address {
        font-size: 30rpx;
        font-weight: bold;
        color: $u-main-color;
      }

      .company-clean-container-header-base-info {
        font-size: 25rpx;
        color: $u-info;
        line-height: 80rpx;
      }

      .company-clean-container-header-reservation {
        display: flex;
        justify-content: space-between;
        font-size: 25rpx;


        .company-clean-container-header-reservation-left {
          display: flex;
          align-items: center;
          color: $u-content-color;
        }

        .company-clean-container-header-reservation-right {
          display: flex;
          align-items: center;
          color: $u-content-color;
        }
      }


    }

    .company-clean-container-car-main {
      padding: $custom-page-padding;
      border-radius: $custom-border-radio;
      box-sizing: border-box;
      background-color: #ffffff;
      margin-bottom: $custom-marin-bottom;

      .company-clean-container-car-main-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #a9e08f;
        display: flex;
        justify-content: center;
      }

      .company-clean-container-car-main-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .company-clean-container-car-main-content-img {
          width: 600rpx;
          height: 400rpx;

          .company-clean-container-car-main-content-img {
            width: 600rpx;
            height: 400rpx;
          }
        }

        .company-clean-container-car-main-content-remark {
          color: $u-tips-color;
          font-size: 23rpx;
          line-height: 30rpx;
          padding: $custom-page-padding;
          background-color: $u-info-light;
          word-break: break-all;
        }

        .company-clean-container-car-main-content-type {
          margin-top: $custom-marin-bottom;
          margin-bottom: $custom-marin-bottom;
          display: flex;
          justify-content: space-between;
          border-radius: $custom-border-radio;
          // background-color: $u-info-light;
          box-sizing: border-box;

          .company-clean-container-car-main-content-type-price-area {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: $u-info;
            white-space: nowrap;
          }
        }

        .company-clean-container-car-main-content-number {
          display: flex;
          justify-content: space-between;
          font-size: 28rpx;
          color: $u-tips-color;
          font-weight: small;
          align-items: center;

          .company-clean-container-car-main-content-number-txt {
            line-height: 80rpx;
          }

          .company-clean-container-car-main-content-number-button {}
        }
      }


    }

    .company-clean-container-car-main-content-prompt {
      color: $u-tips-color;
      font-size: 23rpx;
      line-height: 30rpx;
      padding: $custom-page-padding;
      word-break: break-all;
      text-align: center;
    }

    .company-clean-container-site-image-info {
      padding: $custom-page-padding;
      background-color: #ffffff;
      border-radius: $custom-border-radio;
      color: $u-info;
      font-size: 28rpx;
      margin-bottom: $custom-marin-bottom;

      .company-clean-container-site-image-info-remark {
        line-height: 80rpx;

      }

      .company-clean-container-site-image-info-img {}

      .company-clean-container-site-image-info-input-remark {
        line-height: 80rpx;
      }

      .company-clean-container-site-image-info-input-remark-box {}
    }

    .company-clean-container-site-image-info-sure-button {
      padding-bottom: $custom-bottom-height;
      font-size: 28rpx;

      .company-clean-container-site-image-info-sure-button-radio {
        padding: $custom-page-padding;
        box-sizing: border-box;
        // display: flex;
        // flex-flow: row wrap;
        color: $u-info;
      }
    }


  }




  .company-clean-bottom {
    position: absolute;
    width: 100%;
    // height: 100%;
    bottom: 0;
    left: 0;

    .movableArea {
      pointer-events: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: calc(100% - $custom-bottom-height);
      z-index: 999;

      .movableView {
        pointer-events: auto;
        min-height: 60rpx;
        min-width: 60rpx;

        .company-clean-call-box-container {
          min-height: 60rpx;
          min-width: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #a9e08f;
          border-radius: 100%;
        }
      }
    }

    .company-clean-bottom-box {
      height: $custom-bottom-height;
      background-color: #ffffff;
      padding: 50rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .company-clean-bottom-left {
        transform: rotateY(180deg);
      }

      .company-clean-bottom-right {
        min-width: 200rpx;
      }
    }

  }


}
</style>