merchapp/java-mall-app-shop-admin/pages/audit/shop3.vue

<template>
  <view class="shop-3-container">
    <u-navbar
      :autoBack="true"
      :safeAreaInsetTop="true"
      title="填写店铺信息第3步 / 共3步"
    >
      <template slot="right">
        <view class="btn-login-out" @click="loginOut">退出登录</view>
      </template>
    </u-navbar>
    <u-form :model="form" ref="uForm" label-width="90">
      <u-form-item
        label="开户行"
        prop="bank_name"
        required
        @click="showActionSheet"
      >
        <u-input
          style="pointer-events: none"
          class="form-input"
          v-model="form.bank_name"
          placeholder="请选择您的开户行"
          readonly
        />
        <u-icon
          style="display: inline-block; margin-left: 8rpx"
          name="arrow-down"
          size="12"
          color="aaaaaa"
        ></u-icon>
      </u-form-item>
      <u-form-item label="开户银行的支行名称" required prop="bank_branch_name">
        <u-input
          v-model="form.bank_branch_name"
          placeholder="请输入开户银行的支行名称"
        />
      </u-form-item>
      <u-form-item label="收款账户" required prop="account_number">
        <u-input
          v-model="form.account_number"
          placeholder="请输入收款账户号码"
        />
      </u-form-item>
      <u-form-item label="账户姓名" required prop="account_holder_name">
        <u-input
          v-model="form.account_holder_name"
          placeholder="请输入账户姓名"
        />
      </u-form-item>
    </u-form>
    <!-- <u-picker
      v-if="showActionSheet"
      mode="selector"
      :show="showActionSheet"
      :safe-area-inset-bottom="true"
      :default-selector="[0]"
      :columns="bankList"
      keyName="bank_name"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    >
    </u-picker> -->
    <lzcPicker
      :pickerList="bankList"
      :showKey="'bank_name'"
      @change="handleCancel"
      :searchPlaceholder="'请输入银行名称进行搜索'"
      ref="lzcPicker"
      pickerTittle="选择银行"
    ></lzcPicker>
    <view class="btn-content">
      <u-button class="btn-submit" @click="handleSubmit">提交审核</u-button>
    </view>
  </view>
</template>

<script>
import { GetBankList, GetMerchApply, GetRestartMerchApply } from "@/api/audit";
import lzcPicker from "@/components/lzc-picker/lzc-picker.vue";
import { mapState } from "vuex";
export default {
  components: {
    lzcPicker,
  },
  data() {
    return {
      // showActionSheet: false,
      form: {
        bank_name: "",
        bank_branch_name: "",
        account_number: "",
        account_holder_name: "",
      },
      bankList: [],
      rules: {
        bank_name: [
          {
            required: true,
            message: "请选择您的开户行",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        bank_branch_name: [
          {
            required: true,
            message: "请输入开户银行的支行名称",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        account_number: [
          {
            required: true,
            message: "请输入收款账户号码",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        account_holder_name: [
          {
            required: true,
            message: "请输入账户姓名",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapState("user", ["approvalStatus"]),
  },
  onReady() {
    this.$refs["uForm"].setRules(this.rules);
  },
  onShow() {
    this.getBankList();
  },
  methods: {
    async getBankList() {
      let res = await GetBankList();
      if (res && res.status == 200) {
        this.bankList = res.data;
      }
    },
    actionSheetCallback() {},
    async handleSubmit() {
      let valid = this.$refs.uForm.validate().then((valid) => {
        return valid;
      });

      if (valid) {
        let auditItem = uni.getStorageSync("auditItem");

        // auditItem.login_mobile = "18620139098";

        let params = {
          ...this.form,
          ...auditItem,
        };

        if (this.approvalStatus == 2) {
          params.id = uni.getStorageSync("auditId");
          let res = await GetRestartMerchApply(params);
          if (res && res.status == 200) {
            uni.removeStorageSync("locationItem");
            uni.removeStorageSync("auditItem");
            uni.removeStorageSync("typeItem");
            uni.removeStorageSync("auditId");
            uni.navigateTo({ url: "/pages/audit/checkAudit" });
          }
        } else {
          let res = await GetMerchApply(params);
          if (res && res.status == 200) {
            uni.removeStorageSync("locationItem");
            uni.removeStorageSync("auditItem");
            uni.removeStorageSync("typeItem");
            uni.removeStorageSync("auditId");
            uni.navigateTo({ url: "/pages/audit/checkAudit" });
          }
        }
      }
    },
    showActionSheet() {
      this.$refs["lzcPicker"].handleShow();
      if (this.bankList.length <= 0) {
        this.getBankList();
      }
    },
    handleCancel(item) {
      this.form.bank_name = item.bank_name;
    },
    loginOut() {
      this.$store.dispatch("user/LoginOut");
    },
  },
};
</script>

<style lang="scss">
.shop-3-container {
  padding: 24rpx;

  .u-navbar {
    height: 88rpx;
  }

  .btn-content {
    position: relative;
    bottom: 24rpx;
    width: 94%;
    padding: 48rpx 24rpx;
  }

  .btn-submit {
    border-radius: 16rpx;
    background: #4b71ff;
    color: #fff;
  }

  .btn-login-out {
    font-size: 28rpx;
    color: #4b71ff;
  }
}
</style>