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

<script setup>
import { userArtworks } from "@/api/goods/index.js";
import { authStore } from "@/stores/auth/index.js";
import XImage from '@/components/x-image/index.vue'
definePageMeta({
  layout: 'default',
  i18n: 'menu.profile',
})
const { userInfo } = authStore()
const initData = async () => {
  const res = await userArtworks({})
  if (res.status === 0) {

  }
}
const show=ref(true)
const close=()=>{
  show.value=false

}
const confirm=()=>{
  show.value=true
}
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">
        <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>
          <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>Lot：22</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>Lot：22</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>Lot：22</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>Lot：22</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-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 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 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>