mobile-admin/store/check/list.vue

<template>
  <view class="content">
    <kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

    <view class=" bg-white sticky top-0 z-50">
      <wd-search @search="search({ value: params.keywords })" @clear="() => { search({ value: '' }) }"
        v-model="params.keywords" hide-cancel>
        <template #prefix>
          <view class="search-type">
            <text>门店名称</text>
          </view>
        </template>
      </wd-search>
    </view>

    <div class="grid p-2">

      <yList height="90vh" ref="yListRef" :apiObj="orderApi.checkLog" :params="{ ...params }">
        <template #default="{ list: orderList }">
          <div v-for="order of orderList" class="rounded-md overflow-hidden">
            <wd-card class="rounded-md overflow-hidden" type="rectangle">
              <template #title>
                <view class="title">
                  <view>{{ order.shop?.name || '--' }}</view>
                  <view class="text-end">
                    <view @click="utils.copy(order.order_no, '核销编号复制成功')" class="title-tip" v-if="order.order_no">
                      核销编号: {{ order.order_no }}

                      <wd-icon name="file-copy" size="14px"></wd-icon>
                    </view>
                    <view @click="utils.copy(order.check_code, '核销编码复制成功')" class="title-tip" v-if="order.check_code">
                      核销编码: {{ order.check_code }}

                      <wd-icon name="file-copy" size="14px"></wd-icon>
                    </view>
                  </view>
                </view>
              </template>

              <view v-show="!order.new_certificates.length">
                --
              </view>

              <view v-for="i in order.new_certificates" style="" class="orderBox my-2">
                <image mode="aspectFill" :src="i.goods.pic_url" :alt="order.name"
                  style="min-width: 60px;width: 60px;;height: 60px;border-radius: 4px; margin-right: 12px;" />
                <view>
                  <view class="line2" style="color: rgba(0,0,0,0.85); font-size: 24rpx;">{{ i.goods.name }}</view>

                  <div class="num flex">
                    <div class="mr-4">数量：{{ i.num }}</div>
                    <div>金额：{{ i.original_amount }}</div>
                  </div>
                </view>

              </view>

              <template #footer>

                <view class="bg-gray-50 p-2 mb-2.5 flex justify-between" style="font-size: 22rpx;">
                  <view class="flex text-wrap">核销码：<view @click="utils.copy(order.qr_code, '核销码复制成功')">点我复制</view>
                  </view>
                  <view>核销时间：{{ order.create_time }} </view>
                </view>

                <view class="flex justify-between items-center">
                  <view>
                    核销平台：{{ ["自提核销", "抖音商品券", "抖音金额券",
                      "支付宝团购"][order.type] }}
                  </view>

                  <view>
                    核销方式：
                    <wd-tag class="py-2" :type="['success', 'primary'][order.check_origin]">{{ ["pos机核销",
                      "手机端核销"][order.check_origin]
                    }}</wd-tag>
                  </view>

                </view>
              </template>
            </wd-card>
          </div>
        </template>
      </yList>

    </div>


    <wd-toast />
    <wd-message-box></wd-message-box>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import utils from '@/utils/utils.js';
import orderApi from '@/api/store/order.js';
import kevyloading from "@/components/kevy-loading/kevy-loading";
import yList from "/components/yList/index.vue";

const yListRef = ref(null);

const search = ({ value } = {}) => {

  yListRef.value.upData({
    keywords: value,
  });

};

const params = ref({
  nickname: "",
  mobile: "",
  origin: '',
  value: ''
});

/** 
 * @type {Ref<boolean>} 
 * 控制页面加载状态的 Ref
 */
const loading = ref(false);
</script>

<style lang="scss" scoped>
.search-type {
  position: relative;
  height: 30px;
  line-height: 30px;
  padding: 0 8px 0 16px;
  font-size: 24rpx;
  color: rgba(0, 0, 0, .45);
}

.search-type::after {
  position: absolute;
  content: '';
  width: 1px;
  right: 0;
  top: 5px;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.25);
}

.search-type {
  :deep(.icon-arrow) {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
  }
}


.orderBox,
.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.orderBox {
  justify-content: flex-start;
}

.title {
  justify-content: space-between;
}

.title-tip {
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
</style>