front-end/hdApp/src/pagesStore/me/expressSet.vue

<template>
  <div class="app-content">
    <div v-show="showStaffArea">
      <form @submit="formSubmit" @reset="formReset">
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">达达商户ID</div>
            <input
              v-model="form.sjId"
              placeholder-class="phcolor"
              class="tui-input"
              name="sjId"
              placeholder="请输入商户ID"
              maxlength="50"
              type="text"
            />
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">达达门店编号</div>
            <input
              v-model="form.shopNo"
              placeholder-class="phcolor"
              class="tui-input"
              name="shopNo"
              placeholder="请输入编号"
              maxlength="50"
              type="text"
            />
          </tui-list-cell>

          <div style="padding:20upx 0 0 30upx;color:#CCCCCC;">设置完成后请联系管理员进行授权</div>

        </div>

        <!-- 提交 -->
        <div class="confirm-btn">
          <button class="admin-button-com big blue" formType="submit">
            提交
          </button>
        </div>
      </form>
    </div>
    <!-- <kd-entrance></kd-entrance> -->
  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
const form = require("@/utils/formValidation.js");
import { dadaInfo,updateDada } from "@/api/shop-express";
export default {
  name: "expressSet",
  components: {
    TuiListCell,
    AppAvatarModule,
  },
  data() {
    return {
      form: {
        shopNo: "",
        sjId: "",
      },
      roleList: [],
      roleSelData: {},
      showStaffArea: true,
      miniCodeSrc: "",
      memberData: {},
    };
  },
  onLoad() {
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: `快递设置`,
    });
  },
  methods: {
    async init() {
      try {
        const { data } = await dadaInfo();
        this.form.shopNo = data.shopNo;
        this.form.sjId = data.sjId;
        this.$forceUpdate();
      } finally {
      }
    },
    confirmFn() {
      updateDada(this.form).then((res) => {
        this.$msg("操作成功");
        setTimeout(() => {
          uni.navigateBack();
        }, 1300)
      });
    },
    formSubmit(e) {
      // 表单验证
      let rules = [
        {
          name: "sjId",
          rule: ["required"],
          msg: ["请输入商户ID"],
        },
        {
          name: "shopNo",
          rule: ["required"],
          msg: ["请输入门店编号"],
        },
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20upx);
  padding-top: 20upx;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30upx;
  margin-bottom: 30upx;
}
// ---
.module-com {
  margin-bottom: 20upx;
  .member-wrap {
    .member-det {
      font-size: 24upx;
      margin-left: 20upx;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240upx;
    }
  }
}
// 按钮
.confirm-btn {
  width: calc(100% - 60upx);
  margin: 60upx 30upx 20upx;
  .admin-button-com {
    width: 100%;
  }
}
</style>