qianzhi-message/TUIKit/components/TUIChat/message-list/interview-application.vue

<template>
  <div>
    <BottomPopup
      :show="showDialog"
      @touchmove.stop.prevent
      @onClose="onPopupClose"
      :borderRadius="12"
    >
      <div :class="['evaluate', !isPC && 'evaluate-h5']">
        <div :class="['evaluate-header', !isPC && 'evaluate-h5-header']">
          <div
            :class="[
              'evaluate-header-content',
              !isPC && 'evaluate-h5-header-content',
            ]"
          >
            面试预约
          </div>
        </div>
        <div
          v-if="!isPC"
          :class="[
            'evaluate-header-close',
            !isPC && 'evaluate-h5-header-close',
          ]"
          @click="ShowDialogClose"
        >
          <image
            src="@/static/images/company/close.png"
            mode=""
            style="width: 30px; height: 30px"
          />
        </div>
        <div :class="['evaluate-content', !isPC && 'evaluate-h5-content']">
          <div class="item">
            <div class="label">预约日期:</div>
            <picker
              class="picker"
              mode="date"
              :value="params.date"
              @change="bindDateChange"
            >
              <view class="uni-input">{{
                params.date ? params.date : "请选择预约日期"
              }}</view>
            </picker>
          </div>
          <div class="item">
            <div class="label">预约时间:</div>
            <picker
              class="picker"
              mode="time"
              :value="params.time"
              @change="bindTimeChange"
            >
              <view class="uni-input">{{
                params.time ? params.time : "请选择预约时间"
              }}</view>
            </picker>
          </div>

          <div class="item">
            <div class="label">面试地址:</div>
            <input
              @tap="inputClick"
              style="
                height: 40px;
                width: 94%;
                background: #f8f8f8;
                text-align: left;
                line-height: 39px;
                padding: 0px 11px;
              "
              @input="replaceInputPerson"
              :value="params.interviewAddress"
              focus
              placeholder="请选择面试地址"
            />
          </div>

          <div class="item">
            <div class="label">联系人:</div>
            <input
              style="
                height: 40px;
                width: 94%;
                background: #f8f8f8;
                text-align: left;
                line-height: 39px;
                padding: 0px 11px;
              "
              @input="replaceInputlxr"
              :value="params.contact"
              focus
              placeholder="联系人"
            />
          </div>
          <div class="item">
            <div class="label">联系电话:</div>
            <input
              style="
                height: 40px;
                width: 94%;
                background: #f8f8f8;
                text-align: left;
                line-height: 39px;
                padding: 0px 11px;
              "
              @input="replaceInputPhone"
              :value="params.contactMobile"
              focus
              placeholder="联系电话"
            />
          </div>
          <div class="item">
            <div class="label">信息费:</div>
            <div style="color: red">{{ userInfo.hc ? userInfo.hc : 0 }}元</div>
          </div>
          <div
            :class="[
              'evaluate-content-button',
              !isPC && 'evaluate-h5-content-button',
            ]"
          >
            <button :class="['btn', 'btn-valid']" @click="submitEvaluate">
              确定
            </button>
          </div>
        </div>
      </div>
    </BottomPopup>
  </div>
</template>

<script>
import {
  TUITranslateService,
  TUIStore,
  StoreName,
  IConversationModel,
  TUIChatService,
  SendMessageParams,
} from "@tencentcloud/chat-uikit-engine";
import config from "@/request/config";
import BottomPopup from "../../../components/common/BottomPopup/indexYQ.vue";
export default {
  components: { BottomPopup },
  props: ["showDialog", "jobInfoData", "mapAddress"],
  data() {
    return {
      isPC: false,
      inpvalue: "",
      comment: "",
      params: {
        date: "",
        time: "",
        companyUserId: "",
        contact: "",
        contactMobile: "",
        interviewAddress: "",
        interviewStatus: "0",
        interviewTime: "",
        postId: "",
        recruitUserId: "",
        lat: "",
        lng: "",
      },
      userInfo: {},
      addressObj: {},
    };
  },
  watch: {
    jobInfoData: {
      handler(val) {
        this.userInfo = val;
      },
      immediate: true,
      deep: true,
    },
    mapAddress: {
      handler(val) {
        this.addressObj = val;
        let list = this.addressObj.location.split(",");
        this.params.interviewAddress =
          this.addressObj.district +
          this.addressObj.address +
          this.addressObj.name;
        this.params.lng = list[0];
        this.params.lat = list[1];
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    inputClick() {
      uni.navigateTo({
        url: `/pages/merChantSide/map`,
      });
    },
    replaceInputlxr(val) {
      this.params.contact = val.detail.value;
    },
    replaceInputPerson(val) {
      this.params.interviewAddress = val.detail.value;
    },
    replaceInputPhone(val) {
      this.params.contactMobile = val.detail.value;
    },
    bindDateChange(val) {
      this.params.date = val.detail.value;
    },
    bindTimeChange(val) {
      this.params.time = val.detail.value;
    },
    ShowDialogClose() {
      this.$emit("close", false);
    },
    submitEvaluate() {
      let that = this;
      console.log("xxxxx", this.userInfo);

      this.params.companyUserId = uni.getStorageSync("userId");
      this.params.recruitUserId = this.userInfo.recruitUserId;

      this.params.interviewTime = this.params.date + " " + this.params.time;
      this.params.postId = this.userInfo.postId;
      this.params.resumeId = this.userInfo.resumeId;
      const header = {
        "Content-Type": "application/json",
        Authorization: uni.getStorageSync("token")
          ? uni.getStorageSync("token")
          : uni.getStorageSync("unitoken"),
      };
      that.$emit("onload", true);
      that.$emit("close", false);
      uni.request({
        url: config.baseUrl + "/recruit/companyInterview/invite",
        method: "post",
        header: header,
        data: that.params,
        //请求成功后返回
        success: (res) => {
          console.log(res);
          if (res.data.code == 200) {
            uni.$u.toast("发送成功！");
            that.params.interviewAddress = "";
          } else {
            uni.$u.toast(res.data.msg);
          }
        },
        fail: (error) => {
          console.log(error);
          uni.showToast({
            title: error.data.msg,
            //显示持续时间为 2秒
            duration: 2000,
          });
        },
      });
      that.$emit("onload", true);
      that.$emit("close", false);
    },
  },
};
</script>
<style scoped lang="scss">
.picker {
  height: 40px;
  width: 94%;
  background: #f8f8f8;
  text-align: left;
  line-height: 39px;
  padding: 0px 11px;
}
.item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  .label {
    width: 100px;
  }
}
.evaluate-h5 {
  padding: 0px !important;
}
.evaluate-header {
  background: url("../../../../static/images/company/popupHeader.png") no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.evaluate-h5-content {
  padding: 20px !important;
}
.evaluate-h5-header {
  display: flex;
  justify-content: center !important;
}
.evaluate-h5-header-close {
  position: absolute;
  right: 10px;
  top: 8px;
}
.btn-valid {
  background: linear-gradient(90deg, #02d17e 0%, #00b594 100%);
  border-radius: 12rpx;
}
</style>

<style
  scoped
  lang="scss"
  src="../../../components/TUIChat/message-input-toolbar/evaluate/style/index.scss"
></style>