提交绑定方法

config/index.js

@@ -28,7 +28,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: "10.20.52.212", // can be overwritten by process.env.HOST
+    host: "0.0.0.0", // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

src/App.vue

@@ -12,6 +12,10 @@
     <div class="package-wrap" @touchmove.prevent v-if="showWrap">
       <img @click.stop="closeWrap" :src="imgs" alt="" />
     </div>
+    <div class="package-wrap" @touchmove.prevent v-if="showAd">
+      <img src="" />
+    </div>
+
     <!-- <template v-if="isTargetChannel&&showIframe">
       <iframe src='//wap.apyingcaisw.com/xingzuo'
               width='1px'
@@ -22,6 +26,7 @@
 </template>
 
 <script>
+
 export default {
   name: "app",
   data() {
@@ -31,6 +36,7 @@ export default {
       activity_imgs: window.options.channel_activities,
       redImage: require("./assets/red_package.png"),
       imgs: null,
+      showAd: false,
       showWrap: false,
       // todayDate: new Date().toLocaleDateString(),
       isTargetChannel: window.options.is_show_ad_frame,
@@ -51,6 +57,8 @@ export default {
       this.theme = site_gender === "male" ? "boy" : "girl";
     } else this.theme = "girl";
     this.initWrap();
+    this.$GoLoginPop().then(()=>{console.log('我真的的去绑定了呢')});
+   
   },
   methods: {
     closeWrap() {

src/components/gologin/GoLogin.vue

@@ -1,23 +1,17 @@
 <template>
   <div>
-    <mt-popup
-      v-model="popupVisible"
-      popup-transition="popup-fade"
-      v-if="popupVisible"
-    >
+    <mt-popup v-model="show" popup-transition="popup-fade">
       <img src="../../assets/gotologin.png" alt="" />
-      <div class="login_success">
-        您还尚未绑定手机号
-      </div>
-      <div class="login_message">
-        绑定手机号方便下次继续阅读
-      </div>
-      <div class="go_back_btn" @click="hidden">去绑定</div>
+      <div class="login_success">您还尚未绑定手机号</div>
+      <div class="login_message">绑定手机号方便下次继续阅读</div>
+      <div class="go_back_btn" @click="goBind">去绑定</div>
       <div class="close_icon">12312</div>
     </mt-popup>
   </div>
 </template>
 <script>
+import { Popup } from "mint-ui";
+import router from "../../router";
 export default {
   name: "GoLogin",
   data() {
@@ -25,13 +19,29 @@ export default {
       popupVisible: false
     };
   },
-  methods: {
-    show() {
-      this.popupVisible = true;
-      console.log(1);
+  components: {
+    mtPopup: Popup
+  },
+  props: {
+    show: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+    close: {
+      required: false,
+      type: Function
     },
-    hidden() {
-      this.popupVisible = false;
+    callback:{
+      required: false,
+      type: Function
+    }
+  },
+  methods: {
+    goBind() {
+      router.push("/phone");
+      this.close();
+      this.callback('success')
     }
   }
 };

src/components/gologin/index.js

@@ -1,21 +1,55 @@
-import Gologin from "./GoLogin.vue";
-const obj = {}; //对象
-obj.install = function(Vue) {
-  //封装install方法
-  // 1. 创建组件构造器
-  const toastContrustor = Vue.extend(Gologin);
+import Vue from "vue";
+import GoLogin from "./GoLogin";
 
-  // 2. new  组件实例
-  const GoLogin = new toastContrustor();
+let instance = null;
 
-  // 3. 将组件实例， 挂载到某一个元素上
-  GoLogin.$mount(document.createElement("div"));
+const initInstance = () => {
+  //如果存在就销毁上一个
+  if (instance) {
+    instance.$destroy();
+  }
 
-  // 4. GoLogin.$el 对应的就是div
-  document.body.appendChild(GoLogin.$el);
+  //创建实例并挂载
+  instance = new (Vue.extend(GoLogin))({
+    el: document.createElement("div")
+  });
+  document.body.appendChild(instance.$el);
+};
+
+const goLogin = () => {
+  //不存在就创建
+  if (!instance) {
+    initInstance();
+  }
+
+  instance.show = true;
+
+  //增加回调访法方便以后异步调用
+  instance.callback = action => {
+    instance[action === "success" ? "resolve" : "reject"](action);
+  };
 
-  // 5. 添加到原型链上
-  Vue.prototype.$GoLogin = GoLogin;
+  //手动添加关闭函数
+  instance.close = () => {
+    if (instance) {
+      instance.show = false;
+    }
+  };
+  //返回新对象包含异步
+  return new Promise((resolve, reject) => {
+    Object.assign(instance, {
+      resolve,
+      reject
+    });
+  });
 };
 
-export default obj;
+//方便直接调用
+goLogin.close = () => {
+  if (instance) {
+    instance.show = false;
+  }
+};
+
+
+export default goLogin;

src/components/index.js

@@ -28,15 +28,16 @@ import XBookInfo from "./book-info.vue";
 import XFooter from "./footer.vue";
 import XHeader from "./header.vue";
 import XShelfCore from "./shelf-core.vue";
-import GoLogin from "./gologin/index.js";
+import goLogin from "./goLogin";
 // import XReader from './reader'
 VueClipboard.config.autoSetContainer = true;
 
-Vue.use(GoLogin);
 Vue.use(vueTouch);
+Vue.use(goLogin);
 Vue.use(VueClipboard);
 Vue.component(Checklist.name, Checklist);
 Vue.component(Button.name, Button);
+
 Vue.component(Field.name, Field);
 Vue.component(Swipe.name, Swipe);
 Vue.component(SwipeItem.name, SwipeItem);
@@ -49,7 +50,9 @@ Vue.use(Lazyload, {
 });
 Vue.component(TabContainer.name, TabContainer);
 Vue.component(TabContainerItem.name, TabContainerItem);
+Vue.component('GOLOGIN',goLogin);
 Vue.prototype.$Toast = Toast;
+Vue.prototype.$GoLoginPop = goLogin;
 Vue.prototype.$Indicator = Indicator;
 
 Vue.prototype.$MessageBox = MessageBox;

src/router/index.js

@@ -50,7 +50,6 @@ const BookLimitFree = () => import("../view/book-limit-free.vue");
 const Coupon = () => import("../view/my_coupon.vue");
 const Login = () => import("../view/Login.vue");
 const Useragreement = () => import("../view/Useragreement.vue");
-const Privacypolicy = () => import("../view/Privacypolicy.vue");
 // import test from '../view/test.vue'
 
 Vue.use(Router);
@@ -112,7 +111,6 @@ const router = new Router({
     [namespace.Coupon, Coupon],
     [namespace.Login, Login],
     [namespace.Useragreement, Useragreement],
-    [namespace.Privacypolicy, Privacypolicy],
     [namespace.HelpPayQrcode, HelpPayQrcode],
     [namespace.HelpPay, HelpPay],
     [namespace.BookShare, BookShare],

src/theme/view/pay.scss

@@ -7,25 +7,73 @@ $namespace: "pay";
   border-radius: $--radius;
 }
 
+@include b(line) {
+  height: 0.2rem;
+  background-color: #f5f5f5;
+  margin-left: -0.24rem;
+  margin-right: -0.24rem;
+}
+
+@include b(type) {
+  margin-bottom: .3rem;
+  .title {
+    height: 1rem;
+    line-height: 1rem;
+    font-size: 0.28rem;
+  }
+  @include e(list) {
+    display: flex;
+    justify-content: space-between;
+  }
+  @include e(item) {
+    &:first-child {
+      margin-right: 0.3rem;
+    }
+    &.cur{
+      border: 1px solid #EF5952;
+    }
+    padding: 0 0.3rem;
+    border-radius: 0.12rem;
+    border: 1px solid #E5E5E5;
+    height: 1rem;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font-size: .28rem;
+    .name{
+      flex-grow:1;
+    }
+    .icon {
+      width: 0.6rem;
+      height: 0.6rem;
+      margin-right: .14rem;
+    }
+    .check-img{
+      width: .32rem;
+      height: .32rem;
+    }
+  }
+}
+
 @include b(coupon) {
   display: flex;
-  margin: .2rem 0;
-  height: .5rem;
-  line-height: .5rem;
+  margin-top: 0.2rem;
+  height: 1rem;
+  line-height: 1rem;
   align-items: center;
   justify-content: space-between;
-
+  border-top: 1px solid #f5f5f5;
   @include e(img) {
     display: flex;
     align-items: center;
     height: 100%;
-    font-size: .26rem;
+    font-size: 0.26rem;
 
     img {
-      width: .408rem;
-      height: .312rem;
+      width: 0.408rem;
+      height: 0.312rem;
       display: inline-block;
-      margin-right: .16rem;
+      margin-right: 0.16rem;
     }
   }
 
@@ -35,8 +83,8 @@ $namespace: "pay";
     color: #999;
 
     img {
-      width: .12rem;
-      margin-left: .14rem;
+      width: 0.12rem;
+      margin-left: 0.14rem;
     }
   }
 }
@@ -265,9 +313,11 @@ $namespace: "pay";
   font-size: $--font-size-large;
   box-shadow: 0 0 0.16rem rgba($--color-theme-girl, 0.5);
   text-align: center;
-  background: linear-gradient(to right,
-      darken($--color-theme-girl, 3%),
-      lighten($--color-theme-girl, 3%));
+  background: linear-gradient(
+    to right,
+    darken($--color-theme-girl, 3%),
+    lighten($--color-theme-girl, 3%)
+  );
   color: #fff;
 }
 
@@ -412,9 +462,11 @@ $namespace: "pay";
     font-size: $--font-size-big;
     box-shadow: 0 0 0.16rem rgba(#ef5952, 0.53);
     text-align: center;
-    background: linear-gradient(to right,
-        darken(#ff591f, 3%),
-        lighten(#ff1a1a, 3%));
+    background: linear-gradient(
+      to right,
+      darken(#ff591f, 3%),
+      lighten(#ff1a1a, 3%)
+    );
     color: #fff;
     font-weight: bold;
     margin: 0;
@@ -521,6 +573,4 @@ $namespace: "pay";
       height: 1.8rem;
     }
   }
-
-  
-}
+}

src/view/Useragreement.vue

@@ -9,7 +9,7 @@
         :src="src"
       ></iframe>
     </div>
-  </div>
+  </div>  
 </template>
 <script>
 export default {

src/view/namespace.js

@@ -40,15 +40,7 @@ export const Useragreement = {
   route: { name: "Useragreement" },
   path: "/Useragreement"
 };
-//隐私政策
-export const Privacypolicy = {
-  name: "Privacypolicy",
-  meta: {
-    Chinese: "隐私政策"
-  },
-  route: { name: "Privacypolicy" },
-  path: "/Privacypolicy"
-};
+
 export const Rank = {
   name: "Rank",
   meta: {

src/view/pay.vue

@@ -56,6 +56,36 @@
             <img src="../assets/个人中心-进入.png" />
           </p>
         </div>
+        <div class="pay-line"></div>
+
+        <div class="pay-type">
+          <p class="title">充值方式</p>
+          <div class="pay-type__list">
+            <div
+              :class="[
+                'pay-type__item',
+                currentPayType == item.nickName ? 'cur' : ''
+              ]"
+              v-for="item in payType"
+              :key="item.name"
+              @click="changePayType(item.nickName)"
+            >
+              <img :src="item.img" class="icon" />
+              <p class="name">{{ item.name }}</p>
+              <img
+                src="../assets/is_check.png"
+                class="check-img"
+                v-show="currentPayType == item.nickName"
+              />
+              <img
+                src="../assets/un_check.png"
+                class="check-img"
+                v-show="currentPayType != item.nickName"
+              />
+            </div>
+          </div>
+        </div>
+
         <template v-if="show_month_order_entry">
           <div
             class="pay-product__item pay-product__month"
@@ -284,17 +314,11 @@
         </div>
         <template v-if="showPayYearBanner || showSpecialPayTempalte">
           <div class="pay-btn-box">
-            <div v-if="showHelpPay" class="help-pay__btn" @click="toHelpPay">
-              请好友代充
-            </div>
             <div class="pay-btn" @click="pay">立即充值</div>
           </div>
         </template>
         <template v-else>
           <div class="pay-box__fixed">
-            <div v-if="showHelpPay" class="help-pay__btn" @click="toHelpPay">
-              请好友代充
-            </div>
             <div class="pay-btn" @click="pay">
               {{
                 chargePrice ? "¥" + (chargePrice - currentCoupon.price) : ""
@@ -382,9 +406,6 @@
           </ul>
         </div>
         <div class="pay-btn-box">
-          <div v-if="showHelpPay" class="help-pay__btn" @click="toHelpPay">
-            请好友代充
-          </div>
           <div class="pay-btn" @click="payInXiYue">
             {{ xiyue_pay_btn_text }}
           </div>
@@ -474,10 +495,19 @@ export default {
       couponList: [],
       availdCouponList: [],
       popupVisible: false,
+      payType: [
+        { name: "微信", img: require("../assets/wechat.png"), nickName: "wx" },
+        {
+          name: "支付宝",
+          img: require("../assets/alipay.png"),
+          nickName: "zfb"
+        }
+      ],
       currentCoupon: {
         id: "",
         price: 0
-      }
+      },
+      currentPayType: "zfb"
     };
   },
   computed: {
@@ -518,6 +548,10 @@ export default {
         });
       }
     },
+    //修改支付方式
+    changePayType(name) {
+      this.currentPayType = name;
+    },
     //选择优惠券
     chooseCoupon(coupon) {
       this.currentCoupon = coupon;
@@ -720,7 +754,7 @@ export default {
     flex: 1;
     margin: 0;
     background: #ef5952;
-    border-radius: 4px;
+    border-radius: 10px;
     border: 1px solid #ef5952;
     height: 0.76rem;
     line-height: 0.76rem;