1

components.d.ts

@@ -11,6 +11,8 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     CameraItem: typeof import('./src/components/tableList/CameraItem.vue')['default']
     Confirm: typeof import('./src/components/Toast/Confirm.vue')['default']
+    Edit: typeof import('./src/components/pc/editInvoice/edit.vue')['default']
+    EditInvoice: typeof import('./src/components/pc/editInvoice/index.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']

src/api/user.ts

@@ -12,9 +12,9 @@ export const getUserInfo = () => {
   });
 };
 
-export const openPay = (data) => {
+export const getUserOrder = (data: any) => {
     return request({
-      url: "/service/pay/openPay",
+      url: "/ucenter/user/order/list",
       method: "post",
       data,
       config: {

src/components/pc/Paging/index.vue

@@ -43,13 +43,13 @@ const pages = computed(() => {
 // const useUser = useUserStore()
 // useUser.getInfo()
 // 监听过滤数据变化更新总数
-watch(index.value, (newVal) => {
+watch(()=> index.value, (newVal) => {
   emit('input', newVal)
 })
-watch(props.current, (newVal) => {
+watch(()=> props.current, (newVal) => {
   index.value = newVal
 })
-watch(props.total, (newVal) => {
+watch(()=> props.total, (newVal) => {
   if (index.value > maxPage.value) {
     index.value = maxPage.value
     clickHandle(maxPage.value)

src/components/pc/editInvoice/edit.vue

@@ -0,0 +1,353 @@
+<template>
+  <div class="invoice edit-invoice" slot="edit">
+    <div class="select-con">
+      <div :class="{'tag-active':invoice===null}" @click="invoice=null">
+        <span>{{$t('manage.myOrders.type1')}}</span>
+        <img :src="`${$cdn}images/tag-icon.png`" alt />
+      </div>
+      <div :class="{'tag-active':invoice===2}" @click="invoice=2">
+        <span>{{$t('manage.myOrders.type2')}}</span>
+        <img :src="`${$cdn}images/tag-icon.png`" alt />
+      </div>
+      <div :class="{'tag-active':invoice===3}" @click="invoice=3">
+        <span>{{$t('manage.myOrders.type3')}}</span>
+        <i></i>
+        <img :src="`${$cdn}images/tag-icon.png`" alt />
+      </div>
+    </div>
+    <div class="invoice-input" v-if="invoice===2">
+      <div class="input-con">
+        <input type="text" :placeholder="$t('manage.myOrders.title')" maxlength="20" v-model="editInvoice2.title" />
+        <input
+          type="text"
+          :placeholder="$t('manage.myOrders.code')"
+          oninput="value=value.replace(/[^\w\.\/]/ig,'')"
+          maxlength="18"
+          v-model="editInvoice2.code"
+        />
+      </div>
+      <div class="input-con">
+        <input type="text" :placeholder="$t('manage.myOrders.email')" maxlength="30" v-model="editInvoice2.emailAddress" />
+      </div>
+    </div>
+    <div class="invoice-input" v-if="invoice===3">
+      <div class="input-con">
+        <input type="text" v-model="editInvoice3.title" maxlength="20" :placeholder="$t('manage.myOrders.title')"/>
+        <input
+          type="text"
+          maxlength="18"
+          v-model="editInvoice3.code"
+          oninput="value=value.replace(/[^\w\.\/]/ig,'')"
+          :placeholder="$t('manage.myOrders.code')"
+        />
+      </div>
+      <div class="input-con">
+        <input
+          type="text"
+          maxlength="100"
+          v-model="editInvoice3.organizedAddress"
+          :placeholder="$t('manage.myOrders.organizedAddress')"
+        />
+        <input type="text" maxlength="20" oninput="value=value.replace(/[^\d\-]/g,'')" v-model="editInvoice3.registerPhone" :placeholder="$t('manage.myOrders.registerPhone')"/>
+      </div>
+      <div class="input-con">
+        <input type="text" maxlength="40" v-model="editInvoice3.bankName" :placeholder="$t('manage.myOrders.bankName')" />
+        <input type="text" maxlength="40" v-model="editInvoice3.bankAccount" :placeholder="$t('manage.myOrders.bankAccount')"  />
+      </div>
+    </div>
+    <div @click="saveInvoice(invoice)" class="btn parmary">{{$t('manage.myOrders.save')}}</div>
+    <div @click="hideInvoice" class="btn">{{$t('manage.myOrders.cancal1')}}</div>
+  </div>
+</template>
+<script>
+import { reg } from '@/util'
+import { mapState } from 'vuex'
+
+export default {
+  props: ['data', 'orderId', 'invoiceId'],
+  inject: ['hideInvoice', 'saveInvoiceData'],
+  data: function () {
+    return {
+      editInvoice2: this.data.type === 2 ? this.data : {},
+      editInvoice3: this.data.type === 3 ? this.data : {},
+      invoice: this.data.type || null
+    }
+  },
+  watch: {
+    data (newVal) {
+      this.invoice = newVal.type || null
+      this.editInvoice2 = newVal.type === 2 ? newVal : {}
+      this.editInvoice3 = newVal.type === 3 ? newVal : {}
+    }
+  },
+  computed: {
+    ...mapState({
+      token: state => state.user.token,
+      language: state => state.language.current
+    })
+  },
+  methods: {
+    changeType (type) {
+      this.$emit('changtype', type)
+    },
+    saveInvoice (cInvoice) {
+      if (!cInvoice) {
+        if (this.invoiceId) {
+          this.$http
+            .post('user/invoice/delete', {
+              invoiceId: this.invoiceId
+            }, {
+              headers: {
+                token: this.token
+              }
+            })
+            .then(data => {
+              let response = data.data
+              if (response.code === 0) {
+                this.$bus.$emit('editItem', {
+                  id: '',
+                  type: null
+                })
+                ()
+              }
+            })
+        } else {
+          this.$bus.$emit('editItem', {
+            id: '',
+            type: null
+          })
+          this.hideInvoice()
+        }
+        return
+      }
+      let isObject = function (obj) {
+        return JSON.stringify(obj) === '{}' ? '' : obj
+      }
+      let params = {}
+      let invoiceType = ''
+      let check = value => {
+        for (let i = 0, len = value.length; i < len; i++) {
+          if (!value[i].val) {
+            return this.$toast.show('warn', value[i].name + this.$t('toast.7'))
+          }
+        }
+        return true
+      }
+
+      if (cInvoice === 2) {
+        invoiceType = 2
+
+        let title = isObject(this.editInvoice2.title)
+        let code = isObject(this.editInvoice2.code)
+        let emailAddress = isObject(this.editInvoice2.emailAddress)
+
+        if (code && code.length !== 18) {
+          return this.$toast.show('warn', this.$t('toast.21'))
+        }
+        if (!reg.email.test(emailAddress)) {
+          return this.$toast.show('warn', this.$t('toast.8'))
+        }
+        params = {
+          invoiceType,
+          title,
+          code: code || '',
+          emailAddress
+        }
+
+        let checkStr = [
+          {
+            name: this.$t('manage.account.invoiceTitle'),
+            val: title
+          },
+          {
+            name: this.$t('mall.invoiceEmail'),
+            val: emailAddress
+          }
+        ]
+        if (!check(checkStr)) {
+          return
+        }
+      } else {
+        let {title: title1, code: code1, organizedAddress: organizedAddress1, registerPhone: registerPhone1, bankName: bankName1, bankAccount: bankAccount1} = this.editInvoice3
+        invoiceType = 3
+        let title = isObject(title1)
+        let code = isObject(code1)
+        let organizedAddress = isObject(organizedAddress1)
+        let registerPhone = isObject(registerPhone1)
+        let bankName = isObject(bankName1)
+        let bankAccount = isObject(bankAccount1)
+
+        params = {
+          invoiceType,
+          title,
+          code: code || '',
+          organizedAddress,
+          registerPhone,
+          bankName,
+          bankAccount
+        }
+        let checkStr = [
+          {
+            name: this.$t('manage.account.invoiceTitle'),
+            val: title
+          },
+          {
+            name: this.$t('manage.account.invoiceModule.code'),
+            val: code
+          },
+          {
+            name: this.$t('manage.account.invoiceModule.address'),
+            val: organizedAddress
+          },
+          {
+            name: this.$t('manage.account.invoiceModule.phone'),
+            val: registerPhone
+          },
+          {
+            name: this.$t('manage.account.invoiceModule.bank'),
+            val: bankName
+          },
+          {
+            name: this.$t('manage.account.invoiceModule.bankAccount'),
+            val: bankAccount
+          }
+        ]
+        if (!check(checkStr)) {
+          return
+        }
+        if (!code || code.length !== 18) {
+          return this.$toast.show('warn', this.$t('toast.21'))
+        }
+
+        if (!reg.guhua.test(registerPhone)) {
+          return this.$toast.show('warn', this.$t('toast.22'))
+        }
+      }
+
+      if (this.invoiceId) {
+        params['invoiceId'] = params['id'] = this.invoiceId || null
+      }
+      params['orderId'] = this.orderId
+      params['type'] = invoiceType
+      params['consumeType'] = 0
+      this.$http
+        .post('user/invoice/open', params, {
+          headers: {
+            token: this.token
+          }
+        })
+        .then(data => {
+          let response = data.data
+          if (response.code === 0) {
+            this.saveInvoiceData(response.data)
+            this.hideInvoice()
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@theme-color: #15BEC8;
+@border-color: #e7e7e7;
+input {
+  appearance: none;
+  line-height: 36px;
+  height: 36px;
+  border: solid 1px @border-color;
+  padding-left: 10px;
+  &:focus {
+    border: solid 1px @theme-color;
+  }
+}
+.btn {
+  text-align: center;
+  cursor: pointer;
+  width: 126px;
+  height: 36px;
+  line-height: 36px;
+  margin: 10px 25px 0 0;
+  display: inline-block;
+  border: solid 1px #ccc;
+}
+.parmary {
+  background-color: @theme-color;
+  border: solid 1px @theme-color;
+}
+.invoice {
+  margin-top: 20px;
+  p {
+    line-height: 18px;
+    margin-bottom: 8px;
+    overflow-wrap: break-word;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+    span {
+      padding-right: 10px;
+    }
+  }
+  .p-desc {
+    color: #a0a0a0;
+    overflow-wrap: break-word;
+    line-height: 24px;
+  }
+  .no-info {
+    margin-top: 4px;
+  }
+  .avatar {
+    width: 68px;
+    height: 68px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
+    margin: 5px 0;
+  }
+  .nickname {
+    width: 126px;
+  }
+}
+.edit-invoice {
+  .select-con {
+    div {
+      position: relative;
+      cursor: pointer;
+      min-width: 200px;
+      line-height: 36px;
+      height: 36px;
+      text-align: center;
+      margin: 10px 26px 10px 0;
+      border: solid 1px @border-color;
+      color: #a0a0a0;
+      padding: 0 10px;
+      display: inline-block;
+      img {
+        display: none;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+    .tag-active {
+      border: solid 1px @theme-color;
+      color: #000;
+      img {
+        display: inline-block;
+      }
+    }
+  }
+  .input-con {
+    input {
+      width: 316px;
+      line-height: 36px;
+      height: 36px;
+      margin: 10px 25px 10px 0;
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>

src/components/pc/editInvoice/index.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import { normal, zengzhi } from './invoice'
+import edit from './edit'
+
+</script>
+<template>
+  <div class="i-lay">
+    <template v-if="isShow">
+      <p v-if="!data.type">{{$t('manage.myOrders.dontneed')}}</p>
+      <template v-else>
+        <p v-for="(item,i) in invoiceData" :key="i">{{item['name']+'：'+(data[item['key']]||'--')}}</p>
+      </template>
+    </template>
+    <!-- <edit v-else :data='data' :orderId='orderId' :invoiceId="invoiceId"/> -->
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { normal, zengzhi } from './invoice'
+import edit from './edit'
+export default {
+  props: ['data', 'orderId', 'invoiceId'],
+  components: {
+    edit
+  },
+  mounted () {
+    // this.$bus.$on('isOrderInvoice', data => {
+    //   this.isShow = data
+    // })
+  },
+  computed: {
+    ...mapState({
+      token: state => state.user.token,
+      language: state => state.language.current
+    }),
+    invoiceData () {
+      if (!this.data) {
+        return ''
+      }
+      return this.data.type === 2 ? normal : zengzhi
+    },
+    isShow () {
+      return this.$parent.showInvoice
+    }
+  },
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.i-lay{
+  p{
+    color: #a0a0a0;
+    margin: 10px 0;
+
+  }
+}
+</style>

src/components/pc/editInvoice/invoice.js

@@ -0,0 +1,95 @@
+import { i18n } from '@/lang'
+let normal = [
+  {
+    key: 'typeName',
+    name: i18n.t('manage.account.invoiceModule.invoiceType'),
+    en: 'Invoice type'
+  }, {
+    key: 'title',
+    name: i18n.t('manage.account.invoiceModule.title'),
+    en: 'Invoice Title'
+  }, {
+    key: 'code',
+    name: i18n.t('manage.account.invoiceModule.invoiceShui'),
+    en: 'Invoice tax No.'
+  }, {
+    key: 'emailAddress',
+    name: i18n.t('manage.account.invoiceEmail'),
+    en: 'E-mail'
+  }, {
+    key: 'shipMobile',
+    name: i18n.t('manage.account.placeholder.shipMobile'),
+    en: 'Phone'
+  }
+]
+
+let zengzhi = [
+  {
+    key: 'typeName',
+    name: i18n.t('manage.account.invoiceModule.invoiceType'),
+    en: 'Invoice type'
+  }, {
+    key: 'title',
+    name: i18n.t('manage.account.invoiceModule.title'),
+    en: 'Invoice Title'
+  }, {
+    key: 'code',
+    name: i18n.t('manage.account.invoiceModule.invoiceShui'),
+    en: 'Invoice tax No.'
+  }, {
+    key: 'organizedAddress',
+    name: i18n.t('manage.account.invoiceModule.address'),
+    en: 'Address'
+  }, {
+    key: 'registerPhone',
+    name: i18n.t('manage.account.invoiceModule.phone'),
+    en: 'Phone number'
+  }, {
+    key: 'bankName',
+    name: i18n.t('manage.account.invoiceModule.bank'),
+    en: 'Banker'
+  }, {
+    key: 'bankAccount',
+    name: i18n.t('manage.account.invoiceModule.bankAccount'),
+    en: 'Bank account'
+  }, {
+    key: 'shipMobile',
+    name: i18n.t('manage.account.placeholder.shipMobile'),
+    en: 'Phone'
+  }
+
+]
+
+let invoice = [
+  {
+    key: 'createTime',
+    en: '申请时间',
+    name: '申请时间'
+  }, {
+    key: 'type',
+    en: '发票类型',
+    name: '发票类型'
+  }, {
+    key: 'title',
+    en: '发票抬头',
+    name: '发票抬头'
+  }, {
+    key: 'money',
+    en: '开票金额',
+    name: '开票金额'
+  }, {
+    key: 'finish',
+    en: '状态',
+    name: '状态'
+  }, {
+    key: 'detail',
+    name: '操作',
+    en: '操作',
+    canclick: true
+  }
+]
+export {
+  normal,
+  zengzhi,
+  invoice
+}

src/i18n/modules/zh/manage.js

@@ -1,115 +1,163 @@
 export default {
-        "information": {
-            "uploadTip": "图片大小不能大于",
-            "editInformation": "修改信息",
-            "editAddressLinkText": "修改地址",
-            "editInfo": "修改账号信息",
-            "gotoPay": "购买权益",
-            "memberDevice": "权益相机",
-            "expiredDownload": "剩余下载",
-            "takePhotos": "拍摄场景",
-            "defaultAddress": "默认收货地址",
-            "informationOverview": "账户概览",
-            "uploadAvatar": "上传头像",
-            "uploadAvatarTips": "推荐分辨率为：512*512px，<br/>允许JPG、PNG格式，小于1MB",
-            "userName": "账号",
-            "nickName": "昵称",
-            "email": "邮箱",
-            "cameraCount": "相机数量",
-            "memberCount": "权益数量",
-            "tai": "台",
-            "ci": "次",
-            "ge": "个",
-            "tai1": "(台)",
-            "ci1": "(次)",
-            "ge1": "(个)",
-            "editAddress": {
-                "editAddress": "修改收货地址",
-                "country": "国家/地区",
-                "province": "省",
-                "city": "市",
-                "qu": "区",
-                "addressDetail": "详细地址",
-                "receiver": "收件人",
-                "receiverPhone": "手机号码",
-                "internationalCity": "城市",
-                "internationalProvince": "州/省/地区"
-            },
-            "changePassword": {
-                "changePassword": "修改密码",
-                "verCode": "验证码",
-                "newPassword": "新密码",
-                "confirmNewPassword": "确认密码"
-            },
-            "memberTable": {
-                "deviceMember": "会员权益",
-                "bindDeviceNum": "授权相机{num}台",
-                "snInputPlaceHolder": "搜索相机S/N码",
-                "searchNoData": "抱歉，没有找到相关信息。",
-                "nodataPre": "请先购买会员权益",
-                "nodataGoBuy": "购买权益",
-                "isExpired": "已过期"
-            },
-            "nameArr": {
-                "information": "账号信息",
-                "scene": "场景管理",
-                "order": "我的订单",
-                "device": "我的相机",
-                "consumption": "消费记录",
-                "change": "修改密码",
-                "logout": "退出登录",
-                "products": "应用中心"
-            },
-            "deviceSettings": [
-                {
-                    "name": "security",
-                    "items": [
-                        {
-                            "name": "场景管理",
-                            "to": {
-                                "name": "scene"
-                            }
-                        },
-                        {
-                            "name": "退出登录",
-                            "to": "logout"
-                        }
-                    ]
-                }
-            ]
-        },
-        "appProduct": {
-        "channel": "渠道：",
-        "useBtnText": "立即使用",
-        "toolsType": "工具类",
-        "serviceType": "服务类",
-        "sxz": {
-            "name": "随心装",
-            "desc": "随心装是一个3D室内装修设计平台，可直接编辑四维看看拍摄场景，支持绘制、家具设计、硬装设计等功能，并能快速渲染获得装修效果。"
-        },
-        "quanjing": {
-            "name": "四维全景",
-            "desc": "四维全景是一款综合VR制作应用。可上传全景图快速生成VR作品，基于全景图深入编辑拓展内容，也可融合四维看看及四维看见场景，丰富创作形式。"
-        },
-        "sketch": {
-            "name": "四维看看Sketch",
-            "desc": "快速打造线上3D空间模型，让人工智能真正服务于生活。支持用户自主上传全景图，拼接线上VR房源。"
-        },
-        "kanzhan4D": {
-            "name": "四维看展",
-            "desc": "四维看展支持用户在微信小程序中观看国内外博物馆、美术馆展览，包含文物介绍、博物馆游览、名人故居、四维艺术……"
-        },
-        "kandian": {
-            "name": "看店4Dkankan",
-            "desc": "看店4Dkankan，宅家中，云逛街，轻松买！在微信中搜索“看店4Dkankan”，打开小程序即可。"
-        },
-        "kanzhan": {
-            "name": "看房4Dkankan",
-            "desc": "轻便VR看房工具，功能轻便，实时分享，低成本高效率。"
-        },
-        "look": {
-            "name": "四维带看",
-            "desc": "四维带看是一款全新概念的VR远程营销利器，可通过VR场景，视频，图片，文字等同屏互动和重点标记的形式帮助商家/经纪人实现远程销售。"
-        }
+  "information": {
+    "uploadTip": "图片大小不能大于",
+    "editInformation": "修改信息",
+    "editAddressLinkText": "修改地址",
+    "editInfo": "修改账号信息",
+    "gotoPay": "购买权益",
+    "memberDevice": "权益相机",
+    "expiredDownload": "剩余下载",
+    "takePhotos": "拍摄场景",
+    "defaultAddress": "默认收货地址",
+    "informationOverview": "账户概览",
+    "uploadAvatar": "上传头像",
+    "uploadAvatarTips": "推荐分辨率为：512*512px，<br/>允许JPG、PNG格式，小于1MB",
+    "userName": "账号",
+    "nickName": "昵称",
+    "email": "邮箱",
+    "cameraCount": "相机数量",
+    "memberCount": "权益数量",
+    "tai": "台",
+    "ci": "次",
+    "ge": "个",
+    "tai1": "(台)",
+    "ci1": "(次)",
+    "ge1": "(个)",
+    "editAddress": {
+      "editAddress": "修改收货地址",
+      "country": "国家/地区",
+      "province": "省",
+      "city": "市",
+      "qu": "区",
+      "addressDetail": "详细地址",
+      "receiver": "收件人",
+      "receiverPhone": "手机号码",
+      "internationalCity": "城市",
+      "internationalProvince": "州/省/地区"
+    },
+    "changePassword": {
+      "changePassword": "修改密码",
+      "verCode": "验证码",
+      "newPassword": "新密码",
+      "confirmNewPassword": "确认密码"
+    },
+    "memberTable": {
+      "deviceMember": "会员权益",
+      "bindDeviceNum": "授权相机{num}台",
+      "snInputPlaceHolder": "搜索相机S/N码",
+      "searchNoData": "抱歉，没有找到相关信息。",
+      "nodataPre": "请先购买会员权益",
+      "nodataGoBuy": "购买权益",
+      "isExpired": "已过期"
+    },
+    "nameArr": {
+      "information": "账号信息",
+      "scene": "场景管理",
+      "order": "我的订单",
+      "device": "我的相机",
+      "consumption": "消费记录",
+      "change": "修改密码",
+      "logout": "退出登录",
+      "products": "应用中心"
+    },
+    "deviceSettings": [
+      {
+        "name": "security",
+        "items": [
+          {
+            "name": "场景管理",
+            "to": {
+              "name": "scene"
+            }
+          },
+          {
+            "name": "退出登录",
+            "to": "logout"
+          }
+        ]
+      }
+    ]
+  },
+  "appProduct": {
+    "channel": "渠道：",
+    "useBtnText": "立即使用",
+    "toolsType": "工具类",
+    "serviceType": "服务类",
+    "sxz": {
+      "name": "随心装",
+      "desc": "随心装是一个3D室内装修设计平台，可直接编辑四维看看拍摄场景，支持绘制、家具设计、硬装设计等功能，并能快速渲染获得装修效果。"
+    },
+    "quanjing": {
+      "name": "四维全景",
+      "desc": "四维全景是一款综合VR制作应用。可上传全景图快速生成VR作品，基于全景图深入编辑拓展内容，也可融合四维看看及四维看见场景，丰富创作形式。"
+    },
+    "sketch": {
+      "name": "四维看看Sketch",
+      "desc": "快速打造线上3D空间模型，让人工智能真正服务于生活。支持用户自主上传全景图，拼接线上VR房源。"
+    },
+    "kanzhan4D": {
+      "name": "四维看展",
+      "desc": "四维看展支持用户在微信小程序中观看国内外博物馆、美术馆展览，包含文物介绍、博物馆游览、名人故居、四维艺术……"
+    },
+    "kandian": {
+      "name": "看店4Dkankan",
+      "desc": "看店4Dkankan，宅家中，云逛街，轻松买！在微信中搜索“看店4Dkankan”，打开小程序即可。"
+    },
+    "kanzhan": {
+      "name": "看房4Dkankan",
+      "desc": "轻便VR看房工具，功能轻便，实时分享，低成本高效率。"
+    },
+    "look": {
+      "name": "四维带看",
+      "desc": "四维带看是一款全新概念的VR远程营销利器，可通过VR场景，视频，图片，文字等同屏互动和重点标记的形式帮助商家/经纪人实现远程销售。"
     }
-    }
+  },
+  "myOrders": {
+    "typeStip0": "专票将于每个月 15 日开具并邮寄到您的默认收货地址，请注意查收！",
+    "typeStip1": "电子发票将于每个月 15 日开具内发送至您的邮箱！",
+    "unaddress": "请先添加收货地址",
+    "invoiceInfo": "发票信息",
+    "memerText": "四维看看 Pro会员权益",
+    "tabs0": "相机订单",
+    "tabs1": "权益订单",
+    "tabs2": "消费订单",
+    "tabs3": "下载订单",
+    "numbers": "订单号：",
+    "recname": "(四维看看)",
+    "product": "商品",
+    "quantity": "数量",
+    "subtotal": "价格",
+    "total": "总价：￥",
+    "total1": "总价",
+    "cancal": "取消订单",
+    "pay": "立即付款",
+    "norecord": "暂无任何订单，赶紧去购买吧。",
+    "invoice": "开具发票",
+    "invoiceTip0": "点击提交后，系统会为您提交开票申请。",
+    "invoiceTip1": "您只能提交一次开票信息，请谨慎填写！",
+    "invoiceTip2": "发票每个月15日统一开具并寄出",
+    "wlNum": "物流单号：",
+    "unshipped": "等待商家发货",
+    "finish": "已完成",
+    "partShipped": "部分发货",
+    "received": "已收货",
+    "hasCancal": "已取消",
+    "expire": "已失效",
+    "edit": "修改（发货后7天内可修改）",
+    "dontneed": "发票类型：不需要发票",
+    "type1": "不需要发票",
+    "type2": "增值税普票（电子发票）",
+    "type3": "增值税专用发票",
+    "title": "发票抬头",
+    "code": "18位税务登记号",
+    "email": "电子邮箱",
+    "organizedAddress": "注册地址",
+    "registerPhone": "注册电话",
+    "bankName": "开户银行",
+    "bankAccount": "银行账户",
+    "save": "提交",
+    "cancal1": "取消",
+    "isExpired": "已过期",
+    "isUsing": "使用中"
+  },
+}

src/views/pc/device/index.vue

@@ -166,7 +166,7 @@
         </template>
       </el-empty>
     </div>
-
+currentPage{{ currentPage }}
     <!-- 分页 -->
     <Paging
       v-if="total"

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

@@ -1,103 +1,74 @@
+<script setup>
+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'
+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 getUserOrder(params)
+  console.log('getUserOrder', res)
+  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 myorder.list" :key="item.orderSn">
-        <OrderItem :item="item" :i="i" @isOrderInvoice="edit"  />
+      <div class="order-item" v-for="(item, i) in list" :key="item.orderSn">
+        <OrderItem :item="item" :i="i" />
       </div>
     </div>
     <div class="scene-nothing" v-else>
-      <img :src="`${$cdn}images/nothing.png`" alt>
-      <div>{{$t('manage.myOrders.norecord')}} 
-        <a class="gotoBuy" @click="$router.push({name: 'mallHome'})">{{$t('manage.gotoBuy')}}</a>
+      <img :src="`${$cdn}images/nothing.png`" alt />
+      <div>
+        {{ $t('manage.myOrders.norecord') }}
+        <a class="gotoBuy" @click="$router.push({ name: 'mallHome' })">{{
+          $t('manage.gotoBuy')
+        }}</a>
       </div>
     </div>
     <div class="paging" v-if="total">
-      <Paging @clickHandle="pageChange" @maxPage="data=>maxPage=data" :current="currentPage" :total="total" :equable="pageSize"/>
+      <Paging
+        @clickHandle="pageChange"
+        @maxPage="(data) => (maxPage = data)"
+        :current="currentPage"
+        :total="total"
+        :equable="pageSize"
+      />
     </div>
   </div>
 </template>
 
-<script>
-import OrderItem from './orderItem'
-import { mapState } from 'vuex'
-import Paging from '@/components/Paging'
-import Vue from 'vue'
-export default {
-  provide () {
-    return {
-      getList: this.getList
-    }
-  },
-  data () {
-    return {
-      pageSize: 5,
-      currentPage: 1,
-      total: 0,
-      maxPage: 0,
-      showInvoice: false,
-      currentI: '',
-      currentItem: ''
-    }
-  },
-  
-  watch: {
-    currentPage () {
-      this.getList()
-    }
-  },
-  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: {
-    OrderItem,
-    Paging
-  },
-  mounted () {
-    this.getList()
-  },
-  methods: {
-    edit (bool) {
-      console.log(bool)
-      this.$bus.$emit('isOrderInvoice', bool)
-    },
-    
-    pageChange (data) {
-      this.currentPage = data
-    },
-    async getList () {
-      window.scrollTo(0, 0)
-      let params = {
-        type: '',
-        pageNum: this.currentPage,
-        pageSize: this.pageSize
-      }
-      await this.$store.dispatch('getUserOrder', params)
-      this.pageSize = this.myorder.pageSize
-      this.total = this.myorder.total || 0
-    },
-    
-    
-  }
-}
-</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

@@ -1,202 +1,100 @@
-<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="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>
-        </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>
-            <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>
-            </div>
-          </div>
-          <div class="count">{{sub.goodsCount}}</div>
-          <div class="sum">{{sub.goodsPrice*sub.goodsCount}}</div>
-          <div class="sum"></div>
-        </div>
-        <div class="sum-price">
-          <div>￥{{item.goodsAmount}}</div>
-        </div>
-        <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 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)"/>
-          </div>
-        </div>
-        <div class="bottom-area">
-          <div class="bottom-left">
-            <template v-if="getStatus(item) === 'unpaid'">
-              <span></span>
-            </template>
-             <template v-else-if="getStatus(item) === 'shipped'">
-              <span class="expreeNum">{{$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>
-            </template>
-            <template v-else-if="getStatus(item) === 'finish'">
-              <span class="expreeNum">{{$t('manage.myOrders.finish')}}</span>
-            </template>
-            <template v-else-if="getStatus(item) === 'partShipped'">
-              <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>
-            </template>
-            <template v-else-if="getStatus(item) === 'expire'">
-              <span class="expreeNum">{{$t('manage.myOrders.expire')}}</span>
-            </template>
-            <template v-else>
-              <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')}}</span>
-              <template v-if="getStatus(item) === 'unpaid'">
-                <span class="cancel btns" @click="cancal(item)">{{$t('manage.myOrders.cancal')}}</span>
-                <span class="pay btns" @click="toPay(item)">{{$t('manage.myOrders.pay')}}</span>
-              </template>
-            </template>
-          </div>
-        </div>
-      </div>
-</template>
+<script setup>
+import { ref, watch, onMounted, computed } from 'vue'
+import { getUserOrder } from '@/api/user'
+import Paging from '@/components/pc/Paging/index.vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    default: {}
+  },
+  i: {
+    type: Number
+  }
+})
 
-<script>
-import { mapState } from 'vuex'
-import editInvoice from '@/components/editInvoice'
+const list = ref([])
+const showInvoice = ref(false)
 
-export default {
-  props: {
-    item: Object,
-    i: Number
-  },
-  inject: ['getList'],
-  provide () {
-    return {
-      hideInvoice: this.hideInvoice,
-      saveInvoiceData: this.saveInvoice
+// watch(currentPage.value, () => {
+//   getList()
+// })
+onMounted(() => {
+  getList()
+})
+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
     }
-  },
-  data () {
-    return {
-      showInvoice: true
+  }
+  let pPay = function () {
+    switch (item.paymentStatus) {
+      case 'unpaid':
+        temp = 'unpaid'
+        break
+      case 'paid':
+        sPay()
+        break
+      default:
+        break
     }
-  },
-  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
-      console.log(item)
-      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) {
+  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
+}
+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',
         query: {
@@ -206,224 +104,446 @@ export default {
           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>
+<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="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>
+    </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 />
+        <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>
+        </div>
+      </div>
+      <div class="count">{{ sub.goodsCount }}</div>
+      <div class="sum">{{ sub.goodsPrice * sub.goodsCount }}</div>
+      <div class="sum"></div>
+    </div>
+    <div class="sum-price">
+      <div>￥{{ item.goodsAmount }}</div>
+    </div>
+    <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 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)"/> -->
+      </div>
+    </div>
+    <div class="bottom-area">
+      <div class="bottom-left">
+        <template v-if="getStatus(item) === 'unpaid'">
+          <span></span>
+        </template>
+        <template v-else-if="getStatus(item) === 'shipped'">
+          <span class="expreeNum"
+            >{{ $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>
+        </template>
+        <template v-else-if="getStatus(item) === 'finish'">
+          <span class="expreeNum">{{ $t('manage.myOrders.finish') }}</span>
+        </template>
+        <template v-else-if="getStatus(item) === 'partShipped'">
+          <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
+          >
+        </template>
+        <template v-else-if="getStatus(item) === 'expire'">
+          <span class="expreeNum">{{ $t('manage.myOrders.expire') }}</span>
+        </template>
+        <template v-else>
+          <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')
+          }}</span>
+          <template v-if="getStatus(item) === 'unpaid'">
+            <span class="cancel btns" @click="cancal(item)">{{
+              $t('manage.myOrders.cancal')
+            }}</span>
+            <span class="pay btns" @click="toPay(item)">{{ $t('manage.myOrders.pay') }}</span>
+          </template>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+// <script>
+// import { mapState } from 'vuex'
+// // import editInvoice from '@/components/editInvoice'
+
+// export default {
+//   props: {
+//     item: Object,
+//     i: Number
+//   },
+//   inject: ['getList'],
+//   provide() {
+//     return {
+//       hideInvoice: this.hideInvoice,
+//       saveInvoiceData: this.saveInvoice
+//     }
+//   },
+//   data() {
+//     return {
+//       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
+//       console.log(item)
+//       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;
-    border: 1px solid #EBEBEB;
-    .inovice-con{
-      max-height: 0;
-      overflow: hidden;
+  margin-bottom: 40px;
+  border: 1px solid #ebebeb;
+  .inovice-con {
+    max-height: 0;
+    overflow: hidden;
+  }
+  .ic-active {
+    max-height: 500px;
+    transition: 0.3s ease max-height;
+  }
+  .o-top {
+    color: #68b8f1;
+    line-height: 60px;
+    height: 60px;
+    font-size: 16px;
+    padding: 0 20px;
+    user-select: none;
+    border-bottom: 1px solid #ebebeb;
+  }
+  .o-title,
+  .o-invoiceTitle {
+    user-select: none;
+    display: flex;
+    height: 32px;
+    padding: 0 20px;
+    align-items: center;
+    line-height: 32px;
+    // border-bottom: 1px solid #EBEBEB;
+    background: #f7f7f7;
+    span {
+      font-size: 14px;
+      flex: 1;
+      text-align: center;
+      &:first-child {
+        flex: 5;
+        text-align: left;
+      }
+    }
+  }
+  .orderSn {
+    color: #323233;
+    margin-right: 15px;
+  }
+  .o-invoiceTitle {
+    align-items: center;
+    .iconfont {
+      vertical-align: middle;
+      font-size: 20px;
+      margin-right: 5px;
     }
-    .ic-active{
-      max-height: 500px;
-      transition: 0.3s ease max-height;
+    .icon-edit {
+      color: #15bec8;
     }
-    .o-top {
-      color: #68b8f1;
-      line-height: 60px;
-      height: 60px;
-      font-size: 16px;
-      padding: 0 20px;
-      user-select: none;
-      border-bottom: 1px solid #EBEBEB;
+    .icon-choice {
+      color: #02e430;
     }
-    .o-title,.o-invoiceTitle {
-      user-select: none;
-      display: flex;
-      height: 32px;
-      padding: 0 20px;
-      align-items: center;
-      line-height: 32px;
-      // border-bottom: 1px solid #EBEBEB;
-      background: #F7F7F7;
-      span {
-        font-size: 14px;
+    span {
+      display: inline-block;
+      vertical-align: middle;
+      &:last-child {
+        transform: translateX(11px);
+        cursor: pointer;
+      }
+      &:first-child {
         flex: 1;
-        text-align: center;
-        &:first-child {
-          flex: 5;
-          text-align: left;
-        }
+        transform: translateX(0);
+        text-align: left;
       }
     }
-    .orderSn {
-      color: #323233;
-      margin-right: 15px;
-    }
-    .o-invoiceTitle{
+  }
+  .o-invoice {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px 10px 85px;
+    color: #4a4a4a;
+    font-size: 14px;
+    border-bottom: 1px solid #ebebeb;
+  }
+
+  .o-detail {
+    display: flex;
+    align-items: center;
+    height: 86px;
+    line-height: 86px;
+    padding: 0 20px;
+    color: #4a4a4a;
+    font-size: 14px;
+    border-bottom: 1px solid #ebebeb;
+    .od-name {
+      display: flex;
       align-items: center;
-      .iconfont{
-        vertical-align: middle;
-        font-size: 20px;
-        margin-right: 5px;
-      }
-      .icon-edit{
-        color: #15BEC8;
-      }
-      .icon-choice{
-        color: #02e430;
+      flex: 5;
+      .thumbnail {
+        width: 55px;
+        margin-right: 10px;
       }
-      span {
-        display: inline-block;
-        vertical-align: middle;
-        &:last-child{
-          transform: translateX(11px);
-          cursor: pointer;
-        }
-        &:first-child {
-          flex: 1;
-          transform: translateX(0);
-          text-align: left;
+      p {
+        line-height: 1.5;
+        font-size: 14px;
+        color: #969696;
+        &:first-of-type {
+          font-weight: bold;
+          color: #2d2d2d;
         }
       }
     }
-    .o-invoice{
-      display: flex;
-      align-items: center;
-      padding: 10px 20px 10px 85px;
-      color: #4a4a4a;
-      font-size: 14px;
-      border-bottom: 1px solid #EBEBEB;
+    .count {
+      flex: 1;
+      text-align: center;
     }
+    .sum {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  position: relative;
+  .sum-price {
+    position: absolute;
+    color: #4a4a4a;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    right: 1px;
+    top: 33px;
+    bottom: 51px;
+    background-color: #fff;
+    width: calc(calc(100% - 40px) / 8 + 20px);
+    border-left: 1px solid #ebebeb;
+    font-weight: 400;
+    color: #202020;
+    font-size: 20px;
+  }
 
-    .o-detail {
-      display: flex;
-      align-items: center;
-      height: 86px;
-      line-height: 86px;
-      padding: 0 20px;
-      color: #4a4a4a;
+  .bottom-area {
+    position: relative;
+    .bottom-left {
+      position: absolute;
+      top: 50%;
+      left: 20px;
+      color: #a0a0a0;
+      transform: translateY(-50%);
       font-size: 14px;
-      border-bottom: 1px solid #EBEBEB;
-      .od-name {
-        display: flex;
-        align-items: center;
-        flex: 5;
-        .thumbnail {
-          width: 55px;
-          margin-right: 10px;
-        }
-        p {
-          line-height: 1.5;
-          font-size: 14px;
-          color: #969696;
-          &:first-of-type{
-           font-weight: bold;
-           color: #2d2d2d;
-          }
-        }
-      }
-      .count {
-        flex: 1;
+      color: #323233;
+    }
+    .to-pay {
+      text-align: right;
+      height: 50px;
+      line-height: 50px;
+      padding: 0 25px;
+      .cancel {
+        font-size: 14px;
+        // border: 1px solid #ccc;
+        display: inline-block;
         text-align: center;
+        cursor: pointer;
+        background: #fff;
+        color: #202020;
+        border: 1px solid #323233;
+        width: 104px;
+        height: 32px;
+        line-height: 32px;
+        border-radius: 4px;
       }
-      .sum {
-        flex: 1;
+      .pay {
+        background: #15bec8;
+        font-size: 14px;
+        color: #fff;
+        display: inline-block;
+        width: 104px;
+        height: 32px;
+        line-height: 32px;
         text-align: center;
+        cursor: pointer;
+        border-radius: 4px;
       }
-    }
-    position: relative;
-    .sum-price {
-      position: absolute;
-      color: #4a4a4a;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      right: 1px;
-      top: 33px;
-      bottom: 51px;
-      background-color: #fff;
-      width: calc(calc(100% - 40px) / 8 + 20px);
-      border-left: 1px solid #EBEBEB;
-      font-weight: 400;
-      color: #202020;
-      font-size: 20px;
-      
-    }
-
-    .bottom-area{
-      position: relative;
-      .bottom-left{
-        position: absolute;
-        top: 50%;
-        left: 20px;
-        color: #a0a0a0;
-        transform: translateY(-50%);
-        font-size: 14px;
+      .expreeNum {
+        margin-right: 60px;
         color: #323233;
       }
-      .to-pay {
-        text-align: right;
-        height: 50px;
-        line-height: 50px;
-        padding: 0 25px;
-        .cancel {
-          font-size: 14px;
-          // border: 1px solid #ccc;
-          display: inline-block;
-          text-align: center;
-          cursor: pointer;
-          background: #fff;
-          color: #202020;
-          border: 1px solid #323233;
-          width: 104px;
-          height: 32px;
-          line-height: 32px;
-          border-radius: 4px;
-        }
-        .pay {
-          background: #15BEC8;
-          font-size: 14px;
-          color: #fff;
-          display: inline-block;
-          width: 104px;
-          height: 32px;
-          line-height: 32px;
-          text-align: center;
-          cursor: pointer;
-          border-radius: 4px;
-        }
-        .expreeNum {
-          margin-right: 60px;
-          color: #323233;
-          
-        }
-      }
     }
-
   }
+}
 
-  .table-header {
-    font-weight: 600;
-    color: #202020;
-
-  }
+.table-header {
+  font-weight: 600;
+  color: #202020;
+}
 </style>

src/views/pc/order/index.vue

@@ -1,5 +1,7 @@
-<script setup lang="ts">
+<script setup>
 import { showConfirm } from '@/components/Toast'
+import deviceOrder from './components/deviceOrder.vue'
+// import interestsOrder from './components/interestsOrder.vue'
 import { ref, computed, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { openPay, getOrderInfo, wxLogin } from '@/api/api'
@@ -9,55 +11,138 @@ import { useI18n } from 'vue-i18n'
 const route = useRoute()
 const { locale: language, t } = useI18n()
 const tabs = [
-          {
-          name: t('manage.myOrders.tabs0'),
-          component: 'deviceOrder'
-        },
-        {
-          name: t('manage.myOrders.tabs1'),
-          component: 'interestsOrder'
-        },
-        {
-          name: t('manage.myOrders.tabs2'),
-          component: 'rechargeOrder'
-        },
-        {
-          name: t('manage.myOrders.tabs3'),
-          component: 'downOrder'
-        }
+  {
+    name: t('manage.myOrders.tabs0'),
+    key: 'deviceOrder',
+    component: deviceOrder
+  },
+  {
+    name: t('manage.myOrders.tabs1'),
+    key: 'interestsOrder',
+    component: 'interestsOrder'
+  },
+  {
+    name: t('manage.myOrders.tabs2'),
+    component: 'rechargeOrder'
+  },
+  {
+    name: t('manage.myOrders.tabs3'),
+    component: 'downOrder'
+  }
 ]
-const userStore = useUserStore();
+const userStore = useUserStore()
 // const isEur = userStore.isEur
-const tabComponent = ref('deviceOrder')
+const tabComponent = ref({
+  name: 'deviceOrder',
+  dom: deviceOrder
+})
 const searchKey = ref('')
 const searchShow = ref(false)
 const invoice = ref(null)
-// const consumeType = 
+// const consumeType =
+function handleTabChange(item) {
+  tabComponent.value = {
+    name: item.name,
+    dom: item.component
+  }
+}
+function changeSearchShow(bool) {
+  searchShow.value = bool
+}
 </script>
 <template>
   <div class="order-layout">
     <!-- <showInvoice :invoice="invoice" :consumeType="consumeType" v-if="invoice" @cancle="invoice = null" /> -->
     <div class="order-header">
       <ul class="tab-list">
-        <li :class="{active: tabComponent === item.component}" v-for="item in tabs" :key="item.component" @click="handleTabChange(item)">{{ item.name }}</li>
+        <li
+          :class="{ active: tabComponent.name === item.key }"
+          v-for="item in tabs"
+          :key="item.component"
+          @click="handleTabChange(item)"
+        >
+          {{ item.name }}
+        </li>
       </ul>
-      <div class="search-w" v-show="tabComponent === 'consumption' && searchShow">
-        <input type="text" v-model="searchKey" @keyup.enter="handleSearch" :placeholder="$t('manage.Spending.placeholdersearchID')">
+      <div class="search-w" v-show="tabComponent.name === 'consumption' && searchShow">
+        <input
+          type="text"
+          v-model="searchKey"
+          @keyup.enter="handleSearch"
+          :placeholder="$t('manage.Spending.placeholdersearchID')"
+        />
         <h-icon type="search" class="search-icon" @click="handleSearch" />
       </div>
     </div>
-    <!-- <keep-alive>
-      <component :is="tabComponent" ref="liveComponent" @changeSearchShow="changeSearchShow" />
-    </keep-alive> -->
-
+    <keep-alive>
+      <component :is="tabComponent.dom" />
+    </keep-alive>
   </div>
 </template>
 
+
+
 <style lang="less" scoped>
-.pcPage {
-  background: #f7f7f7;
-  max-width: 100vw;
-  display: block;
-  color:#202020;
+.order-header {
+  margin-bottom: 20px;
+  position: relative;
+  .search-w {
+    height: 40px;
+    width: 256px;
+    background: #ebebeb;
+    position: absolute;
+    right: 0;
+    top: 0;
+    input {
+      background: transparent;
+      border: none;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 50px 0 20px;
+    }
+    .search-icon {
+      position: absolute;
+      right: 20px;
+      top: 0;
+      height: 40px;
+      line-height: 40px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.tab-list {
+  display: inline-block;
+  position: relative;
+  height: 40px;
+  line-height: 40px;
+  li {
+    display: inline-block;
+    margin-right: 30px;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #909090;
+    font-weight: 600;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  .active {
+    color: #323233;
+    &::after {
+      content: '';
+      display: block;
+      width: 40px;
+      height: 2px;
+      background: #15bec8;
+    }
+  }
+}
+.order-layout {
+  background: #fff;
+  color: #646566;
+  padding: 18px 30px 30px;
 }
 </style>