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 => {
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 => {
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);
}
//团油计算价格
export const oilPriceCompute = params => {
return POST('GET', `${base}/highGas/oilPriceCompute`, params).then(res => res.data);
export const oilPriceDiscountCompute = params => {
return POST('GET', `${base}/highGas/oilPriceDiscountCompute`, params).then(res => res.data);
}
//查询卡数据字典
@ -204,7 +208,15 @@ export const addOrderPay = 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 => {
@ -215,8 +227,12 @@ export const unionPay = params => {
return POST('POST', `${base}/order/unionPay`, params).then(res => res.data);
}
// 银联话费充值
export const orderToUnionPayphone = params => {
return POST('POST', `${base}/outRechargeOrder/orderToUnionPay`, params).then(res => res.data);
export const orderToUnionPay = params => {
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 => {

@ -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",
"style": {
"navigationBarTitleText": "充值详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"backgroundColorBottom": "#ffffff",
"app-plus": {
"titleNView": false //
}
}
}
}, {
"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": [{
"root": "subPages",
"pages": [{
@ -690,12 +729,10 @@
}, {
"path": "unionPay-orderList/unionPay-orderList",
"style": {
"enablePullDownRefresh": false,
"navigationBarTitleText": "话费订单",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#ffffff",
"app-plus": {
"titleNView": false //
}

@ -66,25 +66,29 @@
<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
<view class="width8 flleft"></view>
<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"
style="border-left: 1px solid #f2f2f2;line-height: 40px;">
{{litre}}L
{{oilLiters}}L
</view>
</view>
<view class="line10 mart15"></view>
<view class="width90 height40 mart10">
<view class="flleft width50 font15 fcor666">加油升数:<text class="fcoreb5 margle"> {{litre}}L</text></view>
<view class="flright width50 font15 fcor666">平台折扣:<text class="fcoreb5 margle"> 0.95</text></view>
</view>
<view class="width90 height40">
<view class="flleft width50 font15 fcor666">平台优惠:<text class="fcoreb5 margle"> 11.7</text></view>
<view class="flright width50 font15 fcor666">加油补贴:<text class="fcoreb5 margle"> ¥0.44</text></view>
</view>
<view class="width90 height40">
<view class="flleft width50 font15 fcor666">每升优惠:<text class="fcoreb5 margle"> 11.7</text></view>
<view class="flright width50 font15 fcor666">本次优惠:<text class="fcoreb5 margle"> ¥0.95</text></view>
</view>
</view>
<view class="line10 mart15"></view>
<view class="width90 height40 mart10">
<view class="flleft width50 font15 fcor666">加油升数:<text class="fcoreb5 margle"> {{oilLiters}}L</text></view>
<view class="flright width50 font15 fcor666">平台折扣:<text class="fcoreb5 margle"> {{discount}}</text></view>
</view>
<view class="width90 height40">
<view class="flleft width50 font15 fcor666">平台优惠:<text class="fcoreb5 margle"> ¥{{pricePreferences}}</text>
</view>
<view class="flright width50 font15 fcor666">加油补贴:<text class="fcoreb5 margle"> ¥{{oilSubsidy}}</text>
</view>
</view>
<view class="width90 height40">
<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="list width90">
<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
@ -139,7 +143,7 @@
getGasDetailByStoreKey,
addOrder,
getDictionaryByCodeTypeOl,
oilPriceCompute
oilPriceDiscountCompute
} from '../../../Utils/Api.js';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
let app = getApp();
@ -193,6 +197,12 @@
oilType: '',
distance: 9999, //
xzMoney: '300', //
oilLiters: '0', //
discount: '0', //
oilSubsidy: '0', //
litersPreferences: '0', //
pricePreferences: '0', //
totalPreferences: '0', //
}
},
onLoad(options) {
@ -301,29 +311,29 @@
this.gasOilNo = item.oilNo;
this.priceVip = item.priceVip;
this.priceOfficial = item.priceOfficial;
this.priceGun = item.priceGun;
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.priceGun = item.priceGun;
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
this.$refs.popup.hide();
},
//
changeValue2(item) {
this.gunNo = item.gunNo;
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.gunNo = item.gunNo;
this.totalPrice = '0.00';
this.discountPrice = '0.00';
this.inputMoney = '';
this.oilLiters = '0';
this.discount = '0';
this.oilSubsidy = '0';
this.litersPreferences = '0';
this.pricePreferences = '0';
this.totalPreferences = '0';
this.$refs.popup.hide();
},
@ -347,7 +357,7 @@
var a = /^[0-9]+(\.[0-9]{1})?$/;
var b = /^[0-9]+(.[0-9]{1})?$/;
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({
title: '请输入正确加油金额',
icon: "none",
@ -357,56 +367,61 @@
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;
}
// 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)) {
uni.showToast({
title: '加油金额不能超过' + this.xzMoney + '元',
icon: "none",
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.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);
// }
this.oilPriceDiscountCompute();
},
//
oilPriceCompute() {
oilPriceDiscountCompute() {
let datas = {
"price": this.inputMoney,
"goodsId": this.counId,
"oilNo": this.gasOilNo,
}
oilPriceCompute(datas).then(res => {
"oilNo": this.gasOilNo
}
oilPriceDiscountCompute(datas).then(res => {
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) {
// 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);
}
} 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="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="icon" :class="row.icon"></view>
</view>
@ -143,7 +145,8 @@
headerPosition: "fixed",
textnum: '',
textSend: '',
therrNum: '',
therrNum: '',
rechargeOrderNum:'', //
headerTop: null,
statusTop: null,
showHeader: true,
@ -296,7 +299,8 @@
this.user = res.return_data;
this.textnum = res.return_data.unusedCouponNum;
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({
key: "user",
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="block">
<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 class="line1 width100 backcorfff"></view>
</view>
@ -17,10 +18,10 @@
选择金额
</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 && item.discount != 100">{{item.discount}} </view>
<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
@click="select(item)">
<view class="heTitle">{{item.rechargePrice}}</view>
<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}</view>
<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
</view>
</view>
@ -116,8 +117,7 @@
let app = getApp();
import {
getListOutRechargePrice,
addOrderPay,
orderToUnionPayphone
addOrderPay
} from '../../../Utils/Api.js';
import QSTabs from '../../../components/QS-tabs/QS-tabs.vue';
export default {
@ -171,8 +171,8 @@
},
methods: {
select(amoutinfos) {
this.inputAmount = amoutinfos.realPrice;
this.orderPrice = amoutinfos.price;
this.inputAmount = amoutinfos.payPrice;
this.orderPrice = amoutinfos.rechargePrice;
this.inputAmountId = amoutinfos.id;
this.amoutstatus = amoutinfos.status;
},
@ -198,9 +198,9 @@
title: '加载中...'
})
let params = {
type: item,
operatorType: item,
regionId: app.globalData.cityId,
showType: 3,
platformId: 3,
rechargeType: this.swiperCurrent
}
getListOutRechargePrice(params).then(res => {
@ -216,8 +216,9 @@
/**
* 提交订单
*/
addOrderPay() {
if (this.amoutstatus == 2) {
addOrderPay() {
let that = this;
if (that.amoutstatus == 2) {
uni.showToast({
title: '当前面值已售空',
duration: 2000,
@ -225,92 +226,42 @@
});
return;
}
if (this.inputPhone == '') {
if (that.inputPhone == '') {
uni.showToast({
title: '请输入充值号码',
icon: "none"
});
return;
}
if (this.inputPhone.length != 11) {
if (that.inputPhone.length != 11) {
uni.showToast({
title: '请输入正确充值号码',
icon: "none"
});
return;
}
if (this.inputAmount == '') {
if (that.inputAmount == '') {
uni.showToast({
title: '请选择价格',
icon: "none"
});
return false;
}
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
return;
}
orderToUnionPayphone(params).then(res => {
if (res.return_code == '000000') {
this.uniontopay(res.return_data.prepayid);
} else {
uni.showToast({
title: res.return_msg,
icon: 'none'
uni.showToast({
title: '提交订单...',
icon: 'none',
duration: 2000,
success() {
uni.navigateTo({
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>

@ -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>
<view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 1">待支付</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="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 4">已取消</view>
<view class="width100 font18 fcorfff fotct height40 backcorf06" v-if="recinfo.status == 5">已退款</view>
<!-- 购买商品列表 -->
<view class="buy-list">
<view class="row">
<view class="goods-info">
<view class="img">
<image mode="widthFix" :src="imagewxUrl+imgadres1"></image>
</view>
<view class="info">
<view class="title">{{recinfo.remarks}}</view>
<view class="price-number">
<view class="price">{{recinfo.payPrice}}<text
class="padleft15 font13 fcor999">x1</text></view>
</view>
</view>
</view>
</view>
</view>
<!-- 提示-备注 -->
<view class="order">
<view class="row" v-if="recinfo.orderNo">
<view class="left" >
订单流水号 :
</view>
<view class="right">
{{recinfo.orderNo}}
</view>
<template>
<view>
<view class="width100 font18 fcorfff fotct height40 backcorf06">{{typeText[recinfo.payStatus]}}</view>
<!-- 购买商品列表 -->
<view class="buy-list">
<view class="row">
<view class="goods-info">
<view class="img">
<image mode="widthFix" v-if="recinfo.operatorType == 3" src="../../../static/img/cz1.jpg"></image>
<image mode="widthFix" v-if="recinfo.operatorType == 2" src="../../../static/img/cz2.jpg"></image>
<image mode="widthFix" v-if="recinfo.operatorType == 1" src="../../../static/img/cz3.jpg"></image>
</view>
<view class="info">
<view class="title">{{recinfo.operatorName}}</view>
<view class="price-number">
{{recinfo.orderPrice}}
</view>
</view>
</view>
</view>
</view>
<!-- 提示-备注 -->
<view class="order">
<view class="row" v-if="recinfo.orderNo">
<view class="left">
订单流水 :
</view>
<view class="right">
{{recinfo.orderNo}}
</view>
</view>
<view class="row" v-if="recinfo.paySerialNo">
<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 class="row" v-if="recinfo.paySerialNo">
<view class="row" v-if="recinfo.discountDeductionPrice">
<view class="left">
支付流水号 :
优惠抵扣 :
</view>
<view class="right">
{{recinfo.paySerialNo}}
{{recinfo.discountDeductionPrice == null ? '0': recinfo.discountDeductionPrice}}
</view>
</view>
<view class="row" v-if="recinfo.payPrice">
<view class="row" v-if="recinfo.outRechargePrice.payPrice">
<view class="left">
订单总额 :
应付金 :
</view>
<view class="right">
{{recinfo.payPrice}}
{{recinfo.outRechargePrice.payPrice == null ? '0': recinfo.outRechargePrice.payPrice}}
</view>
</view>
<view class="row" v-if="recinfo.payRealPrice">
<view class="row" v-if="recinfo.integralDeductionPrice">
<view class="left">
实付金额 :
积分抵扣 :
</view>
<view class="right">
{{recinfo.payRealPrice}}
{{recinfo.integralDeductionPrice == null ? '0': recinfo.integralDeductionPrice}}
</view>
</view>
<view class="row" v-if="recinfo.createTime">
<view class="left">
下单时间 :
</view>
<view class="right">
{{recinfo.createTime | formatDate('-')}}
</view>
</view>
<view class="row" v-if="recinfo.payTime">
<view class="row">
<view class="left">
支付时间 :
实付金额 :
</view>
<view class="right">
{{recinfo.payTime | formatDate('-')}}
{{recinfo.payRealPrice == null ? '0': recinfo.payRealPrice}}
</view>
</view>
<view class="row" v-if="recinfo.cancelTime">
<view class="left">
取消时间 :
</view>
<view class="right">
{{recinfo.cancelTime | formatDate('-')}}
</view>
<view class="row">
<view class="left">
下单时间 :
</view>
<view class="right">
{{recinfo.createTimed | formatDate('-')}}
</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 class="row" v-if="recinfo.finishTime">
<view class="row" v-if="recinfo.refundTime">
<view class="left">
完成时间 :
退款时间 :
</view>
<view class="right">
{{recinfo.finishTime | formatDate('-')}}
{{recinfo.refundTime | formatDate('-')}}
</view>
</view>
</view>
<view class="width100 height60"></view>
<view class="footer" v-if="recinfo.status == 1">
<view class="settlement">
<view class="sum">合计:
<view class="money">{{recinfo.payPrice}}</view>
</view>
<view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view>
</view>
</view>
</view>
</template>
<script>
import {
paygetOrderById,
orderToUnionPayphone
} from '../../../Utils/Api.js';
let app = getApp()
export default {
data() {
return {
buylist: [], //
goodsPrice: 0.0, //
sumPrice: 0.0, //
freight: 12.00, //
note: '', //
int: 1200, //
deduction: 0, //
recinfo: '',
orderId: '',
imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg,
imgadres1: 'dhf.png',
};
},
onShow() {
//
},
onHide() {
},
onLoad(options) {
this.orderId = options.id;
this.paygetOrderById();
},
filters: {
toFixed: function(x) {
return parseFloat(x).toFixed(2);
},
//
formatDate: function(value, spe = '/') {
let data = new Date(value);
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
let h = data.getHours();
let mm = data.getMinutes();
let s = data.getSeconds();
month = month >= 10 ? month : "0" + month;
day = day >= 10 ? day : "0" + day;
h = h >= 10 ? h : "0" + h;
mm = mm >= 10 ? mm : "0" + mm;
s = s >= 10 ? s : "0" + s;
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
}
},
methods: {
paygetOrderById() {
uni.showLoading({
title: '加载中...'
})
let params = {
orderId: this.orderId,
}
paygetOrderById(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
this.recinfo = res.return_data;
} else {
uni.hideLoading()
}
})
},
//
toPay() {
let params = {
"orderId" : this.orderId
}
orderToUnionPayphone(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.navigateBack({
})
},
fail: function(err) {
uni.showToast({
title: err.msg,
icon: 'none',
duration: 2000
})
// , err.msg , TN,
}
});
});
},
}
}
</script>
<style lang="scss">
.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;
}
}
.buy-list {
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: 20rpx 0;
.goods-info {
width: 100%;
display: flex;
.img {
width: 80px;
max-height: 80px;
border-radius: 10upx;
overflow: hidden;
flex-shrink: 0;
margin-right: 20upx;
image {
width: 80px;
max-height: 80px;
}
}
.info {
width: 100%;
height: 22vw;
overflow: hidden;
display: flex;
flex-wrap: wrap;
position: relative;
.title {
width: 100%;
font-size: 32upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
// text-align: justify;
overflow: hidden;
max-height: 50px;
}
.spec {
font-size: 22upx;
color: #a7a7a7;
height: 40upx;
display: flex;
align-items: center;
padding: 0 15upx;
border-radius: 20upx;
margin-bottom: 10px;
}
.zspec {
font-size: 22upx;
background-color: red;
color: #FFFFFF;
height: 40upx;
line-height: 40rpx;
display: flex;
align-items: center;
padding: 0 15upx;
border-radius: 20upx;
margin-bottom: 10px;
margin-left: 10px;
}
.price-number {
position: absolute;
width: 100%;
top: 50px;
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 28upx;
height: 40upx;
.price {
color: #fe4343;
}
.number {
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
}
.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: 80rpx;
line-height: 80rpx;
border-bottom: 1px solid #f4f4f4;
display: flex;
.left {
font-size: 28upx;
}
.right {
margin-left: 40upx;
font-size: 26upx;
color: #999;
input {
font-size: 26upx;
color: #999;
}
}
}
}
.blck {
width: 100%;
height: 100upx;
}
.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 {
color: #FE1A1A;
width: 60%;
font-size: 28upx;
margin-right: 10upx;
display: flex;
height: 26px;
line-height: 26px;
justify-content: flex-start;
.money {
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
}
}
.btn {
padding: 0 20upx;
height: 70rpx;
width: 25%;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30upx;
border-radius: 40upx;
}
}
}
.detail {
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 {
height: 60upx;
display: flex;
justify-content: space-between;
align-items: center;
.nominal {
font-size: 28upx;
}
.content {
font-size: 26upx;
color: #0083f5;
}
}
}
</view>
<view class="row" v-if="recinfo.finishTime">
<view class="left">
完成时间 :
</view>
<view class="right">
{{recinfo.finishTime | formatDate('-')}}
</view>
</view>
</view>
<view class="width100 height60"></view>
<view class="footer" v-if="recinfo.payStatus == 101">
<view class="settlement">
<view class="sum">合计:
<view class="money">{{recinfo.payRealPrice}}</view>
</view>
<view class="btn" @tap="cancelOrder" style="border: 1px solid #0083f5;color: #0083f5;">取消订单</view>
<view class="btn" @tap="toPay" style="background-color: #0083f5;color: #fff;">去支付</view>
</view>
</view>
</view>
</template>
<script>
import {
getPhoneOrderById,
cancelRechargeOrder,
} from '../../../Utils/Api.js'
let app = getApp()
export default {
data() {
return {
buylist: [], //
goodsPrice: 0.0, //
sumPrice: 0.0, //
freight: 12.00, //
note: '', //
int: 1200, //
deduction: 0, //
recinfo: [],
orderId: '',
imageUrl: app.globalData.imgUrl,
preByOrderInfo: '',
typeText: {
101: '等待付款',
102: '订单已支付',
100: '订单已完成',
104: '订单已取消',
105: '订单已退款'
},
};
},
onShow() {
//
this.getPhoneOrderById();
},
onHide() {
},
onLoad(option) {
this.orderId = option.id
},
filters: {
toFixed: function(x) {
return parseFloat(x).toFixed(2);
},
//
formatDate: function(value, spe = '/') {
let data = new Date(value);
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
let h = data.getHours();
let mm = data.getMinutes();
let s = data.getSeconds();
month = month >= 10 ? month : "0" + month;
day = day >= 10 ? day : "0" + day;
h = h >= 10 ? h : "0" + h;
mm = mm >= 10 ? mm : "0" + mm;
s = s >= 10 ? s : "0" + s;
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
}
},
methods: {
getPhoneOrderById() {
uni.showLoading({
title: '加载中...'
})
let params = {
orderId: this.orderId,
}
getPhoneOrderById(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
this.recinfo = res.return_data;
} else {
uni.hideLoading()
}
})
},
//
cancelOrder() {
let that = this;
uni.showModal({
title: '取消订单',
content: '确定取消此订单?',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '加载中...'
})
let params = {
orderId: this.recinfo.id
}
cancelRechargeOrder(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
uni.showToast({
title: res.return_data,
icon: 'none',
duration: 2000
})
let pages = getCurrentPages() //
let prePage = pages[pages.length - 2] //
prePage.$vm.reFresh = Math.random() //
uni.navigateBack() //
} else {
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
})
uni.hideLoading()
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
toPay() {
uni.redirectTo({
url: '../recharge-pay/recharge-pay?goodsId=' + this.recinfo.goodsId + '&payPrice=' + this
.recinfo.payRealPrice+'&orderId='+this.recinfo.id
})
},
}
}
</script>
<style lang="scss">
.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;
}
}
.buy-list {
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: 20rpx 0;
.goods-info {
width: 100%;
display: flex;
.img {
width: 80px;
max-height: 80px;
border-radius: 10upx;
overflow: hidden;
flex-shrink: 0;
margin-right: 10upx;
image {
width: 80px;
max-height: 80px;
}
}
.info {
width: 100%;
height: 17vw;
overflow: hidden;
display: flex;
flex-wrap: wrap;
position: relative;
.title {
width: 100%;
font-size: 32upx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
// text-align: justify;
overflow: hidden;
max-height: 25px;
}
.price-number {
position: absolute;
width: 100%;
bottom: 0upx;
display: flex;
justify-content: space-between;
align-items: flex-end;
font-size: 28upx;
height: 40upx;
color: #fe4343;
}
}
}
}
}
.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: 80rpx;
line-height: 80rpx;
border-bottom: 1px solid #f4f4f4;
display: flex;
.left {
font-size: 28upx;
}
.right {
margin-left: 40upx;
font-size: 26upx;
color: #999;
input {
font-size: 26upx;
color: #999;
}
}
}
}
.blck {
width: 100%;
height: 100upx;
}
.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 {
color: #FE1A1A;
width: 50%;
font-size: 28upx;
margin-right: 10upx;
display: flex;
height: 26px;
line-height: 26px;
justify-content: flex-start;
.money {
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
}
}
.btn {
padding: 0 20upx;
height: 70rpx;
width: 25%;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30upx;
border-radius: 40upx;
}
}
}
.detail {
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 {
height: 60upx;
display: flex;
justify-content: space-between;
align-items: center;
.nominal {
font-size: 28upx;
}
.content {
font-size: 26upx;
color: #0083f5;
}
}
}
</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>
<view>
<!-- 顶部导航 -->
<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
</view>
</view>
<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿所以漂浮顶部选项卡使用page本身的滑动 -->
<view class="order-list">
<view class="list">
<view class="onorder" v-if="orderList.length==0">
<image :src="imagewxUrl+imgadres"></image>
</view>
<view class="row" v-for="(row,index) in orderList" :key="index" @click="jumpuniondes(row)">
<view class="width96 height40">
<view class="width50 flleft aliitem fotlt font16">
<image src="../../static/img/order1.png" style="width: 50rpx;height: 50rpx;"></image>
话费充值
</view>
<view class="width50 flright fotrt fcor666 font15">
{{row.createTimed | formatDate('-')}}
</view>
</view>
<view class="width96 line1 mart10"></view>
<view class="width96 height60 mart10" @click="jumpDetails(row.id)">
<view class="width70 flleft fotlt ">
<view class="font16 fontwig6 text1 fcor333">
{{row.remarks}}
<template>
<view>
<!-- 顶部导航 -->
<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)">
<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view>
</view>
</view>
<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿所以漂浮顶部选项卡使用page本身的滑动 -->
<view class="order-list">
<view class="list">
<view class="onorder" v-if="orderList.length==0">
<image :src="imagewxUrl+imgadres"></image>
</view>
<view class="row" v-for="(row,index) in orderList" :key="index" @click="jumpDetails(row.id)">
<view class="width96 height40">
<view class="width50 flleft aliitem fotlt font16">
<image src="../../static/img/order1.png" style="width: 50rpx;height: 50rpx;"></image>
话费充值
</view>
<view class="width50 flright fotrt fcor666 font15">
{{row.createTimed | formatDate('-')}}
</view>
</view>
<view class="width96 line1 mart10"></view>
<view class="width96 height60 mart10">
<view class="width70 flleft fotlt ">
<view class="font16 fontwig6 text1 fcor333">
{{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 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.payType == 2">
{{row.payPrice * 100}}
</view>
<view class="font16 fontwig6 text1 fcor333 aliitem" style="justify-content: flex-end;" v-else>
{{row.payPrice}}
</view>
<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.status]}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getUserOrderListhuafei
} from '../../Utils/Api.js';
let app = getApp()
export default {
data() {
return {
headerPosition: "fixed",
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png',
imgadres1: 'dhf.png',
headerTop: "0px",
typeText: {
1: '等待付款',
2: '订单已支付',
3: '订单已完成',
5: '订单已取消',
4: '订单已退款'
},
// 退
orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'],
//
orderList: [],
list: [],
tabbarIndex: 0,
pageNum: 1,
pageSize: 10,
isNoMoreData: false,
loadingText: '',
typeId: '',
imageUrl: app.globalData.imgUrl,
reFresh: ""
}
},
onLoad(option) {
// #ifdef H5
this.headerTop = '0px';
// #endif
let tbIndex = parseInt(option.tbIndex) + 1;
this.list = this.orderList[tbIndex];
this.tabbarIndex = tbIndex;
this.typeId = tbIndex;
this.getUserOrderListhuafei();
},
onPageScroll(e) {
return;
//iOS
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
},
onReachBottom() {
this.getUserOrderListhuafei();
},
filters: {
toFixed: function(x) {
return parseFloat(x).toFixed(2);
},
//
formatDate: function(value, spe = '/') {
let data = new Date(value);
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
let h = data.getHours();
let mm = data.getMinutes();
let s = data.getSeconds();
month = month >= 10 ? month : "0" + month;
day = day >= 10 ? day : "0" + day;
h = h >= 10 ? h : "0" + h;
mm = mm >= 10 ? mm : "0" + mm;
s = s >= 10 ? s : "0" + s;
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
}
},
methods: {
//
getUserOrderListhuafei() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let statusId = this.typeId;
let pagenum = this.pageNum;
let params = {
status: statusId,
pageNum: this.pageNum,
pageSize: this.pageSize
}
getUserOrderListhuafei(params).then(res => {
if (res.return_code == '000000' && res.return_data.list != '') {
uni.hideLoading();
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.orderList = this.orderList.concat(res.return_data.list);
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.orderList = [];
uni.hideLoading()
}
})
},
showType(tbIndex) {
this.tabbarIndex = tbIndex;
this.pageNum = 1;
this.orderList = []
this.isNoMoreData = false;
if (tbIndex == 0) {
this.typeId = '';
} else {
this.typeId = tbIndex;
}
this.getUserOrderListhuafei();
},
//
jumpuniondes(item){
uni.navigateTo({
url:'../../pages/unionPay/unionorder-des/unionorder-des?id='+item.id
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f3f3f3;
}
.zspec {
font-size: 22rpx;
background-color: #0083f5;
color: #FFFFFF;
height: 40rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
width: 44px;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0 15rpx;
border-radius: 4px;
margin-bottom: 10px;
margin-left: 5px;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.topTabBar {
width: 100%;
position: fixed;
top: 0;
z-index: 10;
background-color: #f8f8f8;
height: 80upx;
display: flex;
justify-content: space-around;
.grid {
width: 20%;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
color: #444;
font-size: 28upx;
.text {
height: 76upx;
display: flex;
align-items: center;
&.on {
color: #0083f5;
border-bottom: solid 4upx #0083f5;
}
}
}
}
.order-list {
margin-top: 80upx;
padding-top: 20upx;
width: 100%;
.list {
width: 94%;
margin: 0 auto;
.onorder {
width: 100%;
height: 50vw;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
image {
width: 70vw;
margin-top: 150px;
}
.text {
width: 100%;
height: 60upx;
font-size: 28upx;
color: #444;
display: flex;
justify-content: center;
align-items: center;
}
}
.row {
width: calc(100% - 40upx);
padding: 10upx 20upx;
border-radius: 10upx;
background-color: #fff;
margin-bottom: 20upx;
.type {
font-size: 26upx;
color: #0083f5;
height: 50upx;
display: flex;
align-items: center;
}
.order-info {
width: 100%;
display: flex;
.left {
flex-shrink: 0;
width: 25vw;
height: 25vw;
image {
width: 25vw;
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;
}
}
}
}
}
<view class="font16 fontwig6 text1 fcor333" v-else>
0
</view>
<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.payStatus]}}</view>
</view>
</view>
<view class="width96 line1 mart10 marb5" v-if="row.payStatus == 101">
</view>
<view class="btns" v-if="row.payStatus == 101">
<block>
<view class="default" @tap.stop="cancelRechargeOrder(row.id)">取消订单</view>
<view class="pay" @tap.stop="toPayment(row)">付款</view>
</block>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getUserOrderListhuafei,
cancelRechargeOrder
} from '../../Utils/Api.js';
let app = getApp()
export default {
data() {
return {
headerPosition: "fixed",
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'noorder.png',
imgadres1: 'dhf.png',
headerTop: "0px",
typeText: {
101: '等待付款',
102: '订单已支付',
100: '订单已完成',
104: '订单已取消',
105: '订单已退款'
},
// 退
orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'],
//
orderList: [],
tabbarIndex: 0,
pageNum: 1,
pageSize: 10,
isNoMoreData: false,
loadingText: '',
typeId: '',
imageUrl: app.globalData.imgUrl,
reFresh: ""
}
},
onLoad(option) {
let tbIndex = parseInt(option.tbIndex) + 1;
this.tabbarIndex = tbIndex;
if (tbIndex == 0) {
this.typeId = '';
}
if (tbIndex == 1) {
this.typeId = 101;
}
if (tbIndex == 2) {
this.typeId = 102;
}
if (tbIndex == 3) {
this.typeId = 100;
}
if (tbIndex == 4) {
this.typeId = 104;
}
if (tbIndex == 5) {
this.typeId = 105;
}
this.getUserOrderListhuafei();
},
onPageScroll(e) {
return;
//iOS
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
},
onReachBottom() {
this.getUserOrderListhuafei();
},
filters: {
toFixed: function(x) {
return parseFloat(x).toFixed(2);
},
//
formatDate: function(value, spe = '/') {
let data = new Date(value);
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
let h = data.getHours();
let mm = data.getMinutes();
let s = data.getSeconds();
month = month >= 10 ? month : "0" + month;
day = day >= 10 ? day : "0" + day;
h = h >= 10 ? h : "0" + h;
mm = mm >= 10 ? mm : "0" + mm;
s = s >= 10 ? s : "0" + s;
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
}
},
watch: {
//reFresh,
reFresh: function() {
this.tabbarIndex = 0;
this.typeId = '';
this.pageNum = 1;
this.orderList = []
this.isNoMoreData = false;
this.getUserOrderListhuafei();
}
},
methods: {
//
getUserOrderListhuafei() {
uni.showLoading({
title: '加载中...'
})
if (this.isNoMoreData) {
uni.hideLoading()
return false;
}
let statusId = this.typeId;
let pagenum = this.pageNum;
let params = {
status: statusId,
pageNum: this.pageNum,
pageSize: this.pageSize
}
getUserOrderListhuafei(params).then(res => {
if (res.return_code == '000000' && res.return_data.list != '') {
uni.hideLoading();
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
if (res.return_data.total == (this.pageNum * this.pageSize)) {
this.isNoMoreData = true;
}
this.orderList = this.orderList.concat(res.return_data.list);
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
} else {
this.orderList = [];
uni.hideLoading()
}
})
},
//
jumpDetails(e) {
uni.navigateTo({
url: '/pages/unionPay/unionorder-des/unionorder-des?id=' + e
})
},
//
cancelRechargeOrder(row) {
let that = this;
uni.showModal({
title: '取消订单',
content: '确定取消此订单?',
success: (res) => {
if (res.confirm) {
uni.showLoading({
title: '加载中...'
})
let params = {
orderId: row,
}
cancelRechargeOrder(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
uni.showToast({
title: res.return_data,
icon: 'none',
duration: 2000
})
this.pageNum = 1;
this.orderList = []
this.isNoMoreData = false;
that.getUserOrderListhuafei();
} else {
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
})
uni.hideLoading()
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
//
toPayment(row) {
uni.redirectTo({
url: '/pages/unionPay/recharge-pay/recharge-pay?goodsId=' + row.goodsId + '&payPrice=' + row.payRealPrice +
'&orderId=' + row.id
})
},
showType(tbIndex) {
this.tabbarIndex = tbIndex;
this.pageNum = 1;
this.orderList = []
this.isNoMoreData = false;
if (tbIndex == 0) {
this.typeId = '';
}
if (tbIndex == 1) {
this.typeId = 101;
}
if (tbIndex == 2) {
this.typeId = 102;
}
if (tbIndex == 3) {
this.typeId = 100;
}
if (tbIndex == 4) {
this.typeId = 104;
}
if (tbIndex == 5) {
this.typeId = 105;
}
this.getUserOrderListhuafei();
},
}
}
</script>
<style lang="scss">
page {
background-color: #f3f3f3;
}
.zspec {
font-size: 22rpx;
background-color: #0083f5;
color: #FFFFFF;
height: 40rpx;
display: -webkit-box;
display: -webkit-flex;
display: flex;
width: 44px;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 0 15rpx;
border-radius: 4px;
margin-bottom: 10px;
margin-left: 5px;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.topTabBar {
width: 100%;
position: fixed;
top: 0;
z-index: 10;
background-color: #f8f8f8;
height: 80upx;
display: flex;
justify-content: space-around;
.grid {
width: 20%;
height: 80upx;
display: flex;
justify-content: center;
align-items: center;
color: #444;
font-size: 28upx;
.text {
height: 76upx;
display: flex;
align-items: center;
&.on {
color: #0083f5;
border-bottom: solid 4upx #0083f5;
}
}
}
}
.order-list {
margin-top: 80upx;
padding-top: 20upx;
width: 100%;
.list {
width: 94%;
margin: 0 auto;
.onorder {
width: 100%;
height: 50vw;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
image {
width: 70vw;
margin-top: 150px;
}
.text {
width: 100%;
height: 60upx;
font-size: 28upx;
color: #444;
display: flex;
justify-content: center;
align-items: center;
}
}
.row {
width: calc(100% - 40upx);
padding: 10upx 20upx;
border-radius: 10upx;
background-color: #fff;
margin-bottom: 20upx;
.type {
font-size: 26upx;
color: #0083f5;
height: 50upx;
display: flex;
align-items: center;
}
.order-info {
width: 100%;
display: flex;
.left {
flex-shrink: 0;
width: 25vw;
height: 25vw;
image {
width: 25vw;
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>

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