You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
350 lines
8.6 KiB
350 lines
8.6 KiB
<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>
|
|
<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: [],
|
|
|
|
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;
|
|
} 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;
|
|
}
|
|
|
|
.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: 30px;
|
|
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: 10%;
|
|
}
|
|
|
|
.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>
|
|
|