ngfrontend/src/views/user/welcome-pack.vue

<template>
  <div v-loading="loading">
    <div class="white-box" style="padding: 0 25px; margin-top: 25px;">
<!--      <div class="noList">-->
<!--        <el-select ref="select" @change="countriesChange" v-model="countries" filterable placeholder="">-->
<!--          <el-option v-for="(item, index) in countriesList" :key="item.ID" :label="item.NAME" :value="item.ID" />-->
<!--        </el-select>-->
<!--      </div>-->
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="14">

          <el-form ref="form" label-width="180px" :label-position="labelPosition" class="form-page">
<!--            <el-form-item :label="$t('user.welcomePackWay')">-->
<!--              <el-radio-group v-model="form.decType" @change="decTypeChange">-->
<!--                <el-radio size="small" label="normal">{{ $t('user.normal') }}</el-radio>-->
<!--                &lt;!&ndash;								<el-radio size="small" label="ba">{{ $t('user.BAUpgrade') }}</el-radio>&ndash;&gt;-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
            <el-divider content-position="left">{{ $t('user.accountInformation') }}</el-divider>
            <el-form-item :label="$t('shop.country')">
              <el-select ref="select" @change="countriesChange" v-model="form.countryId" filterable :placeholder="$t('user.selectCountry')" style="width: 100%;">
                <el-option v-for="(item, index) in countriesList" :key="item.ID" :label="item.NAME" :value="item.ID" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('common.language')">
              <el-select ref="select" v-model="form.languageId" filterable :placeholder="$t('user.selectLanguage')" style="width: 100%;">
                <el-option v-for="(item, index) in languageList" :key="item.ID" :label="item.NAME" :value="item.ID" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('user.newMemberCode')">
              <el-input v-model="form.insertUserName" :readonly="userReadOnly" @blur="checkBaUser" :placeholder="$t('user.enterMemberCode')" />
            </el-form-item>
            <el-form-item :label="$t('user.entryLevel')">
              <el-select v-model="form.decLv" :placeholder="$t('user.selectEntryLevel')" style="width: 100%;">
                <el-option v-for="item in allDecLevel" :key="item.ID" :label="item.LEVEL_NAME" :value="item.ID" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('user.stockistCode')" :required="Number(isDec) === 0" >
              <el-input v-model="form.decUserName" :disabled="Number(isDec) === 1" />
            </el-form-item>

            <el-form-item>
              <template slot="label">
                {{ $t('user.selectWelcomePack') }}
              </template>
              <el-tabs v-model="decWay" type="border-card" style="position: relative; width: 100%;">
                <el-tab-pane :label="$t('shop.product')" name="2">
                  <el-collapse v-model="activeName" accordion>
                    <el-collapse-item name="product">
                      <el-table :data="tableData" :show-header="false" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="30" align="center" style="top: -30px;" />
                        <el-table-column align="center">
                          <template slot-scope="{row, $index}">
                            <el-container>
                              <el-aside width="80px" style=" padding: 0; margin-bottom: 0; background-color: #ffffff;">
                                <el-image style="width: 80px; height: 80px" :src="tool.getArImage(row.COVER, '/files/')" />
                              </el-aside>
                              <el-main style="padding: 0;">
                                <div style="text-align: left; line-height: 25px;">
                                  <span style="font-weight: bold; cursor: pointer;" @click="handleProduct(row)">{{ row.GOODS_NAME }}</span><br>
                                  <span>{{ row.GOODS_NO }}</span><br>
                                  <span style="color: tomato;">{{ $t('shop.salesPrice') }}：{{row.CODE}} {{ row.SELL_PRICE | toThousandFilter }}</span><br>
                                  <span>{{ $t('shop.productBV') }}：{{ row.PRICE_PV | toThousandFilter }}</span><br>
                                  <span>{{ $t('shop.marketPrice') }}：{{row.CODE}} {{ row.MARKET_PRICE | toThousandFilter }}</span><br>

                                  <span style="display: inline-block; float: right; ">
                                    <el-input-number v-model="storeNums[$index]" size="mini" :min="1" :max="Number(row.STORE_NUMS)" @change="handleInputNumber($event, row)" />
                                  </span>
                                  <br>
                                </div>
                              </el-main>
                            </el-container>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-collapse-item>
                  </el-collapse>

                  <div class="white-box-footer">
                    <div class="flex data" style="float: right; display: inline-block; line-height: 30px; font-size: 14px; margin-top: 15px; margin-bottom: 10px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 5px;">
                      <div style="margin-right: 1rem; display: inline-block;">{{ $t('shop.productPrice') }}： {{currencyUnitCode}} {{ sellPriceSum | toThousandFilter }}</div>
                      <div style="margin-right: 1rem; display: inline-block;">{{ $t('shop.productBV') }}：{{ pricePvSum | toThousandFilter }}</div>
                      <div style="display: inline-block;">{{ $t('shop.taxAmount') }}：{{currencyUnitCode}} {{ taxSum }}</div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-form-item>

            <el-divider content-position="left">{{ $t('atlas.networkInformation') }}</el-divider>
            <el-form-item :label="$t('user.recommenderName')">
              <el-input v-model="form.recUserName" :readonly="recReadOnly" @change="handleChkRecUser" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="recRealName" :disabled="true" />
            </el-form-item>
            <el-form-item :label="$t('user.recommenderActualName')">
              <el-input v-model="form.conUserName" @change="handleChkRecommenderActualName" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="conRealName" type="textarea" :rows="2" :disabled="true" />
            </el-form-item>
<!--            <el-form-item :label="$t('atlas.placementTree')">-->
<!--              <el-radio-group v-model="form.location" border>-->
<!--                <el-radio :label="1">{{ $t('atlas.left') }}</el-radio>-->
<!--                <el-radio :label="2">{{ $t('atlas.right') }}</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--            <el-form-item>&lt;!&ndash;自动安置区位&ndash;&gt;-->
<!--              <el-row :gutter="5">-->
<!--                <el-col :xs="24" :sm="12" :lg="12">-->
<!--                  <el-button size="small" type="primary" @click="setAutoPlace('left')">{{ $t('atlas.placementAutoLeft') }}</el-button>-->
<!--                </el-col>-->
<!--                <el-col :xs="24" :sm="12" :lg="12">-->
<!--                  <el-button size="small" type="primary" @click="setAutoPlace('right')">{{ $t('atlas.placementAutoRight') }}</el-button>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-form-item>-->

            <el-divider content-position="left">{{ $t('profile.personalInformation') }}</el-divider>
            <el-form-item :label="$t('shop.memberName')">
              <el-input v-model="form.realName" />
            </el-form-item>
            <el-form-item :label="$t('shop.phoneNumber')">
              <el-input v-model="form.mobile" />
            </el-form-item>
            <el-form-item :label="$t('user.email')">
              <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item :label="$t('profile.loginPassword')">
              <el-input v-model="form.password" maxlength="32" :placeholder="$t('profile.enterLoginPassword')" />
            </el-form-item>
            <el-form-item :label="$t('profile.paymentPassword')">
              <el-input v-model="form.payPassword" maxlength="32" :placeholder="$t('profile.enterPaymentPassword')" />
            </el-form-item>
            <el-form-item :label="$t('shop.recipientName')">
              <el-input v-model="form.consignee" />
            </el-form-item>
            <el-form-item :label="$t('shop.phoneNumber')">
              <el-input v-model="form.acceptMobile" />
            </el-form-item>
            <el-form-item :label="$t('shop.shipping')">
              <el-radio-group v-model="form.way" @change="wayChange">
                <el-radio label="express">{{ $t('shop.delivery') }}</el-radio>
                <el-radio label="pickup">{{ $t('shop.selfPickUp') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="areaSelected" :label="$t('config.state')">
              <el-cascader v-model="form.areaSelected" :disabled="areaDisabled" size="large" :placeholder="$t('shop.delivery')" :options="regionData" style="width: 100%;" />
            </el-form-item>
            <el-form-item :label="$t('config.detailedAddress')">
              <el-input v-model="form.address" :disabled="addressDisabled" />
            </el-form-item>
            <el-form-item :label="$t('config.city')">
              <el-input v-model="form.cityName" :disabled="addressDisabled" />
            </el-form-item>
            <el-form-item :label="$t('config.localGovernmentArea')">
              <el-input v-model="form.lgaName" :disabled="addressDisabled" />
            </el-form-item>

            <el-divider content-position="left">{{ $t('finance.bankInformation') }}</el-divider>
            <el-form-item :label="$t('finance.bankName')">
              <el-select v-model="form.openBank" :placeholder="$t('finance.selectBank')" style="width: 100%;">
                <el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME" :value="item.BANK_CODE" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('finance.accountName')">
              <el-input v-model="form.bankAddress" />
            </el-form-item>
            <el-form-item :label="$t('finance.bankAccount')">
              <el-input v-model="form.bankNo" maxlength="50" />
            </el-form-item>

            <el-divider content-position="left">{{ $t('user.payInfo') }}</el-divider>
            <el-form-item :label="$t('shop.paymentMethod')" required>
              <el-radio-group v-model="form.payType" @change="chosePayType">
                <el-radio v-for="(item, index) in payList" :key="index" border :label="item.label" style="margin: 5px;">
                  {{ item.name }}<span v-if="item.label === 'cash'" style="color: tomato;">（ {{currencyUnitCode}} {{ userBalance.localCash }}）</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button size="small" type="primary" :loading="submitButtonStat" @click="onSubmit">{{ $t('common.save') }}</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <!-- payStack模态框 -->
    <el-dialog v-loading="payStackLoading" :title="$t('shop.goPay')" :visible.sync="visible" :width="payStackScreenWidth" :before-close="handleClose">
      <section>
        <el-form :model="payForm">
          <el-form-item :label="$t('user.email')" label-width="100px" required>
            <el-input v-model="payForm.email" autocomplete="off" />
          </el-form-item>
          <el-form-item :label="$t('shop.amount')" label-width="100px" required>
            <el-input v-model="payForm.amount" autocomplete="off" readonly />
          </el-form-item>
        </el-form>
      </section>
      <paystack
        :firstname="payForm.firstname"
        :lastname="payForm.lastname"
        :amount="payForm.amount * 100"
        :email="payForm.email"
        :metadata="payForm.metadata"
        :currency="payForm.currency"
        :paystackkey="payForm.publicKey"
        :reference="reference"
        :channels="channels"
        :callback="processPayment"
        :close="handleClose"
      >
        <el-button type="primary" size="small">{{ $t('shop.goPay') }}</el-button>
      </paystack>
      <el-button type="danger" size="small" class="cancelButton" style="margin-left: 10px;" @click="handleClose">{{ $t('common.cancel') }}</el-button>
    </el-dialog>

    <!-- 倒计时页面 -->
    <el-dialog :title="$t('common.hint')" :visible.sync="payDialog" :width="payStackScreenWidth" :show-close="false" :close="handleOrderList">
      <el-card shadow="always">
        <el-result icon="success" :title="$t('common.successfully')" :sub-title="$t('shop.successOrderTips')">
          <template slot="extra">
            <el-button type="primary" size="medium" @click="handleOrderList">{{ $t('shop.goBack') }}({{ countdown }})</el-button>
          </template>
        </el-result>
      </el-card>
    </el-dialog>

    <!-- 商品详情 -->
    <el-dialog :title="product.GOODS_NO" :visible.sync="visibleProduct" :width="screenWidth" style="margin-top: -95px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="12">
          <el-image style="width: 100%; height: 100%" :style="imageStyle" :src="tool.getArImage(product.COVER, '/files/')" />
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <div style="text-align: left; line-height: 50px; font-size: 16px;">
            <span style="font-weight: bold; font-size: 20px;">{{ product.GOODS_NAME }}</span><br>
            <span style="font-weight: bold; font-size: 15px;">{{ $t('shop.productCode') }}：{{ product.GOODS_NO }}</span><br>
            <span style="color: tomato;">{{ $t('shop.salesPrice') }}：{{currencyUnitCode}} {{ product.SELL_PRICE }}</span><br>
            <span>{{ $t('shop.marketPrice') }}：{{currencyUnitCode}} {{ product.MARKET_PRICE }}</span><br>
            <span>{{ $t('shop.productBV') }}：{{ product.PRICE_PV }}</span><br>
            <span>{{ $t('shop.taxRate') }}：{{ product.TAX_RATE / 100 }}</span><br>
            <span>{{ $t('shop.taxAmount') }}：{{currencyUnitCode}} {{ product.taxAmount }}</span><br>
            <span>{{ $t('shop.inventory') }}：{{ product.STORE_NUMS }}</span>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { deleteApproachOrder } from '@/api/shop'
import {
  createWelcomePack,
  fetchAutoPlace,
  fetchBrandAmbassadorInfo,
  fetchFullInfo,
  fetchInspectNetwork,
  fetchWelcomePack
} from '@/api/user'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import region from '@/store/modules/region'
import { getScreenWidth } from '@/utils'
import tool from '@/utils/tool'
import usersInfo from '@/utils/usersInfo'
import paystack from 'vue-paystack'

export default {
  name: 'WelcomePack',
  components: { Pagination, paystack },
  directives: { waves },
  filters: {
    bvFilter(row) {
      return tool.calculateBV(row.REAL_PV, row.BUY_NUMS)
    },
    taxAmountFilter(row) {
      return tool.calculateTax(row.REAL_PRICE, row.BUY_NUMS)
    },
    priceAmountFilter(row) {
      return tool.formatPrice(row.REAL_PRICE * row.BUY_NUMS)
    },
    statusFilter(status) {
      const statusMap = {
        Unpaid: 'info',
        Paid: 'success'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      isChooseCountry: false,
      loading: false,
      tool: tool,

      allGoods: [],
      numList: [],
      categoryType: '',
      sellType: [],
      payList: [],
      screenWidth: getScreenWidth() > 600 ? '50%' : getScreenWidth() + 'px',
      labelPosition: getScreenWidth() > 600 ? 'right' : 'top',
      payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',

      dialog: false,
      dialogLoading: false,

      multipleSelection: [],
      sellPriceSum: 0.00,
      pricePvSum: 0.00,
      taxSum: 0.00,
      storeNums: [],
      tableData: null,
      payAmount: 0.00,

      cashCurrency: '',
      currency: {},
      pointsSum: 0,
      cashSum: 0,
      pointFreight: 0,
      freeShipping: '',
      goodsId: '',
      goodsNum: '',
      payPassword: '',
      submitButtonStat: false,
      sn: '',
      orderType: '',
      payDialog: false,
      countdown: 5,
      visible: false,
      totalAmount: 0.00,
      freight: 0.00,
      userBalance: {
        cash: 0,
        localCash: 0,
      },

      payType: 'cash',
      payStackLoading: false,
      channels: ['card', 'bank', 'ussd', 'qr'],
      payForm: {
        publicKey: process.env.VUE_APP_BASE_PAY_STACK_PUBLIC_KEY,
        currency: 'NGN',
        firstname: usersInfo.userName(),
        lastname: '',
        email: usersInfo.userEmail(),
        amount: 0,
        orderSn: '',
        metadata: {
          cart_id: '',
          custom_fields: [
            {
              display_name: 'orderSn',
              variable_name: 'orderSn',
              value: this.sn
            },
            {
              display_name: 'orderType',
              variable_name: 'orderType',
              value: 'baDec'
            }
          ]
        }
      },

      addressId: '',
      selfPickUpAddressId: '100000000000000000',
      shippingAddressList: [],

      visibleProduct: false,
      product: {
        GOODS_NAME: '',
        GOODS_NO: '',
        COVER: '',
        SELL_PRICE: 0,
        PRICE_PV: 0,
        TAX_RATE: 0,
        taxAmount: 0
      },
      imageStyle: 'margin-top: 0px;',

      decWay: '2',
      regionData: [],
      form: {
        decType: 'normal',
        realName: '',
        decLv: '',
        insertUserName: '',
        decUserName: '',
        recUserName: '',
        conUserName: '',
        insertUserIdCard: '',
        consignee: '',
        acceptMobile: '',
        areaSelected: [],
        address: '',
        openBank: '',
        bankAddress: '',
        bankProvince: '',
        bankCity: '',
        bankCounty: '',
        bankNo: '',
        bankAreaSelected: [],
        password: '111111',
        payPassword: '111111',
        mobile: '',
        email: '',
        packageId: '',
        goodsId: [],
        goodsNum: [],
        province: '',
        cityName: '',
        lgaName: '',
        way: 'express',
        payType: '',
        autoPlace: '',
        location: ''
      },

      conRealName: '-',
      recRealName: '-',
      areaDisabled: false,
      addressDisabled: false,

      userReadOnly: true,
      recReadOnly: false,
      allDecLevel: [],
      allOpenBank: [],

      activeName: 'product',
      isDec:null,

      countries: null,
      currencyUnitCode: ""
    }
  },
  computed: {
    // PayStack混淆串
    reference() {
      let text = ''
      const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i < 10; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length))
      }
      return text
    },
    countriesList() {
      return this.$store.getters.getCountriesList
    },
    languageList() {
      return this.$store.getters.languageList
    },
    language() {
      return this.$store.getters.language
    },
  },
  watch: {
     isDec: {
      handler(newValue, old) {
         if (newValue == '1') {
            this.form.decUserName = usersInfo.userName();
         }
       },
     }
  },
  created() {
    const regionInfo = this.$store.getters.regionInfo
    // console.log(this.$store.state.region)
    // this.fetchWelcomePack()
    this.getCountries()
  },
  methods: {

    countriesChange(e){
      this.fetchWelcomePack()
    },
    //国家列表
    getCountries() {
      this.$store.dispatch('settings/getCountries')
    },
    // 会员报单/BA升级
    fetchWelcomePack() {
      this.loading = true
      fetchWelcomePack({countryId: this.form.countryId}).then(response => {
        this.form.insertUserName = response.data.userName
        this.allOpenBank = response.data.allOpenBank
        this.allDecPackage = response.data.allDecPackage
        this.allGoods = response.data.allGoods
        this.userBalance = response.data.userBalance
        this.regionData = response.data.region
        this.allDecLevel = response.data.decLevel
        this.categoryType = 1
        if(response.data.allGoods && response.data.allGoods.length > 0){
          this.currencyUnitCode = response.data.allGoods[0].CODE
        }
        //是否是报单中心
        this.isDec = response.data.isDec
        const settingObj = this.allGoods
        for (const i in this.allGoods) {
          this.storeNums[i] = 1
          settingObj[i].goodsNum = 0
        }

        this.tableData = Object.values(settingObj)
        const pageList = this.multipleSelection
        this.$nextTick(function() {
          for (const i in this.tableData) {
            for (const j in pageList) {
              if (pageList[j].ID === this.tableData[i].ID) {
                this.$data.storeNums[i] = pageList[j].goodsNum
                this.tableData[i].goodsNum = pageList[j].goodsNum
                break
              }
            }
          }
        })

        // 支付方式
        this.payList = response.data.sellType[0]['sell_type']
        // 支付方式的第一项默认选中
        this.form.payType = Object.values(this.payList)[1]['label']

        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    // 商品详情
    handleProduct(row) {
      this.product = row
      this.product.taxAmount = tool.calculateTax(row.MARKET_PRICE, row.TAX_RATE)
      this.visibleProduct = true
    },
    // 选择商品计数
    handleInputNumber(current, row) {
      const pageList = this.multipleSelection
      let selectStatus = false
      for (const i in pageList) {
        if (pageList[i].ID === row.ID) {
          pageList[i].goodsNum = current
          selectStatus = true
          break
        }
      }
      if (selectStatus) {
        this.multipleSelection = pageList
        this.handleSureChange()
      }
    },
    // 统计商品
    handleSureChange() {
      if (this.multipleSelection.length > 0) {
        let accumulatorSellPrice = 0; let accumulatorPricePv = 0; let accumulatorTax = 0
        this.multipleSelection.forEach(accumulator => {
          accumulatorSellPrice += accumulator.MARKET_PRICE * accumulator.goodsNum
          accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.goodsNum)
          accumulatorTax += tool.calculateTax(Number(accumulator.MARKET_PRICE), Number(accumulator.TAX_RATE), Number(accumulator.goodsNum))
        })

        this.sellPriceSum = tool.formatPrice(accumulatorSellPrice)
        this.pricePvSum = tool.formatPrice(accumulatorPricePv)
        this.taxSum = tool.formatPrice(accumulatorTax)

        this.display = true
      } else {
        this.sellPriceSum = this.pricePvSum = this.taxSum = 0.00
        this.display = true
      }
    },
    // 选择商品
    handleSelectionChange(val) {
      let idx = -1; let num
      for (const i in this.tableData) {
        for (const v in val) {
          if (val[v].ID === this.tableData[i].ID) {
            idx = i
            num = this.storeNums[idx]
            val[v]['goodsNum'] = num
            break
          }
        }
      }
      this.multipleSelection = val
      // 计算统计
      this.handleSureChange()
    },
    // 选择收货地址
    choseAddress(addressId) {
      this.addressId = addressId
      // 设置运费
      this.setFreight()
      // 计算价格
      this.getSumMoney()
    },
    // 切换支付方式
    chosePayType(type) {
      this.payType = type
    },
    // 关闭支付回调
    handleClose() {
      this.$confirm(this.$t('shop.confirmClose')).then(_ => {
        deleteApproachOrder({ orderSn: this.form.orderSn }).then(() => {
          // 关闭支付模态框
          this.visible = false
          // 关闭购物车
          this.visibleShoppingCart = false
          this.submitButtonStat = false
        })
      })
    },
    // 支付成功回调
    processPayment() {
      // 关闭支付页面
      this.visible = false
      this.payStackLoading = false
      // 显示支付成功模态框
      this.payDialog = true
      // 启动支付成功倒计时
      this.handleCountdown()
    },
    // 倒计时结束跳转
    handleOrderList() {
      this.$router.push({ path: `/shop/member-order` })
    },
    // 启动倒计时
    handleCountdown() {
      // 创建定时器
      setInterval(() => {
        // 每隔1秒把time的值减一，赋值给span标签
        this.countdown--
        if (this.countdown === 0) {
          // 倒计时结束,跳转到订单列表
          this.$router.push({ path: `/shop/member-order` })
        }
      }, 1000)
    },
    // 会员查询
    handleChkRecUser() {
      this.form.conUserName = ''
      this.conRealName = '-'
      this.form.autoPlace = ''
      if (this.form.recUserName) {
        this.loading = true
        fetchFullInfo({ userName: this.form.recUserName }).then(response => {
          this.recRealName = response.data.REAL_NAME
          this.loading = false
        }).catch(() => {
          this.recRealName = '-'
          this.loading = false
        })
      }
    },
    // 返回方式
    wayChange() {
      if (this.form.way === 'pickup') {
        this.areaDisabled = true
        this.addressDisabled = true
      } else {
        this.areaDisabled = false
        this.addressDisabled = false
      }
    },
    // 会员报单/BA升级
    onSubmit() {
      if (!this.form.decLv) {
        this.$message({
          message: this.$t('profile.selectLevel'),
          type: 'error'
        })
        return false
      }
      if (this.isDec == 0 && !this.form.decUserName) {
        this.$message({
          message: this.$t('shop.declarationCenterNumberTips'),
          type: 'error'
        })
        return false
      }
      // 已选择商品
      this.selectProduct()
      if (this.multipleSelection.length <= 0) {
        this.$message.error(this.$t('shop.chooseTips'))
        return false
      }
      // 余额
      const amountBalance = this.userBalance[this.form.payType] || 0
      // 余额是否充足
      if ((this.form.payType === 'cash') && ((amountBalance - this.payAmount) < 0)) {
        // 账户类型提示信息
        const payListArray = Array.from(this.form.payType)
        const account = payListArray.filter(item => {
          return this.form.payType === item.label
        })
        const accountType = account[0] && account[0].name || ''
        this.$message({
          message: accountType + this.$t('shop.balanceNotAllow'),
          type: 'error'
        })
        return false
      }

      this.submitButtonStat = true

      const params = {
        consignee: this.form.consignee,
        acceptMobile: this.form.acceptMobile,
        province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
        city: this.form.areaSelected[1] ? this.form.areaSelected[1] : '',
        county: this.form.areaSelected[2] ? this.form.areaSelected[2] : '',
        address: this.form.address,
        decType: this.form.decType,
        insertUserName: this.form.insertUserName,
        decLv: this.form.decLv,
        realName: this.form.realName,
        decUserName: this.form.decUserName,
        conUserName: this.form.conUserName,
        recUserName: this.form.recUserName,
        insertUserIdCard: this.form.insertUserIdCard,
        openBank: this.form.openBank,
        bankAddress: this.form.bankAddress,
        mobile: this.form.mobile,
        email: this.form.email,
        cityName: this.form.cityName,
        lgaName: this.form.lgaName,

        bankProvince: this.form.bankAreaSelected[0] ? this.form.bankAreaSelected[0] : '',
        bankCity: this.form.bankAreaSelected[1] ? this.form.bankAreaSelected[1] : '',
        bankCounty: this.form.bankAreaSelected[2] ? this.form.bankAreaSelected[2] : '',

        bankNo: this.form.bankNo,
        password: this.form.password,
        payPassword: this.form.payPassword,
        packageId: this.form.packageId,
        goodsId: this.form.goodsId,
        goodsNum: this.form.goodsNum,
        location: 1, //自动安置
        decWay: this.decWay,
        payType: this.form.payType,
        countryId: this.form.countryId,
        languageId: this.form.languageId
      }
      createWelcomePack(params).then(response => {
        if (this.form.payType !== 'pay_stack') {
          // 余额支付
          this.$message({
            message: this.$t('common.successfully'),
            type: 'success'
          })
          this.submitButtonStat = false
          this.$router.push({ path: `/shop/member-order` })
        } else {
          this.submitButtonStat = false
          this.payForm.orderSn = response.data.SN
          this.payForm.amount = response.data.ORDER_AMOUNT
          this.payForm.metadata.custom_fields[0].value = response.data.SN
          if (this.form.decType === 'ba') {
            this.payForm.metadata.custom_fields[1].value = 'baUpgrade'
          } else {
            this.payForm.metadata.custom_fields[1].value = 'userDec'
          }
          this.visible = true
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.submitButtonStat = false
      })
    },
    // 已选择商品
    selectProduct() {
      this.payAmount = 0
      this.form.goodsId = []
      this.form.goodsNum = []
      this.multipleSelection.map((item) => {
        this.form.goodsId.push(item.ID)
        this.form.goodsNum.push(item.goodsNum)
        this.payAmount += item.goodsNum * item.MARKET_PRICE
      })
    },
    // 报单方式
    decTypeChange() {
      if (this.form.decType === 'ba') {
        this.form.insertUserName = ''
        this.userReadOnly = false
      } else {
        this.form.recUserName = ''
        this.recRealName = '-'
        this.recReadOnly = false
        this.userReadOnly = true
        this.fetchWelcomePack()
      }
    },
    // BA会员查询
    checkBaUser() {
      if (this.form.decType === 'ba' && this.form.insertUserName !== '') {
        this.loading = true
        fetchBrandAmbassadorInfo({ userName: this.form.insertUserName }).then(response => {
          this.form.recUserName = response.data.REC_USER_NAME
          this.form.realName = response.data.REAL_NAME
          this.handleChkRecUser()
          this.recReadOnly = true
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    // 查询安置人
    handleChkConUser() {
      if (this.form.conUserName) {
        this.loading = true
        fetchFullInfo({ userName: this.form.conUserName }).then(response => {
          this.conRealName = response.data.REAL_NAME + response.data.isLocation
          this.loading = false
        }).catch(() => {
          this.conRealName = '-'
          this.loading = false
        })
      }
    },
      // 查询安置人
      handleChkRecommenderActualName() {
          if (this.form.conUserName) {
              this.loading = true
            fetchInspectNetwork({ recommenderName: this.form.recUserName, recommenderActualName: this.form.conUserName }).then(response => {
                  this.conRealName = response.data.REAL_NAME
                  this.loading = false
              }).catch(() => {
                  this.conRealName = '-'
                  this.loading = false
              })
          }
      },
    // 自动设置区位
    setAutoPlace(side) {
      if (this.recRealName !== '-') {
        this.loading = true
        fetchAutoPlace({ userName: this.form.recUserName, side: side }).then(response => {
          this.form.conUserName = response.data.USER_NAME
          this.handleChkConUser()
          this.form.location = 1
          this.form.autoPlace = side
          this.loading = false
        }).catch(() => {
          this.conRealName = '-'
          this.loading = false
        })
      } else {
        this.form.autoPlace = ''
        return false
      }
    }
  }
}
</script>

<style>
.el-table th.el-table__cell > .cell {
	white-space: nowrap;
}

.el-table td.el-table__cell > .cell {
	word-break: keep-all;
	white-space: pre-wrap;
}
.el-tabs--border-card > .el-tabs__content {
	padding: 5px;
}

.el-radio.is-bordered + .el-radio.is-bordered {
	margin: 5px 0;
}
.el-radio--medium.is-bordered {
	margin: 5px 0;
}
.noList{
  margin: 10px 0;
}
</style>