1.修改话费页面调整

yj-dev
杨杰 2 years ago
parent 91dfd0f246
commit deddb6d97c
  1. 42
      App.vue
  2. 5
      Utils/Api.js
  3. 12
      pages/goods/refuel-confirm/refuel-confirm.vue
  4. 3
      pages/tabBar/home/home.vue
  5. 418
      subPages/recharge-centre/recharge-centre.vue
  6. 4
      subPages/recharge/recharge.vue
  7. BIN
      subPages/static/tongz.png
  8. 9
      uni.scss

@ -95,23 +95,23 @@
// #endif
// #ifdef H5
let that = this;
// that.globalData.url = 'https://hsgcs.dctpay.com/crest';
// that.globalData.v1url = 'https://hsgcs.dctpay.com/v1';
// that.globalData.orderurl = 'https://hsgcs.dctpay.com/order';
// that.globalData.userurl = 'https://hsgcs.dctpay.com/user';
// that.globalData.brestUrl = 'https://hsgcs.dctpay.com/brest';
// that.globalData.imgUrl = 'https://hsgcs.dctpay.com/filesystem/';
// that.globalData.imageWxImg = 'https://hsgcs.dctpay.com/filesystem/wxApplets/';
// that.globalData.imageqrImg = 'https://hsgcs.dctpay.com/filesystem/temporary/';
that.globalData.url = 'https://hsgcs.dctpay.com/crest';
that.globalData.v1url = 'https://hsgcs.dctpay.com/v1';
that.globalData.orderurl = 'https://hsgcs.dctpay.com/order';
that.globalData.userurl = 'https://hsgcs.dctpay.com/user';
that.globalData.brestUrl = 'https://hsgcs.dctpay.com/brest';
that.globalData.imgUrl = 'https://hsgcs.dctpay.com/filesystem/';
that.globalData.imageWxImg = 'https://hsgcs.dctpay.com/filesystem/wxApplets/';
that.globalData.imageqrImg = 'https://hsgcs.dctpay.com/filesystem/temporary/';
that.globalData.url = 'https://hsg.dctpay.com/crest';
that.globalData.v1url = 'https://hsg.dctpay.com/v1';
that.globalData.orderurl = 'https://hsg.dctpay.com/order';
that.globalData.userurl = 'https://hsg.dctpay.com/user';
that.globalData.brestUrl = 'https://hsg.dctpay.com/brest';
that.globalData.imgUrl = 'https://hsg.dctpay.com/filesystem/';
that.globalData.imageWxImg = 'https://hsg.dctpay.com/filesystem/wxApplets/';
that.globalData.imageqrImg = 'https://hsg.dctpay.com/filesystem/temporary/';
// that.globalData.url = 'https://hsg.dctpay.com/crest';
// that.globalData.v1url = 'https://hsg.dctpay.com/v1';
// that.globalData.orderurl = 'https://hsg.dctpay.com/order';
// that.globalData.userurl = 'https://hsg.dctpay.com/user';
// that.globalData.brestUrl = 'https://hsg.dctpay.com/brest';
// that.globalData.imgUrl = 'https://hsg.dctpay.com/filesystem/';
// that.globalData.imageWxImg = 'https://hsg.dctpay.com/filesystem/wxApplets/';
// that.globalData.imageqrImg = 'https://hsg.dctpay.com/filesystem/temporary/';
uni.getStorage({
key: 'openId',
success(e) {
@ -234,4 +234,14 @@
<style lang="scss">
/*每个页面公共css */
@import "/static/iconfont/font.scss";
@keyframes noticeAnimation {
from {
transform: translateX(100rpx);
}
to {
// transform: translateX(calc(-100% + 150px));
transform: translateX(-100%);
}
}
</style>

@ -565,6 +565,10 @@ export const getRecordByCouponAgentId = params => {
export const orderToGoldPayunion = params => {
return POST('POST', `${base}/outRechargeOrder/orderToGoldPay`, params).then(res => res.data);
}
// 话费充值数据字典
export const findSecConfigByType = params => {
return POST('GET', `${base}/common/findSecConfigByType`, params).then(res => res.data);
}
//提交订单
export const addOrderPay = params => {
@ -680,4 +684,3 @@ export const getUserAccount = params => {
export const getUserDiscountList = params => {
return POST('GET', `${userbase}/discount/getUserDiscountList`, params).then(res => res.data);
}

@ -241,7 +241,7 @@
<wybPopup ref="popup" type="bottom" width="500" :scrollY="true" radius="6" :showCloseIcon="true">
<view class="fotct font18 fontwig6 fcor333 mart10 height30">优惠券选择</view>
<view class="width92 height110 tccs mart10 alijus" v-for="(items, index) in OrderPreList" :key="index"
@click="radioChanges(items,items)">
@click="radioChanges(items)">
<image mode="widthFix" :src="imageUrl+items.discountImg"></image>
<view class="alijus width60 margle10">
<view class="width80p">
@ -492,9 +492,9 @@
this.$refs.popup.show();
},
//
radioChanges(item, items) {
radioChanges(item) {
this.rechangeload();
if (this.memDiscountId == items.id) { //
if (this.memDiscountId == item.id) { //
this.memDiscountId = '';
this.deductionPrice = '0.00';
this.priceCaluc(this.orderList.payPrice);
@ -502,7 +502,7 @@
} else { //
if (item.discountType == 1) {
if (this.orderPrice >= item.discountCondition) {
this.memDiscountId = items.id;
this.memDiscountId = item.id;
//
this.deductionPrice = item.discountPrice;
let oldprice = this.orderPrice - this.deductionPrice;
@ -516,14 +516,14 @@
}
}
if (item.discountType == 2) {
this.memDiscountId = items.id;
this.memDiscountId = item.id;
//
this.deductionPrice = item.discountPrice;
let oldprice = this.orderPrice - this.deductionPrice;
this.priceCaluc(oldprice);
}
if (item.discountType == 3) {
this.memDiscountId = items.id;
this.memDiscountId = item.id;
//
this.deductionPrice = parseFloat(this.orderPrice - (this.orderPrice * item.discountPrice)).toFixed(2);
let oldprice = parseFloat(this.orderPrice * item.discountPrice).toFixed(2);

@ -962,8 +962,7 @@
.spcarea {
width: 31%;
margin-right: auto;
margin-left: auto;
margin-left: 2%;
padding-bottom: 10px;
}

@ -1,44 +1,90 @@
<template>
<view>
<view class="width100 height100p backcorf06">
<view class="width100 height120" style="background-color: #3267f6;">
<view class="alijusstart paddleft10 paddtright10" style="background-color: #2d5de5;height: 30px;">
<image src="../static/tongz.png" style="height: 20px;" class="icon45"></image>
<view class="right-left-scroll margle">
<view class="content font12 fontspec"
:style="{'animation': `noticeAnimation ${time}s linear 1s infinite`}">
{{notice}}
</view>
</view>
</view>
<view class="block">
<view class="content height60">
<input type="number" class="my flleft font18 fcorfff" maxlength="11"
<input type="number" class="my flleft font20 fcorfff" maxlength="11"
placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
</view>
<view class="line1 width100 backcorfff"></view>
</view>
</view>
<!-- <view class="mart5">
<QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change"
activeColor="#089bf5" lineColor="#089bf5" minWidth="374">
</QSTabs>
</view> -->
<view class="width90 font16 fcor333 fontwig6 mart20">
选择金额
<view class="backcorlf5 height70"></view>
<view class="width90 border-r backcorfff" style="margin-top: -60px;">
<view class="swiperHead">
<!--组件-->
<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='tabs' :swiperTabIdx='swiperTabIdx'
:currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight'
:swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor'
:swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow"
:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" tabs.length > 0 "
@change="CurrentTab">
</swiperNavBar>
<!--组件-->
</view>
<view class="list">
<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
@click="select(item)">
<view class="heTitle">{{item.rechargePrice}}</view>
<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}</view>
<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
<!--内容-->
<view class="swiperCont border-r">
<swiper class="swiper border-r" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx"
@change="SwiperChange">
<swiper-item class="swiperItem border-r" v-for="(item,index) in tabs" :key='index'>
<view class="width90 font14 fcor333 fontwig6 mart5">
话费特惠充值
</view>
<view v-if="amountList == ''" class="mart10 fotct font14 fcor666">
<image mode="widthFix" style="width: 40vw;" :src="imagewxUrl+imgadres"></image>
</view>
<view class="mart5 width90 font18 fcor333 fontwig6">
充值说明
<view class="list" v-else>
<view class="box border-r" :class="{'on':item.id == inputAmountId}"
v-for="(item,index) in amountList" :key="index" @click="select(item)">
<view class="heTitle fcor333 font16 fontwig6 paddtop5"
:class="{'on':item.id == inputAmountId}" v-if="item.status != 2">
{{item.rechargePrice}}
</view>
<view class="heTitle fcor999 font16 fontwig6 paddtop5"
:class="{'on':item.id == inputAmountId}" v-if="item.status == 2">
{{item.rechargePrice}}
</view>
<view class="font13 contcil" :class="{'on':item.id == inputAmountId}"
v-if="item.status != 2">{{item.payPrice}}</view>
<view class="font12 contcil" :class="{'on':item.id == inputAmountId}"
v-if="item.status == 2">已售空</view>
<view class="width100 font12 height25l boxchil"
:class="{'on':item.id == inputAmountId}" style="">{{explainReceiptTime}}
</view>
<!-- <view class="width90 mart20" v-if="current == 0">
<image class="width100" mode="widthFix" :src="imagewxUrl+image2"></image>
</view> -->
<view class="width90 mart20">
<image class="width100" mode="widthFix" :src="imagewxUrl+image1"></image>
</view>
<view class="height100p"></view>
<view class="bombtn width94 font16">
<view class="width50 flleft payem">应付: {{inputAmount}}</view>
<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="width90 height50 backcor008 font18 fcorfff fotct border-r" @click="addOrderPay()">
<text v-if="inputAmount">¥</text>
{{inputAmount}}
立即充值
</view>
<view class="width100 height40"></view>
</view>
<view class="width90 mart20">
<rich-text :nodes="textcont"></rich-text>
</view>
<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
<image class="popImg" :src="imageUrl+imgadres1"></image>
</wybPopup>
<Postion></Postion>
</view>
</template>
@ -48,17 +94,24 @@
// #endif
let app = getApp();
import QSTabs from '../../components/QS-tabs/QS-tabs.vue';
import swiperNavBar from '../../components/swiperNavBar.vue';
import Postion from '@/components/postion/postion.vue';
import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
import {
getListOutRechargePrice,
addOrderPay
addOrderPay,
findSecConfigByType,
getCmsContent
} from '../../Utils/Api.js';
export default {
components: {
QSTabs
QSTabs,
swiperNavBar,
Postion,
wybPopup
},
data() {
return {
typeId: '',
inputAmountId: '',
inputAmount: '',
inputPhone: '',
@ -66,98 +119,118 @@
amountList: [],
price: '',
amoutstatus: '',
tabs: ["5个工作日", "6小时到账"], //
tabs: [], //
current: 0, //
swiperCurrent: 2,
imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg,
image1:'telephone1.png',
image2:'telephone2.png'
imgadres: 'noorder.png',
imgadres1: '',
image1: 'telephone1.png',
image2: 'telephone2.png',
notice: '', //
textcont: '', //
explainReceiptTime: '', //
time: 0,
//
scrollIntoView: 0, //
swiperTabList: [], //
swiperTabIdx: 0,
swiperCurrentSize: '30rpx', //
swiperColor: '#333333', //
swiperCurrentColor: '#1D63FF', //
currentSwiperWidth: '33%', // % upx rpx px
currentSwiperHeight: 100, // rpx px
mainHeight: 240, //
currentSwiperLineShow: true, //线 线.swiperLinecss
currentSwiperLineActiveBg: '#1D63FF', //线
currentSwiperLineActiveWidth: '30rpx', //线 upx rpx px
currentSwiperLineActiveHeight: '6rpx', //线 upx rpx px
currentSwiperLineAnimatie: 300, //线
}
},
onLoad(options) {
this.typeId = options.id;
if (!app.globalData.userInfo) {
if (this.typeId == 1) {
uni.setNavigationBarTitle({
title: '中国移动'
})
this.amoutType = 2;
this.getListOutRechargePrice(2);
return;
}
if (this.typeId == 2) {
uni.setNavigationBarTitle({
title: '中国电信'
})
this.amoutType = 1;
this.getListOutRechargePrice(1);
return;
this.getCmsAactibity();
this.getListOutRechargePrice();
},
onShow() {
this.findSecConfigByType();
this.findSecConfigByTypewap();
},
mounted() {
let scroll_width = 0;
const query = uni.createSelectorQuery().in(this);
query.select('.right-left-scroll').boundingClientRect(data => {
scroll_width = (data.width).toFixed(2);
}).exec();
query.select('.right-left-scroll .content').boundingClientRect(data => {
if (data.width - scroll_width > 0) {
this.time = (9 * data.width / scroll_width).toFixed(2);
}
if (this.typeId == 3) {
uni.setNavigationBarTitle({
title: '中国联通'
})
this.amoutType = 3;
this.getListOutRechargePrice(3);
return;
}).exec();
},
methods: {
//
getCmsAactibity() {
let code;
// #ifdef H5
code = '2'
// #endif
// #ifdef MP
code = '1'
// #endif
let params = {
companyId: app.globalData.companyId,
platform: code,
categoryCode: 'CMS_RECHARGE_POPOVER'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000' && res.return_data.childCategory.length != 0) {
//广
this.imgadres1 = res.return_data.childCategory[0].imgData;
this.showPopup();
}
});
},
onShow() {
this.amountList = [];
if (app.globalData.userInfo) {
if (this.typeId == 1) {
uni.setNavigationBarTitle({
title: '中国移动'
})
this.amoutType = 2;
this.getListOutRechargePrice(2);
return;
//
showPopup() {
this.$refs.popup.show();
},
//
findSecConfigByType() {
let datas = {
codeType: 'EXPLAIN_NOTIFICATIONS'
}
if (this.typeId == 2) {
uni.setNavigationBarTitle({
title: '中国电信'
})
this.amoutType = 1;
this.getListOutRechargePrice(1);
return;
findSecConfigByType(datas).then(res => {
if (res.return_code == '000000') {
this.notice = res.return_data.codeValue;
}
if (this.typeId == 3) {
uni.setNavigationBarTitle({
title: '中国联通'
})
this.amoutType = 3;
this.getListOutRechargePrice(3);
return;
});
},
//
findSecConfigByTypewap() {
let datas = {
codeType: 'EXPLAIN_WRAP '
}
findSecConfigByType(datas).then(res => {
if (res.return_code == '000000') {
this.textcont = res.return_data.codeValue;
}
});
},
methods: {
select(amoutinfos) {
this.inputAmount = amoutinfos.payPrice;
this.price = amoutinfos.rechargePrice;
this.inputAmountId = amoutinfos.id;
this.amoutstatus = amoutinfos.status;
},
//
change(index) {
this.$refs.tabs.setFinishCurrent(index);
this.current = index;
this.inputAmount = '';
this.inputAmountId = '';
this.amoutstatus = '';
if (index == 0) {
this.swiperCurrent = 2;
this.getListOutRechargePrice(this.amoutType);
} else {
this.swiperCurrent = 1;
this.getListOutRechargePrice(this.amoutType);
}
},
/**
* 查询价格
*/
getListOutRechargePrice(item) {
getListOutRechargePrice() {
uni.showLoading({
title: '加载中...'
})
@ -169,21 +242,38 @@
showType = 1;
// #endif
let params = {
operatorType: item,
"companyId": app.globalData.companyId,
platformId: showType,
// rechargeType: this.swiperCurrent
platformId: showType
}
getListOutRechargePrice(params).then(res => {
uni.hideLoading()
if (res.return_code == '000000' && res.return_data) {
this.amountList = res.return_data;
this.tabs = res.return_data;
this.amountList = res.return_data[0].priceList;
this.explainReceiptTime = res.return_data[0].explain_receipt_time;
this.amoutType = res.return_data[0].id;
} else {
this.amountList = [];
}
})
},
//tab
CurrentTab: function(index) {
this.swiperTabIdx = index;
this.scrollIntoView = Math.max(0, index - 1);
this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
this.amountList = this.tabs[this.swiperTabIdx].priceList;
this.amoutType = this.tabs[this.swiperTabIdx].id;
},
//
SwiperChange: function(e) {
this.swiperTabIdx = e.detail.current;
this.scrollIntoView = Math.max(0, e.detail.current - 1);
this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
this.amountList = this.tabs[this.swiperTabIdx].priceList;
this.amoutType = this.tabs[this.swiperTabIdx].id;
},
/**
* 提交订单
*/
@ -241,9 +331,68 @@
</script>
<style lang="scss">
page {
background-color: #f5f5f5;
}
.popImg {
width: 100%;
height: 430px;
}
.swiperHead {
width: 100%;
}
.swiperHead scroll-view {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
white-space: nowrap;
}
.swiperTab {
display: inline-flex;
flex-direction: column;
text-align: center;
}
.swiperCont {
width: 100%;
padding-top: 5px;
padding-bottom: 20px;
background-color: #ffffff;
}
/* #ifdef H5 */
.swiperHead {
top: 44px;
z-index: 10;
width: 100%;
background: #FFFFFF;
}
/* #endif */
.swiper {
width: 100%;
height: 500rpx;
}
.swiperItem {
overflow: auto;
background: #ffffff;
color: #333333;
font-size: 30upx;
}
.block {
width: 94%;
padding: 60upx 3%;
padding: 15px 3%;
.my {
width: 80%;
@ -266,55 +415,66 @@
padding: 20upx 0;
.box {
width: 30%;
width: 29%;
margin-left: 1%;
margin-right: 2%;
margin-top: 20upx;
margin-bottom: 20upx;
float: left;
height: 120upx;
height: 150upx;
// line-height: 120upx;
display: inline-grid;
// display: inline-grid;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0upx 0upx 4upx #666666;
border: 1px solid #f1f1f1;
font-size: 36upx;
color: #089bf5;
&.on {
background-color: #089bf5;
color: #ffffff;
background-color: #ecf5fe;
border: 1px solid #089bf5;
color: #089bf5;
}
}
.heTitle {
width: 100%;
font-size: 15px;
&.on {
color: #089bf5;
}
}
}
.bombtn {
position: fixed;
height: 45px;
bottom: 20px;
border-radius: 6px;
.payem {
height: 45px;
line-height: 45px;
text-align: center;
background-color: #007AFF;
color: #FFFFFF;
border-radius: 6px 0 0 6px;
.boxchil {
border-radius: 0 0 5px 5px;
background-color: #f0f0f0;
margin-top: 7px;
color: #999999;
&.on {
background-color: #089bf5;
color: #ffffff;
}
}
.paybtn {
height: 45px;
line-height: 45px;
text-align: center;
background-color: #F8A628;
border-radius: 0 6px 6px 0;
color: #FFFFFF;
.contcil {
color: #999999;
&.on {
// background-color: #089bf5;
color: #089bf5;
}
}
.right-left-scroll {
white-space: nowrap;
overflow: hidden;
.content {
display: inline-block;
color: #c1b569;
}
}
</style>

@ -4,10 +4,10 @@
<image class="width94 mart20" mode="widthFix" src="../static/upay4.jpg" @click="jumprecent(1)"></image>
<image class="width94 mart10" mode="widthFix" src="../static/upay2.jpg" @click="jumprecent(2)"></image>
<image class="width94 mart10" mode="widthFix" src="../static/upay1.jpg" @click="jumprecent(3)"></image>
<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6"
<!-- <wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6"
:showCloseIcon="true">
<image class="popImg" :src="imageUrl+imgadres1"></image>
</wybPopup>
</wybPopup> -->
<Postion></Postion>
</view>
</template>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -310,6 +310,10 @@ $uni-font-size-paragraph:30upx;
background: linear-gradient(to bottom, #3da7e7, #6fbdee);
}
.backcorlf5{
background: linear-gradient(to bottom, #3267f6, #f5f5f5);
}
.backcorf06{
background-color: #0083f5;
}
@ -591,6 +595,11 @@ $uni-font-size-paragraph:30upx;
height: 25px;
}
.height25l {
height: 25px;
line-height: 25px;
}
.height50 {
height: 50px;

Loading…
Cancel
Save