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="" class="docs_img" alt="">
        </div>
        <div class="docs_right">
          <div class="docs_title ellipsis-2">
            优化招投标市场营商环境与国企采购人主体责任、采购与招标优化招投标市场营商环境与国企采购人主体责任、采购与招标
          </div>
          <div class="docs_other">
            <div class="docs_auther">贡献者：张三</div>
            <div class="docs_download">
              <span>2020次下载</span> | 共18页 | 220K
            </div>
            <div class="docs_money"><span class="docs_num">500</span> 剑鱼币</div>
          </div>
        </div>
      </div>
      <div class="docs_phone">
        <van-cell-group>
          <van-field v-model="tel" type="tel" label="手机号码" placeholder="请输入手机号码" />
        </van-cell-group>
      </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">500</span>
          <span>剑鱼币</span>
        </div>
      </div>
      <div class="readly">
        <van-checkbox v-model="checked" checked-color="#2ABED1" >我已阅读，理解并接受<a href="javascript:;" class="clause" @click="clause()">《剑鱼伙伴服务条款》</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, mapMutations } from 'vuex'
@Component({
  name: 'purchase-page',
  components: {
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup
  },
  methods: {
    ...mapMutations({
      saveLogout: 'logout/setLogout'
    }),
    ...mapActions({
      sureLogout: 'logout/sureLogout'
    })
  }
})
export default class extends Vue {
  protected sureLogout!: any
  protected saveLogout!: any
  checked = false
  tel = 1
  $router: any
  exchange () {
    this.$router.push('/purchasesuccess')
  }

  // 剑鱼标讯服务条款
  clause () {
    // this.$router.push('/readme')
  }
}
</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{
          width: 100px;
          height: 124px;
          border-radius: 4px;
          border: 1px solid #000000;
          .docs_img{
            width: 100%;
            height: 100%;
          }
        }
        .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;
              }
            }
          }
        }
      }
      .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>