You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
9.7 KiB
Vue
319 lines
9.7 KiB
Vue
<template>
|
|
<view class="content pt-[44px]">
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
|
|
<view class="w-full">
|
|
<wd-navbar fixed safeAreaInsetTop :leftText="user_info?.info?.name || '商城首页'">
|
|
<template #right>
|
|
<wd-icon @click="utils.toUrl('/store/setup/index')" name="setting" size="22px"></wd-icon>
|
|
</template>
|
|
</wd-navbar>
|
|
</view>
|
|
|
|
<view bg-color="#f7f8fa" class="w-full grid grid-cols-3 gap-3 px-3 my-4">
|
|
|
|
<view @click="utils.toUrl('/store/user/list')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">用户管理</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="user opacity-80" class="opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<view @click="utils.toUrl('/store/user/memberList')"
|
|
class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">等级管理</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="layers opacity-80" class="opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<view @click="utils.toUrl('/store/cat/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">分类管理</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="chat opacity-80" class="opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<view @click="utils.toUrl('/store/goods/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">商品管理</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="goods opacity-80" class="opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<view @click="utils.toUrl('/store/order/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">订单管理</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="gift opacity-80" class="opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
<view @click="utils.toUrl('/store/check/list')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">核销记录</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="phone" class="opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- <view @click="utils.toUrl('/store/order/index')" class="text-white rounded-3xl p-4 pb-0 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #7ea0ff 0%, #a9bdf5 100%);">
|
|
<view class="font-bold">订单管理</view>
|
|
<view class="h-0.5 w-5 mt-0.5 bg-white"></view>
|
|
|
|
<view class="flex justify-end">
|
|
<div class="rotate-[-28deg] translate-y-3 translate-x-5">
|
|
<wd-icon name="gift opacity-80" size="42px"></wd-icon>
|
|
</div>
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<view style="transition: 1s;" class="w-full h-full bg-white pt-4 rounded-tr-3xl rounded-tl-3xl shadow-lg oh">
|
|
<view class="order mb-2">
|
|
<wd-grid v-show="oneLine.ok">
|
|
<wd-grid-item @click="utils.toUrl('/store/user/list')" icon="round" :text="`用户 (${oneLine.user_count})`" />
|
|
<wd-grid-item @click="utils.toUrl('/store/goods/index')" icon="round" :text="`商品 (${oneLine.goods_count})`" />
|
|
<wd-grid-item @click="utils.toUrl('/store/goods/index')" icon="round"
|
|
:text="`售罄 (${oneLine.empty_stock_count})`" />
|
|
<wd-grid-item @click="utils.toUrl('/store/order/index')" icon="round" :text="`订单 (${oneLine.order_count})`" />
|
|
</wd-grid>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex-1 bg-white p-2 pb-4">
|
|
<!-- <div class="name mb-2">订单数据</div> -->
|
|
<view class=" p-2 rounded-md">
|
|
<div class="rounded-md overflow-hidden">
|
|
<wd-tabs @change="getOrderProfit">
|
|
<wd-tab :title="`今天`" :name="1"></wd-tab>
|
|
<wd-tab :title="`本周`" :name="2"></wd-tab>
|
|
<wd-tab :title="`本月`" :name="3"></wd-tab>
|
|
<wd-tab :title="`本年`" :name="4"></wd-tab>
|
|
</wd-tabs>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 my-4">
|
|
<div @click="utils.toUrl('/store/order/index?s=' + (index + 1))"
|
|
class="item rounded-1xl bg-slate-50 p-2 flex justify-between" style="font-size: 24rpx;"
|
|
v-for="(item, index) of orderProfit.categories">
|
|
{{ item }}
|
|
|
|
<text>{{ orderProfit.series[0].data[index] }}</text>
|
|
</div>
|
|
|
|
<div @click="utils.toUrl('/store/afterSale/index')"
|
|
class="item rounded-1xl bg-slate-50 p-2 flex justify-between" style="font-size: 24rpx;">
|
|
售后订单
|
|
<text>∞</text>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<bar :barData="orderProfit"></bar>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex-1 bg-white p-2 pb-4 ">
|
|
<view class=" p-2 rounded-md">
|
|
<div class="rounded-md overflow-hidden">
|
|
<wd-tabs @change="getOrderGood">
|
|
<wd-tab :title="`今天`" :name="1"></wd-tab>
|
|
<wd-tab :title="`本周`" :name="2"></wd-tab>
|
|
<wd-tab :title="`本月`" :name="3"></wd-tab>
|
|
<wd-tab :title="`本年`" :name="4"></wd-tab>
|
|
</wd-tabs>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 my-4">
|
|
<div class="item rounded-1xl bg-slate-50 p-2 flex justify-between" style="font-size: 24rpx;"
|
|
v-for="(item, index) of orderGood.categories">
|
|
{{ item }}
|
|
|
|
<text>{{ orderGood.series[0].data[index] }}</text>
|
|
</div>
|
|
</div>
|
|
|
|
<bar :barData="orderGood"></bar>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bg-white h-[80px]"></view>
|
|
|
|
<view class="fixed left-2 right-2 bottom-4 z-50">
|
|
<myTabbar></myTabbar>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import utils from '@/utils/utils.js';
|
|
import index from '@/api/store/index.js';
|
|
import myTabbar from "../components/myTabbar/index.vue";
|
|
import bar from "../components/bar/bar.vue";
|
|
import kevyloading from "@/components/kevy-loading/kevy-loading";
|
|
|
|
/**
|
|
* @type {Ref<boolean>}
|
|
* 控制页面加载状态的 Ref
|
|
*/
|
|
const loading = ref(false);
|
|
|
|
/**
|
|
* 从本地存储中获取用户信息
|
|
*/
|
|
const user_info = uni.getStorageSync("user_info");
|
|
|
|
/**
|
|
* @type {Ref<Object>}
|
|
* 存储一行数据的 Ref
|
|
*/
|
|
const oneLine = ref({});
|
|
|
|
/**
|
|
* 获取一行数据的函数
|
|
*/
|
|
const getOneLine = () => {
|
|
index.dataCount.oneLine().then(res => {
|
|
oneLine.value = res.data;
|
|
oneLine.value.ok = true;
|
|
});
|
|
};
|
|
|
|
// 初始化调用获取一行数据
|
|
getOneLine();
|
|
|
|
/**
|
|
* @type {Ref<Object>}
|
|
* 存储订单利润数据的 Ref
|
|
*/
|
|
const orderProfit = ref({});
|
|
|
|
/**
|
|
* 获取订单利润数据的函数
|
|
* @param {Object} e - 包含索引的对象
|
|
*/
|
|
const getOrderProfit = (e) => {
|
|
loading.value = true;
|
|
index.dataCount.orderProfit({
|
|
date: e.index + 1
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
const statusData = res.data.reduce((obj, cur) => {
|
|
obj[cur.status] = cur;
|
|
return obj;
|
|
}, {});
|
|
|
|
const arr = [
|
|
{ name: "未付款订单", data: statusData[0]?.count || 0 },
|
|
{ name: "待发货订单", data: statusData[1]?.count || 0 },
|
|
{ name: "已发货订单", data: statusData[2]?.count || 0 },
|
|
{ name: "已完成订单", data: statusData[3]?.count || 0 },
|
|
{ name: "已取消订单", data: statusData[4]?.count || 0 }
|
|
];
|
|
|
|
orderProfit.value.categories = arr.map(item => item.name);
|
|
orderProfit.value.series = [
|
|
{ name: "订单数据", data: arr.map(item => item.data) }
|
|
];
|
|
|
|
loading.value = false;
|
|
console.log(orderProfit.value);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 初始化调用获取订单利润数据
|
|
getOrderProfit({ index: 0 });
|
|
|
|
/**
|
|
* @type {Ref<Object>}
|
|
* 存储订单商品数据的 Ref
|
|
*/
|
|
const orderGood = ref({});
|
|
|
|
/**
|
|
* 获取订单商品数据的函数
|
|
* @param {Object} e - 包含索引的对象
|
|
*/
|
|
const getOrderGood = (e) => {
|
|
loading.value = true;
|
|
index.dataCount.orderGood({
|
|
date: e.index + 1
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
const payTypeData = res.data.reduce((obj, cur) => {
|
|
obj[cur.pay_type] = cur;
|
|
return obj;
|
|
}, {});
|
|
|
|
const totalPrice = (
|
|
(Number(payTypeData[1]?.pay_price) || 0) +
|
|
(Number(payTypeData[2]?.pay_price) || 0) +
|
|
(Number(payTypeData[3]?.pay_price) || 0)
|
|
);
|
|
|
|
const arr = [
|
|
{ name: "总成交金额", data: totalPrice || 0 },
|
|
{ name: "支付宝支付", data: payTypeData[1]?.pay_price || 0 },
|
|
{ name: "微信支付", data: payTypeData[2]?.pay_price || 0 },
|
|
{ name: "余额支付", data: payTypeData[3]?.pay_price || 0 },
|
|
];
|
|
|
|
orderGood.value.categories = arr.map(item => item.name);
|
|
orderGood.value.series = [
|
|
{ name: "交易数据", data: arr.map(item => item.data) }
|
|
];
|
|
|
|
loading.value = false;
|
|
console.log(orderGood.value);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 初始化调用获取订单商品数据
|
|
getOrderGood({ index: 0 });
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|