1.新增话费充值积分抵扣

master
杨杰 3 years ago
parent 05880d9c1e
commit e0025a5c46
  1. 26
      high-unionPay/Utils/Api.js
  2. 372
      high-unionPay/components/cj-slider/cj-slider.vue
  3. 49
      high-unionPay/pages.json
  4. 151
      high-unionPay/pages/goods/refuel-details/refuel-details.vue
  5. 10
      high-unionPay/pages/tabBar/user/user.vue
  6. 107
      high-unionPay/pages/unionPay/Phone-recharge-details/Phone-recharge-details.vue
  7. 109
      high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue
  8. 413
      high-unionPay/pages/unionPay/recharge-pay/recharge-pay.vue
  9. 964
      high-unionPay/pages/unionPay/unionComfirmation/unionComfirmation.vue
  10. 917
      high-unionPay/pages/unionPay/unionorder-des/unionorder-des.vue
  11. BIN
      high-unionPay/static/img/cz1.jpg
  12. BIN
      high-unionPay/static/img/cz2.jpg
  13. BIN
      high-unionPay/static/img/cz3.jpg
  14. BIN
      high-unionPay/static/img/phone.png
  15. 886
      high-unionPay/subPages/unionPay-orderList/unionPay-orderList.vue
  16. 4
      high-unionPay/uni.scss

@ -135,6 +135,10 @@ export const getStoreListByMerchant = params => {
export const getDiscountByQrCode = params => { export const getDiscountByQrCode = params => {
return POST('GET', `${base}/discount/getDiscountByQrCode`, params).then(res => res.data); return POST('GET', `${base}/discount/getDiscountByQrCode`, params).then(res => res.data);
} }
//查询话费优惠券
export const getUserOrderPreList = params => {
return POST('GET', `${base}/userDiscount/getUserExclusiveDiscount`, params).then(res => res.data);
}
//领取优惠券 //领取优惠券
export const receiveDiscount = params => { export const receiveDiscount = params => {
return POST('POST', `${base}/userDiscount/receiveDiscount`, params).then(res => res.data); return POST('POST', `${base}/userDiscount/receiveDiscount`, params).then(res => res.data);
@ -176,8 +180,8 @@ export const getDictionaryByCodeTypeOl = params => {
return POST('GET', `${base}/common/getDictionaryByCodeTypeOl`, params).then(res => res.data); return POST('GET', `${base}/common/getDictionaryByCodeTypeOl`, params).then(res => res.data);
} }
//团油计算价格 //团油计算价格
export const oilPriceCompute = params => { export const oilPriceDiscountCompute = params => {
return POST('GET', `${base}/highGas/oilPriceCompute`, params).then(res => res.data); return POST('GET', `${base}/highGas/oilPriceDiscountCompute`, params).then(res => res.data);
} }
//查询卡数据字典 //查询卡数据字典
@ -204,7 +208,15 @@ export const addOrderPay = params => {
//话费充值查询 //话费充值查询
export const getListOutRechargePrice = params => { export const getListOutRechargePrice = params => {
return POST('GET', `${base}/outRechargePrice/getListOutRechargePrice`, params).then(res => res.data); return POST('GET', `${base}/outRechargePrice/getRechargePriceByList`, params).then(res => res.data);
}
//查询充值话费详情
export const getPhoneOrderById = params => {
return POST('GET', `${base}/outRechargeOrder/getOrderById`, params).then(res => res.data);
}
// 取消话费订单
export const cancelRechargeOrder = params => {
return POST('GET', `${base}/outRechargeOrder/cancelOrder`, params).then(res => res.data);
} }
//提交订单 //提交订单
export const orderToUNionPay = params => { export const orderToUNionPay = params => {
@ -215,8 +227,12 @@ export const unionPay = params => {
return POST('POST', `${base}/order/unionPay`, params).then(res => res.data); return POST('POST', `${base}/order/unionPay`, params).then(res => res.data);
} }
// 银联话费充值 // 银联话费充值
export const orderToUnionPayphone = params => { export const orderToUnionPay = params => {
return POST('POST', `${base}/outRechargeOrder/orderToUnionPay`, params).then(res => res.data); return POST('POST', `${base}/czOrder/orderToUnionPay`, params).then(res => res.data);
}
//查询话费详情
export const findById = params => {
return POST('GET', `${base}/outRechargePrice/findById`, params).then(res => res.data);
} }
//银联查询详情接口 //银联查询详情接口
export const paygetOrderById = params => { export const paygetOrderById = params => {

@ -0,0 +1,372 @@
<template>
<view class="cj-slider" @mousemove="onSliMouseMove" @mouseup="onSliMouseUp">
<view class="mouse-move" :style="{height: moveHeight + 'rpx'}"></view>
<view class="cj-slider__line" :class="[disabled ? 'cj-slider--disabled' : '']" :style="{
backgroundColor: inactiveColor,
height: height + 'rpx'
}" style="border-radius: 8px;" ></view>
<view class="cj-slider__gap" :style="[
barStyle,
{
height: height + 'rpx',
backgroundColor: activeColor
}
]" style="border-radius: 8px;">
<!-- <view class="cj-slider__button-wrap" @mousedown="onMouseDown(1, $event)" @mousemove="onMouseMove($event)"
@mouseleave="onMouseLeave(1)" @mouseup="onMouseUp(1)" @touchstart="onTouchStart(1, $event)"
@touchmove="onTouchMove(1, $event)" @touchend="onTouchEnd(1)" @touchcancel="onTouchEnd">
<slot v-if="$slots.default || $slots.$default" />
<view v-else class="cj-slider__button" :style="[blockStyle, {
height: blockWidth + 'rpx',
width: blockWidth + 'rpx',
backgroundColor: blockColor
}]"></view>
</view> -->
<view class="cj-slider__button-wrap2" @mousedown="onMouseDown(2, $event)" @mousemove="onMouseMove($event)"
@mouseleave="onMouseLeave(2)" @mouseup="onMouseUp(2)" @touchstart="onTouchStart(2, $event)"
@touchmove="onTouchMove(2, $event)" @touchend="onTouchEnd(2)" @touchcancel="onTouchEnd">
<slot v-if="$slots.default || $slots.$default" />
<view v-else class="cj-slider__button" :style="[blockStyle, {
height: blockWidth + 'rpx',
width: blockWidth + 'rpx',
backgroundColor: blockColor
}]"></view>
</view>
</view>
</view>
</template>
<script>
/**
* slider 滑块选择器
* @property {Number | String} value 滑块默认值默认[最小值,最大值]
* @property {Number | String} min 最小值默认0
* @property {Number | String} max 最大值默认100
* @property {Number | String} step 步长默认1
* @property {Number | String} blockWidth 滑块宽度高等于宽30
* @property {Number | String} height 滑块条高度单位rpx默认6
* @property {String} inactiveColor 底部条背景颜色默认#c0c4cc
* @property {String} activeColor 底部选择部分的背景颜色默认#2979ff
* @property {String} blockColor 滑块颜色默认#ffffff
* @property {Object} blockStyle 给滑块自定义样式对象形式
* @property {Boolean} disabled 是否禁用滑块(默认为false)
* @property {Number | String} moveHeight 鼠标离开滑块仍可滑动的区域高度单位rpx(默认100)
* @event {Function} start 滑动触发
* @event {Function} moving 正在滑动中
* @event {Function} end 滑动结束
* @example <cj-slider v-model="value" />
*/
export default {
name: 'cj-slider',
props: {
//
value: {
type: Array,
default: []
},
//
disabled: {
type: Boolean,
default: false
},
// rpx
blockWidth: {
type: [Number, String],
default: 30
},
//
min: {
type: [Number, String],
default: 0
},
//
max: {
type: [Number, String],
default: 100
},
//
step: {
type: [Number, String],
default: 1
},
// rpx
height: {
type: [Number, String],
default: 20
},
//
activeColor: {
type: String,
default: '#f3b43f'
},
//
inactiveColor: {
type: String,
default: '#f5f6f4'
},
//
blockColor: {
type: String,
default: '#ffffff'
},
//
blockStyle: {
type: Object,
default () {
return {};
}
},
//
moveHeight: {
type: [Number, String],
default: '60'
}
},
data() {
return {
mouseLeave: false, //
mouseType: 1, // 1 2
mouseDown: false, //
startX: 0,
status: 'end',
newValue: 0,
distanceX: 0,
startValue: 0,
barStyle: {},
sliderRect: {
left: 0,
width: 0
}
};
},
created() {
// 2,[, ]
if (Object.prototype.toString.call(this.value) == '[object Array]' && this.value.length === 2) {
this.updateValue(this.value[0], this.value[1], false);
} else {
this.$emit('input', Array(this.min, this.max))
}
},
mounted() {
//
this.$uGetRect('.cj-slider').then(rect => {
this.sliderRect = rect;
});
},
methods: {
onTouchStart(type, event) {
if (this.disabled) return;
this.startX = 0;
//
let touches = event.touches[0];
//
this.startX = touches.clientX;
// this.valueprops$emit('input')
this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
//
this.status = 'start';
},
onMouseDown(type, event) {
if (this.disabled) return;
this.mouseDown = true;
this.mouseType = type
this.startX = event.clientX || 0;
this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
this.status = 'start';
},
onTouchMove(type, event) {
if (this.disabled) return;
//
// statusmoving
if (this.status == 'start') this.$emit('start');
let touches = event.touches[0]
//
this.distanceX = touches.clientX - this.sliderRect.left
//
// step
this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
this.status = 'moving'
// moving
this.$emit('moving');
if (type === 1) {
this.updateValue(this.newValue, this.format(this.value[1]), true);
} else {
this.updateValue(this.format(this.value[0]), this.newValue, true);
}
},
onMouseMove(event) {
if (!this.mouseDown) return;
if (this.disabled) return;
if (this.status == 'start') this.$emit('start');
//
this.distanceX = event.clientX - this.sliderRect.left
//
// step
this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
this.status = 'moving'
// moving
this.$emit('moving');
if (this.mouseType === 1) {
this.updateValue(this.newValue, this.format(this.value[1]), true);
} else {
this.updateValue(this.format(this.value[0]), this.newValue, true);
}
},
onMouseLeave(type) {
this.mouseLeave = true
},
onTouchEnd(type) {
if (this.disabled) return;
if (this.status === 'moving') {
if (type === 1) {
this.updateValue(this.newValue, this.format(this.value[1]), true);
} else {
this.updateValue(this.format(this.value[0]), this.newValue, true);
}
this.$emit('end');
}
this.status = 'end';
},
onMouseUp(type) {
this.mouseDown = false;
this.mouseLeave = false;
if (this.disabled) return;
if (this.status === 'moving') {
if (type === 1) {
this.updateValue(this.newValue, this.format(this.value[1]), true);
} else {
this.updateValue(this.format(this.value[0]), this.newValue, true);
}
this.$emit('end');
}
this.status = 'end';
},
onSliMouseUp() {
//
this.mouseDown = false;
this.mouseLeave = false;
},
onSliMouseMove(e) {
// PC
if (!this.mouseDown) return;
if (!this.mouseLeave) return;
this.onMouseMove(e)
},
updateValue(value, value2, drag) {
// step
const widthB1 = this.format(value)
const widthB2 = this.format(value2)
const widthB1B = Math.round((widthB1 - this.min) * 100 / (this.max - this.min))
const widthB2B = Math.round((widthB2 - this.min) * 100 / (this.max - this.min))
// max100
if (widthB1 > widthB2 || widthB2 > this.max || widthB2B > 100) return;
//
let barStyle = {
width: widthB2B - widthB1B + '%',
left: widthB1B + '%',
};
//
if (drag == true) {
barStyle.transition = 'none';
} else {
// css
delete barStyle.transition;
}
// value使change使input H5
this.$emit('input', Array(widthB1, widthB2));
this.barStyle = barStyle;
},
format(value) {
//
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
},
onClick(event) {
if (this.disabled) return;
// onTouchMove
const widthB1 = this.value[0]
const widthB2 = this.value[1]
const value = this.format(((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this
.min) +
this.min);
if (value < widthB1 || (value - widthB1) <= (widthB2 - value)) {
// || =>
this.updateValue(value, widthB2, false)
} else {
// || =>
this.updateValue(widthB1, value, false)
}
},
$uGetRect(selector, all) {
// $uGetRectuView
return new Promise(resolve => {
uni.createSelectorQuery().
in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect)
}
if (!all && rect) {
resolve(rect)
}
})
.exec()
})
},
}
};
</script>
<style lang="scss" scoped>
.cj-slider {
position: relative;
// background-color: #ebedf0;
&__line {
position: absolute;
width: 100%;
background-color: #ebedf0;
}
&__gap {
position: relative;
// bug
// transition: width 0.2s;
background-color: #1989fa;
}
&__button {
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background-color: #fff;
cursor: pointer;
}
&__button-wrap {
position: absolute;
top: 50%;
left: 0;
transform: translate3d(-50%, -50%, 0);
}
&__button-wrap2 {
position: absolute;
top: 50%;
right: 0;
transform: translate3d(50%, -50%, 0);
}
}
.cj-slider--disabled {
opacity: 0.5;
}
.mouse-move {
position: fixed;
left: 0;
right: 0;
transform: translateY(-50%);
opacity: 0;
}
</style>

@ -636,11 +636,14 @@
"path": "pages/unionPay/unionorder-des/unionorder-des", "path": "pages/unionPay/unionorder-des/unionorder-des",
"style": { "style": {
"navigationBarTitleText": "充值详情", "navigationBarTitleText": "充值详情",
"enablePullDownRefresh": false, "navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"backgroundColorBottom": "#ffffff",
"app-plus": { "app-plus": {
"titleNView": false // "titleNView": false //
} }
} }
}, { }, {
"path": "pages/tabBar/order/stagesUrl/stagesUrl", "path": "pages/tabBar/order/stagesUrl/stagesUrl",
@ -656,7 +659,43 @@
} }
} }
} }
], ,{
"path" : "pages/unionPay/unionComfirmation/unionComfirmation",
"style" :
{
"navigationBarTitleText": "话费确认",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false //
}
}
}
,{
"path" : "pages/unionPay/Phone-recharge-details/Phone-recharge-details",
"style" :
{
"navigationBarTitleText": "支付成功",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false //
}
}
}
,{
"path" : "pages/unionPay/recharge-pay/recharge-pay",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": false //
}
}
}
],
"subpackages": [{ "subpackages": [{
"root": "subPages", "root": "subPages",
"pages": [{ "pages": [{
@ -690,12 +729,10 @@
}, { }, {
"path": "unionPay-orderList/unionPay-orderList", "path": "unionPay-orderList/unionPay-orderList",
"style": { "style": {
"enablePullDownRefresh": false,
"navigationBarTitleText": "话费订单", "navigationBarTitleText": "话费订单",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0083f5", "navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5", "backgroundColorTop": "#0083f5",
"navigationBarTextStyle": "white", "backgroundColorBottom": "#ffffff",
"app-plus": { "app-plus": {
"titleNView": false // "titleNView": false //
} }

@ -66,25 +66,29 @@
<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;"> <view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
<view class="width8 flleft"></view> <view class="width8 flleft"></view>
<input type="digit" class="font16 width60 flleft height40" placeholder="输入金额(保留2位小数)" v-model="inputMoney" <input type="digit" class="font16 width60 flleft height40" placeholder="输入金额(保留2位小数)" v-model="inputMoney"
@blur="Listeningfocus" /> @input="Listeningfocus" />
<view class="width30 height40 flright font14 fcor999 fotct" <view class="width30 height40 flright font14 fcor999 fotct"
style="border-left: 1px solid #f2f2f2;line-height: 40px;"> style="border-left: 1px solid #f2f2f2;line-height: 40px;">
{{litre}}L {{oilLiters}}L
</view> </view>
</view> </view>
<view class="line10 mart15"></view> <view class="line10 mart15"></view>
<view class="width90 height40 mart10"> <view class="width90 height40 mart10">
<view class="flleft width50 font15 fcor666">加油升数:<text class="fcoreb5 margle"> {{litre}}L</text></view> <view class="flleft width50 font15 fcor666">加油升数:<text class="fcoreb5 margle"> {{oilLiters}}L</text></view>
<view class="flright width50 font15 fcor666">平台折扣:<text class="fcoreb5 margle"> 0.95</text></view> <view class="flright width50 font15 fcor666">平台折扣:<text class="fcoreb5 margle"> {{discount}}</text></view>
</view> </view>
<view class="width90 height40"> <view class="width90 height40">
<view class="flleft width50 font15 fcor666">平台优惠:<text class="fcoreb5 margle"> 11.7</text></view> <view class="flleft width50 font15 fcor666">平台优惠:<text class="fcoreb5 margle"> ¥{{pricePreferences}}</text>
<view class="flright width50 font15 fcor666">加油补贴:<text class="fcoreb5 margle"> ¥0.44</text></view> </view>
</view> <view class="flright width50 font15 fcor666">加油补贴:<text class="fcoreb5 margle"> ¥{{oilSubsidy}}</text>
<view class="width90 height40"> </view>
<view class="flleft width50 font15 fcor666">每升优惠:<text class="fcoreb5 margle"> 11.7</text></view> </view>
<view class="flright width50 font15 fcor666">本次优惠:<text class="fcoreb5 margle"> ¥0.95</text></view> <view class="width90 height40">
</view> <view class="flleft width50 font15 fcor666">每升优惠:<text class="fcoreb5 margle"> ¥{{litersPreferences}}</text>
</view>
<view class="flright width50 font15 fcor666">本次优惠:<text class="fcoreb5 margle"> ¥{{totalPreferences}}</text>
</view>
</view>
<view class="line10 mart15"></view> <view class="line10 mart15"></view>
<!-- <view class="list width90"> <!-- <view class="list width90">
<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)" <view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
@ -139,7 +143,7 @@
getGasDetailByStoreKey, getGasDetailByStoreKey,
addOrder, addOrder,
getDictionaryByCodeTypeOl, getDictionaryByCodeTypeOl,
oilPriceCompute oilPriceDiscountCompute
} from '../../../Utils/Api.js'; } from '../../../Utils/Api.js';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
let app = getApp(); let app = getApp();
@ -193,6 +197,12 @@
oilType: '', oilType: '',
distance: 9999, // distance: 9999, //
xzMoney: '300', // xzMoney: '300', //
oilLiters: '0', //
discount: '0', //
oilSubsidy: '0', //
litersPreferences: '0', //
pricePreferences: '0', //
totalPreferences: '0', //
} }
}, },
onLoad(options) { onLoad(options) {
@ -301,29 +311,29 @@
this.gasOilNo = item.oilNo; this.gasOilNo = item.oilNo;
this.priceVip = item.priceVip; this.priceVip = item.priceVip;
this.priceOfficial = item.priceOfficial; this.priceOfficial = item.priceOfficial;
this.priceGun = item.priceGun; this.priceGun = item.priceGun;
this.totalPrice = '0.00'; this.totalPrice = '0.00';
this.discountPrice = '0.00'; this.discountPrice = '0.00';
this.inputMoney = ''; this.inputMoney = '';
this.oilLiters = '0'; this.oilLiters = '0';
this.discount = '0'; this.discount = '0';
this.oilSubsidy = '0'; this.oilSubsidy = '0';
this.litersPreferences = '0'; this.litersPreferences = '0';
this.pricePreferences = '0'; this.pricePreferences = '0';
this.totalPreferences = '0'; this.totalPreferences = '0';
this.$refs.popup.hide(); this.$refs.popup.hide();
}, },
// //
changeValue2(item) { changeValue2(item) {
this.gunNo = item.gunNo; this.gunNo = item.gunNo;
this.totalPrice = '0.00'; this.totalPrice = '0.00';
this.discountPrice = '0.00'; this.discountPrice = '0.00';
this.inputMoney = ''; this.inputMoney = '';
this.oilLiters = '0'; this.oilLiters = '0';
this.discount = '0'; this.discount = '0';
this.oilSubsidy = '0'; this.oilSubsidy = '0';
this.litersPreferences = '0'; this.litersPreferences = '0';
this.pricePreferences = '0'; this.pricePreferences = '0';
this.totalPreferences = '0'; this.totalPreferences = '0';
this.$refs.popup.hide(); this.$refs.popup.hide();
}, },
@ -347,7 +357,7 @@
var a = /^[0-9]+(\.[0-9]{1})?$/; var a = /^[0-9]+(\.[0-9]{1})?$/;
var b = /^[0-9]+(.[0-9]{1})?$/; var b = /^[0-9]+(.[0-9]{1})?$/;
var c = /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/; var c = /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/;
if (this.inputMoney == '' || this.inputMoney < 10 || !(c.test(this.inputMoney))) { if (this.inputMoney == '') {
uni.showToast({ uni.showToast({
title: '请输入正确加油金额', title: '请输入正确加油金额',
icon: "none", icon: "none",
@ -357,56 +367,61 @@
this.discountPrice = '0.00'; this.discountPrice = '0.00';
this.litre = ''; this.litre = '';
this.inputMoney = ''; this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
return; return;
} }
// let inputs = this.inputMoney.split('.');
// if (inputs[1] != undefined && inputs[1].length > 1) {
// uni.showToast({
// title: '1',
// icon: "none",
// duration:2000
// });
// return;
// }
if (parseInt(this.inputMoney) > parseInt(this.xzMoney)) { if (parseInt(this.inputMoney) > parseInt(this.xzMoney)) {
uni.showToast({ uni.showToast({
title: '加油金额不能超过' + this.xzMoney + '元', title: '加油金额不能超过' + this.xzMoney + '元',
icon: "none", icon: "none",
duration: 2000 duration: 2000
}); });
this.inputMoney = this.xzMoney; this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.litre = '';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
return;
} }
this.oilPriceDiscountCompute();
//
this.litre = parseFloat(this.inputMoney / this.priceGun).toFixed(2);
// var arr1 = parseFloat(this.inputMoney / this.priceOfficial * this.priceVip).toFixed(4);
// this.totalPrice = this.numFilter(arr1);
this.oilPriceCompute();
//
// this.litre = parseFloat(this.inputMoney / this.priceGun).toFixed(2);
// this.totalPrice = parseFloat(this.inputMoney / this.priceGun * this.priceVip).toFixed(2);
// if (this.priceVip != this.priceGun) {
// let gbprice = parseFloat(this.litre * this.priceGun).toFixed(2);
// this.discountPrice = parseFloat(gbprice - this.totalPrice).toFixed(0);
// }
}, },
// //
oilPriceCompute() { oilPriceDiscountCompute() {
let datas = { let datas = {
"price": this.inputMoney, "price": this.inputMoney,
"goodsId": this.counId, "goodsId": this.counId,
"oilNo": this.gasOilNo, "oilNo": this.gasOilNo
} }
oilPriceCompute(datas).then(res => { oilPriceDiscountCompute(datas).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.totalPrice = res.return_data; this.totalPrice = res.return_data.payPrice;
this.oilLiters = res.return_data.oilLiters;
this.discount = res.return_data.discount;
this.oilSubsidy = res.return_data.oilSubsidy;
this.litersPreferences = res.return_data.litersPreferences;
this.pricePreferences = res.return_data.pricePreferences;
this.totalPreferences = res.return_data.totalPreferences;
if (this.priceVip != this.priceOfficial) { if (this.priceVip != this.priceOfficial) {
// let gbprice = parseFloat(this.litre * this.priceOfficial).toFixed(2);
// this.discountPrice = parseFloat(gbprice - this.totalPrice).toFixed(2);
this.discountPrice = parseFloat(this.inputMoney - this.totalPrice).toFixed(2); this.discountPrice = parseFloat(this.inputMoney - this.totalPrice).toFixed(2);
} }
} else {
this.totalPrice = '0';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
} }
}) })
}, },

@ -58,7 +58,9 @@
<!-- 订单类型 --> <!-- 订单类型 -->
<view class="title">话费充值</view> <view class="title">话费充值</view>
<view class="list"> <view class="list">
<view class="box" v-for="(row,index) in huafeiList" :key="index" @tap="toOrdehuafeirList(index)"> <view class="box" v-for="(row,index) in huafeiList" :key="index" @tap="toOrdehuafeirList(index)">
<uni-badge style="width: 20px;position: absolute; left: 15%;" v-if="row.text == '待支付' && rechargeOrderNum "
:text="rechargeOrderNum" type="error" size="normal"></uni-badge>
<view class="img"> <view class="img">
<view class="icon" :class="row.icon"></view> <view class="icon" :class="row.icon"></view>
</view> </view>
@ -143,7 +145,8 @@
headerPosition: "fixed", headerPosition: "fixed",
textnum: '', textnum: '',
textSend: '', textSend: '',
therrNum: '', therrNum: '',
rechargeOrderNum:'', //
headerTop: null, headerTop: null,
statusTop: null, statusTop: null,
showHeader: true, showHeader: true,
@ -296,7 +299,8 @@
this.user = res.return_data; this.user = res.return_data;
this.textnum = res.return_data.unusedCouponNum; this.textnum = res.return_data.unusedCouponNum;
this.textSend = res.return_data.unusedDiscount; this.textSend = res.return_data.unusedDiscount;
this.therrNum = res.return_data.unpaid; this.therrNum = res.return_data.unpaid;
this.rechargeOrderNum = res.return_data.rechargeOrderNum;
uni.setStorage({ uni.setStorage({
key: "user", key: "user",
data: res.return_data data: res.return_data

@ -0,0 +1,107 @@
<template>
<view>
<image src="../../../static/img/phone.png" class="width20w mart20" mode="widthFix"></image>
<view class="font14 fotct fcor333">话费充值</view>
<view class="fotct font48 fcor333 mart10">{{phoneorderdes.orderPrice}}<text class="font14"></text></view>
<view class="linec6 width90 mart10"></view>
<view class="width90 mart20 fcor666 font18">
交易状态 : <text class="paysuc"> 支付成功</text>
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">订单流水号</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderNo}}</view>
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">创建消费订单</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderPrice}}</view>
</view>
<view class="width90 fcor666 font13">
{{phoneorderdes.createTimed | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.createTimed | timeFormat('hh:mm')}}
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">支付成功</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.payRealPrice}}</view>
</view>
<view class="width90 fcor666 font13">
{{phoneorderdes.payTime | timeFormat('yyyy-mm-dd')}} {{phoneorderdes.payTime | timeFormat('hh:mm')}}
</view>
<view class="linec6 width90 mart10"></view>
<view class="width90 mart10 fcor333 font15">
话费充值 : {{phoneorderdes.userPhone}}{{phoneorderdes.operatorName}}
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">订单总额</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.orderPrice == null ? '0': phoneorderdes.orderPrice}}</view>
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">优惠券抵扣</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.discountDeductionPrice == null ? '0': phoneorderdes.discountDeductionPrice}}</view>
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">积分抵扣</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.integralDeductionPrice == null ? '0': phoneorderdes.integralDeductionPrice}}</view>
</view>
<view class="width90 mart15 height22">
<view class="flleft fcor333 width50 font15">实际支付金额</view>
<view class="flright fcor666 width50 fotrt font13">{{phoneorderdes.payRealPrice == null ? '0': phoneorderdes.payRealPrice}}</view>
</view>
<view class="width100 height90"></view>
<button class="coupne-btn width100" @click="toUser">个人中心</button>
</view>
</template>
<script>
import {
getPhoneOrderById
} from '../../../Utils/Api.js'
let app = getApp();
export default {
data() {
return {
orderid: '',
phoneorderdes:''
}
},
onLoad(options) {
this.orderid = options.id;
this.getPhoneOrderById();
},
methods: {
//
toUser() {
uni.switchTab({
url:'../../tabBar/user/user'
});
},
getPhoneOrderById() {
let params = {
orderId: this.orderid
}
getPhoneOrderById(params).then(res => {
if (res.return_code == '000000') {
this.phoneorderdes = res.return_data;
}
});
}
}
}
</script>
<style lang="scss">
page {
background-color: #f7f7f7;
}
.paysuc {
color: #81bd3f;
}
.coupne-btn {
position: fixed;
bottom: 0px;
background-color: #089bf5;
color: #FFFFFF;
border-radius: 0px;
}
</style>

@ -3,7 +3,8 @@
<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" maxlength="11"
placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
</view> </view>
<view class="line1 width100 backcorfff"></view> <view class="line1 width100 backcorfff"></view>
</view> </view>
@ -17,10 +18,10 @@
选择金额 选择金额
</view> </view>
<view class="list"> <view class="list">
<view class="box" :class="{'on':item.realPrice == inputAmount}" v-for="(item,index) in amountList" <view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
:key="index" @click="select(item)"> @click="select(item)">
<view class="heTitle">{{item.price}}</view> <view class="heTitle">{{item.rechargePrice}}</view>
<view class="font13 fcor999" v-if="item.status != 2 && item.discount != 100">{{item.discount}} </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="font13 fcor999" v-if="item.status == 2">已售空</view>
</view> </view>
</view> </view>
@ -116,8 +117,7 @@
let app = getApp(); let app = getApp();
import { import {
getListOutRechargePrice, getListOutRechargePrice,
addOrderPay, addOrderPay
orderToUnionPayphone
} from '../../../Utils/Api.js'; } from '../../../Utils/Api.js';
import QSTabs from '../../../components/QS-tabs/QS-tabs.vue'; import QSTabs from '../../../components/QS-tabs/QS-tabs.vue';
export default { export default {
@ -171,8 +171,8 @@
}, },
methods: { methods: {
select(amoutinfos) { select(amoutinfos) {
this.inputAmount = amoutinfos.realPrice; this.inputAmount = amoutinfos.payPrice;
this.orderPrice = amoutinfos.price; this.orderPrice = amoutinfos.rechargePrice;
this.inputAmountId = amoutinfos.id; this.inputAmountId = amoutinfos.id;
this.amoutstatus = amoutinfos.status; this.amoutstatus = amoutinfos.status;
}, },
@ -198,9 +198,9 @@
title: '加载中...' title: '加载中...'
}) })
let params = { let params = {
type: item, operatorType: item,
regionId: app.globalData.cityId, regionId: app.globalData.cityId,
showType: 3, platformId: 3,
rechargeType: this.swiperCurrent rechargeType: this.swiperCurrent
} }
getListOutRechargePrice(params).then(res => { getListOutRechargePrice(params).then(res => {
@ -216,8 +216,9 @@
/** /**
* 提交订单 * 提交订单
*/ */
addOrderPay() { addOrderPay() {
if (this.amoutstatus == 2) { let that = this;
if (that.amoutstatus == 2) {
uni.showToast({ uni.showToast({
title: '当前面值已售空', title: '当前面值已售空',
duration: 2000, duration: 2000,
@ -225,92 +226,42 @@
}); });
return; return;
} }
if (this.inputPhone == '') { if (that.inputPhone == '') {
uni.showToast({ uni.showToast({
title: '请输入充值号码', title: '请输入充值号码',
icon: "none" icon: "none"
}); });
return; return;
} }
if (this.inputPhone.length != 11) { if (that.inputPhone.length != 11) {
uni.showToast({ uni.showToast({
title: '请输入正确充值号码', title: '请输入正确充值号码',
icon: "none" icon: "none"
}); });
return; return;
} }
if (this.inputAmount == '') { if (that.inputAmount == '') {
uni.showToast({ uni.showToast({
title: '请选择价格', title: '请选择价格',
icon: "none" icon: "none"
}); });
return false; return;
}
let params = {
"orderPrice": this.orderPrice,
"payPrice": this.inputAmount,
"rechargeContent": this.inputPhone,
"rechargeModel": this.amoutType,
"agentKey": this.codesVlues,
"objectId": this.inputAmountId,
}
uni.showLoading({
title: '加载中...'
})
addOrderPay(params).then(res => {
uni.hideLoading()
if (res.return_code == '000000') {
this.orderToUnionPayphone(res.return_data.id);
} else {
uni.showToast({
title: res.return_msg,
icon: "none"
})
}
})
},
//
orderToUnionPayphone(item) {
let params = {
"orderId": item
} }
orderToUnionPayphone(params).then(res => { uni.showToast({
if (res.return_code == '000000') { title: '提交订单...',
this.uniontopay(res.return_data.prepayid); icon: 'none',
} else { duration: 2000,
uni.showToast({ success() {
title: res.return_msg, uni.navigateTo({
icon: 'none' url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.orderPrice +
'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
'&rechargeModel=' + that.amoutType +
'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
}) })
} }
}) })
},
// }
uniontopay(item) {
let that = this;
upsdk.pluginReady(function() {
upsdk.pay({
tn: item,
success: function(res) {
uni.showToast({
title: '支付成功'
})
uni.reLaunch({
url: '/pages/tabBar/user/user'
});
},
fail: function(err) {
uni.showToast({
title: err.msg,
icon: 'none',
duration: 2000
})
// , err.msg , TN,
}
});
});
},
} }
} }
</script> </script>

@ -0,0 +1,413 @@
<template>
<view>
<view class="block">
<view class="content">
<view class="orderinfo">
<view class="row">
<view class="nominal">支付金额:</view>
<view class="text">{{payPrice}} </view>
</view>
</view>
</view>
</view>
<view class="block">
<view class="title">
选择支付方式
</view>
<view class="content">
<view class="pay-list">
<view class="width100" v-for="(item,index) in paytypeList" :key="index">
<view class="row" v-if="item == 3" @tap="paytype='3'">
<view class="left">
<image style="border-radius: 50%;" src='../../../static/img/ghkpay.png'></image>
</view>
<view class="center">
汇联通工会卡(余额:{{tongCardPrice}})
</view>
<view class="right">
<radio :checked="paytype=='3'" @click="changeRiado()" color="#0083f5" />
</view>
</view>
<view class="row" v-if="item == 4" @tap="paytype='4'">
<view class="left">
<image src="../../../static/img/unionpay.png"></image>
</view>
<view class="center">
银联支付
</view>
<view class="right">
<radio :checked="paytype=='4'" color="#0083f5" />
</view>
</view>
</view>
</view>
</view>
</view>
<view class="pay">
<view class="btn" @tap="orderToPay">立即支付</view>
<view class="tis">
点击立即支付即代表您同意<view class="terms">
条款协议
</view>
</view>
</view>
<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" />
</view>
</template>
<script>
import {
getHuiLianTongCardBalance,
hltUnionCardPayghk,
findUser,
findById,
orderToUnionPay
} from '../../../Utils/Api.js'
import ssPaymentPassword from '@/components/sanshui-payment-password/index.vue';
let app = getApp();
export default {
components: {
ssPaymentPassword
},
data() {
return {
amount: 0,
imagewxUrl: app.globalData.imageWxImg,
orderNo: '',
goodsid: '', //id
user: '',
PaymentPassword: '',
tongCardPrice: 0,
payPrice: '', //
oilPirce: 0, //
paytype: '', //
paytypeList: [], //
rechargeDes: '', //
};
},
onLoad(e) {
this.orderNo = e.orderId;
this.goodsid = e.goodsId;
this.payPrice = e.payPrice;
if (!app.globalData.userInfo) {
this.findUser();
}
},
onShow() {
let that = this;
that.user = app.globalData.userInfo;
if (this.user.hltCardNo) {
that.getHuiLianTongCardBalance();
}
that.findById();
if (app.globalData.userInfo) {
that.findUser();
}
},
methods: {
//
findById() {
uni.showLoading({
title: '加载中'
})
let datas = {
platformId: 3,
id: this.goodsid
}
findById(datas).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.rechargeDes = res.return_data;
this.paytypeList = res.return_data.productPayTypeString.split(',');
this.paytypeList = this.paytypeList.slice(0, this.paytypeList.length - 1);
}
});
},
//
findUser() {
let params;
findUser(params).then(res => {
if (res.return_code == '000000') {
app.globalData.userInfo = res.return_data;
this.user = res.return_data;
if (res.return_data.oilCard) {
this.oilPirce = res.return_data.oilCard.amount;
}
uni.setStorage({
key: "user",
data: res.return_data
})
}
});
},
//
changeRiado() {
if (!this.user.isSetHltCard) {
uni.showToast({
icon: 'none',
title: '当前账号还未绑定,前往绑定',
duration: 2000,
success() {
setTimeout(() => {
uni.navigateTo({
url: '../../pages/user/bindingCard/bindingCard'
})
}, 1000)
}
});
return;
}
},
//
orderToUnionPay() {
let params = {
"orderId": this.orderNo
}
orderToUnionPay(params).then(res => {
if (res.return_code == '000000') {
this.uniontopay(res.return_data.prepayid);
} else {
uni.showToast({
title: res.return_msg,
icon: 'none'
})
}
})
},
//
uniontopay(item) {
let that = this;
upsdk.pluginReady(function() {
upsdk.pay({
tn: item,
success: function(res) {
uni.showToast({
title: '支付成功'
})
uni.reLaunch({
url: '../Phone-recharge-details/Phone-recharge-details?id=' +
that.orderId
})
},
fail: function(err) {
uni.navigateBack({})
uni.showToast({
title: err.msg,
icon: 'none',
duration: 2000
})
}
});
});
},
//
//
getHuiLianTongCardBalance() {
let params = {
cardNo: this.user.hltCardNo.cardNo
}
getHuiLianTongCardBalance(params).then(res => {
if (res.return_code == '000000') {
this.tongCardPrice = res.return_data.balance;
}
});
},
//
orderToPay() {
let that = this;
if (that.paytype == '3') {
if (that.tongCardPrice < that.payPrice) {
uni.showToast({
icon: 'none',
title: '工会卡余额不足',
duration: 2000,
});
return;
}
if (!that.user.isSetPayPwd) {
uni.navigateTo({
url:'../../login/updatePas/updatePas'
})
return;
}
if (!that.user.isSetHltCard) {
uni.showToast({
icon: 'none',
title: '当前账号还未绑定,前往绑定',
duration: 2000,
success() {
setTimeout(() => {
uni.navigateTo({
url:'../../user/bindingCard/bindingCard'
})
}, 1000)
}
});
return;
}
that.$refs.paymentPassword.modalFun('show');
return;
}
if (that.paytype == '4') {
that.orderToUnionPay();
return;
}
uni.showToast({
title: '请选择支付方式',
icon: 'none',
duration: 2000
})
},
submitHandle(e) {
this.PaymentPassword = e.value;
uni.showLoading({
title: '支付中...'
})
if (this.paytype == '3') {
let params = {
"orderId": this.orderNo,
"cardNo": this.user.hltCardNo.cardNo,
"password": this.PaymentPassword
}
hltUnionCardPayghk(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
uni.showToast({
title: '支付成功'
})
uni.reLaunch({
url: '../Phone-recharge-details/Phone-recharge-details?id=' +
that.orderNo
})
return;
}
if (res.return_code == '102130') {
uni.navigateTo({
url: '../../pages/login/updatePas/updatePas'
})
return;
}
uni.showToast({
title: res.return_msg,
icon: 'none'
})
})
return;
}
}
}
}
</script>
<style lang="scss">
.block {
width: 94%;
padding: 0 3% 40upx 3%;
.title {
width: 100%;
font-size: 34upx;
}
.content {
.orderinfo {
width: 100%;
border-bottom: solid 1upx #eee;
.row {
width: 100%;
height: 90upx;
display: flex;
align-items: center;
.nominal {
flex-shrink: 0;
font-size: 32upx;
color: #7d7d7d;
}
.text {
width: 70%;
margin-left: 10upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 32upx;
}
}
}
.pay-list {
width: 100%;
border-bottom: solid 1upx #eee;
.row {
width: 100%;
height: 120upx;
display: flex;
align-items: center;
.left {
width: 100upx;
flex-shrink: 0;
display: flex;
align-items: center;
image {
width: 80upx;
height: 80upx;
}
}
.center {
width: 100%;
font-size: 30upx;
}
.right {
width: 100upx;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
}
}
}
}
}
.pay {
margin-top: 20upx;
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
.btn {
width: 70%;
height: 80upx;
border-radius: 80upx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #0083f5;
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
}
.tis {
margin-top: 10upx;
width: 100%;
font-size: 24upx;
display: flex;
justify-content: center;
align-items: baseline;
color: #999;
.terms {
color: #5a9ef7;
}
}
}
</style>

@ -0,0 +1,964 @@
<template>
<view>
<view class="width94 comorder">
<view class="height100p width94 goodsimg">
<image class="flleft" mode="widthFix" v-if="rechargeModel == 3" src="../../../static/img/cz1.jpg"></image>
<image class="flleft" mode="widthFix" v-if="rechargeModel == 2" src="../../../static/img/cz3.jpg"></image>
<image class="flleft" mode="widthFix" v-if="rechargeModel == 1" src="../../../static/img/cz2.jpg"></image>
<view class="tcrig">
<view class="font18 fontwig6 fcor333 text1" v-if="rechargeModel == 1">电信话费充值</view>
<view class="font18 fontwig6 fcor333 text1" v-if="rechargeModel == 2">移动话费充值</view>
<view class="font18 fontwig6 fcor333 text1" v-if="rechargeModel == 3">联通话费充值</view>
<view class="font13 fcor666 mart10">规格: 默认</view>
<view class="price-number mart10">
<view class="price font16">{{orderPrice}}</view>
</view>
</view>
</view>
<view class="width94 line1 mart5 marb5"></view>
<view class="height50 width100 backcorfff">
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
商品总额
</view>
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor999">
{{orderPrice}}
</view>
</view>
<view class="width94 line1 mart5 marb5"></view>
<view class="height50 width100 backcorfff">
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
折扣金额
</view>
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor999">
{{saveprice}}
</view>
</view>
<view class="width94 line1 mart5 marb5"></view>
<view class="height50 width100 backcorfff" v-if="reType == 2" @click="showPopup()">
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
优惠抵扣<text class="yhqky">{{OrderPreList.length}}张可用</text>
</view>
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
style="align-items: center;" v-if="deductionPrice == 0">
未使用
<image style="width: 40rpx;height: 40rpx;" src="../../../static/img/jt.png"></image>
</view>
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcoreb5 alijun"
style="align-items: center;" v-else>
-{{deductionPrice}}
<image style="width: 40rpx;height: 40rpx;" src="../../../static/img/jt.png"></image>
</view>
</view>
</view>
<view class="width94 comorder mart10">
<!-- <view class="fotct paddtop20 fcor666 font14 fontspec" style="margin-left: 30%;">抵扣金额 : ¥{{priceValue[1] / 10 /10}}
</view> -->
<view class="width92 alijusstart paddtop20">
<view class="width30 fcor333 fontwig6 font16">
积分抵扣
</view>
<view class="cj-slider">
<view class="flleft fotct font14 fcor666" style="width: 15%;">0</view>
<cj-slider style="width: 60%; float:left;" v-if="isDiscount" v-model="priceValue" :min="0"
:max="availIntegal" :step="1" :blockWidth="40" @start="blockStart" @moving="blockMoving"
@end="blockEnd" />
<!-- <cj-slider style="width: 60%; float:left;" v-if="isDiscount == 2" v-model="priceValue" :min="0"
:max="availIntegal" :step="1" :blockWidth="40" @start="blockStart" @moving="blockMoving"
@end="blockEnd" /> -->
<view class="flright fotrt font14 fcor666" style="width: 25%;">{{availIntegal}}</view>
</view>
</view>
<view class="width94 line1 mart15 marb5"></view>
<view class="height50 width100 backcorfff">
<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;">
抵扣金额
</view>
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
style="align-items: center;">
¥{{priceValue[1] / 100}}
</view>
</view>
<view class="width94 line1 mart5 marb5"></view>
<view class="height50 width100 backcorfff">
<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
支付方式
</view>
</view>
<view class="width100" v-for="(item,index) in paytypeList" :key="index">
<view class="width94 line1 mart5 marb5" v-if="item == 4"></view>
<view class="height50 width100 backcorfff" @tap="paytype='4'" v-if="item == 4">
<view class="width50 flleft fcor666 fontwig6 font16" style="padding-left: 4%;">
银联支付
</view>
<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
style="align-items: center;" v-if="isUse">
<radio :checked="paytype=='4'" color="#0083f5" />
</view>
</view>
<view class="width94 line1 mart5 marb5" v-if="item == 3"></view>
<view class="height50 width100 backcorfff" @tap="paytype='3'" v-if="item == 3">
<view class="width70 flleft fcor666 fontwig6 font16 text1" style="padding-left: 4%;">
汇联通工会卡<text class="font14 fcor666 margle">可用余额: {{tongCardPrice}}</text>
</view>
<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
style="align-items: center;" v-if="isUse">
<radio :checked="paytype=='3'" @click="changeRiado()" color="#0083f5" />
</view>
</view>
</view>
</view>
<image :src="imagewxUrl+imgadres1" class="width100 mart20 marb30" mode="widthFix"></image>
<view class="width100 height60"></view>
<view class="footer">
<view class="settlement">
<!-- v-if="paytype == '2' || paytype == '3' " -->
<view class="sum">实付:<view class="money">
{{payPrice}}</view>
<!-- <view class="money aliitem" v-else>
<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfx.png">
</image>{{payPrice*100}}
</view> -->
</view>
<button class="btn" @tap="toPay">立即支付</button>
</view>
</view>
<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" v-for="(items, index) in OrderPreList" :key="items"
@click="radioChanges(items)">
<image mode="widthFix" class="flleft mart10" :src="imageUrl+items.discountImg"></image>
<view class="contrig">
<view class="width80p flleft">
<view class="font16 fontwig6 fcor333 text1 paddtop25">{{items.discountName}}</view>
<view class="font13 fcor999 mart5">有效期至{{items.useEndTime | timeFormat('yyyy-mm-dd')}}</view>
</view>
<view class="width20 flright">
<view class="yhprice">
<radio color="#0083f5" :checked="items.id == memDiscountId" />
</view>
</view>
</view>
</view>
</wybPopup>
<ssPaymentPassword ref="paymentPassword" :mode="1" @submit="submitHandle" />
</view>
</template>
<script>
import {
addOrderPay,
orderToUnionPay,
findUser,
hltUnionCardPayghk,
getHuiLianTongCardBalance,
getUserOrderPreList,
findById
} from '../../../Utils/Api.js';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
import cjSlider from '../../../components/cj-slider/cj-slider.vue';
import ssPaymentPassword from '../../../components/sanshui-payment-password';
let app = getApp();
export default {
components: {
wybPopup,
cjSlider,
ssPaymentPassword
},
data() {
return {
imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg,
imgadres1: 'arrive_time_img.jpeg',
deductionPrice: '0.00',
paytheprice: '',
radioStatus: true,
memDiscountId: '',
user: '',
paytype: '',
PaymentPassword: '',
orderId: '',
jumpType: '',
tongCardPrice: 0,
//
orderPrice: 0,
payPrice: 0,
//
saveprice: 0,
rechargeContent: '',
rechargeModel: '',
objectId: '',
OrderPreList: [],
reType: '', //
rechargeDes: '', //
paytypeList: [], //
priceValue: [0, 0], //
changePrice: '', //
isDiscount: true,
availIntegal: '', //
isUse: true //
};
},
onLoad(options) {
this.orderPrice = options.orderPrice;
this.payPrice = options.payPrice;
this.saveprice = options.payPrice;
this.rechargeContent = options.rechargeContent;
this.rechargeModel = options.rechargeModel;
this.objectId = options.objectId;
this.reType = options.rechargeType;
},
onShow() {
let that = this;
that.findUser();
that.getUserOrderPreList();
},
onHide() {
},
methods: {
//
findById() {
uni.showLoading({
title: '加载中'
})
let datas = {
platformId: 3,
id: this.objectId
}
findById(datas).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
this.rechargeDes = res.return_data;
this.paytypeList = res.return_data.productPayTypeString.split(',');
this.paytypeList = this.paytypeList.slice(0, this.paytypeList.length - 1);
let zkprice = parseFloat(res.return_data.integralDiscount / 100).toFixed(2);
let pprice = parseFloat(res.return_data.payPrice * 100).toFixed(0)
let payprice = parseFloat(res.return_data.payPrice * 100 * zkprice).toFixed(
0);
if (payprice > this.user.gold) {
this.availIntegal = this.user.gold;
} else {
this.availIntegal = payprice;
}
}
});
},
//
findUser() {
findUser().then(res => {
if (res.return_code == '000000') {
app.globalData.userInfo = res.return_data;
this.user = res.return_data;
this.findById();
this.getHuiLianTongCardBalance();
uni.setStorage({
key: "user",
data: res.return_data
})
}
});
},
//
getUserOrderPreList() {
let params = {
useScope: 3
}
getUserOrderPreList(params).then(res => {
if (res.return_code == '000000') {
this.OrderPreList = res.return_data;
}
});
},
//
showPopup() {
this.$refs.popup.show();
},
//
//
getHuiLianTongCardBalance() {
if (!this.user.hltCardNo) {
return;
}
let params = {
cardNo: this.user.hltCardNo.cardNo
}
getHuiLianTongCardBalance(params).then(res => {
if (res.return_code == '000000') {
this.tongCardPrice = res.return_data.balance;
}
});
},
// H5
jumpH5Bding() {
uni.navigateTo({
url: '/pages/login/register'
})
},
//
radioChanges(item) {
this.paytheprice = this.orderPrice;
this.rechangeload();
if (this.memDiscountId == item.id) { //
this.memDiscountId = '';
this.reload();
this.deductionPrice = '0.00';
this.priceCaluc(this.saveprice);
} else { //
this.memDiscountId = item.id;
if (item.discountType == 1) {
//
this.deductionPrice = item.discountPrice;
let oldprice = this.paytheprice - this.deductionPrice;
this.priceCaluc(oldprice);
}
if (item.discountType == 2) {
//
this.deductionPrice = item.discountPrice;
let oldprice = this.paytheprice - this.deductionPrice;
this.priceCaluc(oldprice);
}
if (item.discountType == 3) {
//
this.deductionPrice = parseFloat(this.paytheprice - (this.paytheprice * item.discountPrice))
.toFixed(2);
let oldprice = parseFloat(this.paytheprice * item.discountPrice).toFixed(2);
this.priceCaluc(oldprice);
}
}
this.$refs.popup.hide();
},
//
priceCaluc(item) {
let zkprice = parseFloat(this.rechargeDes.integralDiscount / 100).toFixed(2);
let pprice = parseFloat(item * 100).toFixed(0);
let payprice = parseFloat(item * 100 * zkprice).toFixed(0);
if (payprice > this.user.gold) {
this.availIntegal = this.user.gold;
if (this.availIntegal < this.priceValue[1]) {
this.priceValue[1] = this.user.gold;
this.reload();
}
} else {
this.availIntegal = payprice;
this.priceValue[1] = 0;
this.reload();
}
this.calculatepayPrice();
},
//
calculatepayPrice() {
if (this.deductionPrice == 0) {
this.payPrice = parseFloat(this.saveprice - (parseFloat(this.priceValue[1] / 100).toFixed(2))).toFixed(
2);
} else {
this.payPrice = parseFloat(this.orderPrice - (parseFloat(this.priceValue[1] / 100).toFixed(2)) - this
.deductionPrice).toFixed(2);
}
},
rechangeload() {
this.isUse = false;
this.$nextTick(() => (this.isUse = true))
},
//
reload() {
this.isDiscount = false;
this.$nextTick(() => (this.isDiscount = true))
},
toPay() {
let that = this;
if (that.payPrice == 0) {
if (!that.user.isSetPayPwd) {
uni.navigateTo({
url: '../../pages/login/updatePas/updatePas'
})
return;
}
that.$refs.paymentPassword.modalFun('show');
return;
}
if (that.paytype == '') {
uni.showToast({
title: '请选择支付方式',
icon: 'none',
duration: 2000
})
return;
}
let params = {
"memDiscountId": that.memDiscountId,
"rechargeContent": that.rechargeContent,
"goodsId": that.objectId,
"integralNum": that.priceValue[1],
"password": ''
}
uni.showLoading({
title: '加载中...'
})
addOrderPay(params).then(res => {
uni.hideLoading()
if (res.return_code == '000000') {
that.orderToUnionPay(res.return_data.id);
} else {
uni.showToast({
title: res.return_msg,
icon: "none"
})
}
})
},
//
orderToUnionPay(item) {
let params = {
"orderId": item
}
orderToUnionPay(params).then(res => {
if (res.return_code == '000000') {
this.uniontopay(res.return_data.prepayid);
} else {
uni.showToast({
title: res.return_msg,
icon: 'none'
})
}
})
},
//
changeRiado() {
if (!this.user.isSetHltCard) {
uni.showToast({
icon: 'none',
title: '当前账号还未绑定,前往绑定',
duration: 2000,
success() {
setTimeout(() => {
uni.navigateTo({
url: '../../pages/user/bindingCard/bindingCard'
})
}, 1000)
}
});
return;
}
},
//
showPopup() {
this.$refs.popup.show();
},
//
orderToPayByWx(item) {
let that = this;
if (that.paytype == '3') {
if (that.tongCardPrice < that.payPrice) {
uni.showToast({
icon: 'none',
title: '工会卡余额不足',
duration: 2000,
});
return;
}
if (!that.user.isSetPayPwd) {
uni.navigateTo({
url: '../../pages/login/updatePas/updatePas'
})
return;
}
if (!that.user.isSetHltCard) {
uni.showToast({
icon: 'none',
title: '当前账号还未绑定,前往绑定',
duration: 2000,
success() {
setTimeout(() => {
uni.navigateTo({
url: '../../pages/user/bindingCard/bindingCard'
})
}, 1000)
}
});
return;
}
that.$refs.paymentPassword.modalFun('show');
return;
}
if (that.paytype == '4') {
return;
}
uni.showToast({
title: '请选择支付方式',
icon: 'none',
duration: 2000
})
},
//
uniontopay(item) {
let that = this;
upsdk.pluginReady(function() {
upsdk.pay({
tn: item,
success: function(res) {
uni.showToast({
title: '支付成功'
})
uni.reLaunch({
url: '../Phone-recharge-details/Phone-recharge-details?id=' +
that.orderId
})
},
fail: function(err) {
uni.navigateBack({})
uni.showToast({
title: err.msg,
icon: 'none',
duration: 2000
})
}
});
});
},
submitHandle(e) {
uni.showLoading({
title: '支付中...'
})
this.PaymentPassword = e.value;
if (this.PaymentPassword == '') {
uni.showToast({
title: '请勿手动关闭弹窗',
icon: 'none',
duration: 2000
})
uni.hideLoading();
return;
}
if (this.payPrice == 0) {
let params = {
"memDiscountId": this.memDiscountId,
"rechargeContent": this.rechargeContent,
"goodsId": this.objectId,
"integralNum": this.priceValue[1],
"password": this.PaymentPassword
}
addOrderPay(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.orderId = res.return_data.id;
uni.reLaunch({
url: '../Phone-recharge-details/Phone-recharge-details?id=' +
this.orderId
})
return;
}
if (res.return_code == '102130') {
uni.navigateTo({
url: '../../login/updatePas/updatePas'
})
return;
}
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
});
})
return;
}
let params = {
"orderId": this.orderId,
"cardNo": this.user.hltCardNo.cardNo,
"password": this.PaymentPassword
}
hltUnionCardPayghk(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
uni.showToast({
title: '支付成功'
})
uni.reLaunch({
url: '../Phone-recharge-details/Phone-recharge-details?id=' +
this.orderId
})
return;
}
if (res.return_code == '102130') {
uni.navigateTo({
url: '../../login/updatePas/updatePas'
})
return;
}
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
})
})
},
blockStart() {},
blockMoving() {
// console.log('')
},
//
blockEnd() {
this.isDiscount = 1;
if (this.deductionPrice == 0) {
this.payPrice = parseFloat(this.saveprice - parseFloat(this.priceValue[1] / 100).toFixed(2)).toFixed(
2);
} else {
this.payPrice = parseFloat(this.orderPrice - parseFloat(this.priceValue[1] / 100).toFixed(2) - this
.deductionPrice).toFixed(2);
}
if (this.payPrice == 0) {
this.isUse = false;
this.paytype = '';
} else {
this.isUse = true;
}
},
}
}
</script>
<style lang="scss">
page {
background-color: #f7f7f7;
}
.comorder {
background-color: #FFFFFF;
border-radius: 8px;
}
.j {
width: 40rpx;
height: 40rpx;
margin-top: 30rpx;
}
.cj-slider {
width: 100%;
align-items: center;
display: flex;
}
.goodsimg {
align-items: center;
display: flex;
image {
width: 170rpx;
max-height: 170rpx;
}
}
.yhprice {
margin-top: -30px;
}
.price-number {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 28upx;
height: 40upx;
.price {
color: #FE4545;
display: flex;
max-width: 50%;
align-items: center;
}
.number {
display: flex;
align-items: center;
width: 50%;
text-decoration: line-through;
}
}
.yhqky {
background: #ff0034;
color: #ffffff;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
margin-left: 8px;
padding-top: 2px;
padding-bottom: 2px;
}
.addr {
width: 86%;
padding: 20upx 3%;
margin: 30upx auto 20upx auto;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
border-radius: 20upx;
display: flex;
.icon {
width: 80upx;
height: 80upx;
display: flex;
align-items: center;
image {
width: 60upx;
height: 60upx;
}
}
.tel-name {
width: 100%;
display: flex;
font-size: 32upx;
.tel {
margin-left: 40upx;
}
}
.addres {
width: 100%;
font-size: 26upx;
color: #999;
}
}
.tccs {
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, 0.2);
border: 1px solid #f6f6f6;
border-radius: 8px;
image {
float: left;
width: 170rpx;
max-height: 170rpx;
margin-left: 10px;
}
}
.tcrig {
margin-left: 20rpx;
}
.contrig {
margin-left: 180rpx;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
}
.order {
width: 86%;
padding: 10upx 3%;
margin: 30upx auto 20upx auto;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
border-radius: 20upx;
.row {
margin: 20upx 0;
height: 40upx;
display: flex;
.left {
font-size: 28upx;
}
.right {
margin-left: 40upx;
font-size: 26upx;
color: #999;
input {
font-size: 26upx;
color: #999;
}
}
}
}
.footer {
width: 92%;
padding: 0 4%;
background-color: #fbfbfb;
height: 100upx;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 28upx;
position: fixed;
bottom: 0upx;
z-index: 5;
.settlement {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
.sum {
width: 50%;
font-size: 18px;
margin-right: 10upx;
display: flex;
justify-content: flex-start;
.money {
color: #eb5823;
font-weight: 600;
}
}
.btn {
padding: 0 50rpx;
height: 80rpx;
background-color: #0083f5;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 30upx;
border-radius: 40upx;
}
}
}
.goods-list {
width: 100%;
padding: 0;
.tis {
width: 100%;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32upx;
}
.row {
width: calc(92%);
height: calc(22vw + 40upx);
margin: 20upx auto;
border-radius: 15upx;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
z-index: 4;
border: 0;
.menu {
.icon {
color: #fff;
// font-size: 25upx;
}
position: absolute;
width: 30%;
height: 100%;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
color: #fff;
z-index: 2;
}
.carrier {
.checkbox-box {
padding-left: 20upx;
flex-shrink: 0;
height: 22vw;
margin-right: 20upx;
}
position: absolute;
width: 94%;
margin-left: 3%;
padding: 0 0;
height: 100%;
z-index: 3;
display: flex;
align-items: center;
.goods-info {
width: 100%;
display: flex;
padding-right: 20upx;
.img {
width: 22vw;
height: 22vw;
border-radius: 10upx;
overflow: hidden;
flex-shrink: 0;
margin-right: 10upx;
image {
width: 22vw;
height: 22vw;
}
}
.info {
width: 100%;
height: 22vw;
overflow: hidden;
display: flex;
flex-wrap: wrap;
position: relative;
.title {
width: 100%;
font-size: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
// text-align: justify;
overflow: hidden;
}
.spec {
font-size: 14px;
color: #a7a7a7;
height: 30upx;
display: flex;
align-items: center;
padding: 0;
border-radius: 15upx;
margin-bottom: 20vw;
}
.price-number {
position: absolute;
width: 100%;
bottom: 0upx;
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 28upx;
height: 60upx;
}
}
}
}
}
}
</style>

@ -1,467 +1,504 @@
<template> <template>
<view> <view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 1">待支付</view> <view class="width100 font18 fcorfff fotct height40 backcorf06">{{typeText[recinfo.payStatus]}}</view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 2">已支付</view> <!-- 购买商品列表 -->
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 3">已完成</view> <view class="buy-list">
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 4">已取消</view> <view class="row">
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 5">已退款</view> <view class="goods-info">
<!-- 购买商品列表 --> <view class="img">
<view class="buy-list"> <image mode="widthFix" v-if="recinfo.operatorType == 3" src="../../../static/img/cz1.jpg"></image>
<view class="row"> <image mode="widthFix" v-if="recinfo.operatorType == 2" src="../../../static/img/cz2.jpg"></image>
<view class="goods-info"> <image mode="widthFix" v-if="recinfo.operatorType == 1" src="../../../static/img/cz3.jpg"></image>
<view class="img"> </view>
<image mode="widthFix" :src="imagewxUrl+imgadres1"></image> <view class="info">
</view> <view class="title">{{recinfo.operatorName}}</view>
<view class="info"> <view class="price-number">
<view class="title">{{recinfo.remarks}}</view> {{recinfo.orderPrice}}
<view class="price-number"> </view>
<view class="price">{{recinfo.payPrice}}<text </view>
class="padleft15 font13 fcor999">x1</text></view> </view>
</view> </view>
</view> </view>
</view> <!-- 提示-备注 -->
</view> <view class="order">
</view> <view class="row" v-if="recinfo.orderNo">
<!-- 提示-备注 --> <view class="left">
<view class="order"> 订单流水 :
<view class="row" v-if="recinfo.orderNo"> </view>
<view class="left" > <view class="right">
订单流水号 : {{recinfo.orderNo}}
</view> </view>
<view class="right"> </view>
{{recinfo.orderNo}} <view class="row" v-if="recinfo.paySerialNo">
</view> <view class="left">
支付流水 :
</view>
<view class="right">
{{recinfo.paySerialNo}}
</view>
</view>
<view class="row" v-if="recinfo.payType">
<view class="left">
支付方式 :
</view>
<view class="right" v-if="recinfo.payType == 1">
支付宝
</view>
<view class="right" v-if="recinfo.payType == 2">
微信
</view>
<view class="right" v-if="recinfo.payType == 3">
汇联通工会卡
</view>
</view>
<view class="row" v-if="recinfo.rechargeStatus">
<view class="left">
充值状态 :
</view>
<view class="right" v-if="recinfo.rechargeStatus == 201 || recinfo.rechargeStatus == 204">
充值中
</view>
<view class="right" v-if="recinfo.rechargeStatus == 202">
充值成功
</view>
<view class="right" v-if="recinfo.rechargeStatus == 203">
充值失败
</view>
</view>
<view class="row" v-if="recinfo.orderPrice">
<view class="left">
订单总额 :
</view>
<view class="right">
{{recinfo.orderPrice}}
</view>
</view> </view>
<view class="row" v-if="recinfo.paySerialNo"> <view class="row" v-if="recinfo.discountDeductionPrice">
<view class="left"> <view class="left">
支付流水号 : 优惠抵扣 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.paySerialNo}} {{recinfo.discountDeductionPrice == null ? '0': recinfo.discountDeductionPrice}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.payPrice"> <view class="row" v-if="recinfo.outRechargePrice.payPrice">
<view class="left"> <view class="left">
订单总额 : 应付金 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.payPrice}} {{recinfo.outRechargePrice.payPrice == null ? '0': recinfo.outRechargePrice.payPrice}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.payRealPrice"> <view class="row" v-if="recinfo.integralDeductionPrice">
<view class="left"> <view class="left">
实付金额 : 积分抵扣 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.payRealPrice}} {{recinfo.integralDeductionPrice == null ? '0': recinfo.integralDeductionPrice}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.createTime"> <view class="row">
<view class="left">
下单时间 :
</view>
<view class="right">
{{recinfo.createTime | formatDate('-')}}
</view>
</view>
<view class="row" v-if="recinfo.payTime">
<view class="left"> <view class="left">
支付时间 : 实付金额 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.payTime | formatDate('-')}} {{recinfo.payRealPrice == null ? '0': recinfo.payRealPrice}}
</view> </view>
</view> </view>
<view class="row" v-if="recinfo.cancelTime"> <view class="row">
<view class="left"> <view class="left">
取消时间 : 下单时间 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.cancelTime | formatDate('-')}} {{recinfo.createTimed | formatDate('-')}}
</view> </view>
</view>
<view class="row" v-if="recinfo.payTime">
<view class="left">
支付时间 :
</view>
<view class="right">
{{recinfo.payTime | formatDate('-')}}
</view>
</view>
<view class="row" v-if="recinfo.cancelTime">
<view class="left">
取消时间 :
</view>
<view class="right">
{{recinfo.cancelTime | formatDate('-')}}
</view>
</view> </view>
<view class="row" v-if="recinfo.finishTime"> <view class="row" v-if="recinfo.refundTime">
<view class="left"> <view class="left">
完成时间 : 退款时间 :
</view> </view>
<view class="right"> <view class="right">
{{recinfo.finishTime | formatDate('-')}} {{recinfo.refundTime | formatDate('-')}}
</view> </view>
</view> </view>
</view> <view class="row" v-if="recinfo.finishTime">
<view class="width100 height60"></view> <view class="left">
<view class="footer" v-if="recinfo.status == 1"> 完成时间 :
<view class="settlement"> </view>
<view class="sum">合计: <view class="right">
<view class="money">{{recinfo.payPrice}}</view> {{recinfo.finishTime | formatDate('-')}}
</view> </view>
<view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view> </view>
</view> </view>
</view> <view class="width100 height60"></view>
</view> <view class="footer" v-if="recinfo.payStatus == 101">
</template> <view class="settlement">
<view class="sum">合计:
<script> <view class="money">{{recinfo.payRealPrice}}</view>
import { </view>
paygetOrderById, <view class="btn" @tap="cancelOrder" style="border: 1px solid #0083f5;color: #0083f5;">取消订单</view>
orderToUnionPayphone <view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view>
} from '../../../Utils/Api.js'; </view>
let app = getApp() </view>
export default { </view>
data() { </template>
return {
buylist: [], // <script>
goodsPrice: 0.0, // import {
sumPrice: 0.0, // getPhoneOrderById,
freight: 12.00, // cancelRechargeOrder,
note: '', // } from '../../../Utils/Api.js'
int: 1200, // let app = getApp()
deduction: 0, // export default {
recinfo: '', data() {
orderId: '', return {
imageUrl: app.globalData.imgUrl, buylist: [], //
imagewxUrl: app.globalData.imageWxImg, goodsPrice: 0.0, //
imgadres1: 'dhf.png', sumPrice: 0.0, //
freight: 12.00, //
}; note: '', //
}, int: 1200, //
onShow() { deduction: 0, //
// recinfo: [],
}, orderId: '',
onHide() { imageUrl: app.globalData.imgUrl,
preByOrderInfo: '',
}, typeText: {
onLoad(options) { 101: '等待付款',
this.orderId = options.id; 102: '订单已支付',
this.paygetOrderById(); 100: '订单已完成',
}, 104: '订单已取消',
filters: { 105: '订单已退款'
toFixed: function(x) { },
return parseFloat(x).toFixed(2);
}, };
// },
formatDate: function(value, spe = '/') { onShow() {
let data = new Date(value); //
let year = data.getFullYear(); this.getPhoneOrderById();
let month = data.getMonth() + 1; },
let day = data.getDate(); onHide() {
let h = data.getHours();
let mm = data.getMinutes(); },
let s = data.getSeconds(); onLoad(option) {
month = month >= 10 ? month : "0" + month; this.orderId = option.id
day = day >= 10 ? day : "0" + day; },
h = h >= 10 ? h : "0" + h; filters: {
mm = mm >= 10 ? mm : "0" + mm; toFixed: function(x) {
s = s >= 10 ? s : "0" + s; return parseFloat(x).toFixed(2);
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; },
} //
}, formatDate: function(value, spe = '/') {
methods: { let data = new Date(value);
let year = data.getFullYear();
paygetOrderById() { let month = data.getMonth() + 1;
uni.showLoading({ let day = data.getDate();
title: '加载中...' let h = data.getHours();
}) let mm = data.getMinutes();
let params = { let s = data.getSeconds();
orderId: this.orderId, month = month >= 10 ? month : "0" + month;
} day = day >= 10 ? day : "0" + day;
paygetOrderById(params).then(res => { h = h >= 10 ? h : "0" + h;
if (res.return_code == '000000') { mm = mm >= 10 ? mm : "0" + mm;
uni.hideLoading(); s = s >= 10 ? s : "0" + s;
this.recinfo = res.return_data; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
} else { }
uni.hideLoading() },
} methods: {
}) getPhoneOrderById() {
}, uni.showLoading({
// title: '加载中...'
toPay() { })
let params = { let params = {
"orderId" : this.orderId orderId: this.orderId,
} }
orderToUnionPayphone(params).then(res => { getPhoneOrderById(params).then(res => {
if (res.return_code == '000000') { if (res.return_code == '000000') {
this.uniontopay(res.return_data.prepayid); uni.hideLoading();
} else { this.recinfo = res.return_data;
uni.showToast({ } else {
title: res.return_msg, uni.hideLoading()
icon: 'none' }
}) })
} },
}) //
}, cancelOrder() {
// let that = this;
uniontopay(item) { uni.showModal({
let that = this; title: '取消订单',
upsdk.pluginReady(function() { content: '确定取消此订单?',
upsdk.pay({ success: (res) => {
tn: item, if (res.confirm) {
success: function(res) { uni.showLoading({
uni.showToast({ title: '加载中...'
title: '支付成功' })
}) let params = {
uni.navigateBack({ orderId: this.recinfo.id
}) }
}, cancelRechargeOrder(params).then(res => {
fail: function(err) { if (res.return_code == '000000') {
uni.showToast({ uni.hideLoading();
title: err.msg, uni.showToast({
icon: 'none', title: res.return_data,
duration: 2000 icon: 'none',
}) duration: 2000
// , err.msg , TN, })
} let pages = getCurrentPages() //
}); let prePage = pages[pages.length - 2] //
}); prePage.$vm.reFresh = Math.random() //
}, uni.navigateBack() //
} } else {
} uni.showToast({
</script> title: res.return_msg,
icon: 'none',
<style lang="scss"> duration: 2000
.addr { })
width: 86%; uni.hideLoading()
padding: 20upx 3%; }
margin: 30upx auto 20upx auto; })
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); } else if (res.cancel) {
border-radius: 20upx; console.log('用户点击取消');
display: flex; }
}
.icon { });
width: 80upx; },
height: 80upx; toPay() {
display: flex; uni.redirectTo({
align-items: center; url: '../recharge-pay/recharge-pay?goodsId=' + this.recinfo.goodsId + '&payPrice=' + this
.recinfo.payRealPrice+'&orderId='+this.recinfo.id
image { })
width: 60upx; },
height: 60upx; }
} }
} </script>
.tel-name { <style lang="scss">
width: 100%; .addr {
display: flex; width: 86%;
font-size: 32upx; padding: 20upx 3%;
margin: 30upx auto 20upx auto;
.tel { box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
margin-left: 40upx; border-radius: 20upx;
} display: flex;
}
.icon {
.addres { width: 80upx;
width: 100%; height: 80upx;
font-size: 26upx; display: flex;
color: #999; align-items: center;
}
} image {
width: 60upx;
.buy-list { height: 60upx;
width: 86%; }
padding: 10upx 3%; }
margin: 30upx auto 20upx auto;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); .tel-name {
border-radius: 20upx; width: 100%;
display: flex;
.row { font-size: 32upx;
margin: 20rpx 0;
.tel {
.goods-info { margin-left: 40upx;
width: 100%; }
display: flex; }
.img { .addres {
width: 80px; width: 100%;
max-height: 80px; font-size: 26upx;
border-radius: 10upx; color: #999;
overflow: hidden; }
flex-shrink: 0; }
margin-right: 20upx;
.buy-list {
image { width: 86%;
width: 80px; padding: 10upx 3%;
max-height: 80px; margin: 30upx auto 20upx auto;
} box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
} border-radius: 20upx;
.info { .row {
width: 100%; margin: 20rpx 0;
height: 22vw;
overflow: hidden; .goods-info {
display: flex; width: 100%;
flex-wrap: wrap; display: flex;
position: relative;
.img {
.title { width: 80px;
width: 100%; max-height: 80px;
font-size: 32upx; border-radius: 10upx;
display: -webkit-box; overflow: hidden;
-webkit-box-orient: vertical; flex-shrink: 0;
-webkit-line-clamp: 2; margin-right: 10upx;
// text-align: justify;
overflow: hidden; image {
max-height: 50px; width: 80px;
} max-height: 80px;
}
.spec { }
font-size: 22upx;
color: #a7a7a7; .info {
height: 40upx; width: 100%;
display: flex; height: 17vw;
align-items: center; overflow: hidden;
padding: 0 15upx; display: flex;
border-radius: 20upx; flex-wrap: wrap;
margin-bottom: 10px; position: relative;
}
.title {
.zspec { width: 100%;
font-size: 22upx; font-size: 32upx;
background-color: red; display: -webkit-box;
color: #FFFFFF; -webkit-box-orient: vertical;
height: 40upx; -webkit-line-clamp: 2;
line-height: 40rpx; // text-align: justify;
display: flex; overflow: hidden;
align-items: center; max-height: 25px;
padding: 0 15upx; }
border-radius: 20upx;
margin-bottom: 10px; .price-number {
margin-left: 10px; position: absolute;
} width: 100%;
bottom: 0upx;
.price-number { display: flex;
position: absolute; justify-content: space-between;
width: 100%; align-items: flex-end;
top: 50px; font-size: 28upx;
display: flex; height: 40upx;
justify-content: space-between; color: #fe4343;
align-items: flex-end; }
font-size: 28upx; }
height: 40upx; }
}
.price { }
color: #fe4343;
} .order {
width: 86%;
.number { padding: 10upx 3%;
display: flex; margin: 30upx auto 20upx auto;
justify-content: center; box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
align-items: center; border-radius: 20upx;
} .row {
} margin: 20upx 0;
} height: 80rpx;
} line-height: 80rpx;
} border-bottom: 1px solid #f4f4f4;
} display: flex;
.order { .left {
width: 86%; font-size: 28upx;
padding: 10upx 3%; }
margin: 30upx auto 20upx auto;
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); .right {
border-radius: 20upx; margin-left: 40upx;
font-size: 26upx;
.row { color: #999;
margin: 20upx 0;
height: 80rpx; input {
line-height: 80rpx; font-size: 26upx;
border-bottom: 1px solid #f4f4f4; color: #999;
display: flex; }
}
.left { }
font-size: 28upx; }
}
.blck {
.right { width: 100%;
margin-left: 40upx; height: 100upx;
font-size: 26upx; }
color: #999;
.footer {
input { width: 92%;
font-size: 26upx; padding: 0 4%;
color: #999; background-color: #fbfbfb;
} height: 100upx;
} display: flex;
} justify-content: flex-end;
} align-items: center;
font-size: 28upx;
.blck { position: fixed;
width: 100%; bottom: 0upx;
height: 100upx; z-index: 5;
}
.settlement {
.footer { width: 100%;
width: 92%; display: flex;
padding: 0 4%; justify-content: flex-end;
background-color: #fbfbfb; align-items: center;
height: 100upx;
display: flex; .sum {
justify-content: flex-end; color: #FE1A1A;
align-items: center; width: 50%;
font-size: 28upx; font-size: 28upx;
position: fixed; margin-right: 10upx;
bottom: 0upx; display: flex;
z-index: 5; height: 26px;
line-height: 26px;
.settlement { justify-content: flex-start;
width: 100%;
display: flex; .money {
justify-content: flex-end; font-size: 20px;
align-items: center; font-weight: 600;
display: flex;
.sum { align-items: center;
color: #FE1A1A; }
width: 60%; }
font-size: 28upx;
margin-right: 10upx; .btn {
display: flex; padding: 0 20upx;
height: 26px; height: 70rpx;
line-height: 26px; width: 25%;
justify-content: flex-start; margin-left: 10px;
display: flex;
.money { justify-content: center;
font-size: 20px; align-items: center;
font-weight: 600; font-size: 30upx;
display: flex; border-radius: 40upx;
align-items: center; }
} }
} }
.btn { .detail {
padding: 0 20upx; width: 86%;
height: 70rpx; padding: 10upx 3%;
width: 25%; margin: 30upx auto 20upx auto;
margin-left: 10px; box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
display: flex; border-radius: 20upx;
justify-content: center;
align-items: center; .row {
font-size: 30upx; height: 60upx;
border-radius: 40upx; display: flex;
} justify-content: space-between;
} align-items: center;
}
.nominal {
.detail { font-size: 28upx;
width: 86%; }
padding: 10upx 3%;
margin: 30upx auto 20upx auto; .content {
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1); font-size: 26upx;
border-radius: 20upx; color: #0083f5;
}
.row { }
height: 60upx; }
display: flex;
justify-content: space-between;
align-items: center;
.nominal {
font-size: 28upx;
}
.content {
font-size: 26upx;
color: #0083f5;
}
}
}
</style> </style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

@ -1,400 +1,490 @@
<template> <template>
<view> <view>
<!-- 顶部导航 --> <!-- 顶部导航 -->
<view class="topTabBar" :style="{position:headerPosition,top:headerTop}"> <view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)"> <view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view> <view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
</view> </view>
</view> </view>
<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿所以漂浮顶部选项卡使用page本身的滑动 --> <!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿所以漂浮顶部选项卡使用page本身的滑动 -->
<view class="order-list"> <view class="order-list">
<view class="list"> <view class="list">
<view class="onorder" v-if="orderList.length==0"> <view class="onorder" v-if="orderList.length==0">
<image :src="imagewxUrl+imgadres"></image> <image :src="imagewxUrl+imgadres"></image>
</view> </view>
<view class="row" v-for="(row,index) in orderList" :key="index" @click="jumpuniondes(row)"> <view class="row" v-for="(row,index) in orderList" :key="index" @click="jumpDetails(row.id)">
<view class="width96 height40"> <view class="width96 height40">
<view class="width50 flleft aliitem fotlt font16"> <view class="width50 flleft aliitem fotlt font16">
<image src="../../static/img/order1.png" style="width: 50rpx;height: 50rpx;"></image> <image src="../../static/img/order1.png" style="width: 50rpx;height: 50rpx;"></image>
话费充值 话费充值
</view> </view>
<view class="width50 flright fotrt fcor666 font15"> <view class="width50 flright fotrt fcor666 font15">
{{row.createTimed | formatDate('-')}} {{row.createTimed | formatDate('-')}}
</view> </view>
</view> </view>
<view class="width96 line1 mart10"></view> <view class="width96 line1 mart10"></view>
<view class="width96 height60 mart10" @click="jumpDetails(row.id)"> <view class="width96 height60 mart10">
<view class="width70 flleft fotlt "> <view class="width70 flleft fotlt ">
<view class="font16 fontwig6 text1 fcor333"> <view class="font16 fontwig6 text1 fcor333">
{{row.remarks}} {{row.operatorName}}
</view>
<view class="font15 text1 fcor999 mart5">
数量 : 1
</view>
</view>
<view class="width30 flright fotrt fcor666 font15 fotrt">
<view class="font16 fontwig6 text1 fcor333" v-if="row.payRealPrice">
{{row.payRealPrice}}
</view> </view>
<view class="font15 text1 fcor999 mart5"> <view class="font16 fontwig6 text1 fcor333" v-else>
数量 : 1 0
</view> </view>
</view> <view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.payStatus]}}</view>
<view class="width30 flright fotrt fcor666 font15 fotrt"> </view>
<view class="font16 fontwig6 text1 fcor333" v-if="row.payType == 2"> </view>
{{row.payPrice * 100}} <view class="width96 line1 mart10 marb5" v-if="row.payStatus == 101">
</view> </view>
<view class="font16 fontwig6 text1 fcor333 aliitem" style="justify-content: flex-end;" v-else> <view class="btns" v-if="row.payStatus == 101">
{{row.payPrice}} <block>
</view> <view class="default" @tap.stop="cancelRechargeOrder(row.id)">取消订单</view>
<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.status]}}</view> <view class="pay" @tap.stop="toPayment(row)">付款</view>
</view> </block>
</view> </view>
</view>
</view> </view>
</view> </view>
</view> </view>
</view>
</template>
</template> <script>
<script> import {
import { getUserOrderListhuafei,
getUserOrderListhuafei cancelRechargeOrder
} from '../../Utils/Api.js'; } from '../../Utils/Api.js';
let app = getApp() let app = getApp()
export default { export default {
data() { data() {
return { return {
headerPosition: "fixed", headerPosition: "fixed",
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png', imgadres: 'noorder.png',
imgadres1: 'dhf.png', imgadres1: 'dhf.png',
headerTop: "0px", headerTop: "0px",
typeText: { typeText: {
1: '等待付款', 101: '等待付款',
2: '订单已支付', 102: '订单已支付',
3: '订单已完成', 100: '订单已完成',
5: '订单已取消', 104: '订单已取消',
4: '订单已退款' 105: '订单已退款'
}, },
// 退 // 退
orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'], orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'],
// //
orderList: [], orderList: [],
list: [], tabbarIndex: 0,
tabbarIndex: 0, pageNum: 1,
pageNum: 1, pageSize: 10,
pageSize: 10, isNoMoreData: false,
isNoMoreData: false, loadingText: '',
loadingText: '', typeId: '',
typeId: '', imageUrl: app.globalData.imgUrl,
imageUrl: app.globalData.imgUrl, reFresh: ""
reFresh: "" }
} },
},
onLoad(option) {
onLoad(option) { let tbIndex = parseInt(option.tbIndex) + 1;
// #ifdef H5 this.tabbarIndex = tbIndex;
this.headerTop = '0px'; if (tbIndex == 0) {
// #endif this.typeId = '';
let tbIndex = parseInt(option.tbIndex) + 1; }
this.list = this.orderList[tbIndex]; if (tbIndex == 1) {
this.tabbarIndex = tbIndex; this.typeId = 101;
this.typeId = tbIndex; }
this.getUserOrderListhuafei(); if (tbIndex == 2) {
}, this.typeId = 102;
onPageScroll(e) { }
return; if (tbIndex == 3) {
//iOS this.typeId = 100;
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute"; }
}, if (tbIndex == 4) {
onReachBottom() { this.typeId = 104;
this.getUserOrderListhuafei(); }
}, if (tbIndex == 5) {
filters: { this.typeId = 105;
toFixed: function(x) { }
return parseFloat(x).toFixed(2); this.getUserOrderListhuafei();
}, },
// onPageScroll(e) {
formatDate: function(value, spe = '/') { return;
let data = new Date(value); //iOS
let year = data.getFullYear(); this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
let month = data.getMonth() + 1; },
let day = data.getDate(); onReachBottom() {
let h = data.getHours(); this.getUserOrderListhuafei();
let mm = data.getMinutes(); },
let s = data.getSeconds(); filters: {
month = month >= 10 ? month : "0" + month; toFixed: function(x) {
day = day >= 10 ? day : "0" + day; return parseFloat(x).toFixed(2);
h = h >= 10 ? h : "0" + h; },
mm = mm >= 10 ? mm : "0" + mm; //
s = s >= 10 ? s : "0" + s; formatDate: function(value, spe = '/') {
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; let data = new Date(value);
} let year = data.getFullYear();
}, let month = data.getMonth() + 1;
methods: { let day = data.getDate();
// let h = data.getHours();
getUserOrderListhuafei() { let mm = data.getMinutes();
uni.showLoading({ let s = data.getSeconds();
title: '加载中...' month = month >= 10 ? month : "0" + month;
}) day = day >= 10 ? day : "0" + day;
if (this.isNoMoreData) { h = h >= 10 ? h : "0" + h;
uni.hideLoading() mm = mm >= 10 ? mm : "0" + mm;
return false; s = s >= 10 ? s : "0" + s;
} return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
let statusId = this.typeId; }
},
let pagenum = this.pageNum; watch: {
let params = { //reFresh,
status: statusId, reFresh: function() {
pageNum: this.pageNum, this.tabbarIndex = 0;
pageSize: this.pageSize this.typeId = '';
} this.pageNum = 1;
this.orderList = []
getUserOrderListhuafei(params).then(res => { this.isNoMoreData = false;
if (res.return_code == '000000' && res.return_data.list != '') { this.getUserOrderListhuafei();
uni.hideLoading(); }
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; },
if (res.return_data.total == (this.pageNum * this.pageSize)) { methods: {
this.isNoMoreData = true; //
} getUserOrderListhuafei() {
this.orderList = this.orderList.concat(res.return_data.list); uni.showLoading({
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; title: '加载中...'
} else { })
this.orderList = []; if (this.isNoMoreData) {
uni.hideLoading() uni.hideLoading()
} return false;
}) }
let statusId = this.typeId;
}, let pagenum = this.pageNum;
showType(tbIndex) { let params = {
this.tabbarIndex = tbIndex; status: statusId,
this.pageNum = 1; pageNum: this.pageNum,
this.orderList = [] pageSize: this.pageSize
this.isNoMoreData = false; }
if (tbIndex == 0) {
this.typeId = ''; getUserOrderListhuafei(params).then(res => {
} else { if (res.return_code == '000000' && res.return_data.list != '') {
this.typeId = tbIndex; uni.hideLoading();
} this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
this.getUserOrderListhuafei(); if (res.return_data.total == (this.pageNum * this.pageSize)) {
}, this.isNoMoreData = true;
// }
jumpuniondes(item){ this.orderList = this.orderList.concat(res.return_data.list);
uni.navigateTo({ this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
url:'../../pages/unionPay/unionorder-des/unionorder-des?id='+item.id } else {
}) this.orderList = [];
} uni.hideLoading()
} }
} })
</script> },
//
<style lang="scss"> jumpDetails(e) {
page { uni.navigateTo({
background-color: #f3f3f3; url: '/pages/unionPay/unionorder-des/unionorder-des?id=' + e
} })
},
.zspec { //
font-size: 22rpx; cancelRechargeOrder(row) {
background-color: #0083f5; let that = this;
color: #FFFFFF; uni.showModal({
height: 40rpx; title: '取消订单',
display: -webkit-box; content: '确定取消此订单?',
display: -webkit-flex; success: (res) => {
display: flex; if (res.confirm) {
width: 44px; uni.showLoading({
-webkit-box-align: center; title: '加载中...'
-webkit-align-items: center; })
align-items: center; let params = {
padding: 0 15rpx; orderId: row,
border-radius: 4px; }
margin-bottom: 10px; cancelRechargeOrder(params).then(res => {
margin-left: 5px; if (res.return_code == '000000') {
} uni.hideLoading();
uni.showToast({
title: res.return_data,
.loading-text { icon: 'none',
width: 100%; duration: 2000
display: flex; })
justify-content: center; this.pageNum = 1;
align-items: center; this.orderList = []
height: 60upx; this.isNoMoreData = false;
color: #979797; that.getUserOrderListhuafei();
font-size: 24upx; } else {
} uni.showToast({
title: res.return_msg,
.topTabBar { icon: 'none',
width: 100%; duration: 2000
position: fixed; })
top: 0; uni.hideLoading()
z-index: 10; }
background-color: #f8f8f8; })
height: 80upx; } else if (res.cancel) {
display: flex; console.log('用户点击取消');
justify-content: space-around; }
}
.grid { });
width: 20%; },
height: 80upx; //
display: flex; toPayment(row) {
justify-content: center; uni.redirectTo({
align-items: center; url: '/pages/unionPay/recharge-pay/recharge-pay?goodsId=' + row.goodsId + '&payPrice=' + row.payRealPrice +
color: #444; '&orderId=' + row.id
font-size: 28upx; })
},
.text { showType(tbIndex) {
height: 76upx; this.tabbarIndex = tbIndex;
display: flex; this.pageNum = 1;
align-items: center; this.orderList = []
this.isNoMoreData = false;
&.on { if (tbIndex == 0) {
color: #0083f5; this.typeId = '';
border-bottom: solid 4upx #0083f5; }
} if (tbIndex == 1) {
} this.typeId = 101;
}
} if (tbIndex == 2) {
} this.typeId = 102;
}
.order-list { if (tbIndex == 3) {
margin-top: 80upx; this.typeId = 100;
padding-top: 20upx; }
width: 100%; if (tbIndex == 4) {
this.typeId = 104;
.list { }
width: 94%; if (tbIndex == 5) {
margin: 0 auto; this.typeId = 105;
}
.onorder { this.getUserOrderListhuafei();
width: 100%; },
height: 50vw; }
display: flex; }
justify-content: center; </script>
align-content: center;
flex-wrap: wrap; <style lang="scss">
page {
image { background-color: #f3f3f3;
width: 70vw; }
margin-top: 150px;
} .zspec {
font-size: 22rpx;
.text { background-color: #0083f5;
width: 100%; color: #FFFFFF;
height: 60upx; height: 40rpx;
font-size: 28upx; display: -webkit-box;
color: #444; display: -webkit-flex;
display: flex; display: flex;
justify-content: center; width: 44px;
align-items: center; -webkit-box-align: center;
} -webkit-align-items: center;
} align-items: center;
padding: 0 15rpx;
.row { border-radius: 4px;
width: calc(100% - 40upx); margin-bottom: 10px;
padding: 10upx 20upx; margin-left: 5px;
border-radius: 10upx; }
background-color: #fff;
margin-bottom: 20upx;
.loading-text {
.type { width: 100%;
font-size: 26upx; display: flex;
color: #0083f5; justify-content: center;
height: 50upx; align-items: center;
display: flex; height: 60upx;
align-items: center; color: #979797;
} font-size: 24upx;
}
.order-info {
width: 100%; .topTabBar {
display: flex; width: 100%;
position: fixed;
.left { top: 0;
flex-shrink: 0; z-index: 10;
width: 25vw; background-color: #f8f8f8;
height: 25vw; height: 80upx;
display: flex;
image { justify-content: space-around;
width: 25vw;
height: 25vw; .grid {
border-radius: 10upx; width: 20%;
} height: 80upx;
} display: flex;
justify-content: center;
.right { align-items: center;
width: 100%; color: #444;
margin-left: 10upx; font-size: 28upx;
position: relative;
.text {
.name { height: 76upx;
width: 100%; display: flex;
font-size: 18px; align-items: center;
display: -webkit-box;
-webkit-box-orient: vertical; &.on {
-webkit-line-clamp: 2; color: #0083f5;
overflow: hidden; border-bottom: solid 4upx #0083f5;
} }
}
.spec {
color: #a7a7a7; }
font-size: 14px; }
}
.order-list {
.price-number { margin-top: 80upx;
width: 100%; padding-top: 20upx;
font-size: 15px; width: 100%;
display: flex;
.list {
.price { width: 94%;
font-size: 14px; margin: 0 auto;
margin-right: 5upx;
} .onorder {
width: 100%;
} height: 50vw;
} display: flex;
} justify-content: center;
align-content: center;
.detail { flex-wrap: wrap;
display: flex;
justify-content: flex-end; image {
align-items: flex-end; width: 70vw;
height: 60upx; margin-top: 150px;
font-size: 26upx; }
.sum { .text {
padding: 0 8upx; width: 100%;
display: flex; height: 60upx;
align-items: flex-end; font-size: 28upx;
color: #444;
.price { display: flex;
font-size: 30upx; justify-content: center;
} align-items: center;
} }
}
}
.row {
.btns { width: calc(100% - 40upx);
height: 80upx; padding: 10upx 20upx;
display: flex; border-radius: 10upx;
align-items: center; background-color: #fff;
justify-content: flex-end; margin-bottom: 20upx;
view { .type {
min-width: 120upx; font-size: 26upx;
height: 70rpx; color: #0083f5;
padding: 0 20upx; height: 50upx;
border-radius: 50upx; display: flex;
display: flex; align-items: center;
justify-content: center; }
align-items: center;
font-size: 28upx; .order-info {
margin-left: 20upx; width: 100%;
} display: flex;
.default { .left {
border: solid 1upx #ccc; flex-shrink: 0;
color: #666; width: 25vw;
} height: 25vw;
.pay { image {
background-color: #0083f5; width: 25vw;
color: #FFFFFF; height: 25vw;
} border-radius: 10upx;
} }
} }
}
} .right {
width: 100%;
margin-left: 10upx;
position: relative;
.name {
width: 100%;
font-size: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.spec {
color: #a7a7a7;
font-size: 14px;
}
.price-number {
width: 100%;
font-size: 15px;
display: flex;
.price {
font-size: 14px;
margin-right: 5upx;
}
}
}
}
.detail {
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 60upx;
font-size: 26upx;
.sum {
padding: 0 8upx;
display: flex;
align-items: flex-end;
.price {
font-size: 30upx;
}
}
}
.btns {
height: 80upx;
display: flex;
align-items: center;
justify-content: flex-end;
view {
min-width: 120upx;
height: 70rpx;
padding: 0 20upx;
border-radius: 50upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28upx;
margin-left: 20upx;
}
.default {
border: solid 1upx #ccc;
color: #666;
}
.pay {
background-color: #0083f5;
color: #FFFFFF;
}
}
}
}
}
</style> </style>

@ -700,4 +700,8 @@ $uni-font-size-paragraph:30upx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
display: flex; display: flex;
}
.width20w {
width: 20%;
margin-left: 40%;
} }
Loading…
Cancel
Save