|
|
@@ -1,33 +1,212 @@
|
|
|
<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 { Cell, CellGroup, Icon, Dialog, Toast } from 'vant'
|
|
|
-// import { mapActions } from 'vuex'
|
|
|
-// import { MixinTop } from '@/utils/mixin-top'
|
|
|
-
|
|
|
+import { Checkbox, CheckboxGroup, Field, CellGroup } from 'vant'
|
|
|
+import { mapActions, mapMutations } from 'vuex'
|
|
|
@Component({
|
|
|
- name: 'users',
|
|
|
- // mixins: [MixinTop],
|
|
|
+ name: 'purchase-page',
|
|
|
components: {
|
|
|
- // [Cell.name]: Cell,
|
|
|
- // [CellGroup.name]: CellGroup,
|
|
|
- // [Icon.name]: Icon
|
|
|
+ [Checkbox.name]: Checkbox,
|
|
|
+ [CheckboxGroup.name]: CheckboxGroup,
|
|
|
+ [Field.name]: Field,
|
|
|
+ [CellGroup.name]: CellGroup
|
|
|
},
|
|
|
methods: {
|
|
|
- // ...mapActions({
|
|
|
- // ajaxData: 'main/getHome'
|
|
|
- // })
|
|
|
+ ...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>
|
zhangyuhan