weipengfei
/
mer-tradescreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: weipengfei:911b859bdfa5a34ddc44944e01488e7549f73e37
Branches Tags
weipengfei:main
weipengfei:new
..
compare: weipengfei:f4c2333170ebc73f6424d2e30d69f4851f38ddf0
Branches Tags
weipengfei:main
weipengfei:new

No commits in common. "911b859bdfa5a34ddc44944e01488e7549f73e37" and "f4c2333170ebc73f6424d2e30d69f4851f38ddf0" have entirely different histories.
911b859bdf ... f4c2333170

27 changed files with 245 additions and 311 deletions
Show Stats Expand all files Collapse all files

14
package-lock.json generated
View File

@ -14,7 +14,7 @@
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^1.6.2", "axios": "^1.6.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"element-plus": "^2.4.4", "element-plus": "^2.4.3",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8", "vue": "^3.3.8",
@ -1980,9 +1980,9 @@
"dev": true "dev": true
}, },
"node_modules/element-plus": { "node_modules/element-plus": {
"version": "2.4.4", "version": "2.4.3",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz", "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
"integrity": "sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==", "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
"dependencies": { "dependencies": {
"@ctrl/tinycolor": "^3.4.1", "@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
@ -4507,9 +4507,9 @@
"dev": true "dev": true
}, },
"element-plus": { "element-plus": {
"version": "2.4.4", "version": "2.4.3",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.4.tgz", "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.4.3.tgz",
"integrity": "sha512-TlKubXJgxwhER0dw+8ULn9hr9kZjraV4R6Q/eidwWUwCKxwXYPBGmMKsZ/85tlxlhMYbcLZd/YZh6G3QkHX4fg==", "integrity": "sha512-b3q26j+lM4SBqiyzw8HybybGnP2pk4MWgrnzzzYW5qKQUgV6EG1Zg7nMCfgCVccI8tNvZoTiUHb2mFaiB9qT8w==",
"requires": { "requires": {
"@ctrl/tinycolor": "^3.4.1", "@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",

2
package.json
View File

@ -15,7 +15,7 @@
"amfe-flexible": "^2.2.1", "amfe-flexible": "^2.2.1",
"axios": "^1.6.2", "axios": "^1.6.2",
"echarts": "^5.4.3", "echarts": "^5.4.3",
"element-plus": "^2.4.4", "element-plus": "^3.2.5",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8", "vue": "^3.3.8",

46
src/App.vue
View File

@ -6,31 +6,13 @@ const areaStroe = areaObj()
if (localStorage.getItem("TRADE_USER")) { if (localStorage.getItem("TRADE_USER")) {
let userInfo = JSON.parse(localStorage.getItem('TRADE_USER')) let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
areaStroe.changeUserInfo(userInfo) areaStroe.changeUserInfo(userInfo)
let { area_code, street_code } = userInfo.user let { area_code, street_code } = userInfo.user
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code }) console.log(area_code,45454)
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
} }
else {
localStorage.setItem('TRADE_USER', JSON.stringify({
"user": {
"id": 8,
"account_type": 2,
"area_code": "510524",
"street_code": "510524100",
"account": "叙永镇",
"password": "3f4087bd6bdff7b6a3719ecc165c1a0d"
},
"token": "345d45fcd348ff02a69137999df2bbd8",
"expire": 1718782774,
"role": 3
}))
let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
areaStroe.changeUserInfo(userInfo)
let { area_code, street_code } = userInfo.user
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
}
@ -48,9 +30,9 @@ else {
</script> </script>
<template> <template>
<div class="main-box"> <div class="main-box">
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>
@ -59,14 +41,14 @@ else {
@import '/static/font/font.css'; @import '/static/font/font.css';
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.main-box { .main-box {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #000C14; background-color: #000C14;
overflow: hidden; overflow: hidden;
} }
</style> </style>

19
src/api.js
View File

@ -8,8 +8,7 @@ let expire = localStorage.getItem("TRADE_USER") ? JSON.parse(localStorage.getIte
// 创建axios 实例 // 创建axios 实例
const instacne = axios.create({ const instacne = axios.create({
baseURL: "http://192.168.1.22:8545", baseURL: "https://crmeb-test.shop.lihaink.cn/",
// baseURL: "https://shop.lihaink.cn/",
timeout: 30000, timeout: 30000,
}); });
@ -45,7 +44,7 @@ instacne.interceptors.request.use(
instacne.interceptors.response.use( instacne.interceptors.response.use(
(res) => { (res) => {
if (res.data.code != 1) { if (res.data.status != 200) {
ElMessage({ ElMessage({
message: res.data.message, message: res.data.message,
type: 'warning', type: 'warning',
@ -65,7 +64,7 @@ instacne.interceptors.response.use(
export function getUserNumApi(params) { export function getUserNumApi(params) {
return instacne.get('/statistics/user', { params }) return instacne.get('/api/dataview/user_merchat_count', { params })
} }
@ -73,7 +72,7 @@ export function getOrderNumApi(params) {
return instacne.get('/api/dataview/order_statistics', { params }) return instacne.get('/api/dataview/order_statistics', { params })
} }
export function getSalesRankApi(params) { export function getSalesRankApi(params) {
return instacne.get('/statistics/sales_ranking', { params }) return instacne.get('/api/dataview/sales_ranking', { params })
} }
@ -83,15 +82,15 @@ export function getTodayOrderAmountApi(params) {
export function getProductCountApi(params) { export function getProductCountApi(params) {
return instacne.get('/statistics/product_count', { params }) return instacne.get('/api/dataview/product_count', { params })
} }
export function getViewCountApi(params) { export function getViewCountApi(params) {
return instacne.get('/statistics/index', { params }) return instacne.get('/api/dataview/view_count', { params })
} }
export function getUserTradeCountApi(params) { export function getUserTradeCountApi(params) {
return instacne.get('/statistics/user_trade_count', { params }) return instacne.get('/api/dataview/user_trade_count', { params })
} }
export function getProductCategoryListApi(params) { export function getProductCategoryListApi(params) {
@ -159,7 +158,7 @@ export function withdraw_listApi(params) {
} }
export function street_currday_order_countApi(params) { export function street_currday_order_countApi(params) {
return instacne.get('/statistics/street_currday_order_count', { params }) return instacne.get('/api/dataview/street_currday_order_count', { params })
} }
export function loginApi(params) { export function loginApi(params) {
return instacne.post('/api/dataview/login', params) return instacne.post('/api/dataview/login', params)
@ -174,7 +173,7 @@ export function merchant_count_mainApi(params) {
return instacne.get('/api/dataview/merchant_count_main', { params }) return instacne.get('/api/dataview/merchant_count_main', { params })
} }
export function order_user_num_countApi(params) { export function order_user_num_countApi(params) {
return instacne.get('/statistics/order_user_num_count', { params }) return instacne.get('/api/dataview/order_user_num_count', { params })
} }
export function merchant_product_rankingApi(params) { export function merchant_product_rankingApi(params) {

11
src/components/Remake.vue
View File

@ -22,15 +22,10 @@ export default {
} }
}, },
mounted() { mounted() {
// setTimeout(() => { setTimeout(() => {
// this.toOrderNum(this.num) // 这里输入数字即可调用
// }, 500);
},
watch:{
num(n,o){
this.toOrderNum(this.num) // 这里输入数字即可调用 this.toOrderNum(this.num) // 这里输入数字即可调用
} }, 500);
}, },
methods: { methods: {
// 设置文字滚动 // 设置文字滚动

14
src/components/areaList.vue
View File

@ -2,7 +2,7 @@
<Transition> <Transition>
<div class="address" v-if="props.choseArea"> <div class="address" v-if="props.choseArea">
<div class="address-li" @click="choseAreaFn">泸县 </div> <div class="address-li" @click="choseAreaFn">龙马谭区 </div>
<div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{ <div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
item.name }} item.name }}
@ -12,14 +12,18 @@
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, onMounted, reactive, watch } from "vue" import { defineProps, defineEmits, onMounted, reactive } from "vue"
import { useRouter, useRoute } from 'vue-router' import { useRouter } from 'vue-router'
import { areaObj } from '@/store/index.js' import { areaObj } from '@/store/index.js'
import axios from "axios" import axios from "axios"
const route = useRoute
let areaStore = areaObj() let areaStore = areaObj()
const router = useRouter() const router = useRouter()
const emit = defineEmits(['offAreaList']) const emit = defineEmits(['offAreaList'])
const props = defineProps({ const props = defineProps({
@ -52,7 +56,7 @@ const choseAreaFn = () => {
}) })
props.choseArea = false props.choseArea = false
emit('offAreaList', "泸县") emit('offAreaList', "龙马潭区")
router.replace('/') router.replace('/')

22
src/components/datePicker.vue
View File

@ -12,25 +12,9 @@
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import localeZH from 'element-plus/es/locale/lang/zh-cn' import localeZH from 'element-plus/es/locale/lang/zh-cn'
import { areaObj } from "@/store/index.js" const date = ref(["2023-12-13T16:00:00.000Z",
const areaStore = areaObj() "2024-01-16T16:00:00.000Z"])
const changeDate = () => {
// 将时间对象转化为年月日
const getTime = (time) => {
var date =time
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString().padStart(2, '0');
var day = date.getDate().toString().padStart(2, '0');
var formattedDate = year + '-' + month + '-' + day;
return formattedDate
}
const date = ref([areaStore.time[0], areaStore.time[1]])
const changeDate = (e) => {
areaStore.changeTime([getTime(e[0]),getTime(e[1])])
} }

44
src/components/header.vue
View File

@ -2,43 +2,43 @@
<div class="headers"> <div class="headers">
<div class="logo"> <div class="logo">
</div> </div>
<!-- <div class="tab" v-if="role != 1"> <div class="tab" v-if="role != 1">
<div class="tab-li"> <div class="tab-li">
<img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" src="/static/index/SY.png" <img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
alt=""> alt="">
<img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" src="/static/index/SYXZ.png" <img @click="showFn(0, '/')" class="tab-img" v-else style="width: 7vw; height: 3vh;" :src="u('SYXZ')"
alt=""> alt="">
</div> </div>
<div class="tab-li"> <div class="tab-li">
<img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;" <img @click="showFn(1, '/commodity')" class="tab-img" v-if="show[1]" style="width: 6vw;height:2vh;"
src="/static/index/SP.png" alt=""> :src="u('SP')" alt="">
<img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" src="/static/index/SPXZ.png" <img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
alt=""> alt="">
</div> </div>
<div class="tab-li"> <div class="tab-li">
<img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;" <img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
src="/static/index/SH.png" alt=""> :src="u('SH')" alt="">
<img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;" <img @click="showFn(2, '/Businesses')" class="tab-img" v-else style="width: 7vw;height:3vh;"
src="/static/index/SHXZ.png" alt=""> :src="u('SHXZ')" alt="">
</div> </div>
<div class="tab-li"> <div class="tab-li">
<img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;" <img @click="showFn(3, '/order')" class="tab-img" v-if="show[3]" style="width: 6vw;height:2vh;"
src="/static/index/DD.png" alt=""> :src="u('DD')" alt="">
<img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" <img @click="showFn(3, '/order')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('DDXZ')"
src="/static/index/DDXZ.png" alt=""> alt="">
</div> </div>
<div class="tab-li"> <div class="tab-li">
<img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;" <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
src="/static/index/CW.png" alt=""> :src="u('CW')" alt="">
<img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" <img @click="showFn(4, '/finance')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('CWXZ')"
src="/static/index/CWXZ.png" alt=""> alt="">
</div> </div>
<div class="tab-li" v-if="route.path == '/storeLogin'" @click="router.replace('/Businesses')"> <div class="tab-li" v-if="route.path == '/storeLogin'" @click="router.replace('/Businesses')">
<img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;" <img @click="showFn(4, '/finance')" class="tab-img" v-if="show[4]" style="width: 6vw;height:2vh;"
src="/static/index/FH.png" alt=""> :src="u('FH')" alt="">
</div> </div>
</div> </div>
@ -46,15 +46,15 @@
<div class="tab-li"> <div class="tab-li">
<img @click="showFn(2, '/storeLogin')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;" <img @click="showFn(2, '/storeLogin')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
src="/static/index/SH.png" alt=""> :src="u('SH')" alt="">
<img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;" <img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
src="/static/index/SHXZ.png" alt=""> :src="u('SHXZ')" alt="">
</div> </div>
</div> --> </div>
<div class="right"> <div class="right">
<datePicker></datePicker> <datePicker></datePicker>
<div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;" <div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
src="/static/index/DW.png" alt=""> {{ area }} :src="u('DW')" alt=""> {{ area }}
</div> </div>
<areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;"></areaList> <areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;"></areaList>
<div class="right-line"> <div class="right-line">
@ -70,7 +70,7 @@
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
<div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" src="/static/index/GJ.png" <div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
alt=""></div> alt=""></div>
<div class="right-line"> <div class="right-line">
<span></span> <span></span>
@ -217,9 +217,9 @@ const updateTime = () => {
} }
onMounted(() => { onMounted(() => {
setInterval(updateTime, 1000) setInterval(updateTime, 1000)
// MapLoader().then(res => { MapLoader().then(res => {
// area.value = res.addressComponent.district area.value = res.addressComponent.district
// }) })
}) })

2
src/components/index/topCenter.vue
View File

@ -74,7 +74,7 @@
<img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt=""> <img src="/static/index/JR.png" style="width: 75%;position: relative;margin-top: 3.7vh;" alt="">
<div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{ <div style="margin-top: 2vh;position: relative;"> <span style="color: #9DD2E0;font-size: 16px;">{{
data?.merchantCountInfo?.todayMerchantCount }}</span> data?.merchantCountInfo?.todayMerchantCount }}</span>
个</div> 件</div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;"> <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;padding: 0 1vw;">
<div style="font-size: 12px;position: relative;display: flex;align-items: center;"> <div style="font-size: 12px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt=""> <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">

5
src/components/index/topRight.vue
View File

@ -201,18 +201,19 @@ const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag); var chartDom = document.getElementById(tag);
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
myChart.setOption(option); myChart.setOption(option);
} }
const storeData = reactive([]) const storeData = reactive([])
const initStoreOption = (pageData, total) => { const initStoreOption = (pageData, total) => {
storeData.splice(0, storeData.length); storeData.splice(0, storeData.length);
pageData.forEach(item => { pageData.forEach(item => {
let range = (parseInt((item.product_count / total)*100)) let range = ((item.product_count / total).toFixed(2) * 100)
storeData.push({ storeData.push({
name: item.street_name, name: item.street_name,
num: item.product_count, num: item.product_count,
option: getRange(range) option: getRange(range)
}) })
}) })
storeData.forEach((item, index) => { storeData.forEach((item, index) => {
initCharts(`stores${index}`, item.option) initCharts(`stores${index}`, item.option)

29
src/components/townDetail/bottomCenter.vue
View File

@ -12,11 +12,11 @@ let areaStore = areaObj()
getUserTradeCountApi( getUserTradeCountApi(
{ ...areaStore.area } { ...areaStore.area }
).then(res => { ).then(res => {
res.data.forEach(item => { res.data.userTradeCountList.forEach(item => {
transactionUsersTown.xAxis[0] transactionUsersTown.xAxis[0]
transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length)) transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length))
transactionUsersTown.series[0].data.push(item.visitUser) transactionUsersTown.series[0].data.push(item.visitUser)
transactionUsersTown.series[1].data.push(item.orderUser ) transactionUsersTown.series[1].data.push(item.orderUser)
transactionUsersTown.series[2].data.push(item.payOrderUser) transactionUsersTown.series[2].data.push(item.payOrderUser)
}) })
initCharts('transactionUsers', transactionUsersTown) initCharts('transactionUsers', transactionUsersTown)
@ -28,7 +28,7 @@ const initCharts = (tag, option) => {
} }
const transactionUsersTown = { const transactionUsersTown = {
color: ['#4B5FDB', '#583936', '#10C1CE'], color: ['#015989', '#583936', '#416979'],
title: { title: {
text: '' text: ''
}, },
@ -45,12 +45,8 @@ const transactionUsersTown = {
data: ['访客人数', '下单人数', '支付人数',], data: ['访客人数', '下单人数', '支付人数',],
textStyle: { textStyle: {
color: "white" color: "white"
}, }
icon: 'cricle',
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
top: '2%'
}, },
grid: { grid: {
@ -87,6 +83,7 @@ const transactionUsersTown = {
{ {
name: '访客人数', name: '访客人数',
type: 'line', type: 'line',
stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 0 width: 0
@ -97,11 +94,11 @@ const transactionUsersTown = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#4B5FDB' color: '#18394A'
}, },
{ {
offset: 1, offset: 1,
color: '#5A649D' color: '#2885A4'
} }
]) ])
}, },
@ -113,6 +110,7 @@ const transactionUsersTown = {
{ {
name: '下单人数', name: '下单人数',
type: 'line', type: 'line',
stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 0 width: 0
@ -123,11 +121,11 @@ const transactionUsersTown = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#583936' color: '#2752A6'
}, },
{ {
offset: 1, offset: 1,
color: '#8b7042' color: '#005886'
} }
]) ])
}, },
@ -139,6 +137,7 @@ const transactionUsersTown = {
{ {
name: '支付人数', name: '支付人数',
type: 'line', type: 'line',
stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 0 width: 0
@ -149,11 +148,11 @@ const transactionUsersTown = {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#10C1CE' color: '#005685'
}, },
{ {
offset: 1, offset: 1,
color: '#0294E0' color: '#355969'
} }
]) ])
}, },

21
src/components/townDetail/bottomRight.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<img class="img-cls" src="/static/town/PHBSJ.png" alt=""> <img class="img-cls" src="/static/town/PHBSJ.png" alt="">
<div class="user-rank" style="width: 98%; " v-if="config3.data.length"> <div class="user-rank" style="width: 98%; " v-if="config3.data.length">
<!-- <div class="btns"> <div class="btns">
<span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span> <span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span>
<span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span> <span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span>
</div> --> </div>
<dv-scroll-board v-show="showGoods" :config="config3" style="height: 35vh;margin-left: 1%;" /> <dv-scroll-board v-show="showGoods" :config="config3" style="height: 35vh;margin-left: 1%;" />
<dv-scroll-board v-show="!showGoods" :config="config" style="height: 35vh;margin-left: 1%;" /> <dv-scroll-board v-show="!showGoods" :config="config" style="height: 35vh;margin-left: 1%;" />
</div> </div>
@ -16,11 +16,9 @@ import { areaObj } from "@/store/index.js"
const showGoods = ref(true) const showGoods = ref(true)
const areaStore = areaObj() const areaStore = areaObj()
getSalesRankApi({ ...areaStore.area }).then(res => { getSalesRankApi({ ...areaStore.area }).then(res => {
townProductCount = res.data.townProductCount
console.log("===", res); productRankingTotal = res.data.productRankingTotal
// townProductCount = res.data.townProductCount aa(config3, res.data.productRankingList)
// productRankingTotal = res.data.productRankingTotal
aa(config3, res.data)
aa(config, res.data.merchantRankingList aa(config, res.data.merchantRankingList
) )
@ -36,16 +34,14 @@ let townProductCount = ''
let productRankingTotal = '' let productRankingTotal = ''
const aa = (cig, data) => { const aa = (cig, data) => {
let list = [] let list = []
productRankingTotal = 0 data.forEach((item, i) => {
data?.forEach((item, i) => {
productRankingTotal += item.sales
cig.data.push([ cig.data.push([
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `, `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`, `<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`, `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.sales / productRankingTotal).toFixed(2) * 100 : (item.total_sales / townProductCount).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`, `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: ${item.store_name ? (item.total_sales / productRankingTotal.value).toFixed(2) * 100 : (item.total_sales / townProductCount.value).toFixed(2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
`<div style=' position: relative;line-height:30px;text-align:center' >${item.sales} <span style='font-size:10px'>单</span> `<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt=""> <img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
</div>`, </div>`,
@ -57,6 +53,7 @@ const aa = (cig, data) => {
return list return list
} }

16
src/components/townDetail/topCenter.vue
View File

@ -77,7 +77,7 @@
</span> </span>
间</div> 件</div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;"> <div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
<div style="font-size: 9px;position: relative;display: flex;align-items: center;"> <div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt=""> <img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
@ -96,14 +96,13 @@
</div> </div>
<div class="Views"> <div class="Views">
<img src="/static/index/SSLL.png" style="width: 100%;height: 100%;position: absolute;" alt=""> <img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="view-content"> <div class="view-content">
<!-- <div>昨日数据：{{ viewData.yesterday }}</div> --> <div>昨日数据：{{ viewData.yesterday }}</div>
<div style="display: flex;align-items: center;"> <div style="display: flex;align-items: center;">当前浏览量：
<span style="font-size: 18px;">实时收款金额：</span> <Remake :num="viewData.today" /> 人正在浏览
<Remake :num="viewData.dayPayPrice" />
</div> </div>
<!-- <div>周环比：{{ viewData.lastWeekRate }}%</div> --> <div>周环比：{{ viewData.lastWeekRate }}%</div>
</div> </div>
</div> </div>
</template> </template>
@ -146,8 +145,7 @@ const data = reactive(
const viewData = reactive({ const viewData = reactive({
lastWeekRate: -0, lastWeekRate: -0,
today: 0, today: 0,
yesterday: 7, yesterday: 7
dayPayPrice: 0
}) })
getProductCountApi({ getProductCountApi({

6
src/components/townDetail/topLeft.vue
View File

@ -39,7 +39,7 @@ getUserNumApi({
}).then(res => { }).then(res => {
res.data.forEach(item => { res.data.userCountlist.forEach(item => {
userChartOption.series[0].data.push(item.newUserCount) userChartOption.series[0].data.push(item.newUserCount)
userChartOption.series[1].data.push(item.viewUserCount) userChartOption.series[1].data.push(item.viewUserCount)
userChartOption.series[2].data.push(item.totalUserCount) userChartOption.series[2].data.push(item.totalUserCount)
@ -122,7 +122,7 @@ const userChartOption = {
], ],
series: [ series: [
{ {
name: '新增会员数量', name: '新增用户数量',
type: 'bar', type: 'bar',
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@ -150,7 +150,7 @@ const userChartOption = {
}, },
}, },
{ {
name: '累计会员数量', name: '累计用户数量',
type: 'bar', type: 'bar',
emphasis: { emphasis: {
focus: 'series' focus: 'series'

21
src/router/index.js
View File

@ -58,24 +58,23 @@ const routes = [
] ]
const router = createRouter({ const router = createRouter({
mode: 'hash',
history: createWebHistory(), history: createWebHistory(),
routes routes
}) })
router.beforeEach(async (to, from, next) => { router.beforeEach(async (to, from, next) => {
// 全部放行
// let token = localStorage.getItem("TRADE_USER")
// if (to.name == "login" && token) { let token = localStorage.getItem("TRADE_USER")
// next("/")
// return
// }
// if (to.name != "login" && !token) { if (to.name == "login" && token) {
// next("/login") //跳转 next("/")
// return return
// } }
if (to.name != "login" && !token) {
next("/login") //跳转
return
}
next() //放行 next() //放行
}) })

36
src/store/index.js
View File

@ -2,38 +2,6 @@ import {
defineStore defineStore
} from 'pinia' } from 'pinia'
const lastMouth = () => {
var thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); // 设置为30天前的日期
var year = thirtyDaysAgo.getFullYear();
var month = thirtyDaysAgo.getMonth() + 1; // 月份从0开始，需要加1
var day = thirtyDaysAgo.getDate();
// 格式化为字符串，如果需要补0可以使用padStart函数
var formattedDate = year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0');
return formattedDate
}
const now = () => {
// 创建一个新的Date对象，表示当前日期和时间
var today = new Date();
// 获取年、月、日
var year = today.getFullYear();
var month = today.getMonth() + 1; // 月份从0开始，需要加1
var day = today.getDate();
// 格式化为字符串
var formattedDate = year + "-" + month + "-" + day;
return formattedDate
}
export const areaObj = defineStore('counter', { export const areaObj = defineStore('counter', {
state: () => ({ state: () => ({
userInfo: {}, userInfo: {},
@ -43,7 +11,6 @@ export const areaObj = defineStore('counter', {
// streetCode: 51052410 // streetCode: 51052410
}, },
time: [lastMouth(), now()],
// 商户请求的参数 // 商户请求的参数
store: { store: {
areaCode: "", areaCode: "",
@ -69,9 +36,6 @@ export const areaObj = defineStore('counter', {
} }
}, },
changeTime(times) {
this.time = times
},
storeLogin(obj) { storeLogin(obj) {
this.userInfo.user = obj this.userInfo.user = obj
} }

5
src/view/home.vue
View File

@ -1,13 +1,12 @@
<template> <template>
<Header></Header> <Header></Header>
<router-view :key="route.path"></router-view> <router-view></router-view>
</template> </template>
<script setup> <script setup>
import Header from "@/components/Header.vue" import Header from "@/components/Header.vue"
import { useRoute } from "vue-router";
const route =useRoute()
</script> </script>

26
src/view/login.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="login-box"> <div class="login-box">
<div class="form"> <div class="form">
<div style="text-align: center;transform: translateY(-1vh);"><img src="/static/login/tit.png" style="width: 29vw;"></div>
<div class="content"> <div class="content">
<div style="position: relative;margin-bottom: 3VH;"> <div style="position: relative;margin-bottom: 3VH;">
@ -178,9 +177,9 @@ const test = () => {
left: 10vw; left: 10vw;
.ipt { .ipt {
border: 1px solid #2CCCF7; border: 1px solid #194FA3;
padding: 1vh 2vw; padding: 1vh 2vw;
background-color: #125A7D; background-color: #123266;
width: 13VW; width: 13VW;
outline: none; outline: none;
-webkit-user-select: auto; -webkit-user-select: auto;
@ -239,20 +238,21 @@ const test = () => {
:deep .el-input__wrapper { :deep .el-input__wrapper {
height: 35px; height: 35px;
width: 15.9vw; width: 15.9vw;
background-color: #125A7D !important; background-color: #123266 !important;
box-shadow: 0 0 0 1px #2CCCF7 inset !important; box-shadow: 0 0 0 1px #194FA3 inset !important;
--el-select-focus-border-color: red !important;
--el-select-hover-border-color: red !important;
} }
// 修改下拉框样式-点击框focus // 修改下拉框样式-点击框focus
:deep .is-focus .el-input__wrapper { :deep .is-focus .el-input__wrapper {
box-shadow: #2CCCF7 inset !important; box-shadow: #194FA3 inset !important;
--el-select-focus-border-color: #2CCCF7 !important; --el-select-focus-border-color: #194FA3 !important;
--el-select-hover-border-color: #2CCCF7 !important; --el-select-hover-border-color: #194FA3 !important;
} }
:deep .el-select__caret { :deep .el-select__caret {
color: #2CCCF7 !important; // 清除按钮 color: #194FA3 !important; // 清除按钮
} }
:deep .el-input__inner { :deep .el-input__inner {
@ -266,7 +266,7 @@ const test = () => {
} }
.el-select-dropdown__item.hover { .el-select-dropdown__item.hover {
background-color: #59C5D8 !important; // hover background-color: #194FA3 !important; // hover
} }
:deep .el-dropdown-menu__item:not(.is-disabled) { :deep .el-dropdown-menu__item:not(.is-disabled) {
@ -278,8 +278,8 @@ const test = () => {
} }
:deep .el-popper { :deep .el-popper {
background-color: #125A7D !important; // 展开下拉背景 background-color: #123266 !important; // 展开下拉背景
border: 1px solid #125A7D !important; // 展开下拉边框 border: 1px solid #409EFE !important; // 展开下拉边框
} }
:deep .el-popper .el-popper__arrow::before { :deep .el-popper .el-popper__arrow::before {

76
src/view/order.vue
View File

@ -290,17 +290,13 @@ const addConfigData = (data) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'} </div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'} </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<div style='display:flex'> <span>${item.orderProduct[0].cart_info.product.store_name} </span>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name} </span>
</div>
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span> <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.total_price}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${payType(item.pay_type)}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${payType(item.pay_type)}</div>`,
] ]
) )
@ -366,23 +362,20 @@ const addConfigData = (data) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
<div style='display:flex'>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name} </span>
</div>
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span> <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.cost}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.cost}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${orderStatus(item.status)}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${orderStatus(item.status)}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${payType(item.pay_type)}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${payType(item.pay_type)}</div>`,
] ]
@ -460,23 +453,13 @@ const addConfigData2 = (data) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.user.nickname}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.user.nickname}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.order.user_address_code.substring(item.order.user_address_code.length - 1) || '--'} 队</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_delivery_address || '--'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
<div style='display:flex'>
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'> <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
<span style='margin-left:10px'> ${item.refundProduct[0].product.cart_info.product.store_name} </span> <span>
</div> ${item.refundProduct[0].product.cart_info.product.store_name}
</span>
<span> <span>
${item.refundProduct[0].product.product_num} ${item.refundProduct[0].product.cart_info.product.unit_name} ${item.refundProduct[0].product.product_num} ${item.refundProduct[0].product.cart_info.product.unit_name}
</span> </span>
@ -553,19 +536,16 @@ const addConfigData2 = (data) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.order.user_address_code.substring(item.order.user_address_code.length - 1) || '--'} 队</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_delivery_address || '--'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
<div style='display:flex'>
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'> <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
<span style='margin-left:10px'> ${item.refundProduct[0].product.cart_info.product.store_name} </span> <span>
</div> ${item.refundProduct[0].product.cart_info.product.store_name}
</span>
<span> <span>
${item.refundProduct[0].product.product_num} ${item.refundProduct[0].product.cart_info.product.unit_name} ${item.refundProduct[0].product.product_num} ${item.refundProduct[0].product.cart_info.product.unit_name}
</span> </span>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
@ -651,20 +631,21 @@ const addConfigData3 = (data) => {
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >核销订单</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >核销订单</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'> ${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'> ${item.user_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<div style='display:flex'> <span>${item.orderProduct[0].cart_info.product.store_name} </span>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name} </span>
</div>
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span> <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
${item.pay_price} ${item.pay_price}
@ -727,22 +708,21 @@ const addConfigData3 = (data) => {
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address_code.substring(item.user_address_code.length - 1)}队</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
<div style='display:flex'> <img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span style='margin-left:10px'>${item.orderProduct[0].cart_info.product.store_name} </span>
</div>
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span> <span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.pay_price} </span> `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.pay_price} </span>
</div>`, </div>`,

117
src/view/storeLogin.vue
View File

@ -148,7 +148,7 @@
<script setup> <script setup>
import { ref, reactive, onMounted, watch } from "vue" import { ref, reactive, onMounted } from "vue"
import { merchant_count_mainApi, merchant_product_rankingApi, merchant_product_visitApi, merchant_product_cartApi, } from "@/api.js" import { merchant_count_mainApi, merchant_product_rankingApi, merchant_product_visitApi, merchant_product_cartApi, } from "@/api.js"
import { areaObj } from "../store"; import { areaObj } from "../store";
@ -174,6 +174,7 @@ if (areaStore.userInfo.user?.merchant) {
if (userInfo.user?.merchant) { if (userInfo.user?.merchant) {
let { area_id, mer_id, street_id } = userInfo.user.merchant let { area_id, mer_id, street_id } = userInfo.user.merchant
console.log(area_id, 5645545)
query = { query = {
areaCode: area_id, areaCode: area_id,
streetCode: street_id, streetCode: street_id,
@ -248,39 +249,30 @@ const data = reactive(
let total1 = '' let total1 = ''
let total2 = '' let total2 = ''
let total3 = '' let total3 = ''
merchant_product_rankingApi(
{ ...query, start_date: '2020-12-18', end_date: '2023-12-18' }
).then(res => {
total1 = res.data.totalCount
addData1(res.data.list)
})
merchant_product_visitApi(
{ ...query, start_date: '2020-12-18', end_date: '2023-12-18' }
).then(res => {
total2 = res.data.totalCount
addData2(res.data.list)
})
merchant_product_cartApi(
{ ...query, start_date: '2020-01-01', end_date: '2023-12-18' }
).then(res => {
total3 = res.data.totalCount
addData3(res.data.list)
})
const init = () => {
merchant_product_rankingApi(
{ ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
).then(res => {
total1 = res.data.totalCount
addData1(res.data.list)
})
merchant_product_visitApi(
{ ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
).then(res => {
total2 = res.data.totalCount
addData2(res.data.list)
})
merchant_product_cartApi(
{ ...query, start_date: areaStore.time[0], end_date: areaStore.time[1] }
).then(res => {
total3 = res.data.totalCount
addData3(res.data.list)
})
}
init()
const addData1 = (data) => { const addData1 = (data) => {
config1.data.splice(0,99999999)
data.forEach((item, i) => { data.forEach((item, i) => {
config1.data.push( config1.data.push(
[ [
@ -299,8 +291,6 @@ const addData1 = (data) => {
} }
const addData2 = (data) => { const addData2 = (data) => {
config2.data.splice(0,99999999)
data.forEach((item, i) => { data.forEach((item, i) => {
config2.data.push( config2.data.push(
[ [
@ -308,7 +298,7 @@ const addData2 = (data) => {
`<div style='background:red;position:relative'><img src="${item.image}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`, `<div style='background:red;position:relative'><img src="${item.image}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name}</div>`, `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name}</div>`,
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:${(item.total / total2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`, `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:${(item.total / total2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
`<div style=' position: relative;line-height:30px;text-align:center;' >${item.total} <span style='font-size:10px'>人</span> `<div style=' position: relative;line-height:30px;text-align:center;' >${item.total} <span style='font-size:10px'>单</span>
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt=""> <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
</div>`, </div>`,
] ]
@ -319,8 +309,6 @@ const addData2 = (data) => {
} }
const addData3 = (data) => { const addData3 = (data) => {
config3.data.splice(0,99999999)
data.forEach((item, i) => { data.forEach((item, i) => {
config3.data.push( config3.data.push(
[ [
@ -341,6 +329,7 @@ const addData3 = (data) => {
merchant_count_mainApi( merchant_count_mainApi(
{ ...query } { ...query }
).then((res) => { ).then((res) => {
for (let key in res.data) { for (let key in res.data) {
@ -348,19 +337,63 @@ merchant_count_mainApi(
} }
}) })
watch(
() => areaStore.time,
(value, oldValue) => {
init()
}, {
deep: true,
immediate: true
}
) onMounted(() => {
// for (let i = 0; i < 20; i++) {
// config3.data.push(
// [
// `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
// `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
// `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>商asdasdasdssadasdasdasd品名称</div>`,
// `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
// `<div style=' position: relative;line-height:30px;text-align:center;' >5495 <span style='font-size:10px'>单</span>
// <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
// </div>`,
// ],
// )
// }
// for (let i = 0; i < 20; i++) {
// config1.data.push(
// [
// `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
// `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
// `<div style='height:40px;line-height:40px'>商品名称</div>`,
// `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
// `<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
// <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
// </div>`,
// ],
// )
// } for (let i = 0; i < 20; i++) {
// config2.data.push(
// [
// `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
// `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
// `<div style='height:40px;line-height:40px'>商品名称</div>`,
// `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
// `<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
// <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
// </div>`,
// ],
// )
// }
})
</script> </script>

12
src/view/townDetail.vue
View File

@ -8,13 +8,13 @@
<div class="top box"> <div class="top box">
<div class="l"> <div class="l">
<topLeft :code="route.query.code" :key="route.query.code"></topLeft> <topLeft :code="route.query.code"></topLeft>
</div> </div>
<div class="c" id=""> <div class="c" id="">
<topCenter :code="route.query.code" :key="route.query.code"></topCenter> <topCenter :code="route.query.code"></topCenter>
</div> </div>
<div class="r"> <div class="r">
<topRight :code="route.query.code" :key="route.query.code"></topRight> <topRight :code="route.query.code"></topRight>
</div> </div>
@ -22,13 +22,13 @@
<div class="bottom box"> <div class="bottom box">
<div class="l"> <div class="l">
<bottomleft :code="route.query.code" :key="route.query.code"></bottomleft> <bottomleft :code="route.query.code"></bottomleft>
</div> </div>
<div class="c"> <div class="c">
<bottomCenter :key="route.query.code"></bottomCenter> <bottomCenter></bottomCenter>
</div> </div>
<div class="r"> <div class="r">
<bottomRight :code="route.query.code" :key="route.query.code"></bottomRight> <bottomRight :code="route.query.code"></bottomRight>
</div> </div>
</div> </div>

BIN
static/index/SSLL.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
static/index/SSSK.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
static/login/DL.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/login/DLBG.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 340 KiB

After

Width:  |  Height:  |  Size: 378 KiB

BIN
static/login/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
static/login/tit.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 56 KiB