源文件
This commit is contained in:
369
jeepay-ui-uapp-cashier/pages/payway/index_back.vue
Normal file
369
jeepay-ui-uapp-cashier/pages/payway/index_back.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="content-top-bg" :style="{'backgroundColor': vdata.primaryColor}"></view>
|
||||
<view class="payment">
|
||||
<view class="payment-mchName" @tap="advancedFunc">付款给{{ vdata.payOrderInfo.mchName }}</view>
|
||||
<view class="payment-divider"></view>
|
||||
<view class="payment-amountTips">付款金额：</view>
|
||||
<view class="payment-amount" :style="{'color': vdata.primaryColor}">
|
||||
<text class="payment-amount-rmb">￥</text>
|
||||
<text class="payment-amount-value">{{ doubleToThousands(vdata.amount) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="payment-keyboard" v-if="!vdata.payOrderInfo['fixedFlag']">
|
||||
<text class="buyer-remark" v-if="!vdata.buyerRemark" :style="{'color': vdata.primaryColor}" @tap="showRemarkModel">添加备注</text>
|
||||
<text class="buyer-remark" v-else @tap="showRemarkModel">
|
||||
{{ vdata.buyerRemark }}
|
||||
<text :style="{'color': vdata.primaryColor, 'padding-left': '6rpx'}">修改</text>
|
||||
</text>
|
||||
<jq-keyboard
|
||||
ref="jqKeyboardRef"
|
||||
:primaryColor="vdata.primaryColor"
|
||||
@change="onChange"
|
||||
@pay="pay">
|
||||
</jq-keyboard>
|
||||
</view>
|
||||
<view v-else class="payment-no-keyboard" :style="{'backgroundColor': vdata.primaryColor}" @tap="pay">付 款</view>
|
||||
|
||||
<view v-if="vdata.remarkVisible" class="remark-model">
|
||||
<view class="remark-content">
|
||||
<text class="remark-content-title" :style="{'color': vdata.primaryColor}">添加备注</text>
|
||||
<input v-model="vdata.modelRemark" :focus="vdata.remarkVisible" maxlength="20" placeholder="最多输入12个字" class="remark-content-body" />
|
||||
<view class="remark-content-btn">
|
||||
<text class="btn-cancel" @tap.stop="closeRemarkModel">取消</text>
|
||||
<text class="btn-confirm" :style="{'backgroundColor': vdata.primaryColor, 'borderColor': vdata.primaryColor}" @tap.stop="confirmRemark">确认</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { $getPayOrderInfo, $getPayPackage } from '@/http/apiManager.js'
|
||||
import { doubleToThousands } from '@/util/amount.js'
|
||||
import { toErrPageFunc } from '@/util/toErrorPageUtil.js'
|
||||
import appConfig from '@/config/appConfig.js'
|
||||
import theme from '@/config/theme.js'
|
||||
import paywayCallFunc from '@/pages/payway/payway.js'
|
||||
|
||||
const jqKeyboardRef = ref()
|
||||
|
||||
const vdata = reactive({
|
||||
primaryColor: '',
|
||||
amount: '0',
|
||||
buyerRemark: '', // 买家备注
|
||||
modelRemark: '', // 弹层显示备注
|
||||
remarkVisible: false,
|
||||
doubleToThousands: doubleToThousands(),
|
||||
payOrderInfo: {},
|
||||
clearStorageFlag: 0, //显示清空缓存的提示
|
||||
}) as any
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
vdata.amount = '0'
|
||||
|
||||
vdata.primaryColor = theme.changeColors()
|
||||
|
||||
// #ifdef H5
|
||||
//解决H5的刷新问题
|
||||
if(!appConfig.tokenValue){ // 不存在 则需要跳转到首页再次放置 获取userID等信息。
|
||||
|
||||
window.location.href = '/cashier/pages/hub/default?' + appConfig.tokenKey + "=" + window.sessionStorage.getItem(appConfig.tokenKey)
|
||||
return false;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 获取订单信息
|
||||
getOrderInfo()
|
||||
|
||||
})
|
||||
|
||||
// 输入金额
|
||||
function onChange(e: any) {
|
||||
vdata.amount = e
|
||||
}
|
||||
// 获取订单信息
|
||||
function getOrderInfo() {
|
||||
console.log(5641322198)
|
||||
$getPayOrderInfo().then(({bizData}) => {
|
||||
|
||||
vdata.payOrderInfo = bizData
|
||||
|
||||
if(bizData.amount) {
|
||||
vdata.amount = (bizData.amount/100).toString()
|
||||
|
||||
}
|
||||
|
||||
// 金额传入键盘组件
|
||||
jqKeyboardRef.value.setValue(vdata.amount)
|
||||
|
||||
// 如果订单已支付，则转到提示页面
|
||||
if(bizData.state && bizData.state === 2) {
|
||||
return toErrPageFunc("订单已支付");
|
||||
}
|
||||
|
||||
// 自动调起支付
|
||||
if(bizData.autoPay) {
|
||||
pay()
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
})
|
||||
}
|
||||
|
||||
// 发起支付
|
||||
function pay() {
|
||||
vdata.payOrderInfo.amount = vdata.amount
|
||||
|
||||
if(vdata.amount <= 0) {
|
||||
return uni.showToast({
|
||||
title: '金额必须大于0',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '请稍等...',
|
||||
mask: true
|
||||
})
|
||||
console.log(vdata,'vdatavdata')
|
||||
$getPayPackage(vdata.amount, vdata.buyerRemark).then( ({bizData}) => {
|
||||
uni.hideLoading()
|
||||
|
||||
//订单创建异常
|
||||
if(bizData.code != '0') {
|
||||
return toErrPageFunc(bizData.msg);
|
||||
}
|
||||
|
||||
// 订单响应结果
|
||||
let orderRes = bizData.data;
|
||||
|
||||
if(orderRes.orderState != 1 ) { //订单不是支付中，说明订单异常
|
||||
return toErrPageFunc(orderRes.errMsg);
|
||||
}
|
||||
|
||||
if(orderRes.payUrl){
|
||||
location.href = orderRes.payUrl;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 以下为调起 jsapi的函数： 分为： H5 和 各端小程序
|
||||
let thisPaywayCallFunc = paywayCallFunc()[appConfig.currentPageType];
|
||||
thisPaywayCallFunc(orderRes, vdata.payOrderInfo);
|
||||
}).catch( () => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 显示备注弹窗
|
||||
function showRemarkModel() {
|
||||
vdata.modelRemark = vdata.buyerRemark
|
||||
vdata.remarkVisible = true
|
||||
}
|
||||
|
||||
// 备注弹窗确认
|
||||
function confirmRemark() {
|
||||
vdata.buyerRemark = vdata.modelRemark
|
||||
vdata.remarkVisible = false
|
||||
}
|
||||
|
||||
// 关闭备注弹窗
|
||||
function closeRemarkModel() {
|
||||
vdata.modelRemark = ''
|
||||
vdata.remarkVisible = false
|
||||
}
|
||||
|
||||
// 高级功能模块的显示
|
||||
function advancedFunc(){
|
||||
|
||||
vdata.clearStorageFlag = vdata.clearStorageFlag + 1
|
||||
|
||||
if(vdata.clearStorageFlag >= 10){
|
||||
vdata.clearStorageFlag = 0
|
||||
|
||||
// 目前仅清空缓存
|
||||
uni.showModal({
|
||||
title: '确认清除缓存？',
|
||||
success: function(r) {
|
||||
if (r.confirm) {
|
||||
uni.clearStorageSync()
|
||||
return uni.showToast({title: '已清空'})
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.remark-model {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
z-index: 20;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.remark-content {
|
||||
height: 290rpx;
|
||||
width: 600rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 50rpx 0 20rpx 0;
|
||||
|
||||
.remark-content-title {
|
||||
font-weight: bold;
|
||||
font-size: 33rpx;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
|
||||
.remark-content-body {
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
|
||||
.remark-content-btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin-left: 20rpx;
|
||||
|
||||
text {
|
||||
width: 230rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-cancel{
|
||||
background: #fff;
|
||||
border: 1rpx solid #c5c7cc;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 0.07em;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
.btn-confirm{
|
||||
border: 3rpx solid #0041c4;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 0.07em;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content-top-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 212rpx;
|
||||
border-radius: 0 0 30rpx 30rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.payment {
|
||||
position: relative;
|
||||
width: 650rpx;
|
||||
height: 321rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.payment-mchName {
|
||||
width: 100%;
|
||||
height: 105rpx;
|
||||
font-size: 30rpx;
|
||||
letter-spacing: 0.04em;
|
||||
padding-left: 30rpx;
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.payment-divider {
|
||||
height: 1rpx;
|
||||
width: 100%;
|
||||
background-color: $uni-bg-color-grey;
|
||||
}
|
||||
.payment-amountTips {
|
||||
font-size: 25rpx;
|
||||
letter-spacing: 0.04em;
|
||||
text-align: left;
|
||||
padding: 30rpx 0 0 40rpx;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.payment-amount {
|
||||
padding: 15rpx 0 0 40rpx;
|
||||
|
||||
.payment-amount-value {
|
||||
font-size: 80rpx;
|
||||
letter-spacing: 0.03em;
|
||||
padding-left: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.payment-keyboard {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
bottom: constant(safe-area-inset-bottom);
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.buyer-remark {
|
||||
position: absolute;
|
||||
top : -80rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.payment-no-keyboard {
|
||||
width: 80%;
|
||||
height: 88rpx;
|
||||
position: fixed;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
bottom: 240rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 36rpx;
|
||||
color: $uni-text-color-inverse;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user