refactor(collect-code): 重构收藏码功能

- 修改了 API 接口命名和路径,以适应新的业务逻辑
- 优化了登录流程,增加了验证码登录方式
- 重构了个人中心页面,增加了新的功能组件
- 新增了支付相关页面和逻辑- 优化了代码结构和命名,提高了可维护性
This commit is contained in:
xingyy 2025-02-06 14:03:09 +08:00
parent 8d01653dac
commit bd56b05e60
8 changed files with 232 additions and 213 deletions

View File

@ -1,24 +1,22 @@
import { request } from '@/api/http.js'
export async function senCode(data) {
export async function checkPhone(data) {
return await request({
url:'/api/v1/common/check/phone',
method: 'POST',
data
})
}
export async function userSend(data) {
return await request( {
url:'/api/v1/m/user/send',
method: 'POST',
data
})
}
export async function userLogin(data) {
export async function mobileLogin(data) {
return await request( {
url:'/api/v1/m/user/login',
method: 'POST',
data
})
}
export async function userUpdate(data) {
return await request( {
url:'/api/v1/m/user/update',
url:'/api/v1/m/user/mobile/login',
method: 'POST',
data
})

View File

@ -1,15 +1,15 @@
import { request } from '@/api/http.js'
export async function artworkList(data) {
export async function offlineQrcodeList(data) {
return await request( {
url:'/api/v1/m/auction/default/artwork/list',
url:'/api/v1/offlineQrcode/query',
method: 'POST',
data
})
}
export async function defaultDetail(data) {
export async function offlineQrcodeCreate(data) {
return await request ({
url:'/api/v1/m/auction/default/detail',
url:'/api/v1/offlineQrcode/create',
method: 'POST',
data
})

View File

@ -2,11 +2,12 @@
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'
import { senCode, userLogin } from "@/api/auth/index.js";
import { authStore } from "@/stores/auth/index.js";
import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
import { message } from '@/components/x-message/useMessage.js'
// ... ...
import FingerprintJS from '@fingerprintjs/fingerprintjs'
const { userInfo, token,fingerprint } = authStore()
import {checkPhone, mobileLogin, userSend} from "@/api-collect-code/auth/index.js";
const { userInfo, token,fingerprint } = codeAuthStore()
const router = useRouter();
const route = useRoute();
const { locale } = useI18n()
@ -52,11 +53,19 @@ checkFingerprint()
const vanSwipeRef = ref(null)
const getCode = async () => {
loadingRef.value.loading1 = true
const res = await senCode({
telNum: phoneNum.value,
zone: '86'
const res = await checkPhone({
tel: phoneNum.value,
})
loadingRef.value.loading1 = false
if (res.status === 0){
const res=await userSend({telNum:phoneNum.value,zone:'+86'})
if (res.status === 0){
pane.value = 1
vanSwipeRef.value?.swipeTo(pane.value)
showKeyboard.value = true
}
}
/* loadingRef.value.loading1 = false
if (res.status === 0) {
@ -64,7 +73,7 @@ const getCode = async () => {
pane.value = 1
vanSwipeRef.value?.swipeTo(pane.value)
showKeyboard.value = true
startCountdown();
startCountdown();*/
/* pane.value = 1
vanSwipeRef.value?.swipeTo(pane.value)
showKeyboard.value=true
@ -81,10 +90,10 @@ const goBack = () => {
}
const goLogin = async () => {
loadingRef.value.loading2 = true
const res = await userLogin({
telNum: phoneNum.value,
zone: '86',
code: code.value
const res = await mobileLogin({
TelNum: phoneNum.value,
Password:loginType.value===1?password.value:'',
Code: loginType.value===0?code.value:''
})
if (res.status === 0) {
userInfo.value = res.data.accountInfo
@ -110,7 +119,7 @@ const goLogin = async () => {
<div v-show="pane === 0">
<div class="">
<div class="border-b-[1.7px] mt-[8px]">
<van-field v-model="phoneNum" clearable :placeholder="$t('login.phonePlaceholder')">
<van-field v-model="phoneNum" clearable placeholder="请输入手机号">
<template #label>
<div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
手机号
@ -120,7 +129,7 @@ const goLogin = async () => {
</div>
<div class="border-b-[1.7px] mt-[8px]" v-show="loginType === 1">
<van-field v-model="password" clearable :placeholder="$t('login.passwordPlaceholder')">
<van-field v-model="password" clearable placeholder="请输入密码">
<template #label>
<div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
密码
@ -138,21 +147,14 @@ const goLogin = async () => {
</div>
<div class="mt-[55px]">
<div v-if="loginType === 0">
<van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('login.getCode')"
type="primary" block style="height: 48px" @click="getCode">{{ $t('login.getCode')
}}</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{
$t('login.getCode')
}}</van-button>
<van-button :loading="loadingRef.loading1" v-if="phoneNum" loading-text="获取验证码"
type="primary" block style="height: 48px" @click="getCode">获取验证码</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">获取验证码</van-button>
</div>
<div v-else>
<van-button type="primary" v-if="password" block :loading="loadingRef.loading2" :loading-text="$t('login.login')"
style="height: 48px;margin-top:10px" @click="goLogin">{{
$t('login.login')
}}</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{
$t('login.login')
}}</van-button>
<van-button type="primary" v-if="password" block :loading="loadingRef.loading2" loading-text="登录"
style="height: 48px;margin-top:10px" @click="goLogin">登录</van-button>
<van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">登录</van-button>
</div>
</div>
</div>
@ -161,7 +163,7 @@ const goLogin = async () => {
<div v-show="pane === 1">
<div class="flex mb-[16px]">
<div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
<div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
</div>
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
<div :class="`${countdown > 0 ? 'text-#BDBDBD' : 'text-#2B53AC'} text-14px`">

View File

@ -0,0 +1,49 @@
<script setup>
import XImage from "@/components/x-image/index.vue";
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)
}
</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 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>

View File

@ -1,25 +1,82 @@
<script setup>
import { userArtworks } from "@/api/goods/index.js";
import { authStore } from "@/stores/auth/index.js";
import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
import XImage from '@/components/x-image/index.vue'
import {useRouter} from "#vue-router";
import {goodStore} from "~/stores-collect-code/goods/index.js";
import {ref} from "vue";
import {offlineQrcodeCreate} from "~/api-collect-code/goods/index.js";
import codeCard from './components/codeCard/index.vue'
definePageMeta({
layout: 'default',
i18n: 'menu.profile',
})
const { userInfo } = authStore()
const initData = async () => {
const res = await userArtworks({})
if (res.status === 0) {
const router = useRouter();
const localState = ref({
finished: false,
refreshing: false,
showDetail: false,
showHeight: ''
})
}
const { userInfo, } = codeAuthStore()
const {getOfflineQrcodeList,itemList, loading: storeLoading,pageRef}= goodStore()
const initData = async () => {
getOfflineQrcodeList()
}
const show=ref(true)
const show=ref(false)
const close=()=>{
show.value=false
}
const confirm=()=>{
show.value=true
const logOut=()=>{
localStorage.clear()
router.push('/collectCode/login')
}
const createForm=ref({
lotNo:'',
price:'',
})
const confirm=async ()=>{
const res=await offlineQrcodeCreate(createForm.value)
if (res.status===0){
show.value=false
}
}
const onRefresh = async () => {
try {
localState.value.refreshing = true
localState.value.finished = false
const { finished } = await getOfflineQrcodeList(true)
localState.value.finished = finished
} finally {
localState.value.refreshing = false
}
}
const loadMore = async () => {
pageRef.value.page++
const { finished } = await getOfflineQrcodeList()
localState.value.finished = finished
}
const validateInput = (e) => {
const value = e.target.value
const char = String.fromCharCode(e.charCode)
if (!/[\d.]/.test(char)) {
e.preventDefault()
return
}
if (char === '.' && (value.includes('.') || !value)) {
e.preventDefault()
return
}
if (value.includes('.') && value.split('.')[1]?.length >= 2) {
e.preventDefault()
return
}
}
initData()
</script>
@ -34,7 +91,7 @@ initData()
<div class="text-18px text-#181818">{{ userInfo.realName }}</div>
<div class="text-#575757 text-14px">{{ userInfo.telNum }}</div>
</div>
<div class="grow-1 flex justify-end">
<div class="grow-1 flex justify-end" @click="logOut">
<img class="w-40px h-40px" src="@/static/images/logout.png" alt="">
</div>
</div>
@ -43,132 +100,31 @@ initData()
</div>
<div class="grow-1 flex flex-col overflow-hidden py-15px">
<div class="overflow-auto">
<van-pull-refresh>
<van-list finished-text="没有更多了" class="px-14px">
<van-swipe-cell class="mb-14px">
<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">¥ 980,000/980,000</div>
<div class="text-12px text-#18A058">已付款</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=""></XImage>
</div>
<div class="text-12px text-#1E1E1E">
<div>Lot22</div>
<div>创建人张三丰</div>
<div>创建时间2024-09-06 12:12:12</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 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>
<van-pull-refresh v-model="localState.refreshing"
success-text="刷新成功"
:success-duration="700"
@refresh="onRefresh">
<van-list v-model:loading="storeLoading"
:finished="localState.finished"
finished-text="没有更多了"
@load="loadMore" class="px-14px">
<template v-for="(item,index) of itemList" :key="item.qrUid">
<template v-if="item.payStatus===1">
<van-swipe-cell class="mb-14px" >
<codeCard :data="item"></codeCard>
<template #right>
<div class="w-65px h-full bg-#CF3050 flex items-center justify-center">
<img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
</div>
</div>
</div>
</div>
<template #right>
<div class="w-65px h-full bg-#CF3050 flex items-center justify-center">
<img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
</div>
</template>
</van-swipe-cell>
</template>
</van-swipe-cell>
<van-swipe-cell class="mb-14px">
<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">¥ 980,000/980,000</div>
<div class="text-12px text-#18A058">已付款</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=""></XImage>
</div>
<div class="text-12px text-#1E1E1E">
<div>Lot22</div>
<div>创建人张三丰</div>
<div>创建时间2024-09-06 12:12:12</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 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 #right>
<div class="w-65px h-full bg-#CF3050 flex items-center justify-center">
<img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
</div>
<template v-else>
<codeCard :data="item"></codeCard>
</template>
</van-swipe-cell>
<van-swipe-cell class="mb-14px">
<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">¥ 980,000/980,000</div>
<div class="text-12px text-#18A058">已付款</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=""></XImage>
</div>
<div class="text-12px text-#1E1E1E">
<div>Lot22</div>
<div>创建人张三丰</div>
<div>创建时间2024-09-06 12:12:12</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 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 #right>
<div class="w-65px h-full bg-#CF3050 flex items-center justify-center">
<img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
</div>
</template>
</van-swipe-cell>
<van-swipe-cell class="mb-14px">
<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">¥ 980,000/980,000</div>
<div class="text-12px text-#18A058">已付款</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=""></XImage>
</div>
<div class="text-12px text-#1E1E1E">
<div>Lot22</div>
<div>创建人张三丰</div>
<div>创建时间2024-09-06 12:12:12</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 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 #right>
<div class="w-65px h-full bg-#CF3050 flex items-center justify-center">
<img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
</div>
</template>
</van-swipe-cell>
</template>
</van-list>
</van-pull-refresh>
</div>
@ -188,7 +144,8 @@ initData()
<div class="text-#939393 text-12px">RMB</div>
</div>
<div>
<input class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入金额">
<input v-model="createForm.price" @keypress="validateInput"
class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入金额">
</div>
</div>
<div class="flex items-center">
@ -196,7 +153,7 @@ initData()
<div class="text-#1A1A1A text-16px">Lot号</div>
</div>
<div>
<input class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入拍品序号">
<input type="number" v-model="createForm.lotNo" class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入拍品序号">
</div>
</div>
</div>

View File

@ -0,0 +1,43 @@
<script setup>
const payStatus=ref(0)
const changePayStatus=()=>{
payStatus.value=payStatus.value===0?1:0
}
const validateInput = (e) => {
const value = e.target.value
const char = String.fromCharCode(e.charCode)
if (!/[\d.]/.test(char)) {
e.preventDefault()
return
}
if (char === '.' && (value.includes('.') || !value)) {
e.preventDefault()
return
}
if (value.includes('.') && value.split('.')[1]?.length >= 2) {
e.preventDefault()
return
}
}
</script>
<template>
<div class="w-[100vw] h-screen-nav bg-[url('@/static/images/3532@2x.png')] bg-cover flex-grow-1 flex flex-col items-center pt-183px">
<div class="mb-30px">
<img class="w-126px h-126px" src="@/static/images/dddf34@2x.png" alt="">
</div>
<div class="text-#1A1A1A text-16px mb-25px font-bold">{{payStatus===0?'支付全部':'支付部分'}}</div>
<div class="text-#999999 text-16px mb-24px font-bold" v-if="payStatus===0">RMB 5000</div>
<div class="mb-12px">
<input class="w-272px h-48px bg-#F3F3F3 px-11px text-16px" type="text" placeholder="最多RMB5,000" @keypress="validateInput">
</div>
<div class="text-#2B53AC text-14px" @click="changePayStatus">{{payStatus===1?'支付全部':'支付部分'}}</div>
</div>
</template>
<style scoped>
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

View File

@ -1,6 +1,7 @@
import { createGlobalState } from '@vueuse/core'
import { ref } from 'vue'
import { artworkList, defaultDetail, artworkDetail } from "@/api/goods/index.js"
import {offlineQrcodeList} from "~/api-collect-code/goods/index.js";
export const goodStore = createGlobalState(() => {
// 状态定义
@ -26,35 +27,20 @@ export const goodStore = createGlobalState(() => {
pageRef.value.itemCount = 0
}
// 获取拍卖详情
const getAuctionDetail = async () => {
try {
loading.value = true
const res = await defaultDetail({})
if (res.status === 0) {
auctionDetail.value = res.data
}
} catch (err) {
console.error('获取拍卖详情错误:', err)
} finally {
loading.value = false
}
}
// 获取艺术品列表
const getArtworkList = async (isRefresh = false) => {
const getOfflineQrcodeList = async (isRefresh = false) => {
if (isRefresh) {
resetPage()
}
try {
loading.value = true
const res = await artworkList({
auctionUuid: auctionDetail.value.uuid,
const res = await offlineQrcodeList({
page: pageRef.value.page,
pageSize: pageRef.value.pageSize
})
if (res.status === 0) {
const newItems = res.data.data || []
const newItems = res.data.Data || []
if (isRefresh) {
itemList.value = newItems
@ -70,27 +56,13 @@ export const goodStore = createGlobalState(() => {
}
return { finished: true, items: [] }
} catch (err) {
console.error('获取艺术品列表错误:', err)
return { finished: true, items: [] }
} finally {
loading.value = false
}
}
// 获取艺术品详情
const getArtworkDetail = async (uuid) => {
try {
loading.value = true
const res = await artworkDetail({ uuid })
if (res.status === 0) {
artWorkDetail.value = res.data
}
} catch (err) {
console.error('获取艺术品详情错误:', err)
} finally {
loading.value = false
}
}
return {
// 状态
@ -106,9 +78,7 @@ export const goodStore = createGlobalState(() => {
loading,
error,
// 方法
getAuctionDetail,
getArtworkList,
getArtworkDetail,
getOfflineQrcodeList,
resetPage
}
})