jy-docs/jydocs-mobile/src/views/purchase/purchase.vue

<template>
  <div class="purchase-page">
    <div class="j-main exchange_main">
      <Card
        cardType="image"
        :title="response.docName"
        :desc="response.docSummary"
        :imageSrc="response.previewImgId"
        :docType="response.docFileType"
        :subInfo="calcSubInfo(response)"
      >
        <template slot="price">
          <span class="docs_money">
            <span class="docs_num">{{ response.price }}</span>
            <span> 剑鱼币</span>
          </span>
        </template>
      </Card>
      <div class="rechargehave_pay_content">
        <div class="pay_title">
          支付方式
        </div>
        <div class="jianyu_pay">
          <div class="jy_pay_left">
            <span class="jy_money">剑鱼币</span>
            <span class="jy_tip">（剩余{{response.balance}}剑鱼币）</span>
          </div>
          <div class="jy_pay_icon">
            <img src="../../assets/icon/checked.png" class="icon_right_option" />
          </div>
        </div>
      </div>
      <div class="docs_phone">
        <van-form validate-first>
          <van-field
            class="editable"
            v-model="tel"
            name="validator"
            type="tel"
            label="手机号码"
            placeholder="请输入手机号码"
            @input="iptValue()"
            :rules="[{ validator, message: '手机号格式错误' }]"
          />
        </van-form>
      </div>
    </div>
    <div class="j-footer exchange_footer">
      <div class="apply_detail">
        <div class="det_left">
          支付剑鱼币：
        </div>
        <div class="det_right">
          <span class="icon_num"></span>
          <span class="det_money">{{response.price}}</span>
        </div>
      </div>
      <div class="readly">
        <van-checkbox v-model="checked" checked-color="#2ABED1" icon-size="20px" @click="checkBtn()">我已阅读并同意<a href="javascript:;" class="clause" @click.stop="clause()">《剑鱼文库线上购买及服务条款》</a><a href="javascript:;" class="clause" @click.stop="clause2()">《剑鱼标讯产品与服务线上购买服务条款》</a></van-checkbox>
      </div>
      <div class="apply_footer">
        <button class="apply_button" :disabled="!this.btnChecked" @click="exchange()">确定兑换</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Checkbox, CheckboxGroup, Field, CellGroup, Form, Icon } from 'vant'
import { mapActions } from 'vuex'
import Card from '@/components/docs-card/Card.vue'
import { formatSize } from '../../utils/globalFunctions'
@Component({
  name: 'purchase-page',
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Field.name]: Field,
    [Form.name]: Form,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    Card
  },
  methods: {
    ...mapActions({
      getDocPay: 'main/getDocPay',
      getDetails: 'main/getDetails',
      getListDetail: 'main/getListDetail',
      getAccountInfo: 'main/getAccountInfo'
    })
  }
})
export default class extends Vue {
  protected getDocPay!: any
  protected getDetails!: any
  protected getListDetail!: any
  protected getAccountInfo!: any
  checked = false
  btnChecked = false
  tel = ''
  regPhoneExg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
  $router: any
  $env: any

  response = {
    docName: '',
    price: '',
    downTimes: '',
    docFileSize: '',
    docPageSize: '',
    previewImgId: '',
    docFileType: '',
    balance: ''
  }

  sessioninfor = {
    query: '',
    balance: 0,
    code: '',
    payTime: '',
    payWay: ''
  }

  created () {
    this.sessioninfor.query = location.href.split('/')[location.href.split('/').length - 1] // 获取id
    this.getWordInfor()
  }

  validator (val: any) {
    if (this.tel === '') {
      return true
    }
    return this.regPhoneExg.test(val)
  }

  checkBtn () {
    this.getBool(this.validator(this.tel))
  }

  // 判断按钮是否可以点击
  iptValue () {
    this.getBool(this.validator(this.tel))
  }

  getBool (bool: any) {
    if (this.checked === true && bool === true) {
      this.btnChecked = true
    } else {
      this.btnChecked = false
    }
  }

  calcSubInfo (item: any) {
    const { downTimes, docPageSize, docFileSize } = item
    const subInfoArr = []
    if (downTimes !== undefined) {
      subInfoArr.push(`${downTimes}次下载`)
    }
    if (docPageSize !== undefined) {
      subInfoArr.push(`共${docPageSize}页`)
    }
    if (docFileSize !== undefined) {
      subInfoArr.push(formatSize(docFileSize))
    }
    return subInfoArr
  }

  // 文档信息
  async getWordInfor () {
    this.getDetails({ docId: this.sessioninfor.query }).then((res: any) => {
      const item = res.data.detail
      if (res.error_code === 0) {
        Object.assign(this.response, item)
      }
    })

    this.getListDetail({ B: true }).then((res: any) => {
      if (res.error_code === 0) {
        this.response.balance = res.data.points.balance
      }
    })

    // 获取绑定的手机号
    this.getAccountInfo().then((res: any) => {
      this.tel = res.data.phone
    })
  }

  // 确定兑换
  exchange () {
    this.getDocPay({ docId: this.sessioninfor.query, phone: this.tel }).then((res: any) => {
      console.log(res)
      if (res.error_code === 0) {
        this.sessioninfor.balance = res.data.balance
        this.sessioninfor.code = res.data.code
        this.sessioninfor.payTime = res.data.payTime
        this.sessioninfor.payWay = res.data.payWay
        sessionStorage.setItem('paydata', JSON.stringify(this.sessioninfor))
        this.$router.replace('/purchasesuccess/' + this.response.price)
      }
    })
  }

  // 剑鱼文库线上购买及服务条款
  clause () {
    this.$router.push('/onlineterm')
  }

  // 剑鱼标讯产品与服务线上购买服务条款
  clause2 () {
    if (this.$env.platform === 'app') {
      location.href = '/jyapp/front/staticPage/dataExport_serviceterms.html'
    } else {
      location.href = '/front/staticPage/wx-serviceterms.html'
    }
  }
}
</script>
<style lang="scss">
  .purchase-page{
    box-sizing: border-box;
    background: #F5F6F7;
    .d-title {
      font-weight: bold;
      font-size: 14px;
      line-height: 20px;
    }
    .exchange_main{
      .docs_money{
        margin-top: 2px;
        line-height: 24px;
        font-size: 14px;
        color: #9B9CA3;
        .docs_num{
          font-size: 16px;
        }
      }
      .rechargehave_pay_content{
        padding: 0 16px;
        margin-top: 8px;
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
        background: #ffffff;
        .pay_title{
          margin-top: 16px;
          width: 100%;
          height: 24px;
          color: #171826;
          font-size: 16px;
          line-height: 24px;
        }
        .jianyu_pay{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 24px;
          width: 100%;
          height: 20px;
          color: #171826;
          font-size: 14px;
          line-height: 20px;
          .jy_pay_left{
              .jy_tip{
                  color: #2abed1;
              }
          }
          .jy_pay_icon{
              width: 24px;
              height: 24px;
              .icon_right_option{
                  width: 100%;
                  height: 100%;
              }
          }
        }
      }
      .docs_phone {
        padding: 15px 0;
        width: 100%;
        .van-field__control{
          font-size: 16px;
        }
        .van-field__control::placeholder {
          color: #C0C4CC;
          font-weight: medium;
          font-size: 16px;
          line-height: 24px;
        }
      }
    }
    .exchange_footer{
      padding: 0 16px;
      height: 148px;
      background: #ffffff;
      .apply_detail{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 38px;
        .det_left{
          color: #9B9CA3;
          font-family: PingFang SC;
          font-weight: medium;
          font-size: 12px;
          line-height: 18px;
        }
        .det_right{
          display: flex;
          align-items: center;
          color: #171826;
          font-weight: medium;
          font-size: 14px;
          line-height: 30px;
          .icon_num{
            display: flex;
            width: 24px;
            height: 24px;
            background: url(data:image/png;base64,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) no-repeat;
            background-size: contain;
          }
          .det_money{
            display: flex;
            margin-left: 4px;
            font-size: 20px;
          }
        }
      }
      .apply_footer {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 46px;
      padding: 8px 0 12px;
      background: rgba(255, 255, 255, 0.96);
    }
    .apply_button {
      width: 100%;
      height: 46px;
      border-radius: 8px;
      background: #2abed1;
      font-size: 18px;
      color: #f7f9fa;
    }
    .readly{
      display:flex;
      align-items:center;
      min-height:32px;
      font-size: 12px;
      color: #5F5E64;
        .clause{
          color:#2ABED1;
        }
        .van-checkbox__icon{
          display: flex;
          align-items: center;
          height: 32px;
          // font-size:18px;
        }
        .van-checkbox__label{
          margin-left: 12px;
        }
      }
    }
  }
</style>