This commit is contained in:
zmj 2023-12-08 00:06:02 +08:00
parent 41eb587026
commit e951ed48ac
5 changed files with 594 additions and 76 deletions

View File

@ -65,5 +65,33 @@ export function getUserTradeCountApi(params) {
export function getProductCategoryListApi(params) { export function getProductCategoryListApi(params) {
return instacne.get('/api/dataview/product_category_list', { params }) return instacne.get('/api/dataview/product_category_list', { params })
} }
// api/dataview/view_count?areaCode=510524&streetCode=510524100
export function getProductListApi(params) {
return instacne.get('/api/dataview/product_list', { params })
}
export function merchant_listApi(params) {
return instacne.get('/api/dataview/merchant_list', { params })
}
export function order_listApi(params) {
return instacne.get('/api/dataview/order_list', { params })
}
export function order_list_count_titleApi(params) {
return instacne.get('/api/dataview/order_list_count_title', { params })
}
export function refund_order_listApi(params) {
return instacne.get('/api/dataview/refund_order_list', { params })
}
export function take_order_listApi(params) {
return instacne.get('/api/dataview/take_order_list', { params })
}
export function take_order_count_titleApi(params) {
return instacne.get('/api/dataview/take_order_count_title', { params })
}
//
// /api/dataview/take_order_count_title?areaCode=510524&streetCode=510524100&status&page=1&limit=20

View File

@ -23,9 +23,9 @@ const choseTownFn = (id, name) => {
props.choseArea = false props.choseArea = false
emit('offAreaList', name) emit('offAreaList', name)
router.go(0) // router.go(0)
// router.replace('/townDetail?code=' + id) router.replace('/townDetail?code=' + id)
} }
onMounted(() => { onMounted(() => {

View File

@ -4,10 +4,10 @@
<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="ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = true">正常开启的商户</div> <div class="btn " :class="!status ? 'act-btn' : ''" @click="changeTable(0)">正常开启的商户</div>
<div class="btn" :class="!ShwostoreType ? 'act-btn' : ''" @click="ShwostoreType = false">已关闭的商户</div> <div class="btn" :class="status ? 'act-btn' : ''" @click="changeTable(1)">已关闭的商户</div>
</div> </div>
<div class="table"> <div class="table" v-if="configs.data.length">
<dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" /> <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
</div> </div>
@ -21,8 +21,28 @@
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import {merchant_listApi} from "@/api.js"
const route = useRouter() const route = useRouter()
let status =ref(0)
const changeTable=(num)=>{
configs.data.splice(0,configs.data.length)
console.log(configs.data)
status.value=num
merchant_listApi(
{
areaCode: 510524,
streetCode: 510524100,
status:status.value,
limit:50
}
).then(res=>{
addConfigData(res.data.list)
})
}
const ShwostoreType = ref(true) const ShwostoreType = ref(true)
const test = () => { const test = () => {
console.log(6) console.log(6)
@ -37,37 +57,37 @@ const hdClick = (e) => {
} }
const a = (aaa) => { const addConfigData = (data) => {
for (let i = 0; i < 100; i++) { data.forEach((item,i)=>{
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( configs.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;'>${item.mer_id}</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.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.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.mer_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.mark}</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.is_best}</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.create_time}</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;'>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;'>${item.merchantCategory.category_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.status?'开启':'关闭'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5';cursor: pointer;>登录</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;color:#3D9EB5';cursor: pointer;>登录</div>`,
] ]
) )
} else { } else {
aaa.data.push( configs.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_id}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.real_name}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mer_address}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.mark}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.is_best}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.create_time}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</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.merchantCategory.category_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.status?'开启':'关闭'}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;color:#3D9EB5; cursor: pointer;'>登录</div>`,
] ]
@ -75,9 +95,12 @@ const a = (aaa) => {
) )
} }
})
} }
}
const configs = reactive({ const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)", headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '', oddRowBGC: '',
@ -100,7 +123,7 @@ const configs = reactive({
] ]
}) })
onMounted(() => { onMounted(() => {
a(configs) changeTable(0)
}) })
</script> </script>

View File

@ -10,15 +10,15 @@
</div> </div>
<div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;" <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
v-if="!ShwostoreType"> v-if="!ShwostoreType">
<div class="manageBtn actmanageBtn">出售中商品</div> <div @click="initProduct(6)" class="manageBtn " :class="{actmanageBtn:type==6}">出售中商品</div>
<div class="manageBtn">仓库中商品</div> <div @click="initProduct(1)" class="manageBtn" :class="{actmanageBtn:type==1}" >仓库中商品</div>
<div class="manageBtn">待审核商品</div> <div @click="initProduct(2)" class="manageBtn" :class="{actmanageBtn:type==2}">待审核商品</div>
<div class="manageBtn">审核未通过商品</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-else> <div class="table" v-if="!ShwostoreType &&configs2.data.length">
<dv-scroll-board :config="configs2" style="width:95vw;height:100%" /> <dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
</div> </div>
</div> </div>
@ -28,26 +28,42 @@
<script setup> <script setup>
// 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import { getProductCategoryListApi } from "@/api.js" import { getProductCategoryListApi,getProductListApi } from "@/api.js"
import { init } from "echarts";
getProductCategoryListApi( getProductCategoryListApi(
{ {
areaCode: 510524, areaCode: 510524,
streetCode: 510524100 streetCode: 510524100
} }
).then(res => { ).then(res => {
a(configs, res.data) a(configs, res.data)
console.log(res.data)
}) })
let type=ref(6)
const initProduct=(num)=>{
configs2.data.splice(0,configs2.data.length)
type.value=num
getProductListApi( {
areaCode: 510524,
streetCode: 510524100,
limit:50,
type:type.value
}).then(res=>{
a(configs2, res.data.list,true)
})
}
const tableClick = (e) => { const tableClick = (e) => {
if (e.ceil) { if (e.ceil) {
if (e.columnIndex == 1) { if (e.columnIndex == 1) {
@ -76,32 +92,37 @@ const hdClick = (b) => {
console.log(b) console.log(b)
} }
const a = (aaa, data) => { const a = (aaa, data,flag) => {
if (aaa == configs2) { if (flag) {
console.log(455454)
data.forEach((item, i) => { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( aaa.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.product_id}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</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>`, <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'>
`<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>`,
`<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;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.star}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</div>`,
] ]
) )
} else { } else {
aaa.data.push( 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;'>${item.product_id}</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 style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, <img src='${item.image}' style='width:25px;height:25px;margin-top:5px'></div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
@ -109,6 +130,8 @@ const a = (aaa, data) => {
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.star}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>${item.update_time}</div>`,
] ]
) )
} }
@ -199,6 +222,7 @@ const configs2 = reactive({
] ]
}) })
onMounted(() => { onMounted(() => {
initProduct(6)
// a(configs2) // a(configs2)
// a(configs) // a(configs)
}) })

View File

@ -20,8 +20,13 @@
</div> </div>
<div class="table"> <div class="table" v-if="configs.data.length">
<dv-scroll-board :config="configs" @click='tableHdClick' style="width:95vw;height:100%" /> <dv-scroll-board :config="configs" v-if="btnFlag[0]" @click='tableHdClick'
style="width:95vw;height:100%" />
<dv-scroll-board :config="configs2" v-if="btnFlag[1] && configs2.data.length" @click='tableHdClick'
style="width:95vw;height:100%" />
<dv-scroll-board :config="configs3" v-if="btnFlag[2] && configs3.data.length" @click='tableHdClick'
style="width:95vw;height:100%" />
</div> </div>
</div> </div>
@ -34,6 +39,7 @@
// 102B3 // 102B3
import { ref, reactive, onMounted } from "vue" import { ref, reactive, onMounted } from "vue"
import Bill from "@/components/Bill.vue" import Bill from "@/components/Bill.vue"
import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi,take_order_count_titleApi } from "@/api.js"
const billList = reactive([ const billList = reactive([
{ {
@ -82,6 +88,75 @@ const hdClick = (i) => {
btnFlag[i] = true btnFlag[i] = true
if (i == 0) {
configs.data.splice(0, configs.data.length)
order_listApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50
}
).then(res => {
addConfigData(res.data.list)
})
order_list_count_titleApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50
}
).then(res => {
res.data.forEach((item, index) => {
billList[index].num = item.count
})
})
}
if (i == 1) {
configs2.data.splice(0, configs.data.length)
refund_order_listApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50
}
).then(res => {
addConfigData2(res.data.list)
})
}
if (i == 2) {
configs3.data.splice(0, configs.data.length)
take_order_listApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50
}
).then(res => {
addConfigData3(res.data.list)
})
take_order_count_titleApi(
{
areaCode: 510524,
streetCode: 510524100,
limit: 50
}
).then(res=>{
res.data.forEach((item, index) => {
billList[index].num = item.count
})
})
}
} }
const tableHdClick = (e) => { const tableHdClick = (e) => {
@ -114,10 +189,12 @@ const tableHdClick = (e) => {
} }
const a = (aaa) => { const addConfigData = (data) => {
for (let i = 0; i < 50; i++) { data.forEach((item, i) => {
if (i % 2 == 0) { if (i % 2 == 0) {
aaa.data.push( configs.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;cursor: pointer;'> `<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 class='order' id='order${i}' style='position:relative'>
@ -130,7 +207,7 @@ const a = (aaa) => {
top:50%; top:50%;
left:0 left:0
'> '>
</div> 4554545</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: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;">
@ -143,7 +220,7 @@ const a = (aaa) => {
<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
@ -171,24 +248,21 @@ const a = (aaa) => {
</div> </div>
</div>`, </div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;' >排sd序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.cost}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`, `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.pay_type}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
] ]
) )
} else { } else {
aaa.data.push( configs.data.push(
[ [
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;cursor: pointer;'> `<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 class='order' id='order${i}' style='position:relative'>
@ -243,9 +317,6 @@ const a = (aaa) => {
</div> </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;'>排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>`,
@ -263,8 +334,339 @@ const a = (aaa) => {
} }
}
})
} }
const addConfigData2 = (data) => {
data.forEach((item, i) => {
if (i % 2 == 0) {
configs2.data.push(
[
`<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> ${item.refund_order_sn}</div>
<div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: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>${item.pay_time}</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>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
<sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span>
</div>`,
]
)
} else {
configs2.data.push(
[
`<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> ${item.refund_order_sn}</div>
<div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
<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>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span></div>`,
]
)
}
})
}
const addConfigData3 = (data) => {
data.forEach((item, i) => {
if (i % 2 == 0) {
configs3.data.push(
[
`<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> ${item.order_sn}</div>
<div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: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>${item.pay_time}</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;' >核销订单</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.refund_price}</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>
<sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span>
</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
} else {
configs3.data.push(
[
`<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> ${item.refund_order_sn}</div>
<div class='card' id='card${i}'
style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding: 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
<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>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #102B3E;'> <sapn> ${item.status} </span>
<sapn>退款原因 ${item.refund_message} </span>
<sapn>状态变更时间 ${item.status_tiem} </span></div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
`<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
]
)
}
})
}
const configs = reactive({ const configs = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)", headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '', oddRowBGC: '',
@ -285,8 +687,49 @@ const configs = reactive({
data: [ data: [
] ]
}) })
const configs2 = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
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);'>商户分类</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 configs3 = reactive({
headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
oddRowBGC: '',
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);'>收货人</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: [
]
})
onMounted(() => { onMounted(() => {
a(configs) hdClick(0)
// a(configs)
}) })
</script> </script>