43b1afb8f0
- 新增 offlineQrcode 和 createOrder 接口 - 实现个人资讯页面的数据获取和处理 - 添加支付页面，支持全款和部分款项支付 - 优化签名协议页面，使用新接口获取数据 - 新增支付结果页面，展示支付状态和金额
81 lines
2.7 KiB
Vue
81 lines
2.7 KiB
Vue
<script setup>
|
||
|
||
import XImage from "@/components/x-image/index.vue";
|
||
import {useRuntimeConfig} from "#app";
|
||
import QRCode from 'qrcode'
|
||
import { showImagePreview } from 'vant';
|
||
import {offlineQrcode, offlineQrcodeDelete} from "~/api-collect-code/goods/index.js";
|
||
|
||
const statusLabel=[
|
||
{label:'已付款',value:2,color:'#18A058'}, {label:'未付款',value:1,color:'#CF3050'}, {label:'已部分付款',value:4,color:'#F09F1F'}
|
||
]
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
});
|
||
const itemLabel=(data)=>{
|
||
return statusLabel.find(x=>x.value===data.payStatus)
|
||
}
|
||
const config = useRuntimeConfig()
|
||
const getQRBase64 = async () => {
|
||
console.log(`http://192.168.88.25:3000/collectCode/signature/personal-Info?number=2&auctionArtworkUuid=${openRo.value.auctionArtworkUuid}&qrUid=${props.data.qrUid}&price=${props.data.price}¤cy=${props.data.currency}`)
|
||
try {
|
||
return await QRCode.toDataURL(`http://192.168.88.25:3000/collectCode/signature/personal-Info?number=2&auctionArtworkUuid=${openRo.value.auctionArtworkUuid}&qrUid=${props.data.qrUid}&price=${props.data.price}¤cy=${props.data.currency}`, {
|
||
width: 200,
|
||
margin: 4,
|
||
errorCorrectionLevel: 'H'
|
||
})
|
||
} catch (err) {
|
||
console.error('生成二维码失败:', err)
|
||
return null
|
||
}
|
||
}
|
||
const openRo=ref({})
|
||
const openQrCode=async (data)=>{
|
||
const res=await offlineQrcode({
|
||
qrUid:data.qrUid
|
||
})
|
||
if (res.status===0){
|
||
openRo.value=res.data
|
||
}
|
||
console.log(res,'res')
|
||
const base64=await getQRBase64()
|
||
showImagePreview([base64])
|
||
}
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col h-120px bg-#F7F7F7 rounded-4px px-13px">
|
||
<div class="flex h-40px border-b border-b-#F0F0F0 items-center justify-between px-8px">
|
||
<div class="text-14px text-#000">¥ {{data.paidPrice}}/{{data.price}}</div>
|
||
<div :class="`text-12px text-${itemLabel(data).color}`">{{itemLabel(data).label}}</div>
|
||
</div>
|
||
<div class="flex flex-grow-1 px-8px py-11px">
|
||
<div class="mr-8px">
|
||
<XImage class="w-57px h-56px rounded-4px" :src="data.hdPic"></XImage>
|
||
</div>
|
||
<div class="text-12px text-#1E1E1E">
|
||
<div>Lot：{{ data.lotNo }}</div>
|
||
<div>创建人：{{ data.userName }}</div>
|
||
<div>创建时间：{{data.createdAt}}</div>
|
||
</div>
|
||
<div class="flex flex-col justify-end ml-auto ">
|
||
<div class="flex w-55px h-26px bg-#2B53AC rounded-4px justify-center items-center">
|
||
<div @click="openQrCode(data)" class="text-12px text-#fff line-height-none mt-0.5px mr-5px">查看</div>
|
||
<div >
|
||
<img class="w-12px h-12px" src="@/static/images/icon-design-42@3x.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style> |