YXGJ/components/bottomModules/bottom1.vue

<template>
  <view class="box">
    <image
      class="image"
      src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404111712812810046B1fbafed9.png"
      lazy-load="true"
      mode="aspectFill"
    />
    <view class="function">
      <view class="cn-title">预约免费设计</view>
      <view class="en-title">Appointment Free Design</view>
      <view class="form">
        <view class="text" @click="setFocus('姓名')">
          <view class="bg" />
          <view class="iconfont icon-renyuan-hui" />
          <input
            class="input"
            :focus="focus == '姓名'"
            type="text"
            v-model="content.name"
            placeholder="请输入您的姓名"
          />
        </view>
        <view class="text" @click="setFocus('手机号')">
          <view class="bg" />
          <view class="iconfont icon-dianhua-hui" />
          <input
            class="input"
            :focus="focus == '手机号'"
            :disabled="!manualOperation"
            type="number"
            v-model="content.phonenumber"
            placeholder="请输入您的电话号码"
          />
          <button
            v-if="!manualOperation"
            class="button"
            open-type="getPhoneNumber"
            @getphonenumber="getphonenumber"
          >
            123123323223323222222
          </button>
        </view>
        <picker mode="region" @change="getRegion">
          <view class="text">
            <view class="bg" />
            <view class="iconfont icon-dizhi-hui1" />
            <view style="color: #fff" v-if="content.province">
              {{ this.getCity(content, false) }}
            </view>
            <view v-else style="opacity: 0.3; color: #fff; font-size: 14px">
              请选择城市
            </view>
          </view>
        </picker>
        <view class="text textarea-box">
          <view class="bg" />
          <view class="iconfont icon-dizhi-hui1" />
          <textarea
            class="textarea"
            v-model="content.address"
            placeholder="请输入您的具体地址（街道、楼号、门牌号等）"
          />
        </view>
        <view
          v-if="!content.name || !content.phonenumber || !content.province"
          class="but forbidden"
          hover-class="navigator-hover"
          @click="reminder"
        >
          立即免费预约 >
        </view>
        <view
          v-else
          class="but"
          hover-class="navigator-hover"
          @click="loading ? '' : submit()"
        >
          <u-loading-icon v-if="loading" />
          <text v-else> 立即免费预约 > </text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import contact from "../contact.vue";
export default {
  components: { contact },
  name: "bottom1",
  props: {
    ownertable: {
      type: String,
    },
    ownerid: {
      type: [String, Number],
    },
    shareuserid: {
      type: [String, Number],
      default: 0,
    },
    type: {
      type: String,
    },
    typemx: {
      type: String,
    },
    extrajson: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      focus: "",
      loading: false,
      manualOperation: false,
      content: {
        name: "",
        phonenumber: "",
        address: "",
        province: "",
        city: "",
        county: "",
      },
    };
  },
  methods: {
    setFocus(name) {
      this.focus = "";
      setTimeout(() => {
        this.focus = name;
      });
    },
    submit() {
      let content = this.content;
      content.ownertable = this.ownertable;
      content.ownerid = this.ownerid;
      content.type = this.type;
      content.typemx = this.typemx;
      content.extrajson = this.extrajson;
      content.shareuserid = this.shareuserid;
      if (
        !new RegExp(
          "^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\\d{8}$"
        ).test(content.phonenumber)
      )
        return uni.showModal({
          title: "提示",
          content: "手机号码格式错误",
          showCancel: false,
        });
      this.loading = true;
      this.$Http
        .basic({
          id: 20240513144602,
          content,
        })
        .then((res) => {
          console.log("提交预约单", res);
          this.loading = false;
          if (this.cutoff(res.msg)) return;
          uni.showModal({
            title: "提交成功",
            content: "感谢您的支持，工作人员会第一时间跟您联系！",
            showCancel: false,
            confirmColor: "#C30D23",
          });
          this.content = {
            name: "",
            phoneNumber: "",
            address: "",
            province: "",
            city: "",
            county: "",
          };
        });
    },
    getRegion(e) {
      this.content.province = e.detail.value[0];
      this.content.city = e.detail.value[1];
      this.content.county = e.detail.value[2];
    },
    reminder() {
      uni.showToast({
        title: "请先完成填写后提交",
        icon: "none",
        duration: 1500,
      });
    },
    getphonenumber(e) {
      if (e.detail.code) {
        this.$Http
          .basic({
            id: 20240520110702,
            content: {
              systemclient: "marketingtool",
              code: e.detail.code,
            },
          })
          .then((res) => {
            console.log("获取手机号", res);
            if (this.cutoff(res.msg)) return;
            this.manualOperation = true;
            try {
              this.content.phonenumber = res.data.purePhoneNumber;
            } catch (error) {
              this.focus = "手机号";
            }
          });
      } else {
        this.manualOperation = true;
        this.focus = "手机号";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  width: 100vw;
  height: 436px;

  .image {
    width: 100%;
    height: 100%;
    display: block;
    vertical-align: bottom;
  }

  .function {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    .cn-title {
      width: 100%;
      text-align: center;
      line-height: 22px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      margin-top: 30px;
    }

    .en-title {
      width: 100%;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-size: 10px;
      color: #ffffff;
    }

    .form {
      width: 260px;
      margin: 0 auto;
      margin-top: 20px;

      .text {
        position: relative;
        display: flex;
        align-items: center;
        width: 260px;
        height: 45px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 2px;
        overflow: hidden;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 10px;

        .button {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          opacity: 0;
        }

        .input {
          color: #fff;
          flex: 1;
        }

        .textarea {
          color: #fff;
          flex: 1;
          height: 62px;
        }

        .iconfont {
          color: #fff;
          font-size: 20px;
          margin-right: 10px;
        }
      }

      .textarea-box {
        padding-top: 13px;
        height: 90px;
        align-items: flex-start;
      }

      .text::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0.2;
      }

      .but {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 260px;
        height: 45px;
        background: #c30d23;
        border-radius: 2px;

        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}

.forbidden {
  opacity: 0.6;
}
</style>