yangjie
/
high-unionPay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.修改充值话费话语

Browse Source 
2.新增积分充值
3.银联支付修改为积分支付
master
杨杰 3 years ago
parent 8866ea3313
commit 7cef51200c
11 changed files with 1297 additions and 753 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 484
      high-unionPay/components/QS-tabs/QS-tabs.vue
  2. 2
      high-unionPay/pages/goods/externalCoupon/externalCoupon.vue
  3. 2
      high-unionPay/pages/goods/goods.vue
  4. 75
      high-unionPay/pages/order/confirmation.vue
  5. 7
      high-unionPay/pages/tabBar/home/home.vue
  6. 53
      high-unionPay/pages/tabBar/user/user.vue
  7. 684
      high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue
  8. 692
      high-unionPay/pages/user/deposit/deposit.vue
  9. 46
      high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue
  10. BIN
      high-unionPay/static/img/unionimg/upay3.jpg
  11. 5
      high-unionPay/uni.scss

484
high-unionPay/components/QS-tabs/QS-tabs.vue
Unescape View File

@ -0,0 +1,484 @@
<template>
<view class="QS-tabs" :style="{
'z-index': zIndex,
'font-size': getFontSize + 'rpx',
'background-color': getBgColor,
'transition-duration': getDuration + 's'
}">
<scroll-view scroll-x class="QS-tabs-scroll" :scroll-left="left" scroll-with-animation :style="{
'z-index': (Number(zIndex) + 1)
}">
<view class="QS-tabs-scroll-box">
<!-- 循环tabs -->
<view class="QS-tabs-scroll-item" :style="{
'height':'100rpx',
'line-height': getHeight + 'rpx',
'min-width': getWidth + 'rpx',
'padding': '0 ' + space + 'rpx',
'color': index===getCurrent?getActiveColor:getDefaultColor,
'font-weight': activeBold&&index===getCurrent?'bold':'',
'transition-duration': getDuration + 's',
'z-index': (Number(zIndex) + 2)
}"
v-for="(item, index) in getTabs" :key="index" @tap="emit(index)" :id="preId + index">
<!-- line1 -->
<view v-if="animationMode==='line1'" class="boxStyle" :style="getDurationStyle +( index===getCurrent?getActiveStyle:getDefaultStyle)"></view>
{{item.name || item}}
</view>
<!-- itemBackground -->
<view v-if="hasItemBackground" class="itemBackgroundBox" :style="{
'height': getHeight + 'rpx',
'width': (isLine3&&tabsInfo[animationFinishCurrent]?tabsInfo[animationFinishCurrent].width:tabsInfo[getCurrent].width) + 'px',
'z-index': Number(zIndex) + 1,
'transition-duration': getDuration + 's',
'left': (tabsInfo[getCurrent]?tabsInfo[getCurrent].left:0) + 'px'
}">
<view class="itemBackground" :style="'transition-duration:' + getDuration + 's;' +
'background-color:' + getItemBackgroundColor + ';' +
'box-shadow: 0 0 5rpx 5rpx ' + getItemBackgroundColor + ';' +
itemBackgroundStyle + ';'" />
</view>
<!-- line2 -->
<view v-if="animationMode==='line2'" class="boxStyle2" :style="getLinezIndex + getDurationStyle +
'width:' + lW + 'px;' +
'background-color:' + (lineColor||getActiveColor) + ';' +
line2Style + ';' +
'left:' + line2Dx + 'px;'" />
<view v-if="animationMode==='line3'" class="boxStyle2" :style="getLinezIndex +
'width:' + lW + 'px;' +
'background-color:' + (lineColor||getActiveColor) + ';' +
line2Style + ';' +
'left:' + getLine3Dx + 'px'" />
</view>
</scroll-view>
</view>
</template>
<script>
const {
windowWidth
} = uni.getSystemInfoSync();
const preId = 'QSTabsID_';
export default {
props: {
tabs: { //需循环的标签列表
type: Array,
default () {
return [];
}
},
current: { //当前所在滑块的 index
type: Number,
default: 0
},
height: { //QS-tabs的高度和行高
type: [String, Number],
default: 80
},
minWidth: { //单个tab的最小宽度 //v1.4修改
type: [String, Number],
default: 250
},
fontSize: { //字体大小
type: [String, Number],
default: 30
},
duration: { //过渡动画时长, 单位 s
type: [String, Number],
default: .5
},
activeColor: { //选中项的主题颜色
type: String,
default: '#33cc33'
},
defaultColor: { //未选中项的主题颜色
type: String,
default: '#888'
},
animationLineWidth: { //动画线条的宽度
type: [String, Number],
default: 20
},
line2Style: { //line2线条的样式
type: String,
default: 'height: 8rpx;border-radius: 4rpx;'
},
animationMode: { //动画类型
type: String,
default: 'line1'
},
autoCenter: { //是否自动滚动至中心目标
type: Boolean,
default: true
},
autoCenterMode: { //滚动至中心目标类型
type: String,
default: 'component'
},
activeStyle: { //line1模式选中项的样式
type: String,
default: 'bottom:0;left:50%;transform: translate(-50%,-100%);height: 8rpx;border-radius:4rpx;'
},
defaultStyle: { //line1模式未选中项的样式
type: String,
default: 'bottom:0;left:50%;transform: translate(-50%,-100%);height: 8rpx;border-radius:4rpx;'
},
backgroundColor: { //统一背景颜色
type: String,
default: 'rgba(255,255,255,0)'
},
hasItemBackground: { //是否开启背景追光
type: Boolean,
default: false
},
itemBackgroundColor: { //统一追光背景颜色
type: String,
default: 'rgba(255,255,255,0)'
},
itemBackgroundStyle: { //追光样式
type: String,
default: ''
},
zIndex: { //css的z-index属性值
type: [String, Number],
default: 99
},
swiperWidth: { //line3生效, 外部swiper的宽度, 单位rpx
type: [String, Number],
default: 750
},
space: { //tab间距
type: [String, Number],
default: '0'
},
activeBold: { //当前tab字体是否加粗
type: Boolean,
default: true
},
lineColor: { //line颜色
type: String,
default: ''
}
},
computed: {
isLine3() {
return this.animationMode === 'line3';
},
getCurrent() {
const current = Number(this.current);
if (current > (this.getTabs.length - 1)) {
return (this.getTabs.length - 1)
}
return current;
},
getTabs() {
return this.tabs;
},
getHeight() {
return Number(this.height);
},
getWidth() {
return Number(this.minWidth);
},
getFontSize() {
return this.fontSize;
},
getDuration() {
return Number(this.duration);
},
getBgColor() {
const defaultColor = this.backgroundColor || 'rgba(255,255,255,0)';
if (this.getTabs[this.getCurrent] instanceof Object) {
return this.getTabs[this.getCurrent].backgroundColor || defaultColor;
} else {
return defaultColor;
}
},
getItemBackgroundColor() {
const defaultColor = this.itemBackgroundColor || 'rgba(255,255,255,0)';
if (this.getTabs[this.getCurrent] instanceof Object) {
return this.getTabs[this.getCurrent].itemBackgroundColor || defaultColor;
} else {
return defaultColor;
}
},
getDurationStyle() {
return `transition-duration: ${this.getDuration}s;`
},
getActiveColor() {
let activeColor;
if (this.getTabs[this.getCurrent] instanceof Object) {
if (this.getTabs[this.getCurrent].activeColor) {
activeColor = this.getTabs[this.getCurrent].activeColor;
} else {
activeColor = this.activeColor;
}
} else {
activeColor = this.activeColor;
}
return activeColor;
},
getDefaultColor() {
let defaultColor;
if (this.getTabs[this.getCurrent] instanceof Object) {
if (this.getTabs[this.getCurrent].defaultColor) {
defaultColor = this.getTabs[this.getCurrent].defaultColor;
} else {
defaultColor = this.defaultColor;
}
} else {
defaultColor = this.defaultColor;
}
return defaultColor;
},
getActiveStyle() {
return `width:${this.animationLineWidth}%;background-color:${this.getActiveColor};${this.activeStyle};`;
},
getDefaultStyle() {
return `width:0;background-color:${this.getActiveColor};${this.defaultStyle};`;
},
getLinezIndexNum() {
return Number(this.zIndex) + 2;
},
getLinezIndex() {
return `z-index: ${this.getLinezIndexNum};`;
},
getLine3Dx() {
return Number(this.line3Dx) + Number(this.line3AddDx);
}
},
watch: {
current(n, o) {
this.change(n);
},
tabs() {
this.init();
}
},
data() {
return {
left: 0,
tabsInfo: [],
line2Width: Number(this.animationLineWidth),
setTimeoutFc: null,
componentsWidth: 0,
animationFinishCurrent: this.current,
pxWidth: 0,
lW: 0,
sW: 0,
preId,
line3Dx: 0,
line3AddDx: 0,
line2Dx: 0
}
},
// #ifndef H5
onReady() {
this.init();
},
// #endif
// #ifdef H5
mounted() {
this.init();
},
// #endif
methods: {
init() {
this.countPx();
let view = uni.createSelectorQuery().in(this);
for (let i = 0; i < this.tabs.length; i++) {
view.select('#' + preId + i).boundingClientRect();
}
view.exec((res) => {
const arr = [];
for (let i = 0; i < res.length; i++) {
arr.push(res[i]);
}
this.tabsInfo = arr;
this.countLine2Dx();
this.countLine3Dx();
let _this = this;
_this.getQuery(() => {
_this.countScrollX();
});
})
},
countLine2Dx() {
if (this.animationMode === 'line2') {
const tab = this.tabsInfo[this.getCurrent];
if(tab) this.line2Dx = tab.left + tab.width / 2 - this.lW / 2;
}
},
countLine3Dx() {
if (this.animationMode === 'line3') {
const tab = this.tabsInfo[this.animationFinishCurrent];
if(tab) this.line3Dx = tab.left + tab.width / 2 - this.lW / 2;
}
},
countPx() {
const w = uni.upx2px(this.getWidth);
this.pxWidth = w;
this.lW = (w * (Number(this.animationLineWidth) / 100))+72.5;
this.sW = uni.upx2px(Number(this.swiperWidth));
},
emit(index) {
this.$emit('change', index);
},
change() {
this.countScrollX();
if (this.animationMode === 'line2') {
this.line2Width = 2;
if (this.setTimeoutFc) clearTimeout(this.setTimeoutFc);
this.setTimeoutFc = setTimeout(() => {
this.line2Width = this.animationLineWidth;
}, this.getDuration * 1000 * 3 / 5);
this.countLine2Dx();
}
},
getQuery(cb) {
try {
let view = uni.createSelectorQuery().in(this).select('.QS-tabs');
view.fields({
size: true
}, data => {
if (data) {
this.componentsWidth = data.width;
if (cb && typeof cb === 'function') cb(data);
} else {
this.retryGetQuery(cb);
}
}).exec();
} catch (e) {
//TODO handle the exception
this.componentsWidth = windowWidth;
}
},
retryGetQuery(cb) {
try {
let view = uni.createSelectorQuery().select('.QS-tabs');
view.fields({
size: true
}, data => {
if (data) {
this.componentsWidth = data.width;
} else {
this.componentsWidth = windowWidth;
}
if (cb && typeof cb === 'function') cb(data);
}).exec();
} catch (e) {
//TODO handle the exception
this.componentsWidth = windowWidth;
}
},
countScrollX() {
if (this.autoCenter) {
let tab;
if(this.isLine3) {
tab = this.tabsInfo[this.animationFinishCurrent];
}else{
tab = this.tabsInfo[this.getCurrent];
}
if(tab) {
let tabCenter = tab.left + tab.width/2;
let fatherWidth;
if (this.autoCenterMode === 'window') {
fatherWidth = windowWidth;
} else {
fatherWidth = this.componentsWidth;
}
this.left = tabCenter - fatherWidth / 2;
}
}
},
setDx(dx) {
const tab = this.tabsInfo[dx>0?(this.animationFinishCurrent + 1):(this.animationFinishCurrent - 1)];
this.line3AddDx = dx / this.sW * (tab?tab.width:this.pxWidth);
},
setFinishCurrent(current) {
this.line3AddDx = 0;
this.animationFinishCurrent = current;
this.countLine3Dx();
}
}
}
</script>
<style scoped>
view,
scroll-view {
box-sizing: border-box;
}
.QS-tabs {
width: 100%;
transition-property: background-color, color;
}
.QS-tabs::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
.QS-tabs-scroll {
width: 100%;
white-space: nowrap;
position: relative;
}
.QS-tabs-scroll-box {
position: relative;
display: flex;
white-space: nowrap !important;
display: block !important;
}
.QS-tabs-scroll-item {
position: relative;
display: inline-block;
text-align: center;
transition-property: background-color, color, font-weight;
}
.content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.boxStyle {
pointer-events: none;
position: absolute;
transition-property: all;
}
.boxStyle2 {
pointer-events: none;
position: absolute;
bottom: 0;
transition-property: all;
transform: translateY(-100%);
}
.itemBackgroundBox {
pointer-events: none;
position: absolute;
top: 0;
transition-property: left, background-color;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.itemBackground {
height: 100%;
width: 100%;
transition-property: all;
}
</style>

2
high-unionPay/pages/goods/externalCoupon/externalCoupon.vue
Unescape View File

@ -299,7 +299,7 @@
toGoods(e) { toGoods(e) {
if (app.globalData.userInfo) { if (app.globalData.userInfo) {
uni.navigateTo({ uni.navigateTo({
url: '../../order/confirmation?id=' + e url: '../../order/confirmation?id=' + e +'&typeid=2'
}) })
} else { } else {
uni.showToast({ uni.showToast({

2
high-unionPay/pages/goods/goods.vue
Unescape View File

@ -319,7 +319,7 @@
duration: 2000, duration: 2000,
success() { success() {
uni.navigateTo({ uni.navigateTo({
url: '../order/confirmation?id=' + that.goodsData[0].id url: '../order/confirmation?id=' + that.goodsData[0].id+'&typeid=1'
}) })
} }
}) })

75
high-unionPay/pages/order/confirmation.vue
Unescape View File

@ -90,12 +90,12 @@
<view class="width94 comorder mart10"> <view class="width94 comorder mart10">
<view class="height50 width100 backcorfff"> <view class="height50 width100 backcorfff">
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> <view class="width100 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
支付方式 支付方式<text class="jfrecharge" @click="jumpdeposits" v-if="typeId == 1">积分充值</text>
</view> </view>
</view> </view>
<view class="width94 line1 mart5 marb5"></view> <view class="width94 line1 mart5 marb5" v-if="typeId == 1"></view>
<!-- <view class="height50 width100 backcorfff" @tap="paytype='jinbi'"> <view class="height50 width100 backcorfff" @tap="paytype='jinbi'" v-if="typeId == 1">
<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;"> <view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;">
积分支付<text class="font14 fcor666 margle">可用积分: {{user.gold}}</text> 积分支付<text class="font14 fcor666 margle">可用积分: {{user.gold}}</text>
</view> </view>
@ -104,8 +104,8 @@
<radio :checked="paytype=='jinbi'" color="#0083f5" /> <radio :checked="paytype=='jinbi'" color="#0083f5" />
</view> </view>
</view> </view>
<view class="width94 line1 mart5 marb5"></view> --> <view class="width94 line1 mart5 marb5" v-if="typeId == 2"></view>
<view class="height50 width100 backcorfff" @tap="paytype='unionPay'"> <view class="height50 width100 backcorfff" @tap="paytype='unionPay'" v-if="typeId == 2">
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;"> <view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
银联支付 银联支付
</view> </view>
@ -212,15 +212,17 @@
PaymentPassword: '', PaymentPassword: '',
orderId: '', orderId: '',
jumpType: '', jumpType: '',
tongCardPrice: 0, tongCardPrice: 0,
storeId: '', storeId: '',
isDiscont: false, isDiscont: false,
coupondiscountid:'' coupondiscountid: '',
typeId:''
}; };
}, },
onLoad(option) { onLoad(option) {
this.couponId = option.id; this.couponId = option.id;
this.typeId = option.typeid;
this.getCouponById(); this.getCouponById();
}, },
onShow() { onShow() {
@ -297,14 +299,14 @@
radioChanges(item) { radioChanges(item) {
if (this.memDiscountId == item.highDiscount.id) { // 如果已经选中，则取消选中 if (this.memDiscountId == item.highDiscount.id) { // 如果已经选中，则取消选中
this.memDiscountId = ''; this.memDiscountId = '';
this.coupondiscountid = ''; this.coupondiscountid = '';
this.paytheprice = this.couponList.discountPrice; this.paytheprice = this.couponList.discountPrice;
this.deductionPrice = '0.00'; this.deductionPrice = '0.00';
this.isDiscont = false; this.isDiscont = false;
} else { // 否则进行选中赋值 } else { // 否则进行选中赋值
this.isDiscont = true; this.isDiscont = true;
this.memDiscountId = item.highDiscount.id; this.memDiscountId = item.highDiscount.id;
this.coupondiscountid = item.id; this.coupondiscountid = item.id;
if (item.highDiscount.discountType == 1) { if (item.highDiscount.discountType == 1) {
//满减价格 //满减价格
@ -379,9 +381,9 @@
} }
uni.showLoading({ uni.showLoading({
title: '提交订单中...' title: '提交订单中...'
}) })
if (this.couponList.reserveStatus) { if (this.couponList.reserveStatus) {
this.storeId = app.globalData.storeid this.storeId = app.globalData.storeid
} }
let goods = { let goods = {
"memDiscountId": this.coupondiscountid, "memDiscountId": this.coupondiscountid,
@ -389,7 +391,7 @@
"highChildOrderList": [{ "highChildOrderList": [{
"goodsType": 1, "goodsType": 1,
"goodsId": this.couponId, "goodsId": this.couponId,
"saleCount": 1, "saleCount": 1,
"storeId": this.storeId "storeId": this.storeId
}] }]
} }
@ -431,6 +433,21 @@
orderToPay(item) { orderToPay(item) {
let that = this; let that = this;
if (that.paytype == 'jinbi') { if (that.paytype == 'jinbi') {
if (that.user.gold < that.paytheprice * 100) {
uni.showToast({
icon: 'none',
title: '积分不足',
duration: 2000,
success() {
setTimeout(() => {
uni.navigateTo({
url: '../user/deposit/deposit'
})
}, 1000)
}
});
return;
}
if (!that.user.isSetPayPwd) { if (!that.user.isSetPayPwd) {
uni.navigateTo({ uni.navigateTo({
url: '../login/updatePas/updatePas' url: '../login/updatePas/updatePas'
@ -474,8 +491,8 @@
success: function(res) { success: function(res) {
uni.showToast({ uni.showToast({
title: '支付成功' title: '支付成功'
}) })
app.globalData.storeid = ''; app.globalData.storeid = '';
app.globalData.storename = ''; app.globalData.storename = '';
uni.reLaunch({ uni.reLaunch({
url: '../pay/success/success?id=' + that.couponId url: '../pay/success/success?id=' + that.couponId
@ -530,6 +547,12 @@
icon: 'none' icon: 'none'
}) })
}) })
},
//跳转积分充值
jumpdeposits() {
uni.navigateTo({
url: '../user/deposit/deposit'
})
} }
} }
} }
@ -551,6 +574,18 @@
margin-top: 30rpx; margin-top: 30rpx;
} }
.jfrecharge {
background-color: #0083f5;
padding: 5px 20rpx;
color: #fff;
margin-left: 50%;
justify-content: center;
align-items: center;
font-size: 30rpx;
border-radius: 40rpx;
}
.goodsimg { .goodsimg {
align-items: center; align-items: center;
display: flex; display: flex;
@ -715,7 +750,7 @@
align-items: center; align-items: center;
.sum { .sum {
width: 50%; width: 68%;
font-size: 18px; font-size: 18px;
margin-right: 10upx; margin-right: 10upx;
display: flex; display: flex;
@ -728,7 +763,7 @@
} }
.btn { .btn {
padding: 0 50rpx; padding: 0 45rpx;
height: 80rpx; height: 80rpx;
background-color: #0083f5; background-color: #0083f5;
color: #fff; color: #fff;

7
high-unionPay/pages/tabBar/home/home.vue
Unescape View File

@ -37,7 +37,8 @@
<image class="img" :src="imageUrl+pro.couponImg" mode="aspectFit"> <image class="img" :src="imageUrl+pro.couponImg" mode="aspectFit">
</image> </image>
<view class="fotlt fcor333 font14 text1 mart10">{{pro.couponName}}</view> <view class="fotlt fcor333 font14 text1 mart10">{{pro.couponName}}</view>
<view class="subject fotct mart5">￥{{pro.discountPrice}}</view> <view class="subject fotct mart5"><image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
</image>{{pro.discountPrice *100}}</view>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -117,7 +118,7 @@
'title': '话费充值', 'title': '话费充值',
'imgData': 'phonePay1.png' 'imgData': 'phonePay1.png'
}, { }, {
'title': '石化码商', 'title': '积分专区',
'imgData': 'petCoder.png' 'imgData': 'petCoder.png'
}, },
], ],
@ -431,7 +432,7 @@
}) })
return; return;
} }
if (item.title == '石化码商') { if (item.title == '积分专区') {
uni.navigateTo({ uni.navigateTo({
url: '/pages/goods/goods-list/goods-list?id=3' url: '/pages/goods/goods-list/goods-list?id=3'
}) })

53
high-unionPay/pages/tabBar/user/user.vue
Unescape View File

@ -14,27 +14,27 @@
<view class="right"> <view class="right">
<view class="username" v-if="!user.name" @click="jumplogin">请授权登录</view> <view class="username" v-if="!user.name" @click="jumplogin">请授权登录</view>
<view class="username" v-else>{{user.name}}</view> <view class="username" v-else>{{user.name}}</view>
<!-- <view class="font14 fcorfff" v-if="!user.gold">积分: 0</view> --> <view class="font14 fcorfff" v-if="!user.gold">积分: 0</view>
<!-- <view class="font14 fcorfff" v-else>积分: {{user.gold}} 个</view> --> <view class="font14 fcorfff" v-else>积分: {{user.gold}} 个</view>
<!-- <view class="signature" @tap="toSetting">{{user.signature}}</view> --> <!-- <view class="signature" @tap="toSetting">{{user.signature}}</view> -->
</view> </view>
<!-- 二维码按钮 --> <!-- 二维码按钮 -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<button class="erweima fotct aliitem font14" v-if="user.phone == null" open-type="getPhoneNumber" <button class="erweima fotct aliitem font14" v-if="user.phone == null" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"> @getphonenumber="getPhoneNumber">
<image src="../../../static/img/jingbi.png"></image> 充值金额 <image src="../../../static/img/jingbi.png"></image> 充值积分
</button> </button>
<button class="erweima fotct aliitem font14" v-else @click="toDeposit"> <button class="erweima fotct aliitem font14" v-else @click="toDeposit">
<image src="../../../static/img/jingbi.png"></image> 充值金额 <image src="../../../static/img/jingbi.png"></image> 充值积分
</button> </button>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<!-- <button class="erweima fotct aliitem font14" v-if="user.phone == null" @click="jumpH5Bding"> <button class="erweima fotct aliitem font14" v-if="user.phone == null" @click="jumplogin">
<image src="../../../static/img/jingbi.png"></image> 充值金额 <image src="../../../static/img/jingbi.png"></image> 充值积分
</button> </button>
<button class="erweima fotct aliitem font14" v-else @click="toDeposit"> <button class="erweima fotct aliitem font14" v-else @click="toDeposit">
<image src="../../../static/img/jingbi.png"></image> 充值金额 <image src="../../../static/img/jingbi.png"></image> 充值积分
</button> --> </button>
<!-- #endif --> <!-- #endif -->
</view> </view>
<!-- 订单-余额 --> <!-- 订单-余额 -->
@ -75,13 +75,13 @@
<uni-badge text="1" type="error" /> <uni-badge text="1" type="error" />
</view> --> </view> -->
<uni-badge style="width: 20px;position: absolute; right: 76%;" v-if="row.text == '我的卡券' && textnum " <uni-badge style="width: 20px;position: absolute; right: 30%;" v-if="row.text == '我的卡券' && textnum "
:text="textnum" type="error" size="normal"></uni-badge> :text="textnum" type="error" size="normal"></uni-badge>
<uni-badge style="width: 20px;position: absolute; right: 53%;" <uni-badge style="width: 20px;position: absolute; right: 7%;"
v-if="row.text == '我的优惠券' && textSend " :text="textSend" type="error" size="normal"></uni-badge> v-if="row.text == '我的优惠券' && textSend " :text="textSend" type="error" size="normal"></uni-badge>
<view class="img"> <view class="img">
<image :src="imagewxUrl+row.img"></image> <image :src="imagewxUrl+row.img"></image>
</view> </view>
<view class="text">{{row.text}}</view> <view class="text">{{row.text}}</view>
</view> </view>
</view> </view>
@ -122,7 +122,6 @@
</view> </view>
<!-- 占位 --> <!-- 占位 -->
<view class="place-bottom"></view> <view class="place-bottom"></view>
<!-- <authorize></authorize> -->
</view> </view>
</template> </template>
<script> <script>
@ -130,12 +129,10 @@
GetPhoneNumber, GetPhoneNumber,
findUser findUser
} from "../../../Utils/Api.js"; } from "../../../Utils/Api.js";
// import authorize from '../../../components/Authorize';
import uniBadge from "../../../components/uni-badge/components/uni-badge/uni-badge.vue"; import uniBadge from "../../../components/uni-badge/components/uni-badge/uni-badge.vue";
let app = getApp() let app = getApp()
export default { export default {
components: { components: {
// authorize,
uniBadge uniBadge
}, },
data() { data() {
@ -193,16 +190,16 @@
], ],
// 工具栏列表 // 工具栏列表
mytoolbarList: [ mytoolbarList: [
// { {
// url: '/pages/goods/recording/recording?id=1', url: '/pages/goods/recording/recording?id=1',
// text: '充值记录', text: '充值记录',
// img: 'user/mingxi.png' img: 'user/mingxi.png'
// }, },
// { {
// url: '/pages/goods/recording/recording?id=2', url: '/pages/goods/recording/recording?id=2',
// text: '消费记录', text: '消费记录',
// img: 'user/quan.png' img: 'user/quan.png'
// }, },
{ {
url: '/pages/user/mineCoupons/mineCoupons', url: '/pages/user/mineCoupons/mineCoupons',
text: '我的卡券', text: '我的卡券',

684
high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue
Unescape View File

@ -1,314 +1,392 @@
<template> <template>
<view> <view>
<view class="width100 height100p backcorf06"> <view class="width100 height100p backcorf06">
<view class="block"> <view class="block">
<view class="content height60"> <view class="content height60">
<input type="number" class="my flleft font18 fcorfff" placeholder="请输入充值号码" v-model="inputPhone" /> <input type="number" class="my flleft font18 fcorfff" 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>
<view class="list">
<view class="box" :class="{'on':item.realPrice == inputAmount}" v-for="(item,index) in amountList"
:key="index" @click="select(item)">
<view class="heTitle">{{item.price}}元</view>
<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
</view>
</view>
<view class="mart5 width90 font18 fcor333 fontwig6">
充值说明：
</view>
<view v-if="current == 0">
<view class="mart5 width80 font14 fcoreb5 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">1:</view>
<view style="margin-left: 5%;">此业务为话费慢充。日常72小时内到账，如遇月初、月末运营商高峰期或系统更新，到账时间会有一定延迟，敬请谅解。充值失败后系统会自动为您退款至原账户。急单请选择“6小时到账”充值端口，感谢您的支持！
</view> </view>
<view class="line1 width100 backcorfff"></view>
</view> </view>
</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view class="width90 font16 fcor333 fontwig6 mart40"> <view style="width: 5%;" class="flleft">2:</view>
选择金额 <view style="margin-left: 5%;">慢充话费与营业厅充值一样，只是到账时间稍长。充值过程中可能出现分批到账的情况，但是总金额不会少，请耐心等待。</view>
</view> </view>
<view class="list"> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view class="box" :class="{'on':item.realPrice == inputAmount}" v-for="(item,index) in amountList" :key="index" <view style="width: 5%;" class="flleft">3:</view>
@click="select(item)"> <view style="margin-left: 5%;">
<view class="heTitle">{{item.price}}元</view> 目前仅支持(移动、联通、电信三网号段)，运营商黑名单号码(长期欠费或非实名制认证)携号转网空号、虚拟卡(如165167170171162等等虚拟号段)副卡号码或做过某些特殊套餐绑定的卡暂不支持充值，请勿下单。
<view class="font13 fcor999" v-if="item.status == 2">已售空</view> </view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">4:</view>
<view style="margin-left: 5%;">停机号码需要额外补缴欠费后，慢充话费才能到账。<text
class="fcoreb5">此服务为虚拟充值类服务，无特殊情况不支持退款，下单前请确认充值的号码无误。</text></view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">5:</view>
<view style="margin-left: 5%;">空号、错号充值后不支持退款，请您务必核对确认号码无误后再进行充值。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。
</view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">6:</view>
<view style="margin-left: 5%;"><text
class="fcoreb5">本充值业务不提供发票</text>。如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。</view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">7:</view>
<view style="margin-left: 5%;">如遇系统维护充值失败，将72小时后原路退款到付款账户。 </view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6 marb40" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">8:</view>
<view style="margin-left: 5%;">请登录所属运营商app（手机营业厅）查看充值号码的到账情况，如金额有出入或未到账，请截图充值记录明细反馈给客服。录明细反馈给客服。</view>
</view> </view>
</view> </view>
<view class="mart5 width90 font18 fcor333 fontwig6"> <view v-if="current == 1">
话费充值温馨提示： <view class="mart5 width80 font14 fcoreb5 fontwig6" style="list-style-type: decimal;">
</view> <view style="width: 5%;" class="flleft">1:</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="margin-left: 5%;">充值后6小时内到账，请耐心等待；如遇月初、月末运营商充值压力大，充值失败后，系统会为您自动再提交一次，如二次充值仍然失败，系统将会自动为您退款至原账户，请悉知。
<view style="width: 5%;" class="flleft">1:</view> </view>
<view style="margin-left: 5%;">慢充话费与营业厅充值一样，只是到账时间稍长。充值过程中可能出现分批到账的情况，但是总金额不会少，请耐心等待。</view> </view>
</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="width: 5%;" class="flleft">2:</view>
<view style="width: 5%;" class="flleft">2:</view> <view style="margin-left: 5%;">
<view style="margin-left: 5%;">此业务为话费慢充，日常72小时内到账，如遇月初、月末高峰期或系统更新到账时间会有一定延迟，敬请谅解！急单勿拍！</view> 目前仅支持(移动、联通、电信三网号段)，运营商黑名单号码(长期欠费或非实名制认证)携号转网空号、虚拟卡(如165167170171162等等虚拟号段)副卡号码或做过某些特殊套餐绑定的卡暂不支持充值，请勿下单。
</view> </view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> </view>
<view style="width: 5%;" class="flleft">3:</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="margin-left: 5%;">目前仅支持(移动、联通、电信三网号段)， 运营商黑名单号码(长期欠费或非实名制认证)、携号转网，空号、虚拟卡（如165.167.170.171.162等等虚拟号段）、副卡号码或做过某些特殊套餐绑定的卡暂不支持充值，请勿下单。</view> <view style="width: 5%;" class="flleft">3:</view>
</view> <view style="margin-left: 5%;">停机号码需要额外补缴欠费后，慢充话费才能到账。此服务为虚拟充值类服务，无特殊情况不支持退款，下单前请确认充值的号码无误。</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> </view>
<view style="width: 5%;" class="flleft">4:</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="margin-left: 5%;">停机号码需要额外补缴欠费后，慢充话费才能到账。<text class="fcoreb5">此服务为虚拟充值类服务，无特殊情况不支持退款，下单前请确认充值的号码无误。</text></view> <view style="width: 5%;" class="flleft">4:</view>
</view> <view style="margin-left: 5%;">空号、错号充值后不支持退款，请您务必核对确认号码无误后再进行充值。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> </view>
<view style="width: 5%;" class="flleft">5:</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="margin-left: 5%;">空号、错号充值后不支持退款，请您务必核对确认号码无误后再进行充值。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。</view> <view style="width: 5%;" class="flleft">5:</view>
</view> <view style="margin-left: 5%;"><text
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> class="fcoreb5">本充值业务不提供发票。</text>如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。</view>
<view style="width: 5%;" class="flleft">6:</view> </view>
<view style="margin-left: 5%;"><text class="fcoreb5">本充值业务不提供发票</text>。如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
</view> <view style="width: 5%;" class="flleft">6:</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;"> <view style="margin-left: 5%;">如遇系统维护充值失败，将72小时后原路退款到付款账户。
<view style="width: 5%;" class="flleft">7:</view> </view>
<view style="margin-left: 5%;">如遇系统维护充值失败，将72小时后原路退款到付款账户。 </view> </view>
</view> <view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view class="mart5 width80 font14 fcor999 fontwig6 marb40" style="list-style-type: decimal;"> <view style="width: 5%;" class="flleft">7:</view>
<view style="width: 5%;" class="flleft">8:</view> <view style="margin-left: 5%;">请登录所属运营商app(手机营业厅)查看充值号码的到账情况，如金额有出入或未到账，请截图充值记录明细反馈给客服。录明细反馈给客服。</view>
<view style="margin-left: 5%;">请登录所属运营商app（手机营业厅）查看充值号码的到账情况，如金额有出入或未到账，请截图充值记录明细反馈给客服。</view> </view>
</view> </view>
<view class="height100p"></view> <view class="height100p"></view>
<view class="bombtn width94 font16"> <view class="bombtn width94 font16">
<view class="width50 flleft payem">应付: {{inputAmount}}元</view> <view class="width50 flleft payem">应付: {{inputAmount}}元</view>
<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view> <view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
let app = getApp(); let app = getApp();
import { import {
getListOutRechargePrice, getListOutRechargePrice,
addOrderPay, addOrderPay,
orderToUnionPayphone orderToUnionPayphone
} from '../../../Utils/Api.js'; } from '../../../Utils/Api.js';
export default { import QSTabs from '../../../components/QS-tabs/QS-tabs.vue';
data() { export default {
return { components: {
typeId: '', QSTabs
inputAmountId: '', },
inputAmount: '', data() {
orderPrice:'', return {
inputPhone: '', typeId: '',
amoutType: '', inputAmountId: '',
codesVlues: '', inputAmount: '',
amountList: [], orderPrice: '',
amoutstatus:'' inputPhone: '',
} amoutType: '',
}, codesVlues: '',
onLoad(options) { amountList: [],
this.typeId = options.id; amoutstatus: '',
if (this.typeId == 1) { tabs: ["72小时到账", "6小时到账"], //切换操作
uni.setNavigationBarTitle({ current: 0, //默认
title: '中国移动' swiperCurrent: 2
}) }
this.amoutType = 2; },
this.getListOutRechargePrice(2); onLoad(options) {
return; this.typeId = options.id;
} if (this.typeId == 1) {
if (this.typeId == 2) { uni.setNavigationBarTitle({
uni.setNavigationBarTitle({ title: '中国移动'
title: '中国电信' })
}) this.amoutType = 2;
this.amoutType = 1; this.getListOutRechargePrice(2);
this.getListOutRechargePrice(1); return;
return; }
} if (this.typeId == 2) {
if (this.typeId == 3) { uni.setNavigationBarTitle({
uni.setNavigationBarTitle({ title: '中国电信'
title: '中国联通' })
}) this.amoutType = 1;
this.amoutType = 3; this.getListOutRechargePrice(1);
this.getListOutRechargePrice(3); return;
return; }
} if (this.typeId == 3) {
uni.setNavigationBarTitle({
title: '中国联通'
}, })
methods: { this.amoutType = 3;
select(amoutinfos) { this.getListOutRechargePrice(3);
this.inputAmount = amoutinfos.realPrice; return;
this.orderPrice = amoutinfos.price; }
this.inputAmountId = amoutinfos.id;
this.amoutstatus = amoutinfos.status;
}, },
methods: {
/** select(amoutinfos) {
* 查询价格 this.inputAmount = amoutinfos.realPrice;
*/ this.orderPrice = amoutinfos.price;
getListOutRechargePrice(item) { this.inputAmountId = amoutinfos.id;
uni.showLoading({ this.amoutstatus = amoutinfos.status;
title: '加载中...' },
}) //筛选
let params = { change(index) {
type: item, this.$refs.tabs.setFinishCurrent(index);
regionId: app.globalData.cityId, this.current = index;
showType: 3 this.inputAmount = '';
} this.amoutstatus = '';
getListOutRechargePrice(params).then(res => { if (index == 0) {
uni.hideLoading() this.swiperCurrent = 2;
if (res.return_code == '000000') { this.getListOutRechargePrice(this.amoutType);
} else {
this.swiperCurrent = 1;
this.getListOutRechargePrice(this.amoutType);
}
},
/**
* 查询价格
*/
getListOutRechargePrice(item) {
uni.showLoading({
title: '加载中...'
})
let params = {
type: item,
regionId: app.globalData.cityId,
showType: 3,
rechargeType: this.swiperCurrent
}
getListOutRechargePrice(params).then(res => {
uni.hideLoading()
if (res.return_code == '000000' && res.return_data) {
this.amountList = res.return_data; this.amountList = res.return_data;
} } else {
}) this.amountList = [];
}, }
})
/** },
* 提交订单
*/ /**
addOrderPay() { * 提交订单
if(this.amoutstatus == 2){ */
uni.showToast({ addOrderPay() {
title: '当前面值已售空', if (this.amoutstatus == 2) {
duration:2000, uni.showToast({
icon: "none" title: '当前面值已售空',
}); duration: 2000,
return; icon: "none"
});
return;
}
if (this.inputPhone == '') {
uni.showToast({
title: '请输入充值号码',
icon: "none"
});
return;
} }
if (this.inputPhone == '') { if (this.inputPhone.length != 11) {
uni.showToast({ uni.showToast({
title: '请输入充值号码', title: '请输入正确充值号码',
icon: "none" icon: "none"
}); });
return; return;
} }
if (this.inputAmount == '') { if (this.inputAmount == '') {
uni.showToast({ uni.showToast({
title: '请选择价格', title: '请选择价格',
icon: "none" icon: "none"
}); });
return false; return false;
} }
let params = { let params = {
"orderPrice": this.orderPrice, "orderPrice": this.orderPrice,
"payPrice": this.inputAmount, "payPrice": this.inputAmount,
"rechargeContent": this.inputPhone, "rechargeContent": this.inputPhone,
"rechargeModel": this.amoutType, "rechargeModel": this.amoutType,
"agentKey": this.codesVlues, "agentKey": this.codesVlues,
"objectId": this.inputAmountId, "objectId": this.inputAmountId,
} }
uni.showLoading({ uni.showLoading({
title: '加载中...' title: '加载中...'
}) })
addOrderPay(params).then(res => { addOrderPay(params).then(res => {
uni.hideLoading() uni.hideLoading()
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.orderToUnionPayphone(res.return_data.id); this.orderToUnionPayphone(res.return_data.id);
} else { } else {
uni.showToast({ uni.showToast({
title: res.return_msg, title: res.return_msg,
icon: "none" icon: "none"
}) })
} }
}) })
}, },
//获取订单信息 //获取订单信息
orderToUnionPayphone(item) { orderToUnionPayphone(item) {
let params = { let params = {
"orderId" : item "orderId": item
} }
orderToUnionPayphone(params).then(res => { orderToUnionPayphone(params).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.uniontopay(res.return_data.prepayid); this.uniontopay(res.return_data.prepayid);
} else { } else {
uni.showToast({ uni.showToast({
title: res.return_msg, title: res.return_msg,
icon: 'none' icon: 'none'
}) })
} }
}) })
}, },
//银联支付 //银联支付
uniontopay(item) { uniontopay(item) {
let that = this; let that = this;
upsdk.pluginReady(function() { upsdk.pluginReady(function() {
upsdk.pay({ upsdk.pay({
tn: item, tn: item,
success: function(res) { success: function(res) {
uni.showToast({ uni.showToast({
title: '支付成功' title: '支付成功'
}) })
uni.reLaunch({ uni.reLaunch({
url: '/pages/tabBar/user/user' url: '/pages/tabBar/user/user'
}); });
}, },
fail: function(err) { fail: function(err) {
uni.showToast({ uni.showToast({
title: err.msg, title: err.msg,
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}) })
// 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。 // 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。
} }
}); });
}); });
}, },
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.block { .block {
width: 94%; width: 94%;
padding: 60upx 3%; padding: 60upx 3%;
.my { .my {
width: 80%; width: 80%;
height: 120upx; height: 120upx;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.uni-input-placeholder { .uni-input-placeholder {
color: #FFFFFF; color: #FFFFFF;
} }
} }
.list { .list {
width: 94%; width: 94%;
margin-left: 3%; margin-left: 3%;
display: flow-root; display: flow-root;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20upx 0; padding: 20upx 0;
.box { .box {
width: 30%; width: 30%;
margin-left: 1%; margin-left: 1%;
margin-right: 2%; margin-right: 2%;
margin-top: 20upx; margin-top: 20upx;
float: left; float: left;
height: 120upx; height: 120upx;
// line-height: 120upx; // line-height: 120upx;
display: inline-grid; display: inline-grid;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
box-shadow: 0upx 0upx 4upx #666666; box-shadow: 0upx 0upx 4upx #666666;
font-size: 36upx; font-size: 36upx;
color: #089bf5; color: #089bf5;
&.on { &.on {
background-color: #089bf5; background-color: #089bf5;
color: #ffffff; color: #ffffff;
} }
} }
.heTitle { .heTitle {
width: 100%; width: 100%;
font-size: 15px; font-size: 15px;
} }
} }
.bombtn { .bombtn {
position: fixed; position: fixed;
height: 45px; height: 45px;
bottom: 20px; bottom: 20px;
border-radius: 6px; border-radius: 6px;
.payem { .payem {
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
text-align: center; text-align: center;
background-color: #007AFF; background-color: #007AFF;
color: #FFFFFF; color: #FFFFFF;
border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px;
} }
.paybtn { .paybtn {
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
text-align: center; text-align: center;
background-color: #F8A628; background-color: #F8A628;
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
color: #FFFFFF; color: #FFFFFF;
} }
} }
</style> </style>

692
high-unionPay/pages/user/deposit/deposit.vue
Unescape View File

@ -1,398 +1,336 @@
<template> <template>
<view> <view>
<view class="block"> <view class="block">
<view class="content"> <view class="content">
<view class="my"> <view class="my">
我的账户余额： {{user.gold}} 个 ( 1:100) 我的账户余额： {{user.gold}} 个 ( 1:100)
</view> </view>
</view> </view>
</view> </view>
<view class="block"> <view class="block">
<view class="title"> <view class="title">
充值金额 充值金额
</view> </view>
<view class="content"> <view class="content">
<view class="amount"> <view class="amount">
<view class="list"> <view class="list">
<view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount)" <view class="box" v-for="(amount,index) in amountList" :key="index" @tap="select(amount)"
:class="{'on':amount == inputAmount}"> :class="{'on':amount == inputAmount}">
{{amount}}元 {{amount}}元
</view> </view>
</view> </view>
<view class="num"> <view class="num">
<view class="text"> <view class="text">
自定义充值金额 自定义充值金额
</view> </view>
<view class="input"> <view class="input">
<input type="number" v-model="inputAmount" /> <input type="number" v-model="inputAmount" />
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="block"> <view class="block">
<view class="title"> <view class="title">
选择支付方式 选择支付方式
</view> </view>
<view class="content"> <view class="content">
<view class="pay-list"> <view class="pay-list">
<!-- <view class="row" @tap="paytype='alipay'"> <view class="row" @tap="paytype='wxpay'">
<view class="left"> <view class="left">
<image src="/static/img/alipay.png"></image> <image mode="widthFix" style="border-radius: 50%;" src="../../../static/img/unionpay.png">
</view> </image>
<view class="center"> </view>
支付宝支付 <view class="center">
</view> 银联支付
<view class="right"> </view>
<radio :checked="paytype=='alipay'" color="#0083f5" /> <view class="right">
</view> <radio :checked="paytype=='wxpay'" color="#0083f5" />
</view> --> </view>
<view class="row" @tap="paytype='wxpay'"> </view>
<view class="left"> </view>
<image :src="imagewxUrl+imgadres"></image> </view>
</view> </view>
<view class="center"> <view class="pay">
微信支付 <button class="btn" @tap="doDeposit">立即充值</button>
</view> <view class="tis">
<view class="right"> 点击立即充值，即代表您同意<view class="terms">
<radio :checked="paytype=='wxpay'" color="#0083f5" /> 《条款协议》
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </template>
<view class="pay">
<button class="btn" @tap="doDeposit">立即充值</button> <script>
<view class="tis"> let app = getApp()
点击立即充值，即代表您同意<view class="terms"> import {
《条款协议》 addOrder,
</view> orderToPay,
</view> unionPay
</view> } from "../../../Utils/Api.js";
</view> // #ifdef H5
</template> var jweixin = require('jweixin-module');
// #endif
<script> export default {
let app = getApp() data() {
import { return {
addOrder, inputAmount: '', //金额
orderToPay amountList: [100, 200, 300, 500, 800, 1000], //预设3个可选快捷金额
} from "../../../Utils/Api.js"; paytype: 'wxpay', //支付类型
// #ifdef H5 user: "",
var jweixin = require('jweixin-module'); imagewxUrl: app.globalData.imageWxImg,
// #endif imgadres: 'wxpay.png'
export default { };
data() { },
return { onLoad() {
inputAmount: '', //金额 this.user = app.globalData.userInfo
amountList: [10, 50, 100], //预设3个可选快捷金额 },
paytype: 'wxpay', //支付类型 methods: {
user: "",
imagewxUrl: app.globalData.imageWxImg, select(amount) {
imgadres:'wxpay.png' this.inputAmount = amount;
}; },
}, doDeposit() {
onLoad() { if (parseFloat(this.inputAmount).toString() == "NaN") {
this.user = app.globalData.userInfo uni.showToast({
}, title: '请输入正确金额',
methods: { icon: 'none'
});
select(amount) { return;
this.inputAmount = amount; }
}, if (this.inputAmount <= 0) {
doDeposit() { uni.showToast({
if (parseFloat(this.inputAmount).toString() == "NaN") { title: '请输入大于0的金额',
uni.showToast({ icon: 'none'
title: '请输入正确金额', });
icon: 'none' return;
}); }
return; if (parseFloat(this.inputAmount).toFixed(2) != parseFloat(this.inputAmount)) {
} uni.showToast({
if (this.inputAmount <= 0) { title: '最多只能输入两位小数哦~',
uni.showToast({ icon: 'none'
title: '请输入大于0的金额', });
icon: 'none' return;
}); }
return; uni.showLoading({
} title: '正在提交订单...'
if (parseFloat(this.inputAmount).toFixed(2) != parseFloat(this.inputAmount)) { })
uni.showToast({ let goods = {
title: '最多只能输入两位小数哦~', "identificationCode": app.globalData.identificationCode,
icon: 'none' "highChildOrderList": [{
}); "goodsType": 2,
return; "goodsId": app.globalData.userInfo.id,
} "saleCount": 1,
uni.showLoading({ "goodsPrice": this.inputAmount
title: '正在提交订单...' }]
}) }
let goods = { addOrder(goods).then(res => {
"identificationCode":app.globalData.identificationCode, uni.hideLoading();
"highChildOrderList": [{ if (res.return_code == '000000') {
"goodsType": 2, //模板模拟支付，实际应用请调起微信/支付宝
"goodsId": app.globalData.userInfo.id, this.unionPay(res.return_data.id);
"saleCount": 1, } else {
"goodsPrice": this.inputAmount uni.showToast({
}] title: res.return_msg
} });
addOrder(goods).then(res => { }
uni.hideLoading(); })
if (res.return_code == '000000') { },
//模板模拟支付，实际应用请调起微信/支付宝 //银联获取信息
let params = { unionPay(item) {
"orderId": res.return_data.id, let goods = {
"openId": app.globalData.openId, "orderId": item
"orderScene": "GOODS_ORDER" }
} unionPay(goods).then(res => {
orderToPay(params).then(res => { if (res.return_code == '000000') {
if (res.return_code == '000000') { this.uniontopay(res.return_data.prepayid);
// #ifdef MP } else {
uni.showLoading({ uni.showToast({
title: '支付中...' title: res.return_msg,
}) icon: 'none',
uni.requestPayment({ duration: 2000
"appId": res.return_data.appId, });
"nonceStr": res.return_data.nonceStr, }
"package": res.return_data.package, })
"paySign": res.return_data.sign, },
"signType": "MD5", //银联支付
"timeStamp": res.return_data.timeStamp, uniontopay(item) {
success: function(res) { let that = this;
uni.hideLoading(); upsdk.pluginReady(function() {
uni.showToast({ upsdk.pay({
title: '支付成功' tn: item,
}) success: function(res) {
setTimeout(() => { uni.showToast({
uni.navigateBack({}) title: '支付成功'
}, 100) })
}, uni.navigateBack({})
fail: function(err) { },
uni.hideLoading(); fail: function(err) {
console.log('fail:' + JSON.stringify(err)); uni.showToast({
} title: err.msg,
}); icon: 'none',
// #endif duration: 2000
})
//判断是否是公众号 // 支付失败, err.msg 是失败原因描述, 比如TN号不合法, 或者用户取消了交易 等等。
// #ifdef H5 }
//判断微信浏览器 });
this.payRequest(res); });
// #endif }
} else { },
uni.showToast({
title: '支付失败' }
}) </script>
}
}) <style lang="scss">
.block {
width: 94%;
} else { padding: 20upx 3%;
uni.showToast({
title: res.return_msg .title {
}); width: 100%;
} font-size: 34upx;
}) }
},
payRequest: function(self) { .content {
uni.showLoading({ .my {
title: '支付中...' width: 100%;
}) height: 120upx;
jweixin.config({ display: flex;
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 align-items: center;
appId: self.return_data.appId, // 必填，公众号的唯一标识 font-size: 30upx;
timestamp: self.return_data.timeStamp, // 必填，生成签名的时间戳 border-bottom: solid 1upx #eee;
nonceStr: self.return_data.nonceStr, // 必填，生成签名的随机串 }
signature: self.return_data.sign, // 必填，签名，见附录1
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 .amount {
}); width: 100%;
uni.hideLoading();
jweixin.ready(function() { .list {
jweixin.checkJsApi({ display: flow-root;
jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，所有JS接口列表见附录2, justify-content: space-between;
success: function(res) {}, padding: 20upx 0;
fail: function(res) {}
}); .box {
jweixin.chooseWXPay({ width: 30%;
appId: self.return_data.appId, height: 120rpx;
timestamp: self.return_data float: left;
.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 margin-left: 3.333%;
nonceStr: self.return_data.nonceStr, // 支付签名随机串，不长于 32 位 margin-top: 20px;
package: self.return_data display: flex;
.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***） justify-content: center;
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' align-items: center;
paySign: self.return_data.sign, // 支付签名 border-radius: 10rpx;
success: function(res) { box-shadow: 0rpx 5rpx 20rpx rgba(0, 0, 0, 0.05);
// 支付成功后的回调函数 font-size: 36rpx;
uni.showToast({ background-color: #f1f1f1;
title: '支付成功' color: 333;
})
uni.reLaunch({ &.on {
url: '../success/success?id=' + that.couponId background-color: #0083f5;
}); color: #fff;
}, }
cancel: function(r) {}, }
fail: function(res) {} }
});
});
jweixin.error(function(res) {
uni.showToast({
icon: 'none',
title: '支付失败了',
duration: 4000
});
});
},
},
}
</script>
<style lang="scss">
.block {
width: 94%;
padding: 20upx 3%;
.title {
width: 100%;
font-size: 34upx;
}
.content {
.my {
width: 100%;
height: 120upx;
display: flex;
align-items: center;
font-size: 30upx;
border-bottom: solid 1upx #eee;
}
.amount {
width: 100%;
.list {
display: flex;
justify-content: space-between;
padding: 20upx 0;
.box {
width: 30%;
height: 120upx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10upx;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
font-size: 36upx;
background-color: #f1f1f1;
color: 333;
&.on {
background-color: #0083f5;
color: #fff;
}
}
}
.num { .num {
margin-top: 10upx; margin-top: 20upx;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
.text { .text {
padding-right: 10upx; padding-right: 10upx;
font-size: 30upx; font-size: 40upx;
} }
.input { .input {
width: 28.2vw; width: 28.2vw;
border-bottom: solid 2upx #999; border-bottom: solid 2upx #999;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
input { input {
margin: 0 20upx; margin: 0 20upx;
height: 60upx; height: 60upx;
font-size: 30upx; font-size: 40upx;
color: #0083f5; color: #0083f5;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
} }
} }
} }
.pay-list { .pay-list {
width: 100%; width: 100%;
border-bottom: solid 1upx #eee; border-bottom: solid 1upx #eee;
.row { .row {
width: 100%; width: 100%;
height: 120upx; height: 120upx;
display: flex; display: flex;
align-items: center; align-items: center;
.left { .left {
width: 100upx; width: 100upx;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
image { image {
width: 80upx; width: 80upx;
height: 80upx; height: 80upx;
} }
} }
.center { .center {
width: 100%; width: 100%;
font-size: 30upx; font-size: 30upx;
} }
.right { .right {
width: 100upx; width: 100upx;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
} }
} }
} }
} }
.pay { .pay {
margin-top: 20upx; margin-top: 20upx;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
.btn { .btn {
width: 70%; width: 70%;
height: 80upx; height: 80upx;
border-radius: 80upx; border-radius: 80upx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff; color: #fff;
background-color: #0083f5; background-color: #0083f5;
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2); box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
} }
.tis { .tis {
margin-top: 10upx; margin-top: 10upx;
width: 100%; width: 100%;
font-size: 24upx; font-size: 24upx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: baseline; align-items: baseline;
color: #999; color: #999;
.terms { .terms {
color: #5a9ef7; color: #5a9ef7;
} }
} }
} }
</style> </style>

46
high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue
Unescape View File

@ -43,13 +43,17 @@
</view> </view>
</view> </view>
</view> </view>
<view class="width90 mart40 fcor666" v-if="videourl != ''">视频教程</view> <!-- <view class="width90 mart40 fcor666" v-if="videourl != ''">视频教程</view>
<view class="btnplay" @click="playvideo" v-if="videourl != ''">播放视频教学</view> <view class="btnplay" @click="playvideo" v-if="videourl != ''">播放视频教学</view>
<view class="width80 mart20 marb30" v-if="isplayvideo"> <view class="width80 mart20 marb30" v-if="isplayvideo">
<yy-video-player :auto-play="false" :url="imageUrl+imagedess1" :poster="poster" :show-back-btn="true"> <yy-video-player :auto-play="false" :url="imageUrl+imagedess1" :poster="poster" :show-back-btn="true">
</yy-video-player> </yy-video-player>
</view> </view> -->
<view class="width90 mart40 fcor666" v-if="videourl != ''">临时通知</view>
<view class="alijus mart20 marb30" v-if="videourl != ''">
<image mode="widthFix" :src="imageUrl+imagedess2"></image>
</view>
</view> </view>
</template> </template>
@ -72,14 +76,15 @@
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png', imgadres: 'noorder.png',
imagedess1: '/CMS/html/11641540903873.mp4', imagedess1: '/CMS/html/11641540903873.mp4',
imagedess2: '/CMS/html/notice1.png',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
isNoMoreData: false, isNoMoreData: false,
couponsDetails: '', couponsDetails: '',
salesEndTime: '', salesEndTime: '',
couponId: '', couponId: '',
videourl: '' ,//视频地址 videourl: '', //视频地址
isplayvideo: false //视频播放 isplayvideo: false //视频播放
} }
}, },
filters: { filters: {
@ -145,15 +150,15 @@
//商品跳转 //商品跳转
toGoods(e) { toGoods(e) {
uni.navigateTo({ uni.navigateTo({
url: '../../order/confirmation?id=' + e url: '../../order/confirmation?id=' + e + '&typeid=2'
}) })
// uni.navigateTo({ // uni.navigateTo({
// url: '../../goods/goods?id='+e // url: '../../goods/goods?id='+e
// }); // });
}, },
//播放视频 //播放视频
playvideo(){ playvideo() {
this.isplayvideo = true; this.isplayvideo = true;
} }
} }
} }
@ -226,16 +231,17 @@
background-color: red; background-color: red;
color: #FFFFFF; color: #FFFFFF;
border-radius: 0px; border-radius: 0px;
} }
.btnplay{
width: 120px; .btnplay {
text-align: center; width: 120px;
height: 40px; text-align: center;
line-height: 40px; height: 40px;
color: #FFFFFF; line-height: 40px;
background-color: #089bf5; color: #FFFFFF;
border-radius: 5px; background-color: #089bf5;
margin-left: 5%; border-radius: 5px;
margin-top: 20px; margin-left: 5%;
margin-top: 20px;
} }
</style> </style>

BIN
high-unionPay/static/img/unionimg/upay3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 405 KiB

After

Width:  |  Height:  |  Size: 153 KiB

5
high-unionPay/uni.scss
Unescape View File

@ -661,4 +661,9 @@ $uni-font-size-paragraph:30upx;
.font12{ .font12{
font-size: 12px; font-size: 12px;
}
.alijus{
justify-content: center;
align-items: center;
display: flex;
} }
Write Preview
Loading…
Cancel
Save