527 lines
16 KiB
Vue
527 lines
16 KiB
Vue
<template>
|
||
<view class="page-weapper" :style="{ '--v-primary': calcThemeColor(), '--bg-color': calcThemeColor('bgColor') }">
|
||
<view class="header">
|
||
<view class="mch-info">
|
||
<view @tap="advancedFunc">付款给：{{ vdata.mchInfo.mchName }}</view>
|
||
<view class="mch-img-box">
|
||
<image :src="vdata.mchInfo.storeLogo" mode="aspectFill" class="mch-header"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">付款金额</view>
|
||
<view class="pay-wrapper" @tap="refKey.openKeyBoard()">
|
||
<view class="pay-amount"
|
||
:style="{ color: vdata.amount ? '' : '#ccccccff', fontSize: vdata.amount ? '100rpx' : '' }">
|
||
{{ vdata.amount || '请输入付款金额' }}
|
||
<text class="pay-icon">元</text>
|
||
</view>
|
||
</view>
|
||
<view class="sub-title">支付方式</view>
|
||
<view class="pay-select">
|
||
<view class="pay-info">
|
||
<image :src="calcThemeColor('imgUrl')" mode="aspectFill" class="pay-img"></image>
|
||
<text>{{ vdata.pageTypeInfo?.title }}</text>
|
||
</view>
|
||
<view class="radio" :class="{ 'radio-selected': vdata.paySelected == vdata.pageTypeInfo.value }"
|
||
@tap="vdata.paySelected = vdata.pageTypeInfo.value">
|
||
<image src="/static/vipImg/selected-icon.svg" mode="aspectFill"
|
||
v-if="vdata.paySelected == vdata.pageTypeInfo.value"></image>
|
||
</view>
|
||
</view>
|
||
<view class="surplus-wrapper">
|
||
<view class="member-top">
|
||
<view class="member-info">
|
||
<image src="/static/vipImg/member-icon.svg" mode="aspectFill" class="member-icon"></image>
|
||
<text>会员支付</text>
|
||
</view>
|
||
<view class="radio" :class="{ 'radio-selected': vdata.paySelected == 'member' }" @tap="() => {
|
||
if (!vdata.mbrName) return
|
||
vdata.paySelected = 'member'
|
||
}">
|
||
<image src="/static/vipImg/close-mereber.svg" mode="aspectFill" v-if="!vdata.mbrName"></image>
|
||
<image src="/static/vipImg/selected-icon.svg" mode="aspectFill"
|
||
v-if="vdata.paySelected == 'member'"></image>
|
||
</view>
|
||
</view>
|
||
<view class="balance-wrapper" @tap="toRech">
|
||
<view class="ba-left" v-if="vdata.mbrName">可用余额：<text>￥{{ (vdata.balance / 100).toFixed(2) }}</text>
|
||
</view>
|
||
<view class="ba-left" style="color:#835511;" v-else> 您还未注册会员 </view>
|
||
<view class="ba-right" hover-class="hover-but" hover-stay-time="200">
|
||
<text>{{ vdata.mbrName ? '去充值' : '去注册' }}</text>
|
||
<image src="/static/vipImg/icon-arrow.svg" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 充值优惠部分 -->
|
||
<view class="member-pref" v-if="amountRules.length">
|
||
<view class="sub-title">现充值立享</view>
|
||
<view style="padding-top: 11rpx;">
|
||
<block v-for="v in amountRules" :key="v.ruleId">
|
||
<view class="pref-info">
|
||
<view class="pref-title">充值</view>
|
||
<text>￥{{ parseFloat((v.rechargeAmount / 100).toFixed(2)) }}</text>
|
||
<view class="pref-title">到账</view>
|
||
<text>￥{{ parseFloat(((v.rechargeAmount + v.giveAmount) / 100).toFixed(2)) }}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer-keyboard">
|
||
<Keyboard ref="refKey" v-model:value="vdata.amount" :isFixedFlag="vdata.mchInfo.fixedFlag" @pay="payMember"
|
||
@remarks="refRemarks.open()" />
|
||
</view>
|
||
</view>
|
||
<ConfirmPay ref="refConfPay" @pay="confirmMemberPay" />
|
||
<Remarks ref="refRemarks" v-model:value="vdata.buyerRemark" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
|
||
import { ref, reactive } from "vue"
|
||
import { $apiMembers, $payRemberCard, $getMemberInfo, } from "@/http/apiMember.js"
|
||
import { toErrPageFunc } from '@/util/toErrorPageUtil.js'
|
||
import { $getPayPackage, $getAdvert } from "@/http/apiManager.js"
|
||
import storageManage from '@/util/storageManage.js'
|
||
import appConfig from "@/config/appConfig"
|
||
import paywayCallFunc from '@/pages/payway/payway.js'
|
||
import Remarks from "./components/Remarks.vue"
|
||
import Keyboard from "./components/Keyboard.vue"
|
||
import ConfirmPay from "./components/ConfirmPay.vue"
|
||
// import { Base64 } from 'js-base64'
|
||
import { calcThemeColor } from "@/util/member.js"
|
||
onLoad(() => {
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: calcThemeColor()
|
||
})
|
||
// 查询会员信息 token
|
||
$apiMembers({ method: 'mbr.info', channelUesrId: Base64.encode(appConfig.channelUserId) }).then(({ bizData }) => {
|
||
if (bizData) {
|
||
storageManage.iToken(bizData)
|
||
getMemberInfo() //存储token 查询会员信息
|
||
}
|
||
getMchInfos()
|
||
})
|
||
uni.$on('updateMemberInfos', () => {
|
||
console.log('接收页面通讯');
|
||
getMemberInfo()
|
||
})
|
||
getRules()
|
||
})
|
||
onUnload(() => {
|
||
uni.$off('updateMemberInfos')
|
||
})
|
||
const refConfPay = ref(null)
|
||
const refRemarks = ref(null)
|
||
const refKey = ref(null)
|
||
const amountRules = reactive([])
|
||
const vdata = reactive({
|
||
amount: '',
|
||
paySelected: '',
|
||
pageTypeInfo: {},
|
||
payOrderInfo: {},
|
||
mchInfo: {},
|
||
clearStorageFlag: 0, //显示清空缓存的提示
|
||
})
|
||
const pageType = {
|
||
wechatLite: { title: '微信支付', value: 'wechatLite' },
|
||
alipayLite: { title: '支付宝支付', value: 'alipayLite' },
|
||
wechatH5: { title: '微信支付', value: 'wechatH5' },
|
||
alipayH5: { title: '支付宝支付', value: 'alipayH5' },
|
||
ysfpayH5: { title: '云闪付', value: 'ysfpayH5' },
|
||
otherH5: { title: '银联', value: 'otherH5' }
|
||
}
|
||
vdata.pageTypeInfo = pageType[appConfig.currentPageType]
|
||
vdata.paySelected = appConfig.currentPageType
|
||
const toRech = () => uni.navigateTo({ url: '/pageMember/memberInfo/memberInfo' })
|
||
// 获取商户信息 门店头像
|
||
const getMchInfos = () => {
|
||
$apiMembers({ method: 'mch.info' }).then(({ bizData }) => {
|
||
if (bizData.fixedFlag) {
|
||
vdata.amount = (bizData.amount / 100).toFixed(2)
|
||
}
|
||
vdata.mchInfo = bizData || {}
|
||
})
|
||
}
|
||
const payMember = () => {
|
||
if (vdata.amount <= 0) {
|
||
return uni.showToast({
|
||
title: '金额必须大于0',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
// 非会员支付 直接拉起支付
|
||
if (vdata.paySelected != 'member') return pay()
|
||
if (vdata.amount > (vdata.balance / 100)) return uni.showToast({ title: '会员余额不足请前去充值', icon: 'none' })
|
||
refConfPay.value.open(vdata.amount, vdata.buyerRemark)
|
||
}
|
||
// 发起支付
|
||
function pay () {
|
||
vdata.payOrderInfo.amount = vdata.amount
|
||
uni.showLoading({
|
||
title: '请稍等...',
|
||
mask: true
|
||
})
|
||
$getPayPackage(vdata.amount, vdata.buyerRemark, vdata.mbrId || '', vdata.mbrTel || '').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()
|
||
})
|
||
|
||
}
|
||
// 获取会员信息
|
||
const getMemberInfo = () => {
|
||
$getMemberInfo().then(({ bizData }) => {
|
||
console.log('接收页面通讯', bizData);
|
||
vdata.balance = bizData.balance
|
||
vdata.mbrName = bizData.mbrName
|
||
vdata.mbrId = bizData.mbrId
|
||
vdata.mbrTel = bizData.mbrTel
|
||
})
|
||
}
|
||
// 查询会员充值规则
|
||
const getRules = () => {
|
||
$apiMembers().then(({ bizData }) => {
|
||
console.log(bizData.records);
|
||
amountRules.push(...bizData.records)
|
||
})
|
||
}
|
||
const closePage = {
|
||
wechatH5: () => window.WeixinJSBridge.call('closeWindow'),
|
||
alipayH5: () => window.AlipayJSBridge.call('closeWebview'),
|
||
ysfpayH5: () => { window.WeixinJSBridge.call('closeWindow'); window.AlipayJSBridge.call('closeWebview') },
|
||
otherH5: () => { window.WeixinJSBridge.call('closeWindow'); window.AlipayJSBridge.call('closeWebview') }
|
||
}
|
||
// 会员支付
|
||
const confirmMemberPay = () => {
|
||
$payRemberCard(vdata.amount, vdata.buyerRemark).then(res => {
|
||
uni.showToast({ title: '支付成功' })
|
||
refConfPay.value.close()
|
||
if (appConfig.currentPageType.includes('H5')) {
|
||
// 查询是否开启点金计划 如果开启点金计划 window.open() 打开新页面
|
||
$getAdvert({ appPlace: 4 }).then(({ bizData }) => {
|
||
if (bizData && bizData.linkUrl) {
|
||
uni.reLaunch({ url: '/pages/H5/H5?url=' + bizData.linkUrl })
|
||
return false
|
||
}
|
||
return closePage[appConfig.currentPageType]()
|
||
})
|
||
return false
|
||
}
|
||
uni.navigateTo({ url: '/pages/paySuccess/paySuccess?amount=' + vdata.amount + '&member=true' })
|
||
vdata.amount = '0'
|
||
vdata.buyerRemark = ''
|
||
getMemberInfo()
|
||
})
|
||
}
|
||
|
||
// 高级功能模块的显示
|
||
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" scoped>
|
||
.sub-title {
|
||
margin: 50rpx;
|
||
margin-bottom: 20rpx;
|
||
color: #4d4d4dff;
|
||
font-size: 25rpx;
|
||
}
|
||
|
||
.radio {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border: 2rpx solid #00000026;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 16rpx;
|
||
height: 12rpx;
|
||
}
|
||
}
|
||
|
||
.radio-selected {
|
||
background-color: var(--v-primary);
|
||
}
|
||
|
||
.page-weapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
|
||
.header {
|
||
position: relative;
|
||
overflow-y: auto;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: -1;
|
||
height: 40rpx;
|
||
background-color: var(--v-primary);
|
||
}
|
||
|
||
.mch-info {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 50rpx;
|
||
color: #000000ff;
|
||
font-size: 30rpx;
|
||
|
||
.mch-img-box {
|
||
border: 1rpx solid #0000000f;
|
||
|
||
image {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-amount {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
margin: 0 50rpx;
|
||
margin-bottom: 67rpx;
|
||
font-size: 50rpx;
|
||
color: var(--v-primary);
|
||
height: 110rpx;
|
||
|
||
.pay-icon {
|
||
align-self: flex-end;
|
||
color: #808080ff;
|
||
font-size: 50rpx;
|
||
vertical-align: bottom;
|
||
}
|
||
}
|
||
|
||
.pay-select {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
margin: 0 35rpx;
|
||
margin-top: 20rpx;
|
||
height: 100rpx;
|
||
background: #52cc701a;
|
||
border-radius: 20rpx;
|
||
|
||
.pay-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
}
|
||
|
||
text {
|
||
margin-left: 20rpx;
|
||
color: #4d4d4dff;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.surplus-wrapper {
|
||
margin: 20rpx 35rpx;
|
||
padding: 30rpx;
|
||
padding-right: 0;
|
||
border-radius: 20rpx;
|
||
background: #ffbe4c1a;
|
||
|
||
.member-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-right: 30rpx;
|
||
|
||
.member-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
text {
|
||
margin-left: 20rpx;
|
||
color: #4d4d4dff;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
text {
|
||
color: #666;
|
||
}
|
||
|
||
.to-recharge {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 50rpx;
|
||
width: 120rpx;
|
||
background-color: var(--v-primary);
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
margin-left: 30rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.balance-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-left: 60rpx;
|
||
margin-top: 30rpx;
|
||
padding-top: 15rpx;
|
||
height: 70rpx;
|
||
border-top: 1rpx solid #0000000f;
|
||
|
||
.ba-left {
|
||
color: #835511ff;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
|
||
text {
|
||
color: #ff8000ff;
|
||
font-size: 25rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.ba-right {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #1f7099ff;
|
||
font-size: 25rpx;
|
||
|
||
image {
|
||
margin-right: 30rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.Prepaid {
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
.rec-info {
|
||
display: flex;
|
||
margin: 50rpx 60rpx;
|
||
font-size: 28rpx;
|
||
color: #ccc;
|
||
|
||
.info-list {
|
||
margin-left: 30rpx;
|
||
color: var(--v-primary);
|
||
|
||
.l-item {
|
||
margin-bottom: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay-remarks {
|
||
position: absolute;
|
||
top: -80rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
color: var(--v-primary);
|
||
}
|
||
|
||
.footer-keyboard {
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.pay-wrapper {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.member-pref {
|
||
display: flex;
|
||
|
||
.sub-title {
|
||
margin-top: 39rpx;
|
||
}
|
||
|
||
.pref-info {
|
||
display: flex;
|
||
margin: 28rpx 0;
|
||
font-size: 24rpx;
|
||
|
||
view {
|
||
color: #4c4c4cff;
|
||
}
|
||
|
||
text {
|
||
margin-left: 10rpx;
|
||
margin-right: 30rpx;
|
||
color: #ff624fff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hover-but {
|
||
opacity: .5;
|
||
}
|
||
</style> |