mobile-admin/store/shop/list.vue

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

    <div class="grid p-2">
      <div v-for="shop of shopList" class="rounded-md overflow-hidden">
        <wd-card class="rounded-md overflow-hidden" type="rectangle">
          <template #title>
            <view class="title">
              <view>ID：{{ shop.id }}</view>
              <view class="title-tip">
                {{ shop.status ? "启用" : "停用" }}
              </view>
            </view>
          </template>
          <view style="height: 40px;" class="shopBox">
            <image mode="aspectFill" :src="shop.logo_url" :alt="shop.name"
              style="width: 60px;height: 60px;border-radius: 4px; margin-right: 12px;" />
            <view>
              <view style="color: rgba(0,0,0,0.85); font-size: 16px;">{{ shop.name }}</view>
              <view style="color: rgba(0,0,0,0.25); font-size: 12px;">{{ shop.detail }}</view>
            </view>
          </view>

          <template #footer>
            <view class="flex">
              <wd-button style="margin-right: auto;margin-left: 0;" @click="syncGoods(shop)" size="small">同步商品</wd-button>
              <view>
                <wd-button @click="changeS(shop)" v-if="shop.status == 1" size="small" plain
                  style="margin-right: 8px;">关闭</wd-button>
                <wd-button @click="changeS(shop)" v-if="shop.status !== 1" size="small" plain style="margin-right: 8px;">
                  开启</wd-button>
                <wd-button @click="utils.toUrl('/store/shop/edit?edit=' + JSON.stringify(shop))" size="small"
                  style="margin-right: 8px;">编辑</wd-button>
                <!-- /store/shop/to -->
                <wd-button @click="utils.toUrl('/store/shop/to?shop=' + JSON.stringify(shop))" size="small"
                  style="margin-right: 0px;">管理</wd-button>
                <!-- <wd-button @click="tableLogin(shop.id)" size="small" style="margin-right: 0px;">管理</wd-button> -->

              </view>

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

    </div>

    <view class="h-14">
      <view class="fixed left-2 right-2 bottom-4 z-50">
        <myTabbar tab="shop"></myTabbar>
      </view>
    </view>

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

<script setup>
import { ref } from 'vue';
import utils from '@/utils/utils.js';
import shop from '@/api/store/shop.js';
import system from '@/api/modules/system.js';
import myTabbar from "../components/myTabbar/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 toast = useToast()
const message1 = useMessage();

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

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

/**
 * 从本地存储中获取用户信息
 */
const user_info = uni.getStorageSync("user_info");

const shopList = ref({});

const changeS = async (row) => {
  const { fetchData, result } = await useApi(shop.editStatus, { loading })

  fetchData({
    id: row.id,
    status: [1, 0][row.status],
  }).then(res => {
    if (result.value.code == 0) {
      toast.success('操作成功')
      row.status = [1, 0][row.status]
    } else {
      uni.showToast({
        title: '出错了',
        icon: 'none'
      })
    }
  })
}

const syncGoods = (row) => {
  message1
    .confirm({
      title: '同步商品',
    })
    .then((resp) => {
      toast.loading('请稍后...')

      shop.synchronousGoods({
        id: row.id,
      }).then(res => {
        if (res.code == 0) {
          toast.success('同步成功');
        } else {
          toast.error('同步失败');
        }
      });
    })
    .catch((error) => {
      console.log(error);
    });
};

/**
 * 获取数据的函数
 */
const getShopList = () => {
  loading.value = true
  shop.list().then(res => {
    shopList.value = res.data;
    shopList.value.ok = true;
    loading.value = false
  });
};

const tableLogin = async (id) => {
  console.log(system);
  try {
    const res = await system.loginShop({
      shop_id: id
    });

    if (res.code === 0) {
      uni.setStorageSync("mall_token", res.data.access_token);
      uni.setStorageSync("mall_info", res.data.user_info);
      // uni.showToast({
      //   icon: "none",
      //   title: "登录成功",
      // });
      utils.toUrl("/mall/index/index")
    } {
      uni.showToast({
        title: menu.message,
        icon: "none"
      });
      return false;
    }
  } catch (error) {
    return false;
  }
}

// 初始化调用获取一行数据
onShow(() => {
  getShopList();
})
</script>

<style lang="scss" scoped>
.shopBox,
.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

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

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

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