***

src/api.js

@@ -65,5 +65,33 @@ export function getUserTradeCountApi(params) {
 export function getProductCategoryListApi(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
 

src/components/areaList.vue

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

src/view/Businesses.vue

@@ -4,10 +4,10 @@
             <img src="/static/town/TABBG.png" style="width: 100%;height: 100%;position: absolute;" alt="">
             <div class="content">
                 <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 class="table">
+                <div class="table" v-if="configs.data.length">
                     <dv-scroll-board :config="configs" @click='hdClick' style="width:95vw;height:100%" />
                 </div>
 
@@ -21,8 +21,28 @@
 // 102B3
 import { ref, reactive, onMounted } from "vue"
 import { useRouter } from 'vue-router'
+import {merchant_listApi} from "@/api.js"
 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 test = () => {
     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) {
-            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 {
-            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;'>排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>`,
                 ]
 
@@ -75,9 +95,12 @@ const a = (aaa) => {
             )
         }
 
+    })
+   
+
 
     }
-}
+
 const configs = reactive({
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
     oddRowBGC: '',
@@ -100,7 +123,7 @@ const configs = reactive({
     ]
 })
 onMounted(() => {
-    a(configs)
+    changeTable(0)
 })
 </script>
 

src/view/commodity.vue

@@ -10,15 +10,15 @@
                 </div>
                 <div style="display: flex;color: white;justify-content: flex-end;margin-right: 5vw;cursor: pointer;"
                     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 class="table" v-if="ShwostoreType && configs.data.length">
                     <dv-scroll-board @click="tableClick" :config="configs" style="width:95vw;height:100%" />
                 </div>
-                <div class="table" v-else>
+                <div class="table" v-if="!ShwostoreType &&configs2.data.length">
                     <dv-scroll-board :config="configs2" style="width:95vw;height:100%" />
                 </div>
             </div>
@@ -28,26 +28,42 @@
 
 
 <script setup>
-// 102B3
 import { ref, reactive, onMounted } from "vue"
-import { getProductCategoryListApi } from "@/api.js"
+import { getProductCategoryListApi,getProductListApi } from "@/api.js"
-
+import { init } from "echarts";
-
 getProductCategoryListApi(
     {
         areaCode: 510524,
         streetCode: 510524100
-
-
     }
 ).then(res => {
     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) => {
     if (e.ceil) {
         if (e.columnIndex == 1) {
@@ -76,32 +92,37 @@ const hdClick = (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) => {
             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;'>${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;'>${item.star}</div>`,
+                        `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.update_time}</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;'>${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>`,
@@ -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;'>${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(() => {
+    initProduct(6)
     // a(configs2)
     // a(configs)
 })

src/view/order.vue

@@ -20,8 +20,13 @@
                 </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>
@@ -34,6 +39,7 @@
 // 102B3
 import { ref, reactive, onMounted } from "vue"
 import Bill from "@/components/Bill.vue"
+import { order_listApi, order_list_count_titleApi, refund_order_listApi, take_order_listApi,take_order_count_titleApi } from "@/api.js"
 
 const billList = reactive([
     {
@@ -82,6 +88,75 @@ const hdClick = (i) => {
     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) => {
@@ -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) {
-            aaa.data.push(
+            configs.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'> 
@@ -130,7 +207,7 @@ const a = (aaa) => {
                             top:50%;
                            left:0    
                             '> 
-                            </div>      4554545</div>
+                            </div>      ${item.order_sn}</div>
                         
                         <div class='card' id='card${i}'
                         style="width: 15vw;color: white;display:none; font-size: 10px;background: linear-gradient(to bottom,#001E31, #0097C2);padding:0 1vh;border-radius:1vh;position: absolute; z-index: 9999999;">
@@ -143,7 +220,7 @@ const a = (aaa) => {
                         <div
                             style="display: flex;justify-content: space-between;border-bottom: 1px solid #006083; margin-top: 1vh;padding-bottom: 5px;">
                             <span>下单时间</span>
-                            <span>2023.11.214</span>
+                            <span>${item.pay_time}</span>
                         </div>
 
                         <div
@@ -172,23 +249,20 @@ const a = (aaa) => {
                     </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.cost}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
+                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>${item.status}</div>`,
                     `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</div>`,
-                    `<div style='width: 100%;text-align: center; height: 100%; color: aliceblue; background: #02243D;'>排序</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 {
-            aaa.data.push(
+            configs.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'> 
@@ -243,9 +317,6 @@ const a = (aaa) => {
                 </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>`,
@@ -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({
     headerBGC: "linear-gradient(to right, #ff0000, #00ff00)",
     oddRowBGC: '',
@@ -285,8 +687,49 @@ const configs = reactive({
     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(() => {
-    a(configs)
+    hdClick(0)
+    // a(configs)
 })
 </script>