laboratory_maintenance_app/pages/my/feedback.vue

<template>
  <view class="page-css">
    <view class="content clearfix">
      <view class="content-type">
        <betone-input-picker
          :label="'反馈类型'"
          :pickerData="feedType"
          :mode="'selector'"
          :keyName="'dictValue'"
          @changeSelect="changeSelect"
          v-model="from.typeName"
        ></betone-input-picker>
      </view>
      <view class="title">具体建议内容</view>
      <view class="content-input">
        <u-input
          :border="true"
          v-model="from.describes"
          type="textarea"
          :height="320"
          :auto-height="true"
        ></u-input>
      </view>
      <view class="content-connection">
        <view class="content-title">其他联系方式</view>
        <view class="content-phone">{{ from.phone||'请点击添加按钮进行修改' }}</view>
        <view class="content-edit" @click="updatePhone()">修改</view>
      </view>
      <u-button type="primary" @click="submitFeedback">提交</u-button>
    </view>

    <betone-modal
      :title="'修改手机号'"
      :confirmText="'确认'"
      v-model="updatePhoneModal"
      @confirm="confirmSub"
    >
      <view class="modal-text">
        <betone-new-input
          v-model="updataPhone"
          placeholder="请输入"
          style="margin-bottom: 32rpx"
        />
      </view>
    </betone-modal>
  </view>
</template>
<script>

export default {
  data() {
    return {
      from: {
        describes: "", //反馈内容
        phone: "", //手机号
        type: "", //反馈类型
        typeName: "", //反馈名称
      },
      updataPhone: "", //更新手机号
      updatePhoneModal: false, //修改手机号弹框
      feedType: [
       
      ],
    };
  },
  onShow() {
    let info = uni.getStorageSync("userinfo");
    if (info) {
      this.from.phone = info.phoneNumber;
    }
    this.getType();
  },
  methods: {
    getType() {
      let _params = {
        current: 1,
        size: 100,
        parentId: "1850021405049475074",
      };
      this.$u.api
        .getChildList(_params)
        .then((res) => {
          this.feedType = res.data
        })
        .catch((err) => {});
    },
    // 选择框
    changeSelect(e) {
      var province = {};
      // 不操作列行
      if (!!e) {
        province = this.feedType[0];
      }
      // 操作第一列
      if (e.length == 1) {
        province = this.feedType[e[0]];
      }
      this.from.type = province.dictKey;
      this.from.typeName = province.dictValue;
    },
    // 更新手机号
    updatePhone() {
      this.updataPhone = "";
      this.updatePhoneModal = true;
    },
    // 修改手机号确认
    confirmSub() {
      this.from.phone = this.updataPhone;
    },
    // 提交意见反馈
    submitFeedback() {
      if (this.from.type == "") {
        uni.showToast({ title: "请选择反馈类型", icon: "none" });
        return false;
      }
      if (this.from.phone == "") {
        uni.showToast({ title: "请修改或者填写手机号", icon: "none" });
        return false;
      }
      if (this.from.describes == "") {
        uni.showToast({ title: "请填写反馈内容", icon: "none" });
        return false;
      }

      this.$u.api.subEditRecords(this.from).then((res) => {
        if (res.code == 200) {
          uni.showToast({ title: "提交成功", icon: "none" });
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/my/my",
            });
          }, 1000);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page-css {
  background: #efefef;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    border-radius: 20rpx;
    background: #fff;
    .title {
      color: rgba(0, 0, 0, 1);
      font-size: 32rpx;
      font-weight: 550;
      margin: 26rpx 0 36rpx 28rpx;
    }
    .content-input {
      margin: 36rpx 26rpx 0;
    }
    .content-connection {
      margin: 56rpx 26rpx 200rpx;
      display: flex;
      flex-direction: row;
      line-height: 60rpx;
      .content-title {
        color: rgba(0, 0, 0, 1);
        font-size: 32rpx;
      }
      .content-phone {
        font-size: 24rpx;
        padding-left: 58rpx;
        color: rgba(190, 190, 190, 1);
        flex: 1;
      }
      .content-edit {
        color:#2979ff;
      }
    }
    .content-type {
      margin: 36rpx 26rpx 0;
    }
  }
}
</style>