354 lines
7.5 KiB
Vue
354 lines
7.5 KiB
Vue
<template>
|
|
<div class="slider">
|
|
<div class="slider-container">
|
|
<img class="bg" src="@/assets/image/banner.jpg" />
|
|
<div class="box">
|
|
<div class="text">
|
|
<h2>小发同城</h2>
|
|
<h3>店铺商家火热招募中</h3>
|
|
<p>开店成本低 0元开店</p>
|
|
</div>
|
|
<div class="sub">
|
|
<el-button
|
|
:icon="Promotion"
|
|
color="#ffc114"
|
|
round
|
|
size="large"
|
|
@click="openRegisterForm"
|
|
>
|
|
免费开店
|
|
</el-button>
|
|
<el-button :icon="Download" round size="large" @click="downAndroid">
|
|
Android版本下载
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="counter_wrapper" data-aos="fade-up">
|
|
<div class="container">
|
|
<el-row :gutter="10">
|
|
<el-col :span="6">
|
|
<div class="count_box box_hover">
|
|
<i class="iconfont icon-employee1"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="businessmanValue"
|
|
:formatter="formatter"
|
|
/>
|
|
</h3>
|
|
<p>商家数量</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="count_box box_center">
|
|
<i class="iconfont icon-baobei"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="productValue"
|
|
:formatter="formatter2"
|
|
|
|
/>
|
|
</h3>
|
|
<p>商品数量</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="count_box box_hover">
|
|
<i class="iconfont icon-vip"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="memberValue"
|
|
:formatter="formatter"
|
|
|
|
/>
|
|
</h3>
|
|
<p>会员数量</p>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="count_box box_hover">
|
|
<i class="iconfont icon-dingdan"></i>
|
|
<h3>
|
|
<el-statistic
|
|
:value="orderValue"
|
|
:formatter="formatter2"
|
|
|
|
/>
|
|
</h3>
|
|
<p>订单数量</p>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { useTransition } from "@vueuse/core";
|
|
import { ref, onMounted, defineEmits, watch } from "vue";
|
|
import { Promotion, Download } from "@element-plus/icons-vue";
|
|
import {downloadApp} from '@/api/download.js';
|
|
import { useRouter } from "vue-router";
|
|
import { useUserStore } from "@/stores/userStore";
|
|
|
|
const router = useRouter();
|
|
const userStore = useUserStore();
|
|
|
|
const isLoggedIn = ref(!!userStore.token);
|
|
const approval_status = ref(-1);
|
|
const businessman = ref(0);
|
|
const product = ref(0);
|
|
const member = ref(0);
|
|
const order = ref(0);
|
|
|
|
const emits = defineEmits(["open-register-form"]);
|
|
|
|
const openRegisterForm = () => {
|
|
if (!isLoggedIn.value) {
|
|
emits("open-register-form");
|
|
return;
|
|
}
|
|
|
|
if (approval_status.value == -1 || approval_status.value == 4) {
|
|
router.push({ name: "start" });
|
|
} else {
|
|
router.push({ name: "check" }); // 已登录跳转到 check 页面
|
|
}
|
|
};
|
|
|
|
const downAndroid = async () => {
|
|
try {
|
|
// 用 await 等待 downloadApp 的 Promise 完成，直接拿到结果
|
|
const res = await downloadApp(100);
|
|
console.log("这是响应结果", res);
|
|
|
|
// 同样处理下载逻辑
|
|
if (res.code === 0 && res.data) {
|
|
const apkUrl = res.data.download_url;
|
|
const a = document.createElement("a");
|
|
a.href = apkUrl;
|
|
a.download = `小发同城-${res.data.version_name}.apk`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
}
|
|
} catch (error) {
|
|
console.error("下载请求失败", error);
|
|
}
|
|
};
|
|
|
|
const businessmanValue = useTransition(businessman, {
|
|
duration: 1500,
|
|
});
|
|
const productValue = useTransition(product, {
|
|
duration: 1500,
|
|
});
|
|
const memberValue = useTransition(member, {
|
|
duration: 1500,
|
|
});
|
|
const orderValue = useTransition(order, {
|
|
duration: 1500,
|
|
});
|
|
|
|
businessman.value = 6274;
|
|
product.value = 62400;
|
|
member.value = 10800;
|
|
order.value = 12000;
|
|
|
|
const formatter = (value: number) => {
|
|
return `${Math.round(value)}+`;
|
|
};
|
|
const formatter2 = (value: number) => {
|
|
return `${Math.round(value)}k+`;
|
|
};
|
|
|
|
// onMounted(() => {
|
|
// const mobile = localStorage.getItem("mobilePhone");
|
|
// if (mobile) {
|
|
// getApproval_status().then((res) => {
|
|
// if (res.code === 0 && res.status === 200) {
|
|
// approval_status.value = res.data.approval_status;
|
|
// console.log("res.data.approval_status", res.data.approval_status);
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.slider {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.slider-container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 800px;
|
|
// background: url("@/assets/image/banner1.jpg") no-repeat 50% 0;
|
|
// background-size:contain;
|
|
margin: auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.bg {
|
|
left: 50%;
|
|
object-fit: contain;
|
|
position: absolute;
|
|
top: 52%;//修改了顶部导航栏和谐一些
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.box {
|
|
width: 1000px;
|
|
margin: auto;
|
|
height: 800px;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.sub {
|
|
position: absolute;
|
|
top: 58%;
|
|
transform: translateY(58%);
|
|
left: 150px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.counter_wrapper {
|
|
position: relative;
|
|
margin-top: -100px;
|
|
z-index: 12;
|
|
}
|
|
|
|
.counter_wrapper .count_box {
|
|
width: 100%;
|
|
padding: 15px 0;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
background: #fff;
|
|
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.08);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box i::before {
|
|
font-size: 60px;
|
|
color: #353535;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box h3 {
|
|
font-size: 35px;
|
|
font-weight: 500;
|
|
color: #353535;
|
|
margin: 15px 0;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box p {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #353535;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.counter_wrapper .count_box:hover i::before {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.counter_wrapper .count_box:hover p {
|
|
color: #ffffff;
|
|
}
|
|
:deep(span.el-statistic__number) {
|
|
font-size: 35px;
|
|
}
|
|
:deep(.count_box:hover .el-statistic__content) {
|
|
color: #ffffff;
|
|
}
|
|
.counter_wrapper .count_box:hover {
|
|
background: #f34d2c;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: auto;
|
|
}
|
|
|
|
.container .el-row {
|
|
width: 100%;
|
|
}
|
|
|
|
.text {
|
|
display: none;
|
|
color: #fff;
|
|
margin-bottom: 20px;
|
|
|
|
h2 {
|
|
font-size: 55px;
|
|
}
|
|
h3 {
|
|
font-size: 32px;
|
|
margin-top: 10px;
|
|
}
|
|
p {
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.text {
|
|
padding-top: 30px;//顶部调整
|
|
display: block;
|
|
}
|
|
:deep(span.el-statistic__number) {
|
|
font-size: 20px;
|
|
}
|
|
.bg {
|
|
display: none;
|
|
}
|
|
|
|
.slider-container {
|
|
height: 360px;
|
|
background: linear-gradient(180deg, #f85535, #f76c50);
|
|
|
|
.box {
|
|
width: 100%;
|
|
margin: auto;
|
|
height: 360px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.sub {
|
|
position: initial;
|
|
transform: none;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
button {
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.counter_wrapper {
|
|
margin-top: 20px;
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|