You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
288 lines
8.3 KiB
288 lines
8.3 KiB
11 months ago
|
<script setup lang="ts">
|
||
|
|
import { payConfigApi, payGetCashierApi, payPaymentApi } from '~/server/orderApi'
|
||
|
|
import { ref, reactive } from 'vue'
|
||
|
|
import QrcodeVue from 'qrcode.vue'
|
||
|
|
const { routeQuery } = useRouterItem()
|
||
|
|
|
||
|
|
//收银台信息
|
||
|
|
const {
|
||
|
|
data: payInfo,
|
||
|
|
refresh,
|
||
|
|
pending: listLoading,
|
||
|
|
} = await useAsyncData(async () => payGetCashierApi(routeQuery.orderNo))
|
||
|
|
if (!payInfo.value) linkNavigateTo(`/users/order_list`, { type: 1 })
|
||
|
|
|
||
|
|
const bgColor = reactive<any>({
|
||
|
|
bgColor: '',
|
||
|
|
Color: '#E93323',
|
||
|
|
width: '36rpx',
|
||
|
|
timeTxtwidth: '16rpx',
|
||
|
|
isDay: true,
|
||
|
|
fontSize: '14px',
|
||
|
|
})
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取支付配置
|
||
|
|
*/
|
||
|
|
const payTypeList = ref<any[]>([
|
||
|
|
{
|
||
|
|
name: '微信支付',
|
||
|
|
id: 1,
|
||
|
|
value: 'weixin',
|
||
|
|
tips: '使用微信扫码支付',
|
||
|
|
payStatus: false,
|
||
|
|
icon: 'icon-weixinzhifu',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '支付宝支付',
|
||
|
|
id: 2,
|
||
|
|
value: 'alipay',
|
||
|
|
tips: '使用支付宝扫码支付',
|
||
|
|
payStatus: false,
|
||
|
|
icon: 'icon-zhifubaozhifu',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '余额支付',
|
||
|
|
id: 3,
|
||
|
|
value: 'yue',
|
||
|
|
tips: '余额',
|
||
|
|
payStatus: false,
|
||
|
|
userBalance: '',
|
||
|
|
icon: 'icon-yuezhifu',
|
||
|
|
},
|
||
|
|
])
|
||
|
|
const loading = ref<boolean>(false)
|
||
|
|
const isShow = ref<boolean>(false)
|
||
|
|
const getPayConfig = async () => {
|
||
|
|
loading.value = true
|
||
|
|
await payConfigApi()
|
||
|
|
.then((res) => {
|
||
|
|
payTypeList.value[2].payStatus = res.yuePayStatus
|
||
|
|
payTypeList.value[2].userBalance = res.userBalance ? res.userBalance : 0
|
||
|
|
payTypeList.value[0].payStatus = res.payWechatOpen
|
||
|
|
payTypeList.value[1].payStatus = res.aliPayStatus
|
||
|
|
if (payTypeList.value.length) {
|
||
|
|
isShow.value = false
|
||
|
|
} else {
|
||
|
|
isShow.value = true
|
||
|
|
}
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
getPayConfig()
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 选择支付方式
|
||
|
|
* @param type
|
||
|
|
*/
|
||
|
|
const payType = ref<string>('weixin')
|
||
|
|
const handlePayItem = (type: string) => {
|
||
|
|
payType.value = type
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 立即支付
|
||
|
|
*/
|
||
|
|
import useDialog from '~/composables/useDialog'
|
||
|
|
const { bool: dialogVisibleQrcode, DialogOpen, DialogClose } = useDialog()
|
||
|
|
const payQrcode = ref<string>('') //支付二维码
|
||
|
|
const payChannel = ref<string>('')
|
||
|
|
const btnloading = ref<boolean>(false)
|
||
|
|
const handleOrderPay = async () => {
|
||
|
|
if (!payType.value) return feedback.msgWarning('请选择支付方式')
|
||
|
|
if (payType.value === 'yue') {
|
||
|
|
payChannel.value = 'yue'
|
||
|
|
} else if (payType.value == 'alipay') {
|
||
|
|
payChannel.value = 'alipayPc'
|
||
|
|
} else {
|
||
|
|
payChannel.value = 'native'
|
||
|
|
}
|
||
|
|
btnloading.value = true
|
||
|
|
let data = {
|
||
|
|
orderNo: routeQuery.orderNo,
|
||
|
|
payChannel: payChannel.value,
|
||
|
|
payType: payType.value,
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
const res = await payPaymentApi(data)
|
||
|
|
if (res.payType === 'alipay') {
|
||
|
|
payQrcode.value = res.alipayRequest
|
||
|
|
DialogOpen()
|
||
|
|
} else if (res.payType === 'yue') {
|
||
|
|
linkNavigateTo(`/order/order_pay_status`, { orderNo: routeQuery.orderNo })
|
||
|
|
} else {
|
||
|
|
payQrcode.value = res.jsConfig.mwebUrl
|
||
|
|
DialogOpen()
|
||
|
|
}
|
||
|
|
btnloading.value = false
|
||
|
|
} catch (err: any) {
|
||
|
|
// linkNavigateTo(`/order/order_pay_status`, { orderNo: routeQuery.orderNo })
|
||
|
|
btnloading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 支付弹窗
|
||
|
|
*/
|
||
|
|
|
||
|
|
import feedback from '~/utils/feedback'
|
||
|
|
import useRouterItem from '~/composables/useRouterItem'
|
||
|
|
import { linkNavigateTo } from '~/utils/util'
|
||
|
|
|
||
|
|
const handleCloseQrcode = () => {
|
||
|
|
DialogClose()
|
||
|
|
}
|
||
|
|
|
||
|
|
//我已支付
|
||
|
|
const getPaymentStatus = () => {
|
||
|
|
linkNavigateTo(`/order/order_pay_status`, { orderNo: routeQuery.orderNo })
|
||
|
|
}
|
||
|
|
|
||
|
|
//倒计时结束
|
||
|
|
const stopTime = () => {
|
||
|
|
linkNavigateTo(`/order/order_pay_status`, { orderNo: 0 })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="wrapper_1200 order_payment">
|
||
|
|
<page-header title="收银台"></page-header>
|
||
|
|
<!--提示语-->
|
||
|
|
<div v-loading="listLoading" class="w-100% borRadius bg-#FFF py-56px px-30px flex-between-center mbtom20">
|
||
|
|
<div class="acea-row">
|
||
|
|
<img class="backImg w100px h90px" src="~/assets/images/tjchenggong.png" alt="" />
|
||
|
|
<div class="ml-30px acea-row flex-col w-745px">
|
||
|
|
<div class="text-20px fontColor333 fw-700 lg-20px mb-27px">订单提交成功，去付款吧~</div>
|
||
|
|
<div class="acea-row text-14px fontColor333 lh-14px mb-12px">
|
||
|
|
请在
|
||
|
|
<countDown
|
||
|
|
class="ml-5px mr-5px"
|
||
|
|
:is-day="true"
|
||
|
|
:tip-text="' '"
|
||
|
|
:day-text="' '"
|
||
|
|
:hour-text="' : '"
|
||
|
|
:minute-text="' : '"
|
||
|
|
:second-text="' '"
|
||
|
|
:datatime="payInfo.cancelDateTime / 1000"
|
||
|
|
:isCol="false"
|
||
|
|
:bgColor="bgColor"
|
||
|
|
@stopTime="stopTime"
|
||
|
|
>
|
||
|
|
</countDown
|
||
|
|
>内完成支付，超时后订单将会自动取消
|
||
|
|
</div>
|
||
|
|
<div class="borRadius text-14px lh-20px">
|
||
|
|
收货信息：{{ payInfo?.consigneeName }} {{ payInfo?.consigneePhone }} {{ payInfo?.consigneeAddress }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="acea-row flex-col flex-justify-around">
|
||
|
|
<div class="fontColor333 text-14px mbtom20">
|
||
|
|
应付总额：
|
||
|
|
<span class="font-color text-14px oppoSans-M"
|
||
|
|
>￥<span class="text-30px font-color dinProRegular">{{ payInfo?.payPrice }}</span></span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="text-14px fontColor6 text-right">共{{ payInfo?.totalNum }}件商品</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--支付方式-->
|
||
|
|
<div v-if="isShow" class="titleNo">暂无支付方式！</div>
|
||
|
|
<div v-else class="w-100% borRadius bg-#FFF py-30px px-30px">
|
||
|
|
<div class="fonts16 text-#282828 mbtom30">选择以下支付方式</div>
|
||
|
|
<div v-loading="loading" class="acea-row mbtom30">
|
||
|
|
<template v-for="item in payTypeList" :key="item.id">
|
||
|
|
<div
|
||
|
|
v-if="item.payStatus"
|
||
|
|
@click="handlePayItem(item.value)"
|
||
|
|
:class="payType === item.value ? 'borderSolRed' : 'pay-type'"
|
||
|
|
class="w-270px h-80px b-rd-8px flex-x-center flex-y-center mr-20px cursors"
|
||
|
|
>
|
||
|
|
<span class="iconfont mr-14px" :class="item.icon"></span>
|
||
|
|
<div class="acea-row flex-col flex-justify-around">
|
||
|
|
<div class="fonts16 text-#4E4E4E mb-6px">{{ item.name }}</div>
|
||
|
|
<div class="font12 text-#969696">
|
||
|
|
{{ item.tips }}
|
||
|
|
<span v-if="item.userBalance">：￥{{ item.userBalance }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
<div class="acea-row row-right">
|
||
|
|
<div
|
||
|
|
v-loading="btnloading"
|
||
|
|
@click="handleOrderPay"
|
||
|
|
class="cursors b-rd-25px bg-color text-center text-#fff w-150px h-50px text-16px line-height-50px"
|
||
|
|
>
|
||
|
|
立即支付
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 支付弹窗 -->
|
||
|
|
<el-dialog
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
v-model="dialogVisibleQrcode"
|
||
|
|
width="450px"
|
||
|
|
:title="payType == 'alipay' ? '支付宝支付' : '微信支付'"
|
||
|
|
center
|
||
|
|
:show-close="false"
|
||
|
|
:before-close="handleCloseQrcode"
|
||
|
|
>
|
||
|
|
<div class="flex-x-center text-#333 text-14px mb-20px mt-4px" style="align-items: end;">
|
||
|
|
支付：<span class="font-color font-600 oppoSans-M">￥</span><span class="font-color text-30px font-600 lh-30px dinProRegular">{{payInfo?.payPrice}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex-x-center">
|
||
|
|
<qrcode-vue :value="payQrcode" :size="280" level="H" />
|
||
|
|
</div>
|
||
|
|
<div class="mt-30px text-16px text-#333 text-center">
|
||
|
|
请使用{{ payType == 'alipay' ? '支付宝' : '微信' }}扫描二维码支付
|
||
|
|
</div>
|
||
|
|
<template #footer>
|
||
|
|
<div class="dialog-footer flex-x-center">
|
||
|
|
<div
|
||
|
|
class="borderSol w-120px h-44px lh-43px text-16px text-#333 b-rd-25px cursors"
|
||
|
|
@click="handleCloseQrcode"
|
||
|
|
>
|
||
|
|
放弃支付
|
||
|
|
</div>
|
||
|
|
<div class="handleBtn w-120px h-44px lh-43px text-16px ml-20px cursors" @click="getPaymentStatus">
|
||
|
|
我已支付
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
:deep(.el-dialog__title){
|
||
|
|
font-size: 20px !important;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333 !important;
|
||
|
|
}
|
||
|
|
.pay {
|
||
|
|
&-type {
|
||
|
|
border: 1px solid #cccccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.order_payment {
|
||
|
|
.iconfont {
|
||
|
|
font-size: 36px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-yuezhifu {
|
||
|
|
color: #fe9c01;
|
||
|
|
}
|
||
|
|
.icon-weixinzhifu {
|
||
|
|
color: #09bb07;
|
||
|
|
}
|
||
|
|
.icon-zhifubaozhifu {
|
||
|
|
color: #00aaea;
|
||
|
|
}
|
||
|
|
</style>
|