Merge branch 'tsz' of jianyu/jy-docs into master

jydocs-mobile/src/components/Recharge.vue

@@ -0,0 +1,172 @@
+<template>
+    <van-popup v-model="show" round  position="bottom" class="recharge-popup">
+        <div class="recharge_top">
+            <div class="recharge_title">
+                <div class="thumbnail">
+                    <img src="../assets/images/banner.png" class="thumbnail_img" alt="">
+                </div>
+                <div class="recharge_t_right">
+                    <div class="t_right_name">优化招投标市场营商环境与国企采购</div>
+                    <div class="t_right_active">
+                        <span>500剑鱼币</span>
+                        <span>共18页</span>
+                        <span>123k</span>
+                    </div>
+                </div>
+            </div>
+            <div class="div_close">
+                <img src="../assets/icon/close.png" class="recharge_close" @click="closePopup()" />
+            </div>
+        </div>
+        <div class="recharge_pay_content">
+            <div class="pay_title">
+                支付方式
+            </div>
+            <div class="jianyu_pay">
+                <span class="jy_money">剑鱼币</span>
+                <span class="jy_tip">（剑鱼币不足，剩余20剑鱼币）</span>
+            </div>
+        </div>
+        <div class="recharge_footer">
+                <button class="j-button-cancel btn_active">取消</button>
+                <button class="j-button-sure btn_active">去充值</button>
+        </div>
+    </van-popup>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Icon, Popup, Sticky } from 'vant'
+
+// @ is an alias to /src
+  @Component({
+    name: 'Search',
+    components: {
+      [Popup.name]: Popup,
+      [Sticky.name]: Sticky,
+      [Icon.name]: Icon
+    },
+    created () {
+      console.log('111')
+    }
+  })
+export default class extends Vue {
+    show = true
+    closePopup () {
+      this.show = false
+    }
+}
+</script>
+
+<style lang="scss">
+.recharge-popup{
+    box-sizing: border-box;
+    padding: 0 16px;
+    width: 100%;
+    // height: 256px;
+    .recharge_top{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100px;
+        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
+        .recharge_title{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            .thumbnail{
+                width: 48px;
+                height: 60px;
+                .thumbnail_img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .recharge_t_right{
+                margin-left: 8px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                width: 250px;
+                height: 60px;
+                .t_right_name{
+                    color: #171826;
+                    font-size: 15px;
+                    line-height: 22px;
+                }
+                .t_right_active{
+                    color: #5F5E64;
+                    font-size: 14px;
+                    line-height: 20px;
+                    span{
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+        .div_close{
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            height: 100%;
+            .recharge_close{
+                margin-top:24px;
+                display: flex;
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+    .recharge_pay_content{
+        overflow: hidden;
+        width: 100%;
+        height: 100px;
+        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
+        .pay_title{
+            margin-top: 16px;
+            width: 100%;
+            height: 24px;
+            color: #171826;
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .jianyu_pay{
+            margin-top: 24px;
+            width: 100%;
+            height: 20px;
+            color: #171826;
+            font-size: 14px;
+            line-height: 20px;
+            .jy_tip{
+                color: #FF3A20;
+            }
+        }
+    }
+    .recharge_footer{
+        width: 100%;
+        height: 56px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .btn_active{
+            width: 165px;
+            height: 40px;
+        }
+        .j-button-cancel{
+            border-radius: 4px;
+            background: #EDEFF2;
+            color: #5F5E64;
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .j-button-sure{
+            border-radius: 4px;
+            background: #2ABED1;
+            color: #F7F9FA;
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+}
+</style>

jydocs-mobile/src/components/RechargeHave.vue

@@ -0,0 +1,248 @@
+<template>
+    <van-popup v-model="show" round  position="bottom" class="rechargehave-popup">
+        <div class="rechargehave_top">
+            <div class="rechargehave_title">
+                <div class="thumbnail">
+                    <img src="../assets/images/banner.png" class="thumbnail_img" alt="">
+                </div>
+                <div class="rechargehave_t_right">
+                    <div class="t_right_name">优化招投标市场营商环境与国企采购</div>
+                    <div class="t_right_active">
+                        <span>500剑鱼币</span>
+                        <span>共18页</span>
+                        <span>123k</span>
+                    </div>
+                </div>
+            </div>
+            <div class="div_close">
+                <img src="../assets/icon/close.png" class="rechargehave_close" @click="closePopup()" />
+            </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">（剩余2020剑鱼币）</span>
+                </div>
+                <div class="jy_pay_icon">
+                    <img src="../assets/icon/checked.png" class="icon_right_option" />
+                </div>
+            </div>
+        </div>
+        <div class="j-footer rechargehave_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="j-button-cancel btn_active">取消</button>
+                <button class="j-button-sure btn_active" :disabled="!this.checked" @click="exchange()">去充值</button>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Icon, Popup, Checkbox } from 'vant'
+
+// @ is an alias to /src
+  @Component({
+    name: 'Search',
+    components: {
+      [Popup.name]: Popup,
+      [Checkbox.name]: Checkbox,
+      [Icon.name]: Icon
+    },
+    created () {
+      console.log('111')
+    }
+  })
+export default class extends Vue {
+    show = true
+    checked = false
+    closePopup () {
+      this.show = false
+    }
+}
+</script>
+
+<style lang="scss">
+.rechargehave-popup{
+    box-sizing: border-box;
+    padding: 0 16px;
+    width: 100%;
+    // height: 256px;
+    .rechargehave_top{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100px;
+        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
+        .rechargehave_title{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            .thumbnail{
+                width: 48px;
+                height: 60px;
+                .thumbnail_img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .rechargehave_t_right{
+                margin-left: 8px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                width: 250px;
+                height: 60px;
+                .t_right_name{
+                    color: #171826;
+                    font-size: 15px;
+                    line-height: 22px;
+                }
+                .t_right_active{
+                    color: #5F5E64;
+                    font-size: 14px;
+                    line-height: 20px;
+                    span{
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+        .div_close{
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            height: 100%;
+            .rechargehave_close{
+                margin-top:24px;
+                display: flex;
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+    .rechargehave_pay_content{
+        overflow: hidden;
+        width: 100%;
+        height: 100px;
+        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
+        .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%;
+                }
+            }
+        }
+    }
+    .rechargehave_footer{
+      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 {
+      width: 100%;
+        height: 56px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .btn_active{
+            width: 165px;
+            height: 40px;
+        }
+        .j-button-cancel{
+            border-radius: 4px;
+            background: #EDEFF2;
+            color: #5F5E64;
+            font-size: 16px;
+            line-height: 24px;
+        }
+        .j-button-sure{
+            border-radius: 4px;
+            background: #2ABED1;
+            color: #F7F9FA;
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+    .readly{
+      display:flex;
+      align-items:center;
+      min-height:32px;
+      font-size: 12px;
+      color: #5F5E64;
+        .clause{
+          color:#2ABED1;
+        }
+        .van-checkbox__icon{
+          font-size:18px;
+        }
+      }
+    }
+}
+</style>

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

@@ -41,6 +41,7 @@
         <button class="apply_button" :disabled="!this.checked" @click="exchange()">确定兑换</button>
       </div>
     </div>
+    <RechargeHave></RechargeHave>
   </div>
 </template>
 
@@ -48,9 +49,11 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Checkbox, CheckboxGroup, Field, CellGroup } from 'vant'
 import { mapActions, mapMutations } from 'vuex'
+import RechargeHave from '../../components/RechargeHave.vue'
 @Component({
   name: 'purchase-page',
   components: {
+    RechargeHave,
     [Checkbox.name]: Checkbox,
     [CheckboxGroup.name]: CheckboxGroup,
     [Field.name]: Field,

jydocs-mobile/src/views/purchase/purchasesuccess.vue

@@ -27,6 +27,7 @@
             <div class="infor_value">6489798765465465</div>
           </div>
         </div>
+      <SharePopup></SharePopup>
       </div>
     </div>
     <div class="j-footer apply_footer">
@@ -39,9 +40,13 @@
 import { Component, Vue } from 'vue-property-decorator'
 // import { mapState } from 'vuex'
 import { fen2Yuan } from '../../utils/globalFunctions'
+import SharePopup from '../../components/SharePopup.vue'
 
 @Component({
   name: 'test',
+  components: {
+    SharePopup
+  },
   methods: {
     fen2Yuan
   },
@@ -63,9 +68,9 @@ export default class extends Vue {
   protected logout: any
 
   // 注销完成，返回我的页面
-//   complete () {
-//     history.go(-history.length + 1)
-//   }
+  // complete () {
+  // history.go(-history.length + 1)
+  // }
 }
 </script>
 <style lang="scss">