jy/src/web/staticres/common-module/data-pack/js/recharge.js

var vm = new Vue({
  delimiters: ['${', '}'],
  el: '#app',
  data: function () {
    return {
      sessKey: '$data-data-pack-recharge',
      userInfo: {
        phone: ''
      },
      priceInfo: {},
      price: {
        before: 0, // 优惠前价格
        after: 0 // 优惠后价格
      },
      specActive: 1,
      charge: {
        discount: 1,
        count: 1000,
        duration: 2, // 单位年
      },
      specList: [
        {
          label: '标准字段包',
          price: 0.45,
          id: 0
        },
        {
          label: '高级字段包',
          price: 0.9,
          id: 1
        }
      ],
      chargeCount: {
        value: 1000, // 选择器暂存数据
        pickerShow: false,
        infoList: [
          {
            label: '1000条',
            value: 1000,
            normal_discount: 1,
            senior_discount: 1
          },
          {
            label: '3000条',
            value: 3000,
            normal_discount: 1,
            senior_discount: 1
          },
          {
            label: '5000条',
            value: 5000,
            normal_discount: 1,
            senior_discount: 1
          }
        ],
      },
      dialog: {
        question: false
      },
      bottomConf: {
        type: 'dataPack',
        initPrice: 0,
        realPrice: 0,
        disPrice: 0,
        checkboxStatus: false,
        hideCoupon: false,
        links: [
          {
            text: '《剑鱼标讯线上购买与服务条款》',
            url: '',
            event: this.readEvent
          }
        ],
        buttons: {
          submit: this.submitOrder
        }
      }
    }
  },
  computed: {
    // 手机号校验是否通过
    validatorPhonePass: function () {
      var phone = this.userInfo.phone
      if (!phone) return true
      return /^1\d{10}$/.test(phone)
    },
  },
  watch: {
    'charge.count': function () {
      this.sortPrice()
      this.calcPrice()
    },
    specActive: function () {
      this.sortPrice()
      this.calcPrice()
    },
    validatorPhonePass: function () {
      this.checkStatus()
    },
  },
  created: function () {
    var restore = this.restoreState()
    if (!restore) {
      this.getUserInfo()
      this.getGoodsList()
    }
  },
  mounted: function () {
    this.checkConfirmButtonDisabled()
    utils.iosBackRefresh()
  },
  methods: {
    showLoading: function () {
      return this.$toast.loading({
        duration: 0,
        forbidClick: true,
        message: 'loading...',
      })
    },
    showToast: function (message) {
      return this.$toast({
        duration: 1500,
        forbidClick: true,
        message: message,
      })
    },
    showDialog: function (conf) {
      var defaultConf = {
        title: '提示',
        message: 'message',
        className: 'j-confirm-dialog',
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonColor: '#2abed1'
      }
      if (conf) {
        Object.assign(defaultConf, conf)
      }
      return this.$dialog.confirm(defaultConf)
    },
    getGoodsList: function () {
      var _this = this
      var loading = this.showLoading()
      $.ajax({
        url: '/subscribepay/dataExportPack/goodsList',
        type: 'POST',
        success: function (res) {
          loading && loading.clear()
          if (res) {
            Object.assign(_this.priceInfo, res)
            _this.initPageInfo()
            _this.sortPrice()
            _this.calcPrice()
          }
        },
        error: function () {
          loading && loading.clear()
        }
      })
    },
    getUserInfo: function () {
      var _this = this
      $.ajax({
        url: '/jypay/user/getAccountInfo?t=' + Date.now(),
        type: 'GET',
        success: function (res) {
          if (res && res.error_code === 0) {
            Object.assign(_this.userInfo, res.data)
          }
        }
      })
    },
    // 根据请求返回值初始化页面参数
    initPageInfo: function () {
      var info = this.priceInfo
      // 总折扣
      this.charge.discount = info.discount

      // 有效时间
      this.charge.duration = info.packs_validityYear
      
      var list = []
      if (Array.isArray(info.packs_showList)) {
        info.packs_showList.forEach(function (item) {
          list.push({
            label: item.packNum + '条',
            value: item.packNum,
            normal_discount: item.normal_discount,
            senior_discount: item.senior_discount
          })
        })
        this.chargeCount.infoList = list
        this.chargeCount.value = this.chargeCount.infoList[0].value
        this.charge.count = this.chargeCount.value
      }
    },
    // 计算卡片展示金额
    sortPrice: function () {
      var info = this.priceInfo
      
      // 获取被选中的条数info
      var countItem = this.getCountItem()

      // 条数折扣
      var cDiscount = this.specActive == 1 ? countItem.senior_discount : countItem.normal_discount

      // 普通字段包单价，单位元
      this.specList[0].before = info.unitPrice_normal
      this.specList[0].price = info.unitPrice_normal * cDiscount * info.discount
      // 高级字段包单价，单位元
      this.specList[1].before = info.unitPrice_senior
      this.specList[1].price = info.unitPrice_senior * cDiscount * info.discount
    },
    // 计算卡片展示金额 和 支付总金额
    calcPrice: function () {
      // 获取被选中的规格卡片info
      var specItem = this.getSpecItem()
      // 获取被选中的条数info
      var countItem = this.getCountItem()
      // 数据包折扣
      var discount = this.charge.discount
      // 条数折扣
      var cDiscount = this.specActive == 1 ? countItem.senior_discount : countItem.normal_discount
      // 优惠前价格
      var beforePrice = specItem.before * 1 * countItem.value * 1
      // 优惠后价格
      var afterPrice = specItem.before * discount * countItem.value * cDiscount

      this.price.before = beforePrice.toFixed(2)
      this.price.after = afterPrice.toFixed(2)

      this.updatePrice(this.price.after, this.price.before)
    },
    // 获取被选中的规格卡片info
    getSpecItem: function () {
      var _this = this
      var t = {}
      this.specList.some(function (item) {
        var gotThis = item.id == _this.specActive
        if (gotThis) {
          t = item
        }
        return gotThis
      })
      return t
    },
    // 获取被选中的条数info
    getCountItem: function () {
      var _this = this
      var t = {}
      this.chargeCount.infoList.some(function (item) {
        var gotThis = item.value == _this.charge.count
        if (gotThis) {
          t = item
        }
        return gotThis
      })
      return t
    },
    chargeCountPopupClosed: function () {
      this.chargeCount.value = this.charge.count
    },
    clickSpec: function (item) {
      this.specActive = item.id
    },
    showQuestion: function () {
      this.dialog.question = true
    },
    updateS: function (data) {
      var check = data.check
      var callback = data.callback
      callback(this.checkSubmitStatus(check))
    },
    checkSubmitStatus: function (checkStatus) {
      this.bottomConf.checkboxStatus = checkStatus
      return checkStatus && this.validatorPhonePass
    },
    // 保证mounted之后执行
    checkConfirmButtonDisabled: function () {
      this.$refs.couponRef.submitStatus = !this.bottomConf.checkboxStatus
    },
    // 调用此方法，即可检测当前页面表单是否满足条件（可计算出提交按钮是否可用）
    checkStatus: function () {
      // 此处取反，因为在调用couponRef.chooseCheckbox时候，会对checkbox再次取反
      this.bottomConf.checkboxStatus = !this.bottomConf.checkboxStatus
      this.$refs.couponRef.chooseCheckbox()
    },
    readEvent: function () {
      this.savePageState()
      if (utils.isWeiXinBrowser) {
        location.href = '/front/staticPage/wx-serviceterms.html'
      } else {
        location.href = '/jyapp/front/staticPage/dataExport_serviceterms.html'
      }
    },
    getPickId: function () {
      var specMap = {
        0: 'normal',
        1: 'senior'
      }
      return [specMap[this.specActive], this.charge.count].join('_')
    },
    submitOrder: function () {
      var loading = this.showLoading()
      var packId = this.getPickId()
      var data = {
        packId: packId,
        lotteryId: this.$refs.couponRef.coupon.userLotteryId,
        order_phone: this.userInfo.phone
      }
      $.ajax({
        url: '/subscribepay/dataExportPack/createOrder',
        type: 'POST',
        data: data,
        success: function (res) {
          loading && loading.clear()
          if (res.error_code === 0 && res.data) {
            if (utils.isWeiXinBrowser) {
              history.replaceState({}, '', '/weixin/common/dataPack/orderDetail?order_code=' + res.data.orderCode);
              location.href = '/weixin/pay/checkout_dataPack?orderCode=' + res.data.orderCode
            } else {
              history.replaceState({}, '', '/jyapp/common/dataPack/orderDetail?order_code=' + res.data.orderCode);
              location.href = "/jyapp/pay/checkout_dataPack?orderCode=" + res.data.orderCode + '&from=buy'
            }
          }
        },
        error: function () {
          loading && loading.clear()
        }
      })
    },
    updatePrice: function (after, before) {
      console.log('原价：' + before, '折扣价：' + after)
      this.bottomConf.disPrice = after;
      this.bottomConf.initPrice = before;
      this.$refs.couponRef.getCoupon()
    },
    restoreState: function () {
      var $data = sessionStorage.getItem(this.sessKey)
      if ($data) {
        $data = JSON.parse($data)
        Object.assign(this.priceInfo, $data.priceInfo)
        Object.assign(this.userInfo, $data.userInfo)
        Object.assign(this.price, $data.price)
        this.specActive = $data.specActive
        Object.assign(this.charge, $data.charge)
        Object.assign(this.specList, $data.specList)
        Object.assign(this.chargeCount, $data.chargeCount)
        Object.assign(this.bottomConf, $data.bottomConf)

        sessionStorage.removeItem(this.sessKey)
      }
      return !!$data
    },
    savePageState: function () {
      var data = {
        priceInfo: this.priceInfo,
        userInfo: this.userInfo,
        price: this.price,
        specActive: this.specActive,
        charge: this.charge,
        specList: this.specList,
        chargeCount: this.chargeCount,
        bottomConf: {
          initPrice: this.bottomConf.initPrice,
          realPrice: this.bottomConf.realPrice,
          disPrice: this.bottomConf.disPrice,
          checkboxStatus: this.bottomConf.checkboxStatus
        }
      }
      sessionStorage.setItem(this.sessKey, JSON.stringify(data))
    }
  }
})