ngfrontend/src/views/user/member-upgrade.vue

<template>
  <div v-loading="loading">
    <div class="white-box" style="padding: 15px 25px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="16" :lg="16">
          <el-form ref="form" :model="form" :label-position="labelPosition" label-width="180px" class="form-page">
            <el-form-item :label="$t('shop.memberCode')" prop="insertUserName">
              <el-input v-model="form.insertUserName" :placeholder="$t('user.enterMemberCode')" :rules="{ required: true, message: $t('user.enterMemberCode'), trigger: 'blur' }" @blur="fetchUpgradeInfo" />
            </el-form-item>
            <el-form-item :label="$t('profile.memberLevel')">
              <el-input v-model="form.userDecName" disabled />
            </el-form-item>
            <el-form-item :label="$t('shop.memberName')">
              <el-input v-model="form.userRealName" disabled />
            </el-form-item>
            <el-form-item :label="$t('profile.joiningDate')">
              <el-input v-model="form.addAt" disabled />
            </el-form-item>

            <el-form-item v-if="!isMax" :label="$t('profile.upgradeWay')">
              <el-input v-model="form.upgradeFunc" disabled />
            </el-form-item>
            <el-form-item v-if="!isMax" prop="upgradeValue" :label="$t('profile.toUpgradeLevel')">
              <el-select v-model="form.upgradeValue" :placeholder="$t('profile.selectLevel')" style="width: 100%;" @change="handleChangeLevel($event)">
                <el-option v-for="item in upgradeOption" :key="item.ID" :label="item.LEVEL_NAME" :value="{value:item.ID, diffPv:item.REPAIR_PV}" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="!isMax" :label="$t('profile.topUpBV')">
              <el-input v-model="needDiffPv" disabled />
            </el-form-item>
            <el-form-item v-if="!isMax">
              <template slot="label">{{ $t('profile.upgradePurchaseProduct') }}</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-form-item v-if="!isMax" :label="$t('shop.recipientName')">
              <el-input v-model="form.consignee" />
            </el-form-item>
            <el-form-item v-if="!isMax" :label="$t('shop.phoneNumber')">
              <el-input v-model="form.acceptMobile" />
            </el-form-item>
            <el-form-item v-if="!isMax" prop="areaSelected" :label="$t('config.state')">
              <el-cascader v-model="form.areaSelected" size="large" :options="regionData" style="width: 100%;" />
            </el-form-item>
            <el-form-item v-if="!isMax" :label="$t('config.localGovernmentArea')">
              <el-input v-model="form.lgaName" />
            </el-form-item>
            <el-form-item v-if="!isMax" :label="$t('config.city')">
              <el-input v-model="form.cityName" />
            </el-form-item>
            <el-form-item v-if="!isMax" :label="$t('config.detailedAddress')">
              <el-input v-model="form.address" />
            </el-form-item>
            <el-form-item v-if="!isMax" :label="$t('common.note')">
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>

            <el-form-item v-if="!isMax" :label="$t('shop.paymentMethod')" required style="padding-left: 0;">
              <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.cash | toThousandFilter }})</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="!isMax">
              <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 | toThousandFilter }}</span><br>
            <span>{{ $t('shop.taxRate') }}：{{ product.TAX_RATE / 100 }}</span><br>
            <span>{{ $t('shop.taxAmount') }}：{{currencyUnitCode}} {{ product.taxAmount | toThousandFilter }}</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 { fetchFullInfo, fetchSendUpgrade, fetchUpgrade, fetchUpgradeInfo } 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: 'UpgradeManagement',
  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 {
      tool: tool,

      nowPerf: '',
      nextPerf: '',
      decUserName: '',
      needDiffPv: '',
      isMax: true,
      upgradeOption: [],
      toLevel: '',
      currentRow: null,
      decWay: '2',
      regionData: [],
      form: {
        address: '',
        areaSelected: [],
        consignee: '',
        upgradeFunc: '',
        upgradeValue: '',
        addAt: '',
        userRealName: '',
        userDecName: '',
        remark: '',
        realName: '',
        decLv: '',
        insertUserName: '',
        decUserName: '',
        recUserName: '',
        conUserName: '',
        insertUserIdCard: '',
        packageId: '',
        goodsId: [],
        goodsNum: [],
        province: '',
        // city: '',
        // county: '',
        lgaName: '',
        cityName: '',
        acceptMobile: '',
        payType: ''
      },
      num: 1,
      allDecPackage: {},
      loading: false,
      submitButtonStat: false,
      submitButton: false,
      allGoods: [],
      goodsNums: [],
      numList: [],
      sell_price_sum: 0.00,
      price_pv_sum: 0.00,
      payList: [],
      sn: '',
      payDialog: false,
      countdown: 5,
      visible: false,
      payStackLoading: false,
      channels: ['card', 'bank', 'ussd', 'qr'], // eft(南非)  mobile_money(加纳)
      payForm: {
        publicKey: process.env.VUE_APP_BASE_PAY_STACK_PUBLIC_KEY,
        currency: 'NGN',
        firstname: usersInfo.userName(),
        lastname: '',
        email: usersInfo.userEmail(),
        amount: 0, // kobo
        orderSn: '',
        metadata: {
          cart_id: '',
          custom_fields: [
            {
              display_name: 'orderSn',
              variable_name: 'orderSn',
              value: this.sn
            },
            {
              display_name: 'orderType',
              variable_name: 'orderType',
              value: 'userUpgrade'
            }
          ]
        }
      },

      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;',

      screenWidth: getScreenWidth() > 600 ? '50%' : getScreenWidth() + 'px',
      labelPosition: getScreenWidth() > 500 ? 'right' : 'top',
      payStackScreenWidth: getScreenWidth() > 500 ? '450px' : getScreenWidth() + 'px',

      multipleSelection: [],
      sellPriceSum: 0.00,
      pricePvSum: 0.00,
      taxSum: 0.00,
      storeNums: [],
      tableData: null,
      payAmount: 0.00,
      userBalance: {
        cash: 0
      },

      activeName: 'product',
      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
    }
  },
  created() {
    // this.fetchUpgrade()
  },
  mounted() {
  },
  methods: {
    fetchUpgrade() {
      this.loading = true
      fetchUpgrade({
        userName: this.form.insertUserName
      }).then(response => {
        this.loading = false

        this.userBalance = response.data.userBalance
        this.decUserName = response.data.decUserName
        this.allDecPackage = response.data.allDecPackage
        this.allGoods = response.data.allGoods
        this.regionData = response.data.region

        const settingObj = this.allGoods
        for (const i in this.allGoods) {
          this.storeNums[i] = 1
          settingObj[i].goodsNum = 0
        }
        if(response.data.allGoods && response.data.allGoods.length > 0){
          this.currencyUnitCode = response.data.allGoods[0].CODE
        }
        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)
      })
    },
    fetchUpgradeInfo() {
      if (!this.form.insertUserName) {
        this.$message({
          message: this.$t('user.enterMemberCode'),
          type: 'error'
        })
        return false
      }

      this.loading = true
      fetchUpgradeInfo({ userName: this.form.insertUserName }).then(response => {
        this.loading = false
        this.form.addAt = response.data.baseInfo.ADD_AT
        this.form.userRealName = response.data.baseInfo.REAL_NAME
        this.form.userDecName = response.data.baseInfo.DEC_NAME
        this.isMax = response.data.baseInfo.IS_MAX
        this.upgradeOption = response.data.baseInfo.LEVEL_LIST
        this.form.upgradeFunc = response.data.baseInfo.UPGRADE_FUNC
        this.nowPerf = response.data.baseInfo.NOW_PERF
        this.nextPerf = response.data.baseInfo.NEXT_PERF
        this.fetchUpgrade()

        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    // 商品详情
    handleProduct(row) {
      this.product = row
      this.product.taxAmount = tool.calculateTax(row.SELL_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.SELL_PRICE * accumulator.goodsNum
          accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.goodsNum)
          accumulatorTax += tool.calculateTax(Number(accumulator.SELL_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
      }
    },
    // 提交订单
    onSubmit() {
      if (!this.form.insertUserName) {
        this.$message({
          message: this.$t('user.enterMemberCode'),
          type: 'error'
        })
        return false
      }
      if (!this.toLevel) {
        this.$message({
          message: this.$t('profile.selectLevel'),
          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 = {
        decUserName: this.decUserName,
        packageId: this.form.packageId,
        goodsId: this.form.goodsId,
        goodsNum: this.form.goodsNum,
        location: this.form.location,
        decWay: this.decWay,
        decLv: this.toLevel,
        insertUserName: this.form.insertUserName,
        remark: this.form.remark,
        address: this.form.address,
        consignee: this.form.consignee,
        acceptMobile: this.form.acceptMobile,
        province: this.form.areaSelected[0] ? this.form.areaSelected[0] : '',
        lgaName: this.form.lgaName,
        cityName: this.form.cityName,
        nowPerf: this.nowPerf,
        nextPerf: this.nextPerf,
        payType: this.form.payType
      }
      fetchSendUpgrade(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 {
          // PayStack支付
          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
          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.SELL_PRICE
      })
    },
    // 等级变更
    handleChangeLevel(data) {
      const { value, diffPv } = data
      this.needDiffPv = diffPv
      this.toLevel = value
    }
  }
}
</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-radio.is-bordered + .el-radio.is-bordered {
	margin: 5px;
}
.el-radio--medium.is-bordered {
	margin: 5px;
}
</style>