646 lines
15 KiB
Vue
646 lines
15 KiB
Vue
<template>
|
|
<view v-if="isShow"> </view>
|
|
<view v-else class="min-body">
|
|
<u-gap height="20rpx"></u-gap>
|
|
<view class="header-box">
|
|
<view class="flex">
|
|
<view class="logo">
|
|
<image :src="logo"></image>
|
|
</view>
|
|
<view class="goods-name">
|
|
{{ title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="white-box">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 充值账号 </view>
|
|
<view class="lit-333" style="color: #ff2a30">
|
|
*请确认账号信息，充值成功后不支持退换
|
|
</view>
|
|
</view>
|
|
<view class="" style="padding-top: 20rpx">
|
|
<u-input fontSize="46rpx" border="none" v-model="account" :placeholder="account_type"></u-input>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="white-box">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 请选择充值类型 </view>
|
|
</view>
|
|
<view class="goods-type" style="padding-top: 20rpx">
|
|
<view :class="'title ' + (v == activeName ? 'active' : '')" v-for="(v, index) in spce" :key="index"
|
|
@click="activeType(index, v)">
|
|
{{ v }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="white-box" v-if="goods_id == 112">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 请选择充值地区 </view>
|
|
<view class="lit-333" style="color: #ff2a30">
|
|
*部分地区暂不支持，请选择支持的地区
|
|
</view>
|
|
</view>
|
|
<view class="" style="padding-top: 20rpx" @click="showPicker = true">
|
|
<u-input disabled disabledColor="#fff" v-model="checkAddress.name" fontSize="46rpx" border="none"
|
|
placeholder="请选择充值地区"></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="white-box" v-if="goods_id == 112 && activeName == '南方电网'">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 身份证尾号 </view>
|
|
<view class="lit-333" style="color: #ff2a30">
|
|
*身份证后六位(含X,例:123456或12345X)
|
|
</view>
|
|
</view>
|
|
<view class="" style="padding-top: 20rpx">
|
|
<u-input v-model="idcard" fontSize="46rpx" border="none" placeholder="请输入身份证号后六位"></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="white-box" v-if="activeArr['length'] > 0">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 请选择面额 </view>
|
|
</view>
|
|
<view class="goods-type" style="padding-top: 20rpx">
|
|
<view :class="'title ' + (goodsActive == i ? 'active' : '')" v-for="(v, i) in activeArr" :key="i"
|
|
@click="checkGoods(i)">
|
|
<view class="big-333 bold" style="color: #6c3d05">
|
|
{{ v.b_sku_time }}
|
|
</view>
|
|
<view class="sjjg"> 售价：￥{{ v.price / 100 }} </view>
|
|
<view class="big-333 bold" style="color: #6c3d05; text-decoration: line-through">
|
|
原价：￥{{ v.original_price / 100 }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="white-box" v-if="isUseTqk">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 优惠 </view>
|
|
</view>
|
|
<!-- {{dikou}} -->
|
|
<card-checked @GitData="GitData" @checked="checkedFunc" :price="dikou" ref="card-checked"></card-checked>
|
|
</view>
|
|
<view class="white-box">
|
|
<view class="title-box flbtn">
|
|
<view class="big-333 bold"> 温馨提示 </view>
|
|
</view>
|
|
<rich-text class="big-666" style="font-size: " :nodes="html"></rich-text>
|
|
</view>
|
|
<u-gap height="205rpx"></u-gap>
|
|
<view class="bottom">
|
|
<view class="bd-box flbtn">
|
|
<view class="">
|
|
<view class="big-666 bold">
|
|
应付金额：<text style="color: #ff2a30">￥{{ __amount(needPay) }}</text>
|
|
</view>
|
|
<view class="lit-666"> 获得佣金：￥{{ _commission(yongjin)}} </view>
|
|
<view class="lit-666">
|
|
消费补贴卡抵扣：￥{{ checkYh ? backAmount : 0 }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right">
|
|
<view class="service" @tap="location">
|
|
<u-icon labelPos="bottom" labelSize="20rpx" name="kefu-ermai" label="客服"></u-icon>
|
|
</view>
|
|
<view class="rc-now" @click="rechargeNow"> 立即充值 </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-picker @confirm="confirmPicker" @cancel="showPicker = false" keyName="name" :show="showPicker"
|
|
:columns="arrayChecked"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
goodsSkuListAPI,
|
|
CreateOrderComAPI
|
|
} from "@/request/pay/index.js";
|
|
import mixin from "@/static/js/mixin/mixin.js";
|
|
export default {
|
|
mixins: [mixin],
|
|
data() {
|
|
return {
|
|
isShow: true,
|
|
account: "",
|
|
activeName: "",
|
|
title: "",
|
|
logo: "",
|
|
goods_id: 0,
|
|
account_type: "",
|
|
baseList: [],
|
|
isUseTqk: false,
|
|
idcard: "",
|
|
checkAddress: {
|
|
name: "",
|
|
val: "",
|
|
},
|
|
array: [
|
|
[{
|
|
name: "北京市",
|
|
val: "北京",
|
|
},
|
|
|
|
{
|
|
name: "天津市",
|
|
val: "天津",
|
|
},
|
|
{
|
|
name: "辽宁省",
|
|
val: "辽宁",
|
|
},
|
|
{
|
|
name: "江苏省",
|
|
val: "江苏",
|
|
},
|
|
|
|
{
|
|
name: "浙江省",
|
|
val: "浙江",
|
|
},
|
|
{
|
|
name: "山东省",
|
|
val: "山东",
|
|
},
|
|
{
|
|
name: "湖南省",
|
|
val: "湖南",
|
|
},
|
|
{
|
|
name: "陕西省",
|
|
val: "陕西",
|
|
},
|
|
{
|
|
name: "新疆",
|
|
val: "新疆",
|
|
},
|
|
{
|
|
name: "宁夏",
|
|
val: "宁夏",
|
|
},
|
|
{
|
|
name: "安徽省",
|
|
val: "安徽",
|
|
},
|
|
{
|
|
name: "重庆市",
|
|
val: "重庆",
|
|
},
|
|
{
|
|
name: "福建省",
|
|
val: "福建",
|
|
},
|
|
{
|
|
name: "河南省",
|
|
val: "河南",
|
|
},
|
|
{
|
|
name: "青海省",
|
|
val: "青海",
|
|
},
|
|
{
|
|
name: "湖北省",
|
|
val: "湖北",
|
|
},
|
|
{
|
|
name: "黑龙江省",
|
|
val: "黑龙江",
|
|
},
|
|
{
|
|
name: "吉林省",
|
|
val: "吉林",
|
|
},
|
|
{
|
|
name: "上海市",
|
|
val: "上海",
|
|
},
|
|
{
|
|
name: "甘肃省",
|
|
val: "甘肃",
|
|
},
|
|
{
|
|
name: "山西省",
|
|
val: "山西",
|
|
},
|
|
{
|
|
name: "四川省",
|
|
val: "四川",
|
|
},
|
|
{
|
|
name: "江西省",
|
|
val: "江西",
|
|
},
|
|
{
|
|
name: "内蒙古",
|
|
val: "蒙东",
|
|
},
|
|
{
|
|
name: "张家口市",
|
|
val: "冀北",
|
|
},
|
|
{
|
|
name: "秦皇岛市",
|
|
val: "冀北",
|
|
},
|
|
{
|
|
name: "廊坊市",
|
|
val: "冀北",
|
|
},
|
|
{
|
|
name: "承德市",
|
|
val: "冀北",
|
|
},
|
|
{
|
|
name: "唐山市",
|
|
val: "冀北",
|
|
},
|
|
{
|
|
name: "河北省",
|
|
val: "河北",
|
|
},
|
|
],
|
|
],
|
|
array2: [{
|
|
name: "广东省",
|
|
val: "广东",
|
|
},
|
|
{
|
|
name: "广西省",
|
|
val: "广西",
|
|
},
|
|
{
|
|
name: "云南省",
|
|
val: "云南",
|
|
},
|
|
{
|
|
name: "贵州省",
|
|
val: "贵州",
|
|
},
|
|
{
|
|
name: "海南省",
|
|
val: "海南",
|
|
},
|
|
],
|
|
html: "",
|
|
checked: false,
|
|
spce: [],
|
|
goodsActive: 0,
|
|
activeArr: [],
|
|
specMenu: [],
|
|
arrayChecked: [],
|
|
checkYh: false,
|
|
price: 0,
|
|
backAmount: 0,
|
|
showPicker: false,
|
|
};
|
|
},
|
|
computed: {
|
|
dikou() {
|
|
// get(){
|
|
console.log(this.activeArr);
|
|
if (this.activeArr.length == 0) {
|
|
return 0;
|
|
}
|
|
let data = this.activeArr[this.goodsActive];
|
|
console.log(
|
|
(data.price - data.buying_price) * (data.deduction_prop / 100),
|
|
"data "
|
|
);
|
|
return (data.price - data.buying_price) * (data.deduction_prop / 100);
|
|
// }
|
|
},
|
|
needPay: {
|
|
get() {
|
|
if (this.activeArr.length == 0) {
|
|
return 0;
|
|
}
|
|
if (!this.checkYh) {
|
|
return this.activeArr[this.goodsActive].price / 100;
|
|
}
|
|
return this.activeArr.length > 0 ?
|
|
(this.activeArr[this.goodsActive].price - this.backAmount * 100) /
|
|
100 :
|
|
0;
|
|
},
|
|
},
|
|
yongjin: {
|
|
get() {
|
|
return this.activeArr.length > 0 ?
|
|
this.activeArr[this.goodsActive].self_commission :
|
|
0;
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
rechargeNow() {
|
|
let _this = this;
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
});
|
|
if (!this.activeName) {
|
|
uni.showToast({
|
|
title: "请选择您手机号对应的运营商",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
if (this.account == "") {
|
|
return this.$u.toast("请输入充值帐号");
|
|
}
|
|
if (this.activeArr.length == 0) {
|
|
return this.$u.toast("请等待页面加载...");
|
|
}
|
|
let param = {
|
|
account: this.account,
|
|
g_id: this.goods_id,
|
|
spec_id: this.activeArr[this.goodsActive].b_sku_id,
|
|
is_deduction: 0,
|
|
deduction_amount: 0,
|
|
};
|
|
if (this.checkYh) {
|
|
param.is_deduction = 1;
|
|
param.deduction_amount = this.backAmount;
|
|
}
|
|
//
|
|
if (this.goods_id == 112) {
|
|
if (this.checkAddress.name == "") {
|
|
uni.showToast({
|
|
title: "请选择充值省份",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
param.account += this.checkAddress.val;
|
|
if (this.activeName == "南方电网") {
|
|
if (this.idcard == "") {
|
|
uni.showToast({
|
|
title: "请输入身份证后六位",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
if (this.idcard.length != "6") {
|
|
uni.showToast({
|
|
title: "请输入身份证后六位",
|
|
icon: "none",
|
|
});
|
|
return;
|
|
}
|
|
param.idcard = this.idcard;
|
|
}
|
|
}
|
|
CreateOrderComAPI(param).then(res => {
|
|
uni.hideLoading();
|
|
const { pay_price, order_sn, type, openid} = res['data'];
|
|
this.$Payment.H5_Payment({
|
|
pay_price,
|
|
order_sn,
|
|
type,
|
|
openid,
|
|
return_url:`/pages/pages-recharge/order/index`
|
|
});
|
|
// this.payment({
|
|
// order_sn: res['data']['order_sn'],
|
|
// type: res['data']['type'],
|
|
// redirect_url: '/pages/pages-recharge/order/index'
|
|
// });
|
|
})
|
|
},
|
|
confirmPicker(e) {
|
|
// console.log(e, 'confirmPicker')
|
|
this.showPicker = false;
|
|
this.checkAddress = e.value[0];
|
|
},
|
|
GitData(d) {
|
|
// console.log('git data', d)
|
|
this["backAmount"] = d;
|
|
if (d <= 0) {
|
|
this.checkYh = 0;
|
|
}
|
|
},
|
|
checkedFunc(e) {
|
|
console.log(e);
|
|
this.checkYh = e;
|
|
},
|
|
async getData() {
|
|
await this.getGoodsInfo();
|
|
},
|
|
getBackAmount() {
|
|
this.$nextTick((e) => {
|
|
// console.log(this['$refs'],'ref')
|
|
this.backAmount = this["$refs"]["card-checked"].GetP();
|
|
});
|
|
},
|
|
activeType(index, activeName) {
|
|
this.activeName = activeName;
|
|
this.goodsActive = 0;
|
|
if (activeName == "国家电网" || activeName == "南方电网") {
|
|
if (activeName == "国家电网") {
|
|
this.arrayChecked = this.array;
|
|
} else {
|
|
this.arrayChecked = this.array2;
|
|
}
|
|
}
|
|
this.activeArr = this.specMenu[this.activeName];
|
|
this.isUseTqk = true;
|
|
// if(this.activeArr.length > this.goodsActive){
|
|
// this.setPrice(this.activeArr[this.goodsActive])
|
|
// }
|
|
},
|
|
checkGoods(i) {
|
|
this.goodsActive = i;
|
|
// this.getBackAmount()
|
|
},
|
|
getGoodsInfo() {
|
|
goodsSkuListAPI({
|
|
b_goods_id: this.goods_id,
|
|
}).then((res) => {
|
|
console.log(JSON.stringify(res['data'],null,5),'data');
|
|
uni.hideLoading();
|
|
this["isShow"] = false;
|
|
this["html"] = res['data']["xuzhi"];
|
|
this["title"] = res['data']["g_name"];
|
|
if (res["data"]["spec"]["length"] > 0) {
|
|
this.logo = res["data"]["spec"][0]["b_goods_img"];
|
|
}
|
|
console.log(res["data"]["spec"], "-------");
|
|
this["account_type"] = `请输入${res["data"]["account_type"]}`;
|
|
let arr = [];
|
|
let specMenu = [];
|
|
res["data"]["spec"].forEach((v, i) => {
|
|
if (res['data']["g_name"].indexOf("话费") == -1) {
|
|
if (i == 0) {
|
|
this.activeName = v.b_sku_name;
|
|
}
|
|
}
|
|
if (!arr.includes(v.b_sku_name)) {
|
|
arr.push(v.b_sku_name);
|
|
}
|
|
if (specMenu[v.b_sku_name]) {
|
|
specMenu[v.b_sku_name].push(v);
|
|
} else {
|
|
specMenu[v.b_sku_name] = [v];
|
|
}
|
|
});
|
|
this.spce = arr;
|
|
this.specMenu = specMenu;
|
|
try {
|
|
this.activeArr = specMenu[this.activeName];
|
|
if (this.activeArr.length > 0) {
|
|
if (this.activeArr[0].deduction_prop > 0) {
|
|
this.isUseTqk = true;
|
|
this.checkYh = true;
|
|
//this.getBackAmount()
|
|
}
|
|
}
|
|
} catch (e) {
|
|
this.activeArr = [];
|
|
// this.isUseTqk = true;
|
|
this.checkYh = true;
|
|
//TODO handle the exception
|
|
}
|
|
});
|
|
},
|
|
|
|
// 跳转客服
|
|
// service() {
|
|
// location.href = 'https://work.weixin.qq.com/kfid/kfc2f4d0cb26562ffe1?corpId='
|
|
// uni.openCustomerServiceChat({
|
|
// extInfo: {
|
|
// url: "",
|
|
// },
|
|
// corpId: "ww4f46b491a045158c",
|
|
|
|
// success(e) {
|
|
// console.log(e);
|
|
// },
|
|
// fail(e) {
|
|
// console.log(e);
|
|
// },
|
|
// });
|
|
// },
|
|
},
|
|
onLoad(op) {
|
|
this.arrayChecked = this.array;
|
|
this.goods_id = op.goods_id || getApp()['globalData']['parameters']['goods_id'];
|
|
uni.showLoading({
|
|
title: "正在加载中...",
|
|
});
|
|
console.log("showLoading");
|
|
this.getData();
|
|
setTimeout((e) => {
|
|
if (this.isShow == true) {
|
|
this.$u.toast("稍后重试");
|
|
}
|
|
}, 30000);
|
|
},
|
|
onBackPress(e) {
|
|
console.log(e,'返回');
|
|
return true;
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-box {
|
|
background: linear-gradient(90deg, #fffdf8, #f9eecc);
|
|
height: 200rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.goods-type {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-gap: 20rpx;
|
|
}
|
|
|
|
.bottom {
|
|
background-color: #ededed;
|
|
height: 185rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100vw;
|
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
.bd-box {
|
|
padding: 20rpx;
|
|
background-color: #fff;
|
|
border-top-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
height: 145rpx;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.service {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.rc-now {
|
|
background-color: #e7c86d;
|
|
border-radius: 20rpx;
|
|
color: #fff;
|
|
height: 85rpx;
|
|
line-height: 85rpx;
|
|
padding: 0 40rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sjjg {
|
|
color: #d3a219;
|
|
font-size: 36rpx;
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
.logo {
|
|
padding-top: 50rpx;
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|
|
.goods-name {
|
|
padding-top: 70rpx;
|
|
margin-left: 20rpx;
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.white-box {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.title-box {
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 2rpx solid #ededed;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #6b3d05;
|
|
border-radius: 20rpx;
|
|
font-weight: bold;
|
|
background-color: #f7f5ef;
|
|
// width: 90%;
|
|
text-align: center;
|
|
// margin: 0 5%;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.active {
|
|
background-color: #f7e7ba;
|
|
}
|
|
</style>
|