code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-21 10:25:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
seller/src/views/home/home.scss Normal file
View File

@@ -0,0 +1,167 @@
.card {
margin: 10px 10px 20px;
padding: 0 20px 20px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 0.4em;
}
h4 {
margin: 20px 0;
font-size: 18px;
}
/deep/ .ivu-icon {
margin-right: 10px;
}
.rate-box {
flex: 3.5;
margin-top: 50px;
display: flex;
justify-content: flex-end;
> div {
padding: 0 20px;
border-left: 1px solid #ededed;
> h5 {
text-align: center;
margin: 10px 0;
}
}
}
.bold {
font-size: 18px;
}
.shop-box {
flex: 3;
display: flex;
font-size: 12px;
margin-top: 50px;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 20px;
> .box-item {
width: 100%;
display: flex;
align-items: center;
margin: 10px 0;
justify-content: space-between;
}
> .title {
font-size: 30px;
}
}
.shop {
align-items: center;
justify-content: flex-start;
}
.notice-title {
margin: 10px 0;
font-weight: bold;
}
.detail-list {
display: flex;
flex-wrap: wrap;
}
.detail-title {
position: absolute;
left: 0;
top: -15px;
opacity: 0.3;
color: #999;
font-size: 21px;
text-decoration: initial;
transition: 0.35s;
}
.detail-item {
cursor: pointer;
transition: 0.35s;
position: relative;
font-weight: bold;
width: 286px;
display: flex;
/deep/ span {
color: $theme_color;
font-size: 18px;
}
align-items: center;
justify-content: center;
padding: 20px;
background: #eee;
border-radius: 0.4em;
margin: 10px;
> div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 20px;
}
}
.detail-item:hover {
box-shadow: 3px 5px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-4px);
> .detail-title {
opacity: 1;
top: 5px;
}
}
.shop-logo {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #ededed;
box-sizing: border-box;
}
.count-item,
.todo-item {
height: 84px;
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 0.4em;
flex: 1;
font-weight: bold;
margin-right: 20px;
}
.card {
box-shadow: 1px 3px 12px rgba($color: #e7e7e7, $alpha: 0.3);
border-radius: 0.4em;
box-shadow: 1px 3px 12px rgba($color: #e7e7e7, $alpha: 0.3);
}
.box-left {
flex: 8;
}
.box-right {
flex: 2;
margin-left: 20px;
}
.count-item:nth-of-type(1) {
background-image: linear-gradient(109.6deg, rgba($color: #ff9a76, $alpha: 0.6) 11.2%, #ff9a76 100.2%);
box-shadow: 1px 3px 12px rgba($color: #ff9a76, $alpha: 0.3);
}
.count-item:nth-of-type(2) {
background-image: linear-gradient(109.6deg, rgba($color: #4e89ae, $alpha: 0.6) 11.2%, #4e89ae 100.2%);
box-shadow: 1px 3px 12px rgba($color: #4e89ae, $alpha: 0.3);
}
.count-item:nth-of-type(3) {
background-image: linear-gradient(109.6deg, rgba($color: #679b9b, $alpha: 0.6) 11.2%, #679b9b 100.2%);
box-shadow: 1px 3px 12px rgba($color: #679b9b, $alpha: 0.3);
}
.count-item:nth-of-type(4) {
background-image: linear-gradient(109.6deg, rgba($color: #637373, $alpha: 0.6) 11.2%, #637373 100.2%);
box-shadow: 1px 3px 12px rgba($color: #637373, $alpha: 0.3);
}

259
seller/src/views/home/home.vue Normal file
View File

@@ -0,0 +1,259 @@
<template>
<div>
<Modal v-model="noticeFlage" :title="noticesDetail.title">
<div v-if="noticesDetail" v-html="noticesDetail.content">
</div>
</Modal>
<div class="box flex">
<div class="box-left">
<div class="card shop flex">
<div>
<h4>Hi,<span style="margin-left:5px;">{{userData.nickName}}</span></h4>
<img class="shop-logo" :src="userData.storeLogo || require('@/assets/logo1.png')" alt="">
</div>
<div class="shop-box">
<div class="box-item">
<div>店铺名称：{{userData.storeName || '暂无'}}</div>
</div>
<div class="box-item">
<div>店铺状态：{{userData.storeDisable=='OPEN' ? '开启中' : '关闭'}}</div>
</div>
</div>
<div class="rate-box">
<div>
<i-circle :size="120" stroke-color="#fecb89" :trail-width="4" :stroke-width="5" :percent="(userData.serviceScore * 20)" stroke-linecap="square">
<div class="demo-Circle-custom">
<p class="bold">{{userData.serviceScore}}分</p>
</div>
</i-circle>
<h5>服务得分</h5>
</div>
<div>
<i-circle :size="120" stroke-color="#a7c5eb" :trail-width="4" :stroke-width="5" :percent="(userData.deliveryScore * 20)" stroke-linecap="square">
<div>
<p class="bold">{{userData.deliveryScore}}分</p>
</div>
</i-circle>
<h5>交货得分</h5>
</div>
<div>
<i-circle :size="120" stroke-color="#848ccf" :trail-width="4" :stroke-width="5" :percent="(userData.descriptionScore * 20)" stroke-linecap="square">
<div>
<p class="bold">{{userData.descriptionScore}}分</p>
</div>
</i-circle>
<h5>评价得分</h5>
</div>
</div>
</div>
<div class="card">
<h4>待办事项</h4>
<div class="detail-list">
<div class="detail-item" @click="navigateTo('order')">
<div>
<span>{{homeData.unPaidOrder || 0}}</span>
<div>待付款</div>
</div>
<div class="detail-title">
交易前
</div>
</div>
<div class="detail-item" @click="navigateTo('order')">
<div>
<span>{{homeData.unDeliveredOrder || 0}}</span>
<div>待发货</div>
</div>
<div>
<span>{{homeData.deliveredOrder || 0}}</span>
<div>待收货</div>
</div>
<div class="detail-title">
交易中
</div>
</div>
<div class="detail-item">
<div @click="navigateTo('returnMoneyOrder')">
<span>{{homeData.returnMoney || 0}}</span>
<div>退款</div>
</div>
<div @click="navigateTo('returnGoodsOrder')">
<span>{{homeData.returnGoods || 0}}</span>
<div>退货</div>
</div>
<div @click="navigateTo('memberComment')">
<span>{{homeData.commentNum || 0}}</span>
<div>待评价</div>
</div>
<div class="detail-title">
交易后
</div>
</div>
<div class="detail-item" @click="navigateTo('orderComplaint')">
<div>
<span>{{homeData.deliveredOrder || 0}}</span>
<div>待处理</div>
</div>
<div class="detail-title">
投诉
</div>
</div>
<div class="detail-item" @click="navigateTo('goods')">
<div>
<span>{{homeData.waitUpper || 0}}</span>
<div>待上架</div>
</div>
<div>
<span>{{homeData.waitAuth || 0}}</span>
<div>审核中</div>
</div>
<div class="detail-title">
商品
</div>
</div>
<div class="detail-item">
<div>
<span>{{homeData.seckillNum || 0}}</span>
<div>待参加活动</div>
</div>
<div>
<span>{{homeData.waitPayBill || 0}}</span>
<div>待对账</div>
</div>
<div class="detail-title">
其他
</div>
</div>
</div>
</div>
</div>
<!-- 公告 -->
<div class="card box-right">
<h4>平台公告</h4>
<div>
<div class="notice-title" v-for="(item,index) in notices" :key="index">
<a @click="clickLinkNotices(item)">{{item.title}}</a>
</div>
</div>
</div>
</div>
<div class="card ">
<h4>整体数据</h4>
<div class="count-list flex">
<div class="count-item" @click="navigateTo('goods')">
<div>
<Icon class="icon" size="31" type="md-photos" />
</div>
<div>
<div class="counts">{{homeData.goodsNum ||0}}</div>
<div>商品数量</div>
</div>
</div>
<div class="count-item">
<div>
<Icon class="icon" size="31" type="ios-card" />
</div>
<div>
<div class="counts">{{homeData.orderPrice ||0}}</div>
<div>订单总额</div>
</div>
</div>
<div class="count-item" @click="navigateTo('order')">
<div>
<Icon class="icon" size="31" type="md-list" />
</div>
<div>
<div class="counts">{{homeData.orderNum ||0}}</div>
<div>订单数量</div>
</div>
</div>
<div class="count-item">
<div>
<Icon class="icon" size="31" type="md-person" />
</div>
<div>
<div class="counts">{{homeData.storeUV ||0}}</div>
<div>访客数量</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getSellerHomeData, getHomeNotice } from "@/api/index";
import { seeArticle } from "@/api/pages";
import Cookies from "js-cookie";
export default {
name: "home",
data() {
return {
noticeFlage: false, // 控制平台公告显隐
homeData: {}, // 首页数据
userData: "", // 店铺信息
notices: "", // 平台公告列表
noticesDetail: { // 平台公告详情
title: "",
},
};
},
methods: {
navigateTo(name) {
this.$router.push({
name,
});
},
async init() {
let userInfo = JSON.parse(Cookies.get("userInfo"));
this.userData = userInfo;
let res = await getHomeNotice();
if (res.success) {
this.notices = res.result.records;
}
},
async clickLinkNotices(val) {
let res = await seeArticle(val.id);
if (res.success) {
this.noticesDetail = res.result;
this.noticeFlage = true;
}
},
async getHomeData() {
let res = await getSellerHomeData();
if (res.success) {
this.homeData = res.result;
}
},
},
mounted() {
this.init();
this.getHomeData();
},
};
</script>
<style lang="scss" scoped>
@import "./home.scss";
</style>