front-end/hdApp/src/admin/shop/makePrint.vue

<template>
  <view class="app-content">
    <view>
      <form @submit="formSubmit" @reset="formReset">
        <view class="module-com input-line-wrap">

          <tui-list-cell class="line-cell" :hover="false">
            <view class="tui-title">小票机编号：</view>
            <input v-model="form.printSn" @focus="form.printSn=''" placeholder-class="phcolor" class="tui-input" name="printSn" placeholder="请填写编号，SN码" maxlength="50" type="number" />
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
            <view class="tui-title">小票机密钥：</view>
            <input v-model="form.printKey" @focus="form.printKey=''" placeholder-class="phcolor" class="tui-input" name="printKey" placeholder="请填写密钥，KEY码" maxlength="50" type="text" />
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
            <view class="tui-title">标签机编号：</view>
            <input v-model="form.printLabelSn" @focus="form.printLabelSn=''"  placeholder-class="phcolor" class="tui-input" name="printLabelSn" placeholder="请填写编号，SN码" maxlength="50" type="number" />
          </tui-list-cell>

          <tui-list-cell class="line-cell" :hover="false">
            <view class="tui-title">标签机密钥：</view>
            <input v-model="form.printLabelKey" @focus="form.printLabelKey=''" placeholder-class="phcolor" class="tui-input" name="printLabelKey" placeholder="请填写密钥，KEY码" maxlength="50" type="text" />
          </tui-list-cell>

        </view>

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

<script>
import TuiListCell from "@/components/plugin/list-cell";
import AppAvatarModule from "@/components/module/app-avatar";
const form = require("@/utils/formValidation.js");
import { addMakeCloudPrint,getPrint } from "@/api/shop";
export default {
  name: "makePrint",
  components: {
    TuiListCell,
    AppAvatarModule,
  },
  data() {
    return {
      form: {
        printKey: "",
        printSn: "",
        printLabelSn:"",
        printLabelKey:""
      },
      roleList: [],
      roleSelData: {},
      miniCodeSrc: "",
      memberData: {},
    };
  },
  methods: {
    async init() {
      const { data } = await getPrint()
      this.form.printKey = data.makePrintKey
      this.form.printSn = data.makePrintSn
      this.form.printLabelKey = data.makePrintLabelKey
      this.form.printLabelSn = data.makePrintLabelSn
      this.$forceUpdate()
    },
    confirmFn() {
      addMakeCloudPrint(this.form).then((res) => {
        this.$msg(res.msg);
        if(res.code == 1){
          setTimeout(() => {
            uni.navigateBack();
          }, 1000)
        }
      });
    },
    formSubmit(e) {
      let rules = [
        {
          name: "printSn",
          rule: ["required"],
          msg: ["请填写小票机编号"],
        },
        {
          name: "printKey",
          rule: ["required"],
          msg: ["请填写小票机密钥"],
        },
      ];
      this.confirmFn();
    },
  },
};
</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>