ngds/frontendEle/src/views/user/ba-dec.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-form ref="form"  label-width="180px" class="form-page">
        <div class="hr-tip"><span>Account Information<!--账号信息--></span></div>

        <el-form-item label="New member code"><!--会员编号-->
          <el-input v-model="form.insertUserName" readonly="readonly"></el-input>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <template slot="label">-->
<!--            Entry level&lt;!&ndash;实时报单级别&ndash;&gt;-->
<!--          </template>-->
<!--          <el-select v-model="form.decLv" placeholder="Select entry level" @change="selectOne($event)">-->
<!--            <el-option v-for="(item,index) in allDecLevel" :key="index" :label="item.LEVEL_NAME"-->
<!--             :value="item.ID"></el-option>-->
<!--          </el-select>&lt;!&ndash;请选择报单级别&ndash;&gt;-->
<!--        </el-form-item>-->
        <el-form-item label="Stockist Code"><!--报单中心编号-->
          <el-input v-model="form.decUserName" readonly></el-input>
        </el-form-item>

        <el-form-item>
          <template slot="label">
            Select Welcome Pack<!--报单方式二选一-->
          </template>
          <el-tabs type="border-card" v-model="decWay" style="position: relative;width: 1200px;">
            <el-tab-pane label="Product" name="2"><!-- 商品报单 -->
              <el-table class="table-box" v-if="numList.length > 0" :data="tableDatas" stripe style="width: 100%;" highlight-current-row  @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>

                <el-table-column label="Product Name" prop="GOODS_NAME" width="300"><!-- 商品名称 -->

                </el-table-column>
                <el-table-column label="Product code" prop="GOODS_NO" width="120"><!-- 商品编号 -->

                </el-table-column>
                <el-table-column label="Product price" prop="SELL_PRICE" width="120"><!-- 卖价 -->

                </el-table-column>

                <el-table-column label="Product BV" prop="PRICE_PV" width="100"><!-- BV价格 -->

                </el-table-column>
                <el-table-column label="Tax rate" prop="TAX_RATE" width="100">
                  <template slot-scope="scope">
                    {{ Math.round(scope.row.TAX_RATE * 100) / 100 }}
                  </template>
                </el-table-column>
                <el-table-column label="Tax" width="100">
                  <template slot-scope="scope">
                    {{ Math.round((scope.row.SELL_PRICE - scope.row.SELL_PRICE / (1 + scope.row.TAX_RATE / 100)) * 100) / 100 }}
                  </template>
                </el-table-column>
                <el-table-column label="Quantity" width="150"><!-- 数量 -->
                  <template slot-scope="scope">
                    <el-input-number size="mini" v-model="numList[scope.$index]"  :min="0" :max="Number(scope.row.STORE_NUMS)" @change="value=>{handleChange(value,scope.row.ID)}"></el-input-number>
                  </template>
                  <!-- <template slot-scope="scope">
                    <el-input-number v-if="form.goodsId.some(item=>item==scope.row.ID)" v-model='scope.row.goodsNum' @change="value=>{handleChange(value,scope.row.ID)}" controls-position="right" style="width: 70px;" size="mini"></el-input-number>
                  </template> -->
                </el-table-column>
              </el-table>
              <div class="white-box-footer flex">
                <el-button @click="getSum()">Total Calculation</el-button><!--计算合计-->
                <div class='flex data' style="flex:1;justify-content: flex-end;">
                  <div style="margin-right:2rem">Price：₦{{sell_price_sum}}</div><!--商品价格-->
                  <div style="margin-right:2rem">BV：{{price_pv_sum}}</div><!--商品BV-->
                  <div>Tax：₦{{tax_sum}}</div><!--商品BV-->
                </div>
              </div>

            </el-tab-pane>
          </el-tabs>
        </el-form-item>

        <div class="hr-tip"><span>Network Information</span></div><!--网络信息-->
        <el-form-item label="Sponsor code"><!--推荐人编号-->
          <el-input v-model="form.recUserName" @change="handleChkRecUser">
            <template slot="append">【{{recRealName}}】</template>
          </el-input>
        </el-form-item>

<!--        <el-form-item label="Placement code">&lt;!&ndash;接点人编号&ndash;&gt;-->
<!--          <el-input v-model="form.conUserName" @change="handleChkConUser">-->
<!--            <template slot="append">【{{conRealName}}】</template>-->
<!--          </el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="Placement tree">&lt;!&ndash;安置区位&ndash;&gt;-->
<!--          <el-radio-group v-model="form.location">-->
<!--            <el-radio :label="1" >Left</el-radio>&lt;!&ndash;左区&ndash;&gt;-->
<!--            <el-radio :label="2" >Right</el-radio>&lt;!&ndash;右区&ndash;&gt;-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="">&lt;!&ndash;自动安置区位&ndash;&gt;-->
<!--          <el-button type="primary" @click="setAutoPlace('left')">Placement Auto Location: L</el-button>-->
<!--          <el-button type="primary" @click="setAutoPlace('right')">Placement Auto Location: R</el-button>-->
<!--        </el-form-item>-->

        <div class="hr-tip"><span>Personal Information<!--个人信息--></span></div>
        <el-form-item>
          <template slot="label">
            Member Name<!-- 会员姓名 -->
          </template>
          <el-input v-model="form.realName"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Phone Number<!-- 会员手机 -->
          </template>
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Email
          </template>
          <el-input v-model="form.email"></el-input>
        </el-form-item>

        <el-form-item>
          <template slot="label">
            Login Password<!-- 登录密码 -->
          </template>
          <el-input v-model="form.password" maxlength="32" placeholder="Enter password"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Payment Password<!-- 支付密码 -->
          </template>
          <el-input v-model="form.payPassword" maxlength="32" placeholder="Enter Payment password"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Recipient Name<!-- 收货人 -->
          </template>
          <el-input v-model="form.consignee"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Phone Number<!-- 收货人手机 -->
          </template>
          <el-input v-model="form.acceptMobile"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Shipping<!-- 收货方式 -->
          </template>
          <el-radio-group v-model="form.way" @change="wayChange">
            <el-radio label="express">Delivery</el-radio>
            <el-radio label="pickup">Self Pick-up<!--自提--></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="areaSelected">
          <template slot="label">
            State<!-- 地区 -->
          </template>
          <el-cascader
            :disabled="areaDisabled"
            size="large"
            :options="regionData"
            v-model="form.areaSelected">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Full address<!-- 详细地址 -->
          </template>
          <el-input :disabled="addressDisabled" v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            City<!-- 详细地址 -->
          </template>
          <el-input :disabled="addressDisabled" v-model="form.cityName"></el-input>
        </el-form-item>
        <el-form-item>
          <template slot="label">
            Local Government Area<!-- 详细地址 -->
          </template>
          <el-input :disabled="addressDisabled" v-model="form.lgaName"></el-input>
        </el-form-item>

<!--        <div class="hr-tip"><span>Bank Info&lt;!&ndash; 银行信息 &ndash;&gt;</span></div>-->

<!--        <el-form-item label="Bank Name">&lt;!&ndash; 开户行 &ndash;&gt;-->
<!--          <el-select v-model="form.openBank" placeholder="Select Bank">&lt;!&ndash; 请选择开户行 &ndash;&gt;-->
<!--            <el-option v-for="(item,index) in allOpenBank" :key="index" :label="item.BANK_NAME"-->
<!--             :value="item.BANK_CODE"></el-option>-->
<!--          </el-select>-->

<!--        </el-form-item>-->
<!--        <el-form-item label="Account Name">&lt;!&ndash; 开户支行 &ndash;&gt;-->
<!--          <el-input v-model="form.bankAddress"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="Account Number">&lt;!&ndash; 银行账号 &ndash;&gt;-->
<!--          <el-input v-model="form.bankNo" maxlength="19"></el-input>-->
<!--        </el-form-item>-->

        <div class="hr-tip"><span>Pay Info<!-- 支付信息 --></span></div>
        <el-form-item label="Payment method" required><!-- 支付方式 -->
          <el-radio-group v-model="form.payType" @change="payMethodChange">
            <el-radio v-for="(item, index) in payList" :key='index' :label="item.label">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">Save<!-- 保存 --></el-button>
        </el-form-item>
      </el-form>
      </div>

      <el-dialog title="Pay" v-if="visible" :visible.sync="visible" width="30%" v-loading="payStackLoading" :before-close="handleClose">
        <section>
          <div class="formcontainer">
            <el-divider></el-divider>
            <div class="container">
              <el-form :model="PayStackForm">
                <el-form-item label="Email" label-width="100px" required>
                  <el-input v-model="PayStackForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Amount" label-width="100px" required>
                  <el-input v-model="PayStackForm.amount" autocomplete="off" readonly></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </section>

        <paystack
          :firstname="PayStackForm.firstname"
          :lastname="PayStackForm.lastname"
          :amount="PayStackForm.amount * 100"
          :email="PayStackForm.email"
          :metadata="PayStackForm.metadata"
          :currency="PayStackForm.currency"
          :paystackkey="PayStackForm.publicKey"
          :reference="reference"
          :channels="channels"
          :callback="processPayment"
          :close="processClose"
        >
          <el-button type="primary" size="small">Pay</el-button>

        </paystack>
        <el-button type="danger" size="small" class="cancelButton" @click="handleClose">Cancel</el-button>
      </el-dialog>

      <el-dialog title="Tips" :visible.sync="payDialog" :show-close="false" width="350px" :close="handleOrderList">
        <el-result icon="success" title="the order is successful">
          <template slot="extra">
            <span style="color: #008efa; font-size: 30px;">{{ countdown }}</span>
          </template>
        </el-result>
      </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import network from '@/utils/network'
import baseInfo from '@/utils/baseInfo'
import store from '@/utils/vuexStore'
import tool from '@/utils/tool'
import userInfo from '@/utils/userInfo'
import { PAY_STACK_PUBLIC_KEY, PAY_STACK_CURRENCY } from '@/utils/config'
import paystack from 'vue-paystack'

export default {
  name: 'user_dec',
  async created () {
    await this.getData()
  },
  computed: {
    // _tableData () {
    //   if (this.tableData == null) {
    //     return []
    //   }
    //   if (this.form.decLv === '') {
    //     return this.tableData
    //   }
    //   return this.tableData.filter(item => {
    //     return item.LEVEL_ID === this.form.decLv
    //   })
    // },
    reference () {
      let text = ''
      let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      for (let i = 0; i < 10; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length))
      }
      return text
    }
  },

  data () {
    return {
      currentRow: null,
      decWay: '2',
      regionData: store.state.regionInfo.regionData,
      form: {
        realName: '',
        decLv: '',
        insertUserName: '',
        decUserName: userInfo.userName(),
        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: '-',
      num: 1,
      // tableData: null,
      tableDatas: null,
      allOpenBank: null,
      // allDecPackage: {},
      allDecLevel: baseInfo.decLevels(),
      loading: false,
      submitButtonStat: false,
      submitButton: false,
      allGoods: [],
      multipleSelection: [],
      goodsNums: [],
      numList: [],
      sell_price_sum: 0.00,
      price_pv_sum: 0.00,
      tax_sum: 0.00,
      areaDisabled: false,
      addressDisabled: false,
      category_type: '',
      payList: [],
      sn: '',
      payDialog: false,
      countdown: 5,
      visible: false,
      payStackLoading: false,
      channels: ['card', 'bank', 'ussd', 'qr'], // eft(南非)  mobile_money(加纳)
      PayStackForm: {
        publicKey: PAY_STACK_PUBLIC_KEY,
        currency: PAY_STACK_CURRENCY,
        firstname: userInfo.userName(),
        lastname: '',
        email: userInfo.userEmail(),
        amount: 0, // kobo
        orderSn: '',
        metadata: {
          cart_id: this.sn,
          custom_fields: [
            {
              display_name: 'orderSn',
              variable_name: 'orderSn',
              value: this.sn
            },
            {
              display_name: 'isBrandAmbassador',
              variable_name: 'isBrandAmbassador',
              value: true,
            },
          ]
        }
      }
    }
  },
  components: {
    paystack
  },
  methods: {
    wayChange () {
      if (this.form.way === 'pickup') {
        this.areaDisabled = true
        this.addressDisabled = true
      } else {
        this.areaDisabled = false
        this.addressDisabled = false
      }
    },
    getSum () {
      let sell_price_sum = 0, price_pv_sum = 0, tax_sum = 0
      this.multipleSelection.map((item, index) => {
        sell_price_sum += Number(item.SELL_PRICE) * item.goodsNum
        price_pv_sum += Number(item.PRICE_PV) * item.goodsNum
        tax_sum += Number(item.SELL_PRICE - item.SELL_PRICE / (1 + item.TAX_RATE / 100)) * item.goodsNum
      })
      this.sell_price_sum = tool.formatPrice(sell_price_sum)
      this.price_pv_sum = tool.formatPrice(price_pv_sum)
      this.tax_sum = tool.formatPrice(tax_sum)
    },
    async getData () {
      await network.getData(`user/ba-dec`).then(response => {
        this.loading = false
        this.form.insertUserName = response.userName
        // this.allOpenBank = response.allOpenBank
        // this.allDecPackage = response.allDecPackage
        this.allGoods = response.allGoods
        this.categoryType = 1

        // let settingObj = this.allDecPackage
        // let settingArr = Object.keys(settingObj).map(key => {
        //   return settingObj[key] // 把每个对象返回出去生成一个新的数组中相当于0:{id:1}
        // })
        // this.tableData = settingArr
        let settingObj1 = this.allGoods
        for (let i in settingObj1) {
          this.numList[i] = 1
          settingObj1[i].goodsNum = 1
        }
        this.tableDatas = settingObj1

        // 支付方式
        this.payList = response.sellType[0]['sell_type']
        // 支付方式的第一项默认选中
        this.form.payType = Object.values(this.payList)[1]['label']
      })
    },
    handleCurrentChange (val) {
      if (!val) { return }
      this.currentRow = val
      this.form.packageId = this.currentRow.ID
    },
    handleSelectionChange (val) {
      let idx = -1, num
      for (let i in this.tableDatas) {
        for (let v in val) {
          if (val[v].ID === this.tableDatas[i].ID) {
            idx = i
            num = this.numList[idx]
            val[v]['goodsNum'] = num
            break
          }
        }
      }
      this.multipleSelection = val
    },
    handleChange (value, ID) {
      for (let i in this.multipleSelection) {
        if (this.multipleSelection[i]['ID'] === ID) {
          this.multipleSelection[i]['goodsNum'] = value
        }
      }
    },
    getGoods () {
      this.form.goodsId = []
      this.form.goodsNum = []
      this.multipleSelection.map((item, index) => {
        this.form.goodsId.push(item.ID)
        this.form.goodsNum.push(item.goodsNum)
      })
    },
    onSubmit () {
      let _this = this
      _this.getGoods()
      _this.submitButtonStat = true
      let path = 'user/ba-dec'
      let postData = {
        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,
        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: _this.form.location,
        decWay: _this.decWay,
        payType: _this.form.payType
      }

      return network.postData(path, postData).then((response) => {
        // 非PayStack支付
        if (_this.form.payType !== 'pay_stack') {
          console.log(response)
          _this.$message({
            message: response,
            type: 'success'
          })
          _this.submitButtonStat = false
          _this.$router.push({path: `/shop/ba-dec-order-list`})
        } else {
          // PayStack支付
          _this.submitButtonStat = false
          _this.PayStackForm.orderSn = response.SN
          _this.PayStackForm.amount = response.ORDER_AMOUNT
          _this.PayStackForm.metadata.custom_fields[0].value = response.SN
          _this.visible = true
        }
      }).catch(response => {
        _this.submitButtonStat = false
        _this.$message({
          message: response,
          type: 'error'
        })
      })
    },

    selectOne (event, item) {
      network.getData(`user/ba-dec`).then(response => {
      })
    },

    handleChkConUser () {
      if (this.form.conUserName) {
        this.loading = true
        network.getData('user/full-info', {userName: this.form.conUserName}).then(response => {
          this.conRealName = response.REAL_NAME + response.isLocation
          this.loading = false
        }).catch(response => {
          this.conRealName = '-'
          this.loading = false
        })
      }
    },

    handleChkRecUser () {
      this.form.conUserName = ''
      this.conRealName = '-'
      this.form.autoPlace = ''
      if (this.form.recUserName) {
        this.loading = true
        network.getData('user/full-info', {userName: this.form.recUserName}).then(response => {
          // console.log(response)
          this.recRealName = response.REAL_NAME
          this.loading = false
        }).catch(response => {
          this.recRealName = '-'
          this.loading = false
        })
      }
    },
    // 切换支付方式
    payMethodChange (type) {
      this.form.payType = type
    },
    // 关闭支付回调
    handleClose () {
      let _this = this
      _this.$confirm('Confirm to close?').then(() => {
        return network.postData('shop/delete-approach-order', {orderSn: this.PayStackForm.orderSn}).then(() => {
          // 关闭支付模态框
          _this.visible = false
        })
      }).catch(() => {
        // 关闭支付模态框
        _this.visible = false
      })
    },
    // 支付成功回调
    processPayment (response) {
      // 关闭支付页面
      this.visible = false
      this.payStackLoading = false

      // 显示支付成功模态框
      this.payDialog = true
      this.handleCountdown()
    },
    // 关闭支付回调
    processClose () {
      // 关闭支付模态框
      this.visible = false
    },
    // 支付tips结束,跳转到报单列表
    handleOrderList () {
      this.$router.push({path: `/shop/ba-dec-order-list`})
    },
    // 启动倒计时
    handleCountdown () {
      // 创建定时器
      setInterval(() => {
        // 每隔1秒把time的值减一，赋值给span标签
        this.countdown--
        if (this.countdown === 0) {
          // 倒计时结束,跳转到报单列表
          this.$router.push({path: `/shop/ba-dec-order-list`})
        }
      }, 1000)
    }
  }
}
</script>

<style>
  .hr-tip {
    font-size: 12px;
    position: relative;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #999;
    margin-bottom: 20px;
  }

  .hr-tip:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    border-bottom: 1px dashed #ddd;
    height: 1px;
  }

  .hr-tip span {
    display: inline-block;
    background: #fff;
    position: relative;
    padding: 0 10px;
  }
  .el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase{
    width: 22px!important
  }
  .el-input-number.is-controls-right .el-input__inner{
    padding-left: 10px;
    padding-right: 30px;
  }
  .el-tabs--border-card{
    position: relative;
    width: 600px;
  }
  .flex{
    display: flex;
  }
  .address{
    /* height: 3rem; */
    line-height: 3.5rem;
  }
  .address_box{
    border-bottom: 1px solid #e3e3e3;
  }
  .sum{
    display: inline-block;
  }
  .box{
    margin: 1rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 1rem;
  }
  .sum_box{
    display: flex;
    margin-left: 1rem;
  }
  .sum_box > div{
    line-height: 2rem;
  }
  .sum_box > div:nth-child(1){
    margin-right: 1rem;
  }
  .payButton {
    border: none;
    padding: 0;
  }
</style>