mobile-admin/mall/discount/full_discount/index.vue

<template>
  <view class="content">
    <kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
    <!-- <view class="w-full">
      <wd-navbar fixed safeAreaInsetTop :leftText="coupon_info?.info?.name || '商城首页'">
        <template #right>
          <wd-icon @click="utils.toUrl('/mall/setup/index')" name="setting" size="22px"></wd-icon>
        </template>
      </wd-navbar>
    </view> -->

    <view class=" bg-white sticky top-0 z-50 flex items-center">
      <view class="flex-1">
        <wd-search @search="search" @clear="search" v-model="params.keywords" hide-cancel>
          <template #prefix>
            <wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
              <view class="search-type">
                <text>{{ searchType }}</text>
                <wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
              </view>
            </wd-popover>
          </template>
        </wd-search>
      </view>

      <view class="mr-2">
        <wd-button @click="utils.toUrl('/mall/discount/full_discount/edit')" size="small">新增折扣</wd-button>
      </view>

      <!-- <view class="mr-2">
        <wd-button @click="utils.toUrl('/mall/coupon/userCoupon')" size="small">领取记录</wd-button>
      </view> -->
    </view>

    <!-- <view class="flex-1 bg-white pb-2">
      <div class="rounded-md overflow-hidden">
        <wd-tabs @change="search">
          <wd-tab :title="`全部`" :name="null"></wd-tab>
          <wd-tab :title="`领取后过期`" :name="0"></wd-tab>
          <wd-tab :title="`定时过期`" :name="1"></wd-tab>
        </wd-tabs>
      </div>
    </view> -->

    <view class="grid p-2">

      <yList height="91vh" ref="yListRef" :apiObj="fullDiscountApi.SalesFullDiscounts.List" :params="{ ...params }">
        <template #default="{ list }">
          <view>
            <view v-for="item of list" class="goods">
              <wd-card type="rectangle">
                <template #title>
                  <view class="title">

                    <view>
                      <span class="mr-2">ID：{{ item?.id }}</span>
                    </view>

                    <!-- <view @click="utils.copy(item.order_no, '已复制单号')" class="title-tip">
                      <span style="font-size: 24rpx;margin-left: 8px;">单号：{{ item.order_no }}</span>
                    </view> -->
                  </view>
                </template>

                <view class="bg-gray-50 p-2 mb-2 flex justify-between" style="font-size: 22rpx;">
                  <view>折扣名称：<text class="text-black">{{ item.name }}</text></view>
                  <view>折扣：<text class="text-black">{{ item.fullDiscount || 0 }}</text></view>
                </view>

                <template #footer>
                  <!-- <view class="bg-gray-50 p-2 mb-2.5 flex justify-between" style="font-size: 22rpx;">
										<view>
											售后状态:
											
										</view>
									</view> -->

                  <view class="flex justify-between items-center">
                    <!-- <view class="font-bold">实付: {{ item.pay_price }} 元</view> -->
                    <view>
                      <wd-button :round="false" size="small"
                        :type="['warning', 'success', 'warning', 'success', 'info'][item.status]">
                        <div>{{ ["关闭", "开启", "已取消"][item.status] }}</div>
                      </wd-button>
                    </view>
                    <view class="flex-1 flex justify-end">
                      <view class="mr-2">
                        <wd-button @click="utils.toUrl('/mall/discount/full_discount/edit?id=' + item.id)"
                          size="small">编辑</wd-button>
                      </view>

                      <!-- <view v-if="item.apply_cancel === 1" class="mr-2">
												<wd-button type="error" @click="orderApproval(item)" size="small">退款</wd-button>
											</view>

											<view class="mr-2">
												<wd-button @click="printing(item)" size="small">小票打印</wd-button>
											</view>
											<view class="mr-2">
												<wd-button @click="orderNotes(item)" size="small">备注</wd-button>
											</view>
											<view v-if="item.status == 1" class="">
												<wd-button @click="shipments(item)" size="small">发货</wd-button>
											</view> -->

                    </view>

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

    </view>

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

<script setup>
import { ref, nextTick } from 'vue';
import utils from '@/utils/utils.js';
import fullDiscountApi from '@/api/mall/discount.js';
import kevyloading from "@/components/kevy-loading/kevy-loading";
import yList from "/components/yList/index.vue";

import {
  onShow,
} from "@dcloudio/uni-app";

const yListRef = ref(null);

const searchType = ref('折扣名称');
const popover = ref(false);

const search = () => {

  if (searchType.value == '折扣名称') {
    yListRef.value.upData({
      name: params.value.keywords,
    });
  } else if (searchType.value == '折扣') {
    yListRef.value.upData({
      fullDiscount: params.value.keywords
    });
  }

};

const menu = ref([
  { content: '折扣名称' },
  { content: '折扣' },
]);

const params = ref({
  name: null,
  price: null,
  send_type: null
});

/**
 * 切换搜索类型
 * @param {Object} item - 切换的项
 */
function changeSearchType({ item, index }) {
  searchType.value = item.content;
  search(params.value.keywords)
}

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

// 初始化调用获取一行数据
onShow(() => {
  search?.()

  // search('')
  // getcouponList();
})
</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;
  }
}


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

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

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

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