kuaile_serviceh5/src/components/cardSecretBuy.vue

<template>
  <div class="cardSecretBuy">
    <login :page="login_page"></login>

    <div v-if="prompt" class="prompt-alert">{{ prompt }}</div>

    <div class="card-secret-buy">
      <div class="card-content">
        <div class="card-buy" v-if="tab==0">
          <div class="card-title">
            <div class="card-circle">卡密购买</div>
          </div>
          <div class="card-types">
            <div class="card-type" v-for="(item, key) in card_type_list" @click="buyCard(item)">
              <div class="type-name">{{ item.title }}</div>
              <div class="type-price">{{ item.price }}元</div>
            </div>
          </div>
          <div class="card-intro" v-if="cards_intro_list">
            <div class="intro-title">
              <div class="intro-prompt">卡密说明</div>
            </div>
            <div class="intro-content" v-for="(item, key) in cards_intro_list">
              <div class="intro-line">{{ item }}</div>
            </div>
          </div>
        </div>
        <div class="card-search" v-if="tab==1">
          <div class="card-title">
            <div class="card-circle">卡密查询</div>
            <div @click="toOrderSample()" class="card-order">订单编号指引</div>
          </div>
          <div class="search-input">
            <input type="text" placeholder="请输入订单编号" v-model="inputValue" @keyup.enter="search()">
            <div @click="search()">搜索</div>
          </div>
        </div>
      </div>

      <div class="footernav">
        <div class="itemList" @click="toTab(0)">
          <img v-if="tab==0" class="tabbar_item_img1" src="../assets/images/card_secret_buy/tabs_buy_on.png" alt="">
          <img v-else class="tabbar_item_img1" src="../assets/images/card_secret_buy/tabs_buy.png" alt="">
          <span v-bind:class="[{'selected':tab==0}]">卡密购买</span>
        </div>
        <div class="itemList" @click="toTab(1)">
          <img v-if="tab==1" class="tabbar_item_img1" src="../assets/images/card_secret_buy/tabs_search_on.png" alt="">
          <img v-else class="tabbar_item_img1" src="../assets/images/card_secret_buy/tabs_search.png" alt="">
          <span v-bind:class="[{'selected':tab==1}]">卡密查询</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Login from './common/Login.vue'

export default {
  data() {
    return {
      login_page: "cardSecretBuy",

      prompt: '',
      agent_url: localStorage.getItem('agent_url'),

      tab: 0,
      card_type_list: [],
      cards_intro_list:"",

      inputValue: '',
      orderid: "",
    };
  },
  methods: {
    promptshow(content) {
      this.prompt = content;
      setTimeout(() => {
        this.prompt = ""
      }, 2000);
    },
    getCardSecretTypes: function () {
      this.$http.post(this.agent_url + "/h5_get_card_secret_types", {}).then(response => {
          if (response.data.status) {
            this.card_type_list = response.data.data.cardtypes;
            this.cards_intro_list = response.data.data.cards_intro_list;
          } else {
            this.promptshow(response.data.info);
          }
        },
        response => {
          this.promptshow("网络错误，请重试");
        });
    },
    toTab: function (tab) {
      this.tab = tab;
    },
    search: function () {
      if (this.inputValue == '') {
        this.promptshow('请输入订单编号');
        return;
      }
      this.$http.post(this.agent_url + "/h5_get_card_secret", {
        orderid: this.inputValue,
      }).then(response => {
          if (response.data.status) {
            localStorage.setItem('cardSecretBuyTab', 1)
            this.toCardSecretQuery(this.inputValue);
          } else {
            this.promptshow(response.data.info);
          }
        },
        response => {
          this.promptshow("网络错误，请重试");
        });
    },
    toOrderSample: function () {
      location.href = "#/orderSample";
    },
    buyCard: function (card) {
      let openid = this.$cookies.get('openid_' + this.$cookies.get('site_uid'));
      var total_fee = card.price < 0.01 ? 0.01 : card.price;
      let param = {
        identity: openid,
        total_fee: total_fee,
        unique_id: card.id,
        page_id: 888,
        buytype: 'cardsecret',
        back_url: this.agent_url,
        desc: card.desc,
      };
      this.$http.post(this.agent_url + "/h5_service_awaken_pay", param).then(response => {
          if (response.data.status) {
            this.tid = response.data.data.tid;
            this.callpay(response.data.data);
          } else {
            this.promptshow(response.data.info);
          }
        },
        response => {
          this.promptshow("网络错误，请重试");
        });
    },
    callpay: function (data) {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
          document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
        }
      } else {
        this.jsApiCall(data);
      }
    },
    jsApiCall: function (data) {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId": data.appId,
          "timeStamp": data.timeStamp + '',
          "nonceStr": data.nonceStr,
          "package": data.package,
          "signType": data.signType,
          "paySign": data.paySign
        }, (res) => {
          //此处需要转化为字符串
          if (res.err_msg.indexOf('ok') > -1) {
            this.checkpayresult();
          } else if (res.err_msg.indexOf('cancel') > -1) {

          } else {
            this.promptshow('支付失败');
          }
        });
    },
    checkpayresult: function () {
      var paytype = 2;
      this.$http.post(this.agent_url + "/h5_pay_result", {
        tid: this.tid,
        pay_type: paytype
      }).then(response => {
          if (response.data.status) {
            this.toCardSecretQuery(this.tid);
          } else {
            this.promptshow(response.data.info);
          }
        },
        response => {
          this.promptshow("网络错误，请重试");
        });
    },
    toCardSecretQuery(orderid) {
      location.href = "#/cardSecretQuery/?orderid=" + orderid;
    }
  },
  components: {
    Login
  },
  mounted() {
    this.getCardSecretTypes();
    if (localStorage.getItem('cardSecretBuyTab') !== null && localStorage.getItem('cardSecretBuyTab') !== "") {
      this.tab = localStorage.getItem('cardSecretBuyTab')
      localStorage.setItem('cardSecretBuyTab', 0)
    }

    //兼容卡密查询页面
    let query_url = localStorage.getItem('query_url')
    if(query_url.indexOf('card_secret_query') > -1){
      this.tab = 1
    }
  }
};
</script>

<style lang="scss" scoped>
.cardSecretBuy {
  background: #F8F8F8;
  font-size: 17px;
  height: 100vh;
}

.card-content {
  padding: 20px 20px 90px;
}

.card-title {
  line-height: 20px;
  display: flex;
}

.card-circle {
  width: 50%;
  padding-left: 30px;
  background-image: url(../assets/images/title_pic.png);
  background-repeat: no-repeat;
  background-position: 0 70%;
}

.card-types {
  background: #fff;
  padding: 0 20px;
  margin-top: 20px;
  border: 1px solid #F8F8F8;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.card-type {
  border-top: 1px solid #E8ECF0;
  line-height: 84px;
  display: flex;
}

.card-type:first-child {
  border: none;
}

.type-name {
  color: #071432;
  width: 50%;
  text-align: left;
}

.type-price {
  color: #0F83FF;
  width: 50%;
  text-align: right;
  padding-right: 20px;
  background-image: url(../assets/images/card_secret_buy/buy_pic.png);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 15px;
}

.card-intro{
  font-size: 16px;
}

.intro-title{
  margin-top: 5px;
  line-height: 50px;
  color: #747B8B;
}

.intro-prompt{
  width: 50%;
  padding-left: 20px;
  background-image: url(../assets/images/card_secret_buy/buy_prompt.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 16px;
}

.intro-content{
  line-height: 24px;
}

.intro-line{
  margin-bottom: 5px;
  color: #747B8B;
}

.card-order {
  width: 50%;
  display: inline-block;
  text-align: right;
  font-size: 15px;
}

.search-input {
  background: #fff;
  display: flex;
  margin: 30px 0;
  border: 1px solid #BED4F1;
  border-radius: 6px;
  overflow: hidden;
}

.search-input input {
  padding: 10px;
  width: 100%;
  border: none;
  font-size: 16px;
}

.search-input div {
  width: 105px;
  line-height: 44px;
  background: #fff;
  color: #0F83FF;
  box-sizing: border-box;
}

.search-input div:before {
  content: '';
  height: 5px;
  border-left: 2px solid #BED4F1;
  padding-right: 20px;
}

.footernav {
  display: flex;
  justify-content: center;
  border-top: 1px solid #EEEEEE;
  width: 100%;
  height: 90px;
  position: fixed;
  z-index: 9;
  box-sizing: border-box;
  bottom: 0;
  background: #FFFFFF;
}

.itemList {
  display: flex;
  justify-content: center;
  align-content: center;
  float: left;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.selected {
  color: #000 !important;
}

.tabbar_item_img1 {
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: 45px;
}

.itemList span {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #979797;
  display: block;
  position: absolute;
  width: 100%;
  bottom: 26px;
  text-align: center;
}
</style>