parent
05880d9c1e
commit
e0025a5c46
@ -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.value虽为props值,但是通过$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; |
||||||
|
// 连续触摸的过程会一直触发本方法,但只有手指触发且移动了才被认为是拖动了,才发出事件 |
||||||
|
// 触摸后第一次移动已经将status设置为moving状态,故触摸第二次移动不会触发本事件 |
||||||
|
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)) |
||||||
|
// 不允许滑动的值超过max最大值,百分比也不能超过100 |
||||||
|
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) { |
||||||
|
// $uGetRect为uView自带的节点查询简化方法 |
||||||
|
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> |
@ -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> |
@ -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> |
||||||
|
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 17 KiB |
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> |
||||||
|
Loading…
Reference in new issue