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

<template>
  <div class="purchase-page">
    <div class="j-main exchange_main">
      <div class="docs_infor">
        <div class="docs_left">
          <img :src="response.previewImgId" class="docs_img" alt="">
          <span class="icon_word"></span>
        </div>
        <div class="docs_right">
          <div class="docs_title ellipsis-2">
            {{response.docName}}
          </div>
          <div class="docs_other">
            <!-- <div class="docs_auther">贡献者：张三</div> -->
            <div class="docs_download">
              <span>{{response.downTimes}}次下载</span> | 共{{response.docPageSize}}页 | {{response.docFileSize}}K
            </div>
            <div class="docs_money"><span class="docs_num">{{response.price}}</span> 剑鱼币</div>
          </div>
        </div>
      </div>
      <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-cell-group>
          <van-field v-model="tel" type="number" label="手机号码" placeholder="请输入手机号码" />
        </van-cell-group> -->
        <van-field
          class="editable"
          v-model="tel"
          name="phone"
          type="tel"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="phoneRules"
        />
      </div>
    </div>
    <div class="j-footer exchange_footer">
      <div class="apply_detail">
        <div class="det_left">
          支付积分：
        </div>
        <div class="det_right">
          <span class="det_money">{{response.price}}</span>
          <span>剑鱼币</span>
        </div>
      </div>
      <div class="readly">
        <van-checkbox v-model="checked" checked-color="#2ABED1" >我已阅读并同意<a href="javascript:;" class="clause" @click="clause()">《剑鱼文库线上购买及服务条款》</a><a href="javascript:;" class="clause" @click="clause2()">《剑鱼标讯产品与服务线上购买服务条款》</a></van-checkbox>
      </div>
      <div class="apply_footer">
        <button class="apply_button" :disabled="!this.checked" @click="exchange()">确定兑换</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Checkbox, CheckboxGroup, Field, CellGroup } from 'vant'
import { mapActions } from 'vuex'
// import { getDocPay } from '../../api/main'
const regPhoneExg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
@Component({
  name: 'purchase-page',
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup
  },
  methods: {
    ...mapActions({
      getDocPay: 'main/getDocPay',
      getDetails: 'main/getDetails',
      getListDetail: 'main/getListDetail'
    })
  }
})
export default class extends Vue {
  protected getDocPay!: any
  protected getDetails!: any
  protected getListDetail!: any
  checked = false
  tel = ''
  query: any
  $router: any
  response = {
    docName: '',
    price: '',
    downTimes: '',
    docFileSize: '',
    docPageSize: '',
    previewImgId: '',
    balance: ''
  }

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

  // 文档信息
  async getWordInfor () {
    this.getDetails({ docId: this.query }).then((res: any) => {
      console.log(res)
      const item = res.data.detail
      if (res.error_code === 0) {
        this.response.docName = item.docName
        this.response.price = item.price
        this.response.downTimes = item.downTimes
        this.response.docFileSize = item.docFileSize
        this.response.docPageSize = item.docPageSize
        this.response.previewImgId = item.previewImgId
      }
    })

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

  // 确定兑换
  exchange () {
    this.getDocPay({ docId: this.query, phone: this.tel }).then((res: any) => {
      console.log(res)
      if (res.error_code === 0) {
        sessionStorage.setItem('paydata', JSON.stringify(res.data))
        this.$router.push('/purchasesuccess')
      }
    })
  }

  phoneRules = [{
    validator: (val: string) => {
      const status = regPhoneExg.test(val)
      if (val === '') {
        console.log(true)
        return true
      }
      return status
    },
    message: '手机号格式错误'
  }]

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

  // 剑鱼标讯产品与服务线上购买服务条款
  clause2 () {
    // app:https://app-a2.jianyu360.com/jyapp/front/staticPage/dataExport_serviceterms.html
    // this.$router.push('/readme')
    // wx:https://www.jianyu360.com/front/staticPage/wx-serviceterms.html
  }
}
</script>
<style lang="scss">
  .purchase-page{
    box-sizing: border-box;
    background: #F5F6F7;
    .exchange_main{
      .docs_infor{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 16px;
        background: #ffffff;
        .docs_left{
          position: relative;
          width: 100px;
          height: 124px;
          border-radius: 4px;
          border: 1px solid #000000;
          .docs_img{
            width: 100%;
            height: 100%;
          }
          .icon_word{
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            width: 24px;
            height: 24px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJASURBVHgB7Zm/TuQwEMY/J5x016B7gC2oqbju2muuuOoKClooqEGiodliGxokqLdYXoACWireACpqin0ARAMCEvONcXaXf+sQjTdI+CclTuKJM+NMnBkbSCQSiTYxdYS+79gFCh7wcInbT8TG4MhabN5um8uwaACv/BlmofhzrizwK2TEHAIYgz1YKm9wmN2hV2S4RkRMhg6LDT5v2b/1P9PkM4Sw+O/KEvuxlXePKzEsHtDzp0sh+bABEw1jRmTjjgq6bW0DPivJgLZJBrRN8D/wHibHZXVsCyygARptJBdqm2RA20QzwAVlOfosd/MS84hE41EoBKPYPotFCdjtN5YF/iECUd6A9LoV5T1yLNcQAXUDqKiL5V9XML6XOmVUDfDKj5Sk9wzY+4OxAOsyrEERtW+AMfxfO6E8FT/h3/UpMcmdO/2WQ34bXZ5fs+4QCqi8ASq+WJpnPj7M77FVnRT3WKdBFyN5oCv3QAEVA9j7fbpLNVQOqeHKZPopGZaxWHd1cK41L/dAAa1voONLp/xb6ae7JnUYGdaBAqofcVnSVabkzlLHbQWKqBnAiage3eQiJOdltqCEjgEG+5x2GdQVdyOQ3KNAcwMqBVjah48r4+6ZaAMNCU4t/tihc6B5xtSUKlu72TZTdUzhdNt8CQOuZBczKXmJn6GuRR0DzmVXzqH7kYab4juqCgqPQ/LBaJRD0Kpb4HiK8Zc5OkSlHLcvCxzB/CH4BmSFRFZKGG0eYTaI4qd1VmcSiUSifR4BOQuhbc3lgT4AAAAASUVORK5CYII=) no-repeat;
            background-size: contain;
          }
        }
        .docs_right{
          flex: 1;
          margin-left: 16px;
          .docs_title{
            color: #171826;
            font-weight: bold;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0px;
            text-align: left;
          }
          .docs_other{
            margin-top: 22px;
            color: #9B9CA3;
            font-weight: medium;
            font-size: 12px;
            line-height: 18px;
            letter-spacing: 0px;
            text-align: left;
            .docs_download{
              line-height: 18px;
            }
            .docs_money{
              margin-top: 2px;
              line-height: 24px;
              .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: #2ABED1;
          font-weight: medium;
          font-size: 14px;
          line-height: 30px;
          .det_money{
            display: flex;
            margin-right: 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{
          font-size:18px;
        }
      }
    }
  }
</style>