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> |
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 |
Loading…
Reference in new issue