liveh5-nuxt/app/pages/collectCode/mine/index.vue

<script setup>
import { userArtworks } from "@/api/goods/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 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(false)
const close=()=>{
  show.value=false

}
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>

<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">线下付款二维码 </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="刷新成功"
                             :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>
                  </template>
                </van-swipe-cell>
              </template>
              <template v-else>
                <codeCard :data="item"></codeCard>
              </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">
          新增
        </div>
    </div>
    <van-dialog v-model:show="show"  show-cancel-button @close="close" @confirm="confirm">
    <div class="pt-18px pb-24px px-24px">
      <div class="text-16px text-#000 font-bold text-center mb-26px">新增收款二维码</div>
      <div class="">
        <div class="flex mb-6px items-center">
          <div class="w-58px">
            <div class="text-#1A1A1A text-16px">金额</div>
            <div class="text-#939393 text-12px">RMB</div>
          </div>
          <div>
            <input v-model="createForm.price"     @keydown="validateInput"
                   class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入金额">
          </div>
        </div>
        <div class="flex items-center">
          <div class="w-58px">
            <div class="text-#1A1A1A text-16px">Lot号</div>
          </div>
          <div>
            <input type="number" v-model="createForm.lotNo" class="w-214px h-48px bg-#F3F3F3 rounded-4px px-11px text-16px" placeholder="请输入拍品序号">
          </div>
        </div>
      </div>
      <div class="flex flex-col items-center">
        <div class="text-#CF3050 text-12px mb-8px mt-4px">*该拍品号当前已存在收款二维码，确定要创建吗？</div>
        <div>
          <XImage class="w-116px h-116px rounded-4px mb-9px" src=""></XImage>
          <div class="text-12px text-#575757 flex flex-col items-center">
            <div>日出而作，日落而息</div>
            <div>张天赐</div>
          </div>
        </div>
      </div>
    </div>
    </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>