This commit is contained in:
zmj 2023-12-08 18:51:02 +08:00
parent e951ed48ac
commit 4d1a70932a
30 changed files with 2843 additions and 27416 deletions

1645
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -14,12 +14,15 @@
"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.3",
"pinia": "^2.1.7",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^5.1.1",
"vue": "^3.3.8", "vue": "^3.3.8",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^4.5.0", "@vitejs/plugin-vue": "^4.5.0",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"postcss-pxtorem": "^6.0.0", "postcss-pxtorem": "^6.0.0",
"sass": "^1.69.5", "sass": "^1.69.5",
"sass-loader": "^13.3.2", "sass-loader": "^13.3.2",

View File

@ -1,15 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
// @ts-ignore
import Header from "@/components/Header.vue"
const zz3 = 565
</script> </script>
<template> <template>
<!-- <div>sadas</div> --> <!-- <div>sadas</div> -->
<div class="main-box"> <div class="main-box">
<Header></Header>
<router-view></router-view> <router-view></router-view>
</div> </div>
</template> </template>

View File

@ -1,5 +1,6 @@
import axios from "axios"; import axios from "axios";
import { ElMessage } from 'element-plus'
// 创建axios 实例 // 创建axios 实例
const instacne = axios.create({ const instacne = axios.create({
baseURL: "https://crmeb-test.shop.lihaink.cn/", baseURL: "https://crmeb-test.shop.lihaink.cn/",
@ -21,6 +22,16 @@ instacne.interceptors.request.use(
// 响应拦截 // 响应拦截
instacne.interceptors.response.use( instacne.interceptors.response.use(
(res) => { (res) => {
console.log(res.data)
if (res.data.status != 200) {
ElMessage({
message: res.data.message,
type: 'warning',
})
return Promise.reject(res.data.message);
}
// 对响应的数据做什么 // 对响应的数据做什么
return res.data; return res.data;
}, },
@ -92,6 +103,48 @@ export function take_order_listApi(params) {
export function take_order_count_titleApi(params) { export function take_order_count_titleApi(params) {
return instacne.get('/api/dataview/take_order_count_title', { params }) return instacne.get('/api/dataview/take_order_count_title', { params })
} }
//
// /api/dataview/take_order_count_title?areaCode=510524&streetCode=510524100&status&page=1&limit=20
export function financial_record_titleApi(params) {
return instacne.get('/api/dataview/financial_record_title', { params })
}
export function financial_recordApi(params) {
return instacne.get('/api/dataview/financial_record', { params })
}
export function product_status_filterApi(params) {
return instacne.get('/api/dataview/product_status_filter', { params })
}
export function financial_record_detailApi(params) {
return instacne.get('/api/dataview/financial_record_detail/1', { params })
}
export function financial_record_detailApi2(params) {
return instacne.get('/api/dataview/financial_record_detail/2', { params })
}
export function bill_listApi(params) {
return instacne.get('/api/dataview/bill_list', { params })
}
export function withdraw_listApi(params) {
return instacne.get('/api/dataview/withdraw_list', { params })
}
export function street_currday_order_countApi(params) {
return instacne.get('/api/dataview/street_currday_order_count', { params })
}
export function loginApi(params) {
return instacne.post('/api/dataview/login', params)
}
//
////api/dataview/login {
//     "account": "泸县",
//     "password": "luxian"
// }

View File

@ -82,6 +82,7 @@ import MapLoader from "@/view/utils/position.js"
let area = ref('') let area = ref('')
const u = (name) => { const u = (name) => {
@ -154,7 +155,8 @@ const offAreaList = (name) => {
} }
const out = () => { const out = () => {
//@ts-ignore //@ts-ignore
window.open("about:blank", "_top").close() // window.open("about:blank", "_top").close()
router.replace('/login')
} }
const updateTime = () => { const updateTime = () => {
var date = new Date(); var date = new Date();

View File

@ -4,44 +4,80 @@
<div style="height:5vh;"></div> <div style="height:5vh;"></div>
<div class="towns"> <div class="towns">
<div class="town-li act">{{ area.area_name }} </div> <div class="town-li act">{{ area.area_name }} </div>
<div class="town-li" v-for="(item, index) in streetList">{{ item.street_name }}</div>
<div id="transactionUsers" style="width: 100%;height: 30vh;"></div> <div class="town-li" :class="{ act: item.street_code == props.areaCodes.streetCode }"
v-for="(item, index) in streetList" @click="hdClick(item.street_code)">{{ item.street_name }}
</div>
<div id="transactionUsers" v-if="showChart" style="width: 100%;height: 30vh;">
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, defineProps } from "vue" import { ref, reactive, onMounted, defineProps } from "vue"
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getUserTradeCountApi } from "@/api.js" import { getUserTradeCountApi } from "@/api.js"
import { notEndWith } from "postcss-pxtorem/lib/filter-prop-list";
const props = defineProps({ const props = defineProps({
areaCodes: Object, areaCodes: Object,
}) })
const hdClick = (code) => {
props.areaCodes.streetCode = code
init()
}
const streetList = reactive([]) const streetList = reactive([])
const area = reactive({ const area = reactive({
"area_code": "", "area_code": "",
"area_name": "" "area_name": ""
}) })
getUserTradeCountApi(props.areaCodes).then(res => {
res.data.streetList.forEach(item => {
streetList.push(item)
})
area.area_name = res.data.area.area_name
res.data.userTradeCountList.forEach(item => {
option.xAxis[0].data.push(item.date.slice(5, item.date.length)) const init = () => {
option.series[0].data.push(item.visitUser)
getUserTradeCountApi(props.areaCodes).then(res => {
showChart.value = false
option.xAxis[0].data.splice(0, option.xAxis[0].data.length)
option.series[0].data.splice(0, option.series[0].data.length)
option.series[1].data.splice(0, option.series[1].data.length)
option.series[2].data.splice(0, option.series[2].data.length)
if (!streetList.length) {
res.data.streetList.forEach(item => {
streetList.push(item)
})
}
area.area_name = res.data.area.area_name
res.data.userTradeCountList.forEach(item => {
option.xAxis[0].data.push(item.date.slice(5, item.date.length))
option.series[0].data.push(item.visitUser)
option.series[1].data.push(item.orderUser)
option.series[2].data.push(item.payOrderUser)
})
showChart.value = true
setTimeout(() => {
initCharts('transactionUsers', option)
}, 10)
option.series[1].data.push(item.orderUser)
option.series[2].data.push(item.payOrderUser)
}) })
}
initCharts('transactionUsers', option)
})
const initCharts = (tag, option) => { const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag); var chartDom = document.getElementById(tag);
@ -49,9 +85,9 @@ const initCharts = (tag, option) => {
myChart.setOption(option); myChart.setOption(option);
} }
const showChart = ref(false)
const option = reactive({
let option = {
color: ['#015989', '#583936', '#416979'], color: ['#015989', '#583936', '#416979'],
title: { title: {
text: '' text: ''
@ -76,14 +112,8 @@ let option = {
textStyle: { textStyle: {
color: "white" color: "white"
} }
// data: ['访','','']
}, },
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
grid: { grid: {
left: '3%', left: '3%',
right: '4%', right: '4%',
@ -201,9 +231,11 @@ let option = {
] ]
} })
onMounted(() => {
init()
})
</script> </script>
<style lang="scss"> <style lang="scss">
@ -213,6 +245,7 @@ let option = {
box-sizing: border-box; box-sizing: border-box;
padding: 1vh 1vw; padding: 1vh 1vw;
flex-wrap: wrap; flex-wrap: wrap;
position: relative;
.town-li { .town-li {
margin-top: 10px; margin-top: 10px;
@ -224,6 +257,7 @@ let option = {
// margin-left: 2vw; // margin-left: 2vw;
justify-content: fl; justify-content: fl;
margin-left: 2vw; margin-left: 2vw;
cursor: pointer;
} }
.act { .act {

View File

@ -1,476 +1,157 @@
<template> <template>
<div class="root"> <!-- <div style="background-color: red;position: relative;z-index: 9999; height: 10vh; cursor: pointer;">sadsad</div> -->
<div class="container-shell"> <div class="users center" id="orderAmount"></div>
<div class="container-shell-title">jessibuca demo player <span class="tag-version" v-if="version">({{ <img class="img-cls" src="/static/town/DRDDJE.png" alt="">
version
}})</span></div>
<div id="container" style="width: 200px;height: 200px;" ref="container"></div>
<div class="input">
<span>缓冲():</span>
<input style="width: 50px" type="number" ref="buffer" value="0.2" @change="changeBuffer" />
<input type="checkbox" v-model="isDebug" ref="isDebug" @change="restartPlay" /><span>开启日志</span>
</div>
<div class="input">
<div>
<input type="checkbox" v-model="isFlv" @change="restartPlay()" /><span>设置Flv格式</span>
<input type="checkbox" v-model="controlAutoHide" @change="restartPlay()" /><span>控制栏自动隐藏(移动端不支持)</span>
</div>
</div>
<div class="input">
<span>解码器</span>
<input type="checkbox" v-model="useMSE" ref="vod" @change="restartPlay('mse')" /><span>MediaSource</span>
<input type="checkbox" v-model="useWCS" ref="vod" @change="restartPlay('wcs')" /><span>webcodecs</span>
<input type="checkbox" v-model="useWasm" ref="vod" @change="restartPlay('wasm')" /><span>wasm</span>
</div>
<div class="input">
<div>输入URL</div>
<input placeholder="支持ws-raw/ws-flv/http-flv协议" type="input" autocomplete="on" ref="playUrl" value="" />
<button v-if="!playing" @click="play">播放</button>
<button v-else @click="pause">停止</button>
</div>
<div class="input" v-if="loaded" style="line-height: 30px">
<button @click="destroy">销毁</button>
<button v-if="quieting" @click="cancelMute">取消静音</button>
<template v-else>
<button @click="mute">静音</button>
音量
<select v-model="volume" @change="volumeChange">
<option value="1">100</option>
<option value="0.75">75</option>
<option value="0.5">50</option>
<option value="0.25">25</option>
</select>
</template>
<span>旋转</span>
<select v-model="rotate" @change="rotateChange">
<option value="0">0</option>
<option value="90">90</option>
<option value="270">270</option>
</select>
<button @click="fullscreen">全屏</button>
<button @click="screenShot">截图</button>
<div style="line-height: 30px">
<input type="checkbox" ref="operateBtns" v-model="showOperateBtns"
@change="restartPlay" /><span>操作按钮</span>
<input type="checkbox" ref="operateBtns" v-model="showBandwidth" @change="restartPlay" /><span>网速</span>
<span v-if="fps" style="margin-left: 10px">FPS{{ fps }}</span>
</div>
</div>
<div class="input" v-if="loaded">
<input type="checkbox" ref="offscreen" v-model="useOffscreen"
@change="restartPlay('offscreen')" /><span>离屏渲染</span>
<select v-model="scale" @change="scaleChange">
<option value="0">完全填充(拉伸)</option>
<option value="1">等比缩放</option>
<option value="2">完全填充(未拉伸)</option>
</select>
<button v-if="!playing" @click="clearView">清屏</button>
<template v-if="playing">
<select v-model="recordType">
<option value="webm">webm</option>
<option value="mp4">mp4</option>
</select>
<button v-if="!recording" @click="startRecord">录制</button>
<button v-if="!recording" @click="stopAndSaveRecord">暂停录制</button>
</template>
</div>
</div>
</div>
</template> </template>
<script> <style lang="scss" scoped>
import { VERSION } from "./version"; .img-cls {
width: 98%;
function isMobile() { height: 45vh;
return (/iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase())); position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} }
function isPad() { .users {
return (/ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase())); margin-top: 4.5vh;
position: absolute;
width: 98%;
height: 35vh;
box-sizing: border-box;
overflow: hidden;
position: relative;
z-index: 9999;
} }
export default { .center {
name: "DemoPlayer", position: absolute;
jessibuca: null, top: 50%;
props: {}, left: 50%;
data() { transform: translate(-50%, -50%);
return { }
version: '', </style>
wasm: false, <script setup>
playing: false,
quieting: true, import * as echarts from 'echarts';
loaded: false, // mute import { street_currday_order_countApi } from "@/api.js"
showOperateBtns: true, import { ref, reactive } from "vue"
showBandwidth: true, import { areaObj } from '../../store';
hotKey: true, const areaStore = areaObj()
err: "",
speed: 0, street_currday_order_countApi(
performance: "",
fps: '', { ...areaStore.area }
volume: 1,
rotate: 0, ).then(res => {
useWCS: false,
useMSE: false, res.data.forEach(item => {
useWasm: true, orderAmount.series[0].data.push(item.yesterdayAmount)
useOffscreen: false, orderAmount.series[1].data.push(item.todayAmount)
recording: false, })
isDebug: true,
recordType: 'webm', initCharts('orderAmount', orderAmount)
scale: 0,
vConsole: null, })
controlAutoHide: true,
isFlv: false,
};
}, const orderAmount = reactive({
mounted() { color: [
if ((isMobile() || isPad()) && window.VConsole) { new echarts.graphic.LinearGradient(0, 1, 0, 0, [
this.vConsole = new window.VConsole(); { offset: 1, color: '#57D3ED' },
{ offset: 0, color: 'transparent' },
])
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 1, color: '#4156C2' },
{ offset: 0, color: 'transparent' },
])
],
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
} }
this.version = VERSION === '#VERSION#' ? '' : VERSION;
this.create();
window.onerror = (msg) => (this.err = msg);
}, },
unmounted() { // color: transparent;
if (this.$options && this.$options.jessibuca) {
this.$options.jessibuca.destroy(); legend: {
textStyle: {
color: "white"
} }
this.vConsole.destroy();
}, },
methods: { grid: {
create(options) { left: '3%',
options = options || {}; right: '4%',
const jessibuca = new window.Jessibuca( bottom: '3%',
Object.assign( containLabel: true
{ },
container: this.$refs.container, xAxis: [
// videoBuffer: Number(this.$refs.buffer.value), // {
isResize: false, type: 'category',
useWCS: this.useWCS, data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
useMSE: this.useMSE, }
wcsUseVideoRender: this.useWCS, ],
text: "", yAxis: [
// background: "bg.jpg", {
loadingText: "疯狂加载中...", type: 'value',
// hasAudio:false, splitLine: {
debug: this.isDebug, show: true,
hotKey: true, lineStyle: {
// hasAudio:false, type: 'dashed',//线,
controlAutoHide: this.controlAutoHide, color: '#256980'
supportDblclickFullscreen: true,
showBandwidth: this.showBandwidth, //
operateBtns: {
fullscreen: this.showOperateBtns,
screenshot: this.showOperateBtns,
record: this.showOperateBtns,
play: this.showOperateBtns,
audio: this.showOperateBtns,
},
forceNoOffscreen: !this.useOffscreen,
isNotMute: true,
timeout: 10,
recordType: 'mp4',
isFlv: this.isFlv,
},
options
)
);
this.$options.jessibuca = jessibuca;
var _this = this;
jessibuca.on("load", function () {
console.log("on load");
});
jessibuca.on("log", function (msg) {
console.log("on log", msg);
});
jessibuca.on("record", function (msg) {
console.log("on record:", msg);
});
jessibuca.on("pause", function () {
console.log("on pause");
_this.playing = false;
});
jessibuca.on("play", function () {
console.log("on play");
_this.playing = true;
});
jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
});
jessibuca.on("mute", function (msg) {
console.log("on mute", msg);
_this.quieting = msg;
});
jessibuca.on("mute", function (msg) {
console.log("on mute2", msg);
});
jessibuca.on("audioInfo", function (msg) {
console.log("audioInfo", msg);
});
jessibuca.on("bps", function (bps) {
// console.log('bps', bps);
});
// let _ts = 0;
// this.jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
// _ts = ts;
// });
jessibuca.on("videoInfo", function (info) {
console.log("videoInfo", info);
});
jessibuca.on("error", function (error) {
console.log("error", error);
});
jessibuca.on("timeout", function () {
console.log("timeout");
});
jessibuca.on('start', function () {
console.log('frame start');
})
jessibuca.on("performance", function (performance) {
var show = "卡顿";
if (performance === 2) {
show = "非常流畅";
} else if (performance === 1) {
show = "流畅";
} }
_this.performance = show;
});
jessibuca.on('buffer', function (buffer) {
console.log('buffer', buffer);
})
jessibuca.on('stats', function (stats) {
console.log('stats', stats);
_this.fps = stats.fps;
})
jessibuca.on('kBps', function (kBps) {
console.log('kBps', kBps);
});
// jessibuca.on("play", () => {
// this.playing = true;
// this.loaded = true;
// this.quieting = jessibuca.isMute();
// });
jessibuca.on('recordingTimestamp', (ts) => {
console.log('recordingTimestamp', ts);
})
jessibuca.on('playToRenderTimes', (times) => {
console.log(times);
})
// this.play();
// console.log(this.jessibuca);
},
play() {
// this.jessibuca.onPlay = () => (this.playing = true);
if (this.$refs.playUrl.value) {
this.$options.jessibuca.play(this.$refs.playUrl.value).then(() => {
console.log('play success');
this.playing = true;
this.loaded = true;
this.quieting = jessibuca.isMute();
}).catch((err) => {
console.log('play error', err);
});
}
},
mute() {
this.$options.jessibuca.mute();
},
cancelMute() {
this.$options.jessibuca.cancelMute();
},
pause() {
this.$options.jessibuca.pause().then(() => {
console.log('pause success');
this.playing = false;
this.err = "";
this.performance = "";
}).catch((err) => {
console.log('pause error', err);
});
},
volumeChange() {
this.$options.jessibuca.setVolume(this.volume);
},
rotateChange() {
this.$options.jessibuca.setRotate(this.rotate);
},
destroy() {
if (this.$options.jessibuca) {
this.$options.jessibuca.destroy();
}
this.create();
this.playing = false;
this.loaded = false;
this.performance = "";
},
fullscreen() {
this.$options.jessibuca.setFullscreen(true);
},
clearView() {
this.$options.jessibuca.clearView();
},
startRecord() {
const time = new Date().getTime();
this.$options.jessibuca.startRecord(time, this.recordType);
},
stopAndSaveRecord() {
this.$options.jessibuca.stopRecordAndSave();
},
screenShot() {
this.$options.jessibuca.screenshot();
},
restartPlay(type) {
if (type === 'mse') {
this.useWCS = false;
this.useOffscreen = false;
this.useWasm = false;
} else if (type === 'wcs') {
this.useMSE = false
this.useWasm = false;
} else if (type === 'offscreen') {
this.useMSE = false
} else if (type === 'wasm') {
this.useWCS = false;
this.useMSE = false;
this.useOffscreen = false;
} }
this.destroy();
setTimeout(() => {
this.play();
}, 100)
}, },
changeBuffer() { ],
// this.$options.jessibuca.setBufferTime(Number(this.$refs.buffer.value)); series: [
{
name: '昨日订单额',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [],
// itemStyle: {
// borderWidth: 1,
// borderColor: "#384FB4",
// },
backgroundStyle: {
color: ['red']
}
},
{
name: '今日订单额',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [],
}, },
scaleChange() {
this.$options.jessibuca.setScaleMode(this.scale);
},
},
};
</script>
<style> ]
.page {
background: url(/bg.jpg);
background-repeat: no-repeat;
background-position: top;
}
</style>
<style scoped>
.root {
display: flex;
place-content: center;
margin-top: 3rem;
}
.container-shell {
position: relative;
backdrop-filter: blur(5px);
background: hsla(0, 0%, 50%, 0.5);
padding: 30px 4px 10px 4px;
/* border: 2px solid black; */
width: auto;
position: relative;
border-radius: 5px;
box-shadow: 0 10px 20px;
}
.container-shell-title {
position: absolute;
color: darkgray;
top: 4px;
left: 10px;
text-shadow: 1px 1px black;
}
.tag-version {}
#container {
background: rgba(13, 14, 27, 0.7);
width: 640px;
height: 398px;
}
.input { })
display: flex;
align-items: center;
margin-top: 10px;
color: white;
place-content: stretch;
}
.input2 { const initCharts = (tag, option) => {
bottom: 0px; var chartDom = document.getElementById(tag);
} var myChart = echarts.init(chartDom);
myChart.setOption(option);
.input input[type='input'] {
flex: auto;
}
.err {
position: absolute;
top: 40px;
left: 10px;
color: red;
}
.option {
position: absolute;
top: 4px;
right: 10px;
display: flex;
place-content: center;
align-items: center;
font-size: 12px;
}
.option span {
color: white;
} }
@media (max-width: 720px) {
#container {
width: 90vw; </script>
height: 52.7vw;
}
}
</style>

File diff suppressed because one or more lines are too long

View File

@ -307,10 +307,24 @@
opacity: 0; opacity: 0;
} }
} }
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
</style> </style>
<script setup> <script setup>
import { getProductCountApi } from "@/api.js" import { getProductCountApi } from "@/api.js"
import { ref, reactive, defineProps } from "vue" import { ref, reactive, defineProps } from "vue"
import Remake from "@/components/Remake.vue"
const props = defineProps({ const props = defineProps({
code: Object, code: Object,

View File

@ -0,0 +1,147 @@
<template>
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
<div class="user center" id="user"></div>
</template>
<style lang="scss" scoped>
.img-cls {
width: 98%;
height: 45vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.user {
position: absolute;
width: 98%;
height: 40vh;
}
</style>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue"
const userChartOption = {
color: [
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 1, color: 'transparent' },
{ offset: 0, color: '#0081C3' },
])
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 1, color: 'transparent' },
{ offset: 0, color: '#3E54BF' },
]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{ offset: 1, color: 'transparent' },
{ offset: 0, color: '#4DBFD9' },
]),
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
// color: transparent;
legend: {
textStyle: {
color: "white"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',//线,
color: '#256980'
}
}
},
],
series: [
{
name: '新增用户数量',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320],
itemStyle: {
borderWidth: 1,
borderColor: "#384FB4",
},
backgroundStyle: {
color: ['red']
}
},
{
name: '访问用户数量',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: {
borderWidth: 1,
borderColor: "#3E54BF",
},
},
{
name: '累计用户数量',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
borderWidth: 1,
borderColor: "#4EC1DB",
},
},
]
}
const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag);
var myChart = echarts.init(chartDom);
myChart.setOption(option);
}
onMounted(() => {
document.getElementById("user").removeAttribute('_echarts_instance_');
initCharts('user', userChartOption)
})
</script>

View File

@ -0,0 +1,140 @@
<template>
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
<div class="order-data">
<div class="tit">
<div style="display: flex;align-items: center;">
<div class="gradient-circle">
</div>
日订单数据
</div>
<div style="display: flex;align-items: center;">
<div class="gradient-circle">
</div>
日订单数据
</div>
</div>
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
<div style="width: 100%;height: 50%;" id="orderData2"></div>
</div>
</template>
<style lang="scss" scoped>
.img-cls {
width: 98%;
height: 45vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.order-data {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-right: 1vw;
position: relative;
.tit {
position: absolute;
color: white;
// background-color: #fff;
top: 6vh;
width: 100%;
font-size: 10px;
display: flex;
justify-content: space-around;
.gradient-circle {
width: 10px;
height: 10px;
background: radial-gradient(at top left, transparent, #029BE9);
border-radius: 50%;
}
}
}
</style>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue"
const orderData = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: {
show: true,
lineStyle: {
type: 'dashed',//线,
color: '#256980'
}
}
},
yAxis: {
type: 'category',
data: ['当日订单数', '当月订单数'],
},
series: [
{
barWidth: 15,
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
data: [120, 200],
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: '#0298E5' },
{ offset: 0, color: 'transparent' },
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: '#4358C8' },
{ offset: 0, color: 'transparent' },
])];
return colorList[params.dataIndex]
},
borderColor: ['blue']
},
borderWidth: 2,
borderColor: "red",
},
}
]
}
//
const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag);
var myChart = echarts.init(chartDom);
myChart.setOption(option);
}
onMounted(() => {
document.getElementById("orderData").removeAttribute('_echarts_instance_');
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
initCharts('orderData', orderData)
initCharts('orderData2', orderData)
})
</script>

View File

@ -1 +0,0 @@
export const VERSION = '#VERSION#'

View File

@ -2,11 +2,20 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import dataV from '@jiaminghi/data-view' import dataV from '@jiaminghi/data-view'
import router from "./router"; import router from "./router";
import ElementPlus from 'element-plus'
import {
createPinia
} from 'pinia'
import 'element-plus/dist/index.css'
// import '@/components/townDetail/test.js' // import '@/components/townDetail/test.js'
import 'amfe-flexible' import 'amfe-flexible'
const pinia = createPinia()
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.use(dataV) app.use(dataV)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app') app.mount('#app')

View File

@ -3,41 +3,58 @@ import { createRouter, createWebHistory } from 'vue-router'
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'index', name: 'home',
component: () => import('@/view/index.vue'), component: () => import('@/view/home.vue'),
redirect: "/index",
children: [
{
path: '/index',
name: 'index',
component: () => import('@/view/index.vue'),
},
{
path: '/townDetail',
name: 'townDetail',
component: () => import('@/view/townDetail.vue'),
},
{
path: '/commodity',
name: 'commodity',
component: () => import('@/view/commodity.vue'),
},
{
path: '/Businesses',
name: 'commBusinessesodity',
component: () => import('@/view/Businesses.vue'),
},
{
path: '/storeLogin',
name: 'storeLogin',
component: () => import('@/view/storeLogin.vue'),
},
{
path: '/order',
name: 'order',
component: () => import('@/view/order.vue'),
},
{
path: '/finance',
name: 'finance',
component: () => import('@/view/finance.vue'),
},
]
}, },
{ {
path: '/townDetail', path: '/login',
name: 'townDetail', name: 'login',
component: () => import('@/view/townDetail.vue'), component: () => import('@/view/login.vue'),
},
{
path: '/commodity',
name: 'commodity',
component: () => import('@/view/commodity.vue'),
},
{
path: '/Businesses',
name: 'commBusinessesodity',
component: () => import('@/view/Businesses.vue'),
},
{
path: '/storeLogin',
name: 'storeLogin',
component: () => import('@/view/storeLogin.vue'),
},
{
path: '/order',
name: 'order',
component: () => import('@/view/order.vue'),
},
{
path: '/finance',
name: 'finance',
component: () => import('@/view/finance.vue'),
}, },
] ]
const router = createRouter({ const router = createRouter({

19
src/store/index.js Normal file
View File

@ -0,0 +1,19 @@
import {
defineStore
} from 'pinia'
export const areaObj = defineStore('counter', {
state: () => ({
area: {
areaCode: 510524,
streetCode: 51052410
}
}),
getters: {},
actions: {
changeArea(obj) {
this.area = obj
}
}
})

View File

@ -4,8 +4,8 @@
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt=""> <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content"> <div class="content">
<div class="btns"> <div class="btns">
<div class="btn " :class="!status ? 'act-btn' : ''" @click="changeTable(0)">正常开启的商户</div> <div class="btn " :class="status ? 'act-btn' : ''" @click="changeTable(1)">正常开启的商户</div>
<div class="btn" :class="status ? 'act-btn' : ''" @click="changeTable(1)">已关闭的商户</div> <div class="btn" :class="!status ? 'act-btn' : ''" @click="changeTable(0)">已关闭的商户</div>
</div> </div>
<div class="table" v-if="configs.data.length"> <div class="table" v-if="configs.data.length">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" /> <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
@ -21,24 +21,24 @@
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import {merchant_listApi} from "@/api.js" import { merchant_listApi } from "@/api.js"
const route = useRouter() const route = useRouter()
let status =ref(0) let status = ref(0)
const changeTable=(num)=>{ const changeTable = (num) => {
configs.data.splice(0,configs.data.length) configs.data.splice(0, configs.data.length)
console.log(configs.data) console.log(configs.data)
status.value=num status.value = num
merchant_listApi( merchant_listApi(
{ {
areaCode: 510524, areaCode: 510524,
streetCode: 510524100, streetCode: 510524100,
status:status.value, status: status.value,
limit:50 limit: 50
} }
).then(res=>{ ).then(res => {
addConfigData(res.data.list) addConfigData(res.data.list)
}) })
@ -58,36 +58,36 @@ const hdClick = (e) => {
} }
const addConfigData = (data) => { const addConfigData = (data) => {
data.forEach((item,i)=>{ data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
configs.data.push( configs.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_id}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.mer_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.real_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark || '--'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>sd</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.margin}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status?'开启':'关闭'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status ? '开启' : '关闭'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#3D9EB5';cursor: pointer;>登录</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#3D9EB5';cursor: pointer;>登录</div>`,
] ]
) )
} else { } else {
configs.data.push( configs.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_id}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_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.real_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark || "--"}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</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.margin}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.status?'开启':'关闭'}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.status ? '开启' : '关闭'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
] ]
@ -96,10 +96,10 @@ const addConfigData = (data) => {
} }
}) })
}
}
const configs = reactive({ const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)", headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
@ -123,7 +123,7 @@ const configs = reactive({
] ]
}) })
onMounted(() => { onMounted(() => {
changeTable(0) changeTable(1)
}) })
</script> </script>

View File

@ -10,15 +10,16 @@
</div> </div>
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;" <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
v-if="!ShwostoreType"> v-if="!ShwostoreType">
<div @click="initProduct(6)" class="manageBtn " :class="{actmanageBtn:type==6}">出售中商品</div> <div @click="initProduct(item.type)" class="manageBtn " v-for="(item) in proFilterList"
<div @click="initProduct(1)" class="manageBtn" :class="{actmanageBtn:type==1}" >仓库中商品</div> :class="{ actmanageBtn: type == item.type }">{{ item.name }}</div>
<div @click="initProduct(2)" class="manageBtn" :class="{actmanageBtn:type==2}">待审核商品</div> <!-- <div @click="initProduct(1)" class="manageBtn" :class="{ actmanageBtn: type == 1 }">仓库中商品</div>
<div @click="initProduct(3)" class="manageBtn" :class="{actmanageBtn:type==3}">审核未通过商品</div> <div @click="initProduct(2)" class="manageBtn" :class="{ actmanageBtn: type == 2 }">待审核商品</div>
<div @click="initProduct(3)" class="manageBtn" :class="{ actmanageBtn: type == 3 }">审核未通过商品</div> -->
</div> </div>
<div class="table" v-if="ShwostoreType && configs.data.length"> <div class="table" v-if="ShwostoreType && configs.data.length">
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" /> <dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
</div> </div>
<div class="table" v-if="!ShwostoreType &&configs2.data.length"> <div class="table" v-if="!ShwostoreType && configs2.data.length">
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" /> <dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
</div> </div>
</div> </div>
@ -29,12 +30,13 @@
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { getProductCategoryListApi,getProductListApi } from "@/api.js" import { getProductCategoryListApi, getProductListApi, product_status_filterApi } from "@/api.js"
import { init } from "echarts"; import { areaObj } from "../store";
const areaStore = areaObj()
getProductCategoryListApi( getProductCategoryListApi(
{ {
areaCode: 510524, ...areaStore.area
streetCode: 510524100
} }
).then(res => { ).then(res => {
a(configs, res.data) a(configs, res.data)
@ -42,27 +44,34 @@ getProductCategoryListApi(
let type=ref(6) let type = ref(1)
const initProduct=(num)=>{ const initProduct = (num) => {
configs2.data.splice(0, configs2.data.length)
type.value = num
getProductListApi({
...areaStore.area,
limit: 50,
type: type.value
}).then(res => {
console.log(res.data.list)
configs2.data.splice(0,configs2.data.length) a(configs2, res.data.list, true)
type.value=num
getProductListApi( {
areaCode: 510524,
streetCode: 510524100,
limit:50,
type:type.value
}).then(res=>{
a(configs2, res.data.list,true)
}) })
} }
let proFilterList = reactive([])
product_status_filterApi({
...areaStore.area,
}).then(res => {
res.data.forEach(item => {
proFilterList.push(item)
})
})
const value = ref(2)
const tableClick = (e) => { const tableClick = (e) => {
if (e.ceil) { if (e.ceil) {
@ -88,31 +97,24 @@ const tableClick = (e) => {
const ShwostoreType = ref(true) const ShwostoreType = ref(true)
const hdClick = (b) => { const a = (aaa, data, flag) => {
console.log(b)
}
const a = (aaa, data,flag) => {
if (flag) { if (flag) {
console.log(455454)
data.forEach((item, i) => { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( aaa.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.product_id}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</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;' >
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'> <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_name}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_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.storeCategory?.cate_name || '--'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.price}</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;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.attrValue[0].sales}</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.attrValue[0].stock}</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.star}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.star}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
] ]
@ -120,17 +122,24 @@ const a = (aaa, data,flag) => {
} else { } else {
aaa.data.push( aaa.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.product_id}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</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;'>
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`, <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.store_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.storeCategory?.cate_name || '--'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.price}</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;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.attrValue[0].sales}</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.attrValue[0].stock}</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 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;'>排序</div>`, <el-button type="warning" disabled>Warning</el-button>
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.star}</div>`,
</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
] ]
) )
@ -139,6 +148,7 @@ const a = (aaa, data,flag) => {
} }
else { else {
data.forEach((item, i) => { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( aaa.data.push(
@ -222,9 +232,8 @@ const configs2 = reactive({
] ]
}) })
onMounted(() => { onMounted(() => {
initProduct(6) initProduct(1)
// a(configs2)
// a(configs)
}) })
</script> </script>

View File

@ -7,13 +7,14 @@
<div style="display: flex;"> <div style="display: flex;">
<div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div> <div class="btn" :class="headerIndex == 0 ? 'act-btn' : ''" @click="changeTable(0)">提现记录</div>
<div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div> <div class="btn" :class="headerIndex == 1 ? 'act-btn' : ''" @click="changeTable(1)">资金记录</div>
<div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2)">账单管理</div> <div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2, 1)">账单管理</div>
</div> </div>
<div style="margin-right: 0vw;"> <div style="margin-right: 0vw;">
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;" <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
v-if="headerIndex == 2"> v-if="headerIndex == 2">
<div class="manageBtn actmanageBtn ">日账单</div> <div class="manageBtn " :class="{ actmanageBtn: billType == 1 }" @click="changeBill(1)">日账单
<div class="manageBtn">月账单</div> </div>
<div class="manageBtn" :class="{ actmanageBtn: billType == 2 }" @click="changeBill(2)">月账单</div>
</div> </div>
</div> </div>
</div> </div>
@ -24,10 +25,11 @@
<div class="table" v-if="true"> <div class="table" v-if="true">
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick' <dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
style="width:95vw;height:100%" /> style="width:95vw;height:78vh" />
<dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" /> <dv-scroll-board :config="configs1" v-if="headerIndex == 1 && configs1.data.length"
<dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3' style="width:95vw;height:78vh" />
style="width:95vw;height:100%" /> <dv-scroll-board :config="configs2" v-if="headerIndex == 2 && configs2.data.length" @click='hdClick3'
style="width:95vw;height:68vh" />
</div> </div>
<Transition> <Transition>
@ -38,23 +40,24 @@
<div class="pop-content"> <div class="pop-content">
<div class="pop-content-head"> <div class="pop-content-head">
<span class="gradient-text">日账单 <span class="gradient-text">日账单
<span style="font-size: 10px;">2011.11-06</span> <span style="font-size: 10px;">{{ detailData.date }}</span>
</span> </span>
<span class="off" @click="showPop = false"> 关闭</span> <span class="off" @click="showPop = false"> 关闭</span>
</div> </div>
<div class="pop-li"> <div class="pop-li">
订单收入总金额 <span style="margin: 0 .5vw;"><span class="price">16.6</span></span> 订单收入总金额 <span style="margin: 0 .5vw;"><span class="price">{{ detailData.income.number
<span>2</span> }}</span></span>
<span>{{ detailData.income.count }}</span>
</div> </div>
<div style="display: flex;justify-content: space-between;" class="pop-li"> <div style="display: flex;justify-content: space-between;" class="pop-li">
<div> <div v-for="item in detailData.income.data">
订单支付 <span style="margin: 0 .5vw;"><span class="price" {{ item[0] }} <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
style="color: white;">16.6</span></span> item[1].slice(0, -1) }}</span></span>
<span>2</span> <span>{{ item[2] }}</span>
</div> </div>
<div> <!-- <div>
返回优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" 返回优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
style="color: white;">16.6</span></span> style="color: white;">16.6</span></span>
<span>2</span> <span>2</span>
@ -62,13 +65,16 @@
<div> <div>
返回会员优惠券补贴 <span><span class="price" style="color: white;">16.6</span></span> 返回会员优惠券补贴 <span><span class="price" style="color: white;">16.6</span></span>
<span>2</span> <span>2</span>
</div> </div> -->
</div> </div>
<div class="pop-li" style="margin-top: 3vh;"> <div class="pop-li" style="margin-top: 3vh;">
充值金额: <span style="margin: 0 2vw;"><span class="price">5000</span></span> <span>2</span> 充值金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.bill.number
}}</span></span> <span>{{
detailData.bill.count }}</span>
</div> </div>
<div class="pop-li" style="margin-top: 3vh;"> <div class="pop-li" style="margin-top: 3vh;">
支出总金额: <span style="margin: 0 2vw;"><span class="price">5000</span></span> <span>2</span> 支出总金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.expend.number
}}</span></span> <span>{{ detailData.expend.count }}</span>
</div> </div>
@ -76,19 +82,19 @@
<div style="display: flex;justify-content: space-between;" class="pop-li"> <div style="display: flex;justify-content: space-between;" class="pop-li">
<div> <div>
应付商户金额 <span style="margin: 0 .5vw;"><span class="price" 应付商户金额 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
style="color: white;">16.6</span></span> detailData.expend.data[0][1].slice(0, -1) }}</span></span>
<span>2</span> <span>{{ detailData.expend.data[0][2] }}</span>
</div> </div>
<div> <div>
佣金 <span style="margin: 0 .5vw;"><span class="price" 佣金 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
style="color: white;">16.6</span></span> detailData.expend.data[1][1].slice(0, -1) }}</span></span>
<span>2</span> <span>{{ detailData.expend.data[1][2] }}</span>
</div> </div>
<div> <div>
返回手续费 <span style="margin: 0 1vw;"><span class="price" 返回手续费 <span style="margin: 0 1vw;"><span class="price" style="color: white;">{{
style="color: white;">16.6</span></span> detailData.expend.data[2][1].slice(0, -1) }}</span></span>
<span>2</span> <span>{{ detailData.expend.data[2][2] }}</span>
</div> </div>
</div> </div>
@ -98,14 +104,14 @@
<div style="display: flex;justify-content: space-between;" class="pop-li"> <div style="display: flex;justify-content: space-between;" class="pop-li">
<div> <div>
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" 优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
style="color: white;">16.6</span></span> detailData.expend.data[3][1].slice(0, -1) }}</span></span>
<span>2</span> <span>{{ detailData.expend.data[3][2] }}</span>
</div> </div>
<div> <div>
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" 会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
style="color: white;">16.6</span></span> detailData.expend.data[4][1].slice(0, -1) }}</span></span>
<span>2</span> <span>{{ detailData.expend.data[4][2] }}</span>
</div> </div>
<div style="opacity: 0;"> <div style="opacity: 0;">
返回手续费 <span style="margin: 0 1vw;"><span class="price" 返回手续费 <span style="margin: 0 1vw;"><span class="price"
@ -114,7 +120,7 @@
</div> </div>
</div> </div>
<div class="pop-li" style="margin-top: 3vh;"> <div class="pop-li" style="margin-top: 3vh;">
平台手续费收入总金额: <span class="price">16.6 </span> 平台手续费收入总金额: <span class="price">{{ detailData.charge.number }} </span>
</div> </div>
</div> </div>
</div> </div>
@ -132,7 +138,13 @@
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import Bill from "@/components/Bill.vue" import Bill from "@/components/Bill.vue"
import { financial_record_titleApi, financial_recordApi, financial_record_detailApi, financial_record_detailApi2, bill_listApi, withdraw_listApi } from "@/api.js"
const billType = ref(1)
const changeBill = (num) => {
billType.value = num
changeTable(2, num)
}
const billList = reactive([ const billList = reactive([
{ {
@ -207,81 +219,67 @@ const billList = reactive([
}, },
]) ])
financial_record_titleApi(
{
areaCode: 510524,
streetCode: 510524100
}
).then(res => {
res.data.stat.forEach((item, i) => {
billList[i].num = item.count
})
})
const changeTable = (type, num) => {
if (type == 0) {
configs.data.splice(0, configs.data.length)
withdraw_listApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50,
}
).then(res => {
addDta(res.data.list)
})
}
if (type == 1) {
configs1.data.splice(0, configs1.data.length)
bill_listApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50,
}
).then(res => {
addDta(res.data.list)
})
}
if (type == 2) {
configs2.data.splice(0, configs2.data.length)
financial_recordApi({
areaCode: 510524,
streetCode: 510524100,
limit: 50,
type: num
}).then(res => {
billData = res.data.list
addDta(res.data.list)
})
}
const route = useRouter()
const ShwostoreType = ref(false)
const changeTable = (type) => {
headerIndex.value = type headerIndex.value = type
addConfigHead() addConfigHead()
a(configList[headerIndex.value], congigData[headerIndex.value]) // a(configList[headerIndex.value], congigData[headerIndex.value])
} }
const congigData = reactive(
[
{
d: [`<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;' >排sd序</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;'>排序</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;'>排序</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,],
q: [`<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;'>排sd序</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;'>排序</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;'>排序</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,]
},
{
d: [`<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;' >排sd序</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
],
q: [`<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;'>排sd序</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
]
},
{
d: [`<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;' >排sd序</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
],
q: [`<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;'>排sd序</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;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
]
}
]
)
const hdClick = (e) => { const hdClick = (e) => {
if (e.columnIndex == 10) { if (e.columnIndex == 10) {
// route.push('/storeLogin') // route.push('/storeLogin')
@ -291,21 +289,113 @@ const hdClick = (e) => {
} }
const addDta = (data) => {
const a = (aaa, data) => { data.reverse().forEach((item, i) => {
for (let i = 0; i < 100; i++) { if (headerIndex.value == 0) {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push(data.d) configs1.data.push(
} else {
aaa.data.push(data.q) [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</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.number}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
],
)
} else {
configs1.data.push(
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
]
)
}
} }
}
if (headerIndex.value == 1) {
if (i % 2 == 0) {
configs1.data.push(
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.uid}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.nickname}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.title}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
],
)
} else {
configs1.data.push(
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.nickname}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
]
)
}
}
if (headerIndex.value == 2) {
if (i % 2 == 0) {
configs2.data.push(
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${i + 1}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.time}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.income}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.expend}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.charge}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
],
)
} else {
configs2.data.push(
[`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${i + 1}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.time}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.income}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.expend}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.charge}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
]
)
}
}
})
} }
const configs = reactive({ const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)", headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '', oddRowBGC: '',
evenRowBGC: "", evenRowBGC: "",
rowNum: 20, rowNum: 20,
columnWidth: [],
header: [ header: [
], ],
data: [ data: [
@ -355,10 +445,40 @@ const addConfigHead = () => {
} }
let billData = []
// //
const showPop = ref(false) const showPop = ref(false)
const detailData = reactive({})
const hdClick3 = (e) => { const hdClick3 = (e) => {
if (e.columnIndex == 5) { if (e.columnIndex == 5) {
if (billType.value == 1) {
financial_record_detailApi(
{ areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
).then(res => {
for (let key in res.data) {
detailData[key] = res.data[key]
}
})
}
if (billType.value == 2) {
financial_record_detailApi2(
{ areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
).then(res => {
for (let key in res.data) {
detailData[key] = res.data[key]
}
})
}
showPop.value = true showPop.value = true
} }
@ -367,8 +487,15 @@ const hdClick3 = (e) => {
onMounted(() => { onMounted(() => {
a(configs, congigData[headerIndex.value]) changeTable(0)
addConfigHead() addConfigHead()
financial_recordApi({
areaCode: 510524,
streetCode: 510524100,
limit: 50
}).then(res => {
addDta(res.data.list)
})
}) })
</script> </script>
@ -439,7 +566,6 @@ onMounted(() => {
.table { .table {
width: 100%; width: 100%;
height: 60vh;
margin-top: 2vh; margin-top: 2vh;
} }
} }

13
src/view/home.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<Header></Header>
<router-view></router-view>
</template>
<script setup>
import Header from "@/components/Header.vue"
</script>

View File

@ -27,8 +27,6 @@
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import * as echarts from 'echarts';
import option from "./option"
import { ref, reactive } from "vue" import { ref, reactive } from "vue"
import topLeft from "@/components/index/topLeft.vue" import topLeft from "@/components/index/topLeft.vue"
import topCenter from "@/components/index/topCenter.vue" import topCenter from "@/components/index/topCenter.vue"
@ -37,28 +35,19 @@ import bottomLeft from "@/components/index/bottomLeft.vue"
import bottomCenter from "@/components/index/bottomCenter.vue" import bottomCenter from "@/components/index/bottomCenter.vue"
import bottomRight from "@/components/index/bottomRight.vue" import bottomRight from "@/components/index/bottomRight.vue"
import { areaObj } from '@/store/index.js'
const areaStore = areaObj()
const areaCodes = reactive({ const areaCodes = reactive({
areaCode: 510524, ...areaStore.area
streetCode: 510524100
}) })
const loading = ref(false) const loading = ref(false)
//
// const initCharts = (tag, option) => {
// var chartDom = document.getElementById(tag);
// var myChart = echarts.init(chartDom);
// myChart.setOption(option);
// }
onMounted(() => {
// console.log(option.transactionUsers)
// initCharts('transactionUsers', option.transactionUsers)
})
</script> </script>
<style lang="scss"> <style lang="scss">
@keyframes jump { @keyframes jump {

158
src/view/login.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<div class="login-box">
<div class="form">
<div class="content">
<div style="position: relative;margin-bottom: 3VH;">
<img src="/static/login/ZH.png" alt="" class="accont-icon">
<input class="ipt" type="text" placeholder="请输入账号" v-model="account">
<div style="color: red;" v-show="isAccount">请输入账号</div>
</div>
<div style="position: relative;margin-bottom: 3VH;">
<img src="/static/login/MM.png" alt="" class="accont-icon" style="">
<input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
<div style="color: red;" v-show="isPassword">请输入密码</div>
<img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
<img src="/static/login/BKH.png" v-else @click="show = true" class="show">
</div>
<div style="background-color: red;position: relative;">
<img src="/static/login/DL.png" class="btn" alt="" @click="submit">
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.login-box {
width: 100vw;
height: 100vh;
background-image: url('/static/login/bg.png');
background-size: 100% 100%;
overflow: hidden;
}
.form {
width: 35vw;
height: 45vh;
position: absolute;
top: 25vh;
right: 10vw;
box-sizing: border-box;
background: url("/static/login/DLBG.png");
background-size: 100% 100%;
.content {
position: absolute;
top: 13vh;
// background-color: red;
left: 10vw;
.ipt {
border: 1px solid #194FA3;
padding: 1vh 2vw;
background-color: #123266;
width: 13VW;
outline: none;
-webkit-user-select: auto;
caret-color: #fff;
color: white;
}
input[type="password"]::-ms-reveal {
display: none
}
.btn {
width: 7vw;
cursor: pointer;
// margin: 0 auto;
position: absolute;
background-color: #fff;
left: 50%;
transform: translateX(-50%);
}
.accont-icon {
width: 0.8vw;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: .5vw;
}
.show {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: .5vw;
width: 1vw;
cursor: pointer;
}
}
}
</style>
<script setup>
import { ref, reactive } from "vue"
import { useRouter } from "vue-router";
import { loginApi } from "@/api.js"
const router = useRouter()
const show = ref(false)
const account = ref('')
const password = ref('')
const isAccount = ref(false)
const isPassword = ref(false)
const submit = () => {
if (!account.value) {
isAccount.value = true;
return
}
else isAccount.value = false;
if (!password.value) {
isPassword.value = true;
return
}
else isPassword.value = false;
loginApi({
account: account.value,
password: password.value
}).then(res => {
console.log(res)
localStorage.setItem("TRADE_USER", res.token)
// if (res.role_type == 0) {
// router.replace('/')
// }
// else if (res.role_type == 1) {
// router.replace('/detail')
// }
})
return
// alert(isAccount.value)
}
</script>

View File

@ -4,6 +4,7 @@
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt=""> <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content"> <div class="content">
<div class="btns"> <div class="btns">
<div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div> <div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
<div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div> <div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
<div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div> <div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
@ -13,20 +14,20 @@
<div style="color: white;display: flex;"> <div style="color: white;display: flex;">
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill> <Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
<div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]"> <!-- <div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
<Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill> <Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill>
</div> </div> -->
</div> </div>
</div> </div>
<div class="table" v-if="configs.data.length"> <div class="table" v-if="configs.data.length">
<dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick' <dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
style="width:95vw;height:100%" /> style="width:95vw;height:70vh" />
<dv-scroll-board :config="configs2" v-if="btnFlag[1] && configs2.data.length" @click='tableHdClick' <dv-scroll-board :config="configs2" v-if="btnFlag[1] && configs2.data.length" @click='tableHdClick'
style="width:95vw;height:100%" /> style="width:95vw;height:77vh" />
<dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick' <dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
style="width:95vw;height:100%" /> style="width:95vw;height:89vh" />
</div> </div>
</div> </div>
@ -39,7 +40,9 @@
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import Bill from "@/components/Bill.vue" import Bill from "@/components/Bill.vue"
import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi,take_order_count_titleApi } from "@/api.js" import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi, take_order_count_titleApi } from "@/api.js"
const value = ref(1)
const billList = reactive([ const billList = reactive([
{ {
@ -78,6 +81,28 @@ const billList1 = reactive([
]) ])
const orderStatus = (status) => {
if (status == 0) return "待发货"
if (status == 1) return "待收货"
if (status == 2) return "待评价"
if (status == 3) return "已完成"
if (status == 9) return "拼团中"
if (status == 10) return "待付尾款"
if (status == 11) return "尾款超时未付"
if (status == -1) return "已退款"
}
const payType = (type) => {
if (type == 0) return "余额支付"
if (type == 1) return "微信支付"
if (type == 2) return "小程序支付"
if (type == 3) return "h5支付"
if (type == 4) return "支付宝支付"
if (type == 5) return "支付宝扫码支付"
if (type == 6) return "微信扫码支付"
if (type == 8) return "信用购-先货后款"
}
const btnFlag = reactive([true, false, false]) const btnFlag = reactive([true, false, false])
@ -145,7 +170,7 @@ const hdClick = (i) => {
streetCode: 510524100, streetCode: 510524100,
limit: 50 limit: 50
} }
).then(res=>{ ).then(res => {
res.data.forEach((item, index) => { res.data.forEach((item, index) => {
billList[index].num = item.count billList[index].num = item.count
@ -192,7 +217,6 @@ const tableHdClick = (e) => {
const addConfigData = (data) => { const addConfigData = (data) => {
data.forEach((item, i) => { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
configs.data.push( configs.data.push(
[ [
@ -215,7 +239,7 @@ const addConfigData = (data) => {
<div <div
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;"> style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
<span>总单号</span> <span>总单号</span>
<span>35356565656565</span> <span>${item.groupOrder.group_order_sn}</span>
</div> </div>
<div <div
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;"> style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
@ -226,7 +250,7 @@ const addConfigData = (data) => {
<div <div
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;"> style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
<span>商品总价</span> <span>商品总价</span>
<span>2023.11.214</span> <span>${item.total_price}</span>
</div> </div>
<div <div
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;"> style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
@ -238,27 +262,27 @@ const addConfigData = (data) => {
<span>用户备注</span> <span>用户备注</span>
<span>2023.11.214</span> <span>2023.11.214</span>
</div> </div>
<div <div
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;"> style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
<span>商家备注</span> <span>商家备注</span>
<span>2023.11.214</span> <span>2023.11.214</span>
</div> </div>
</div> </div>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</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;'>排序</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;'>排序</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.merchant.mer_name}</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'>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
<span>${item.orderProduct[0].cart_info.product.unit_name} </span>
</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;'>${item.cost}</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;'>${orderStatus(item.status)}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status}</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;'>排序</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;'>${item.pay_type}</div>`,
] ]
) )
} else { } else {
@ -275,7 +299,7 @@ const addConfigData = (data) => {
top:50%; top:50%;
left:0 left:0
'> '>
</div> 1111</div> </div> ${item.order_sn}</div>
<div class='card' id='card${i}' <div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;"> style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
@ -318,15 +342,23 @@ const addConfigData = (data) => {
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</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;'>排序</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;'>排序</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;'>排序</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;'>排序</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.merchant.mer_name}</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'>
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
<span>${item.orderProduct[0].cart_info.product.unit_name} </span>
</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;'>${item.user_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${payType(item.pay_type)}</div>`,
] ]
@ -407,12 +439,20 @@ const addConfigData2 = (data) => {
`<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;'>排序</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.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;'>排序</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' '>
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
<span>
${item.refundProduct[0].product.cart_info.product.store_name}
</span>
<span>
${item.refundProduct[0].product.cart_info.product.unit_name}
</span>
</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;'>
<sapn> ${item.status} </span> <sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span> <sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span> <sapn>状态变更时间 ${item.status_time} </span>
@ -481,11 +521,23 @@ const addConfigData2 = (data) => {
`<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;'>排序</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;'>排序</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.refund_price}</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;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;'> <sapn> ${item.status} </span> <img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
<span>
${item.refundProduct[0].product.cart_info.product.store_name}
</span>
<span>
${item.refundProduct[0].product.cart_info.product.unit_name}
</span>
</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
<sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span> <sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span></div>`, <sapn>状态变更时间 ${item.status_time} </span>
</div>`,
] ]
@ -569,13 +621,9 @@ const addConfigData3 = (data) => {
`<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;'>排序</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 style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
<sapn> ${item.status} </span> <sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span> <sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span> <sapn>状态变更时间 ${item.status_tiem} </span>
</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;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
@ -596,8 +644,7 @@ const addConfigData3 = (data) => {
top:50%; top:50%;
left:0 left:0
'> '>
</div> ${item.refund_order_sn}</div> </div> ${item.order_sn}</div>
<div class='card' id='card${i}' <div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;"> style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
@ -639,7 +686,7 @@ const addConfigData3 = (data) => {
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</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;'>排序</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;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
@ -672,6 +719,8 @@ const configs = reactive({
oddRowBGC: '', oddRowBGC: '',
evenRowBGC: "", evenRowBGC: "",
rowNum: 20, rowNum: 20,
columnWidth: [250, 170, 170, 170, 170, 500, 170, 170, 170, 200],
header: [ header: [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
@ -681,7 +730,7 @@ const configs = reactive({
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单状态</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>支付类型</div>`,
], ],
data: [ data: [
@ -689,6 +738,8 @@ const configs = reactive({
}) })
const configs2 = reactive({ const configs2 = reactive({
columnWidth: [300, 150, 150, 150, 150, 150, 600, 600],
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)", headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '', oddRowBGC: '',
evenRowBGC: "", evenRowBGC: "",
@ -710,6 +761,8 @@ const configs3 = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)", headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '', oddRowBGC: '',
evenRowBGC: "", evenRowBGC: "",
columnWidth: [300, 150, 150, 150, 150, 150, 600, 150, 150, 150],
rowNum: 20, rowNum: 20,
header: [ header: [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
@ -757,6 +810,7 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 2vw; padding: 2vw;
// box-sizing: border-box;
} }
} }
@ -790,7 +844,6 @@ onMounted(() => {
.table { .table {
width: 100%; width: 100%;
height: 70vh;
margin-top: 3vh; margin-top: 3vh;
} }
} }
@ -803,6 +856,7 @@ onMounted(() => {
:deep(.header-item) { :deep(.header-item) {
padding: 0 !important; padding: 0 !important;
// justify-content: space-between;
} }

View File

@ -1,145 +1,21 @@
<template> <template>
<div class="top box"> <div class="top box">
<div class="l"> <div class="l">
<img class="img-cls" src="/static/town/YHSJ.png" alt=""> <topLeft></topLeft>
<div class="user center" id="user"></div>
</div> </div>
<div class="c" id=""> <div class="c" id="">
<topCenter :code="route.query.code"></topCenter> <topCenter :code="route.query.code"></topCenter>
<!-- <div class="product-list">
<div class="product" style="">
<div class="bg">
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div>
<div class="bubble1"></div>
<div class="bubble2"></div>
</div>
<div class="product-content">
<div style="margin-top: 14vh;position: relative;"> </div>
<div style="font-size: 10px;">NUMBER OF COMMODITIES</div>
<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;">1234</span> </div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
昨日数据 0.0
</div>
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
周环比: 10%
</div>
</div>
</div>
</div>
<div class="product" style="">
<div class="bg">
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div>
<div class="bubble1"></div>
<div class="bubble2"></div>
</div>
<div class="product-content">
<div style="margin-top: 14vh;position: relative;"> </div>
<div style="font-size: 10px;">NUMBER OF NEW SHOPS</div>
<img src="/static/index/JRC.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;">1234</span> </div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
昨日数据 0.0
</div>
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
周环比: 10%
</div>
</div>
</div>
</div>
<div class="product" style="">
<div class="bg">
<img src="/static/index/SYBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div>
<div class="bubble1"></div>
<div class="bubble2"></div>
</div>
<div class="product-content">
<div style="margin-top: 14vh;position: relative;"> </div>
<div style="font-size: 10px;">ACCUMULATED NUMBERS OF SHOPS</div>
<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;">1234</span> </div>
<div style="margin-top: 1.5vh;display: flex;justify-content: space-around;">
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZRSJ.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
昨日数据 0.0
</div>
<div style="font-size: 9px;position: relative;display: flex;align-items: center;">
<img src="/static/index/ZHB.png" style="width: 1vw;height: 1vw;" alt="">
&nbsp;
周环比: 10%
</div>
</div>
</div>
</div>
</div>
<div class="Views">
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="view-content">
<div>昨日数据3333</div>
<div style="display: flex;align-items: center;">当前浏览量
<Remake :num="517854" /> 人正在浏览
</div>
<div>周环比32%</div>
</div>
</div> -->
</div> </div>
<div class="r"> <div class="r">
<topRight></topRight>
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
<div class="order-data">
<div class="tit">
<div style="display: flex;align-items: center;">
<div class="gradient-circle">
</div>
日订单数据
</div>
<div style="display: flex;align-items: center;">
<div class="gradient-circle">
</div>
日订单数据
</div>
</div>
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
<div style="width: 100%;height: 50%;" id="orderData2"></div>
</div>
</div> </div>
</div> </div>
<div class="bottom box"> <div class="bottom box">
<div class="l"> <div class="l">
<div class="user center" id="orderAmount"></div>
<img class="img-cls" src="/static/town/DRDDJE.png" alt=""> <bottomleft></bottomleft>
<!-- <bottomleft></bottomleft> -->
</div> </div>
<div class="c"> <div class="c">
<img class="img-cls" src="/static/town/CJYH.png" alt=""> <img class="img-cls" src="/static/town/CJYH.png" alt="">
@ -155,46 +31,13 @@
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import option from "./option" import option from "./option"
import { ref, reactive } from "vue"
import Remake from "@/components/Remake.vue"
import bottomRight from "@/components/townDetail/bottomRight.vue" import bottomRight from "@/components/townDetail/bottomRight.vue"
import bottomleft from "@/components/townDetail/bottomleft.vue" import bottomleft from "@/components/townDetail/bottomleft.vue"
import { getProductCountApi } from "@/api.js"
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import topCenter from "@/components/townDetail/topCenter.vue" import topCenter from "@/components/townDetail/topCenter.vue"
import topLeft from "@/components/townDetail/topLeft.vue"
import topRight from "@/components/townDetail/topRight.vue"
const route = useRoute() const route = useRoute()
const addFn = (data) => {
let list = []
data.forEach((item, i) => {
list.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="${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=' 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.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="">
</div>`,
],
)
})
return list
}
// //
const initCharts = (tag, option) => { const initCharts = (tag, option) => {
var chartDom = document.getElementById(tag); var chartDom = document.getElementById(tag);
@ -203,16 +46,10 @@ const initCharts = (tag, option) => {
} }
onMounted(() => { onMounted(() => {
document.getElementById("orderData").removeAttribute('_echarts_instance_');
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
document.getElementById("user").removeAttribute('_echarts_instance_');
document.getElementById("orderAmount").removeAttribute('_echarts_instance_');
document.getElementById("transactionUsers").removeAttribute('_echarts_instance_'); document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
initCharts('user', option.userChartOption)
initCharts('orderAmount', option.orderAmount)
initCharts('transactionUsers', option.transactionUsersTown) initCharts('transactionUsers', option.transactionUsersTown)
initCharts('orderData', option.orderData)
initCharts('orderData2', option.orderData)
}) })
@ -220,20 +57,6 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.box { .box {
width: 100vw; width: 100vw;
height: 47vh; height: 47vh;
@ -253,14 +76,9 @@ onMounted(() => {
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
padding-top: 6vh;
.user {
position: absolute;
width: 98%;
height: 35vh;
}
} }
@ -335,31 +153,7 @@ onMounted(() => {
position: relative; position: relative;
// background-color: RED; // background-color: RED;
.order-data {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-right: 1vw;
position: relative;
.tit {
position: absolute;
color: white;
// background-color: #fff;
top: 6vh;
width: 100%;
font-size: 10px;
display: flex;
justify-content: space-around;
.gradient-circle {
width: 10px;
height: 10px;
background: radial-gradient(at top left, transparent, #029BE9);
border-radius: 50%;
}
}
}
} }
} }

BIN
static/login/BKH.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/login/DL.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/login/DLBG.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 KiB

BIN
static/login/KJ.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
static/login/MM.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/login/ZH.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/login/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB