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

<template>
  <view>
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="客户授信"></uni-nav-bar>
    <qn-form :columns="columns">
      <view slot="name">
        <qn-easyinput :maxlength="20" @blur="showCompany" v-model="form.name" :inputBorder="false" text="right" placeholder="请选择授信的客户"></qn-easyinput>
      </view>
      <view slot="supplierName">
        <qn-data-picker
          v-model="form.supplierId"
          text="right"
          :border="false"
          placeholder="请选择账号下的盘商"
          popup-title="请选择盘商"
          :map="{ text: 'name', value: 'id' }"
          @change="onSupplierChange"
          :clear-icon="false"
          :localdata="supplierList"
        ></qn-data-picker>
      </view>
    </qn-form>
    <view class="card_area">
      <view class="card_area-item" :class="{ selected: form.creditType == 'month' }" @click="selectCreditType('month')">
        <image class="selected-icon" v-if="form.creditType == 'month'" src="/static/imgs/client-credit/selected-icon.png"></image>
        <image class="card_area-item-icon" src="/static/imgs/client-credit/month-credit-icon.png"></image>
        <text class="card_area-item-text">月结授信</text>
      </view>
      <view class="card_area-item" :class="{ selected: form.creditType == 'fs' }" @click="selectCreditType('fs')">
        <image class="selected-icon" v-if="form.creditType == 'fs'" src="/static/imgs/client-credit/selected-icon.png"></image>
        <image class="card_area-item-icon" src="/static/imgs/client-credit/fs-credit-icon.png"></image>
        <text class="card_area-item-text">飞算授信</text>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup_modal">
        <slot name="title">
          <view class="popup_modal-title">请选择以下公司</view>
        </slot>
        <scroll-view scroll-y="true" class="popup_modal-scroll">
          <view
            @click="selectCompany(item.enterpriseId, item.enterpriseName)"
            class="popup_modal-scroll-item"
            v-for="item in searchList"
            :key="item.enterpriseId"
          >
            {{ item.enterpriseName }}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <qn-footer fixed height="120rpx">
      <view class="button_area">
        <view :class="{ button__submit: true, 'button__submit--disabled': !canSubmit }" @click="canSubmit && next()">
          <text class="text">下一步</text>
        </view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import qnForm from '@/components/qn-form/qn-form.vue'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import { getCompanyList } from '@/apis/clientCreditApi.js'
import { getBaseInfo } from '@/apis/commonApi.js'
const columns = [
  {
    key: 1,
    type: 'title',
    label: '授信客户'
  },
  {
    key: 'name',
    type: 'item',
    label: '选择客户',
    required: true
  },
  {
    key: 'supplierName',
    type: 'item',
    label: '选择账号盘商',
    required: true
  },
  {
    key: 2,
    type: 'title',
    label: '选择授信方式'
  }
]
export default {
  components: {
    qnForm,
    qnDataPicker
  },
  data() {
    return {
      columns: Object.freeze(columns),
      form: {
        name: null,
        creditType: null,
        supplierId: this.$store.state.supplierInfo.id
      },
      searchList: [],
      supplierList: []
    }
  },
  methods: {
    back,
    showCompany(e) {
      let enterpriseName = e.detail.value.trim()
      if (enterpriseName) {
        getCompanyList({ enterpriseName }).then((res) => {
          if (res) {
            this.searchList = res.records
            if (this.searchList.length > 0) {
              this.$refs.popup.open('bottom')
            }
          }
        })
      }
    },
    selectCompany(enterpriseId, enterpriseName) {
      this.$refs.popup.close()
      this.form.name = enterpriseName
      this.form.id = enterpriseId
    },
    next() {
      go2('client-signing', {
        ...this.form
      })
    },
    selectCreditType(creditType) {
      console.log(creditType)
      this.form.creditType = creditType
    },
    onSupplierChange(e) {
      console.log('e', e)
    }
  },
  created() {
    getBaseInfo().then((res) => {
      if (res) {
        this.supplierList = res.supplierList.map((item) => ({
          id: item.id,
          name: item.name
        }))
      }
    })
  },
  computed: {
    canSubmit() {
      return this.form.id != null && this.form.creditType != null
    }
  },
  watch: {
    ['form.name']() {
      if (this.form.id) {
        this.form.id = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.popup_modal {
  width: 750rpx;
  height: 600rpx;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  .popup_modal-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 750rpx;
    height: 88rpx;
    font-weight: 600;
    border-bottom: 2rpx solid #d8d8d8;
  }
  .popup_modal-scroll {
    width: 750rpx;
    height: 600rpx;
    .popup_modal-scroll-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 750rpx;
      height: 88rpx;
      padding: 0rpx 32rpx;
      border-bottom: 2rpx solid #d8d8d8;
    }
  }
}
.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_area {
  width: 750rpx;
  height: 350rpx;
  background-color: #fff;
  padding: 100rpx 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .card_area-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 331rpx;
    height: 150rpx;
    background: #ffffff;
    border: 3rpx solid #d8d8d8;
    border-radius: 10rpx;
    .selected-icon {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
    .card_area-item-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .card_area-item-text {
      font-size: 36rpx;
      color: #000000;
      letter-spacing: 2rpx;
      font-weight: 600;
    }
  }
  .selected {
    border: 3rpx solid #007aff;
  }
}
</style>