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