diff --git a/.env.production b/.env.production index 2a4f841..7f079f7 100644 --- a/.env.production +++ b/.env.production @@ -3,10 +3,10 @@ ENV = 'production' # 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置 # 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http # 测试 -VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn' +# VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn' # 生产 -# VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn' +VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn' # 预发布接口 # VUE_APP_BASE_API = 'https://pre-cashieradmin.sxczgkj.cn' diff --git a/src/api/home.js b/src/api/home.js index fa865d5..23f222d 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -1,17 +1,17 @@ -import request from '@/utils/request' +import request from "@/utils/request"; /** * 汇总数据 * @returns */ export function summaryGet() { - return request({ - url: '/api/summary', - method: 'get', - params: { - shopId: localStorage.getItem('shopId') - } - }) + return request({ + url: "/api/summary", + method: "get", + params: { + shopId: localStorage.getItem("shopId") + } + }); } /** @@ -19,13 +19,13 @@ export function summaryGet() { * @returns */ export function summaryTodayGet() { - return request({ - url: '/api/summary/today', - method: 'get', - params: { - shopId: localStorage.getItem('shopId') - } - }) + return request({ + url: "/api/summary/today", + method: "get", + params: { + shopId: localStorage.getItem("shopId") + } + }); } /** @@ -33,14 +33,14 @@ export function summaryTodayGet() { * @returns */ export function summaryDateGet(day) { - return request({ - url: '/api/summary/date', - method: 'get', - params: { - shopId: localStorage.getItem('shopId'), - day: day - } - }) + return request({ + url: "/api/summary/date", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day + } + }); } /** @@ -48,14 +48,14 @@ export function summaryDateGet(day) { * @returns */ export function dateAmount(day) { - return request({ - url: '/api/summary/dateAmount', - method: 'get', - params: { - shopId: localStorage.getItem('shopId'), - day: day - } - }) + return request({ + url: "/api/summary/dateAmount", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day + } + }); } /** @@ -63,16 +63,16 @@ export function dateAmount(day) { * @returns */ export function dateProduct(day, page, size) { - return request({ - url: '/api/summary/dateProduct', - method: 'get', - params: { - shopId: localStorage.getItem('shopId'), - day: day, - page: page, - size: size - } - }) + return request({ + url: "/api/summary/dateProduct", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day, + page: page, + size: size + } + }); } /** @@ -80,14 +80,14 @@ export function dateProduct(day, page, size) { * @returns */ export function datePayType(day) { - return request({ - url: '/api/summary/datePayType', - method: 'get', - params: { - shopId: localStorage.getItem('shopId'), - day: day - } - }) + return request({ + url: "/api/summary/datePayType", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day + } + }); } /** @@ -95,15 +95,15 @@ export function datePayType(day) { * @returns */ export function daydownload(data) { - return request({ - url: '/api/summary/day/download', - method: 'post', - data: { - shopId: localStorage.getItem('shopId'), - ...data - }, - responseType: 'blob' - }) + return request({ + url: "/api/summary/day/download", + method: "post", + data: { + shopId: localStorage.getItem("shopId"), + ...data + }, + responseType: "blob" + }); } /** @@ -111,14 +111,14 @@ export function daydownload(data) { * @returns */ export function daycount(params) { - return request({ - url: '/api/summary/day/count', - method: 'get', - params: { - shopId: localStorage.getItem('shopId'), - ...params - } - }) + return request({ + url: "/api/summary/day/count", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + ...params + } + }); } /** @@ -126,13 +126,27 @@ export function daycount(params) { * @returns */ export function summaryday(params) { - return request({ - url: '/api/summary/day', - method: 'get', - params: { - shopId: localStorage.getItem('shopId'), - ...params - } - }) + return request({ + url: "/api/summary/day", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + ...params + } + }); } +/** + * 营业板块 + * @returns + */ +export function summarytrade(data) { + return request({ + url: "/api/summary/trade", + method: "post", + data: { + shopId: localStorage.getItem("shopId"), + ...data + } + }); +} diff --git a/src/assets/images/data_home_bg1.png b/src/assets/images/data_home_bg1.png new file mode 100644 index 0000000..3034319 Binary files /dev/null and b/src/assets/images/data_home_bg1.png differ diff --git a/src/assets/images/data_home_item1.png b/src/assets/images/data_home_item1.png new file mode 100644 index 0000000..082564d Binary files /dev/null and b/src/assets/images/data_home_item1.png differ diff --git a/src/assets/images/data_home_item1_icon.png b/src/assets/images/data_home_item1_icon.png new file mode 100644 index 0000000..493c506 Binary files /dev/null and b/src/assets/images/data_home_item1_icon.png differ diff --git a/src/assets/images/data_home_item2.png b/src/assets/images/data_home_item2.png new file mode 100644 index 0000000..0b9a553 Binary files /dev/null and b/src/assets/images/data_home_item2.png differ diff --git a/src/assets/images/data_home_item2_icon.png b/src/assets/images/data_home_item2_icon.png new file mode 100644 index 0000000..1f0cb4e Binary files /dev/null and b/src/assets/images/data_home_item2_icon.png differ diff --git a/src/assets/images/data_home_item3.png b/src/assets/images/data_home_item3.png new file mode 100644 index 0000000..e2f257b Binary files /dev/null and b/src/assets/images/data_home_item3.png differ diff --git a/src/assets/images/data_home_item3_icon.png b/src/assets/images/data_home_item3_icon.png new file mode 100644 index 0000000..7cc6781 Binary files /dev/null and b/src/assets/images/data_home_item3_icon.png differ diff --git a/src/assets/images/data_home_item4.png b/src/assets/images/data_home_item4.png new file mode 100644 index 0000000..097c19a Binary files /dev/null and b/src/assets/images/data_home_item4.png differ diff --git a/src/assets/images/data_home_item4_icon.png b/src/assets/images/data_home_item4_icon.png new file mode 100644 index 0000000..01920f3 Binary files /dev/null and b/src/assets/images/data_home_item4_icon.png differ diff --git a/src/assets/images/default_logo.png b/src/assets/images/default_logo.png new file mode 100644 index 0000000..e79c156 Binary files /dev/null and b/src/assets/images/default_logo.png differ diff --git a/src/assets/images/img_download_error.png b/src/assets/images/img_download_error.png new file mode 100644 index 0000000..9bc9660 Binary files /dev/null and b/src/assets/images/img_download_error.png differ diff --git a/src/assets/styles/element-variables.scss b/src/assets/styles/element-variables.scss index a4f8c4a..9814b2a 100644 --- a/src/assets/styles/element-variables.scss +++ b/src/assets/styles/element-variables.scss @@ -6,7 +6,7 @@ /* theme color */ $--color-primary: #1890ff; $--color-success: #13ce66; -$--color-warning: #FFBA00; +$--color-warning: #ffba00; $--color-danger: #ff4949; // $--color-info: #1E1E1E; @@ -17,10 +17,10 @@ $--button-font-weight: 400; $--border-color-light: #dfe4ed; $--border-color-lighter: #e6ebf5; -$--table-border:1px solid#dfe6ec; +$--table-border: 1px solid#dfe6ec; /* icon font path, required */ -$--font-path: '~element-ui/lib/theme-chalk/fonts'; +$--font-path: "~element-ui/lib/theme-chalk/fonts"; @import "../../../node_modules/element-ui/packages/theme-chalk/src/index"; diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 1b84427..09133f8 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -139,7 +139,7 @@ height: 100%; position: fixed; font-size: 0; - top: 0; + top: 60px; bottom: 0; left: 0; z-index: 1001; diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 17381fc..33fed06 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -14,7 +14,7 @@ height: 100%; position: fixed; font-size: 0; - top: 0; + top: 60px; bottom: 0; left: 0; z-index: 1001; diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index cab7c4c..32be479 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -9,15 +9,15 @@ $yellow: #fec171; $panGreen: #30b08f; // sidebar -$menuText: #bfcbd9; +$menuText: #999; $menuActiveText: #409eff; -$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951 +$subMenuActiveText: #555; // https://github.com/ElemeFE/element/issues/12951 -$menuBg: #333; -$menuHover: #444; +$menuBg: #fff; +$menuHover: rgba(121, 145, 188, 0.18); -$subMenuBg: #444; -$subMenuHover: #555; +$subMenuBg: #fff; +$subMenuHover: rgba(121, 145, 188, 0.18); $sideBarWidth: 205px; diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 8ecebed..896a9b6 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -38,7 +38,7 @@ export default { } .fixed-header+.app-main { - padding-top: 50px; + padding-top: 140px; } .hasTagsView { @@ -48,7 +48,7 @@ export default { } .fixed-header+.app-main { - padding-top: 84px; + padding-top: 140px; } } diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 9112d05..a97e293 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -16,18 +16,18 @@ --> - + + {{ shopName }} - + 个人中心 @@ -44,7 +44,7 @@ - + --> diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 69ed635..0e7e2e5 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -1,20 +1,22 @@ diff --git a/src/utils/index.js b/src/utils/index.js index 759b913..abbf4b6 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -423,7 +423,7 @@ export function isPcBowser() { * decimal你保留的几位,默认保留小数后两位 * isInt 是否保留0 */ -export function formatDecimal(num, decimal = 2, isInt = false) { +export function formatDecimal(num = 0, decimal = 2, isInt = false) { num = num.toFixed(3).toString(); const index = num.indexOf("."); if (index !== -1) { diff --git a/src/views/home/home.vue b/src/views/home/home.vue index 6afe3e1..68d9e60 100644 --- a/src/views/home/home.vue +++ b/src/views/home/home.vue @@ -1,6 +1,6 @@ @@ -146,14 +245,17 @@ import { dateProduct, dateAmount, datePayType, - summaryDateGet + summaryDateGet, + summarytrade } from "@/api/home"; +import dayjs from 'dayjs' import echarts from "echarts"; -import { debounce } from "@/utils"; +import { debounce, formatDecimal } from "@/utils"; export default { name: "home", data() { return { + formatDecimal, topData: "", saleTab: "sale", saleActive: "7", @@ -176,15 +278,24 @@ export default { saleTableSize: 5, __resizeHandler: null, productCountChart: null, - productSumChart: null + productSumChart: null, + lineChartType: 0, + timeValue: "0", + query: { + createdAt: '', + }, + tradeLoading: false, + tradeSale: '', + tradeVip: '', + tradeCount: '', }; }, mounted() { - this.summaryGet(); + // this.summaryGet(); this.dateAmount(); this.dateProduct(); - this.datePayType(); this.summaryDateGet(); + this.timeChange('0') this.__resizeHandler = debounce(() => { if (this.saleChart) { @@ -207,9 +318,110 @@ export default { } }, 100); window.addEventListener("resize", this.__resizeHandler); - this.initCardUserChart(); + // this.initCardUserChart(); }, methods: { + // 切换时间 + timeChange(e) { + const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"]; + switch (e) { + case "": + // 全部 + this.query.createdAt = []; + break; + case "0": + // 今天 + this.query.createdAt = [ + dayjs().format(format[0]), + dayjs().format(format[1]) + ]; + break; + case "-1": + // 昨天 + this.query.createdAt = [ + dayjs() + .add(-1, "d") + .format(format[0]), + dayjs() + .add(-1, "d") + .format(format[1]) + ]; + break; + case "-7": + // 最近7天 + this.query.createdAt = [ + dayjs() + .add(-7, "d") + .format(format[0]), + dayjs().format(format[1]) + ]; + break; + case "-30": + // 最近7天 + this.query.createdAt = [ + dayjs() + .add(-30, "d") + .format(format[0]), + dayjs().format(format[1]) + ]; + break; + case "week": + // 本周 + this.query.createdAt = [ + dayjs() + .startOf("week") + .format(format[0]), + dayjs() + .endOf("week") + .format(format[1]) + ]; + break; + case "month": + // 本周 + this.query.createdAt = [ + dayjs() + .startOf("month") + .format(format[0]), + dayjs() + .endOf("month") + .format(format[1]) + ]; + break; + case "custom": + // 自定义 + this.query.createdAt = []; + break; + default: + break; + } + if (e != 'custom') { + this.summarytrade() + } + }, + // 获取营业板块数据 + async summarytrade() { + try { + this.tradeLoading = true + const res = await summarytrade({ + startTime: this.query.createdAt[0], + endTime: this.query.createdAt[1] + }) + this.tradeLoading = false + this.tradeSale = res.sale + this.tradeVip = res.vip + this.tradeCount = res.count + } catch (error) { + console.log(error); + } + }, + lineChartTypeChange(i) { + this.lineChartType = i + if (i == 0) { + this.dateAmount() + } else { + this.datePayType(); + } + }, // 初始化支付笔数柱状图 initCardPayChart(time = [], data = []) { this.cardPayChart = echarts.init(this.$refs.cardPayChart); @@ -537,7 +749,7 @@ export default { async datePayType() { try { this.payChartLoading = true; - const res = await datePayType(this.payChartDay); + const res = await datePayType(this.saleActive); const data = res.countPayType.map(item => { return { value: item.count, @@ -752,6 +964,232 @@ export default { background-color: #f5f5f5; } +.h_card_wrap { + + .status_wrap { + display: flex; + align-items: center; + justify-content: space-between; + + .left { + display: flex; + align-items: center; + + .dot { + $size: 6px; + width: $size; + height: $size; + border-radius: 50%; + background-color: #1890ff; + margin-right: 10px; + } + } + + .time { + display: flex; + align-items: center; + } + } + + .content { + background-color: #fff; + margin-top: 15px; + padding: 20px; + + .top { + display: flex; + + .item { + flex: 1; + + &.earnings { + display: flex; + } + + &.data { + margin-left: 40px; + background: url('../../assets/images/data_home_bg1.png') no-repeat center center / cover; + display: flex; + align-items: center; + } + + .data_item { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .data_item_right { + flex: 1; + display: flex; + flex-direction: column; + + .t { + width: 200px; + color: #333; + display: flex; + justify-content: space-between; + + &:not(:first-child) { + margin-top: 20px; + } + } + + .n { + color: #1890ff; + margin-left: 20px; + } + } + + .num_wrap { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .num { + font-size: 30px; + color: #1890ff; + } + + .tips { + font-size: 12px; + margin-top: 10px; + } + } + + .line_wrap { + flex: 1; + padding-left: 20px; + + .line_item { + &:not(:first-child) { + margin-top: 20px; + } + + .line_item_top { + display: flex; + justify-content: space-between; + font-size: 12px; + + .t { + color: #999; + } + } + + .line_gropress { + display: flex; + margin-top: 6px; + background-color: #F6F6F6; + + .gropress { + height: 5px; + + &.l { + background-color: #1890ff; + } + + &.r { + background-color: #FF3F3F; + } + } + } + + .line_btm { + display: flex; + justify-content: space-between; + margin-top: 5px; + + .icon { + color: #A2A2A2; + position: relative; + left: -5px; + font-size: 12px; + } + + .info { + font-size: 12px; + + .l_t { + color: #1890ff; + } + + .l_r { + color: #FF3F3F; + margin-left: 10px; + } + } + } + } + } + } + } + + .btm { + display: flex; + justify-content: space-between; + margin-top: 20px; + + .item { + width: 200px; + height: 83px; + background-repeat: no-repeat; + background-position: center center; + background-size: 100% 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 18px; + + &.item1 { + background-image: url('../../assets/images/data_home_item1.png'); + } + + &.item2 { + background-image: url('../../assets/images/data_home_item2.png'); + } + + &.item3 { + background-image: url('../../assets/images/data_home_item3.png'); + } + + &.item4 { + background-image: url('../../assets/images/data_home_item4.png'); + } + + .title { + display: flex; + align-items: center; + color: #333; + + .icon { + font-size: 12px; + color: #999; + margin-left: 6px; + } + } + + .icon_wrap { + display: flex; + align-items: center; + margin-top: 10px; + + .img { + width: 36px; + height: 36px; + } + + .t { + font-size: 24px; + margin-left: 10px; + } + } + } + } + } +} + .card_wrap { display: flex; flex-wrap: wrap; @@ -868,10 +1306,11 @@ export default { align-items: center; justify-content: center; font-size: 14px; - color: $color; + margin-right: 20px; &.active { position: relative; + color: $color; &::after { content: ""; diff --git a/src/views/home/home_old.vue b/src/views/home/home_old.vue new file mode 100644 index 0000000..6afe3e1 --- /dev/null +++ b/src/views/home/home_old.vue @@ -0,0 +1,899 @@ + + + + + diff --git a/src/views/shop/components/collectMoneyCode.vue b/src/views/shop/components/collectMoneyCode.vue new file mode 100644 index 0000000..4c4d8ff --- /dev/null +++ b/src/views/shop/components/collectMoneyCode.vue @@ -0,0 +1,49 @@ + + + \ No newline at end of file diff --git a/src/views/shop/components/shopInfo.vue b/src/views/shop/components/shopInfo.vue index 0afb898..e516d9e 100644 --- a/src/views/shop/components/shopInfo.vue +++ b/src/views/shop/components/shopInfo.vue @@ -29,6 +29,10 @@ uploadIndex = 3; "> + + + @@ -69,10 +73,16 @@ }" format="HH:mm" value-format="HH:mm"> + + + + + + @@ -251,6 +261,10 @@ export default { this.tbShopInfo(); }, methods: { + // 下载图片 + downloadImgHandle(url) { + if (url) window.open(url, '_blank') + }, onSearchResult(res) { this.locationSearchList = res; this.amapOptions.center = [res[0].lng, res[0].lat]; diff --git a/src/views/shop/components/shopMode.vue b/src/views/shop/components/shopMode.vue new file mode 100644 index 0000000..aac223a --- /dev/null +++ b/src/views/shop/components/shopMode.vue @@ -0,0 +1,69 @@ + + + \ No newline at end of file diff --git a/src/views/shop/shop_configuration.vue b/src/views/shop/shop_configuration.vue index bee45ee..3476d7e 100644 --- a/src/views/shop/shop_configuration.vue +++ b/src/views/shop/shop_configuration.vue @@ -2,13 +2,14 @@
+ - + - + @@ -17,7 +18,8 @@ - + +
@@ -29,16 +31,24 @@ import securitySetting from './components/securitySetting' import extend from './components/extend' import goxcx from './components/goxcx' import notifications from './notifications/index.vue' +import ShopMode from './components/shopMode.vue' +import CollectMoneyCode from './components/collectMoneyCode.vue' export default { components: { shopInfo, shopSetting, - notice,securitySetting,extend,goxcx,notifications + notice, + securitySetting, + extend, + goxcx, + notifications, + ShopMode, + CollectMoneyCode }, data() { return { activeName: '1', - shopId:localStorage.getItem('shopId') + shopId: localStorage.getItem('shopId') } } } diff --git a/src/views/table/components/downloadTableCode.vue b/src/views/table/components/downloadTableCode.vue index 0d32964..92f0218 100644 --- a/src/views/table/components/downloadTableCode.vue +++ b/src/views/table/components/downloadTableCode.vue @@ -2,7 +2,7 @@ - +