源文件

This commit is contained in:
gyq
2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions

View File

@@ -0,0 +1,209 @@
<template>
<uni-popup ref="popup" type="bottom" :safe-area="false" >
<view class="list-wrapper">
<view class="list-top">
<text>支付方式</text>
</view>
<view class="store" >
<view class="store-inner-slot" v-for="(item,i) in props.list" @tap="selectFunc(item,i)" >
<view class="left">
<image class="left-img" :src="item.img" mode="scaleToFill" />
<text class="left-text">
{{item.name}}
<text class="left-price" v-if="item.value == 5">可用{{ item.price}}</text>
</text>
</view>
<view class="more-selected">
<image :src="item.checked ? '/static/img/success.png' : '/static/img/unselected.png'" mode="scaleToFill" />
</view>
</view>
</view>
<view class="footer-wrapper">
<view class="footer-main">
<view class="footer-button">
<!-- <view class="flex-center" hover-class="touch-button" @tap="close">取消</view> -->
<view @tap="confirmFunc" class="confirm flex-center" hover-class="touch-button">确认</view>
</view>
</view>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
list: {
type: Array,
},
});
const emits = defineEmits(["choiceValue"]);
const popup = ref();
console.log(props.list,'propspropspropsprops')
const open = () => {
popup.value.open();
};
// const searchText = ref("");
// const filerBank = () => {
// return props.list.filter((v) => v[props.value].includes(searchText.value));
// };
const choice = (val) => {
popup.value.close();
};
function selectFunc(item,i){
var list = props.list
list.forEach((item,key)=>{
if(key == i){
item.checked = true
}else{
item.checked = false
}
})
emits("choiceValue", i);
props.list = list
}
function confirmFunc(){
emits("choiceValue", null,1);
}
defineExpose({ open });
</script>
<style lang="scss" scoped>
.list-wrapper {
// display: flex;
// flex-direction: column;
border-radius: 16rpx 16rpx 0 0;
background-color: #fafafa;
max-height: 1000rpx;
padding: 30rpx;
position: relative;
bottom: 0;
.search-input {
input {
border-bottom: 1px solid #ccc;
text-indent: 1rem;
padding: 10rpx 0;
}
}
.list-mian {
flex: 1;
overflow-y: scroll;
margin-top: 20rpx;
.list-item {
margin: 10rpx 0;
padding: 10rpx;
font-size: 28rpx;
}
}
}
.store-inner-slot {
position: relative;
margin: 20rpx -10rpx;
background-color: #fff;
align-items: center;
// padding: 0 40rpx;
// height: 120rpx;
font-size: 30rpx;
border-radius: 10rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 24rpx;
.left {
display: flex;
align-items: center;
}
.right {
color: #999999;
}
}
.left-img{
width: 50rpx;
height: 50rpx;
margin-right: 6rpx;
margin-top: 6rpx;
}
.left-text{
font-family: PingFang SC-Regular;
font-size: 32rpx;
font-weight: 400;
.left-price{
color: #8F97A9;
font-size: 24rpx;
};
}
.more-selected {
width: 60rpx;
height: 60rpx;
// border-radius: 50%;
// margin-right: 20rpx;
// border: 2rpx solid rgba(217, 217, 217, 1);
image {
width: 100%;
height: 100%;
}
}
// .store {
// position: relative;
// margin: 20rpx;
// border-radius: 20rpx;
// background-color: #fafafa;
// display: flex;
// justify-content: flex-start;
// align-items: center;
// padding: 0 40rpx;
// // height: 120rpx;
// font-size: 30rpx;
// }
.footer-wrapper {
// height: 186rpx;
margin-top: 150rpx;
.footer-main {
position: fixed;
left: 0;
right: 0;
bottom: 0;
// border-top: 1rpx solid #ededed;
.tips {
margin: 20rpx;
text-align: center;
font-size: 27rpx;
color: #a6a6a6;
}
.footer-button {
padding: 0 30rpx;
margin-top: 30rpx;
padding-bottom: 30rpx;
display: flex;
justify-content: space-between;
view {
text-align: center;
padding: 20rpx 0px;
font-size: 50rpx;
width: 100%;
// height: 110rpx;
font-size: 33rpx;
font-weight: 500;
color: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
background-color: #f7f7f7;
}
.confirm {
color: #fff;
background: #2980fd;
}
}
}
}
.list-top{
margin-bottom: 40rpx;
font-weight: 600;
}
</style>

View File

@@ -0,0 +1,899 @@
<template>
<view class="content">
<!-- <view class="content-top-bg" :style="{'backgroundColor': vdata.primaryColor}"></view> -->
<view class="payment">
<view class="payment-mchName" @tap="advancedFunc">
<view style="display: contents;">
<image src="/static/img/store.svg" mode="scaleToFill" class="payment-mchName-img" />
<view style="display: grid;margin-left: 16rpx;">
<text class="payment-mchName1">{{ vdata.payOrderInfo.mchName }}</text>
<view class="payment-mchName2">
<text class="payment-mchName2-text1">门店</text>
<text class="payment-mchName2-text2">{{vdata.payOrderInfo.storeName}}</text>
</view>
</view>
</view>
</view>
<view class="payment-divider"></view>
<view class="payment-amountTips">
<view class="desc1 ">付款金额</view>
<view class="desc2 " v-if="!vdata.buyerRemark" @tap="showRemarkModel"><span v-if="vdata.isForceReamrk" style='color: #FF0000;'>*</span>添加备注</view>
<text class="desc2 buyer-remark" v-else @tap="showRemarkModel">
{{ vdata.buyerRemark }}
<text :style="{ 'padding-left': '6rpx'}">修改</text>
</text>
</view>
<view class="payment-amount" >
<text class="payment-amount-rmb"></text>
<text class="payment-amount-value">{{ doubleToThousands(vdata.amount) }}</text>
</view>
</view>
<view class="payment-amountTips-price" >
<!-- -->
<view class="desc3">
<view v-if="vdata.redPacketIsOpen">
<text class="desc3-text1" >红包</text><text class="desc3-text2">可用余额{{(appConfig.redbalance / 100).toFixed(2)}} </text>
</view>
</view>
<!-- <view class="desc4" ><text class="desc4-text1" >实付金额</text><text class="desc4-text2">{{doubleToThousands(vdata.originAmount) }}</text></view> -->
<!-- <view class="payment-text-amount txt">实付金额<text></text></view> -->
</view>
<!-- <view class="pay-div-type">
<radio-group @change="radioChange" style="width: 100%;">
<view class="radio-group-box" style="display: flex;" v-if="appConfig.pageType == 'wechatLite'" >
<view class="radio-group-name " >
<img src="https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/6e4f3ca5-a334-4af4-a57c-63fca61c95d7.svg" alt="">
<text class="radio-group-name1">微信</text>
</view>
<view class="radio-group-radio " >
<radio color="#1678FF" value="1" :checked="1 == vdata.current" />
</view>
</view>
<view class="radio-group-box" style="display: flex;" v-if="appConfig.pageType == 'alipayLite'">
<view class="radio-group-name " >
<img src="https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/oem/0e4f0b6a-e96e-45bf-a5bb-127c64c3396a.svg" alt="">
<text class="radio-group-name1">支付宝</text>
</view>
<view class="radio-group-radio " >
<radio color="#1678FF" value="2" :checked="2 == vdata.current" />
</view>
</view>
<view class="radio-group-box" style="display: flex;" v-if="appConfig.redPacketIsOpen" >
<view class="radio-group-name " >
<img src="https://syb-jq-public.oss-cn-hangzhou.aliyuncs.com/notice/d3be6339-5abe-415b-981c-3568ebd66f57.png" alt="">
<text class="radio-group-name1">红包</text>
<text class="radio-group-name-price" >(可用{{appConfig.redbalance}})</text>
</view>
<view class="radio-group-radio " >
<radio color="#1678FF" value="3" :checked="3 == vdata.current" />
</view>
</view>
</radio-group>
</view> -->
<!-- v-if="!vdata.payOrderInfo['fixedFlag']" -->
<view class="payment-keyboard" >
<!-- <text class="buyer-remark" v-if="!vdata.buyerRemark" @tap="showRemarkModel">添加备注</text> -->
<!-- <text class="buyer-remark" v-else @tap="showRemarkModel">
{{ vdata.buyerRemark }}
<text :style="{ 'padding-left': '6rpx'}">修改</text>
</text> -->
<view class="payment-text" v-if="vdata.isAdsOpen">
<view class="payment-text-guanggao txt" @click="getadsName()" >
<!-- <scroll-view class="scroll-view" scroll-x="true" :scroll-left="vdata.scrollLeft" autoplay @scrolltolower="scrollToLower"> -->
<view class="scroll-content" >
{{appConfig.marketingConfig.adsName}}
</view>
<!-- <text ></text> -->
<!-- </scroll-view> -->
</view>
<!-- <view class="payment-text-amount txt">实付金额<text>{{doubleToThousands(vdata.originAmount) }}</text></view> -->
</view>
<syb-keyboard
ref="sybKeyboardRef"
:primaryColor="vdata.primaryColor"
@change="onChange"
@pay="getSybPayType">
</syb-keyboard>
</view>
<!-- <view v-if="vdata.payOrderInfo['fixedFlag']" class="payment-no-keyboard" @tap="pay"> </view> -->
<view v-if="vdata.remarkVisible" class="remark-model">
<view class="remark-content">
<text class="remark-content-title" >添加备注</text>
<input v-model="vdata.modelRemark" :focus="vdata.remarkVisible" maxlength="40" placeholder="最多输入20个字" class="remark-content-body" />
<view class="remark-content-btn">
<text class="btn-cancel" @tap.stop="closeRemarkModel">取消</text>
<text class="btn-confirm" :style="{'backgroundColor': '#1678FF', 'borderColor': '#ffffff'}" @tap.stop="confirmRemark">确认</text>
</view>
</view>
</view>
</view>
<!-- <SelectedPay ref="sybCodePay" :list="vdata.payTypeList" @choiceValue="updataBank" /> -->
<!-- 选择支付 接口 -->
<!-- <JeepayPopupListSelect style="background-color: #fff;" ref="selectIfcodeRef" title='支付方式' :isCheckbox="false" :reqTableDataFunc="reqTableDataByIfcodeFunc"
:fields="{ key: 'value', left: 'name', right: 'value', img: 'img' }" @confirm="confirmIfCode">
</JeepayPopupListSelect> -->
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { $getPayOrderInfo, $getPayPackage,$getMarketingConfig,$getCalcDiscount } 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 SelectedPay from './components/SelectedPay.vue'
import paywayCallFunc from '@/pages/payway/payway.js'
const sybCodePay = ref()
const sybKeyboardRef = ref()
const selectIfcodeRef = ref()
const vdata = reactive({
scrollLeft: 0, // 滚动位置
scrollSpeed: 2, // 滚动速度单位px/ms
scrollInterval: null, // 定时器ID
payTypeList:[] as any,
typeItems: [{
img:"/static/img/wechat.png",
value: 1,
name: '微信支付',
checked: false,
},{
img:"/static/img/wechat.png",
value: 2,
name: '微信H5',
checked: false,
},{
img:"/static/payIcon/zfb.png",
value: 3,
name: '支付宝支付',
checked: false,
},{
img:"/static/payIcon/zfb.png",
value: 4,
name: '支付宝H5',
checked: false,
},{
img:"/static/img/payred.png",
value: 5,
name: '红包',
checked: false,
price: '',
},
],
addIfCodeList:{} as any,
isAdsOpen:false,
redPacketIsOpen:false,
current: 0,
primaryColor: '',
originAmount: '0',
amount: '0',
buyerRemark: '', // 买家备注
modelRemark: '', // 弹层显示备注
remarkVisible: false,
doubleToThousands: doubleToThousands(),
payOrderInfo: {},
calcDiscount:{},
storeId:'',
clearStorageFlag: 0, //显示清空缓存的提示
isForceReamrk:false,
}) as any
onLoad(() => {
vdata.amount = '0'
vdata.primaryColor = theme.changeColors()
// #ifdef H5
console.log(111111111111111111111111111111111111111)
//解决H5的刷新问题
if(!appConfig.tokenValue){ // 不存在 则需要跳转到首页再次放置 获取userID等信息。
window.location.href = '/cashier/pages/hub/default?' + appConfig.tokenKey + "=" + window.sessionStorage.getItem(appConfig.tokenKey)
return false;
}
// #endif
// 获取订单信息
// getOrderInfo()
})
onMounted(() => {
getOrderInfo()
})
function getPayType(){
const typeItems = vdata.typeItems
vdata.payTypeList = [];
console.log(appConfig.redPacketIsOpen,'appConfigredPacketIsOpen')
if(!appConfig.redPacketIsOpen){
delete typeItems[4]
}
if(appConfig.currentPageType == 'wechatLite'){
delete typeItems[1]
delete typeItems[2]
delete typeItems[3]
}
if(appConfig.currentPageType == 'wechatH5'){
delete typeItems[0]
delete typeItems[2]
delete typeItems[3]
}
if(appConfig.currentPageType == 'alipayLite'){
delete typeItems[0]
delete typeItems[1]
delete typeItems[3]
}
// return uni.showToast({
// title: appConfig.currentPageType,
// icon: 'none'
// })
if(appConfig.currentPageType == 'alipayH5'){
delete typeItems[0]
delete typeItems[1]
delete typeItems[2]
}
console.log(typeItems,'codePay')
typeItems.forEach(function(item,index){
if(index == 4){
item.price = appConfig.redbalance
}
if(appConfig.currentPageType == 'wechatLite' || appConfig.currentPageType == 'wechatH5'){
if(item.value == 3 || item.value == 4){
}else{
vdata.payTypeList.push(item)
}
}else if(appConfig.currentPageType == 'alipayLite' || appConfig.currentPageType == 'alipayH5'){
if(item.value == 0 || item.value == 1){
}else{
vdata.payTypeList.push(item)
}
}
})
if(typeItems.length){
typeItems[0].checked = true
}
}
function updataBank (index,type=0) {
console.log(type,'typetype')
if(type == 1){
pay()
return false;
}
if(vdata.payTypeList[index].value == 5){
if(appConfig.redPacketIsOpen){
getCalcDiscount(vdata.amount)
}else{
vdata.originAmount = vdata.amount
}
}
}
function startAutoScroll() {
if (vdata.scrollInterval) {
clearInterval(vdata.scrollInterval);
}
const contentWidth = uni.upx2px(375) * 3; // 假设内容宽度是屏幕宽度的三倍,这里需要根据实际情况调整
vdata.scrollInterval = setInterval(() => {
if (vdata.scrollLeft < contentWidth) {
vdata.scrollLeft += vdata.scrollSpeed;
} else {
vdata.scrollLeft = 0;
}
}, 100); // 每100ms滚动一次可以根据需要调整
}
function stopAutoScroll() {
clearInterval(vdata.scrollInterval);
vdata.scrollInterval = null;
}
function scrollToLower(){
vdata.scrollLeft = 0;
}
function getSybPayType(){
if(vdata.amount <= 0) {
return uni.showToast({
title: '金额必须大于0',
icon: 'none'
})
return false;
}
if(vdata.payTypeList.length <= 1){
pay()
return false;
}else{
sybCodePay.value.open();
}
}
// 选择支付通道
function confirmIfCode (selected) {
selectIfcodeRef.value.close()
}
function radioChange(evt) {
console.log(evt.target.value,'evt')
vdata.current = evt.target.value;
}
// 输入金额
function onChange(e: any) {
if(vdata.payOrderInfo['fixedFlag']){
return false;
}
vdata.amount = e
if(appConfig.redPacketIsOpen){
getCalcDiscount(e)
}else{
vdata.originAmount = e
}
}
function getadsName(){
if(!appConfig.marketingConfig.isAdsOpen){
return false;
}
uni.navigateTo({
url: '/pages/H5/H5?url='+ appConfig.marketingConfig.adsUrl
})
}
//获取红包信息
function getMarketingConfig(storeId){
$getMarketingConfig('marketingConfig',storeId).then(({bizData}) => {
vdata.redPacketIsOpen = bizData.marketingConfig.isOpen
console.log(bizData.marketingConfig.isAdsOpen,'bizData.marketingConfig.isAdsOpen')
vdata.isAdsOpen = bizData.marketingConfig.isAdsOpen
appConfig.redPacketIsOpen = bizData.marketingConfig.isOpen
appConfig.redbalance = bizData.marketingConfig.balance
appConfig.marketingConfig = bizData.marketingConfig
})
}
//计算红包实付金额
function getCalcDiscount(originAmount){
$getCalcDiscount(originAmount,vdata.storeId).then(({bizData}) => {
vdata.calcDiscount = bizData;
vdata.originAmount = (bizData.findAmt/100).toFixed(2)
vdata.discountAmt = bizData.discountAmt
})
}
// 获取订单信息
function getOrderInfo() {
$getPayOrderInfo().then(({bizData}) => {
console.log(bizData,'bizDatabizDatabizDatabizData')
appConfig.video = bizData.video
vdata.payOrderInfo = bizData
vdata.isForceReamrk = bizData.isForceReamrk
vdata.storeId = '';
if(bizData.storeId) {
vdata.storeId = bizData.storeId
}
getMarketingConfig(vdata.storeId)
if(bizData.amount) {
vdata.amount = (bizData.amount/100).toString()
getCalcDiscount(vdata.amount)
}
// 金额传入键盘组件
sybKeyboardRef.value.setValue(vdata.amount)
// 如果订单已支付,则转到提示页面
if(bizData.state && bizData.state === 2) {
return toErrPageFunc("订单已支付");
}
setTimeout(()=>{
getPayType()
},2000)
// 自动调起支付
if(bizData.autoPay) {
// pay()
}
}).catch(err => {
console.log(err);
})
}
//视频号数据
function sphGet(){
console.log(appConfig.video,'videovideovideovideovideo')
if(appConfig.currentPageType == 'alipayLite' || appConfig.currentPageType == 'alipayH5' || appConfig.video == undefined || appConfig.video == null){
}else{
uni.openChannelsActivity({
finderUserName: appConfig.video.uniqueId,//视频号ID
feedId: appConfig.video.exportId,//视频ID
complete (res) {
console.log(res)
}
})
}
}
function toAddPage () {
vdata.addIfCodeList = [
{ifCode:"dgpay",ifName:"汇付斗拱支付"},
{ifCode:"yspay",ifName:"银盛支付"},
{ifCode:"kqpay",ifName:"快钱支付"},
{ifCode:"lklspay",ifName:"拉卡拉支付"},
{ifCode:"dgpay2",ifName:"汇付斗拱支付"}
]
vdata.addIfCodeList = vdata.typeItems
selectIfcodeRef.value.open()
}
function reqTableDataByIfcodeFunc () {
// 模拟请求数据
return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false } })
}
// 发起支付
function pay() {
if(vdata.isForceReamrk && !vdata.modelRemark){
vdata.remarkVisible = true
return false;
}
vdata.payOrderInfo.amount = vdata.amount
if(vdata.amount <= 0) {
return uni.showToast({
title: '金额必须大于0',
icon: 'none'
})
return false;
}
// console.log(111111111)
// uni.navigateTo({
// url: '/pages/paySuccess/redSuccess?payOrderId=20240124O1750143430237061121'
// })
// return false;
if(vdata.redPacketIsOpen){
if(!vdata.calcDiscount){
return false;
}
if(!vdata.calcDiscount.findAmt){
return false;
}
}
uni.showLoading({
title: '请稍等...',
mask: true
})
// setTimeout(() => {
// uni.navigateTo({
// url: '/pages/paySuccess/redSuccess?payOrderId=O1749678699690803202'
// })
// }, 1000)
// return false;
$getPayPackage(vdata.amount, vdata.buyerRemark,null,null,vdata.calcDiscount).then( ({bizData}) => {
uni.hideLoading()
console.log(bizData,'bizDatabizData')
//订单创建异常
if(bizData.code != '0') {
let msg = bizData.msg;
if(bizData.msg =='系统Success'){
msg = '订单异常'
}
return uni.showToast({title: msg,icon:'none'})
// return toErrPageFunc(bizData.msg);
}
// 订单响应结果
let orderRes = bizData.data;
if(orderRes.orderState != 1 ) { //订单不是支付中,说明订单异常
if(orderRes.msg){
return uni.showToast({title: orderRes.msg,icon:'none'})
}else if(orderRes.errMsg){
return uni.showToast({title: orderRes.errMsg,icon:'none'})
}else{
return uni.showToast({title: '订单异常',icon:'none'})
}
// return toErrPageFunc(orderRes.errMsg);
}
// if(bizData.code == 0){
// uni.navigateTo({
// url:"/pages/paySuccess/redSuccess"
// })
// return false;
// }
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;
margin-bottom: 70%;
.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;
width: 96%;
// height: 321rpx;
margin-top: 20rpx;
border-radius: 30rpx;
background: #fff;
z-index: 1;
display: flex;
flex-direction: column;
.payment-mchName {
width: 100%;
// height: 105rpx;
padding: 30rpx 0;
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 {
display: flex;
width: 100%;
font-size: 25rpx;
letter-spacing: 0.04em;
text-align: left;
padding: 30rpx 0 0 40rpx;
color: rgba(0, 0, 0, 0.6);
.desc{
width: 50%;
}
.desc1{
width: 30%;
}
.desc2{
width: 70%;
text-align: right;
margin-right: 10%;
color: #387CE7;
text-decoration: underline;
}
}
.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;
}
.payment-text{
margin-bottom: 16rpx;
width: 92%;
background: #FAFAFA;
display: flex;
padding:15px;
color: #8F97A9;
margin-left: 1%;
.txt{
width: 50%;
}
.payment-text-guanggao{
text-align: left;
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.payment-text-amount{
text-align: right;
// margin-right: 10%;
text{
font-weight: 600;
color: #000;
}
}
}
.pay-div-type{
width: 96%;
border-radius: 5%;
margin-left: 1%;
margin-top: 10px;
background: #ffffff;
.radio-group-box{
padding: 20rpx;
border-bottom: 2rpx solid #F4F4F4;
.radio-group-div{
width: 50%;
}
.radio-group-name{
width: 70%;
text-align: left;
display: flex;
image{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
text{
padding: 8rpx 0 10rpx 10rpx ;
}
.radio-group-name-price{
color: #c3c3c3;
}
}
.radio-group-radio{
width: 30%;
text-align: right;
}
}
}
.payment-amountTips-price{
display: flex;
width: 100%;
font-size: 25rpx;
letter-spacing: 0.04em;
text-align: left;
padding: 30rpx 0 0 40rpx;
color: rgba(0, 0, 0, 0.6);
padding: 20rpx 0;
.desc3{
font-size: 21rpx;
width: 50%;
text-align: left;
margin-left: 3%;
color: #3D3D3D;
.desc3-text1{
border:2rpx solid #FE5735 ;
border-radius: 10rpx;
color: #FE5735;
padding: 2rpx;
}
.desc3-text2{
padding-left: 8rpx;
}
}
.desc4{
font-size: 30rpx;
width: 50%;
text-align: right;
margin-left: 3%;
margin-right: 20rpx;
color: #3D3D3D;
.desc4-text1{
color: #8F97A9;
font-size: 24rpx;
// border:2rpx solid #FE5735 ;
// border-radius: 10rpx;
// color: #FE5735;
padding: 2rpx;
}
.desc4-text2{
font-weight: 600;
padding-left: 8rpx;
}
}
}
.payment-mchName-img{
width: 120rpx;
height: 120rpx;
margin-right: 10rpx;
}
.payment-mchName1{
font-size: 32rpx;
font-weight: 500;
}
.payment-mchName2{
font-size: 26rpx;
margin-top: 15rpx;
font-weight: 400;
}
.payment-mchName2-text1{
color: #3598FE;
border: 1px solid #3598FE;
border-radius: 10rpx;
padding: 4rpx 8rpx;
}
.payment-mchName2-text2{
font-size: 28rpx;
color: #3D3D3D;
margin-left: 10rpx;
}
.scroll-view {
width: 100%;
}
.scroll-content {
display: inline-block;
// width: 1000rpx; /* 设置一个足够大的宽度以确保文本可以滚动 */
animation: slide 5s linear infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>

View 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>

View File

@@ -0,0 +1,187 @@
import appConfig from '@/config/appConfig.js'
import { toErrPageFunc } from '@/util/toErrorPageUtil.js'
import { $payCancelBoardCast, $payEventBoardCast } from '@/http/apiManager.js'
function wechatH5Func(orderRes, payOrderInfo){
let onBridgeReady = function () {
// eslint-disable-next-line no-undef
WeixinJSBridge.invoke( 'getBrandWCPayRequest', JSON.parse(orderRes.payInfo), function(res) {
payEventBoardCast(orderRes.payOrderId, res)
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok但并不保证它绝对可靠。
// //重定向
if(payOrderInfo.returnUrl){
location.href = payOrderInfo.returnUrl;
}else{
alert('支付成功!');
// if(payOrderInfo.fun) return payOrderInfo.fun()
window.WeixinJSBridge.call('closeWindow')
}
}
if (res.err_msg == "get_brand_wcpay_request:cancel") {
// payCancel(orderRes.payOrderId)
alert("支付取消");
// return false;
window.WeixinJSBridge.call('closeWindow')
}
if (res.err_msg == "get_brand_wcpay_request:fail") {
alert('支付失败:' + JSON.stringify(res))
// return false;
window.WeixinJSBridge.call('closeWindow')
}
if (res.err_msg == "total_fee") {
alert('缺少参数')
window.WeixinJSBridge.call('closeWindow')
}
}
);
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady();
}
}
// 支付宝内的浏览器调起支付https://myjsapi.alipay.com/jsapi/native/trade-pay.html
function alipayH5Func(orderRes){
// 执行事件
let doAlipay = function () {
AlipayJSBridge.call("tradePay", { tradeNO: orderRes.alipayTradeNo }, function (data) {
payEventBoardCast(orderRes.payOrderId, data)
if ("9000" == data.resultCode) {
// //重定向
if(orderRes.returnUrl){
location.href = orderRes.returnUrl;
}else{
alert('支付成功!');
window.AlipayJSBridge.call('closeWebview')
}
//8000后台获取支付结果超时暂时未拿到支付结果;
// 6004支付过程中网络出错 暂时未拿到支付结果;
}else if("8000" == data.resultCode || "6004" == data.resultCode){ //其他
alert(JSON.stringify(data));
window.AlipayJSBridge.call('closeWebview')
}else{ ///其他异常信息, 需要取消订单
// payCancel(orderRes.payOrderId)
alert('用户已取消!');
window.AlipayJSBridge.call('closeWebview')
}
});
}
if (!window.AlipayJSBridge) {
document.addEventListener('AlipayJSBridgeReady', doAlipay, false);
}else{
doAlipay();
}
}
function wechatLiteFunc(orderRes, payOrderInfo){
const payInfo = JSON.parse(orderRes.payInfo)
wx.requestPayment({
"timeStamp": payInfo.timeStamp,
"nonceStr": payInfo.nonceStr,
"package": payInfo.package,
"signType": payInfo.signType,
"paySign": payInfo.paySign,
"success": function(res){
if(appConfig.redPacketIsOpen){
setTimeout(() => {
uni.navigateTo({
url: '/pages/paySuccess/redSuccess?payOrderId=' + orderRes.payOrderId
})
}, 1000)
return false;
}
if(payOrderInfo.fun) return payOrderInfo.fun()
uni.navigateTo({
url: '/pages/paySuccess/paySuccess?amount=' + payOrderInfo.amount + '&payOrderId=' + orderRes.payOrderId
})
},
"fail": function(res){
if(res.errMsg == 'requestPayment:fail cancel') {
// payCancel(orderRes.payOrderId)
// toErrPageFunc('取消支付')
return uni.showToast({title: '取消支付',icon:'none'})
}else {
toErrPageFunc(res.errMsg)
}
},
"complete": (res) => {
payEventBoardCast(orderRes.payOrderId, res)
}
})
}
function alipayLiteFunc(orderRes, payOrderInfo){
my.tradePay({
tradeNO: orderRes.alipayTradeNo,
success: (res) => {
if(res.resultCode == 9000) {
if(payOrderInfo.fun) return payOrderInfo.fun()
uni.navigateTo({
url: '/pages/paySuccess/paySuccess?amount=' + payOrderInfo.amount
})
}else if(res.resultCode == 6001) {
// payCancel(orderRes.payOrderId)
// toErrPageFunc('取消支付')
return uni.showToast({title: '取消支付',icon:'none'})
}else if(res.resultCode == 4000) {
// toErrPageFunc('订单处理失败')
return uni.showToast({title: '订单处理失败',icon:'none'})
}else if(res.resultCode == 4) {
toErrPageFunc('无权限调用')
}else {
toErrPageFunc(JSON.stringify(res))
}
},
fail: (res) => {
toErrPageFunc(JSON.stringify(res))
},
complete: (res) => {
payEventBoardCast(orderRes.payOrderId, res)
}
});
}
function ysfpayH5Func(orderRes){
window.location.href = orderRes.redirectUrl
}
function payCancel(payOrderId) {
$payCancelBoardCast(payOrderId).then(() => {
console.log("取消支付")
})
}
function payEventBoardCast(payOrderId, resData) {
$payEventBoardCast(payOrderId, resData)
}
export default () => {
let result = {}
result[appConfig.PAGE_TYPE_ENUM.WECHAT_H5] = wechatH5Func;
result[appConfig.PAGE_TYPE_ENUM.ALIPAY_H5] = alipayH5Func;
result[appConfig.PAGE_TYPE_ENUM.WECHAT_LITE] = wechatLiteFunc;
result[appConfig.PAGE_TYPE_ENUM.ALIPAY_LITE] = alipayLiteFunc;
result[appConfig.PAGE_TYPE_ENUM.YSFPAY_H5] = ysfpayH5Func;
return result;
}