我的订单功能

src/api/user.ts

@@ -26,10 +26,10 @@ export const getUserOrder = (data: any) => {
     });
   };
 
-  export const wxLogin = (data:logonParam) => {
+  export const incrementOrderList = (data: any) => {
     return request({
-      url: "/service/pay/wxLogin",
-      method: "get",
+      url: "/ucenter/user/virtualOrder/incrementOrderList",
+      method: "post",
       data,
       config: {
         timeout: 10000,
@@ -40,6 +40,62 @@ export const getUserOrder = (data: any) => {
     });
   };
   
+  export const getDownOrderList = (data: any) => {
+    return request({
+      url: "/ucenter/user/virtualOrder/downloadOrderList",
+      method: "post",
+      data,
+      config: {
+        timeout: 10000,
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8",
+        },
+      },
+    });
+  };
+
+  export const getInvoiceList = (data: any) => {
+    return request({
+      url: "/ucenter/user/invoice/list",
+      method: "post",
+      data,
+      config: {
+        timeout: 10000,
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8",
+        },
+      },
+    });
+  };
+    
+  export const getChargeList = (data: any) => {
+    return request({
+      url: "/ucenter/user/virtualOrder/chargeList",
+      method: "post",
+      data,
+      config: {
+        timeout: 10000,
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8",
+        },
+      },
+    });
+  };
+
+export const getCartList = (data: any) => {
+    return request({
+      url: "/ucenter/user/cart/list",
+      method: "post",
+      data,
+      config: {
+        timeout: 10000,
+        headers: {
+            "Content-Type": "application/json;charset=UTF-8",
+        },
+      },
+    });
+  };
+
 export const getOrderInfo = (orderSn:string) => {
     return request({
       url: `/service/pay/order/info/${orderSn}`,

src/components/pc/header.vue

@@ -11,14 +11,19 @@ import { pcHeader, languageList } from './data'
 const router = useRouter();
 //得到i18n的locale
 const userStore = useUserStore()
+const carList =  userStore.getCartData()
+console.log('getCartList', carList)
 const info = computed(() => userStore.getUserInfo)
 const isLogin = computed(() => userStore.isLogin)
+const cartCount = computed(() => userStore.getCarList)
 const { locale:langauge, t } = useI18n();
 const navs = pcHeader(t)
 const languageObj = computed(() => languageList.find(item => item.value === langauge.value) || {})
 console.log('languageObj', info.value, userStore)
+function handleCartClick() {
+  window.location.href='/#/mall/cart'
+}
 </script>
-
 <template>
     <div class="header-layout">
     <div class="headercontainer clear flex justify-between items-center">

src/components/pc/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter, useRoute } from 'vue-router'
 import Header from './header.vue'
@@ -7,7 +7,6 @@ import Footer from './footer.vue'
 const { locale: language, t } = useI18n()
 const router = useRouter();
 const route = useRoute()
-console.log(route, 'route')
 const normalSettings = [
   {
     name: t('manage.information.nameArr.information'),
@@ -44,6 +43,9 @@ function tabHandle(sub) {
     active.value = sub
     router.push(sub.to) 
 }
+watch(()=>route.name, (newVal)=>{
+  active.value = normalSettings.find(item => item.to.name === newVal) || normalSettings[0]
+})
 </script>
 
 <template>

src/i18n/index.d.ts

@@ -0,0 +1,6 @@
+
+declare module '@/i18n/index.js' {
+  import { I18n } from 'vue-i18n';
+  const i18n: I18n;
+  export default i18n;
+}

src/i18n/modules/zh/manage.js

@@ -160,4 +160,100 @@ export default {
     "isExpired": "已过期",
     "isUsing": "使用中"
   },
+  "cameraName": {
+    "1": "四维看看 Lite二目相机",
+    "4": "四维看看 Pro八目相机",
+    "7": "四维看看 三脚架套装",
+    "11": "四维深时高速固态 U 盘",
+    "12": "四维深时专用电池"
+  },
+  "orderDetail": {
+    "1": {
+      0: "四维看看 Lite二目相机(静谧黑)",
+      1: "容量套餐(5G)",
+      2: "四维看看 Lite专用三脚架(标准色)"
+    },
+    "4": {
+      0: "四维看看 Pro八目相机(静谧黑)",
+      1: "容量套餐(10G)"
+    },
+    "7": {
+      0: "四维看看 三脚架套装(标准色)"
+    },
+    "11": {
+      0: "四维深时高速固态 U 盘(银色)"
+    },
+    "12": {
+      0: "四维深时专用电池(黑色)"
+    },
+  },
+  "Spending": {
+    "tabListMember": "会员权益",
+    "tabListRecharge": "充值记录",
+    "tabListInvoice": "增值发票",
+    "norecord": "暂无任何记录",
+    "placeholder": {
+      "searchID": "搜索"
+    },
+    "listLabel": {
+      "orderId": "订单号",
+      "memberName": "权益名称",
+      "count": "数量",
+      "payType": "支付类型",
+      "payNum": "支付金额",
+      "payTime": "购买时间"
+    },
+    "rechargeLabel": {
+      "type": "充值类型",
+      "name": "充值名称",
+      "point": "点数",
+      "deviceName": "相机",
+      "createTime": "消费时间",
+      "downdesc": "场景下载"
+    },
+    "rechargeValue": {
+      "0": "系统赠送",
+      "1": "充值",
+      "2": "系统退充值",
+      "-1": "支出"
+    },
+    "invoiceLabel": {
+      "createTime": "申请时间",
+      "type": "发票类型",
+      "title": "发票抬头",
+      "money": "开票金额",
+      "status": "状态",
+      "detail": "操作"
+    }
+  },
+  "member": {
+    "qx1": "云空间：无限",
+    "qx2": "编辑权益：自定义 logo，自定义热点样式",
+    "xfcg": "支付成功！您的会员权益已续费至",
+    "xf": "续费",
+    "authSuccess": "授权成功",
+    "authErr": "绑定失败",
+    "memberjtdq": "权益今天到期",
+    "memberPackage": "会员权益ID",
+    "bindCameraSn": "授权相机S/N码",
+    "buyDate": "购买日期",
+    "expiredDate": "到期日期",
+    "action": "操作",
+    "unbind": "解除",
+    "bind": "授权",
+    "renew": "续费",
+    "bindCamera": "授权",
+    "bindDevice": "授权相机",
+    "bindDeviceky": "可授权相机",
+    "tj": "提交",
+    "bindSuccess": "绑定成功",
+    "xfMember": "续费会员权益",
+    "buyMember": "购买会员权益",
+    "buyCount": "购买数量",
+    "payType": "支付方式",
+    "memberDeadLine": "会员期限",
+    "shouldPay": "应付金额",
+    "unbindCamera": "解绑相机",
+    "unbindCameraTip": "确定要解除该相机的权益吗？"
+  },
 }

src/router/pcRoute.ts

@@ -18,32 +18,32 @@ const routesP = [{
     name: 'information',
     path: '/information',
     component: Information,
-    meta: { hideFooterFind: false, requireAuth: true }
+    meta: { hideMenu: true }
   },
   {
     name: 'scene',
     path: '/scene',
     component: Scene,
-    meta: { hideFooterFind: false, requireAuth: true }
+    meta: { hideMenu: true }
   },
   {
     name: 'order',
     path: '/order',
     component: Order,
-    meta: { hideFooterFind: false, requireAuth: true }
+    meta: { hideMenu: true }
 
   },
   {
     name: 'device',
     path: '/device',
     component: Device,
-    meta: { hideFooterFind: false, requireAuth: true }
+    meta: { hideMenu: true }
   },
   {
     name: 'appProduct',
     path: '/appProduct',
     component: AppProduct,
-    meta: { hideFooterFind: false, requireAuth: true }
+    meta: { hideMenu: true }
   }]
 
 }]

src/stores/user.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { getUserInfo } from '@/api/user'
+import { getUserInfo, getCartList } from '@/api/user'
 // defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复）
 
 // 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.
@@ -9,6 +9,7 @@ export const useUserStore = defineStore('user', {
       token: localStorage.getItem('token') || 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMzYzMTI2MjkyNiIsImxvZ2luVHlwZSI6InVzZXIiLCJ1c2VyTmFtZSI6IjEzNjMxMjYyOTI2IiwiaWF0IjoxNzU4ODU2MzkzLCJqdGkiOiI3MmY0NWYwMC1iOTFkLTQ1ZGItYWIzZS1iOGNlNGVhNDNkMTMifQ.PG85Q044plwHvak1aRGgKXYYsH1hXhueKK1X-2Q65Lo',
       openId: localStorage.getItem('openId'),
       isLogin: false,
+      carList: [],
       info: {
 
       },
@@ -23,7 +24,10 @@ export const useUserStore = defineStore('user', {
     },
     getUserInfo(state){
       return state.info || localStorage.getItem('info')
-    }
+    },
+    getCarList(state){
+      return state.carList.length || 0
+    },
   },
   actions:{ // 可以通过actions 方法，改变 state 里面的值。
     setUserOpenId(value:string){
@@ -36,6 +40,11 @@ export const useUserStore = defineStore('user', {
       this.info = infoRes
       this.isLogin = true
 
+    },
+    async getCartData(){
+      let infoRes = await getCartList({})
+      this.carList = infoRes
+      return infoRes
     }
   }
 })

src/utils/api.js

@@ -31,7 +31,8 @@ const showLoading = () => {
         loading = ElLoading.service({
             fullscreen: true,
             text: "Loading  ",
-            background: "rgba(0, 0, 0, 0.7)",
+
+            // background: "rgba(0, 0, 0, 0.7)",
         });
     }
     requestCount++;

src/views/pc/device/index.vue

@@ -454,11 +454,11 @@ onMounted(async () => {
 })
 
 // 监听器
-watch(tabActive, () => {
+watch(()=>tabActive, () => {
   selectedArr.value = []
 })
 
-watch(selectedType, async () => {
+watch(()=>selectedType, async () => {
   currentPage.value = 1
   await getCameraList()
 }, { deep: true })

src/views/pc/index.vue

@@ -22,7 +22,7 @@ const orderSn = ref(route.query.id || GetRequest('orderSn'))
 let { $cdn } = getCurrentInstance()?.proxy
 
 const selectedPayType = ref(isEur ? 'paypal' : 'alipay')
-watch(selectedPayType, () => {
+watch(()=>selectedPayType, () => {
   getCode()
 })
 const qrCodeUrl = ref('')

src/views/pc/order/components/deviceOrder.vue

@@ -2,7 +2,7 @@
 import { ref, watch, onMounted, computed } from 'vue'
 import { getUserOrder } from '@/api/user'
 import Paging from '@/components/pc/Paging/index.vue'
-import OrderItem from './OrderItem.vue'
+import OrderItem from './orderItem.vue'
 const pageSize = ref(5)
 const currentPage = ref(1)
 const total = ref(0)
@@ -11,13 +11,14 @@ const maxPage = ref(0)
 const showInvoice = ref(false)
 const currentI = ref('')
 const currentItem = ref('')
-watch(currentPage.value, () => {
+watch(()=>currentPage.value, () => {
   getList()
 })
 onMounted(() => {
   getList()
 })
 function pageChange(data) {
+  console.log('pageChange', data)
   currentPage.value = data
 }
 async function getList() {

src/views/pc/order/components/downItem.vue

@@ -1,19 +1,146 @@
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import { getUserOrder } from '@/api/user'
+import Paging from '@/components/pc/Paging/index.vue'
+import { useI18n } from 'vue-i18n'
+import { goodsMap, PAYSIDMAP } from '../data.ts'
+const { locale: language, t } = useI18n()
+const props = defineProps({
+  item: {
+    type: Object,
+    default: {}
+  },
+  i: {
+    type: Number
+  }
+})
+
+const list = ref([])
+const showInvoice = ref(false)
+const orderDetail = {
+  '1': [
+    t('manage.orderDetail.1.0'),
+    t('manage.orderDetail.1.1'),
+    t('manage.orderDetail.1.2'),
+  ],
+  '4': [
+    t('manage.orderDetail.4.0'),
+    t('manage.orderDetail.4.1'),
+  ],
+  '7': [
+    t('manage.orderDetail.7.0'),
+  ],
+  '11':
+    [t('manage.orderDetail.11.0'),],
+  '12': [
+    t('manage.orderDetail.12.0'),
+  ]
+}
+// watch(()=>currentPage.value, () => {
+//   getList()
+// })
+// onMounted(() => {
+//   getList()
+// })
+console.log(goodsMap, 'goodsMap')
+
+function changeIvoiceStatus(i, item) {
+  // this.$bus.$emit('order/showInvoice', {
+  //   order: item,
+  //   orderId: item.id,
+  //   data: this.getItemInvoice(item),
+  //   invoiceId: item.invoice && item.invoice.id
+  // })
+}
+
+function getStatus(item) {
+  let temp = ''
+  let sPay = function () {
+    switch (item.shippingStatus) {
+      case 'unshipped':
+        temp = 'unshipped'
+        break
+      case 'partShipped':
+        temp = 'partShipped'
+        break
+      case 'shipped':
+        temp = 'shipped'
+        break
+      case 'received':
+        temp = 'received'
+        break
+      default:
+        break
+    }
+  }
+  let pPay = function () {
+    switch (item.paymentStatus) {
+      case 'unpaid':
+        temp = 'unpaid'
+        break
+      case 'paid':
+        sPay()
+        break
+      default:
+        break
+    }
+  }
+
+  switch (item.orderStatus) {
+    case 'unprocessed':
+      pPay()
+      break
+    case 'completed':
+      temp = 'finish'
+      break
+    case 'processed':
+      sPay()
+      break
+    case 'expire':
+      temp = 'expire'
+      break
+    default:
+      break
+  }
+  return temp
+}
+function  toPay(item) {
+      this.$router.push({
+        name: 'pay',
+        query: {
+          payType: 0,
+          orderId: item.id,
+          orderType: 0,
+          orderSn: item.orderSn
+        }
+      })
+    }
+    function getItemInvoice (item) {
+      let invoice = item.invoice
+      if (!invoice) {
+        return ''
+      }
+      invoice['typeName'] = t(`manage.invoiceTypeName.${invoice.type}`)
+      return invoice
+    }
+</script>
+
 <template>
   <div class="order-item" :key="i">
         <!-- <div class="o-top"></div> -->
         <div class="o-title">
           <span>
-            <span class="orderSn table-header">{{$t('manage.myOrders.numbers')}}{{item.orderSn}}</span>
+            <span class="orderSn table-header">{{t('manage.myOrders.numbers')}}{{item.orderSn}}</span>
             <span class="orderTime">{{ item.tradeTime }}</span>
           </span>
-          <span class="table-header">{{$t('manage.myOrders.total1')}}</span>
+          <span class="table-header">{{t('manage.myOrders.total1')}}</span>
         </div>
         <div class="o-detail">
           <div class="od-name">
             <div>
-              <!-- <p>{{ item.status }}{{$t('manage.myOrders.recname')}}</p> -->
-              <p>{{ item.sceneName }}{{item.sceneNum && `（${item.sceneNum}）`}}{{$t('manage.Spending.rechargeLabel.downdesc')}}</p>
-              <p>{{$t('manage.Spending.listLabel.payType')}}：{{ PAYSIDMAP[item.payType] }}</p>
+              <!-- <p>{{ item.status }}{{t('manage.myOrders.recname')}}</p> -->
+              <p>{{ item.sceneName }}{{item.sceneNum && `（${item.sceneNum}）`}}{{t('manage.Spending.rechargeLabel.downdesc')}}</p>
+              <p>{{t('manage.Spending.listLabel.payType')}}：{{ PAYSIDMAP[item.payType] }}</p>
             </div>
           </div>
           <div class="sum total-momey">{{item.amount || 0}}</div>
@@ -21,19 +148,19 @@
 
         <div class="inovice-con" :class="{'ic-active':item.showInvoice}">
           <div class="o-invoiceTitle">
-            <span>{{$t('manage.myOrders.invoice')}}</span>
-            <span v-if="getStatus(item) !== 'shipped'" @click="edit"><i class="iconfont icon-edit"></i>{{$t('manage.myOrders.edit')}}</span>
+            <span>{{t('manage.myOrders.invoice')}}</span>
+            <span v-if="getStatus(item) !== 'shipped'" @click="edit"><i class="iconfont icon-edit"></i>{{t('manage.myOrders.edit')}}</span>
             <!-- <span v-else><i class="iconfont icon-choice"></i>发票已寄出</span> -->
           </div>
           <div class="o-invoice">
-            <editInvoice :data="getItemInvoice(item)" :orderId='item.id' :invoiceId="item.invoice&&(item.invoice.id)"/>
+            <!-- <editInvoice :data="getItemInvoice(item)" :orderId='item.id' :invoiceId="item.invoice&&(item.invoice.id)"/> -->
           </div>
         </div>
         <div class="bottom-area">
           <div class="to-pay">
             <template v-if="getStatus(item) !== 'expire'">
               <span class="cancel btns" @click="changeIvoiceStatus(i,item)">
-                {{item.invoice && item.invoice.type ? $t('manage.myOrders.invoiceInfo') : $t('manage.myOrders.invoice')}}
+                {{item.invoice && item.invoice.type ? t('manage.myOrders.invoiceInfo') : t('manage.myOrders.invoice')}}
               </span>
             </template>
           </div>
@@ -41,167 +168,6 @@
       </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-import editInvoice from '@/components/editInvoice'
-import MallConfig from '@/config/mall'
-
-export default {
-  props: {
-    item: Object,
-    i: Number
-  },
-  provide () {
-    return {
-      hideInvoice: this.hideInvoice,
-      saveInvoiceData: this.saveInvoice
-    }
-  },
-  data () {
-    return {
-      PAYSIDMAP: MallConfig.PAYSIDMAP,
-      showInvoice: true
-    }
-  },
-  computed: {
-    ...mapState({
-      token: state => state.user.token,
-      language: state => state.language.current,
-      myorder: state => {
-        let type = Object.prototype.toString.call(state.user.myorder)
-        if (type === '[object Object]') {
-          return state.user.myorder
-        }
-        let condition = state.user.myorder && state.user.myorder !== 'null' && type !== '[object Array]'
-        return condition ? JSON.parse(state.user.myorder) : {}
-      }
-    })
-  },
-  components: {
-    editInvoice
-  },
-  mounted () {
-    this.$set(this.item, 'showInvoice', false)
-  },
-  methods: {
-    edit () {
-      this.showInvoice = false
-    },
-    hideInvoice () {
-      this.showInvoice = true
-    },
-    changeIvoiceStatus (i, item) {
-      // item.showInvoice = !item.showInvoice
-      // this.$set(this.item, 'showInvoice', item.showInvoice)
-      // this.$bus.emit('order/showInvoice', item)
-
-      
-      this.$bus.$emit('order/showInvoice', {
-        order: item,
-        orderId: item.id,
-        data: this.getItemInvoice(item),
-        invoiceId: item.invoice&&(item.invoice.id)
-      })
-    },
-    saveInvoice (data) {
-      this.$set(this.item, 'invoice', data)
-    },
-    getItemInvoice (item) {
-      let invoice = item.invoice
-      if (!invoice) {
-        return ''
-      }
-      invoice['typeName'] = this.$t(`manage.invoiceTypeName.${invoice.type}`)
-      return invoice
-    },
-    getStatus (item) {
-      let temp = ''
-      let sPay = function () {
-        switch (item.shippingStatus) {
-          case 'unshipped':
-            temp = 'unshipped'
-            break
-          case 'partShipped':
-            temp = 'partShipped'
-            break
-          case 'shipped':
-            temp = 'shipped'
-            break
-          case 'received':
-            temp = 'received'
-            break
-          default:
-            break
-        }
-      }
-      let pPay = function () {
-        switch (item.paymentStatus) {
-          case 'unpaid':
-            temp = 'unpaid'
-            break
-          case 'paid':
-            sPay()
-            break
-          default:
-            break
-        }
-      }
-
-      switch (item.orderStatus) {
-        case 'unprocessed':
-          pPay()
-          break
-        case 'completed':
-          temp = 'finish'
-          break
-        case 'processed':
-          sPay()
-          break
-        case 'expire':
-          temp = 'expire'
-          break
-        default:
-          break
-      }
-      return temp
-    },
-    toPay (item) {
-      this.$router.push({
-        name: 'pay',
-        query: {
-          payType: 0,
-          orderId: item.id,
-          orderType: 0,
-          orderSn: item.orderSn
-        }
-      })
-    },
-    async cancal (item) {
-      this.$toast.showConfirm('warn', this.$t('toast.15'), async () => {
-        let params = {
-          orderId: item.id
-        }
-        let res = await this.$http({
-          method: 'post',
-          data: params,
-          headers: {
-            token: this.token
-          },
-          url: '/user/order/cancel'
-        })
-        let data = res.data
-        if (data.code === 0) {
-          return this.$toast.show('success', this.$t('toast.37'), () => {
-            this.currentPage = this.currentPage >= this.maxPage ? this.maxPage : this.currentPage
-            this.getList()
-          })
-        }
-        return this.$toast.show('error', this.$t('toast.38'))
-      })
-    }
-  }
-}
-</script>
 <style lang="less" scoped>
 .order-item {
     margin-bottom: 40px;

src/views/pc/order/components/downOrder.vue

@@ -1,7 +1,44 @@
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import Paging from '@/components/pc/Paging/index.vue'
+import InterestsItem from './downItem.vue'
+import { getDownOrderList } from '@/api/user'
+import { PAYSIDMAP } from '../data.ts'
+const pageSize = ref(5)
+const currentPage = ref(1)
+const total = ref(0)
+const list = ref([])
+const maxPage = ref(0)
+const showInvoice = ref(false)
+const currentI = ref('')
+const currentItem = ref('')
+watch(()=>currentPage.value, () => {
+  getList()
+})
+onMounted(() => {
+  getList()
+})
+function pageChange(data) {
+  currentPage.value = data
+}
+async function getList() {
+  window.scrollTo(0, 0)
+  let params = {
+    type: '',
+    pageNum: currentPage.value,
+    pageSize: pageSize.value
+  }
+  let res = await getDownOrderList(params)
+  pageSize.value = res.pageSize
+  total.value = res.total || 0
+  list.value = res.list
+}
+</script>
+
 <template>
   <div>
     <div v-if="total">
-      <div class="order-item" v-for="(item,i) in data" :key="item.orderSn">
+      <div class="order-item" v-for="(item,i) in list" :key="item.orderSn">
         <InterestsItem :item="item" :i="i"  />
       </div>
     </div>
@@ -17,367 +54,367 @@
   </div>
 </template>
 
-<script>
+// <script>
 
-import InterestsItem from './downItem.vue'
-import { mapState } from 'vuex'
-import tableList from '@/components/table'
-import {capacity, recharge, invoice} from './iconsumption'
-import Paging from '@/components/Paging'
-import vcenter from '@/components/vcenter'
-import MemberApi from '@/apis/member'
-import MallConfig from '@/config/mall'
-import { i18n } from '@/lang'
+// import InterestsItem from './downItem.vue'
+// import { mapState } from 'vuex'
+// import tableList from '@/components/table'
+// import {capacity, recharge, invoice} from './iconsumption'
+// import Paging from '@/components/Paging'
+// import vcenter from '@/components/vcenter'
+// import MemberApi from '@/apis/member'
+// import MallConfig from '@/config/mall'
+// import { i18n } from '@/lang'
 
-let AMOUNTSTR = {
-  0: '￥',
-  1: '￥',
-  2: '$'
-}
+// let AMOUNTSTR = {
+//   0: '￥',
+//   1: '￥',
+//   2: '$'
+// }
 
-let methodStr = {
-  0: 'getMemberOrderList',
-  1: 'getChargeList',
-  2: 'getInvoiceList'
-}
-let rechargeType = {
-  0: i18n.t('manage.Spending.rechargeValue.0'),
-  '-1': i18n.t('manage.Spending.rechargeValue.-1'),
-  1: i18n.t('manage.Spending.rechargeValue.1'),
-  2: i18n.t('manage.Spending.rechargeValue.2')
-}
+// let methodStr = {
+//   0: 'getMemberOrderList',
+//   1: 'getChargeList',
+//   2: 'getInvoiceList'
+// }
+// let rechargeType = {
+//   0: i18n.t('manage.Spending.rechargeValue.0'),
+//   '-1': i18n.t('manage.Spending.rechargeValue.-1'),
+//   1: i18n.t('manage.Spending.rechargeValue.1'),
+//   2: i18n.t('manage.Spending.rechargeValue.2')
+// }
 
-let invoceStatusType = {
-  0: '未开票',
-  1: '已开票'
-}
+// let invoceStatusType = {
+//   0: '未开票',
+//   1: '已开票'
+// }
 
-let invoiceType = {
-  1: '不需要发票',
-  2: '增值税普通发票',
-  3: '增值税专用发票'
-}
+// let invoiceType = {
+//   1: '不需要发票',
+//   2: '增值税普通发票',
+//   3: '增值税专用发票'
+// }
 
-export default {
-  components: {
-    tableList,
-    Paging,
-    vcenter,
-    InterestsItem
-  },
-  data () {
-    let cameraList = [
-      {
-        name: '全部',
-        id: ''
-      },
-      {
-        name: '二目充值',
-        id: 0
-      },
-      {
-        name: '会员权益',
-        id: 4
-      }
-    ]
-    return {
-      PAYSIDMAP: MallConfig.PAYSIDMAP,
-      tabHeader: capacity,
-      data: [],
-      cameraList,
-      active: 1,
-      recharge,
-      total: 30,
-      pageSize: 5,
-      currentPage: 1,
-      tabActive: false,
-      deviceActive: false,
-      max: 0,
-      activeDevice: '',
-      activeType: '全部',
-      activeId: '',
-      activeTypeId: '',
-      tabList: [
-        {
-          name: this.$t('manage.Spending.tabListMember')
-        },
-        {
-          name: this.$t('manage.Spending.tabListRecharge')
-        },
-        {
-          name: this.$t('manage.Spending.tabListInvoice')
-        },
-      ]
-    }
-  },
-  computed: {
-    ...mapState({
-      token: state => state.user.token,
-      language: state => state.language.current,
-      deviceLogin: state => state.user.deviceLogin,
-      // myexpansion: state => {
-      //   let type = Object.prototype.toString.call(state.user.myexpansion)
-      //   if (type === '[object Object]') {
-      //     return state.user.myexpansion
-      //   }
-      //   let condition = state.user.myexpansion && state.user.myexpansion !== 'null' && type !== '[object Array]'
-      //   return (condition ? JSON.parse(state.user.myexpansion) : {})
-      // },
-      mycharge: state => {
-        let type = Object.prototype.toString.call(state.user.mycharge)
-        if (type === '[object Object]') {
-          return state.user.mycharge
-        }
-        let condition = state.user.mycharge && state.user.mycharge !== 'null' && type !== '[object Array]'
-        return (condition ? JSON.parse(state.user.mycharge) : {})
-      },
-      myinvoicelist: state => {
-        let type = Object.prototype.toString.call(state.user.myinvoicelist)
-        if (type === '[object Object]') {
-          return state.user.myinvoicelist
-        }
-        let condition = state.user.myinvoicelist && state.user.myinvoicelist !== 'null' && type !== '[object Array]'
-        return (condition ? JSON.parse(state.user.myinvoicelist) : {})
-      },
-      invoicedevice: state => {
-        let type = Object.prototype.toString.call(state.user.invoicedevice)
-        if (type === '[object Object]') {
-          return state.user.invoicedevice
-        }
-        let condition = state.user.invoicedevice && state.user.invoicedevice !== 'null'
-        return (condition ? state.user.invoicedevice : [])
-      },
-      searchKey () {
-        return this.$parent.searchKey
-      }
-    })
-  },
-  watch: {
-    currentPage (newVal) {
-      this.getList()
-    },
-    language (newVal) {
-      this.active = 0
-      this.data.forEach(item => {
-        let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
-        item['validDateStr'] = condition
-        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
-        item['channel'] = this.$t(`manage.channelType.${item['status']}`)
-        item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
-        item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
-      })
-    },
-    activeId (newVal) {
-      if (this.active === 2) {
-        this.getList()
-      }
-      this.getInvoiceMax()
-    },
-    activeTypeId (newVal) {
-      if (this.active === 2) {
-        this.getList()
-      }
-    },
-    active (newVal) {
-      switch (newVal) {
-        case 1:
-          this.tabHeader = recharge
-          break
-        case 2:
-          !this.deviceLogin && this.getAllDevice()
-          this.tabHeader = invoice
-          break
-        default:
-          this.tabHeader = capacity
-          break
-      }
-      if (newVal !== 1) {
-        this.$emit('changeSearchShow', false)
-      } else {
-        this.$emit('changeSearchShow', true)
-      }
-      this.currentPage === 1 ? this.getList() : this.currentPage = 1
-    }
-  },
-  methods: {
-    pageChange (data) {
-      this.currentPage = data
-    },
-    selectInId (item) {
-      this.activeDevice = item.childName
-      this.activeId = item.id
-    },
-    selectCamTy (item) {
-      this.activeType = item.name
-      this.activeTypeId = item.id
-    },
-    showDetail (item) {
-      this.$toast.showInvoiceDetail(item)
-    },
-    getList (searchKey = '') {
-      window.scrollTo(0, 0)
-      let str = methodStr[this.active]
-      this[str](searchKey)
-    },
-    openInvice () {
-      let params = {
-        max: this.max,
-        cameraId: this.activeId
-      };
-      (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
-    },
-    async getAllDevice (searchKey = '') {
-      let params = {
-        cameraType: ''
-      }
-      await this.$store.dispatch('getInvoiceDevice', params)
-      this.activeDevice = this.invoicedevice[0].childName
-      this.activeId = this.invoicedevice[0].id
-    },
+// export default {
+//   components: {
+//     tableList,
+//     Paging,
+//     vcenter,
+//     InterestsItem
+//   },
+//   data () {
+//     let cameraList = [
+//       {
+//         name: '全部',
+//         id: ''
+//       },
+//       {
+//         name: '二目充值',
+//         id: 0
+//       },
+//       {
+//         name: '会员权益',
+//         id: 4
+//       }
+//     ]
+//     return {
+//       PAYSIDMAP: MallConfig.PAYSIDMAP,
+//       tabHeader: capacity,
+//       data: [],
+//       cameraList,
+//       active: 1,
+//       recharge,
+//       total: 30,
+//       pageSize: 5,
+//       currentPage: 1,
+//       tabActive: false,
+//       deviceActive: false,
+//       max: 0,
+//       activeDevice: '',
+//       activeType: '全部',
+//       activeId: '',
+//       activeTypeId: '',
+//       tabList: [
+//         {
+//           name: this.$t('manage.Spending.tabListMember')
+//         },
+//         {
+//           name: this.$t('manage.Spending.tabListRecharge')
+//         },
+//         {
+//           name: this.$t('manage.Spending.tabListInvoice')
+//         },
+//       ]
+//     }
+//   },
+//   computed: {
+//     ...mapState({
+//       token: state => state.user.token,
+//       language: state => state.language.current,
+//       deviceLogin: state => state.user.deviceLogin,
+//       // myexpansion: state => {
+//       //   let type = Object.prototype.toString.call(state.user.myexpansion)
+//       //   if (type === '[object Object]') {
+//       //     return state.user.myexpansion
+//       //   }
+//       //   let condition = state.user.myexpansion && state.user.myexpansion !== 'null' && type !== '[object Array]'
+//       //   return (condition ? JSON.parse(state.user.myexpansion) : {})
+//       // },
+//       mycharge: state => {
+//         let type = Object.prototype.toString.call(state.user.mycharge)
+//         if (type === '[object Object]') {
+//           return state.user.mycharge
+//         }
+//         let condition = state.user.mycharge && state.user.mycharge !== 'null' && type !== '[object Array]'
+//         return (condition ? JSON.parse(state.user.mycharge) : {})
+//       },
+//       myinvoicelist: state => {
+//         let type = Object.prototype.toString.call(state.user.myinvoicelist)
+//         if (type === '[object Object]') {
+//           return state.user.myinvoicelist
+//         }
+//         let condition = state.user.myinvoicelist && state.user.myinvoicelist !== 'null' && type !== '[object Array]'
+//         return (condition ? JSON.parse(state.user.myinvoicelist) : {})
+//       },
+//       invoicedevice: state => {
+//         let type = Object.prototype.toString.call(state.user.invoicedevice)
+//         if (type === '[object Object]') {
+//           return state.user.invoicedevice
+//         }
+//         let condition = state.user.invoicedevice && state.user.invoicedevice !== 'null'
+//         return (condition ? state.user.invoicedevice : [])
+//       },
+//       searchKey () {
+//         return this.$parent.searchKey
+//       }
+//     })
+//   },
+//   watch: {
+//     currentPage (newVal) {
+//       this.getList()
+//     },
+//     language (newVal) {
+//       this.active = 0
+//       this.data.forEach(item => {
+//         let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
+//         item['validDateStr'] = condition
+//         item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
+//         item['channel'] = this.$t(`manage.channelType.${item['status']}`)
+//         item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
+//         item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
+//       })
+//     },
+//     activeId (newVal) {
+//       if (this.active === 2) {
+//         this.getList()
+//       }
+//       this.getInvoiceMax()
+//     },
+//     activeTypeId (newVal) {
+//       if (this.active === 2) {
+//         this.getList()
+//       }
+//     },
+//     active (newVal) {
+//       switch (newVal) {
+//         case 1:
+//           this.tabHeader = recharge
+//           break
+//         case 2:
+//           !this.deviceLogin && this.getAllDevice()
+//           this.tabHeader = invoice
+//           break
+//         default:
+//           this.tabHeader = capacity
+//           break
+//       }
+//       if (newVal !== 1) {
+//         this.$emit('changeSearchShow', false)
+//       } else {
+//         this.$emit('changeSearchShow', true)
+//       }
+//       this.currentPage === 1 ? this.getList() : this.currentPage = 1
+//     }
+//   },
+//   methods: {
+//     pageChange (data) {
+//       this.currentPage = data
+//     },
+//     selectInId (item) {
+//       this.activeDevice = item.childName
+//       this.activeId = item.id
+//     },
+//     selectCamTy (item) {
+//       this.activeType = item.name
+//       this.activeTypeId = item.id
+//     },
+//     showDetail (item) {
+//       this.$toast.showInvoiceDetail(item)
+//     },
+//     getList (searchKey = '') {
+//       window.scrollTo(0, 0)
+//       let str = methodStr[this.active]
+//       this[str](searchKey)
+//     },
+//     openInvice () {
+//       let params = {
+//         max: this.max,
+//         cameraId: this.activeId
+//       };
+//       (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
+//     },
+//     async getAllDevice (searchKey = '') {
+//       let params = {
+//         cameraType: ''
+//       }
+//       await this.$store.dispatch('getInvoiceDevice', params)
+//       this.activeDevice = this.invoicedevice[0].childName
+//       this.activeId = this.invoicedevice[0].id
+//     },
 
-    // 扩容记录
-    async getConsumpList (searchKey = '') {
-      if (this.deviceLogin) {
-        searchKey = this.deviceLogin
-      }
-      let data = {
-        params: {
-          childName: searchKey.trim(),
-          pageNum: searchKey ? 1 : this.currentPage,
-          pageSize: this.pageSize
-        },
-        url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
-      }
-      await this.$store.dispatch('getUserExpansion', data)
-      if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
-        return this.$toast.show('warn', this.$t('toast.25'), () => {
-          this.getList()
-        })
-      }
-      console.log(this.myexpansion, 'this.myexpansion')
-      this.pageSize = this.myexpansion.pageSize
-      this.total = this.myexpansion.total || 0
-      this.data = this.myexpansion.list
-      this.data.forEach(item => {
-        let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
-        item['validDateStr'] = condition
-        item['statusStr'] = this.$t(`manage.myOrders.${item['status']}`)
-        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
-        item['channel'] = this.$t(`manage.channelType.${item['status']}`)
-        item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
-        item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
-      })
-    },
-    getMemberOrderList () {
-      let data = {
-        snCode: this.searchKey,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      }
-      MemberApi.getVirtualOrderList(data).then(res => {
-        this.data = res.data.data.list
-        console.log(this.data)
-        this.total = res.data.data.total
-      })
-    },
-    async getInvoiceMax () {
-      let res = await this.$http({
-        method: 'post',
-        data: {
-          cameraId: this.activeId
-        },
-        headers: {
-          token: this.token
-        },
-        url: '/user/invoice/max'
-      })
+//     // 扩容记录
+//     async getConsumpList (searchKey = '') {
+//       if (this.deviceLogin) {
+//         searchKey = this.deviceLogin
+//       }
+//       let data = {
+//         params: {
+//           childName: searchKey.trim(),
+//           pageNum: searchKey ? 1 : this.currentPage,
+//           pageSize: this.pageSize
+//         },
+//         url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
+//       }
+//       await this.$store.dispatch('getUserExpansion', data)
+//       if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
+//         return this.$toast.show('warn', this.$t('toast.25'), () => {
+//           this.getList()
+//         })
+//       }
+//       console.log(this.myexpansion, 'this.myexpansion')
+//       this.pageSize = this.myexpansion.pageSize
+//       this.total = this.myexpansion.total || 0
+//       this.data = this.myexpansion.list
+//       this.data.forEach(item => {
+//         let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
+//         item['validDateStr'] = condition
+//         item['statusStr'] = this.$t(`manage.myOrders.${item['status']}`)
+//         item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
+//         item['channel'] = this.$t(`manage.channelType.${item['status']}`)
+//         item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
+//         item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
+//       })
+//     },
+//     getMemberOrderList () {
+//       let data = {
+//         snCode: this.searchKey,
+//         pageNum: this.currentPage,
+//         pageSize: this.pageSize
+//       }
+//       MemberApi.getVirtualOrderList(data).then(res => {
+//         this.data = res.data.data.list
+//         console.log(this.data)
+//         this.total = res.data.data.total
+//       })
+//     },
+//     async getInvoiceMax () {
+//       let res = await this.$http({
+//         method: 'post',
+//         data: {
+//           cameraId: this.activeId
+//         },
+//         headers: {
+//           token: this.token
+//         },
+//         url: '/user/invoice/max'
+//       })
 
-      let data = res.data
-      if (data.code !== 0) return
-      this.max = data.data.maxInvoice
-    },
+//       let data = res.data
+//       if (data.code !== 0) return
+//       this.max = data.data.maxInvoice
+//     },
 
-    // 充值记录
-    async getChargeList (searchKey = '') {
-      if (this.deviceLogin) {
-        searchKey = this.deviceLogin
-      }
-      let data = {
-        params: {
-          pageNum: searchKey ? 1 : this.currentPage,
-          pageSize: this.pageSize
-        },
-        url:`/user/virtualOrder/downloadOrderList`
-      }
-      await this.$store.dispatch('getChargeList', data)
-      if (!this.mycharge.total && searchKey && !this.deviceLogin) {
-        return this.$toast.show('warn', this.$t('toast.25'), () => {
-          this.getList()
-        })
-      }
-      this.pageSize = this.mycharge.pageSize
-      this.total = this.mycharge.total || 0
-      this.data = this.mycharge.list
-      this.data.forEach(item => {
-        item['status'] = rechargeType[item['status']]
-      })
+//     // 充值记录
+//     async getChargeList (searchKey = '') {
+//       if (this.deviceLogin) {
+//         searchKey = this.deviceLogin
+//       }
+//       let data = {
+//         params: {
+//           pageNum: searchKey ? 1 : this.currentPage,
+//           pageSize: this.pageSize
+//         },
+//         url:`/user/virtualOrder/downloadOrderList`
+//       }
+//       await this.$store.dispatch('getChargeList', data)
+//       if (!this.mycharge.total && searchKey && !this.deviceLogin) {
+//         return this.$toast.show('warn', this.$t('toast.25'), () => {
+//           this.getList()
+//         })
+//       }
+//       this.pageSize = this.mycharge.pageSize
+//       this.total = this.mycharge.total || 0
+//       this.data = this.mycharge.list
+//       this.data.forEach(item => {
+//         item['status'] = rechargeType[item['status']]
+//       })
 
-      console.log(this.data)
-    },
+//       console.log(this.data)
+//     },
 
-    // 发票记录
-    async getInvoiceList () {
-      let data = {
-        params: {
-          cameraId: this.activeId,
-          pageNum: this.currentPage,
-          pageSize: this.pageSize,
-          type: this.activeTypeId
-        },
-        url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
-      }
+//     // 发票记录
+//     async getInvoiceList () {
+//       let data = {
+//         params: {
+//           cameraId: this.activeId,
+//           pageNum: this.currentPage,
+//           pageSize: this.pageSize,
+//           type: this.activeTypeId
+//         },
+//         url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
+//       }
 
-      await this.$store.dispatch('getInvoiceList', data)
-      this.pageSize = this.myinvoicelist.pageSize
-      this.total = this.myinvoicelist.total || 0
-      this.data = this.myinvoicelist.list
-      this.data.forEach(item => {
-        item['detail'] = '详细'
-        item['money'] = '￥' + item['money']
-        item['finish'] = invoceStatusType[item['finish']]
-        item['type'] = invoiceType[item['type']]
-      })
-    },
-    handleSearch (keyword) {
-      this.getList(keyword)
-    }
-  },
-  mounted () {
-    this.getList()
+//       await this.$store.dispatch('getInvoiceList', data)
+//       this.pageSize = this.myinvoicelist.pageSize
+//       this.total = this.myinvoicelist.total || 0
+//       this.data = this.myinvoicelist.list
+//       this.data.forEach(item => {
+//         item['detail'] = '详细'
+//         item['money'] = '￥' + item['money']
+//         item['finish'] = invoceStatusType[item['finish']]
+//         item['type'] = invoiceType[item['type']]
+//       })
+//     },
+//     handleSearch (keyword) {
+//       this.getList(keyword)
+//     }
+//   },
+//   mounted () {
+//     this.getList()
 
-    this.$bus.$off('refreshInvoice')
-    this.$bus.$on('refreshInvoice', () => {
-      if (this.active === 2) {
-        this.getList()
-      }
-      this.getInvoiceMax()
-    })
+//     this.$bus.$off('refreshInvoice')
+//     this.$bus.$on('refreshInvoice', () => {
+//       if (this.active === 2) {
+//         this.getList()
+//       }
+//       this.getInvoiceMax()
+//     })
 
-    document.addEventListener('click', (e) => {
-      if (this.$refs.invoiceMenu) {
-        if (!this.$refs.invoiceMenu.contains(e.target)) {
-          this.tabActive = false
-        }
-      }
-      if (this.$refs.deviceMenu) {
-        if (!this.$refs.deviceMenu.contains(e.target)) {
-          this.deviceActive = false
-        }
-      }
-    })
-  }
-}
-</script>
+//     document.addEventListener('click', (e) => {
+//       if (this.$refs.invoiceMenu) {
+//         if (!this.$refs.invoiceMenu.contains(e.target)) {
+//           this.tabActive = false
+//         }
+//       }
+//       if (this.$refs.deviceMenu) {
+//         if (!this.$refs.deviceMenu.contains(e.target)) {
+//           this.deviceActive = false
+//         }
+//       }
+//     })
+//   }
+// }
+// </script>
 
 <style lang="less" scoped>
 .scene-nothing {
@@ -385,6 +422,7 @@ export default {
   padding: 42px 0 210px 0;
   img {
     padding-bottom: 22px;
+    margin: 0 auto;
   }
   div {
     font-size: 16px;

src/views/pc/order/components/interestsItem.vue

@@ -1,3 +1,93 @@
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import { getUserOrder } from '@/api/user'
+import Paging from '@/components/pc/Paging/index.vue'
+import { useI18n } from 'vue-i18n'
+import { PAYSIDMAP } from '../data.ts'
+const { locale: language, t } = useI18n()
+const props = defineProps({
+  item: {
+    type: Object,
+    default: {}
+  },
+  i: {
+    type: Number
+  }
+})
+const showInvoice = ref(true)
+function changeIvoiceStatus(i, item) {
+  // this.$bus.$emit('order/showInvoice', {
+  //   order: item,
+  //   orderId: item.id,
+  //   data: this.getItemInvoice(item),
+  //   invoiceId: item.invoice && item.invoice.id
+  // })
+}
+
+function getStatus(item) {
+  let temp = ''
+  let sPay = function () {
+    switch (item.shippingStatus) {
+      case 'unshipped':
+        temp = 'unshipped'
+        break
+      case 'partShipped':
+        temp = 'partShipped'
+        break
+      case 'shipped':
+        temp = 'shipped'
+        break
+      case 'received':
+        temp = 'received'
+        break
+      default:
+        break
+    }
+  }
+  let pPay = function () {
+    switch (item.paymentStatus) {
+      case 'unpaid':
+        temp = 'unpaid'
+        break
+      case 'paid':
+        sPay()
+        break
+      default:
+        break
+    }
+  }
+
+  switch (item.orderStatus) {
+    case 'unprocessed':
+      pPay()
+      break
+    case 'completed':
+      temp = 'finish'
+      break
+    case 'processed':
+      sPay()
+      break
+    case 'expire':
+      temp = 'expire'
+      break
+    default:
+      break
+  }
+  return temp
+}
+function  toPay(item) {
+      this.$router.push({
+        name: 'pay',
+        query: {
+          payType: 0,
+          orderId: item.id,
+          orderType: 0,
+          orderSn: item.orderSn
+        }
+      })
+    }
+</script>
+
 <template>
   <div class="order-item" :key="i">
         <!-- <div class="o-top"></div> -->
@@ -31,7 +121,7 @@
             <!-- <span v-else><i class="iconfont icon-choice"></i>发票已寄出</span> -->
           </div>
           <div class="o-invoice">
-            <editInvoice :data="getItemInvoice(item)" :orderId='item.id' :invoiceId="item.invoice&&(item.invoice.id)"/>
+            <!-- <editInvoice :data="getItemInvoice(item)" :orderId='item.id' :invoiceId="item.invoice&&(item.invoice.id)"/> -->
           </div>
         </div>
         <div class="bottom-area">
@@ -44,166 +134,6 @@
       </div>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-import editInvoice from '@/components/editInvoice'
-import MallConfig from '@/config/mall'
-
-export default {
-  props: {
-    item: Object,
-    i: Number
-  },
-  provide () {
-    return {
-      hideInvoice: this.hideInvoice,
-      saveInvoiceData: this.saveInvoice
-    }
-  },
-  data () {
-    return {
-      PAYSIDMAP: MallConfig.PAYSIDMAP,
-      showInvoice: true
-    }
-  },
-  computed: {
-    ...mapState({
-      token: state => state.user.token,
-      language: state => state.language.current,
-      myorder: state => {
-        let type = Object.prototype.toString.call(state.user.myorder)
-        if (type === '[object Object]') {
-          return state.user.myorder
-        }
-        let condition = state.user.myorder && state.user.myorder !== 'null' && type !== '[object Array]'
-        return condition ? JSON.parse(state.user.myorder) : {}
-      }
-    })
-  },
-  components: {
-    editInvoice
-  },
-  mounted () {
-    this.$set(this.item, 'showInvoice', false)
-  },
-  methods: {
-    edit () {
-      this.showInvoice = false
-    },
-    hideInvoice () {
-      this.showInvoice = true
-    },
-    changeIvoiceStatus (i, item) {
-      // item.showInvoice = !item.showInvoice
-      // this.$set(this.item, 'showInvoice', item.showInvoice)
-
-      
-      this.$bus.$emit('order/showInvoice', {
-        order: item,
-        orderId: item.id,
-        data: this.getItemInvoice(item),
-        invoiceId: item.invoice&&(item.invoice.id)
-      })
-    },
-    saveInvoice (data) {
-      this.$set(this.item, 'invoice', data)
-    },
-    getItemInvoice (item) {
-      let invoice = item.invoice
-      if (!invoice) {
-        return ''
-      }
-      invoice['typeName'] = this.$t(`manage.invoiceTypeName.${invoice.type}`)
-      return invoice
-    },
-    getStatus (item) {
-      let temp = ''
-      let sPay = function () {
-        switch (item.shippingStatus) {
-          case 'unshipped':
-            temp = 'unshipped'
-            break
-          case 'partShipped':
-            temp = 'partShipped'
-            break
-          case 'shipped':
-            temp = 'shipped'
-            break
-          case 'received':
-            temp = 'received'
-            break
-          default:
-            break
-        }
-      }
-      let pPay = function () {
-        switch (item.paymentStatus) {
-          case 'unpaid':
-            temp = 'unpaid'
-            break
-          case 'paid':
-            sPay()
-            break
-          default:
-            break
-        }
-      }
-
-      switch (item.orderStatus) {
-        case 'unprocessed':
-          pPay()
-          break
-        case 'completed':
-          temp = 'finish'
-          break
-        case 'processed':
-          sPay()
-          break
-        case 'expire':
-          temp = 'expire'
-          break
-        default:
-          break
-      }
-      return temp
-    },
-    toPay (item) {
-      this.$router.push({
-        name: 'pay',
-        query: {
-          payType: 0,
-          orderId: item.id,
-          orderType: 0,
-          orderSn: item.orderSn
-        }
-      })
-    },
-    async cancal (item) {
-      this.$toast.showConfirm('warn', this.$t('toast.15'), async () => {
-        let params = {
-          orderId: item.id
-        }
-        let res = await this.$http({
-          method: 'post',
-          data: params,
-          headers: {
-            token: this.token
-          },
-          url: '/user/order/cancel'
-        })
-        let data = res.data
-        if (data.code === 0) {
-          return this.$toast.show('success', this.$t('toast.37'), () => {
-            this.currentPage = this.currentPage >= this.maxPage ? this.maxPage : this.currentPage
-            this.getList()
-          })
-        }
-        return this.$toast.show('error', this.$t('toast.38'))
-      })
-    }
-  }
-}
-</script>
 <style lang="less" scoped>
 .text-ellipsis{
   overflow:hidden;

src/views/pc/order/components/interestsOrder.vue

@@ -1,7 +1,44 @@
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import Paging from '@/components/pc/Paging/index.vue'
+import InterestsItem from './InterestsItem.vue'
+import { incrementOrderList } from '@/api/user'
+const pageSize = ref(5)
+const currentPage = ref(1)
+const total = ref(0)
+const list = ref([])
+const maxPage = ref(0)
+const showInvoice = ref(false)
+const currentI = ref('')
+const currentItem = ref('')
+watch(()=>currentPage.value, () => {
+  getList()
+})
+onMounted(() => {
+  getList()
+})
+function pageChange(data) {
+  currentPage.value = data
+}
+async function getList() {
+  window.scrollTo(0, 0)
+  let params = {
+    type: '',
+    pageNum: currentPage.value,
+    pageSize: pageSize.value
+  }
+  let res = await incrementOrderList(params)
+  console.log(res, 'incrementOrderList')
+  pageSize.value = res.pageSize
+  total.value = res.total || 0
+  list.value = res.list
+}
+</script>
+
 <template>
   <div>
     <div v-if="total">
-      <div class="order-item" v-for="(item,i) in data" :key="item.orderSn">
+      <div class="order-item" v-for="(item,i) in list" :key="item.orderSn">
         <InterestsItem :item="item" :i="i" @isOrderInvoice="edit"  />
       </div>
     </div>
@@ -17,80 +54,13 @@
   </div>
 </template>
 
-<script>
-import InterestsItem from './interestsItem'
-import { mapState } from 'vuex'
-import Paging from '@/components/Paging'
-import MemberApi from '@/apis/member'
-
-export default {
-  provide () {
-    return {
-      getList: this.getList
-    }
-  },
-  data () {
-    return {
-      pageSize: 5,
-      currentPage: 1,
-      data: [],
-      total: 0,
-      maxPage: 0,
-      showInvoice: false,
-      currentI: '',
-      currentItem: ''
-    }
-  },
-  
-  watch: {
-    currentPage () {
-      this.getMemberOrderList()
-    }
-  },
-  computed: {
-    ...mapState({
-      token: state => state.user.token,
-      language: state => state.language.current
-    })
-  },
-  components: {
-    InterestsItem,
-    Paging
-  },
-  mounted () {
-    this.getMemberOrderList()
-  },
-  methods: {
-    edit (bool) {
-      console.log(bool)
-      this.$bus.$emit('isOrderInvoice', bool)
-    },
-    pageChange (data) {
-      this.currentPage = data
-    },
-    getMemberOrderList () {
-      let data = {
-        snCode: '',
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      }
-      MemberApi.getVirtualOrderList(data).then(res => {
-        this.data = res.data.data.list
-        this.total = res.data.data.total
-      })
-    },
-    
-    
-  }
-}
-</script>
-
 <style lang="less" scoped>
 .scene-nothing {
   text-align: center;
   padding: 42px 0 210px 0;
   img {
     padding-bottom: 22px;
+    margin: 0 auto;
   }
   div {
     font-size: 16px;

src/views/pc/order/components/orderItem.vue

@@ -2,6 +2,9 @@
 import { ref, watch, onMounted, computed } from 'vue'
 import { getUserOrder } from '@/api/user'
 import Paging from '@/components/pc/Paging/index.vue'
+import { useI18n } from 'vue-i18n'
+import { goodsMap } from '../data.ts'
+const { locale: language, t } = useI18n()
 const props = defineProps({
   item: {
     type: Object,
@@ -14,13 +17,33 @@ const props = defineProps({
 
 const list = ref([])
 const showInvoice = ref(false)
-
-// watch(currentPage.value, () => {
+const orderDetail = {
+  '1': [
+    t('manage.orderDetail.1.0'),
+    t('manage.orderDetail.1.1'),
+    t('manage.orderDetail.1.2'),
+  ],
+  '4': [
+    t('manage.orderDetail.4.0'),
+    t('manage.orderDetail.4.1'),
+  ],
+  '7': [
+    t('manage.orderDetail.7.0'),
+  ],
+  '11':
+    [t('manage.orderDetail.11.0'),],
+  '12': [
+    t('manage.orderDetail.12.0'),
+  ]
+}
+// watch(()=>currentPage.value, () => {
 //   getList()
 // })
-onMounted(() => {
-  getList()
-})
+// onMounted(() => {
+//   getList()
+// })
+console.log(goodsMap, 'goodsMap')
+
 function changeIvoiceStatus(i, item) {
   // this.$bus.$emit('order/showInvoice', {
   //   order: item,
@@ -81,19 +104,6 @@ function getStatus(item) {
   }
   return temp
 }
-async function getList() {
-  window.scrollTo(0, 0)
-  let params = {
-    type: '',
-    pageNum: this.currentPage,
-    pageSize: this.pageSize
-  }
-  let res = await getUserOrder(params)
-  console.log('getUserOrder', res)
-  pageSize.value = res.pageSize
-  total.value = res.total || 0
-  list.value = res.list
-}
 function  toPay(item) {
       this.$router.push({
         name: 'pay',
@@ -112,20 +122,20 @@ function  toPay(item) {
     <div class="o-title">
       <span>
         <span class="orderSn table-header"
-          >{{ $t('manage.myOrders.numbers') }}{{ item.orderSn }}</span
+          >{{ t('manage.myOrders.numbers') }}{{ item.orderSn }}</span
         >
         <span class="orderTime">{{ item.orderTime }}</span>
       </span>
-      <span class="table-header">{{ $t('manage.myOrders.quantity') }}</span>
-      <span class="table-header">{{ $t('manage.myOrders.subtotal') }}</span>
-      <span class="table-header">{{ $t('manage.myOrders.total1') }}</span>
+      <span class="table-header">{{ t('manage.myOrders.quantity') }}</span>
+      <span class="table-header">{{ t('manage.myOrders.subtotal') }}</span>
+      <span class="table-header">{{ t('manage.myOrders.total1') }}</span>
     </div>
     <div class="o-detail" v-for="(sub, index) in item.orderItems" :key="index">
       <div class="od-name">
-        <img class="thumbnail" :src="sub.pic" alt />
+        <img class="thumbnail" :src="$cdn + goodsMap[sub.goodsId].img" alt />
         <div>
-          <p>{{ $t(`manage.cameraName.${sub.goodsId}`) }}</p>
-          <p v-for="(sb, i) in $t(`manage.orderDetail.${sub.goodsId}`)" :key="i" v-html="sb"></p>
+          <p>{{ t(`manage.cameraName.${sub.goodsId}`) }}</p>
+          <p v-for="(sb, i) in orderDetail[sub.goodsId]" :key="i" v-html="sb"></p>
         </div>
       </div>
       <div class="count">{{ sub.goodsCount }}</div>
@@ -137,9 +147,9 @@ function  toPay(item) {
     </div>
     <div class="inovice-con" :class="{ 'ic-active': item.showInvoice }">
       <div class="o-invoiceTitle">
-        <span>{{ $t('manage.myOrders.invoice') }}</span>
+        <span>{{ t('manage.myOrders.invoice') }}</span>
         <span v-if="getStatus(item) !== 'shipped'" @click="edit"
-          ><i class="iconfont icon-edit"></i>{{ $t('manage.myOrders.edit') }}</span
+          ><i class="iconfont icon-edit"></i>{{ t('manage.myOrders.edit') }}</span
         >
         <!-- <span v-else><i class="iconfont icon-choice"></i>发票已寄出</span> -->
       </div>
@@ -154,42 +164,42 @@ function  toPay(item) {
         </template>
         <template v-else-if="getStatus(item) === 'shipped'">
           <span class="expreeNum"
-            >{{ $t('manage.myOrders.wlNum') }}{{ item.orderItems[0].expressNum }}</span
+            >{{ t('manage.myOrders.wlNum') }}{{ item.orderItems[0].expressNum }}</span
           >
         </template>
         <template v-else-if="getStatus(item) === 'unshipped'">
-          <span class="expreeNum">{{ $t('manage.myOrders.unshipped') }}</span>
+          <span class="expreeNum">{{ t('manage.myOrders.unshipped') }}</span>
         </template>
         <template v-else-if="getStatus(item) === 'finish'">
-          <span class="expreeNum">{{ $t('manage.myOrders.finish') }}</span>
+          <span class="expreeNum">{{ t('manage.myOrders.finish') }}</span>
         </template>
         <template v-else-if="getStatus(item) === 'partShipped'">
-          <span class="expreeNum">{{ $t('manage.myOrders.partShipped') }}</span>
+          <span class="expreeNum">{{ t('manage.myOrders.partShipped') }}</span>
         </template>
         <template v-else-if="getStatus(item) === 'received'">
           <span class="expreeNum"
-            >{{ $t('manage.myOrders.received') }}：{{ item.orderItems[0].expressNum }}</span
+            >{{ t('manage.myOrders.received') }}：{{ item.orderItems[0].expressNum }}</span
           >
         </template>
         <template v-else-if="getStatus(item) === 'expire'">
-          <span class="expreeNum">{{ $t('manage.myOrders.expire') }}</span>
+          <span class="expreeNum">{{ t('manage.myOrders.expire') }}</span>
         </template>
         <template v-else>
-          <span class="expreeNum">{{ $t('manage.myOrders.hasCancal') }}</span>
+          <span class="expreeNum">{{ t('manage.myOrders.hasCancal') }}</span>
         </template>
       </div>
       <div class="to-pay">
         <template v-if="getStatus(item) !== 'expire'">
           <span class="cancel btns" @click="changeIvoiceStatus(i, item)">{{
             item.invoice && item.invoice.type
-              ? $t('manage.myOrders.invoiceInfo')
-              : $t('manage.myOrders.invoice')
+              ? t('manage.myOrders.invoiceInfo')
+              : t('manage.myOrders.invoice')
           }}</span>
           <template v-if="getStatus(item) === 'unpaid'">
             <span class="cancel btns" @click="cancal(item)">{{
-              $t('manage.myOrders.cancal')
+              t('manage.myOrders.cancal')
             }}</span>
-            <span class="pay btns" @click="toPay(item)">{{ $t('manage.myOrders.pay') }}</span>
+            <span class="pay btns" @click="toPay(item)">{{ t('manage.myOrders.pay') }}</span>
           </template>
         </template>
       </div>
@@ -265,7 +275,7 @@ function  toPay(item) {
 //       if (!invoice) {
 //         return ''
 //       }
-//       invoice['typeName'] = this.$t(`manage.invoiceTypeName.${invoice.type}`)
+//       invoice['typeName'] = this.t(`manage.invoiceTypeName.${invoice.type}`)
 //       return invoice
 //     },
 //     getStatus(item) {
@@ -331,7 +341,7 @@ function  toPay(item) {
 //       })
 //     },
 //     async cancal(item) {
-//       this.$toast.showConfirm('warn', this.$t('toast.15'), async () => {
+//       this.toast.showConfirm('warn', this.t('toast.15'), async () => {
 //         let params = {
 //           orderId: item.id
 //         }
@@ -345,12 +355,12 @@ function  toPay(item) {
 //         })
 //         let data = res.data
 //         if (data.code === 0) {
-//           return this.$toast.show('success', this.$t('toast.37'), () => {
+//           return this.toast.show('success', this.t('toast.37'), () => {
 //             this.currentPage = this.currentPage >= this.maxPage ? this.maxPage : this.currentPage
 //             this.getList()
 //           })
 //         }
-//         return this.$toast.show('error', this.$t('toast.38'))
+//         return this.toast.show('error', this.t('toast.38'))
 //       })
 //     }
 //   }

src/views/pc/order/components/rechargeOrder.vue

@@ -1,7 +1,45 @@
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import Paging from '@/components/pc/Paging/index.vue'
+import InterestsItem from './InterestsItem.vue'
+import { getChargeList } from '@/api/user'
+import { PAYSIDMAP } from '../data.ts'
+const pageSize = ref(5)
+const currentPage = ref(1)
+const total = ref(0)
+const list = ref([])
+const maxPage = ref(0)
+const showInvoice = ref(false)
+const currentI = ref('')
+const currentItem = ref('')
+watch(()=>currentPage.value, () => {
+  getList()
+})
+onMounted(() => {
+  getList()
+})
+function pageChange(data) {
+  currentPage.value = data
+}
+async function getList() {
+  window.scrollTo(0, 0)
+  let params = {
+    type: '',
+    pageNum: currentPage.value,
+    pageSize: pageSize.value
+  }
+  let res = await getChargeList(params)
+  console.log(res, 'incrementOrderList')
+  pageSize.value = res.pageSize
+  total.value = res.total || 0
+  list.value = res.list
+}
+</script>
+
 <template>
   <div>
     <div v-if="total">
-      <div class="order-item" v-for="(item,i) in data" :key="item.orderSn">
+      <div class="order-item" v-for="(item,i) in list" :key="item.orderSn">
         <InterestsItem :item="item" :i="i"  />
       </div>
     </div>
@@ -17,368 +55,364 @@
   </div>
 </template>
 
-<script>
+// <script>
 
-import InterestsItem from './rechargeItem'
-import { mapState } from 'vuex'
-import tableList from '@/components/table'
-import {capacity, recharge, invoice} from './iconsumption'
-import Paging from '@/components/Paging'
-import vcenter from '@/components/vcenter'
-import MemberApi from '@/apis/member'
-import MallConfig from '@/config/mall'
-import { i18n } from '@/lang'
+// import InterestsItem from './rechargeItem'
+// import { mapState } from 'vuex'
+// import tableList from '@/components/table'
+// import {capacity, recharge, invoice} from './iconsumption'
+// import Paging from '@/components/Paging'
+// import vcenter from '@/components/vcenter'
+// import MemberApi from '@/apis/member'
+// import MallConfig from '@/config/mall'
+// import { i18n } from '@/lang'
 
-let AMOUNTSTR = {
-  0: '￥',
-  1: '￥',
-  2: '$'
-}
+// let AMOUNTSTR = {
+//   0: '￥',
+//   1: '￥',
+//   2: '$'
+// }
 
-let methodStr = {
-  0: 'getMemberOrderList',
-  1: 'getChargeList',
-  2: 'getInvoiceList'
-}
-let rechargeType = {
-  0: i18n.t('manage.Spending.rechargeValue.0'),
-  '-1': i18n.t('manage.Spending.rechargeValue.-1'),
-  1: i18n.t('manage.Spending.rechargeValue.1'),
-  2: i18n.t('manage.Spending.rechargeValue.2')
-}
+// let methodStr = {
+//   0: 'getMemberOrderList',
+//   1: 'getChargeList',
+//   2: 'getInvoiceList'
+// }
+// let rechargeType = {
+//   0: i18n.t('manage.Spending.rechargeValue.0'),
+//   '-1': i18n.t('manage.Spending.rechargeValue.-1'),
+//   1: i18n.t('manage.Spending.rechargeValue.1'),
+//   2: i18n.t('manage.Spending.rechargeValue.2')
+// }
 
-let invoceStatusType = {
-  0: '未开票',
-  1: '已开票'
-}
+// let invoceStatusType = {
+//   0: '未开票',
+//   1: '已开票'
+// }
 
-let invoiceType = {
-  1: '不需要发票',
-  2: '增值税普通发票',
-  3: '增值税专用发票'
-}
+// let invoiceType = {
+//   1: '不需要发票',
+//   2: '增值税普通发票',
+//   3: '增值税专用发票'
+// }
 
-export default {
-  components: {
-    tableList,
-    Paging,
-    vcenter,
-    InterestsItem
-  },
-  data () {
-    let cameraList = [
-      {
-        name: '全部',
-        id: ''
-      },
-      {
-        name: '二目充值',
-        id: 0
-      },
-      {
-        name: '会员权益',
-        id: 4
-      }
-    ]
-    return {
-      PAYSIDMAP: MallConfig.PAYSIDMAP,
-      tabHeader: capacity,
-      data: [],
-      cameraList,
-      active: 1,
-      recharge,
-      total: 30,
-      pageSize: 5,
-      currentPage: 1,
-      tabActive: false,
-      deviceActive: false,
-      max: 0,
-      activeDevice: '',
-      activeType: '全部',
-      activeId: '',
-      activeTypeId: '',
-      tabList: [
-        {
-          name: this.$t('manage.Spending.tabListMember')
-        },
-        {
-          name: this.$t('manage.Spending.tabListRecharge')
-        },
-        {
-          name: this.$t('manage.Spending.tabListInvoice')
-        },
-      ]
-    }
-  },
-  computed: {
-    ...mapState({
-      token: state => state.user.token,
-      language: state => state.language.current,
-      deviceLogin: state => state.user.deviceLogin,
-      // myexpansion: state => {
-      //   let type = Object.prototype.toString.call(state.user.myexpansion)
-      //   if (type === '[object Object]') {
-      //     return state.user.myexpansion
-      //   }
-      //   let condition = state.user.myexpansion && state.user.myexpansion !== 'null' && type !== '[object Array]'
-      //   return (condition ? JSON.parse(state.user.myexpansion) : {})
-      // },
-      mycharge: state => {
-        let type = Object.prototype.toString.call(state.user.mycharge)
-        if (type === '[object Object]') {
-          return state.user.mycharge
-        }
-        let condition = state.user.mycharge && state.user.mycharge !== 'null' && type !== '[object Array]'
-        return (condition ? JSON.parse(state.user.mycharge) : {})
-      },
-      myinvoicelist: state => {
-        let type = Object.prototype.toString.call(state.user.myinvoicelist)
-        if (type === '[object Object]') {
-          return state.user.myinvoicelist
-        }
-        let condition = state.user.myinvoicelist && state.user.myinvoicelist !== 'null' && type !== '[object Array]'
-        return (condition ? JSON.parse(state.user.myinvoicelist) : {})
-      },
-      invoicedevice: state => {
-        let type = Object.prototype.toString.call(state.user.invoicedevice)
-        if (type === '[object Object]') {
-          return state.user.invoicedevice
-        }
-        let condition = state.user.invoicedevice && state.user.invoicedevice !== 'null'
-        return (condition ? state.user.invoicedevice : [])
-      },
-      searchKey () {
-        return this.$parent.searchKey
-      }
-    })
-  },
-  watch: {
-    currentPage (newVal) {
-      this.getList()
-    },
-    language (newVal) {
-      this.active = 0
-      this.data.forEach(item => {
-        let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
-        item['validDateStr'] = condition
-        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
-        item['channel'] = this.$t(`manage.channelType.${item['status']}`)
-        item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
-        item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
-      })
-    },
-    activeId (newVal) {
-      if (this.active === 2) {
-        this.getList()
-      }
-      this.getInvoiceMax()
-    },
-    activeTypeId (newVal) {
-      if (this.active === 2) {
-        this.getList()
-      }
-    },
-    active (newVal) {
-      switch (newVal) {
-        case 1:
-          this.tabHeader = recharge
-          break
-        case 2:
-          !this.deviceLogin && this.getAllDevice()
-          this.tabHeader = invoice
-          break
-        default:
-          this.tabHeader = capacity
-          break
-      }
-      if (newVal !== 1) {
-        this.$emit('changeSearchShow', false)
-      } else {
-        this.$emit('changeSearchShow', true)
-      }
-      this.currentPage === 1 ? this.getList() : this.currentPage = 1
-    }
-  },
-  methods: {
-    pageChange (data) {
-      this.currentPage = data
-    },
-    selectInId (item) {
-      this.activeDevice = item.childName
-      this.activeId = item.id
-    },
-    selectCamTy (item) {
-      this.activeType = item.name
-      this.activeTypeId = item.id
-    },
-    showDetail (item) {
-      this.$toast.showInvoiceDetail(item)
-    },
-    getList (searchKey = '') {
-      window.scrollTo(0, 0)
-      let str = methodStr[this.active]
-      this[str](searchKey)
-    },
-    openInvice () {
-      let params = {
-        max: this.max,
-        cameraId: this.activeId
-      };
-      (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
-    },
-    async getAllDevice (searchKey = '') {
-      let params = {
-        cameraType: ''
-      }
-      await this.$store.dispatch('getInvoiceDevice', params)
-      this.activeDevice = this.invoicedevice[0].childName
-      this.activeId = this.invoicedevice[0].id
-    },
+// export default {
+//   components: {
+//     tableList,
+//     Paging,
+//     vcenter,
+//     InterestsItem
+//   },
+//   data () {
+//     let cameraList = [
+//       {
+//         name: '全部',
+//         id: ''
+//       },
+//       {
+//         name: '二目充值',
+//         id: 0
+//       },
+//       {
+//         name: '会员权益',
+//         id: 4
+//       }
+//     ]
+//     return {
+//       PAYSIDMAP: MallConfig.PAYSIDMAP,
+//       tabHeader: capacity,
+//       data: [],
+//       cameraList,
+//       active: 1,
+//       recharge,
+//       total: 30,
+//       pageSize: 5,
+//       currentPage: 1,
+//       tabActive: false,
+//       deviceActive: false,
+//       max: 0,
+//       activeDevice: '',
+//       activeType: '全部',
+//       activeId: '',
+//       activeTypeId: '',
+//       tabList: [
+//         {
+//           name: this.$t('manage.Spending.tabListMember')
+//         },
+//         {
+//           name: this.$t('manage.Spending.tabListRecharge')
+//         },
+//         {
+//           name: this.$t('manage.Spending.tabListInvoice')
+//         },
+//       ]
+//     }
+//   },
+//   computed: {
+//     ...mapState({
+//       token: state => state.user.token,
+//       language: state => state.language.current,
+//       deviceLogin: state => state.user.deviceLogin,
+//       // myexpansion: state => {
+//       //   let type = Object.prototype.toString.call(state.user.myexpansion)
+//       //   if (type === '[object Object]') {
+//       //     return state.user.myexpansion
+//       //   }
+//       //   let condition = state.user.myexpansion && state.user.myexpansion !== 'null' && type !== '[object Array]'
+//       //   return (condition ? JSON.parse(state.user.myexpansion) : {})
+//       // },
+//       mycharge: state => {
+//         let type = Object.prototype.toString.call(state.user.mycharge)
+//         if (type === '[object Object]') {
+//           return state.user.mycharge
+//         }
+//         let condition = state.user.mycharge && state.user.mycharge !== 'null' && type !== '[object Array]'
+//         return (condition ? JSON.parse(state.user.mycharge) : {})
+//       },
+//       myinvoicelist: state => {
+//         let type = Object.prototype.toString.call(state.user.myinvoicelist)
+//         if (type === '[object Object]') {
+//           return state.user.myinvoicelist
+//         }
+//         let condition = state.user.myinvoicelist && state.user.myinvoicelist !== 'null' && type !== '[object Array]'
+//         return (condition ? JSON.parse(state.user.myinvoicelist) : {})
+//       },
+//       invoicedevice: state => {
+//         let type = Object.prototype.toString.call(state.user.invoicedevice)
+//         if (type === '[object Object]') {
+//           return state.user.invoicedevice
+//         }
+//         let condition = state.user.invoicedevice && state.user.invoicedevice !== 'null'
+//         return (condition ? state.user.invoicedevice : [])
+//       },
+//       searchKey () {
+//         return this.$parent.searchKey
+//       }
+//     })
+//   },
+//   watch: {
+//     currentPage (newVal) {
+//       this.getList()
+//     },
+//     language (newVal) {
+//       this.active = 0
+//       this.data.forEach(item => {
+//         let condition = item['validDate'] === '终身有效' ? (newVal === 'en' ? 'N/A' : '终身有效') : item['validDate']
+//         item['validDateStr'] = condition
+//         item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
+//         item['channel'] = this.$t(`manage.channelType.${item['status']}`)
+//         item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
+//         item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
+//       })
+//     },
+//     activeId (newVal) {
+//       if (this.active === 2) {
+//         this.getList()
+//       }
+//       this.getInvoiceMax()
+//     },
+//     activeTypeId (newVal) {
+//       if (this.active === 2) {
+//         this.getList()
+//       }
+//     },
+//     active (newVal) {
+//       switch (newVal) {
+//         case 1:
+//           this.tabHeader = recharge
+//           break
+//         case 2:
+//           !this.deviceLogin && this.getAllDevice()
+//           this.tabHeader = invoice
+//           break
+//         default:
+//           this.tabHeader = capacity
+//           break
+//       }
+//       if (newVal !== 1) {
+//         this.$emit('changeSearchShow', false)
+//       } else {
+//         this.$emit('changeSearchShow', true)
+//       }
+//       this.currentPage === 1 ? this.getList() : this.currentPage = 1
+//     }
+//   },
+//   methods: {
+//     pageChange (data) {
+//       this.currentPage = data
+//     },
+//     selectCamTy (item) {
+//       this.activeType = item.name
+//       this.activeTypeId = item.id
+//     },
+//     showDetail (item) {
+//       this.$toast.showInvoiceDetail(item)
+//     },
+//     getList (searchKey = '') {
+//       window.scrollTo(0, 0)
+//       let str = methodStr[this.active]
+//       this[str](searchKey)
+//     },
+//     openInvice () {
+//       let params = {
+//         max: this.max,
+//         cameraId: this.activeId
+//       };
+//       (this.max && !this.deviceLogin) && this.$toast.showInvoice(params)
+//     },
+//     async getAllDevice (searchKey = '') {
+//       let params = {
+//         cameraType: ''
+//       }
+//       await this.$store.dispatch('getInvoiceDevice', params)
+//       this.activeDevice = this.invoicedevice[0].childName
+//       this.activeId = this.invoicedevice[0].id
+//     },
 
-    // 扩容记录
-    async getConsumpList (searchKey = '') {
-      if (this.deviceLogin) {
-        searchKey = this.deviceLogin
-      }
-      let data = {
-        params: {
-          childName: searchKey.trim(),
-          pageNum: searchKey ? 1 : this.currentPage,
-          pageSize: this.pageSize
-        },
-        url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
-      }
-      await this.$store.dispatch('getUserExpansion', data)
-      if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
-        return this.$toast.show('warn', this.$t('toast.25'), () => {
-          this.getList()
-        })
-      }
-      console.log(this.myexpansion, 'this.myexpansion')
-      this.pageSize = this.myexpansion.pageSize
-      this.total = this.myexpansion.total || 0
-      this.data = this.myexpansion.list
-      this.data.forEach(item => {
-        let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
-        item['validDateStr'] = condition
-        item['statusStr'] = this.$t(`manage.myOrders.${item['status']}`)
-        item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
-        item['channel'] = this.$t(`manage.channelType.${item['status']}`)
-        item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
-        item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
-      })
-    },
-    getMemberOrderList () {
-      let data = {
-        snCode: this.searchKey,
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      }
-      MemberApi.getVirtualOrderList(data).then(res => {
-        this.data = res.data.data.list
-        console.log(this.data)
-        this.total = res.data.data.total
-      })
-    },
-    async getInvoiceMax () {
-      let res = await this.$http({
-        method: 'post',
-        data: {
-          cameraId: this.activeId
-        },
-        headers: {
-          token: this.token
-        },
-        url: '/user/invoice/max'
-      })
+//     // 扩容记录
+//     async getConsumpList (searchKey = '') {
+//       if (this.deviceLogin) {
+//         searchKey = this.deviceLogin
+//       }
+//       let data = {
+//         params: {
+//           childName: searchKey.trim(),
+//           pageNum: searchKey ? 1 : this.currentPage,
+//           pageSize: this.pageSize
+//         },
+//         url: this.deviceLogin ? '/device/virtualOrder/expansionList' : '/user/virtualOrder/expansionList'
+//       }
+//       await this.$store.dispatch('getUserExpansion', data)
+//       if (!this.myexpansion.total && searchKey && !this.deviceLogin) {
+//         return this.$toast.show('warn', this.$t('toast.25'), () => {
+//           this.getList()
+//         })
+//       }
+//       console.log(this.myexpansion, 'this.myexpansion')
+//       this.pageSize = this.myexpansion.pageSize
+//       this.total = this.myexpansion.total || 0
+//       this.data = this.myexpansion.list
+//       this.data.forEach(item => {
+//         let condition = item['validDate'] === '终身有效' ? (this.language === 'en' ? 'N/A' : '终身有效') : item['validDate']
+//         item['validDateStr'] = condition
+//         item['statusStr'] = this.$t(`manage.myOrders.${item['status']}`)
+//         item['unitSize1'] = item['unitSize'] + item['unit'] + '/' + this.$t(`manage.shixian.${item['month']}`)
+//         item['channel'] = this.$t(`manage.channelType.${item['status']}`)
+//         item['amount1'] = AMOUNTSTR[item['payType']] + item['amount']
+//         item['payTypeStr'] = this.$t(`manage.PAYSSTR.${item['payType']}`)
+//       })
+//     },
+//     getMemberOrderList () {
+//       let data = {
+//         snCode: this.searchKey,
+//         pageNum: this.currentPage,
+//         pageSize: this.pageSize
+//       }
+//       MemberApi.getVirtualOrderList(data).then(res => {
+//         this.data = res.data.data.list
+//         console.log(this.data)
+//         this.total = res.data.data.total
+//       })
+//     },
+//     async getInvoiceMax () {
+//       let res = await this.$http({
+//         method: 'post',
+//         data: {
+//           cameraId: this.activeId
+//         },
+//         headers: {
+//           token: this.token
+//         },
+//         url: '/user/invoice/max'
+//       })
 
-      let data = res.data
-      if (data.code !== 0) return
-      this.max = data.data.maxInvoice
-    },
+//       let data = res.data
+//       if (data.code !== 0) return
+//       this.max = data.data.maxInvoice
+//     },
 
-    // 充值记录
-    async getChargeList (searchKey = '') {
-      if (this.deviceLogin) {
-        searchKey = this.deviceLogin
-      }
-      let data = {
-        params: {
-          childName: searchKey,
-          pageNum: searchKey ? 1 : this.currentPage,
-          pageSize: this.pageSize
-        },
-        url: this.deviceLogin ? '/device/virtualOrder/chargeList' : '/user/virtualOrder/chargeList'
-      }
-      await this.$store.dispatch('getChargeList', data)
-      if (!this.mycharge.total && searchKey && !this.deviceLogin) {
-        return this.$toast.show('warn', this.$t('toast.25'), () => {
-          this.getList()
-        })
-      }
-      this.pageSize = this.mycharge.pageSize
-      this.total = this.mycharge.total || 0
-      this.data = this.mycharge.list
-      this.data.forEach(item => {
-        item['status'] = rechargeType[item['status']]
-      })
+//     // 充值记录
+//     async getChargeList (searchKey = '') {
+//       if (this.deviceLogin) {
+//         searchKey = this.deviceLogin
+//       }
+//       let data = {
+//         params: {
+//           childName: searchKey,
+//           pageNum: searchKey ? 1 : this.currentPage,
+//           pageSize: this.pageSize
+//         },
+//         url: this.deviceLogin ? '/device/virtualOrder/chargeList' : '/user/virtualOrder/chargeList'
+//       }
+//       await this.$store.dispatch('getChargeList', data)
+//       if (!this.mycharge.total && searchKey && !this.deviceLogin) {
+//         return this.$toast.show('warn', this.$t('toast.25'), () => {
+//           this.getList()
+//         })
+//       }
+//       this.pageSize = this.mycharge.pageSize
+//       this.total = this.mycharge.total || 0
+//       this.data = this.mycharge.list
+//       this.data.forEach(item => {
+//         item['status'] = rechargeType[item['status']]
+//       })
 
-      console.log(this.data)
-    },
+//       console.log(this.data)
+//     },
 
-    // 发票记录
-    async getInvoiceList () {
-      let data = {
-        params: {
-          cameraId: this.activeId,
-          pageNum: this.currentPage,
-          pageSize: this.pageSize,
-          type: this.activeTypeId
-        },
-        url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
-      }
+//     // 发票记录
+//     async getInvoiceList () {
+//       let data = {
+//         params: {
+//           cameraId: this.activeId,
+//           pageNum: this.currentPage,
+//           pageSize: this.pageSize,
+//           type: this.activeTypeId
+//         },
+//         url: this.deviceLogin ? '/device/invoice/list' : '/user/invoice/list'
+//       }
 
-      await this.$store.dispatch('getInvoiceList', data)
-      this.pageSize = this.myinvoicelist.pageSize
-      this.total = this.myinvoicelist.total || 0
-      this.data = this.myinvoicelist.list
-      this.data.forEach(item => {
-        item['detail'] = '详细'
-        item['money'] = '￥' + item['money']
-        item['finish'] = invoceStatusType[item['finish']]
-        item['type'] = invoiceType[item['type']]
-      })
-    },
-    handleSearch (keyword) {
-      this.getList(keyword)
-    }
-  },
-  mounted () {
-    this.getList()
+//       await this.$store.dispatch('getInvoiceList', data)
+//       this.pageSize = this.myinvoicelist.pageSize
+//       this.total = this.myinvoicelist.total || 0
+//       this.data = this.myinvoicelist.list
+//       this.data.forEach(item => {
+//         item['detail'] = '详细'
+//         item['money'] = '￥' + item['money']
+//         item['finish'] = invoceStatusType[item['finish']]
+//         item['type'] = invoiceType[item['type']]
+//       })
+//     },
+//     handleSearch (keyword) {
+//       this.getList(keyword)
+//     }
+//   },
+//   mounted () {
+//     this.getList()
 
-    this.$bus.$off('refreshInvoice')
-    this.$bus.$on('refreshInvoice', () => {
-      if (this.active === 2) {
-        this.getList()
-      }
-      this.getInvoiceMax()
-    })
+//     this.$bus.$off('refreshInvoice')
+//     this.$bus.$on('refreshInvoice', () => {
+//       if (this.active === 2) {
+//         this.getList()
+//       }
+//       this.getInvoiceMax()
+//     })
 
-    document.addEventListener('click', (e) => {
-      if (this.$refs.invoiceMenu) {
-        if (!this.$refs.invoiceMenu.contains(e.target)) {
-          this.tabActive = false
-        }
-      }
-      if (this.$refs.deviceMenu) {
-        if (!this.$refs.deviceMenu.contains(e.target)) {
-          this.deviceActive = false
-        }
-      }
-    })
-  }
-}
-</script>
+//     document.addEventListener('click', (e) => {
+//       if (this.$refs.invoiceMenu) {
+//         if (!this.$refs.invoiceMenu.contains(e.target)) {
+//           this.tabActive = false
+//         }
+//       }
+//       if (this.$refs.deviceMenu) {
+//         if (!this.$refs.deviceMenu.contains(e.target)) {
+//           this.deviceActive = false
+//         }
+//       }
+//     })
+//   }
+// }
+// </script>
 
 <style lang="less" scoped>
 .scene-nothing {
@@ -386,6 +420,7 @@ export default {
   padding: 42px 0 210px 0;
   img {
     padding-bottom: 22px;
+    margin: 0 auto;
   }
   div {
     font-size: 16px;

src/views/pc/order/data.ts

@@ -0,0 +1,46 @@
+
+import { getCurrentInstance } from 'vue'
+const instance = getCurrentInstance();
+
+const price = 12800
+const zhijiaPrice = 899
+const usb = 999
+const battery = 1999
+import i18n from '@/i18n/index.js'
+const t = i18n.global.t;
+
+export const goodsMap = {
+  4: {
+    name: t('mall.kankanPro'),
+    img: `images/banner_pro.png`,
+    detail: [`${t('mall.kankanPro')}(${t('mall.blackColor')})`, t('mall.voice')],
+    price: price,
+    skuSn: 'U15609161635760015'
+  },
+  7: {
+    name: t('mall.jiaojia'),
+    img: `images/zhijia.png`,
+    detail:  [`${t('mall.jiaojia')}(${t('mall.zhijiaColor')})`],
+    price: zhijiaPrice,
+    skuSn: 'U15604134406280073'
+  },
+  11: {
+    name: t('mall.usb'),
+    img: `images/zhijiabrowse/usb-0.png`,
+    detail:  [`${t('mall.usb')}(${t('mall.silvery')})`],
+    price: usb,
+    skuSn: 'U15604132404280603'
+  },
+  12: {
+    name: t('mall.battery'),
+    img: `images/zhijiabrowse/battery-0.png`,
+    detail:  [`${t('mall.battery')}(${t('mall.black')})`],
+    price: battery,
+    skuSn: 'U15604132404280703'
+  }
+}
+export const PAYSIDMAP = {
+  0: t('mall.wechat'),
+  1: t('mall.aliPay'),
+  2: 'paypal'
+}

src/views/pc/order/index.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { showConfirm } from '@/components/Toast'
 import deviceOrder from './components/deviceOrder.vue'
-// import interestsOrder from './components/interestsOrder.vue'
+import interestsOrder from './components/interestsOrder.vue'
+import rechargeOrder from './components/rechargeOrder.vue'
+import downOrder from './components/downOrder.vue'
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { openPay, getOrderInfo, wxLogin } from '@/api/api'
@@ -19,15 +21,17 @@ const tabs = [
   {
     name: t('manage.myOrders.tabs1'),
     key: 'interestsOrder',
-    component: 'interestsOrder'
+    component: interestsOrder
   },
   {
     name: t('manage.myOrders.tabs2'),
-    component: 'rechargeOrder'
+    key: 'rechargeOrder',
+    component: rechargeOrder
   },
   {
     name: t('manage.myOrders.tabs3'),
-    component: 'downOrder'
+    key: 'downOrder',
+    component: downOrder
   }
 ]
 const userStore = useUserStore()
@@ -42,7 +46,7 @@ const invoice = ref(null)
 // const consumeType =
 function handleTabChange(item) {
   tabComponent.value = {
-    name: item.name,
+    name: item.key,
     dom: item.component
   }
 }