shit
This commit is contained in:
parent
e951ed48ac
commit
4d1a70932a
File diff suppressed because it is too large
Load Diff
|
|
@ -14,12 +14,15 @@
|
|||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"element-plus": "^2.4.3",
|
||||
"pinia": "^2.1.7",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.3.8",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
// @ts-ignore
|
||||
import Header from "@/components/Header.vue"
|
||||
const zz3 = 565
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<!-- <div>sadas</div> -->
|
||||
<div class="main-box">
|
||||
<Header></Header>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
57
src/api.js
57
src/api.js
|
|
@ -1,5 +1,6 @@
|
|||
|
||||
import axios from "axios";
|
||||
import { ElMessage } from 'element-plus'
|
||||
// 创建axios 实例
|
||||
const instacne = axios.create({
|
||||
baseURL: "https://crmeb-test.shop.lihaink.cn/",
|
||||
|
|
@ -21,6 +22,16 @@ instacne.interceptors.request.use(
|
|||
// 响应拦截
|
||||
instacne.interceptors.response.use(
|
||||
(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;
|
||||
},
|
||||
|
|
@ -92,6 +103,48 @@ export function take_order_listApi(params) {
|
|||
export function take_order_count_titleApi(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"
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ import MapLoader from "@/view/utils/position.js"
|
|||
|
||||
|
||||
|
||||
|
||||
let area = ref('')
|
||||
|
||||
const u = (name) => {
|
||||
|
|
@ -154,7 +155,8 @@ const offAreaList = (name) => {
|
|||
}
|
||||
const out = () => {
|
||||
//@ts-ignore
|
||||
window.open("about:blank", "_top").close()
|
||||
// window.open("about:blank", "_top").close()
|
||||
router.replace('/login')
|
||||
}
|
||||
const updateTime = () => {
|
||||
var date = new Date();
|
||||
|
|
|
|||
|
|
@ -4,44 +4,80 @@
|
|||
<div style="height:5vh;"></div>
|
||||
<div class="towns">
|
||||
<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>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, defineProps } from "vue"
|
||||
import * as echarts from 'echarts';
|
||||
import { getUserTradeCountApi } from "@/api.js"
|
||||
import { notEndWith } from "postcss-pxtorem/lib/filter-prop-list";
|
||||
|
||||
const props = defineProps({
|
||||
areaCodes: Object,
|
||||
})
|
||||
|
||||
|
||||
const hdClick = (code) => {
|
||||
props.areaCodes.streetCode = code
|
||||
init()
|
||||
}
|
||||
|
||||
const streetList = reactive([])
|
||||
const area = reactive({
|
||||
"area_code": "",
|
||||
"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))
|
||||
option.series[0].data.push(item.visitUser)
|
||||
const init = () => {
|
||||
|
||||
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) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
|
|
@ -49,9 +85,9 @@ const initCharts = (tag, option) => {
|
|||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
const showChart = ref(false)
|
||||
|
||||
|
||||
let option = {
|
||||
const option = reactive({
|
||||
color: ['#015989', '#583936', '#416979'],
|
||||
title: {
|
||||
text: ''
|
||||
|
|
@ -76,14 +112,8 @@ let option = {
|
|||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
// data: ['访客人数','下单人数','支付人数']
|
||||
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
|
|
@ -201,9 +231,11 @@ let option = {
|
|||
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
|
|
@ -213,6 +245,7 @@ let option = {
|
|||
box-sizing: border-box;
|
||||
padding: 1vh 1vw;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
.town-li {
|
||||
margin-top: 10px;
|
||||
|
|
@ -224,6 +257,7 @@ let option = {
|
|||
// margin-left: 2vw;
|
||||
justify-content: fl;
|
||||
margin-left: 2vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.act {
|
||||
|
|
|
|||
|
|
@ -1,476 +1,157 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<div class="container-shell">
|
||||
<div class="container-shell-title">jessibuca demo player <span class="tag-version" v-if="version">({{
|
||||
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>
|
||||
<!-- <div style="background-color: red;position: relative;z-index: 9999; height: 10vh; cursor: pointer;">sadsad</div> -->
|
||||
<div class="users center" id="orderAmount"></div>
|
||||
<img class="img-cls" src="/static/town/DRDDJE.png" alt="">
|
||||
</template>
|
||||
<script>
|
||||
import { VERSION } from "./version";
|
||||
|
||||
function isMobile() {
|
||||
return (/iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase()));
|
||||
<style lang="scss" scoped>
|
||||
.img-cls {
|
||||
width: 98%;
|
||||
height: 45vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
function isPad() {
|
||||
return (/ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase()));
|
||||
.users {
|
||||
margin-top: 4.5vh;
|
||||
position: absolute;
|
||||
width: 98%;
|
||||
height: 35vh;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "DemoPlayer",
|
||||
jessibuca: null,
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
version: '',
|
||||
wasm: false,
|
||||
playing: false,
|
||||
quieting: true,
|
||||
loaded: false, // mute
|
||||
showOperateBtns: true,
|
||||
showBandwidth: true,
|
||||
hotKey: true,
|
||||
err: "",
|
||||
speed: 0,
|
||||
performance: "",
|
||||
fps: '',
|
||||
volume: 1,
|
||||
rotate: 0,
|
||||
useWCS: false,
|
||||
useMSE: false,
|
||||
useWasm: true,
|
||||
useOffscreen: false,
|
||||
recording: false,
|
||||
isDebug: true,
|
||||
recordType: 'webm',
|
||||
scale: 0,
|
||||
vConsole: null,
|
||||
controlAutoHide: true,
|
||||
isFlv: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if ((isMobile() || isPad()) && window.VConsole) {
|
||||
this.vConsole = new window.VConsole();
|
||||
.center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
import { street_currday_order_countApi } from "@/api.js"
|
||||
import { ref, reactive } from "vue"
|
||||
import { areaObj } from '../../store';
|
||||
const areaStore = areaObj()
|
||||
|
||||
street_currday_order_countApi(
|
||||
|
||||
{ ...areaStore.area }
|
||||
|
||||
).then(res => {
|
||||
|
||||
res.data.forEach(item => {
|
||||
orderAmount.series[0].data.push(item.yesterdayAmount)
|
||||
orderAmount.series[1].data.push(item.todayAmount)
|
||||
})
|
||||
|
||||
initCharts('orderAmount', orderAmount)
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const orderAmount = reactive({
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{ 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() {
|
||||
if (this.$options && this.$options.jessibuca) {
|
||||
this.$options.jessibuca.destroy();
|
||||
// color: transparent;
|
||||
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "white"
|
||||
}
|
||||
this.vConsole.destroy();
|
||||
|
||||
},
|
||||
methods: {
|
||||
create(options) {
|
||||
options = options || {};
|
||||
const jessibuca = new window.Jessibuca(
|
||||
Object.assign(
|
||||
{
|
||||
container: this.$refs.container,
|
||||
// videoBuffer: Number(this.$refs.buffer.value), // 缓存时长
|
||||
isResize: false,
|
||||
useWCS: this.useWCS,
|
||||
useMSE: this.useMSE,
|
||||
wcsUseVideoRender: this.useWCS,
|
||||
text: "",
|
||||
// background: "bg.jpg",
|
||||
loadingText: "疯狂加载中...",
|
||||
// hasAudio:false,
|
||||
debug: this.isDebug,
|
||||
hotKey: true,
|
||||
// hasAudio:false,
|
||||
controlAutoHide: this.controlAutoHide,
|
||||
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 = "流畅";
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',//背景色为虚线,
|
||||
color: '#256980'
|
||||
}
|
||||
_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);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
const initCharts = (tag, option) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
var myChart = echarts.init(chartDom);
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</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 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 52.7vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -307,10 +307,24 @@
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { getProductCountApi } from "@/api.js"
|
||||
import { ref, reactive, defineProps } from "vue"
|
||||
import Remake from "@/components/Remake.vue"
|
||||
|
||||
const props = defineProps({
|
||||
code: Object,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1 +0,0 @@
|
|||
export const VERSION = '#VERSION#'
|
||||
11
src/main.js
11
src/main.js
|
|
@ -2,11 +2,20 @@ import { createApp } from 'vue'
|
|||
import App from './App.vue'
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
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 'amfe-flexible'
|
||||
|
||||
const pinia = createPinia()
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
app.use(dataV)
|
||||
app.use(pinia)
|
||||
app.use(ElementPlus)
|
||||
app.mount('#app')
|
||||
|
|
@ -3,41 +3,58 @@ import { createRouter, createWebHistory } from 'vue-router'
|
|||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component: () => import('@/view/index.vue'),
|
||||
name: 'home',
|
||||
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',
|
||||
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: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/view/login.vue'),
|
||||
},
|
||||
|
||||
|
||||
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -4,8 +4,8 @@
|
|||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="content">
|
||||
<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 class="table" v-if="configs.data.length">
|
||||
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
|
||||
|
|
@ -21,24 +21,24 @@
|
|||
// 102B3
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
import {merchant_listApi} from "@/api.js"
|
||||
import { merchant_listApi } from "@/api.js"
|
||||
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)
|
||||
status.value=num
|
||||
status.value = num
|
||||
merchant_listApi(
|
||||
{
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100,
|
||||
status:status.value,
|
||||
limit:50
|
||||
}
|
||||
).then(res=>{
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100,
|
||||
status: status.value,
|
||||
limit: 50
|
||||
}
|
||||
).then(res => {
|
||||
addConfigData(res.data.list)
|
||||
})
|
||||
|
||||
|
|
@ -58,36 +58,36 @@ const hdClick = (e) => {
|
|||
|
||||
}
|
||||
const addConfigData = (data) => {
|
||||
data.forEach((item,i)=>{
|
||||
data.forEach((item, i) => {
|
||||
if (i % 2 == 0) {
|
||||
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.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.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.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.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>`,
|
||||
]
|
||||
)
|
||||
} else {
|
||||
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.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.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.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.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>`,
|
||||
]
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ const addConfigData = (data) => {
|
|||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const configs = reactive({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
|
|
@ -123,7 +123,7 @@ const configs = reactive({
|
|||
]
|
||||
})
|
||||
onMounted(() => {
|
||||
changeTable(0)
|
||||
changeTable(1)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,15 +10,16 @@
|
|||
</div>
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||
v-if="!ShwostoreType">
|
||||
<div @click="initProduct(6)" class="manageBtn " :class="{actmanageBtn:type==6}">出售中商品</div>
|
||||
<div @click="initProduct(1)" class="manageBtn" :class="{actmanageBtn:type==1}" >仓库中商品</div>
|
||||
<div @click="initProduct(2)" class="manageBtn" :class="{actmanageBtn:type==2}">待审核商品</div>
|
||||
<div @click="initProduct(3)" class="manageBtn" :class="{actmanageBtn:type==3}">审核未通过商品</div>
|
||||
<div @click="initProduct(item.type)" class="manageBtn " v-for="(item) in proFilterList"
|
||||
:class="{ actmanageBtn: type == item.type }">{{ item.name }}</div>
|
||||
<!-- <div @click="initProduct(1)" class="manageBtn" :class="{ actmanageBtn: type == 1 }">仓库中商品</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 class="table" v-if="ShwostoreType && configs.data.length">
|
||||
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
||||
</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%" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -29,12 +30,13 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { getProductCategoryListApi,getProductListApi } from "@/api.js"
|
||||
import { init } from "echarts";
|
||||
import { getProductCategoryListApi, getProductListApi, product_status_filterApi } from "@/api.js"
|
||||
import { areaObj } from "../store";
|
||||
const areaStore = areaObj()
|
||||
|
||||
getProductCategoryListApi(
|
||||
{
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100
|
||||
...areaStore.area
|
||||
}
|
||||
).then(res => {
|
||||
a(configs, res.data)
|
||||
|
|
@ -42,27 +44,34 @@ getProductCategoryListApi(
|
|||
|
||||
|
||||
|
||||
let type=ref(6)
|
||||
const initProduct=(num)=>{
|
||||
let type = ref(1)
|
||||
const initProduct = (num) => {
|
||||
configs2.data.splice(0, configs2.data.length)
|
||||
type.value = num
|
||||
getProductListApi({
|
||||
...areaStore.area,
|
||||
limit: 50,
|
||||
type: type.value
|
||||
}).then(res => {
|
||||
|
||||
|
||||
configs2.data.splice(0,configs2.data.length)
|
||||
type.value=num
|
||||
getProductListApi( {
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100,
|
||||
limit:50,
|
||||
type:type.value
|
||||
}).then(res=>{
|
||||
a(configs2, res.data.list,true)
|
||||
console.log(res.data.list)
|
||||
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) => {
|
||||
if (e.ceil) {
|
||||
|
|
@ -88,31 +97,24 @@ const tableClick = (e) => {
|
|||
|
||||
const ShwostoreType = ref(true)
|
||||
|
||||
const hdClick = (b) => {
|
||||
console.log(b)
|
||||
}
|
||||
|
||||
const a = (aaa, data,flag) => {
|
||||
const a = (aaa, data, flag) => {
|
||||
if (flag) {
|
||||
console.log(455454)
|
||||
|
||||
data.forEach((item, i) => {
|
||||
if (i % 2 == 0) {
|
||||
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;' >
|
||||
<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: #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;'>排序</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;'>${item.attrValue[0].stock}</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>`,
|
||||
]
|
||||
|
|
@ -120,17 +122,24 @@ const a = (aaa, data,flag) => {
|
|||
} else {
|
||||
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;'>
|
||||
<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;'>排序</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.star}</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;'>${item.attrValue[0].stock}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
||||
|
||||
|
||||
<el-button type="warning" disabled>Warning</el-button>
|
||||
|
||||
|
||||
|
||||
</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 {
|
||||
|
||||
data.forEach((item, i) => {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(
|
||||
|
|
@ -222,9 +232,8 @@ const configs2 = reactive({
|
|||
]
|
||||
})
|
||||
onMounted(() => {
|
||||
initProduct(6)
|
||||
// a(configs2)
|
||||
// a(configs)
|
||||
initProduct(1)
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,14 @@
|
|||
<div style="display: flex;">
|
||||
<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 == 2 ? 'act-btn' : ''" @click="changeTable(2)">账单管理</div>
|
||||
<div class="btn" :class="headerIndex == 2 ? 'act-btn' : ''" @click="changeTable(2, 1)">账单管理</div>
|
||||
</div>
|
||||
<div style="margin-right: 0vw;">
|
||||
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
|
||||
v-if="headerIndex == 2">
|
||||
<div class="manageBtn actmanageBtn ">日账单</div>
|
||||
<div class="manageBtn">月账单</div>
|
||||
<div class="manageBtn " :class="{ actmanageBtn: billType == 1 }" @click="changeBill(1)">日账单
|
||||
</div>
|
||||
<div class="manageBtn" :class="{ actmanageBtn: billType == 2 }" @click="changeBill(2)">月账单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,10 +25,11 @@
|
|||
|
||||
<div class="table" v-if="true">
|
||||
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
|
||||
style="width:95vw;height:100%" />
|
||||
<dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" />
|
||||
<dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3'
|
||||
style="width:95vw;height:100%" />
|
||||
style="width:95vw;height:78vh" />
|
||||
<dv-scroll-board :config="configs1" v-if="headerIndex == 1 && configs1.data.length"
|
||||
style="width:95vw;height:78vh" />
|
||||
<dv-scroll-board :config="configs2" v-if="headerIndex == 2 && configs2.data.length" @click='hdClick3'
|
||||
style="width:95vw;height:68vh" />
|
||||
</div>
|
||||
|
||||
<Transition>
|
||||
|
|
@ -38,23 +40,24 @@
|
|||
<div class="pop-content">
|
||||
<div class="pop-content-head">
|
||||
<span class="gradient-text">日账单
|
||||
<span style="font-size: 10px;">2011.11-06</span>
|
||||
<span style="font-size: 10px;">{{ detailData.date }}</span>
|
||||
</span>
|
||||
<span class="off" @click="showPop = false"> 关闭</span>
|
||||
</div>
|
||||
|
||||
<div class="pop-li">
|
||||
订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">{{ detailData.income.number
|
||||
}}</span>元</span>
|
||||
<span>{{ detailData.income.count }}</span>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||
|
||||
<div>
|
||||
订单支付： <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
<div v-for="item in detailData.income.data">
|
||||
{{ item[0] }} <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||
item[1].slice(0, -1) }}</span>元</span>
|
||||
<span>{{ item[2] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div>
|
||||
返回优惠券补贴： <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
|
|
@ -62,13 +65,16 @@
|
|||
<div>
|
||||
返回会员优惠券补贴： <span><span class="price" style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<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 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>
|
||||
|
||||
|
||||
|
|
@ -76,19 +82,19 @@
|
|||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||
|
||||
<div>
|
||||
应付商户金额 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
应付商户金额 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||
detailData.expend.data[0][1].slice(0, -1) }}</span>元</span>
|
||||
<span>{{ detailData.expend.data[0][2] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
佣金 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
佣金 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||
detailData.expend.data[1][1].slice(0, -1) }}</span>元</span>
|
||||
<span>{{ detailData.expend.data[1][2] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
返回手续费 <span style="margin: 0 1vw;"><span class="price" style="color: white;">{{
|
||||
detailData.expend.data[2][1].slice(0, -1) }}</span>元</span>
|
||||
<span>{{ detailData.expend.data[2][2] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -98,14 +104,14 @@
|
|||
<div style="display: flex;justify-content: space-between;" class="pop-li">
|
||||
|
||||
<div>
|
||||
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||
detailData.expend.data[3][1].slice(0, -1) }}</span>元</span>
|
||||
<span>{{ detailData.expend.data[3][2] }}</span>
|
||||
</div>
|
||||
<div>
|
||||
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
|
||||
style="color: white;">16.6</span>元</span>
|
||||
<span>2笔</span>
|
||||
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price" style="color: white;">{{
|
||||
detailData.expend.data[4][1].slice(0, -1) }}</span>元</span>
|
||||
<span>{{ detailData.expend.data[4][2] }}</span>
|
||||
</div>
|
||||
<div style="opacity: 0;">
|
||||
返回手续费 <span style="margin: 0 1vw;"><span class="price"
|
||||
|
|
@ -114,7 +120,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="pop-li" style="margin-top: 3vh;">
|
||||
平台手续费收入总金额: <span class="price">16.6 </span> 元
|
||||
平台手续费收入总金额: <span class="price">{{ detailData.charge.number }} </span> 元
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -132,7 +138,13 @@
|
|||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useRouter } from 'vue-router'
|
||||
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([
|
||||
{
|
||||
|
|
@ -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
|
||||
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) => {
|
||||
if (e.columnIndex == 10) {
|
||||
// route.push('/storeLogin')
|
||||
|
|
@ -291,21 +289,113 @@ const hdClick = (e) => {
|
|||
}
|
||||
|
||||
|
||||
const addDta = (data) => {
|
||||
|
||||
const a = (aaa, data) => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (i % 2 == 0) {
|
||||
aaa.data.push(data.d)
|
||||
} else {
|
||||
aaa.data.push(data.q)
|
||||
data.reverse().forEach((item, i) => {
|
||||
if (headerIndex.value == 0) {
|
||||
if (i % 2 == 0) {
|
||||
configs1.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;'>${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({
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
columnWidth: [],
|
||||
header: [
|
||||
],
|
||||
data: [
|
||||
|
|
@ -355,10 +445,40 @@ const addConfigHead = () => {
|
|||
}
|
||||
|
||||
|
||||
|
||||
let billData = []
|
||||
// 详情弹窗
|
||||
const showPop = ref(false)
|
||||
|
||||
const detailData = reactive({})
|
||||
|
||||
const hdClick3 = (e) => {
|
||||
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
|
||||
}
|
||||
|
||||
|
|
@ -367,8 +487,15 @@ const hdClick3 = (e) => {
|
|||
|
||||
|
||||
onMounted(() => {
|
||||
a(configs, congigData[headerIndex.value])
|
||||
changeTable(0)
|
||||
addConfigHead()
|
||||
financial_recordApi({
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100,
|
||||
limit: 50
|
||||
}).then(res => {
|
||||
addDta(res.data.list)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -439,7 +566,6 @@ onMounted(() => {
|
|||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<Header></Header>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import Header from "@/components/Header.vue"
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
|
@ -27,8 +27,6 @@
|
|||
<script setup>
|
||||
|
||||
import { onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import option from "./option"
|
||||
import { ref, reactive } from "vue"
|
||||
import topLeft from "@/components/index/topLeft.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 bottomRight from "@/components/index/bottomRight.vue"
|
||||
|
||||
import { areaObj } from '@/store/index.js'
|
||||
const areaStore = areaObj()
|
||||
|
||||
const areaCodes = reactive({
|
||||
areaCode: 510524,
|
||||
streetCode: 510524100
|
||||
...areaStore.area
|
||||
})
|
||||
|
||||
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>
|
||||
<style lang="scss">
|
||||
@keyframes jump {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||
<div class="content">
|
||||
<div class="btns">
|
||||
|
||||
<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[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
|
||||
|
|
@ -13,20 +14,20 @@
|
|||
<div style="color: white;display: flex;">
|
||||
<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>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table" v-if="configs.data.length">
|
||||
<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'
|
||||
style="width:95vw;height:100%" />
|
||||
style="width:95vw;height:77vh" />
|
||||
<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>
|
||||
|
|
@ -39,7 +40,9 @@
|
|||
// 102B3
|
||||
import { ref, reactive, onMounted } from "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([
|
||||
{
|
||||
|
|
@ -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])
|
||||
|
|
@ -145,7 +170,7 @@ const hdClick = (i) => {
|
|||
streetCode: 510524100,
|
||||
limit: 50
|
||||
}
|
||||
).then(res=>{
|
||||
).then(res => {
|
||||
res.data.forEach((item, index) => {
|
||||
billList[index].num = item.count
|
||||
|
||||
|
|
@ -192,7 +217,6 @@ const tableHdClick = (e) => {
|
|||
const addConfigData = (data) => {
|
||||
data.forEach((item, i) => {
|
||||
|
||||
|
||||
if (i % 2 == 0) {
|
||||
configs.data.push(
|
||||
[
|
||||
|
|
@ -215,7 +239,7 @@ const addConfigData = (data) => {
|
|||
<div
|
||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||
<span>总单号：</span>
|
||||
<span>35356565656565</span>
|
||||
<span>${item.groupOrder.group_order_sn}</span>
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>商品总价</span>
|
||||
<span>2023.11.214</span>
|
||||
<span>${item.total_price}</span>
|
||||
</div>
|
||||
<div
|
||||
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>2023.11.214</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||
<span>商家备注</span>
|
||||
<span>2023.11.214</span>
|
||||
</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;'>排序</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.real_name}</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;'>${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;'>排序</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;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.pay_type}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user_address}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${payType(item.pay_type)}</div>`,
|
||||
]
|
||||
)
|
||||
} else {
|
||||
|
|
@ -275,7 +299,7 @@ const addConfigData = (data) => {
|
|||
top:50%;
|
||||
left:0
|
||||
'>
|
||||
</div> 1111</div>
|
||||
</div> ${item.order_sn}</div>
|
||||
|
||||
<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;">
|
||||
|
|
@ -318,15 +342,23 @@ const addConfigData = (data) => {
|
|||
|
||||
|
||||
</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;'>${item.real_name}</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;'>${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;'>${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;'>
|
||||
|
||||
<sapn> ${item.status} </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;'> <sapn> ${item.status} </span>
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
|
||||
<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.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;'>排序</div>`,
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||
|
||||
<sapn> ${item.status} </span>
|
||||
<sapn>退款原因： ${item.refund_message} </span>
|
||||
<sapn>状态变更时间 ${item.status_tiem} </span>
|
||||
|
||||
|
||||
|
||||
</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%;
|
||||
left:0
|
||||
'>
|
||||
</div> ${item.refund_order_sn}</div>
|
||||
|
||||
</div> ${item.order_sn}</div>
|
||||
<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;">
|
||||
|
||||
|
|
@ -639,7 +686,7 @@ const addConfigData3 = (data) => {
|
|||
|
||||
|
||||
</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>`,
|
||||
|
|
@ -672,6 +719,8 @@ const configs = reactive({
|
|||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
rowNum: 20,
|
||||
|
||||
columnWidth: [250, 170, 170, 170, 170, 500, 170, 170, 170, 200],
|
||||
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>`,
|
||||
|
|
@ -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>`,
|
||||
],
|
||||
data: [
|
||||
|
|
@ -689,6 +738,8 @@ const configs = reactive({
|
|||
})
|
||||
|
||||
const configs2 = reactive({
|
||||
columnWidth: [300, 150, 150, 150, 150, 150, 600, 600],
|
||||
|
||||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
|
|
@ -710,6 +761,8 @@ const configs3 = reactive({
|
|||
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
|
||||
oddRowBGC: '',
|
||||
evenRowBGC: "",
|
||||
columnWidth: [300, 150, 150, 150, 150, 150, 600, 150, 150, 150],
|
||||
|
||||
rowNum: 20,
|
||||
header: [
|
||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
||||
|
|
@ -757,6 +810,7 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 2vw;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -790,7 +844,6 @@ onMounted(() => {
|
|||
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
}
|
||||
|
|
@ -803,6 +856,7 @@ onMounted(() => {
|
|||
|
||||
:deep(.header-item) {
|
||||
padding: 0 !important;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,145 +1,21 @@
|
|||
<template>
|
||||
<div class="top box">
|
||||
|
||||
|
||||
<div class="l">
|
||||
<img class="img-cls" src="/static/town/YHSJ.png" alt="">
|
||||
<div class="user center" id="user"></div>
|
||||
<topLeft></topLeft>
|
||||
</div>
|
||||
<div class="c" id="">
|
||||
|
||||
<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="">
|
||||
|
||||
昨日数据： 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="">
|
||||
|
||||
周环比: 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="">
|
||||
|
||||
昨日数据： 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="">
|
||||
|
||||
周环比: 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="">
|
||||
|
||||
昨日数据： 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="">
|
||||
|
||||
周环比: 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 class="r">
|
||||
|
||||
<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>
|
||||
|
||||
<topRight></topRight>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="bottom box">
|
||||
<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 class="c">
|
||||
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
||||
|
|
@ -155,46 +31,13 @@
|
|||
import { onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import option from "./option"
|
||||
import { ref, reactive } from "vue"
|
||||
import Remake from "@/components/Remake.vue"
|
||||
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
||||
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
||||
import { getProductCountApi } from "@/api.js"
|
||||
import { useRoute } from 'vue-router';
|
||||
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 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) => {
|
||||
var chartDom = document.getElementById(tag);
|
||||
|
|
@ -203,16 +46,10 @@ const initCharts = (tag, option) => {
|
|||
}
|
||||
|
||||
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_');
|
||||
initCharts('user', option.userChartOption)
|
||||
initCharts('orderAmount', option.orderAmount)
|
||||
initCharts('transactionUsers', option.transactionUsersTown)
|
||||
initCharts('orderData', option.orderData)
|
||||
initCharts('orderData2', option.orderData)
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -220,20 +57,6 @@ onMounted(() => {
|
|||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100vw;
|
||||
height: 47vh;
|
||||
|
|
@ -253,14 +76,9 @@ onMounted(() => {
|
|||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.user {
|
||||
position: absolute;
|
||||
width: 98%;
|
||||
height: 35vh;
|
||||
padding-top: 6vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -335,31 +153,7 @@ onMounted(() => {
|
|||
position: relative;
|
||||
// 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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue