wanmeiyizhan/pages/contact/addContact.vue

<template>
  <view class="main">
    <view class="formBox">
      <!-- 服务区名称 -->
      <view>
        <view class="formItem">
          <view class="itemTitle">服务区名称</view>
          <view class="itemValue" @click="handleChangeService">
            <view class="selectBox">
              <view class="picker"
                >{{ nowServerpart.SERVERPART_NAME || "" }}
              </view>
            </view>

            <image class="moreIcon" src="/static/images/home/rightArrow.png" />
          </view>
        </view>

        <view class="formItem">
          <view class="itemTitle">失物类型</view>
          <view class="itemValue">
            <view class="foundTypeBox">
              <picker
                bindchange="bindPickerChange"
                :value="lostTypeIndex"
                :range="lostTypeList"
                range-key="label"
              >
                <view class="picker"
                  >{{ lostTypeList[lostTypeIndex].label || "" }}
                </view>
              </picker>
            </view>
            <image class="moreIcon" src="/static/images/home/rightArrow.png" />
          </view>
        </view>

        <view class="formItem">
          <view class="itemTitle">物品名称</view>
          <view class="itemValue">
            <input placeholder="请输入物品名称" v-model="shopName" />
          </view>
        </view>

        <view class="formItem">
          <view class="itemTitle">发现时间</view>
          <view class="itemValue">
            <time-picker @update="onTimeUpdate" />
          </view>
        </view>

        <view class="formItem">
          <view class="itemTitle">联系电话</view>
          <view class="itemValue">
            <input
              placeholder="请输入手机号码"
              type="number"
              maxlength="11"
              v-model="phone"
            />
          </view>
        </view>
      </view>
      <view class="btnBox">
        <button class="submitBox" type="primary" @click="formSubmit">
          新增失物
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import TimePicker from "./components/time-picker.vue";

export default {
  data() {
    return {
      nowServerpart: {},
      lostTypeIndex: 0,
      lostTypeList: [],
      shopName: "", // 商品名称
      phone: "", // 联系电话
      thisTime: "", // 当前时间
    };
  },
  components: {
    TimePicker,
  },
  onLoad() {
    this.handleGetDefaultTime();
    // 先去拿枚举值
    this.handleGetTypeList();
  },
  onShow() {
    let currentService = uni.getStorageSync("currentService");
    console.log("currentService", currentService);
    this.nowServerpart = currentService;
  },
  methods: {
    //   获取当前的默认时间
    handleGetDefaultTime() {
      const date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let min = date.getMinutes();
      if (m < 10) {
        m = "0" + m;
      }
      if (d < 10) {
        d = "0" + d;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (min < 10) {
        min = "0" + min;
      }
      this.thisTime = `${y}-${m}-${d} ${h}:${min}`;
    },
    //   更新时间
    onTimeUpdate(e) {
      console.log("e", e);
      this.thisTime = `${e.date} ${e.time}`;
    },
    async formSubmit() {
      if (!this.nowServerpart.SERVERPART_ID) {
        uni.showToast({
          title: "请选择服务区！",
          icon: "none",
        });
        return;
      }

      if (
        (this.lostTypeList && this.lostTypeList.length > 0) ||
        this.lostTypeList[this.lostTypeIndex].value
      ) {
      } else {
        uni.showToast({
          title: "请选择失物类型！",
          icon: "none",
        });
        return;
      }

      if (!this.shopName) {
        uni.showToast({
          title: "请输入失物名称",
          icon: "none",
        });
        return;
      }
      console.log("this.phone", this.phone);
      if (!this.phone) {
        uni.showToast({
          title: "请输入联系电话",
          icon: "none",
        });
        return;
      } else {
        const phonePattern = /^1[3-9]\d{9}$/; // 中国大陆手机号校验规则
        if (!phonePattern.test(this.phone)) {
          uni.showToast({
            title: "手机号格式不正确",
            icon: "none",
          });
          return;
        }
      }

      let req = {
        SERVERPART_ID: this.nowServerpart.SERVERPART_ID,
        ENUM_LABEL: this.lostTypeList[this.lostTypeIndex].value,
        SUGGESTION_TITLE: this.shopName,
        PHONE_NUMBER: this.phone,
        PROVINCE_CODE: "340000",
        SUGGESTION_CREATEDATE: this.thisTime,
        SUGGESTION_STATE: 1,
        SUGGESTION_TYPE: 4000,
        SERVERPART_NAME: this.nowServerpart.SERVERPART_NAME,
      };

      const data = await this.$api.$post(
        "/EShangApiMain/SiteManage/SynchroSUGGESTION",
        req
      );
      console.log("data", data);
      if (data.Result_Code === 100) {
        uni.showToast({
          title: data.Result_Desc,
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1000);
      } else {
        uni.showToast({
          title: data.Result_Desc,
          icon: "error",
        });
      }
    },
    // 点击跳转改变服务区
    handleChangeService() {
      uni.navigateTo({ url: "/pages/newMap/index/index" });
    },
    // 拿到类型枚举
    async handleGetTypeList() {
      const data = await this.$api.$get(
        "/EShangApiMain/FrameWork/GetFieldEnumTree",
        { FieldExplainField: "business_target" }
      );
      let list = this.$utils.wrapTreeNode(data.Result_Data.List);
      let res = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.value === 6000) {
            let typeList = item.children;
            if (typeList && typeList.length > 0) {
              typeList.forEach((typeItem) => {
                if (typeItem.children && typeItem.children.length > 0) {
                  typeItem.children.forEach((subItem) => {
                    res.push({ label: subItem.label, value: subItem.value });
                  });
                }
              });
            }
          }
        });
      }
      console.log("resresresresres", res);
      this.lostTypeList = res;
    },
  },
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #f7f7f7;
  box-sizing: border-box;
  padding: 16px;
  .formBox {
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .formItem {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 12px 0;
      .itemTitle {
        width: 30%;
        display: block;
        font-size: 14px;
        color: #000;
      }
      .itemValue {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .selectBox {
          width: 100%;
        }
        .foundTypeBox {
        }

        .moreIcon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .btnBox {
      width: 100%;
      .submitBox {
        background-color: #333;
        color: #caa97f;
      }
    }
  }
}
</style>