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

也买你系应该

This commit is contained in:
zmj 2023-11-27 18:34:57 +08:00
parent e8edbd8f6a
commit a41f7999a9
18 changed files with 1423 additions and 723 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -14,6 +14,8 @@ import Header from "@/components/Header.vue"
</template>
<style lang="scss">
@import '/static/font/font.css';
* {
margin: 0;
padding: 0;

9
src/components/header.vue
View File

@ -37,7 +37,9 @@
</div>
</div>
<div class="right">
<div class="rigth-li" @click="choseTown = true">泸县</div>
<div class="rigth-li" @click="choseTown = true"> <img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
:src="u('DW')" alt=""> 泸县
</div>
<Transition>
<div class="address" v-if="choseTown">
<div class="address-li" @click="choseTownFn(1)"
@ -62,7 +64,8 @@
<span></span>
</div>
<div class="rigth-li" @click="route.push('/')">关机</div>
<div class="rigth-li" @click="route.push('/')"><img style="width: 1VW;height:1VW;margin-right: 0.5vw;"
:src="u('GJ')" alt=""></div>
<div class="right-line">
<span></span>
<span></span>
@ -195,6 +198,8 @@ const choseTownFn = (id) => {
line-height: 15px;
padding: 0 10px;
cursor: pointer;
display: flex;
align-items: center;
}
.right-line {

95
src/view/commodity.vue
View File

@ -1,22 +1,23 @@
<template>
<div class="box">
<div class="img-cls">
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;z-index: -10000;" alt="">
<div class="content">
<div class="btns" style="position: absolute;">
<div class="btn" @click="test">商品分类</div>
<div class="btn" @click="hdClick(false)">商品管理</div>
<div class="btn" @click="ShwostoreType = true">商品分类</div>
<div class="btn" @click="ShwostoreType = false">商品管理
<!-- <div style="width: 100%;height: 10px;background-color: #fff;position: absolute;"></div> -->
</div>
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;">
</div>
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
v-if="!ShwostoreType">
<div class="manageBtn">出售中商品</div>
<div class="manageBtn">仓库中商品</div>
<div class="manageBtn">待审核商品</div>
<div class="manageBtn">审核未通过商品</div>
</div>
<div class="table" v-if="ShwostoreType">
<dv-scroll-board :config="configs" style="width:95vw;height:100%" />
<dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
</div>
<div class="table" v-else>
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
@ -31,21 +32,40 @@
// 102B3
import { ref, reactive, onMounted } from "vue"
const ShwostoreType = ref(true)
const test = (e) => {
alert(4145)
// if (e.columnIndex == 1) {
// console.log(e)
const tableClick = (e) => {
// }
// console.log(i)
if (e.ceil) {
if (e.columnIndex == 1) {
let tag = document.getElementById(`zmj${e.rowIndex}`)
let tag2 = document.getElementById(`lj${e.rowIndex}`)
tag.style.display = 'none'
tag2.style.display = 'block'
}
else {
let tag = document.getElementsByClassName(`zmj`)
let tag2 = document.getElementsByClassName(`lj`)
for (let i = 0; i < tag.length; i++) {
tag[i].style.display = 'block'
tag2[i].style.display = 'none'
}
}
}
}
const ShwostoreType = ref(true)
const hdClick = (b) => {
ShwostoreType.value = b
alert(565)
console.log(b)
}
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
if (aaa == configs2) {
for (let i = 0; i < 10; i++) {
if (i % 2 == 0) {
aaa.data.push(
[
@ -85,6 +105,44 @@ const a = (aaa) => {
}
}
else {
for (let i = 0; i < 10; i++) {
if (i % 2 == 0) {
aaa.data.push(
[
`<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 id='zmj${i}' class='zmj'> 排序${i}</div> <div id='lj${i}' class='lj' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></div> </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
} else {
aaa.data.push(
[
`<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 id='zmj${i}' class='zmj'> 排序${i}</div> <div class='lj' id='lj${i}' style="width: 16vw;height: 5vh;background-color: #fff;z-index: 99999;position: absolute;display:none"></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;'>排序</div>`,
]
)
}
}
}
}
const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
@ -125,7 +183,7 @@ const configs2 = reactive({
})
onMounted(() => {
a(configs2)
console.log(5656)
a(configs)
})
</script>
@ -165,13 +223,14 @@ onMounted(() => {
padding: 3px 10px;
border-radius: 20px;
margin-right: 10px;
position: relative;
}
}
.table {
width: 100%;
height: 75vh;
margin-top: 2vh;
margin-top: 3.5vh;
}
}
@ -193,7 +252,7 @@ onMounted(() => {
}
.sjx {}
.row {}
</style>

334
src/view/finance.vue
View File

@ -4,16 +4,113 @@
<img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
<div class="content">
<div class="btns">
<div class="btn" @click="test">提现记录</div>
<div class="btn" @click="test">资金记录</div>
<div class="btn" @click="test">账单管理</div>
<div class="btn" @click="changeTable(0)">提现记录</div>
<div class="btn" @click="changeTable(1)">资金记录</div>
<div class="btn" @click="changeTable(2)">账单管理</div>
</div>
<div class="table">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
<div class="table" v-if="true">
<dv-scroll-board :config="configs" v-if="headerIndex == 0" @click='hdClick'
style="width:95vw;height:100%" />
<dv-scroll-board :config="configs1" v-if="headerIndex == 1" style="width:95vw;height:100%" />
<dv-scroll-board :config="configs2" v-if="headerIndex == 2" @click='hdClick3'
style="width:95vw;height:100%" />
</div>
<Transition>
<div class="pop" v-if="showPop">
<img src="/static/finance/TC.png" alt=""
style="width: 35vw;height: 40vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
<div class="pop-content">
<div class="pop-content-head">
<span class="gradient-text">日账单
<span style="font-size: 10px;">2011.11-06</span>
</span>
<span class="off" @click="showPop = false"> 关闭</span>
</div>
<div class="pop-li">
订单收入总金额： <span style="margin: 0 .5vw;"><span class="price">16.6</span>元</span>
<span>2笔</span>
</div>
<div style="display: flex;justify-content: space-between;" class="pop-li">
<div>
订单支付： <span style="margin: 0 .5vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
<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 class="pop-li" style="margin-top: 3vh;">
充值金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
</div>
<div class="pop-li" style="margin-top: 3vh;">
支出总金额: <span style="margin: 0 2vw;"><span class="price">5000</span>元</span> <span>2笔</span>
</div>
<div style="display: flex;justify-content: space-between;" class="pop-li">
<div>
应付商户金额 <span style="margin: 0 .5vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
<div>
佣金 <span style="margin: 0 .5vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
<div>
返回手续费 <span style="margin: 0 1vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
</div>
<div style="display: flex;justify-content: space-between;" class="pop-li">
<div>
优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
<div>
会员优惠券补贴 <span style="margin: 0 .5vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
<div style="opacity: 0;">
返回手续费 <span style="margin: 0 1vw;"><span class="price"
style="color: white;">16.6</span>元</span>
<span>2笔</span>
</div>
</div>
<div class="pop-li" style="margin-top: 3vh;">
平台手续费收入总金额: <span class="price">16.6 </span> 元
</div>
</div>
</div>
</Transition>
</div>
</div>
</div>
@ -25,26 +122,16 @@
import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router'
const route = useRouter()
const ShwostoreType = ref(false)
const test = () => {
console.log(6)
const changeTable = (type) => {
headerIndex.value = type
addConfigHead()
a(configList[headerIndex.value], congigData[headerIndex.value])
}
const hdClick = (e) => {
if (e.columnIndex == 10) {
// route.push('/storeLogin')
}
}
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
if (i % 2 == 0) {
aaa.data.push(
const congigData = reactive(
[
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
{
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
@ -55,13 +142,8 @@ const a = (aaa) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
} else {
aaa.data.push(
[
`<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: #02243D;'>排序</div>`,],
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
@ -72,15 +154,63 @@ const a = (aaa) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,]
},
{
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
],
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
]
},
{
d: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#59D7F3;cursor: pointer;'>详情</div>`,
],
q: [`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#59D7F3;cursor: pointer;'>详情</div>`,
]
}
]
)
const hdClick = (e) => {
if (e.columnIndex == 10) {
// route.push('/storeLogin')
}
}
const a = (aaa, data) => {
for (let i = 0; i < 100; i++) {
if (i % 2 == 0) {
aaa.data.push(data.d)
} else {
aaa.data.push(data.q)
}
}
}
const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
@ -88,24 +218,68 @@ const configs = reactive({
evenRowBGC: "",
rowNum: 20,
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);'>用户UID</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>户名</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现金额</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>提现方式</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>银行名称</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>账号</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>审核状态</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>拒绝原因</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>添加时间</div>`,
],
data: [
]
})
const configs1 = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
evenRowBGC: "",
rowNum: 20,
header: [
],
data: [
]
})
const configs2 = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
evenRowBGC: "",
rowNum: 20,
header: [
],
data: [
]
})
const headerIndex = ref(0)
const configList = reactive([configs, configs1, configs2])
const headerList = [
['序号', '二维码', '用户信息', '用户UID', '户名', '提现金额', '提现方式', '银行名称', '账号', '审核状态', '拒绝原因', '添加时间'],
['会员ID', '昵称', '金额', '明细类型', '备注', '创建时间'],
['序号', '日期', '账期内收入', '账期内支出', '平台入账金额', '操作'],
]
const addConfigHead = () => {
configList[headerIndex.value].header.splice(0, 9999)
headerList[headerIndex.value].forEach(item => {
configList[headerIndex.value].header.push(
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: linear-gradient(#002841, #007092);'>${item}</div>`
)
})
}
// 详情弹窗
const showPop = ref(false)
const hdClick3 = (e) => {
if (e.columnIndex == 5) {
showPop.value = true
}
}
onMounted(() => {
a(configs)
a(configs, congigData[headerIndex.value])
addConfigHead()
})
</script>
@ -127,6 +301,7 @@ onMounted(() => {
transform: translate(-50%, -50%);
// background-color: #fff;
box-sizing: border-box;
// cursor: pointer;
.content {
width: 100%;
@ -138,6 +313,9 @@ onMounted(() => {
.btns {
display: flex;
z-index: 999999;
position: relative;
cursor: pointer;
.btn {
color: white;
@ -172,8 +350,78 @@ onMounted(() => {
padding: 0 !important;
}
.pop {
position: absolute;
z-index: 99999999999999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 35vw;
height: 40vh;
.pop-content {
// background-color: #fff;
width: 85%;
height: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
.pop-content-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2vh;
}
.off {
padding: 0 1vw;
border: 1px solid white;
border-radius: 1vw;
color: white;
cursor: pointer;
font-size: 14px;
}
.pop-li {
margin-top: 1vh;
color: white;
border-bottom: 1px solid #43BEE2;
padding-bottom: .5vh;
.row {}
.price {
color: #8F4C46;
font-size: 16px;
}
}
}
}
.gradient-text {
font-family: 'FZCYJ';
// background: linear-gradient(to bottom, #C6F2FB);
color: #C6F2FB;
font-size: 16px;
// -webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
// font-size: 48px;
// font-weight: bold;
}
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>

169
src/view/index.vue
View File

@ -25,14 +25,24 @@
<div class="product" style="display: flex;justify-content: space-around;">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="bubble"></div>
<div class="bubble1"></div>
<div class="bubble2"></div>
</div>
<div class="product" style="display: flex;justify-content: space-around;">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
<img src="/static/index/SPBGZ.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SDTB.png" class="product-icon" alt="">
<div class="bubble"></div>
<div class="bubble1"></div>
<div class="bubble2"></div>
</div>
<div class="product" style="display: flex;justify-content: space-around;">
<img src="/static/index/SPBG.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SPTB.png" class="product-icon" alt="">
<div class="product" style="display: flex;justify-content: space-around;position: relative;">
<img src="/static/index/SPBGR.png" style="width: 90%;height: 100%;" alt="">
<img src="/static/index/SDTB.png" class="product-icon" alt="">
<div class="bubble"></div>
<div class="bubble1"></div>
<div class="bubble2"></div>
</div>
</div>
<div class="Views">
@ -536,4 +546,151 @@ onMounted(() => {
background: linear-gradient(to right, #455CCC, #51C2E0);
transition: width 0.5s ease-in-out;
}
.bubble {
width: 5px;
height: 5px;
background-color: white;
position: absolute;
border-radius: 50%;
top: 7vh;
animation-name: bubbleAnimation;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.bubble1 {
width: 5px;
height: 5px;
background-color: white;
position: absolute;
border-radius: 50%;
top: 7vh;
left: 6.5vw;
animation-name: bubbleAnimation;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
.bubble2 {
width: 5px;
height: 5px;
background-color: white;
position: absolute;
border-radius: 50%;
top: 7vh;
left: 8.5vw;
animation-name: bubbleAnimation;
animation-duration: 1.25s;
animation-iteration-count: infinite;
}
@keyframes bubbleAnimation {
0% {
top: 7vh;
// opacity: 0;
transform: scale(0);
}
25% {
top: 6.5vh;
opacity: 1;
transform: scale(0.55);
}
50% {
top: 6vh;
opacity: 1;
transform: scale(0.5);
// left: 5vw;
}
75% {
transform: scale(1);
top: 5vh;
opacity: 1;
}
100% {
top: 4vh;
opacity: 0;
}
}
@keyframes bubbleAnimation1 {
0% {
top: 7vh;
// opacity: 0;
transform: scale(0);
}
25% {
top: 6.5vh;
opacity: 1;
transform: scale(0.55);
}
50% {
top: 6vh;
opacity: 1;
transform: scale(0.5);
// left: 5vw;
}
75% {
transform: scale(1);
top: 5vh;
opacity: 1;
}
100% {
top: 4vh;
opacity: 0;
}
}
@keyframes bubbleAnimation2 {
0% {
top: 7vh;
// opacity: 0;
transform: scale(0);
}
25% {
top: 6.5vh;
opacity: 1;
transform: scale(0.55);
}
50% {
top: 6vh;
opacity: 1;
transform: scale(0.5);
// left: 5vw;
}
75% {
transform: scale(1);
top: 5vh;
opacity: 1;
}
100% {
top: 4vh;
opacity: 0;
}
}
</style>

76
src/view/option.js
View File

@ -37,11 +37,17 @@ const optins={
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
},
// color: transparent;
legend: {},
legend: {
textStyle: {
color: "white"
}
},
grid: {
left: '3%',
right: '4%',
@ -233,7 +239,10 @@ const optins={
}
},
legend: {
data: ['访客人数', '下单人数', '支付人数', 'Line 4', 'Line 5']
data: ['访客人数', '下单人数', '支付人数'],
textStyle: {
color: "white"
}
// data: ['访客人数','下单人数','支付人数']
},
@ -573,6 +582,67 @@ const optins={
]
},
// 订单数据
orderData: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
splitLine: {
show: true,
lineStyle: {
type: 'dashed',//背景色为虚线,
color: '#256980'
}
}
},
yAxis: {
type: 'category',
data: ['当日订单数', '当月订单数'],
},
series: [
{
barWidth: 15,
barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
data: [120, 200],
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: '#0298E5' },
{ offset: 0, color: 'transparent' },
]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 1, color: '#4358C8' },
{ offset: 0, color: 'transparent' },
])];
return colorList[params.dataIndex]
},
borderColor: ['blue']
},
borderWidth: 2,
borderColor: "red",
},
}
]
}

153
src/view/order.vue
View File

@ -7,6 +7,8 @@
<div class="btn" @click="test">订单列表</div>
<div class="btn" @click="test">退款单</div>
<div class="btn" @click="test">核销订单</div>
</div>
<div class="btns">
<div class="btn" @click="test">订单列表</div>
@ -15,7 +17,7 @@
</div>
<div class="table">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
<dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" />
</div>
</div>
@ -35,20 +37,100 @@ const test = () => {
console.log(6)
}
const hdClick = (e) => {
if (e.columnIndex == 10) {
// route.push('/storeLogin')
const tableHdClick = (e) => {
if (e.ceil) {
if (e.columnIndex == 0) {
// console.log(e.rowIndex)
let tag = document.getElementById(`order${e.rowIndex}`)
let tag2 = document.getElementById(`card${e.rowIndex}`)
tag.style.display = 'none'
tag2.style.display = 'block'
console.log(tag.style.display)
console.log(tag2.style.display)
} else {
let tag = document.getElementsByClassName(`order`)
let tag2 = document.getElementsByClassName(`card`)
for (let i = 0; i < tag.length; i++) {
tag[i].style.display = 'block'
tag2[i].style.display = 'none'
}
console.log(tag[0].style.display)
console.log(tag2[0].style.display)
}
}
}
const a = (aaa) => {
for (let i = 0; i < 100; i++) {
for (let i = 0; i < 50; i++) {
if (i % 2 == 0) {
aaa.data.push(
[
`<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;cursor: pointer;'>
<div class='order' id='order${i}' style='position:relative'>
<div style=' width: 0;
height: 0;
border-left: 0.5vh solid transparent;
border-right: 0.5vh solid transparent;
border-top: 0.5vh solid #C25941;
position: absolute;
top:50%;
left:0
'>
</div> 4554545</div>
<div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
<div
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
<span>总单号：</span>
<span>35356565656565</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
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
<span>商家备注</span>
<span>2023.11.214</span>
</div>
</div>
</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
@ -63,7 +145,63 @@ const a = (aaa) => {
} else {
aaa.data.push(
[
`<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;cursor: pointer;'>
<div class='order' id='order${i}' style='position:relative'>
<div style=' width: 0;
height: 0;
border-left: 0.5vh solid transparent;
border-right: 0.5vh solid transparent;
border-top: 0.5vh solid #C25941;
position: absolute;
top:50%;
left:0
'>
</div> 1111</div>
<div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
<div
style="display: flex;justify-content: space-between; border-bottom: 1px solid #006083;padding-bottom: 5px;">
<span>总单号：</span>
<span>35356565656565</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
style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
<span>商家备注</span>
<span>2023.11.214</span>
</div>
</div>
</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
@ -125,6 +263,7 @@ onMounted(() => {
transform: translate(-50%, -50%);
// background-color: #fff;
box-sizing: border-box;
// cursor: pointer;
.content {
width: 100%;

86
src/view/townDetail.vue
View File

@ -37,7 +37,24 @@
<div class="r">
<img class="img-cls" src="/static/town/DDSJ.png" alt="">
<div class="order-data">
<div class="tit">
<div style="display: flex;align-items: center;">
<div class="gradient-circle">
</div>
日订单数据
</div>
<div style="display: flex;align-items: center;">
<div class="gradient-circle">
</div>
日订单数据
</div>
</div>
<div style="width: 100%;height:50%;" id="orderData"></div>
<div style="width: 100%;height: 50%;" id="orderData2"></div>
</div>
</div>
@ -144,42 +161,6 @@ const config3 = reactive({
`<div style='height:40px;line-height:40px '>5495 <span style='font-size:10px'>单</span> </div>`,
],
// [` <div style=" text-align: center;background-image: url('/static/index/PM2.png');width: 30px;height: 30px;background-size: cover;"> 2</div> `,
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
// `<div>商品名称</div>`,
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
// ],
// [` <div style=" text-align: center;background-image: url('/static/index/PM3.png');width: 30px;height: 30px;background-size: cover;">3</div> `,
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
// `<div>商品名称</div>`,
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
// ],
// [` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">4</div> `,
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
// `<div>商品名称</div>`,
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
// ],
// [` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">5</div> `,
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
// `<div>商品名称</div>`,
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
// ],
// [` <div style=" text-align: center;background-image: url('/static/index/PM4.png');width: 30px;height: 30px;background-size: cover;">6</div> `,
// `<img :src="i" style="width: 30px;height: 30px;object-fit: cover;" alt="">`,
// `<div>商品名称</div>`,
// `<div class="progress-bar"> <div class="progress"></div> </div>`,
// `<div style='padding-left:30px'>5495 <span style='font-size:10px'>单</span> </div>`,
// ],
]
}
@ -194,9 +175,16 @@ const initCharts = (tag, option) => {
}
onMounted(() => {
document.getElementById("orderData").removeAttribute('_echarts_instance_');
document.getElementById("orderData2").removeAttribute('_echarts_instance_');
document.getElementById("user").removeAttribute('_echarts_instance_');
document.getElementById("orderAmount").removeAttribute('_echarts_instance_');
document.getElementById("transactionUsers").removeAttribute('_echarts_instance_');
initCharts('user', option.userChartOption)
initCharts('orderAmount', option.orderAmount)
initCharts('transactionUsers', option.transactionUsersTown)
initCharts('orderData', option.orderData)
initCharts('orderData2', option.orderData)
})
@ -315,6 +303,32 @@ onMounted(() => {
height: 46vh;
position: relative;
.order-data {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-right: 1vw;
position: relative;
.tit {
position: absolute;
color: white;
// background-color: #fff;
top: 5vh;
width: 100%;
font-size: 10px;
display: flex;
justify-content: space-around;
.gradient-circle {
width: 10px;
height: 10px;
background: radial-gradient(at top left, transparent, #029BE9);
border-radius: 50%;
}
}
}
}
}

BIN
static/finance/TC.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

6
static/font/font.css Normal file
View File

@ -0,0 +1,6 @@
@font-face {
font-family: 'FZCYJ';
src: url('ifonts.ttf');
font-weight: normal;
font-style: normal;
}

BIN
static/font/ifonts.ttf Normal file
View File

Binary file not shown.

BIN
static/index/DW.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 448 B

BIN
static/index/GJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 446 B

BIN
static/index/PHSJK.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 B

0
static/index/中间图标2_3.png → static/index/SDTB.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

0
static/index/中间展示框背景3.png → static/index/SPBGR.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 168 KiB

0
static/index/中间展示框背景2.png → static/index/SPBGZ.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 167 KiB

BIN
static/storeLogin/SPFKPH.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 35 KiB