shit
This commit is contained in:
parent
d5a48e128c
commit
9da0771d9d
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
|
"@vuepic/vue-datepicker": "^7.4.0",
|
||||||
"amfe-flexible": "^2.2.1",
|
"amfe-flexible": "^2.2.1",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
|
|
@ -1384,6 +1385,21 @@
|
||||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
||||||
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@vuepic/vue-datepicker": {
|
||||||
|
"version": "7.4.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vuepic/vue-datepicker/-/vue-datepicker-7.4.0.tgz",
|
||||||
|
"integrity": "sha512-dXYzbcnRet9b+Dkh+f8rhMnjj5QXgejJTQp+ZRALgwP2oeli2c8e4VvJ0NVxoc7QTU8D5x5Et8NP51C450Pkvg==",
|
||||||
|
"dependencies": {
|
||||||
|
"date-fns": "^2.30.0",
|
||||||
|
"date-fns-tz": "^1.3.7"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.12.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": ">=3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@vueuse/core": {
|
"node_modules/@vueuse/core": {
|
||||||
"version": "9.13.0",
|
"version": "9.13.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
|
||||||
|
|
@ -1899,6 +1915,25 @@
|
||||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||||
},
|
},
|
||||||
|
"node_modules/date-fns": {
|
||||||
|
"version": "2.30.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
|
||||||
|
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.21.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.11"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/date-fns-tz": {
|
||||||
|
"version": "1.3.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
|
||||||
|
"integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"date-fns": ">=2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dayjs": {
|
"node_modules/dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.10",
|
||||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
|
|
@ -3976,6 +4011,15 @@
|
||||||
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
"resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz",
|
||||||
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
||||||
},
|
},
|
||||||
|
"@vuepic/vue-datepicker": {
|
||||||
|
"version": "7.4.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@vuepic/vue-datepicker/-/vue-datepicker-7.4.0.tgz",
|
||||||
|
"integrity": "sha512-dXYzbcnRet9b+Dkh+f8rhMnjj5QXgejJTQp+ZRALgwP2oeli2c8e4VvJ0NVxoc7QTU8D5x5Et8NP51C450Pkvg==",
|
||||||
|
"requires": {
|
||||||
|
"date-fns": "^2.30.0",
|
||||||
|
"date-fns-tz": "^1.3.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@vueuse/core": {
|
"@vueuse/core": {
|
||||||
"version": "9.13.0",
|
"version": "9.13.0",
|
||||||
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz",
|
||||||
|
|
@ -4414,6 +4458,20 @@
|
||||||
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
"resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.2.tgz",
|
||||||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||||
},
|
},
|
||||||
|
"date-fns": {
|
||||||
|
"version": "2.30.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
|
||||||
|
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.21.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"date-fns-tz": {
|
||||||
|
"version": "1.3.8",
|
||||||
|
"resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
|
||||||
|
"integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"dayjs": {
|
"dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.10",
|
||||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,11 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
|
"@vuepic/vue-datepicker": "^7.4.0",
|
||||||
"amfe-flexible": "^2.2.1",
|
"amfe-flexible": "^2.2.1",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
"echarts": "^5.4.3",
|
"echarts": "^5.4.3",
|
||||||
"element-plus": "^2.4.3",
|
"element-plus": "^3.2.5",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"postcss-pxtorem": "^5.1.1",
|
"postcss-pxtorem": "^5.1.1",
|
||||||
"vue": "^3.3.8",
|
"vue": "^3.3.8",
|
||||||
|
|
|
||||||
29
src/App.vue
29
src/App.vue
|
|
@ -1,9 +1,32 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { areaObj } from "@/store/index.js"
|
import { areaObj } from "@/store/index.js"
|
||||||
const areaStroe = areaObj()
|
const areaStroe = areaObj()
|
||||||
let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
|
|
||||||
let { area_code, street_code } = userInfo.user
|
|
||||||
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
|
||||||
|
|
||||||
|
if (localStorage.getItem("TRADE_USER")) {
|
||||||
|
let userInfo = JSON.parse(localStorage.getItem('TRADE_USER'))
|
||||||
|
areaStroe.changeUserInfo(userInfo)
|
||||||
|
let { area_code, street_code } = userInfo.user
|
||||||
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="main-box">
|
<div class="main-box">
|
||||||
|
|
|
||||||
51
src/api.js
51
src/api.js
|
|
@ -1,6 +1,11 @@
|
||||||
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
|
let expire = localStorage.getItem("TRADE_USER") ? JSON.parse(localStorage.getItem("TRADE_USER")).expire : {}
|
||||||
|
|
||||||
|
|
||||||
// 创建axios 实例
|
// 创建axios 实例
|
||||||
const instacne = axios.create({
|
const instacne = axios.create({
|
||||||
baseURL: "https://crmeb-test.shop.lihaink.cn/",
|
baseURL: "https://crmeb-test.shop.lihaink.cn/",
|
||||||
|
|
@ -11,6 +16,22 @@ const instacne = axios.create({
|
||||||
instacne.interceptors.request.use(
|
instacne.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
// 在发送请求之前做什么
|
// 在发送请求之前做什么
|
||||||
|
let timestamp = Math.floor(new Date().getTime() / 1000);
|
||||||
|
|
||||||
|
if (expire) {
|
||||||
|
|
||||||
|
if (timestamp > expire) {
|
||||||
|
ElMessage({
|
||||||
|
message: "登录过期，请重新登录",
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
|
||||||
|
localStorage.removeItem('TRADE_USER')
|
||||||
|
router.replace('/login')
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
|
|
@ -142,8 +163,32 @@ export function street_currday_order_countApi(params) {
|
||||||
export function loginApi(params) {
|
export function loginApi(params) {
|
||||||
return instacne.post('/api/dataview/login', params)
|
return instacne.post('/api/dataview/login', params)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function storeLoginApi(params) {
|
||||||
|
return instacne.post('/api/dataview/mechant_login', params)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function merchant_count_mainApi(params) {
|
||||||
|
return instacne.get('/api/dataview/merchant_count_main', { params })
|
||||||
|
}
|
||||||
|
export function order_user_num_countApi(params) {
|
||||||
|
return instacne.get('/api/dataview/order_user_num_count', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export function merchant_product_rankingApi(params) {
|
||||||
|
return instacne.get('/api/dataview/merchant_product_ranking', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function merchant_product_visitApi(params) {
|
||||||
|
return instacne.get('/api/dataview/merchant_product_visit', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function merchant_product_cartApi(params) {
|
||||||
|
return instacne.get('/api/dataview/merchant_product_cart', { params })
|
||||||
|
}
|
||||||
//
|
//
|
||||||
////api/dataview/login {
|
///api/dataview/merchant_product_cart?areaCode=510524&streetCode=510524100&mer_id=42&start_date=2023-01-01&end_date=2023-12-09
|
||||||
// "account": "泸县",
|
|
||||||
// "password": "luxian"
|
|
||||||
// }
|
// }
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<Transition>
|
<Transition>
|
||||||
<div class="address" v-if="props.choseArea">
|
<div class="address" v-if="props.choseArea">
|
||||||
|
|
||||||
|
<div class="address-li" @click="choseAreaFn">龙马谭区 </div>
|
||||||
|
|
||||||
<div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
|
<div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
|
||||||
item.name }}
|
item.name }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -11,7 +14,16 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits, onMounted, reactive } from "vue"
|
import { defineProps, defineEmits, onMounted, reactive } from "vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { areaObj } from '@/store/index.js'
|
||||||
import axios from "axios"
|
import axios from "axios"
|
||||||
|
|
||||||
|
let areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const emit = defineEmits(['offAreaList'])
|
const emit = defineEmits(['offAreaList'])
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
|
@ -20,6 +32,12 @@ const props = defineProps({
|
||||||
let areaList = reactive([])
|
let areaList = reactive([])
|
||||||
// 选额镇
|
// 选额镇
|
||||||
const choseTownFn = (id, name) => {
|
const choseTownFn = (id, name) => {
|
||||||
|
areaStore.changeArea({
|
||||||
|
areaCode: areaStore.area.areaCode,
|
||||||
|
streetCode: id
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
props.choseArea = false
|
props.choseArea = false
|
||||||
emit('offAreaList', name)
|
emit('offAreaList', name)
|
||||||
|
|
||||||
|
|
@ -27,9 +45,24 @@ const choseTownFn = (id, name) => {
|
||||||
|
|
||||||
router.replace('/townDetail?code=' + id)
|
router.replace('/townDetail?code=' + id)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// x选择区县
|
||||||
|
const choseAreaFn = () => {
|
||||||
|
areaStore.changeArea({
|
||||||
|
areaCode: areaStore.area.areaCode,
|
||||||
|
streetCode: null
|
||||||
|
|
||||||
|
})
|
||||||
|
props.choseArea = false
|
||||||
|
|
||||||
|
emit('offAreaList', "龙马潭区")
|
||||||
|
router.replace('/')
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=510524`)
|
axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaStore.area.areaCode}`)
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
response.data.data.forEach(item => {
|
response.data.data.forEach(item => {
|
||||||
areaList.push(item)
|
areaList.push(item)
|
||||||
|
|
@ -38,7 +71,6 @@ onMounted(() => {
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
// 处理错误情况
|
// 处理错误情况
|
||||||
console.log(error);
|
|
||||||
})
|
})
|
||||||
.finally(function () {
|
.finally(function () {
|
||||||
// 总是会执行
|
// 总是会执行
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<el-config-provider :locale="localeZH">
|
||||||
|
<el-date-picker v-model="date" @change="changeDate" style="background-color: #001E31; width: 10vw;"
|
||||||
|
type="daterange" range-separator="-">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import localeZH from 'element-plus/es/locale/lang/zh-cn'
|
||||||
|
|
||||||
|
const date = ref(["2023-12-13T16:00:00.000Z",
|
||||||
|
"2024-01-16T16:00:00.000Z"])
|
||||||
|
const changeDate = () => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
:deep(.el-picker-panel__body) {
|
||||||
|
font-size: 26px;
|
||||||
|
text-align: center;
|
||||||
|
color: rgb(8, 101, 172);
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(2) {
|
||||||
|
color: #C7DBE3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>input:nth-child(4) {
|
||||||
|
color: #C7DBE3;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app>div>div.headers>div.right>div.el-date-editor.el-date-editor--daterange.el-input__wrapper.el-range-editor.el-tooltip__trigger.el-tooltip__trigger>span {
|
||||||
|
color: #C7DBE3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-picker-panel {
|
||||||
|
background-color: #001E31;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-date .el-date-table-cell {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start-date .el-date-table-cell {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.in-range .el-date-table-cell {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 1px solid #41A5BEed;
|
||||||
|
box-shadow: inset 0 0 10px #41A5BEed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table td.end-date .el-date-table-cell__text,
|
||||||
|
.el-date-table td.start-date .el-date-table-cell__text {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-range-picker__content.is-left {
|
||||||
|
border-right: 1px solid #2C4D54;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-popper.is-light {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table th {
|
||||||
|
border-bottom: 1px solid #2C4D54;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-table th {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="headers">
|
<div class="headers">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
</div>
|
</div>
|
||||||
<div class="tab">
|
<div class="tab" v-if="role != 1">
|
||||||
<div class="tab-li">
|
<div class="tab-li">
|
||||||
<img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
|
<img @click="showFn(0, '/')" class="tab-img" v-if="show[0]" style="width: 6vw;height:2vh;" :src="u('SY')"
|
||||||
alt="">
|
alt="">
|
||||||
|
|
@ -15,6 +15,7 @@
|
||||||
<img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
|
<img @click="showFn(1, '/commodity')" class="tab-img" v-else style="width: 7vw;height:3vh;" :src="u('SPXZ')"
|
||||||
alt="">
|
alt="">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-li">
|
<div class="tab-li">
|
||||||
<img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
|
<img @click="showFn(2, '/Businesses')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
|
||||||
:src="u('SH')" alt="">
|
:src="u('SH')" alt="">
|
||||||
|
|
@ -41,28 +42,34 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab" v-else>
|
||||||
|
|
||||||
|
<div class="tab-li">
|
||||||
|
<img @click="showFn(2, '/storeLogin')" class="tab-img" v-if="show[2]" style="width: 6vw;height:2vh;"
|
||||||
|
:src="u('SH')" alt="">
|
||||||
|
<img @click="showFn(2, '/storeLogin')" class="tab-img" v-else style="width: 7vw;height:3vh;"
|
||||||
|
:src="u('SHXZ')" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rigth-li" @click="choseArea = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
<datePicker v-if="route.path != '/storeLogin'"></datePicker>
|
||||||
|
<div class="rigth-li" @click="choseAreaFn"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
|
||||||
:src="u('DW')" alt=""> {{ area }}
|
:src="u('DW')" alt=""> {{ area }}
|
||||||
</div>
|
</div>
|
||||||
<areaList :choseArea="choseArea" @offAreaList="offAreaList"></areaList>
|
<areaList :choseArea="choseArea" @offAreaList="offAreaList" style="left: 12vw;"></areaList>
|
||||||
<div class="right-line">
|
<div class="right-line">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rigth-li" id="time">15:33:26</div>
|
<div class="rigth-li" id="time">15:33:26</div>
|
||||||
<div class="right-line"> <span></span>
|
<div class="right-line"> <span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rigth-li" id="days">2023-11-28</div>
|
<div class="rigth-li" id="days">2023-11-28</div>
|
||||||
<div class="right-line">
|
<div class="right-line">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
|
<div class="rigth-li" @click="out"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;" :src="u('GJ')"
|
||||||
alt=""></div>
|
alt=""></div>
|
||||||
<div class="right-line">
|
<div class="right-line">
|
||||||
|
|
@ -73,32 +80,26 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, watch } from "vue"
|
import { ref, reactive, onMounted, watch } from "vue"
|
||||||
import areaList from "./areaList.vue";
|
import areaList from "./areaList.vue";
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import MapLoader from "@/view/utils/position.js"
|
import MapLoader from "@/view/utils/position.js"
|
||||||
|
import { areaObj } from "@/store/index.js"
|
||||||
|
import datePicker from "@/components/datePicker.vue"
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
let area = ref('')
|
let area = ref('')
|
||||||
|
let userinfo = JSON.parse(localStorage.getItem('TRADE_USER'))
|
||||||
|
let role = ref(userinfo.role)
|
||||||
const u = (name) => {
|
const u = (name) => {
|
||||||
return `/static/index/${name}.png`
|
return `/static/index/${name}.png`
|
||||||
}
|
}
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
|
|
||||||
const changeTownFn = (name) => {
|
|
||||||
area.value = name
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 标题
|
// 标题
|
||||||
const show = reactive([false, true, true, true, true])
|
const show = reactive([false, true, true, true, true])
|
||||||
|
|
||||||
|
|
@ -108,6 +109,13 @@ const showFn = (index, src) => {
|
||||||
})
|
})
|
||||||
show[index] = !show[index]
|
show[index] = !show[index]
|
||||||
if (src) {
|
if (src) {
|
||||||
|
|
||||||
|
if (areaStore.area.streetCode && src == '/') {
|
||||||
|
|
||||||
|
|
||||||
|
router.push("/townDetail?code=510524102")
|
||||||
|
return
|
||||||
|
}
|
||||||
router.replace(src)
|
router.replace(src)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -119,14 +127,17 @@ const backUrl = ref('/')
|
||||||
watch(
|
watch(
|
||||||
() => route.path,
|
() => route.path,
|
||||||
(value, oldValue) => {
|
(value, oldValue) => {
|
||||||
if (value == '/') {
|
if (value == '/index') {
|
||||||
showFn(0)
|
showFn(0)
|
||||||
area.value = '龙马潭区'
|
area.value = '龙马潭区'
|
||||||
}
|
}
|
||||||
|
if (value == '/townDetail') {
|
||||||
|
showFn(0)
|
||||||
|
}
|
||||||
if (value == '/commodity') {
|
if (value == '/commodity') {
|
||||||
showFn(1)
|
showFn(1)
|
||||||
}
|
}
|
||||||
if (value == '/Businesses') {
|
if (value == '/Businesses' || value == '/storeLogin') {
|
||||||
showFn(2)
|
showFn(2)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -136,15 +147,31 @@ watch(
|
||||||
if (value == '/finance') {
|
if (value == '/finance') {
|
||||||
showFn(4)
|
showFn(4)
|
||||||
}
|
}
|
||||||
|
if (value == '/finance') {
|
||||||
|
showFn(4)
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const choseAreaFn = () => {
|
||||||
|
|
||||||
|
if (role.value == 2) {
|
||||||
|
choseArea.value = true
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// 选额镇
|
// 选额镇
|
||||||
const choseArea = ref(false)
|
const choseArea = ref(false)
|
||||||
|
|
@ -156,6 +183,8 @@ const offAreaList = (name) => {
|
||||||
const out = () => {
|
const out = () => {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
// window.open("about:blank", "_top").close()
|
// window.open("about:blank", "_top").close()
|
||||||
|
|
||||||
|
localStorage.removeItem('TRADE_USER')
|
||||||
router.replace('/login')
|
router.replace('/login')
|
||||||
}
|
}
|
||||||
const updateTime = () => {
|
const updateTime = () => {
|
||||||
|
|
@ -192,7 +221,17 @@ onMounted(() => {
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.popperClass {
|
||||||
|
// background-color: red;
|
||||||
|
color: red;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.headers {
|
.headers {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #B0C7D1;
|
color: #B0C7D1;
|
||||||
|
|
@ -215,7 +254,7 @@ onMounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 120px;
|
margin-left: 120px;
|
||||||
width: 50vw;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// background-color: white;
|
// background-color: white;
|
||||||
|
|
||||||
|
|
@ -243,6 +282,7 @@ onMounted(() => {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.address {
|
.address {
|
||||||
left: 1vw;
|
left: 1vw;
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,6 @@ const area = reactive({
|
||||||
|
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
console.log(props)
|
|
||||||
|
|
||||||
getUserTradeCountApi(props.areaCodes).then(res => {
|
getUserTradeCountApi(props.areaCodes).then(res => {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -296,7 +296,6 @@ getUserNumApi(
|
||||||
});
|
});
|
||||||
pageNum.value = Math.ceil(merchatCountList.length / 8)
|
pageNum.value = Math.ceil(merchatCountList.length / 8)
|
||||||
initCharts('user', Option)
|
initCharts('user', Option)
|
||||||
console.log(merchatCountList,65656)
|
|
||||||
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,47 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-scroll-board" :ref="ref">
|
<div class="dv-scroll-board" :ref="ref">
|
||||||
<div class="header" v-if="header.length && mergedConfig" :style="mergedConfig.headerStyle">
|
<div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
|
||||||
<div class="header-item" v-for="(headerItem, i) in header" :key="`${headerItem}${i}`" :style="`
|
<div class="header-item" v-for="(headerItem, i) in header" :key="`${headerItem}${i}`" :style="`
|
||||||
height: ${mergedConfig.headerHeight}px;
|
height: ${mergedConfig.headerHeight}px;
|
||||||
${headerStyle}
|
line-height: ${mergedConfig.headerHeight}px;
|
||||||
line-height: ${mergedConfig.headerHeight}px;
|
width: ${widths[i]}px;
|
||||||
width: ${widths[i]}px;
|
|
||||||
|
|
||||||
`" :align="aligns[i]" v-html="headerItem" />
|
`" :align="aligns[i]" v-html="headerItem" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="mergedConfig" class="rows" :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)
|
<div v-if="mergedConfig" class="rows" :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)
|
||||||
}px;`">
|
}px;`">
|
||||||
<div class="row-item" v-for="(row, ri) in rows" :key="`${row.toString()}${row.scroll}`" :style="`
|
<div class="row-item" v-for="(row, ri) in rows" :key="`${row.toString()}${row.scroll}`" :style="`
|
||||||
height: ${heights[ri]}px;
|
height: ${heights[ri]}px;
|
||||||
line-height: ${heights[ri]}px;
|
line-height: ${heights[ri]}px;
|
||||||
|
|
||||||
};
|
};
|
||||||
`">
|
`">
|
||||||
<div v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`">
|
<div v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`">
|
||||||
|
|
||||||
<div v-if="ci!=9" class="ceil" :style="`width: ${widths[ci]}px;`"
|
<div class="ceil" :style="`width: ${widths[ci]}px; `" :align="aligns[ci]" v-html="ceil"
|
||||||
:align="aligns[ci]" v-html="ceil" @click="emitEvent('click', ri, ci, row, ceil)"
|
@click="emitEvent('click', ri, ci, row, ceil)" @mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||||
@mouseenter="handleHover(true, ri, ci, row, ceil)" @mouseleave="handleHover(false)" />
|
@mouseleave="handleHover(false)" />
|
||||||
<div class="ceil" :style="`width: ${widths[ci]}px;`"
|
<!--
|
||||||
:align="aligns[ci]" @click="emitEvent('click', ri, ci, row, ceil)" style="background-color: #102B3E;"
|
<div v-else class="ceil" :style="`width: ${widths[ci]}px; `" :align="aligns[ci]"
|
||||||
v-else>
|
@click="emitEvent('click', ri, ci, row, ceil)" @mouseenter="handleHover(true, ri, ci, row, ceil)"
|
||||||
<input type="radio" v-for="item in ceil" name="rate" readonly>
|
@mouseleave="handleHover(false)">
|
||||||
{{ ceil }}
|
|
||||||
|
|
||||||
<!-- sasdas -->
|
<div
|
||||||
</div>
|
style='width: 100%;text-align: center; height: 40px;box-sizing: border-box; color: aliceblue; background: #102B3E;dislay:flex;align-items:center;box-sizing: border-box; padding-top: 5px;'>
|
||||||
|
<input type="radio" name="rate" readonly>
|
||||||
|
<img src='${item.image}' style='width:25px;height:25px;'>
|
||||||
|
|
||||||
|
</div>,
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="ceil" :style="`width: ${widths[ci]}px;}`" :align="aligns[ci]"
|
||||||
|
@click="emitEvent('click', ri, ci, row, ceil)" v-else>
|
||||||
|
|
||||||
|
<div style="display: flex;justify-content: space-around;height: 40px;">
|
||||||
|
<input type="radio" style="margin-top: 5px;" name="rate" readonly>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -191,6 +202,18 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
showFn(num) {
|
||||||
|
if (!num) {
|
||||||
|
setTimeout(() => {
|
||||||
|
|
||||||
|
// return false
|
||||||
|
}, 1500)
|
||||||
|
} else {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
handleHover(enter, ri, ci, row, ceil) {
|
handleHover(enter, ri, ci, row, ceil) {
|
||||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this;
|
const { mergedConfig, emitEvent, stopAnimation, animation } = this;
|
||||||
|
|
||||||
|
|
@ -482,20 +505,23 @@ export default {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 0px 3px;
|
padding: 0px 3px;
|
||||||
}
|
}
|
||||||
[type="radio"]{
|
|
||||||
-webkit-appearance: none;
|
[type="radio"] {
|
||||||
width: 20px;
|
-webkit-appearance: none;
|
||||||
height: 20px;
|
width: 20px;
|
||||||
-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0l1.693 3.67 4.013.476L8.74 6.89l.788 3.964L6 8.88l-3.527 1.974.788-3.964L.294 4.146l4.013-.476L6 0z' fill='%23F67600'/%3E%3C/svg%3E");
|
height: 20px;
|
||||||
-webkit-mask-size: 20px;
|
-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0l1.693 3.67 4.013.476L8.74 6.89l.788 3.964L6 8.88l-3.527 1.974.788-3.964L.294 4.146l4.013-.476L6 0z' fill='%23F67600'/%3E%3C/svg%3E");
|
||||||
-webkit-mask-repeat: no-repeat;
|
-webkit-mask-size: 20px;
|
||||||
-webkit-mask-position: center;
|
-webkit-mask-repeat: no-repeat;
|
||||||
background-color: coral; /*默认是选中的样式，橙色*/
|
-webkit-mask-position: center;
|
||||||
margin: 0;
|
background-color: coral;
|
||||||
transition: .2s;
|
/*默认是选中的样式，橙色*/
|
||||||
|
margin: 0;
|
||||||
|
transition: .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="radio"]:checked~[type="radio"]{
|
[type="radio"]:checked~[type="radio"] {
|
||||||
background-color: #E8EAED; /*未选中的样式，灰色*/
|
background-color: #E8EAED;
|
||||||
|
/*未选中的样式，灰色*/
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
<template>
|
||||||
|
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
||||||
|
<div id="transactionUsers" class="transactionUsers"></div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { getUserTradeCountApi } from "@/api.js"
|
||||||
|
import { areaObj } from '../../store';
|
||||||
|
let areaStore = areaObj()
|
||||||
|
|
||||||
|
getUserTradeCountApi(
|
||||||
|
{ ...areaStore.area }
|
||||||
|
).then(res => {
|
||||||
|
res.data.userTradeCountList.forEach(item => {
|
||||||
|
transactionUsersTown.xAxis[0]
|
||||||
|
transactionUsersTown.xAxis[0].data.push(item.date.slice(5, item.date.length))
|
||||||
|
transactionUsersTown.series[0].data.push(item.visitUser)
|
||||||
|
transactionUsersTown.series[1].data.push(item.orderUser)
|
||||||
|
transactionUsersTown.series[2].data.push(item.payOrderUser)
|
||||||
|
})
|
||||||
|
initCharts('transactionUsers', transactionUsersTown)
|
||||||
|
})
|
||||||
|
const initCharts = (tag, option) => {
|
||||||
|
var chartDom = document.getElementById(tag);
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
}
|
||||||
|
const transactionUsersTown = {
|
||||||
|
color: ['#015989', '#583936', '#416979'],
|
||||||
|
title: {
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['访客人数', '下单人数', '支付人数',],
|
||||||
|
textStyle: {
|
||||||
|
color: "white"
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [],
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#d1f9fb',
|
||||||
|
rotate: 40, // 文本旋转角度
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',//背景色为虚线,
|
||||||
|
color: '#256980'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访客人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#18394A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#2885A4'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下单人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#2752A6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#005886'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '支付人数',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#005685'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#355969'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.transactionUsers {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 40vh;
|
||||||
|
top: 5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-cls {
|
||||||
|
width: 98%;
|
||||||
|
height: 45vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,58 +1,59 @@
|
||||||
<template>
|
<template>
|
||||||
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
<img class="img-cls" src="/static/town/PHBSJ.png" alt="">
|
||||||
<div class="users">
|
<div class="user-rank" style="width: 98%; " v-if="config3.data.length">
|
||||||
<div class="btnss">
|
<div class="btns">
|
||||||
<span class="btn-s">店铺销量排行</span>
|
<span class="btn" :class="{ actbtn: showGoods }" @click="showGoods = true">商品销售排行</span>
|
||||||
<span class="btn-s">店铺销量排行</span>
|
<span class="btn" :class="{ actbtn: !showGoods }" @click="showGoods = false">店铺销量排行</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<dv-scroll-board v-show="showGoods" :config="config3" style="height: 35vh;margin-left: 1%;" />
|
||||||
<dv-scroll-board v-if="config3.data" :config="config3" class="list" />
|
<dv-scroll-board v-show="!showGoods" :config="config" style="height: 35vh;margin-left: 1%;" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive,defineProps } from "vue"
|
import { ref, reactive, defineProps } from "vue"
|
||||||
import { getSalesRankApi } from "@/api.js"
|
import { getSalesRankApi } from "@/api.js"
|
||||||
|
import { areaObj } from "@/store/index.js"
|
||||||
|
const showGoods = ref(true)
|
||||||
|
const areaStore = areaObj()
|
||||||
|
getSalesRankApi({ ...areaStore.area }).then(res => {
|
||||||
|
townProductCount = res.data.townProductCount
|
||||||
|
productRankingTotal = res.data.productRankingTotal
|
||||||
|
aa(config3, res.data.productRankingList)
|
||||||
|
aa(config, res.data.merchantRankingList
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
code: Object,
|
code: Object,
|
||||||
})
|
})
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
let townProductCount = ''
|
let townProductCount = ''
|
||||||
const aa = () => {
|
let productRankingTotal = ''
|
||||||
|
const aa = (cig, data) => {
|
||||||
let list = []
|
let list = []
|
||||||
|
data.forEach((item, i) => {
|
||||||
for (let i = 0; i < 20; i++) {
|
cig.data.push([
|
||||||
|
|
||||||
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="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="https://ceshi-worker-task.lihaink.cn/uploads/images/20231207/202312071156236a5de0601.png" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
`<div style='background:red;position:relative'><img src="${item.image || item.mini_banner}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>$item.store_name || item.mer_name}</div>`,
|
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name || item.mer_name}</div>`,
|
||||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: {item.store_name ? (item.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=' 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 <span style='font-size:10px'>单</span>
|
`<div style=' position: relative;line-height:30px;text-align:center' >${item.total_sales} <span style='font-size:10px'>单</span>
|
||||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
<img src="/static/index/PHBBG.png" style="position: absolute;width: 100%;height: 30px; top:0px;left:0px" alt="">
|
||||||
</div>`,])
|
</div>`,
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return list
|
return list
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -64,12 +65,22 @@ const config3 = reactive({
|
||||||
// 2, 3, 4, 10, 3
|
// 2, 3, 4, 10, 3
|
||||||
// ],
|
// ],
|
||||||
columnWidth: [50, 50, 150, 150, 100],
|
columnWidth: [50, 50, 150, 150, 100],
|
||||||
data: aa()
|
data: []
|
||||||
}
|
}
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const config = reactive({
|
||||||
|
oddRowBGC: "#001C2E",
|
||||||
|
evenRowBGC: "#001C2E",
|
||||||
|
// columnWidth: [
|
||||||
|
// 2, 3, 4, 10, 3
|
||||||
|
// ],
|
||||||
|
columnWidth: [50, 50, 150, 150, 100],
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -84,7 +95,7 @@ const config3 = reactive({
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.users {
|
.user-rank {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// padding-top: 5vh;
|
// padding-top: 5vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -92,18 +103,25 @@ const config3 = reactive({
|
||||||
margin-top: 7vh;
|
margin-top: 7vh;
|
||||||
height: 38vh;
|
height: 38vh;
|
||||||
|
|
||||||
.btnss {
|
.btns {
|
||||||
color: white;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-bottom: 2vh;
|
|
||||||
|
|
||||||
.btn-s {
|
.btn {
|
||||||
margin-right: 1vw;
|
margin-right: 1vw;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
border: 1px solid #2A538D;
|
background-image: url('/static/index/btn2.png');
|
||||||
border-radius: 20px;
|
background-size: 100% 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.actbtn {
|
||||||
|
background-image: url('/static/index/actbg2.png');
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
|
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { street_currday_order_countApi } from "@/api.js"
|
import { street_currday_order_countApi } from "@/api.js"
|
||||||
import { ref, reactive,defineProps } from "vue"
|
import { ref, reactive, defineProps } from "vue"
|
||||||
import { areaObj } from '../../store';
|
import { areaObj } from '../../store';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
code: Object,
|
code: Object,
|
||||||
|
|
@ -45,7 +45,7 @@ const areaStore = areaObj()
|
||||||
|
|
||||||
street_currday_order_countApi(
|
street_currday_order_countApi(
|
||||||
|
|
||||||
{ ...areaStore.area,streetCode:props.code }
|
{ ...areaStore.area, streetCode: props.code }
|
||||||
|
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -98,14 +98,78 @@
|
||||||
<div class="Views">
|
<div class="Views">
|
||||||
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<img src="/static/index/SSLLL.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
<div class="view-content">
|
<div class="view-content">
|
||||||
<div>昨日数据：3333</div>
|
<div>昨日数据：{{ viewData.yesterday }}</div>
|
||||||
<div style="display: flex;align-items: center;">当前浏览量：
|
<div style="display: flex;align-items: center;">当前浏览量：
|
||||||
<Remake :num="517854" /> 人正在浏览
|
<Remake :num="viewData.today" /> 人正在浏览
|
||||||
</div>
|
</div>
|
||||||
<div>周环比：32%</div>
|
<div>周环比：{{ viewData.lastWeekRate }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { getProductCountApi, getViewCountApi } from "@/api.js"
|
||||||
|
|
||||||
|
import { ref, reactive, defineProps } from "vue"
|
||||||
|
import Remake from "@/components/Remake.vue"
|
||||||
|
import { areaObj } from "../../store";
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
code: Object,
|
||||||
|
})
|
||||||
|
const data = reactive(
|
||||||
|
{
|
||||||
|
"totalProductCounInfo": {
|
||||||
|
"todayProductCount": 0,
|
||||||
|
"yestertodayProductCount": 0,
|
||||||
|
"weeklyProductTotalGrowthRate": 6.6842
|
||||||
|
},
|
||||||
|
"newProductCountInfo": {
|
||||||
|
"todayNewProductCount": 0,
|
||||||
|
"yestertodayNewProductCount": 0,
|
||||||
|
"weeklyNewProductTotalGrowthRate": -270
|
||||||
|
},
|
||||||
|
"merchantCountInfo": {
|
||||||
|
"todayMerchantCount": 22,
|
||||||
|
"yestertodayMerchantCount": 22,
|
||||||
|
"weeklyMerchantGrowthRate": 0.0476
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
const viewData = reactive({
|
||||||
|
lastWeekRate: -0,
|
||||||
|
today: 0,
|
||||||
|
yesterday: 7
|
||||||
|
})
|
||||||
|
|
||||||
|
getProductCountApi({
|
||||||
|
...areaStore.area
|
||||||
|
}).then(res => {
|
||||||
|
|
||||||
|
for (let key in res.data) {
|
||||||
|
data[key] = res.data[key]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
getViewCountApi({
|
||||||
|
...areaStore.area
|
||||||
|
}).then(res => {
|
||||||
|
for (let key in res.data) {
|
||||||
|
viewData[key] = res.data[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.product-list {
|
.product-list {
|
||||||
height: 70%;
|
height: 70%;
|
||||||
|
|
@ -307,6 +371,7 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes jump {
|
@keyframes jump {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
|
|
@ -321,54 +386,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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,
|
|
||||||
})
|
|
||||||
|
|
||||||
const data = reactive(
|
|
||||||
{
|
|
||||||
"totalProductCounInfo": {
|
|
||||||
"todayProductCount": 0,
|
|
||||||
"yestertodayProductCount": 0,
|
|
||||||
"weeklyProductTotalGrowthRate": 6.6842
|
|
||||||
},
|
|
||||||
"newProductCountInfo": {
|
|
||||||
"todayNewProductCount": 0,
|
|
||||||
"yestertodayNewProductCount": 0,
|
|
||||||
"weeklyNewProductTotalGrowthRate": -270
|
|
||||||
},
|
|
||||||
"merchantCountInfo": {
|
|
||||||
"todayMerchantCount": 22,
|
|
||||||
"yestertodayMerchantCount": 22,
|
|
||||||
"weeklyMerchantGrowthRate": 0.0476
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
)
|
|
||||||
|
|
||||||
getProductCountApi({
|
|
||||||
areaCode: 510524,
|
|
||||||
streetCode: props.code
|
|
||||||
}).then(res => {
|
|
||||||
|
|
||||||
for (let key in res.data) {
|
|
||||||
|
|
||||||
data[key] = res.data[key]
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
console.log(res)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
@ -23,16 +23,48 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { onMounted } from "vue"
|
import { onMounted } from "vue"
|
||||||
import {defineProps} from "vue"
|
import { defineProps } from "vue"
|
||||||
|
import { areaObj } from '@/store/index.js'
|
||||||
|
|
||||||
|
import { getUserNumApi } from "@/api.js"
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
code: Object,
|
code: Object,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
getUserNumApi({
|
||||||
|
...areaStore.area,
|
||||||
|
streetCode: props.code
|
||||||
|
}).then(res => {
|
||||||
|
|
||||||
|
|
||||||
|
res.data.userCountlist.forEach(item => {
|
||||||
|
userChartOption.series[0].data.push(item.newUserCount)
|
||||||
|
userChartOption.series[1].data.push(item.viewUserCount)
|
||||||
|
userChartOption.series[2].data.push(item.totalUserCount)
|
||||||
|
})
|
||||||
|
initCharts('user', userChartOption)
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const getFiveDaysFn = () => {
|
||||||
|
var today = new Date();
|
||||||
|
var dateArray = new Array();
|
||||||
|
|
||||||
|
for (var i = 0; i < 5; i++) {
|
||||||
|
var date = new Date(today);
|
||||||
|
date.setDate(today.getDate() - i);
|
||||||
|
var month = date.getMonth() + 1;
|
||||||
|
var day = Number(date.getDate());
|
||||||
|
day = day >= 10 ? day : '0' + day
|
||||||
|
var formattedDate = month + "." + day;
|
||||||
|
dateArray.unshift(formattedDate);
|
||||||
|
}
|
||||||
|
|
||||||
|
return dateArray
|
||||||
|
}
|
||||||
|
|
||||||
const userChartOption = {
|
const userChartOption = {
|
||||||
color: [
|
color: [
|
||||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||||
|
|
@ -71,7 +103,7 @@ const userChartOption = {
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
|
data: getFiveDaysFn()
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
|
|
@ -95,7 +127,7 @@ const userChartOption = {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
data: [320, 332, 301, 334, 390, 330, 320],
|
data: [],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: "#384FB4",
|
borderColor: "#384FB4",
|
||||||
|
|
@ -111,7 +143,7 @@ const userChartOption = {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
data: [120, 132, 101, 134, 90, 230, 210],
|
data: [],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: "#3E54BF",
|
borderColor: "#3E54BF",
|
||||||
|
|
@ -123,7 +155,7 @@ const userChartOption = {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
data: [220, 182, 191, 234, 290, 330, 310],
|
data: [],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderColor: "#4EC1DB",
|
borderColor: "#4EC1DB",
|
||||||
|
|
@ -140,9 +172,7 @@ const initCharts = (tag, option) => {
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
document.getElementById("user").removeAttribute('_echarts_instance_');
|
|
||||||
|
|
||||||
initCharts('user', userChartOption)
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<div class="gradient-circle">
|
<div class="gradient-circle">
|
||||||
</div>
|
</div>
|
||||||
日订单数据
|
月订单数据
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
<div style="width: 100%;height:50%; transform: translateY(5vh);" id="orderData"></div>
|
||||||
|
|
@ -56,7 +56,29 @@
|
||||||
</style>
|
</style>
|
||||||
<script setup>
|
<script setup>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { onMounted ,defineProps} from "vue"
|
import { onMounted, defineProps } from "vue"
|
||||||
|
import { order_user_num_countApi } from "@/api.js"
|
||||||
|
import { areaObj } from '../../store';
|
||||||
|
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
order_user_num_countApi(
|
||||||
|
{
|
||||||
|
...areaStore.area
|
||||||
|
}
|
||||||
|
).then(res => {
|
||||||
|
orderData.series[0].data.push(res.data.orderNum)
|
||||||
|
orderData.series[0].data.push(res.data.monthOrderNum)
|
||||||
|
orderData2.series[0].data.push(res.data.orderPayNum)
|
||||||
|
orderData2.series[0].data.push(res.data.monthOrderPayNum)
|
||||||
|
initCharts('orderData', orderData)
|
||||||
|
initCharts('orderData2', orderData2)
|
||||||
|
|
||||||
|
|
||||||
|
console.log(45454)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
code: Object,
|
code: Object,
|
||||||
|
|
@ -97,7 +119,68 @@ const orderData = {
|
||||||
barWidth: 15,
|
barWidth: 15,
|
||||||
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
|
||||||
data: [120, 200],
|
data: [],
|
||||||
|
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 orderData2 = {
|
||||||
|
|
||||||
|
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: [],
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
|
|
@ -123,8 +206,6 @@ const orderData = {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 图表
|
// 图表
|
||||||
const initCharts = (tag, option) => {
|
const initCharts = (tag, option) => {
|
||||||
var chartDom = document.getElementById(tag);
|
var chartDom = document.getElementById(tag);
|
||||||
|
|
@ -135,8 +216,8 @@ onMounted(() => {
|
||||||
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
document.getElementById("orderData").removeAttribute('_echarts_instance_');
|
||||||
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
|
||||||
|
|
||||||
initCharts('orderData', orderData)
|
// initCharts('orderData', orderData)
|
||||||
initCharts('orderData2', orderData)
|
// initCharts('orderData2', orderData2)
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -3,8 +3,9 @@ import App from './App.vue'
|
||||||
import dataV from '@jiaminghi/data-view'
|
import dataV from '@jiaminghi/data-view'
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import ElementPlus from 'element-plus'
|
import ElementPlus from 'element-plus'
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||||
|
import '@vuepic/vue-datepicker/dist/main.css'
|
||||||
import {
|
import {
|
||||||
createPinia
|
createPinia
|
||||||
} from 'pinia'
|
} from 'pinia'
|
||||||
|
|
@ -14,6 +15,10 @@ import 'element-plus/dist/index.css'
|
||||||
import 'amfe-flexible'
|
import 'amfe-flexible'
|
||||||
const pinia = createPinia()
|
const pinia = createPinia()
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
app.component('VueDatePicker', VueDatePicker);
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component)
|
||||||
|
}
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(dataV)
|
app.use(dataV)
|
||||||
app.use(pinia)
|
app.use(pinia)
|
||||||
|
|
|
||||||
|
|
@ -62,4 +62,22 @@ const router = createRouter({
|
||||||
routes
|
routes
|
||||||
})
|
})
|
||||||
|
|
||||||
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
|
||||||
|
let token = localStorage.getItem("TRADE_USER")
|
||||||
|
|
||||||
|
if (to.name == "login" && token) {
|
||||||
|
next("/")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (to.name != "login" && !token) {
|
||||||
|
next("/login") //跳转
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
next() //放行
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|
@ -4,11 +4,19 @@ import {
|
||||||
|
|
||||||
export const areaObj = defineStore('counter', {
|
export const areaObj = defineStore('counter', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
userInfo:{},
|
userInfo: {},
|
||||||
|
// 普通用户请求的参数
|
||||||
area: {
|
area: {
|
||||||
// areaCode: 510524,
|
// areaCode: 510524,
|
||||||
// streetCode: 51052410
|
// streetCode: 51052410
|
||||||
|
|
||||||
|
},
|
||||||
|
// 商户请求的参数
|
||||||
|
store: {
|
||||||
|
areaCode: "",
|
||||||
|
streetCode: "",
|
||||||
|
mer_id: ""
|
||||||
|
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
getters: {},
|
getters: {},
|
||||||
|
|
@ -16,6 +24,24 @@ export const areaObj = defineStore('counter', {
|
||||||
changeArea(obj) {
|
changeArea(obj) {
|
||||||
this.area = obj
|
this.area = obj
|
||||||
},
|
},
|
||||||
|
changeUserInfo(obj) {
|
||||||
|
this.userInfo = obj
|
||||||
|
|
||||||
|
|
||||||
|
if (obj?.user?.merchant) {
|
||||||
|
let { area_id, mer_id, street_id } = obj.user.merchant
|
||||||
|
this.store.areaCode = area_id
|
||||||
|
this.store.streetCode = street_id
|
||||||
|
this.store.mer_id = mer_id
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -24,19 +24,25 @@ import { useRouter } from 'vue-router'
|
||||||
import { merchant_listApi } from "@/api.js"
|
import { merchant_listApi } from "@/api.js"
|
||||||
import { areaObj } from '@/store/index.js'
|
import { areaObj } from '@/store/index.js'
|
||||||
|
|
||||||
const areaStore=areaObj()
|
const areaStore = areaObj()
|
||||||
const route = useRouter()
|
const route = useRouter()
|
||||||
let status = ref(0)
|
let status = ref(0)
|
||||||
|
const num = (n) => {
|
||||||
|
let htmls = ''
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
htmls = htmls.concat('<input type="radio" name="rate" readonly>')
|
||||||
|
}
|
||||||
|
return htmls
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
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(
|
merchant_listApi(
|
||||||
{
|
{
|
||||||
...areaStore.area,
|
...areaStore.area,
|
||||||
status: status.value,
|
status: status.value,
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
|
|
@ -45,15 +51,10 @@ const changeTable = (num) => {
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const ShwostoreType = ref(true)
|
|
||||||
const test = () => {
|
|
||||||
console.log(6)
|
|
||||||
}
|
|
||||||
|
|
||||||
const hdClick = (e) => {
|
const hdClick = (e) => {
|
||||||
// console.log(e)
|
|
||||||
if (e.columnIndex == 10) {
|
if (e.columnIndex == 10) {
|
||||||
// alert(45)
|
|
||||||
route.replace('/storeLogin')
|
route.replace('/storeLogin')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,7 +70,7 @@ const addConfigData = (data) => {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_address}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark || '--'}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mark || '--'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_best ? "推荐" : "不推荐"}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.create_time}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.margin}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.margin}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchantCategory.category_name}</div>`,
|
||||||
|
|
@ -85,7 +86,7 @@ const addConfigData = (data) => {
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark || "--"}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark || "--"}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best ? "推荐" : "不推荐"}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.margin}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.margin}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchantCategory.category_name}</div>`,
|
||||||
|
|
|
||||||
|
|
@ -12,18 +12,16 @@
|
||||||
v-if="!ShwostoreType">
|
v-if="!ShwostoreType">
|
||||||
<div @click="initProduct(item.type)" class="manageBtn " v-for="(item) in proFilterList"
|
<div @click="initProduct(item.type)" class="manageBtn " v-for="(item) in proFilterList"
|
||||||
:class="{ actmanageBtn: type == item.type }">{{ item.name }}</div>
|
: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>
|
||||||
<div class="table" v-if="ShwostoreType && configs.data.length">
|
<div class="table" v-if="ShwostoreType && configs.data.length">
|
||||||
|
|
||||||
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
|
||||||
</div>
|
</div>
|
||||||
<div class="table" v-if="!ShwostoreType && configs2.data.length">
|
<div class="table" v-if="!ShwostoreType && configs2.data.length">
|
||||||
|
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
|
||||||
|
<!-- <scrollTable :config="configs2" style="width:95vw;height:100%"></scrollTable> -->
|
||||||
|
|
||||||
<scrollTable :config="configs2" style="width:95vw;height:100%"></scrollTable>
|
|
||||||
<!-- <dv-scroll-board :config="configs2" style="width:95vw;height:100%" /> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,7 +33,7 @@
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
import { getProductCategoryListApi, getProductListApi, product_status_filterApi } from "@/api.js"
|
import { getProductCategoryListApi, getProductListApi, product_status_filterApi } from "@/api.js"
|
||||||
import { areaObj } from "../store";
|
import { areaObj } from "../store";
|
||||||
import scrollTable from "@/components/scrollTable.vue"
|
import scrollTable from "@/components/scrollTable.vue" // 五角星样式，有用
|
||||||
|
|
||||||
const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
@ -59,14 +57,11 @@ const initProduct = (num) => {
|
||||||
type: type.value
|
type: type.value
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
|
||||||
console.log(res.data.list)
|
|
||||||
a(configs2, res.data.list, true)
|
a(configs2, res.data.list, true)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let proFilterList = reactive([])
|
let proFilterList = reactive([])
|
||||||
|
|
||||||
product_status_filterApi({
|
product_status_filterApi({
|
||||||
|
|
@ -99,9 +94,15 @@ const tableClick = (e) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
const num = (n) => {
|
||||||
|
let htmls = ''
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
htmls = htmls.concat('<input type="radio" name="rate" readonly>')
|
||||||
|
}
|
||||||
|
return htmls
|
||||||
|
|
||||||
|
}
|
||||||
const ShwostoreType = ref(true)
|
const ShwostoreType = ref(true)
|
||||||
|
|
||||||
const a = (aaa, data, flag) => {
|
const a = (aaa, data, flag) => {
|
||||||
if (flag) {
|
if (flag) {
|
||||||
|
|
||||||
|
|
@ -110,17 +111,20 @@ const a = (aaa, data, flag) => {
|
||||||
aaa.data.push(
|
aaa.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;' >
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;dislay:flex;align-items:center'>
|
||||||
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
|
<img src='${item.image}' style='width:25px;height:25px;margin-top:1px'>
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.store_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant?.mer_name || '--'}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.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.merchant?.is_trader ? '自营' : '非自营' || '--'}</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;'>${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;'>${item.storeCategory?.cate_name || '--'}</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].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.attrValue[0].stock}</div>`,
|
||||||
`${item.star}`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||||
|
${num(item.star)}
|
||||||
|
</div>`,
|
||||||
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
@ -128,16 +132,24 @@ const a = (aaa, data, flag) => {
|
||||||
aaa.data.push(
|
aaa.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;'>${i + 1}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
`<div style='width: 100%;text-align: center; height: 40px; color: aliceblue; background: #102B3E;dislay:flex;align-items:center;box-sizing: border-box; padding-top: 5px;'>
|
||||||
<img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`,
|
<img src='${item.image}' style='width:25px;height:25px;margin-top:1px'>
|
||||||
|
|
||||||
|
</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.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.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.merchant?.is_trader ? '自营' : '非自营' || '--'}</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;'>${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;'>${item.storeCategory?.cate_name || "--"}</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].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;'>${item.attrValue[0].stock}</div>`,
|
||||||
` ${item.star}`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
||||||
|
|
||||||
|
${num(item.star)}
|
||||||
|
|
||||||
|
</div>`,
|
||||||
|
|
||||||
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
@ -154,7 +166,7 @@ const a = (aaa, data, flag) => {
|
||||||
`<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.cate_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.cate_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;dislay:flex;align-items:center'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;dislay:flex;align-items:center'>
|
||||||
<img src='${item.pic}' style='width:25px;height:25px;margin-top:5px'>
|
<img src='${item.pic}' style='width:25px;height:25px;margin-top:5px;position:re'>
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_show ? '显示' : '不显示'}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_show ? '显示' : '不显示'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_hot ? '推荐' : '不推荐'}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.is_hot ? '推荐' : '不推荐'}</div>`,
|
||||||
|
|
@ -182,6 +194,7 @@ const a = (aaa, data, flag) => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
|
||||||
|
|
||||||
}
|
}
|
||||||
const configs = reactive({
|
const configs = reactive({
|
||||||
|
|
@ -252,6 +265,8 @@ onMounted(() => {
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
// padding-top: 5px;
|
||||||
|
// transform: translateY(5px);
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|
@ -279,19 +294,17 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.act-btn {
|
.act-btn {
|
||||||
|
|
||||||
background-image: url('/static/index/actbg.png');
|
background-image: url('/static/index/actbg.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
border: none;
|
border: none;
|
||||||
// border-bottom: 6px solid #BF6D5D
|
|
||||||
// border-bottom: 6px solid #BF6D5D;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 75vh;
|
height: 75vh;
|
||||||
margin-top: 2vh;
|
margin-top: 0vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -309,23 +322,37 @@ onMounted(() => {
|
||||||
|
|
||||||
.actmanageBtn {
|
.actmanageBtn {
|
||||||
background-image: url('/static/index/actbg2.png');
|
background-image: url('/static/index/actbg2.png');
|
||||||
// background-size: 100% 100%;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
:deep(.ceil) {
|
:deep(.ceil) {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
margin-right: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.header-item) {
|
:deep(.header-item) {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
// transform: translateY(10px);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.sjx {}
|
[type="radio"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
-webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='11' viewBox='0 0 12 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0l1.693 3.67 4.013.476L8.74 6.89l.788 3.964L6 8.88l-3.527 1.974.788-3.964L.294 4.146l4.013-.476L6 0z' fill='%23F67600'/%3E%3C/svg%3E");
|
||||||
|
-webkit-mask-size: 20px;
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
-webkit-mask-position: center;
|
||||||
|
background-color: coral;
|
||||||
|
/*默认是选中的样式，橙色*/
|
||||||
|
margin: 0;
|
||||||
|
transition: .2s;
|
||||||
|
}
|
||||||
|
|
||||||
.row {}
|
[type="radio"]:checked~[type="radio"] {
|
||||||
|
background-color: #E8EAED;
|
||||||
|
/*未选中的样式，灰色*/
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -57,15 +57,6 @@
|
||||||
item[1].slice(0, -1) }}</span>元</span>
|
item[1].slice(0, -1) }}</span>元</span>
|
||||||
<span>{{ item[2] }}</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>
|
|
||||||
</div>
|
|
||||||
<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;">
|
<div class="pop-li" style="margin-top: 3vh;">
|
||||||
充值金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.bill.number
|
充值金额: <span style="margin: 0 2vw;"><span class="price">{{ detailData.bill.number
|
||||||
|
|
@ -140,7 +131,7 @@ import { useRouter } from 'vue-router'
|
||||||
import Bill from "@/components/Bill.vue"
|
import Bill from "@/components/Bill.vue"
|
||||||
import { financial_record_titleApi, financial_recordApi, financial_record_detailApi, financial_record_detailApi2, bill_listApi, withdraw_listApi } from "@/api.js"
|
import { financial_record_titleApi, financial_recordApi, financial_record_detailApi, financial_record_detailApi2, bill_listApi, withdraw_listApi } from "@/api.js"
|
||||||
import { areaObj } from '@/store/index.js'
|
import { areaObj } from '@/store/index.js'
|
||||||
const areaStore=areaObj()
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -223,12 +214,21 @@ const billList = reactive([
|
||||||
num: 1245
|
num: 1245
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
const testList = [
|
||||||
|
|
||||||
|
{
|
||||||
|
uid: "sadsa",
|
||||||
|
nickname: "sdasd",
|
||||||
|
number: 44212,
|
||||||
|
title: "asasa",
|
||||||
|
mark: "assdfjhdsjh",
|
||||||
|
create_time: '2020-12-10'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
financial_record_titleApi(
|
financial_record_titleApi(
|
||||||
{
|
{
|
||||||
...areaStore.area
|
...areaStore.area
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -244,8 +244,7 @@ const changeTable = (type, num) => {
|
||||||
configs.data.splice(0, configs.data.length)
|
configs.data.splice(0, configs.data.length)
|
||||||
withdraw_listApi(
|
withdraw_listApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50,
|
limit: 50,
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -256,20 +255,22 @@ const changeTable = (type, num) => {
|
||||||
configs1.data.splice(0, configs1.data.length)
|
configs1.data.splice(0, configs1.data.length)
|
||||||
bill_listApi(
|
bill_listApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50,
|
limit: 50,
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
addDta(res.data.list)
|
addDta(res.data.list)
|
||||||
|
// addDta(testList)
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type == 2) {
|
if (type == 2) {
|
||||||
configs2.data.splice(0, configs2.data.length)
|
configs2.data.splice(0, configs2.data.length)
|
||||||
financial_recordApi({
|
financial_recordApi({
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50,
|
limit: 50,
|
||||||
type: num
|
type: num
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
|
|
@ -281,43 +282,68 @@ const changeTable = (type, num) => {
|
||||||
|
|
||||||
headerIndex.value = type
|
headerIndex.value = type
|
||||||
addConfigHead()
|
addConfigHead()
|
||||||
// a(configList[headerIndex.value], congigData[headerIndex.value])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const hdClick = (e) => {
|
const hdClick = (e) => {
|
||||||
if (e.columnIndex == 10) {
|
if (e.columnIndex == 10) {
|
||||||
// route.push('/storeLogin')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
const extractTypeFn = (type) => {
|
||||||
|
if (type == 0) return "银行卡"
|
||||||
|
if (type == 1) return "支付宝"
|
||||||
|
if (type == 2) return "微信"
|
||||||
|
if (type == 3) return "零钱"
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusFn = (type) => {
|
||||||
|
if (type == -1) return "未通过"
|
||||||
|
if (type == 0) return "审核中"
|
||||||
|
if (type == 1) return "已提现"
|
||||||
|
}
|
||||||
|
|
||||||
const addDta = (data) => {
|
const addDta = (data) => {
|
||||||
|
|
||||||
data.reverse().forEach((item, i) => {
|
data.reverse().forEach((item, i) => {
|
||||||
if (headerIndex.value == 0) {
|
if (headerIndex.value == 0) {
|
||||||
if (i % 2 == 0) {
|
if (i % 2 == 0) {
|
||||||
configs1.data.push(
|
configs.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;'>${i + 1}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||||
|
<img src=${item.extract_pic} style='width:30px;height:30px'>
|
||||||
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.number}</div>`,
|
`<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.title}</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.mark}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.extract_price}</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;'>${extractTypeFn(item.extract_type)}</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.bank_code}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${statusFn(item.status)}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.fail_msg || '--'}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time || '--'}</div>`,
|
||||||
|
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
configs1.data.push(
|
configs.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.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;'>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.number}</div>`,
|
<img src=${item.extract_pic} style='width:30px;height:30px'>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.title}</div>`,
|
</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.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.uid}</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.extract_price}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${extractTypeFn(item.extract_type)}</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.bank_code}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${statusFn(item.status)}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.fail_msg || '--'}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time || '--'}</div>`,
|
||||||
|
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
@ -445,7 +471,6 @@ const addConfigHead = () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -461,7 +486,7 @@ const hdClick3 = (e) => {
|
||||||
|
|
||||||
if (billType.value == 1) {
|
if (billType.value == 1) {
|
||||||
financial_record_detailApi(
|
financial_record_detailApi(
|
||||||
{ areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
|
{ ...areaStore.area, date: billData[e.rowIndex].time }
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
||||||
for (let key in res.data) {
|
for (let key in res.data) {
|
||||||
|
|
@ -472,7 +497,7 @@ const hdClick3 = (e) => {
|
||||||
}
|
}
|
||||||
if (billType.value == 2) {
|
if (billType.value == 2) {
|
||||||
financial_record_detailApi2(
|
financial_record_detailApi2(
|
||||||
{ areaCode: 510524, streetCode: 510524100, date: billData[e.rowIndex].time }
|
{ ...areaStore.area, date: billData[e.rowIndex].time }
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
||||||
for (let key in res.data) {
|
for (let key in res.data) {
|
||||||
|
|
@ -494,8 +519,7 @@ onMounted(() => {
|
||||||
changeTable(0)
|
changeTable(0)
|
||||||
addConfigHead()
|
addConfigHead()
|
||||||
financial_recordApi({
|
financial_recordApi({
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50
|
limit: 50
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
addDta(res.data.list)
|
addDta(res.data.list)
|
||||||
|
|
|
||||||
|
|
@ -34,14 +34,23 @@ import bottomLeft from "@/components/index/bottomLeft.vue"
|
||||||
import bottomCenter from "@/components/index/bottomCenter.vue"
|
import bottomCenter from "@/components/index/bottomCenter.vue"
|
||||||
import bottomRight from "@/components/index/bottomRight.vue"
|
import bottomRight from "@/components/index/bottomRight.vue"
|
||||||
import { areaObj } from '@/store/index.js'
|
import { areaObj } from '@/store/index.js'
|
||||||
|
import { useRouter } from "vue-router"
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const areaStore = areaObj()
|
const areaStore = areaObj()
|
||||||
|
console.log(areaStore.areaCodes, 45454)
|
||||||
|
|
||||||
|
|
||||||
const areaCodes = reactive({
|
const areaCodes = reactive({
|
||||||
...areaStore.area
|
...areaStore.area
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
console.log(areaCodes,44545)
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,27 @@
|
||||||
<div class="login-box">
|
<div class="login-box">
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
||||||
|
<div style="position: relative;margin-bottom: 3VH;">
|
||||||
|
<el-select v-model="role" placeholder="请选择你的身份" @change="test" :teleported="false" class="select_box">
|
||||||
|
<el-option label="商户" :value="1" />
|
||||||
|
<el-option label="普通用户" :value="2" />
|
||||||
|
<el-option label="镇" :value="3" />
|
||||||
|
</el-select>
|
||||||
|
<div style="color: red;position: absolute;" v-show="isRole">请选择</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="position: relative;margin-bottom: 3VH;">
|
<div style="position: relative;margin-bottom: 3VH;">
|
||||||
<img src="/static/login/ZH.png" alt="" class="accont-icon">
|
<img src="/static/login/ZH.png" alt="" class="accont-icon">
|
||||||
<input class="ipt" type="text" placeholder="请输入账号" v-model="account">
|
<input class="ipt" type="text" placeholder="请输入账号" v-model="account">
|
||||||
<div style="color: red;" v-show="isAccount">请输入账号</div>
|
<div style="color: red;position: absolute;" v-show="isAccount">请输入账号</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="position: relative;margin-bottom: 3VH;">
|
<div style="position: relative;margin-bottom: 3VH;">
|
||||||
<img src="/static/login/MM.png" alt="" class="accont-icon" style="">
|
<img src="/static/login/MM.png" alt="" class="accont-icon" style="">
|
||||||
<input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
|
<input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password"
|
||||||
<div style="color: red;" v-show="isPassword">请输入密码</div>
|
@keyup.enter.native="submit">
|
||||||
|
<div style="color: red;position: absolute;" v-show="isPassword">请输入密码</div>
|
||||||
<img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
|
<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">
|
<img src="/static/login/BKH.png" v-else @click="show = true" class="show">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -23,6 +35,107 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive } from "vue"
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { loginApi, storeLoginApi } from "@/api.js"
|
||||||
|
import { areaObj } from "@/store/index.js"
|
||||||
|
const areaStroe = areaObj()
|
||||||
|
const router = useRouter()
|
||||||
|
const role = ref(null)
|
||||||
|
const show = ref(false)
|
||||||
|
const account = ref('17685151643')
|
||||||
|
const password = ref('123456')
|
||||||
|
const isAccount = ref(false)
|
||||||
|
const isPassword = ref(false)
|
||||||
|
const isRole = ref(false)
|
||||||
|
const submit = () => {
|
||||||
|
|
||||||
|
if (!role.value) {
|
||||||
|
isRole.value = true;
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else isRole.value = false;
|
||||||
|
if (!account.value) {
|
||||||
|
isAccount.value = true;
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else isAccount.value = false;
|
||||||
|
if (!password.value) {
|
||||||
|
isPassword.value = true;
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
else isPassword.value = false;
|
||||||
|
|
||||||
|
|
||||||
|
if (role.value == 1) {
|
||||||
|
|
||||||
|
storeLoginApi(
|
||||||
|
{
|
||||||
|
account: account.value,
|
||||||
|
password: password.value
|
||||||
|
}
|
||||||
|
).then(res => {
|
||||||
|
res.data.role = role.value
|
||||||
|
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
||||||
|
router.replace('/storeLogin')
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
if (role.value == 2) {
|
||||||
|
|
||||||
|
loginApi({
|
||||||
|
account: account.value,
|
||||||
|
password: password.value
|
||||||
|
}).then(res => {
|
||||||
|
res.data.role = role.value
|
||||||
|
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
||||||
|
let { area_code, street_code } = res.data.user
|
||||||
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
||||||
|
router.replace('/')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (role.value == 3) {
|
||||||
|
|
||||||
|
loginApi({
|
||||||
|
account: account.value,
|
||||||
|
password: password.value
|
||||||
|
}).then(res => {
|
||||||
|
res.data.role = role.value
|
||||||
|
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
||||||
|
let { area_code, street_code } = res.data.user
|
||||||
|
areaStroe.changeArea({ areaCode: area_code, streetCode: street_code })
|
||||||
|
router.replace('/townDetail?code=510524102')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const test = () => {
|
||||||
|
|
||||||
|
if (role.value == 1) {
|
||||||
|
submit()
|
||||||
|
}
|
||||||
|
if (role.value == 2) {
|
||||||
|
account.value = '泸县'
|
||||||
|
password.value = 'luxain'
|
||||||
|
submit()
|
||||||
|
|
||||||
|
}
|
||||||
|
if (role.value == 3) {
|
||||||
|
account.value = '叙永镇'
|
||||||
|
password.value = 'xuyongzheng'
|
||||||
|
submit()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login-box {
|
.login-box {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
@ -96,54 +209,66 @@
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</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('luxian')
|
|
||||||
const isAccount = ref(false)
|
|
||||||
const isPassword = ref(false)
|
|
||||||
|
|
||||||
|
.select_box {
|
||||||
|
|
||||||
|
// 默认placeholder
|
||||||
const submit = () => {
|
:deep .el-input__inner::placeholder {
|
||||||
|
font-size: 14px;
|
||||||
if (!account.value) {
|
font-weight: 500;
|
||||||
isAccount.value = true;
|
color: white;
|
||||||
return
|
|
||||||
}
|
}
|
||||||
else isAccount.value = false;
|
|
||||||
if (!password.value) {
|
|
||||||
isPassword.value = true;
|
|
||||||
|
|
||||||
return
|
// 默认框状态样式更改
|
||||||
|
:deep .el-input__wrapper {
|
||||||
|
height: 35px;
|
||||||
|
width: 15.9vw;
|
||||||
|
background-color: #123266 !important;
|
||||||
|
box-shadow: 0 0 0 1px #194FA3 inset !important;
|
||||||
|
--el-select-focus-border-color: red !important;
|
||||||
|
--el-select-hover-border-color: red !important;
|
||||||
}
|
}
|
||||||
else isPassword.value = false;
|
|
||||||
|
|
||||||
|
// 修改下拉框样式-点击框focus
|
||||||
|
:deep .is-focus .el-input__wrapper {
|
||||||
|
box-shadow: #194FA3 inset !important;
|
||||||
|
--el-select-focus-border-color: #194FA3 !important;
|
||||||
|
--el-select-hover-border-color: #194FA3 !important;
|
||||||
|
}
|
||||||
|
|
||||||
loginApi({
|
:deep .el-select__caret {
|
||||||
account: account.value,
|
color: #194FA3 !important; // 清除按钮
|
||||||
password: password.value
|
}
|
||||||
}).then(res => {
|
|
||||||
console.log(res)
|
|
||||||
localStorage.setItem("TRADE_USER", JSON.stringify(res.data))
|
|
||||||
router.replace('/')
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
return
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// alert(isAccount.value)
|
|
||||||
|
|
||||||
|
:deep .el-input__inner {
|
||||||
|
color: white !important; // 选中字体色
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 下拉框-展开样式
|
||||||
|
.el-select-dropdown__item.selected {
|
||||||
|
// background-color: #83e818!important; // 选中
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select-dropdown__item.hover {
|
||||||
|
background-color: #194FA3 !important; // hover
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
:deep .el-dropdown-menu__item:not(.is-disabled) {
|
||||||
|
// color: #182F23!important; // disabled
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select-dropdown__item {
|
||||||
|
color: white !important; // 下拉项颜色
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep .el-popper {
|
||||||
|
background-color: #123266 !important; // 展开下拉背景
|
||||||
|
border: 1px solid #409EFE !important; // 展开下拉边框
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep .el-popper .el-popper__arrow::before {
|
||||||
|
border-top: 1px solid #409EFE !important; // 箭头按钮边框
|
||||||
|
background-color: #409EFE !important; // 箭头按钮背景色
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -4,23 +4,15 @@
|
||||||
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="btns">
|
<div class="btns">
|
||||||
|
|
||||||
<div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
|
<div class="btn" :class="btnFlag[0] ? 'act-btn' : ''" @click="hdClick(0)">订单列表</div>
|
||||||
<div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
|
<div class="btn" :class="btnFlag[1] ? 'act-btn' : ''" @click="hdClick(1)">退款单</div>
|
||||||
<div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
|
<div class="btn" :class="btnFlag[2] ? 'act-btn' : ''" @click="hdClick(2)">核销订单</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-show="btnFlag[0] || btnFlag[2]">
|
<div v-show="btnFlag[0] || btnFlag[2]">
|
||||||
<div style="color: white;display: flex;">
|
<div style="color: white;display: flex;">
|
||||||
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
|
<Bill v-for="(item, key) in billList" :key="index" :data="item"></Bill>
|
||||||
|
|
||||||
<!-- <div style="display: flex;margin-left: 5VW;" v-show="btnFlag[2]">
|
|
||||||
<Bill v-for="(item, key) in billList1" :key="index" :data="item"></Bill>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="table" v-if="configs.data.length">
|
<div class="table" v-if="configs.data.length">
|
||||||
<dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
|
<dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
|
||||||
style="width:95vw;height:70vh" />
|
style="width:95vw;height:70vh" />
|
||||||
|
|
@ -29,7 +21,6 @@
|
||||||
<dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
|
<dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
|
||||||
style="width:95vw;height:89vh" />
|
style="width:95vw;height:89vh" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,11 +33,7 @@ import { ref, reactive, onMounted } from "vue"
|
||||||
import Bill from "@/components/Bill.vue"
|
import Bill from "@/components/Bill.vue"
|
||||||
import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi, take_order_count_titleApi } from "@/api.js"
|
import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi, take_order_count_titleApi } from "@/api.js"
|
||||||
import { areaObj } from "../store";
|
import { areaObj } from "../store";
|
||||||
const areaStore=areaObj()
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
const value = ref(1)
|
|
||||||
|
|
||||||
const billList = reactive([
|
const billList = reactive([
|
||||||
{
|
{
|
||||||
icon: "DD",
|
icon: "DD",
|
||||||
|
|
@ -64,7 +51,6 @@ const billList = reactive([
|
||||||
},
|
},
|
||||||
|
|
||||||
])
|
])
|
||||||
|
|
||||||
const billList1 = reactive([
|
const billList1 = reactive([
|
||||||
{
|
{
|
||||||
icon: "WX",
|
icon: "WX",
|
||||||
|
|
@ -83,6 +69,26 @@ const billList1 = reactive([
|
||||||
|
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const statusMap = (num) => {
|
||||||
|
|
||||||
|
// const statusMap = {
|
||||||
|
// '0': '待审核',
|
||||||
|
// '-1': '审核未通过',
|
||||||
|
// '1': '待退货',
|
||||||
|
// '2': '待收货',
|
||||||
|
// '3': '已退款'
|
||||||
|
// }
|
||||||
|
if (num == 0) return '待审核';
|
||||||
|
if (num == 1) return '待退货';
|
||||||
|
if (num == 2) return '待收货';
|
||||||
|
if (num == 3) return '已退款';
|
||||||
|
|
||||||
|
|
||||||
|
if (num == -1) return '审核未通过';
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const orderStatus = (status) => {
|
const orderStatus = (status) => {
|
||||||
if (status == 0) return "待发货"
|
if (status == 0) return "待发货"
|
||||||
|
|
@ -94,7 +100,6 @@ const orderStatus = (status) => {
|
||||||
if (status == 11) return "尾款超时未付"
|
if (status == 11) return "尾款超时未付"
|
||||||
if (status == -1) return "已退款"
|
if (status == -1) return "已退款"
|
||||||
}
|
}
|
||||||
|
|
||||||
const payType = (type) => {
|
const payType = (type) => {
|
||||||
if (type == 0) return "余额支付"
|
if (type == 0) return "余额支付"
|
||||||
if (type == 1) return "微信支付"
|
if (type == 1) return "微信支付"
|
||||||
|
|
@ -106,8 +111,24 @@ const payType = (type) => {
|
||||||
if (type == 8) return "信用购-先货后款"
|
if (type == 8) return "信用购-先货后款"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const refundStatusFn = (item) => {
|
||||||
|
// <span v-if="scope.row.order.is_del === 0">
|
||||||
|
// <span v-if="scope.row.order.paid === 0">待付款</span>
|
||||||
|
// <span v-else>
|
||||||
|
// <span v-if="scope.row.order.order_type === 0 || scope.row.order.order_type === 2">{{ scope.row.order.status | orderStatusFilter }}</span>
|
||||||
|
// <span v-else>{{ scope.row.order.status | takeOrderStatusFilter }}</span>
|
||||||
|
// </span>
|
||||||
|
// </span>
|
||||||
|
// <span v-else>已删除</span>
|
||||||
|
if (item.order.is_del == 0) {
|
||||||
|
if (item.order.paid == 0) return "待付款"
|
||||||
|
else {
|
||||||
|
if (item.order.order_type == 0 || item.order.order_type === 2) return orderStatus(item.order.status)
|
||||||
|
else return statusMap(item.order.status)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else return '已删除'
|
||||||
|
}
|
||||||
const btnFlag = reactive([true, false, false])
|
const btnFlag = reactive([true, false, false])
|
||||||
const hdClick = (i) => {
|
const hdClick = (i) => {
|
||||||
btnFlag.forEach((item, index) => {
|
btnFlag.forEach((item, index) => {
|
||||||
|
|
@ -121,7 +142,7 @@ const hdClick = (i) => {
|
||||||
configs.data.splice(0, configs.data.length)
|
configs.data.splice(0, configs.data.length)
|
||||||
order_listApi(
|
order_listApi(
|
||||||
{
|
{
|
||||||
...areaStore.area,
|
...areaStore.area,
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -129,8 +150,7 @@ const hdClick = (i) => {
|
||||||
})
|
})
|
||||||
order_list_count_titleApi(
|
order_list_count_titleApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -145,8 +165,7 @@ const hdClick = (i) => {
|
||||||
|
|
||||||
refund_order_listApi(
|
refund_order_listApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -158,8 +177,7 @@ const hdClick = (i) => {
|
||||||
configs3.data.splice(0, configs.data.length)
|
configs3.data.splice(0, configs.data.length)
|
||||||
take_order_listApi(
|
take_order_listApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -168,8 +186,7 @@ const hdClick = (i) => {
|
||||||
|
|
||||||
take_order_count_titleApi(
|
take_order_count_titleApi(
|
||||||
{
|
{
|
||||||
areaCode: 510524,
|
...areaStore.area,
|
||||||
streetCode: 510524100,
|
|
||||||
limit: 50
|
limit: 50
|
||||||
}
|
}
|
||||||
).then(res => {
|
).then(res => {
|
||||||
|
|
@ -185,7 +202,6 @@ const hdClick = (i) => {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const tableHdClick = (e) => {
|
const tableHdClick = (e) => {
|
||||||
if (e.ceil) {
|
if (e.ceil) {
|
||||||
if (e.columnIndex == 0) {
|
if (e.columnIndex == 0) {
|
||||||
|
|
@ -194,8 +210,7 @@ const tableHdClick = (e) => {
|
||||||
let tag2 = document.getElementById(`card${e.rowIndex}`)
|
let tag2 = document.getElementById(`card${e.rowIndex}`)
|
||||||
tag.style.display = 'none'
|
tag.style.display = 'none'
|
||||||
tag2.style.display = 'block'
|
tag2.style.display = 'block'
|
||||||
console.log(tag.style.display)
|
|
||||||
console.log(tag2.style.display)
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
let tag = document.getElementsByClassName(`order`)
|
let tag = document.getElementsByClassName(`order`)
|
||||||
|
|
@ -205,8 +220,6 @@ const tableHdClick = (e) => {
|
||||||
tag2[i].style.display = 'none'
|
tag2[i].style.display = 'none'
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(tag[0].style.display)
|
|
||||||
console.log(tag2[0].style.display)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -257,29 +270,29 @@ const addConfigData = (data) => {
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>订单类型</span>
|
<span>订单类型</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.order_type ? "自提" : "普通"}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>用户备注</span>
|
<span>用户备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.remark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商家备注</span>
|
<span>商家备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.admin_mark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user.nickname}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.user.nickname}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'} </div>`,
|
||||||
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
||||||
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
|
<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.store_name} </span>
|
||||||
<span>${item.orderProduct[0].cart_info.product.unit_name} </span>
|
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${orderStatus(item.status)}</div>`,
|
||||||
|
|
@ -309,34 +322,34 @@ const addConfigData = (data) => {
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||||
<span>总单号：</span>
|
<span>总单号：</span>
|
||||||
<span>35356565656565</span>
|
<span>${item.groupOrder.group_order_sn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>下单时间</span>
|
<span>下单时间</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.pay_time}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商品总价</span>
|
<span>商品总价</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.total_price}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>订单类型</span>
|
<span>订单类型</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.order_type ? "自提" : "普通"}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>用户备注</span>
|
<span>用户备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.remark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商家备注</span>
|
<span>商家备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.admin_mark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -346,12 +359,15 @@ const addConfigData = (data) => {
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
||||||
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
|
<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.store_name} </span>
|
||||||
<span>${item.orderProduct[0].cart_info.product.unit_name} </span>
|
|
||||||
|
|
||||||
|
|
||||||
|
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -372,8 +388,6 @@ const addConfigData = (data) => {
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
const addConfigData2 = (data) => {
|
const addConfigData2 = (data) => {
|
||||||
data.forEach((item, i) => {
|
data.forEach((item, i) => {
|
||||||
|
|
@ -401,34 +415,34 @@ const addConfigData2 = (data) => {
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||||
<span>总单号：</span>
|
<span>总单号：</span>
|
||||||
<span>35356565656565</span>
|
<span>${item.order.order_sn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>下单时间</span>
|
<span>申请退款时间</span>
|
||||||
<span>${item.pay_time}</span>
|
<span>${item.create_time}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商品总价</span>
|
<span>退款商品总价</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.refundProduct[0].refund_price}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>订单类型</span>
|
<span>退款商品总数</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.refundProduct[0].refund_num}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>用户备注</span>
|
<span>用户备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.admin_mark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商家备注</span>
|
<span>商家备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.mer_mark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -436,23 +450,23 @@ const addConfigData2 = (data) => {
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >${item.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;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.mer_delivery_address || '--'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;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'>
|
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
|
||||||
<span>
|
<span>
|
||||||
${item.refundProduct[0].product.cart_info.product.store_name}
|
${item.refundProduct[0].product.cart_info.product.store_name}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
${item.refundProduct[0].product.cart_info.product.unit_name}
|
${item.refundProduct[0].product.product_num} ${item.refundProduct[0].product.cart_info.product.unit_name}
|
||||||
</span>
|
</span>
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||||
|
|
||||||
<sapn> ${item.status} </span>
|
<sapn> ${statusMap(item.status) || ''} </span>
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
<sapn>退款原因： ${item.refund_message} </span>
|
||||||
<sapn>状态变更时间 ${item.status_time} </span>
|
<sapn>状态变更时间 ${item.status_time} </span>
|
||||||
|
|
||||||
|
|
@ -478,51 +492,51 @@ const addConfigData2 = (data) => {
|
||||||
'>
|
'>
|
||||||
</div> ${item.refund_order_sn}</div>
|
</div> ${item.refund_order_sn}</div>
|
||||||
|
|
||||||
<div class='card' id='card${i}'
|
<div class='card' id='card${i}'
|
||||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||||
<span>总单号：</span>
|
<span>总单号：</span>
|
||||||
<span>35356565656565</span>
|
<span>${item.order.order_sn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>下单时间</span>
|
<span>申请退款时间</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.create_time}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
<span>退款商品总价</span>
|
||||||
|
<span>${item.refundProduct[0].refund_price}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
<span>退款商品总数</span>
|
||||||
|
<span>${item.refundProduct[0].refund_num}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
<span>用户备注</span>
|
||||||
|
<span>${item.admin_mark || '--'}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
<span>商家备注</span>
|
||||||
|
<span>${item.mer_mark || '--'}</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
|
|
||||||
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
|
|
||||||
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
|
|
||||||
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>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.user.nickname}</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
|
||||||
</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_delivery_address || '--'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.refund_price}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px' '>
|
||||||
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
|
<img src=${item.refundProduct[0].product.cart_info.product.image} style='width:30px;height:30px'>
|
||||||
|
|
@ -530,11 +544,15 @@ const addConfigData2 = (data) => {
|
||||||
${item.refundProduct[0].product.cart_info.product.store_name}
|
${item.refundProduct[0].product.cart_info.product.store_name}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
${item.refundProduct[0].product.cart_info.product.unit_name}
|
${item.refundProduct[0].product.product_num} ${item.refundProduct[0].product.cart_info.product.unit_name}
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>
|
||||||
<sapn> ${item.status} </span>
|
<sapn>
|
||||||
|
|
||||||
|
|
||||||
|
${statusMap(item.status) || ''} </span>
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
<sapn>退款原因： ${item.refund_message} </span>
|
||||||
<sapn>状态变更时间 ${item.status_time} </span>
|
<sapn>状态变更时间 ${item.status_time} </span>
|
||||||
|
|
||||||
|
|
@ -573,7 +591,7 @@ const addConfigData3 = (data) => {
|
||||||
top:50%;
|
top:50%;
|
||||||
left:0
|
left:0
|
||||||
'>
|
'>
|
||||||
</div> ${item.order_sn}</div>
|
</div> ${item.groupOrder.group_order_sn}</div>
|
||||||
|
|
||||||
<div class='card' id='card${i}'
|
<div class='card' id='card${i}'
|
||||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||||
|
|
@ -581,34 +599,30 @@ const addConfigData3 = (data) => {
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||||
<span>总单号：</span>
|
<span>总单号：</span>
|
||||||
<span>35356565656565</span>
|
<span>${item.groupOrder.group_order_sn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>下单时间</span>
|
<span>核销时间</span>
|
||||||
<span>${item.pay_time}</span>
|
<span>${item.pay_time}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商品总价</span>
|
<span>商品总价</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.total_price}</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="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>用户备注</span>
|
<span>用户备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.remark || "--"}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商家备注</span>
|
<span>商家备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.mark || '--'}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -617,18 +631,27 @@ const addConfigData3 = (data) => {
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >核销订单</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >核销订单</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'> ${item.user_address}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.mer_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.merchant.is_trader ? '自营' : '非自营'}</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;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
|
||||||
<sapn> ${item.status} </span>
|
<span>${item.orderProduct[0].cart_info.product.store_name} </span>
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
|
||||||
<sapn>状态变更时间 ${item.status_tiem} </span>
|
|
||||||
|
|
||||||
|
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
|
${item.pay_price}
|
||||||
|
</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.status == -1 ? "已退款" : "已核销"}</div>`,
|
||||||
|
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
|
|
@ -647,58 +670,64 @@ const addConfigData3 = (data) => {
|
||||||
left:0
|
left:0
|
||||||
'>
|
'>
|
||||||
</div> ${item.order_sn}</div>
|
</div> ${item.order_sn}</div>
|
||||||
<div class='card' id='card${i}'
|
<div class='card' id='card${i}'
|
||||||
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
|
||||||
<span>总单号：</span>
|
<span>总单号：</span>
|
||||||
<span>35356565656565</span>
|
<span>${item.groupOrder.group_order_sn}</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>下单时间</span>
|
<span>核销时间</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.pay_time}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商品总价</span>
|
<span>商品总价</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.total_price}</span>
|
||||||
</div>
|
</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
|
|
||||||
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
|
||||||
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
<span>商家备注</span>
|
<span>用户备注</span>
|
||||||
<span>2023.11.214</span>
|
<span>${item.remark || "--"}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
|
||||||
|
<span>商家备注</span>
|
||||||
|
<span>${item.mark || '--'}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>`,
|
</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>核销订单</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</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;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.mer_name}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.merchant.is_trader ? '自营' : '非自营'}</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;display:flex;box-sizing: border-box;align-items:center;justify-content: space-between;padding:0 5px'>
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.status} </span>
|
<img src='${item.orderProduct[0].cart_info.product.image}' style='width:30px;height:30px' />
|
||||||
<sapn>退款原因： ${item.refund_message} </span>
|
<span>${item.orderProduct[0].cart_info.product.store_name} </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>`,
|
|
||||||
|
<span>${item.orderProduct[0].product_num}${item.orderProduct[0].cart_info.product.unit_name} </span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>`,
|
||||||
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.pay_price} </span>
|
||||||
|
</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.status == -1 ? "已退款" : "已核销"}</div>`,
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -722,13 +751,13 @@ const configs = reactive({
|
||||||
evenRowBGC: "",
|
evenRowBGC: "",
|
||||||
rowNum: 20,
|
rowNum: 20,
|
||||||
|
|
||||||
columnWidth: [250, 170, 170, 170, 170, 500, 170, 170, 170, 200],
|
columnWidth: [250, 170, 170, 170, 170, 500, 100, 100, 330, 100],
|
||||||
header: [
|
header: [
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>收货人/订购人</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>收货人/订购人</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户类别</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>实际支付</div>`,
|
||||||
`<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>`,
|
||||||
|
|
@ -749,8 +778,8 @@ const configs2 = reactive({
|
||||||
header: [
|
header: [
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>用户信息</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名别</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户类别</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>退款金额</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>退款金额</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商品信息</div>`,
|
||||||
|
|
@ -768,11 +797,11 @@ const configs3 = reactive({
|
||||||
rowNum: 20,
|
rowNum: 20,
|
||||||
header: [
|
header: [
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单编号</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单类型</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单类别</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>订单属地</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>收货人</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>收货人</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户名称</div>`,
|
||||||
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户分类</div>`,
|
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>商户类别</div>`,
|
||||||
`<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>`,
|
||||||
|
|
@ -784,7 +813,6 @@ const configs3 = reactive({
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
hdClick(0)
|
hdClick(0)
|
||||||
// a(configs)
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,16 +10,17 @@
|
||||||
<div style="margin-top: 13vh;font-size: 20px;">商 品 数 量</div>
|
<div style="margin-top: 13vh;font-size: 20px;">商 品 数 量</div>
|
||||||
<div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF COMMODITIES</div>
|
<div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF COMMODITIES</div>
|
||||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">件</span>
|
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">{{ data.today.productNum }} <span
|
||||||
|
style="font-size: 12px;">件</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：{{ data.yesterday.productNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">周环比：{{ data.lastWeekRate.productNum }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,16 +34,17 @@
|
||||||
<div style="margin-top: 13vh;font-size: 20px;">累 计 支 付 金 额</div>
|
<div style="margin-top: 13vh;font-size: 20px;">累 计 支 付 金 额</div>
|
||||||
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED PAYMENT AMOUNT</div>
|
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED PAYMENT AMOUNT</div>
|
||||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">元</span>
|
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">{{ data.today.payPrice }} <span
|
||||||
|
style="font-size: 12px;">元</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：{{ data.yesterday.payPrice }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">周环比：{{ data.lastWeekRate.payPrice }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -57,16 +59,17 @@
|
||||||
<div style="margin-top: 13vh;font-size: 20px;">累 计 支 付 人 数</div>
|
<div style="margin-top: 13vh;font-size: 20px;">累 计 支 付 人 数</div>
|
||||||
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF PAYMENTS</div>
|
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF PAYMENTS</div>
|
||||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">人</span>
|
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">{{ data.today.payUser }} <span
|
||||||
|
style="font-size: 12px;">人</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：{{ data.yesterday.payUser }} </div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">周环比：{{ data.lastWeekRate.payUser }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -80,16 +83,17 @@
|
||||||
<div style="margin-top: 13vh;font-size: 20px;">累 计 访 客 人 数</div>
|
<div style="margin-top: 13vh;font-size: 20px;">累 计 访 客 人 数</div>
|
||||||
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF VISITORS</div>
|
<div style="margin-top: 0.5vh;color: #5C7A88;">ACCOMULATED NUMBER OF VISITORS</div>
|
||||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">人</span>
|
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;"> {{ data.today.visitNum }}<span
|
||||||
|
style="font-size: 12px;">人</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：{{ data.yesterday.visitNum }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">周环比：{{ data.lastWeekRate.visitNum }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -103,16 +107,17 @@
|
||||||
<div style="margin-top: 13vh;font-size: 20px;">关 注 店 铺 数 量</div>
|
<div style="margin-top: 13vh;font-size: 20px;">关 注 店 铺 数 量</div>
|
||||||
<div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF FOLLOWING SHOPS</div>
|
<div style="margin-top: 0.5vh;color: #5C7A88;">NUMBER OF FOLLOWING SHOPS</div>
|
||||||
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
<img src="/static/index/JR.png" style="width: 70%;margin-top: 2.5vh;" alt="">
|
||||||
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">1234 <span style="font-size: 12px;">个</span>
|
<div style="margin-top: 1vh;color: #B1E4F0;font-size: 20px;">{{ data.today.likeStore }} <span
|
||||||
|
style="font-size: 12px;">个</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
<div style="margin-top: 4vh;font-size: 10px;display: flex;justify-content: space-around;padding: 0 2VW;">
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZRSJ.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">昨日数据：{{ data.yesterday.likeStore }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;align-items: center;">
|
<div style="display: flex;align-items: center;">
|
||||||
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
<img style="width: 1vw;height: 1vw;" src="/static/index/ZHB.png" alt="">
|
||||||
<div style="color: #B7CED5;font-size: 10px; ">周环比：0.0</div>
|
<div style="color: #B7CED5;font-size: 10px; ">周环比：{{ data.lastWeekRate.likeStore }}%</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -125,17 +130,17 @@
|
||||||
|
|
||||||
<div class="ranking">
|
<div class="ranking">
|
||||||
<img src="/static/storeLogin/SPXSPH.png" class="img-cls" alt="">
|
<img src="/static/storeLogin/SPXSPH.png" class="img-cls" alt="">
|
||||||
<dv-scroll-board :config="config1" class="list" />
|
<dv-scroll-board :config="config1" v-if="config1.data.length" class="list" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ranking">
|
<div class="ranking">
|
||||||
<img src="/static/storeLogin/SPFKPH.png" class="img-cls" alt="">
|
<img src="/static/storeLogin/SPFKPH.png" class="img-cls" alt="">
|
||||||
<dv-scroll-board :config="config2" class="list" />
|
<dv-scroll-board :config="config2" v-if="config2.data.length" class="list" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ranking">
|
<div class="ranking">
|
||||||
<img src="/static/storeLogin/SPJGPH.png" class="img-cls" alt="">
|
<img src="/static/storeLogin/SPJGPH.png" class="img-cls" alt="">
|
||||||
<dv-scroll-board :config="config3" class="list" />
|
<dv-scroll-board :config="config3" v-if="config3.data.length" class="list" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -144,6 +149,12 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from "vue"
|
import { ref, reactive, onMounted } from "vue"
|
||||||
|
import { merchant_count_mainApi, merchant_product_rankingApi, merchant_product_visitApi, merchant_product_cartApi } from "@/api.js"
|
||||||
|
import { areaObj } from "../store";
|
||||||
|
|
||||||
|
const areaStore = areaObj()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const config1 = reactive({
|
const config1 = reactive({
|
||||||
oddRowBGC: "#001C2E",
|
oddRowBGC: "#001C2E",
|
||||||
|
|
@ -179,60 +190,176 @@ const config3 = reactive({
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const data = reactive(
|
||||||
|
{
|
||||||
|
"today": {
|
||||||
|
"productNum": 0,
|
||||||
|
"payPrice": 0,
|
||||||
|
"payUser": 0,
|
||||||
|
"visitNum": 0,
|
||||||
|
"likeStore": 0
|
||||||
|
},
|
||||||
|
"yesterday": {
|
||||||
|
"productNum": 56,
|
||||||
|
"payPrice": 0,
|
||||||
|
"payUser": 0,
|
||||||
|
"visitNum": 0,
|
||||||
|
"likeStore": 0
|
||||||
|
},
|
||||||
|
"lastWeekRate": {
|
||||||
|
"productNum": 1,
|
||||||
|
"payPrice": 0,
|
||||||
|
"payUser": 0,
|
||||||
|
"visitNum": 0,
|
||||||
|
"likeStore": 0
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
let total1 = ''
|
||||||
|
let total2 = ''
|
||||||
|
let total3 = ''
|
||||||
|
merchant_product_rankingApi(
|
||||||
|
{ ...areaStore.store, start_date: '2023-12-01', end_date: '2023-12-09' }
|
||||||
|
).then(res => {
|
||||||
|
total1 = res.data.totalCount
|
||||||
|
addData1(res.data.list)
|
||||||
|
})
|
||||||
|
|
||||||
|
merchant_product_visitApi(
|
||||||
|
{ ...areaStore.store, start_date: '2023-12-01', end_date: '2023-12-09' }
|
||||||
|
|
||||||
|
).then(res => {
|
||||||
|
total2 = res.data.totalCount
|
||||||
|
addData2(res.data.list)
|
||||||
|
|
||||||
|
})
|
||||||
|
merchant_product_cartApi(
|
||||||
|
{ ...areaStore.store, start_date: '2023-01-01', end_date: '2023-12-09' }
|
||||||
|
).then(res => {
|
||||||
|
total3 = res.data.totalCount
|
||||||
|
addData3(res.data.list)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const addData1 = (data) => {
|
||||||
|
data.forEach((item, i) => {
|
||||||
|
config1.data.push(
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img src="${item.cart_info.product.image}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.cart_info.product.store_name}</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:${(item.total / total1) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style=' position: relative;line-height:30px;text-align:center;' >${item.total} <span style='font-size:10px'>单</span>
|
||||||
|
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||||
|
</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
const addData2 = (data) => {
|
||||||
|
data.forEach((item, i) => {
|
||||||
|
config2.data.push(
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img src="${item.image}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name}</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:${(item.total / total2) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style=' position: relative;line-height:30px;text-align:center;' >${item.total} <span style='font-size:10px'>单</span>
|
||||||
|
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||||
|
</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
const addData3 = (data) => {
|
||||||
|
data.forEach((item, i) => {
|
||||||
|
config3.data.push(
|
||||||
|
[
|
||||||
|
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
|
`<div style='background:red;position:relative'><img src="${item.image}" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
|
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>${item.store_name}</div>`,
|
||||||
|
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width:${(item.total / total3) * 100}%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
|
`<div style=' position: relative;line-height:30px;text-align:center;' >${item.total} <span style='font-size:10px'>单</span>
|
||||||
|
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||||
|
</div>`,
|
||||||
|
]
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
merchant_count_mainApi(
|
||||||
|
|
||||||
|
{ ...areaStore.store }
|
||||||
|
).then((res) => {
|
||||||
|
for (let key in res.data) {
|
||||||
|
data[key] = res.data[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
|
|
||||||
for (let i = 0; i < 20; i++) {
|
// for (let i = 0; i < 20; i++) {
|
||||||
config3.data.push(
|
// config3.data.push(
|
||||||
[
|
// [
|
||||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
// `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
// `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
`<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>商asdasdasdssadasdasdasd品名称</div>`,
|
// `<div style='height:40px;line-height:40px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;'>商asdasdasdssadasdasdasd品名称</div>`,
|
||||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
// `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #4459CC, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
`<div style=' position: relative;line-height:30px;text-align:center;' >5495 <span style='font-size:10px'>单</span>
|
// `<div style=' position: relative;line-height:30px;text-align:center;' >5495 <span style='font-size:10px'>单</span>
|
||||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
// <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||||
</div>`,
|
// </div>`,
|
||||||
|
|
||||||
],
|
// ],
|
||||||
|
|
||||||
|
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
for (let i = 0; i < 20; i++) {
|
// for (let i = 0; i < 20; i++) {
|
||||||
config1.data.push(
|
// config1.data.push(
|
||||||
[
|
// [
|
||||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
// `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
// `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
// `<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
// `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #0292EB, #53CAE2);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
`<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
|
// `<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
|
||||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
// <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||||
</div>`,
|
// </div>`,
|
||||||
|
|
||||||
],
|
// ],
|
||||||
|
|
||||||
|
|
||||||
)
|
// )
|
||||||
} for (let i = 0; i < 20; i++) {
|
// } for (let i = 0; i < 20; i++) {
|
||||||
config2.data.push(
|
// config2.data.push(
|
||||||
[
|
// [
|
||||||
`<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
// `<div style="line-height:30px; text-align: center;background-image: url('/static/index/PM${(i + 1) <= 3 ? (i + 1) : 4}.png');width: 30px;height: 30px;background-size: cover;" >${i + 1}</div> `,
|
||||||
`<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
// `<div style='background:red;position:relative'><img :src="i" style="width: 30px;height: 30px;position:absolute" alt=""></div>`,
|
||||||
`<div style='height:40px;line-height:40px'>商品名称</div>`,
|
// `<div style='height:40px;line-height:40px'>商品名称</div>`,
|
||||||
`<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
|
// `<div style=' transform: translateY(12px); width: 100%; height: 10px; background-color: #122E3F;overflow: hidden;'> <div style=' width: 40%;height: 100%; background: linear-gradient(to right, #B15641, #52C8E1);transition: width 0.5s ease-in-out;'></div> </div>`,
|
||||||
`<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
|
// `<div style=' position: relative;line-height:30px;text-align:center' >5495 <span style='font-size:10px'>单</span>
|
||||||
<img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
// <img src="/static/index/PHBBG.png" style="position: absolute;width: 90px;height: 30px; top:0px;left:0px" alt="">
|
||||||
</div>`,
|
// </div>`,
|
||||||
|
|
||||||
],
|
// ],
|
||||||
|
|
||||||
|
|
||||||
)
|
// )
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,7 @@
|
||||||
<bottomleft :code="route.query.code"></bottomleft>
|
<bottomleft :code="route.query.code"></bottomleft>
|
||||||
</div>
|
</div>
|
||||||
<div class="c">
|
<div class="c">
|
||||||
<img class="img-cls" src="/static/town/CJYH.png" alt="">
|
<bottomCenter></bottomCenter>
|
||||||
<div id="transactionUsers" class="transactionUsers"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="r">
|
<div class="r">
|
||||||
<bottomRight :code="route.query.code"></bottomRight>
|
<bottomRight :code="route.query.code"></bottomRight>
|
||||||
|
|
@ -29,26 +28,23 @@
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import option from "./option"
|
|
||||||
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
||||||
|
import bottomCenter from "@/components/townDetail/bottomCenter.vue"
|
||||||
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import topCenter from "@/components/townDetail/topCenter.vue"
|
import topCenter from "@/components/townDetail/topCenter.vue"
|
||||||
import topLeft from "@/components/townDetail/topLeft.vue"
|
import topLeft from "@/components/townDetail/topLeft.vue"
|
||||||
import topRight from "@/components/townDetail/topRight.vue"
|
import topRight from "@/components/townDetail/topRight.vue"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
// 图表
|
|
||||||
const initCharts = (tag, option) => {
|
|
||||||
var chartDom = document.getElementById(tag);
|
|
||||||
var myChart = echarts.init(chartDom);
|
|
||||||
myChart.setOption(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
|
|
||||||
initCharts('transactionUsers', option.transactionUsersTown)
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
@ -90,59 +86,6 @@ onMounted(() => {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.product-list {
|
|
||||||
height: 70%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.product {
|
|
||||||
height: 100%;
|
|
||||||
width: 32%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.bg {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-content {
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12PX;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-icon {
|
|
||||||
width: 2vw;
|
|
||||||
height: 2vw;
|
|
||||||
position: absolute;
|
|
||||||
animation: jump 1s infinite;
|
|
||||||
top: 2vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.Views {
|
|
||||||
margin-top: 2%;
|
|
||||||
height: 25%;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
.view-content {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -170,15 +113,7 @@ onMounted(() => {
|
||||||
height: 46vh;
|
height: 46vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.user {
|
|
||||||
margin-top: 4.5vh;
|
|
||||||
position: absolute;
|
|
||||||
width: 98%;
|
|
||||||
height: 35vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -188,12 +123,6 @@ onMounted(() => {
|
||||||
height: 46vh;
|
height: 46vh;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.transactionUsers {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 40vh;
|
|
||||||
top: 5vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -208,14 +137,6 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-cls {
|
|
||||||
width: 98%;
|
|
||||||
height: 45vh;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,6 @@ export default function MapLoader() {
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch(function (error) {
|
||||||
// 处理错误情况
|
// 处理错误情况
|
||||||
console.log(error);
|
|
||||||
})
|
})
|
||||||
.finally(function () {
|
.finally(function () {
|
||||||
// 总是会执行
|
// 总是会执行
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue