b2894lxlx/yunxinwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

718
package/equipment/checkout/index.vue Executable file
View File

@@ -0,0 +1,718 @@
<template>
<view v-if="!isLoading" class="container" :style="appThemeStyle">
<!-- 订单信息 -->
<view class="order-info">
<!-- 支付剩余时间 -->
<view class="order-countdown">
<text class="m-r-6">剩余时间</text>
<count-down :date="order.expirationTime" separator="zh" theme="text" />
</view>
<!-- 付款金额 -->
<view class="order-amount">
<text class="unit">￥</text>
<text class="amount">{{ 300 + Number(order.pay_price) }}</text>
</view>
</view>
<view class="checkout-item">
<view class="head-info">
<view class="title">订单信息</view>
</view>
<view class="line"></view>
<view class="goods-info">
<image class="image" src="../../../static/order/status/wait_deliver.png" mode="widthFix"></image>
<view class="goods-info-box">
<view class="title">云芯威72v50AH锂电池</view>
<view class="desc">归属门店：白沙店</view>
<view class="desc">租赁时长：3个月</view>
</view>
</view>
<view class="line"></view>
<view class="contacts">
<view class="bms-info">
<view class="item">
<text>电池租金：</text>
<text>300元</text>
</view>
<view class="item">
<text>电池押金：</text>
<text>300元</text>
</view>
<view class="item">
<text>电池保险：</text>
<text>30元</text>
</view>
<view class="item">
<text>合计：</text>
<text class="totao-price">￥{{ 300 + Number(order.pay_price) }}元</text>
</view>
</view>
</view>
<view class="line"></view>
<view class="form-license dis-flex flex-x-center flex-y-center">
<view class="license-radio dis-flex flex-y-center" @click="setIsRead">
<text class="license-icon f-38 iconfont icon-radio"
:class="[isRead ? 'c-violet' : 'col-bb']"></text>
<text class="f-28 col-80">我已阅读并同意</text>
</view>
<text @click="handleShowLicense(0)" class="f-28 c-violet f-blue">{{ xieyiText[0] }}</text>
<text class="f-28 c-violet">与</text>
<text @click="handleShowLicense(1)" class="f-28 c-violet f-blue">{{ xieyiText[1] }}</text>
</view>
</view>
<!-- 支付方式 -->
<view class="payment-method">
<view v-for="(item, index) in methods" :key="index" class="pay-item dis-flex flex-x-between"
@click="handleSelectPayType(index)">
<view class="item-left dis-flex flex-y-center">
<view class="item-left_icon" :class="[item.method]">
<text class="iconfont" :class="[PayMethodIconEnum[item.method]]"></text>
</view>
<view class="item-left_text">
<text>{{ PayMethodEnum[item.method].name }}</text>
</view>
<view v-if="item.method === PayMethodEnum.BALANCE.value" class="user-balance">
<text>(可用￥{{ personal.balance }}元)</text>
</view>
</view>
<view class="item-right col-m" v-if="curPaymentItem && curPaymentItem.method == item.method">
<text class="iconfont icon-check"></text>
</view>
</view>
</view>
<!-- 确认按钮 -->
<view class="footer-fixed">
<view class="btn-wrapper">
<view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">确认支付</view>
</view>
</view>
<!-- 支付确认弹窗 -->
<!-- #ifdef H5 -->
<u-modal v-if="tempUnifyData" v-model="showConfirmModal" title="支付确认" show-cancel-button confirm-text="已完成支付"
:confirm-color="appTheme.mainBg" negative-top="100" :asyncClose="true"
@confirm="onTradeQuery(tempUnifyData.outTradeNo, tempUnifyData.method)">
<view class="modal-content">
<text>请在{{ PayMethodClientNameEnum[tempUnifyData.method] }}内完成支付，如果您已经支付成功，请点击“已完成支付”按钮</text>
</view>
</u-modal>
<!-- #endif -->
<!-- 入驻协议弹窗 -->
<u-modal v-model="showLicense" :title="xieyiText[showConfirmIndex]">
<scroll-view class="pops-content" :scroll-y="true">
<text v-if="showConfirmIndex == 0">{{ license }}</text>
<text v-if="showConfirmIndex == 1">{{ license1 }}</text>
</scroll-view>
</u-modal>
</view>
</template>
<script>
import storage from '@/utils/storage'
import {
inArray,
urlEncode
} from '@/utils/util'
import {
Alipay,
Wechat
} from '@/core/payment'
import CountDown from '@/components/countdown'
import {
PayMethodEnum
} from '@/common/enum/payment'
import {
PayStatusEnum
} from '@/common/enum/order'
import * as Api from '@/api/solution/cashier.js'
import SettingModel from '@/common/model/dealer/Setting'
// 支付方式对应的图标
const PayMethodIconEnum = {
[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
[PayMethodEnum.BALANCE.value]: 'icon-balance-pay'
}
// 支付方式的终端名称
const PayMethodClientNameEnum = {
[PayMethodEnum.WECHAT.value]: '微信',
[PayMethodEnum.ALIPAY.value]: '支付宝'
}
export default {
components: {
CountDown
},
data() {
return {
// 加载中
isLoading: true,
// 确认按钮禁用
disabled: true,
// 枚举类
PayMethodEnum,
PayMethodIconEnum,
PayMethodClientNameEnum,
// 当前选中的支付方式
curPaymentItem: null,
// 当前订单ID
orderId: null,
// 当前结算订单信息
order: {},
// 显示入驻协议弹窗
showLicense: false,
// 个人信息
personal: {
balance: '0.00'
},
// 入驻协议阅读状态
isRead: false,
// 当前客户端的支付方式列表（后端根据platform判断）
methods: [],
setting: {},
// 文字设置
words: undefined,
// 显示入驻协议弹窗
// 租赁服务协议
license: undefined,
// 隐私协议
license1: undefined,
// 支付确认弹窗
showConfirmModal: false,
showConfirmIndex: 0,
xieyiText: ["《租赁协议》", "《隐私协议》"],
// #ifdef H5
// 当前微信支付信息 (临时数据, 仅用于H5端)
tempUnifyData: {
outTradeNo: '',
method: ''
},
// #endif
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({
orderId
}) {
// 记录订单ID
this.orderId = Number(orderId)
// 获取收银台信息
this.getCashierInfo()
// 获取设置信息
this.getSetting()
},
methods: {
// 获取分销设置
getSetting() {
const app = this
SettingModel.data()
.then(setting => {
// 赋值属性
app.words = setting.words.apply.words
app.background = setting.background.apply
app.license = setting.license.license
app.license1 = setting.license.license1
// 设置当前页面标题
app.setPageTitle(setting.words.apply.title)
})
},
// 获取收银台信息
getCashierInfo() {
const app = this
app.isLoading = true
Api.orderInfo()
.then(result => {
app.order = result.data.order
app.personal = result.data.personal
app.methods = result.data.paymentMethods
app.isLoading = false
app.setDefaultPayType()
app.checkOrderPayStatus()
// #ifdef H5
// 判断当前页面来源于浏览器返回
this.performance()
// #endif
})
},
// 设置默认的支付方式
setDefaultPayType() {
const app = this
if (app.disabled) return
const defaultIndex = app.methods.findIndex(item => item.is_default == true)
defaultIndex > -1 && app.handleSelectPayType(defaultIndex)
},
// 判断当前订单是否为已支付
checkOrderPayStatus() {
const app = this
if (app.order.pay_status == PayStatusEnum.SUCCESS.value) {
app.$toast('恭喜您，订单已付款成功')
app.onSuccessNav()
}
},
// 显示入驻协议弹窗
handleShowLicense(index) {
this.showLicense = true
this.showConfirmIndex = index
},
// 选择支付方式
handleSelectPayType(index) {
this.curPaymentItem = this.methods[index]
},
// 判断当前页面来源于浏览器返回
// #ifdef H5
performance() {
const app = this
// 判断订单状态, 异步回调会将订单状态变为已支付, 那么就不需要让用户手动查单了
if (app.order.pay_status == PayStatusEnum.PENDING.value) {
app.alipayPerformance()
app.wechatPerformance()
}
},
// H5端支付宝支付完成跳转回当前页面时触发
alipayPerformance() {
const app = this
app.tempUnifyData = Alipay.performance()
if (app.tempUnifyData) {
app.onTradeQuery(app.tempUnifyData.outTradeNo, app.tempUnifyData.method)
}
},
// H5端微信支付完成或返回时触发
wechatPerformance() {
const app = this
app.tempUnifyData = Wechat.performance(app.orderId)
if (app.tempUnifyData) {
app.showConfirmModal = true
}
},
// #endif
// 确认支付
handleSubmit() {
const app = this
// 判断是否选择了支付方式
if (!app.curPaymentItem) {
app.$toast('您还没有同意租赁协议或选择支付方式')
return
}
// 按钮禁用
if (app.disabled) return
app.disabled = true
// 提交到后端API
Api.orderPay(app.orderId, {
method: app.curPaymentItem.method,
client: app.platform,
extra: app.getExtraAsUnify(app.curPaymentItem.method)
})
.then(result => app.onSubmitCallback(result))
.finally(err => {
setTimeout(() => app.disabled = false, 10)
})
},
// 获取第三方支付的扩展参数
getExtraAsUnify(method) {
if (method === PayMethodEnum.ALIPAY.value) {
return Alipay.extraAsUnify()
}
if (method === PayMethodEnum.WECHAT.value) {
return Wechat.extraAsUnify()
}
return {}
},
// 订单提交成功后回调
onSubmitCallback(result) {
const app = this
const method = app.curPaymentItem.method
const paymentData = result.data.payment
// 余额支付
if (method === PayMethodEnum.BALANCE.value) {
app.onShowSuccess(result)
}
// 发起支付宝支付
if (method === PayMethodEnum.ALIPAY.value) {
console.log('paymentData', paymentData)
Alipay.payment(paymentData)
.then(res => app.onPaySuccess(res))
.catch(err => app.onPayFail(err))
}
// 发起微信支付
if (method === PayMethodEnum.WECHAT.value) {
console.log('paymentData', paymentData)
Wechat.payment({
orderKey: app.orderId,
...paymentData
})
.then(res => app.onPaySuccess(res))
.catch(err => app.onPayFail(err))
}
},
// 订单支付成功的回调方法
// 这里只是前端支付api返回结果success,实际订单是否支付成功 以后端的查单和异步通知为准
onPaySuccess({
res,
option: {
isRequireQuery,
outTradeNo,
method
}
}) {
const app = this
// 判断是否需要主动查单
// isRequireQuery为true代表需要主动查单
if (isRequireQuery) {
app.onTradeQuery(outTradeNo, method)
return true
}
this.onShowSuccess(res)
},
// 显示支付成功信息并页面跳转
onShowSuccess({
message
}) {
this.$toast(message || '订单支付成功')
this.onSuccessNav()
},
setIsRead(){
this.isRead = true
this.disabled = false
},
// 订单支付失败
onPayFail(err) {
console.log('onPayFail', err)
const errMsg = err.message || '订单未支付'
this.$error(errMsg)
},
// 已完成支付按钮事件: 请求后端查单
onTradeQuery(outTradeNo, method) {
const app = this
// 交易查询
// 查询第三方支付订单是否付款成功
Api.tradeQuery({
outTradeNo,
method,
client: app.platform
})
.then(result => result.data.isPay ? app.onShowSuccess(result) : app.onPayFail(result))
.finally(() => app.showConfirmModal = false)
},
// 支付成功后的跳转
onSuccessNav() {
const pages = getCurrentPages()
const lastPage = pages.length < 2 ? null : pages[pages.length - 2]
const backRoutes = [
// 'package/equipment/index',
'package/equipment/detail'
]
if (lastPage && inArray(lastPage.route, backRoutes)) {
setTimeout(() => {
uni.navigateBack()
}, 1000)
} else {
setTimeout(() => {
this.$navTo('pages/order/index', {}, 'redirectTo')
}, 1200)
}
},
}
}
</script>
<style>
page {
background: #F4F4F4;
}
</style>
<style lang="scss" scoped>
.container {
background-color: #F4F4F4;
}
// 订单信息
.order-info {
padding: 80rpx 0;
text-align: center;
.order-countdown {
display: flex;
justify-content: center;
font-size: 26rpx;
color: #666666;
margin-bottom: 20rpx;
}
.order-amount {
margin: 0 auto;
max-width: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #111111;
.unit {
font-size: 30rpx;
margin-bottom: -18rpx;
}
.amount {
font-size: 56rpx;
}
}
}
// 支付方式
.payment-method {
width: 94%;
margin: 0 auto 20rpx auto;
padding: 0 40rpx;
background-color: #ffffff;
border-radius: 20rpx;
.pay-item {
padding: 26rpx 0;
font-size: 28rpx;
border-bottom: 1rpx solid rgb(248, 248, 248);
&:last-child {
border-bottom: none;
}
.item-left_icon {
margin-right: 20rpx;
font-size: 44rpx;
&.wechat {
color: #00c800;
}
&.alipay {
color: #009fe8;
}
&.balance {
color: #ff9700;
}
}
.item-left_text {
font-size: 28rpx;
}
.item-right {
font-size: 32rpx;
}
.user-balance {
margin-left: 20rpx;
font-size: 26rpx;
}
}
}
// 支付确认弹窗
.modal-content {
padding: 40rpx 48rpx;
font-size: 30rpx;
line-height: 50rpx;
text-align: left;
color: #606266;
// height: 620rpx;
box-sizing: border-box;
}
// 底部操作栏
.footer-fixed {
position: fixed;
bottom: var(--window-bottom);
left: 0;
right: 0;
z-index: 11;
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
background: #fff;
// 设置ios刘海屏底部横线安全区域
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btn-wrapper {
height: 120rpx;
display: flex;
align-items: center;
padding: 0 40rpx;
}
.btn-item {
flex: 1;
font-size: 28rpx;
height: 80rpx;
color: #fff;
border-radius: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
.btn-item-main {
background: linear-gradient(to right, $main-bg, $main-bg2);
// 禁用按钮
&.disabled {
opacity: 0.6;
}
}
}
// 项目内容
.checkout-item {
margin: 0 auto 20rpx auto;
padding: 30rpx 40rpx;
width: 94%;
box-shadow: 0 1rpx 5rpx 0 rgba(0, 0, 0, 0.05);
border-radius: 16rpx;
background: #fff;
.title {
display: flex;
justify-content: space-between;
}
.head-info {
width: 750rpx;
margin: auto;
display: felx;
flex-direction: column;
.title {
font-weight: bold;
font-size: 34rpx;
}
.description {
padding: 10rpx 0;
font-size: 30rpx;
color: #999999;
}
}
.line {
margin: 20rpx 0;
border-bottom: 1rpx solid #f3f3f3;
}
.goods-info {
display: flex;
justify-content: flex-start;
align-items: center;
.image {
width: 90rpx;
height: 90rpx;
padding: 10rpx;
}
.goods-info-box{
margin-left: 20rpx;
.title{
font-weight: bold;
font-size: 38rpx;
margin-bottom: 10rpx;
}
.desc{
color: #999999;
}
}
}
.contacts {
margin-bottom: 16rpx;
display: flex;
justify-content: space-between;
.bms-info {
display: flex;
flex-direction: column;
width: 96%;
.item {
margin-bottom: 10rpx;
display: flex;
justify-content: space-between;
}
.name {
margin-right: 16rpx;
}
.totao-price {
color: #ff0000;
}
}
.bms-image {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 120rpx;
.bms-image-box {
display: flex;
font-size: 22rpx;
margin-bottom: 18rpx;
color: #00af00;
.bms-image-fbf {
margin-top: 22rpx;
}
}
.image {
width: 50rpx;
height: 60rpx;
}
}
}
}
.f-blue {
color: #3f6fc1;
}
.c-violet {
color: #786cff;
}
.col-bb {
color: #bbb;
}
</style>