paper-shopkeeper-app/pages/fs-credit/index.vue

<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="飞算授信"></uni-nav-bar>
    <view class="card">
      <text class="label">最高授信额度(元)</text>
      <text class="value">500,000.00</text>
    </view>
    <qn-form-item label="授信客户信息" type="title"></qn-form-item>
    <qn-form-item label="客户名称" required>
      <text class="item_text">{{ form.enterpriseName }}</text>
    </qn-form-item>
    <qn-form-item label="结算方式" required>
      <qn-data-picker
        v-model="form.settlementMethod"
        text="right"
        :border="false"
        placeholder="请选择结算方式"
        popup-title="请选择结算方式"
        :map="{ text: 'label', value: 'value' }"
        :clear-icon="false"
        :localdata="fsSettlementMethodEnum"
      ></qn-data-picker>
    </qn-form-item>
    <qn-form-item label="结算周期" required>
      <qn-data-picker
        v-model="form.settlementPeriod"
        text="right"
        :border="false"
        placeholder="请选择结算周期"
        popup-title="请选择结算周期"
        :map="{ text: 'label', value: 'value' }"
        :clear-icon="false"
        :localdata="fsSettlementPeriodEnum"
      ></qn-data-picker>
    </qn-form-item>
    <qn-form-item label="授信额度(元)" required>
      <qn-easyinput :maxlength="9" v-model="form.creditLine" :inputBorder="false" text="right" placeholder="请设置授信额度"></qn-easyinput>
    </qn-form-item>
    <qn-footer fixed height="120rpx">
      <view class="button_area">
        <view :class="{ button__submit: true, 'button__submit--disabled': !canSubmit }" @click="canSubmit && makeCredit()">
          <text class="text">立即授信</text>
        </view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import { fsSettlementPeriodEnum, fsSettlementMethodEnum } from '@/enums/index.js'
import { makeFsCreditInfo } from '@/apis/clientCreditApi.js'
export default {
  data() {
    return {
      form: {
        enterpriseId: null,
        legalPersonName: null,
        enterpriseName: null,
        creditLine: null,
        settlementPeriod: 1,
        settlementMethod: 1,
        mallSupplierId: null
      },
      fsSettlementPeriodEnum: Object.freeze(fsSettlementPeriodEnum),
      fsSettlementMethodEnum: Object.freeze(fsSettlementMethodEnum),
      canSubmit: false
    }
  },
  methods: {
    back,
    makeCredit() {
      makeFsCreditInfo(this.form).then((res) => {
        if (res) {
          uni.showToast({
            title: '授信成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              setTimeout(() => {
                go2('client-credit-list', {}, true)
              }, 1500)
            }
          })
        }
      })
    }
  },
  onLoad(option) {
    if (option) {
      this.form.enterpriseId = option.enterpriseId
      this.form.mallSupplierId = option.mallSupplierId
      this.form.legalPersonName = option.legalPersonName
      this.form.enterpriseName = option.enterpriseName
    }
  },
  created() {
    if (!this.form.enterpriseId) {
      uni.showToast({
        title: '进入页面错误',
        icon: 'error',
        duration: 2000,
        complete: () => {
          back()
        }
      })
    }
  },
  watch: {
    form: {
      handler(val) {
        let keys = Object.keys(val)
        let flag = true
        for (let key of keys) {
          if (!val[key]) {
            flag = false
            break
          }
        }
        this.canSubmit = flag
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.item_text {
  font-size: 28rpx;
  color: #333333;
}
.button_area {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  .button__submit {
    flex-grow: 1;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #007aff;
    border-radius: 10rpx;
    .text {
      font-size: 30rpx;
      color: #ffffff;
    }
  }
  .button__submit--disabled {
    opacity: 0.5;
  }
}
.card {
  width: 750rpx;
  height: 254rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 50rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .label {
    font-size: 32rpx;
    color: #000000;
    font-weight: 600;
  }
  .value {
    margin-top: 24rpx;
    font-size: 64rpx;
    color: #000000;
    font-weight: 600;
  }
}
</style>