mobile-admin/store/recharge/index.vue

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

    <view class="px-2 mt-2">
      <view class="relative flex flex-col rounded-xl bg-white p-4 shadow-sm">

        <view class="mb-2 pointer-events-auto relative inline-flex bg-white font-medium ">
          <view class="flex items-baseline text-xs px-2">
            <span class="mr-2 warn-state warn-status-processing bg-violet-700"></span>
            充值管理
          </view>
        </view>

        <view class="grid grid-cols-3 gap-3">
          <view @click="utils.toUrl('/store/recharge/edit')"
            class="item border-2 border-solid border-gray-100  rounded bg-slate-50 p-2 flex justify-between"
            style="font-size: 0.75rem;">
            添加充值方案
          </view>

          <view @click="utils.toUrl('/store/recharge/userRecharge')"
            class="item border-2 border-solid border-gray-100  rounded bg-slate-50 p-2 flex justify-between"
            style="font-size: 0.75rem;">
            充值记录
          </view>

          <view @click="utils.toUrl('/store/recharge/setUp')"
            class="item border-2 border-solid border-gray-100  rounded bg-slate-50 p-2 flex justify-between"
            style="font-size: 0.75rem;">
            设置
          </view>

        </view>

      </view>
    </view>

    <view class="grid p-2">

      <yList height="84vh" ref="yListRef" noPageSize :apiObj="recharge.List" :params="{ ...params }">
        <template #default="{ list: rechargeList }">
          <view class="flex flex-col">
            <view v-for="recharge of rechargeList" class="overflow-hidden relative">


              <wd-swipe-action class="rounded-xl overflow-hidden mb-3 ">

                <view class="rechargeCart relative"
                  style="background-image: linear-gradient(to bottom, #b5b5b5 0%, rgb(110, 114, 125) 100%);">


                  <view class="relative px-4 py-4" style="z-index: 1;">
                    <view
                      class="rounded-r-xl font-bold absolute top-0 left-0 px-3 py-1 text-[12px] bg-neutral-900 text-orange-500 z-30">
                      ID: {{ recharge.id }}
                    </view>

                    <view class="flex">
                      <view class="mt-4 mr-6">
                        <!-- <view class="price text-[16px] text-orange-300">
                          
                        </view> -->

                        <view class="leading-4 mt-1">

                          <view class="price mb-1 text-[14px] text-orange-300">
                            {{ recharge.name }}
                          </view>

                          <div class="flex flex-col">
                            <view class="price text-white text-[12px] mr-4">
                              支付金额： {{ recharge.money }} 元
                            </view>

                            <view class="price text-white text-[12px]">
                              赠送金额： {{ recharge.gift_money }} 元
                            </view>

                          </div>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>

                <template #right>
                  <view class="flex h-full ">
                    <view class="px-4 text-nowrap  h-full bg-stone-700 text-white flex items-center justify-center">
                      <view @click="utils.toUrl('/store/recharge/edit?edit=' + JSON.stringify(recharge))" style="writing-mode: vertical-rl;
    text-orientation: upright;">
                        编辑
                      </view>
                    </view>


                    <view class="px-4 text-nowrap  h-full bg-stone-800 text-white flex items-center justify-center">
                      <view @click="delRecharge(recharge)" style="writing-mode: vertical-rl;
    text-orientation: upright;">
                        删除
                      </view>
                    </view>

                  </view>
                </template>

              </wd-swipe-action>



            </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 recharge from '@/api/store/recharge.js';
import yList from "/components/yList/index.vue";
import kevyloading from "@/components/kevy-loading/kevy-loading";
import { useMessage } from '@/uni_modules/wot-design-uni';
import { useToast } from '@/uni_modules/wot-design-uni'
import { useApi } from "@/hooks/useApi.js"
const message = useMessage();
const toast = useToast()

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

const yListRef = ref(null);

const searchType = ref('券名');
const popover = ref(false);

const search = () => {
  yListRef.value.upData({});
};

const params = ref({});

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

const delRecharge = (row) => {
  message
    .confirm({
      title: '删除充值方案',
    })
    .then(async (resp) => {
      const { fetchData } = await useApi(recharge.del)

      fetchData({
        id: row.id,
      }).then(res => {
        if (res.code == 0) {
          toast.success('操作成功')
          search()
        } else {
          toast.error('出错了')
        }

      })
    })
    .catch((error) => {
      console.log(error);
    });
}

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

  nextTick(() => {
    search({ value: params.value.keywords = '' })
  })
  // search('')
  // getrechargeList();
})
</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;
  }
}


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

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

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

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