218 lines
7.8 KiB
Vue
218 lines
7.8 KiB
Vue
<script setup>
|
|
import { userArtworks } from "@/api/goods/index.js";
|
|
import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
|
|
import { showImagePreview } from 'vant';
|
|
|
|
|
|
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, offlineQrcodeDelete, offlineQrcodeList} from "~/api-collect-code/goods/index.js";
|
|
import codeCard from './components/codeCard/index.vue'
|
|
import {message} from "~/components/x-message/useMessage.js";
|
|
definePageMeta({
|
|
layout: 'default',
|
|
i18n: 'menu.profile',
|
|
})
|
|
const router = useRouter();
|
|
const localState = ref({
|
|
finished: false,
|
|
refreshing: false,
|
|
showDetail: false,
|
|
showHeight: ''
|
|
})
|
|
const {t} =useI18n()
|
|
const { userInfo, } = codeAuthStore()
|
|
const {getOfflineQrcodeList,itemList, loading: storeLoading,pageRef}= goodStore()
|
|
const initData = async () => {
|
|
onRefresh()
|
|
}
|
|
const show=ref(false)
|
|
const close=()=>{
|
|
show.value=false
|
|
}
|
|
const logOut=()=>{
|
|
localStorage.clear()
|
|
router.push('/collectCode/login')
|
|
}
|
|
const createForm=ref({
|
|
lotNo:'',
|
|
price:'',
|
|
})
|
|
const confirm=async ()=>{
|
|
if (!createForm.value.price){
|
|
message.warning(t('collectCode.message.amountRequired'))
|
|
return false
|
|
}else if (!createForm.value.lotNo){
|
|
message.warning(t('collectCode.message.lotNoRequired'))
|
|
return false
|
|
}
|
|
function is25Format(num) {
|
|
return /^25\d{3}$/.test(String(num));
|
|
}
|
|
if (!is25Format(createForm.value.lotNo)){
|
|
message.warning(t('collectCode.message.lotNoType'))
|
|
return
|
|
}
|
|
|
|
const res=await offlineQrcodeCreate({...createForm.value,price:String(createForm.value.price),lotNo:createForm.value.lotNo-25000})
|
|
if (res.status===0){
|
|
show.value=false
|
|
onRefresh()
|
|
}
|
|
}
|
|
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 abnormal=ref(false)
|
|
const abnormalRow=ref({})
|
|
const inputLotNo=async (data)=>{
|
|
const res=await offlineQrcodeList({
|
|
lotNo:createForm.value.lotNo
|
|
})
|
|
if (res.status===0){
|
|
if (res.data.Data?.length>0){
|
|
abnormal.value=true
|
|
abnormalRow.value=res.data.Data?.[0]
|
|
}
|
|
}
|
|
}
|
|
const deleteData=async (qrUid)=>{
|
|
const res=await offlineQrcodeDelete({
|
|
qrUid:qrUid
|
|
})
|
|
if (res.status===0){
|
|
getOfflineQrcodeList()
|
|
message.success(t('collectCode.message.deleteSuccess'))
|
|
onRefresh()
|
|
}
|
|
}
|
|
initData()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] h-screen-nav bg-cover pt-43px flex-grow-1 flex flex-col">
|
|
<div class="flex items-center px-16px mb-43px">
|
|
<div class="mr-23px">
|
|
<img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<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" @click="logOut">
|
|
<img class="w-40px h-40px" src="@/static/images/logout.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="border-b-1px border-b-#D3D3D3 px-16px flex">
|
|
<div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">{{ $t('collectCode.mine.offlineQrcode') }}</div>
|
|
</div>
|
|
<div class="grow-1 flex flex-col overflow-hidden py-15px">
|
|
<div class="overflow-auto">
|
|
<van-pull-refresh v-model="localState.refreshing"
|
|
:success-text="$t('collectCode.mine.refreshSuccess')"
|
|
:success-duration="700"
|
|
@refresh="onRefresh">
|
|
<van-list v-model:loading="storeLoading"
|
|
:finished="localState.finished"
|
|
:finished-text="$t('collectCode.mine.noMore')"
|
|
@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" @click="deleteData(item.qrUid)">
|
|
<img class="w-22px h-24px" src="@/static/images/delete3@.png" alt="">
|
|
</div>
|
|
</template>
|
|
</van-swipe-cell>
|
|
</template>
|
|
<template v-else>
|
|
<div class="mb-14px">
|
|
<codeCard :data="item"></codeCard>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
</div>
|
|
</div>
|
|
<div class="h-81px w-full flex justify-center shrink-0 pt-10px">
|
|
<div class="w-213px h-38px bg-#2B53AC text-#fff flex justify-center items-center text-14px rounded-4px" @click="show=true">
|
|
{{ $t('collectCode.mine.add') }}</div>
|
|
</div>
|
|
<van-dialog v-model:show="show">
|
|
<div class="pt-18px pb-24px px-24px">
|
|
<div class="text-16px text-#000 font-bold text-center mb-26px">{{ $t('collectCode.mine.addQrcode.title') }}</div>
|
|
<div class="">
|
|
<div class="flex mb-6px items-center">
|
|
<div class="w-58px">
|
|
<div class="text-#1A1A1A text-16px">{{ $t('collectCode.mine.addQrcode.amount') }}</div>
|
|
<div class="text-#939393 text-12px">{{ $t('collectCode.mine.addQrcode.amountUnit') }}</div>
|
|
</div>
|
|
<div>
|
|
<input v-model="createForm.price" type="number"
|
|
class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" :placeholder="$t('collectCode.mine.addQrcode.amountPlaceholder')">
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-58px">
|
|
<div class="text-#1A1A1A text-16px">{{ $t('collectCode.mine.addQrcode.lotNo') }}</div>
|
|
</div>
|
|
<div>
|
|
<input type="number" v-model="createForm.lotNo" @input="inputLotNo" class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" :placeholder="$t('collectCode.mine.addQrcode.lotNoPlaceholder')">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center" v-if="abnormal">
|
|
<div class="text-#CF3050 text-12px mb-8px mt-4px">{{ $t('collectCode.mine.addQrcode.existingWarning') }}</div>
|
|
<div>
|
|
<XImage class="w-116px h-116px rounded-4px mb-9px" :src="abnormalRow.hdPic"></XImage>
|
|
<div class="text-12px text-#575757 flex flex-col items-center">
|
|
<div>{{ abnormalRow.title }}</div>
|
|
<div>{{ abnormalRow.author }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="border-t flex">
|
|
<van-button class="w-50% h-56px" style="border: none;border-radius: 0;border-right: 1.5px solid #E7E7E7" @click="show=false">
|
|
<span class="text-#000 text-16px text-center">{{ $t('collectCode.mine.addQrcode.cancel') }}</span>
|
|
</van-button>
|
|
<van-button class="w-50% h-56px !rounded-0" style="border: none;border-radius: 0" @click="confirm">
|
|
<span class="text-#000 text-16px text-center text-#2B53AC">{{ $t('collectCode.mine.addQrcode.confirm') }}</span>
|
|
</van-button>
|
|
</div>
|
|
</template>
|
|
</van-dialog>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
:deep(.van-hairline--top.van-dialog__footer){
|
|
&>.van-button{
|
|
border-top: 1px solid #E7E7E7;
|
|
&.van-dialog__cancel{
|
|
border-right: 1px solid #E7E7E7;
|
|
}
|
|
}
|
|
}
|
|
</style>
|