<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 { userInfo, } = codeAuthStore() const {getOfflineQrcodeList,itemList, loading: storeLoading,pageRef}= goodStore() const initData = async () => { onRefresh() } const show=ref(false) const close=()=>{ console.log('show',show.value) 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 } const res=await offlineQrcodeCreate({...createForm.value,price:String(createForm.value.price)}) 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>