Skip to content

3.22online-webui前端我的订单

1.4.1 我的订单页--新增路由(0.5d) 
1.4.2 我的订单页--订单列表静态(1d) 
1.4.3 我的订单页--订单列表交互(1.5d) 
1.4.4 我的订单页--订单详情(1d)

##一、路由

lcy 4d
{"content":[{"createTime":1616399679000,"leaseTerm":"ONE_YEAR","orderId":"02-2021032215543854380000","orderStatus":"NOT_PAID","orderType":"TIME_LICENSE","payTime":0,"totalPrice":3279.00,"userName":"941235"},{"createTime":1606387659000,"leaseTerm":"ONE_YEAR","orderId":"00-2020112618473947390000","orderStatus":"NOT_PAID","orderType":"HOSTED_DATA","payTime":0,"totalPrice":98000.00,"userName":"941235"},{"createTime":1603075127000,"leaseTerm":"ONE_YEAR","orderId":"02-2020101910384638460000","orderStatus":"NOT_PAID","orderType":"TIME_LICENSE","payTime":0,"totalPrice":3279.00,"userName":"941235"}],"currentPage":1,"pageSize":10,"searchParameter":{"currentPage":1,"orderBy":"CREATETIME","orderType":"DESC","pageSize":10,"userName":"941235"},"total":3,"totalPage":1}
http://192.168.13.117/web/mycontent/keys.json?t=1616551330046&t=1616551330046&tags=%5B%5D&keywords=%5B%5D&currentPage=2&pageSize=10


http://192.168.13.117/api/web/mycontent/cloud/orders.json?t=1616551119309&t=1616551119309&tags=%5B%5D&keywords=%5B%5D&currentPage=2&pageSize=10
orderCommon.js
resource_zh_CN.js
resource_en_US.js
formatNumUtil.js
LeaseTerm.js

订单类型
TIME_LICENSE 	限时许可
PREPAID_CARD	储值卡
HOSTED_DATA		云存储
NEW_IESRVER		云主机
        "timeLicense":"限时许可",
        "prepaidCard":"储值卡",
        "hostedData":"云存储",
        "newIeSrver":"云主机",
        
        "timeLicense":"Time license",
        "prepaidCard":"Prepaid card",
        "hostedData":"Cloud Storage",
        "newIeSrver":"iServer",
        
        // order type
        hosted_data: "云存储",
        new_iesrver: "云主机",
        time_license: "限时许可",
        prepaid_card: "储值卡",
        
        hosted_data: "Cloud Storage",
        new_iesrver: "iServer",
        time_license: "Time license",
        prepaid_card: "Prepaid card",

订单状态
COMPLETED	交易完成
NOT_PAID	待付款
PAID		已付款	
PROCESSING_ERROR	处理失败

 
        "completed":"交易完成",
        "notPaid":"待付款",
        "processingError":"处理失败",
        
        "completed":"Transaction completed",
        "notPaid":"To be paid",
        "processingError":"Process failed",
        
        
                // leaseTerm
        six_hours: "6 hours",
        one_day: "1 day",
        one_week: "1 week",
        one_month: "1 month",
        two_months: "2 months",
        three_months: "3 months",
        half_year: "6 months",
        one_year: "1 year",
        two_years: "2 years",
        three_years: "3 years",
        five_years: "5 years",
                // leaseTerm
        six_hours: "半天",
        one_day: "一天",
        one_week: "一周",
        one_month: "1个月",
        two_months: "2个月",
        three_months: "3个月",
        half_year: "半年",
        one_year: "一年",
        two_years: "两年",
        three_years: "三年",
        five_years: "五年",
        
            "sixHours":"半天",
            "oneDay": "一天",
            "oneWeek": "一周",
            "oneMonth": "1个月",
            "twoMonths": "2个月",
            "threeMonths": "3个月",
            "halfYear": "半年",
            "oneYear": "一年",
            "twoYears": "两年",
            "threeYears": "三年",
            "fiveYears": "五年",
        
        	"SIX_HOURS": "半天",
        	"ONE_DAY":"一天",
            "ONE_WEEK":"一周",
            "ONE_MONTH":"一个月",
            "TWO_MONTHS":"二个月",
            "THREE_MONTHS":"三个月",
            "HALF_YEAR":"半年",
            "ONE_YEAR":"一年",
            "TWO_YEARS":"两年",
            "THREE_YEARS":"三年",
            "FIVE_YEARS":"五年",
            
            
            
 
 /**
         * 格式化价格
         */
        formatPrice : function(price) {
            var number = price.toString();
            var rmb = number.split('.')[0];
            rmb = rmb.split('').reverse().join('').replace(/(\d{3}(?!$))/g, '$1,')
                    .split('').reverse().join('');
            return number.split('.')[1] ? rmb + '.' + number.split('.')[1].slice(0, 2) : rmb;
        }

 OrderStatus : {
                    "NOT_PAID" : SuperMapOnline.Lang.Resource.not_paid,
                    "PAID" : SuperMapOnline.Lang.Resource.paid,
                    "COMPLETED" : SuperMapOnline.Lang.Resource.completed,
                    "PROCESSING_ERROR" : SuperMapOnline.Lang.Resource.processing_error,
                    "PENDINGVERIFY" : SuperMapOnline.Lang.Resource.not_paid,
                    "REFUNDED" : SuperMapOnline.Lang.Resource.refunded,
                    "TRADE_OFF" : SuperMapOnline.Lang.Resource.trade_off,
                    "RESOURCE_CONTROL" : SuperMapOnline.Lang.Resource.processing_error,
                    "LicensePAID" : SuperMapOnline.Lang.Resource.paid
                },
                /**
                 * 获得格式化的租期,带单位 TODO 直接从国际化类中获取值
                 */
                getLeaseTermHTML : function(leaseTerm) {
                    if (leaseTerm == 1) {
                        return SuperMapOnline.Lang.Resource.one_day;
                    } else if (leaseTerm == 7) {
                        return SuperMapOnline.Lang.Resource.one_week;
                    } else if (leaseTerm == 30) {
                        return SuperMapOnline.Lang.Resource.one_month;
                    } else if (leaseTerm == 360) {
                        return SuperMapOnline.Lang.Resource.one_year;
                    } else if (leaseTerm < 7) {
                        return leaseTerm + SuperMapOnline.Lang.Resource.day;
                    } else if (leaseTerm < 30) {
                        return leaseTerm / 7 + SuperMapOnline.Lang.Resource.week;
                    } else if (leaseTerm < 360) {
                        return leaseTerm / 30 + SuperMapOnline.Lang.Resource.month;
                    } else {
                        return leaseTerm / 360 + SuperMapOnline.Lang.Resource.year;
                    }
                },


day: "天",
        week: "周",
        season: "季",
        month: "个月",
        year: "年",

        
 // order status
        status: "状态",
        payment: "付款",
        paid: "已付款",
        cancel: "取消",   CANCEL
        not_paid: "待付款",
        processing_error: "处理失败",
        refunded: "已退款",
        paidOff: "已支付", PAIDOFF
        completed: "交易完成", COMPLETED
        trade_off: "交易关闭", TRADE_OFF
        needConfirm: "待确认", NEEDCONFIRM
        
  // order status
        status: "Status",
        payment: "Pay",
        paid: "Paid",
        cancel: "Cancel",
        not_paid: "To be paid",
        processing_error: "Process failed",
        refunded: "Refunded",
        paidOff: "Paid",
        completed: "Transaction completed",
        trade_off: "Trading closed",
        needConfirm: "To be confirmed",
        
iportalMyOrders_zh_CN.html

<!-- 创建时间 -->
                <a-table-column
                    :title="$t('MyAccount.createTime')"
                    dataIndex="createTime"
                    key="createTime"
                >
                    <span slot="title">
                        <!-- <span @click="changeOrderBy('APPLYTIME')">{{$t('MyAccount.appliedTime')}}</span> -->
                        <span style=" margin-left: 5px"  @click="changeOrderType('APPLYTIME')">
                            <a-icon
                                type="swap-right"
                                style="-moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
                                v-if="pagination.orderBy === 'APPLYTIME' && pagination.orderType === 'DESC'"
                                :title="$t('descend')"
                            />
                            <a-icon
                                type="swap-left"
                                style="-moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
                                v-else-if="pagination.orderBy === 'APPLYTIME' && pagination.orderType === 'ASC'"
                                :title="$t('ascend')"
                            />
                            <a-icon
                                type="swap"
                                style="-moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
                                v-else
                                :title="$t('MyAccount.sort')"
                            />
                        </span>
                    </span>
                    <!-- <template slot-scope="text">
                        <span v-if="text==='WEB'" class="sub-font">{{$t('MyAccount.siteAccess')}}</span>
                        <span v-if="text==='SERVER'" class="sub-font">{{$t('MyAccount.serviceRequest')}}</span>
                    </template> -->
                    <template slot-scope="text">
                        {{timeFormat(text)}}
                    </template>
                </a-table-column>

##二、接口调整

 <!-- 金额 -->
                <a-table-column
                    :title="$t('MyAccount.totalPrice')"
                    dataIndex="totalPrice"
                    key="totalPrice"
                >
 去掉
:title="$t('MyAccount.totalPrice')"

###1.订单号

ORDERID
http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=52&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=0&sSortDir_0=desc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"ORDERID","orderType":"DESC"}&_=1616825395244

###2.类型

http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=69&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=1&sSortDir_0=asc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"ORDERTYPE","orderType":"ASC"}&_=1616825395261

###3.创建时间

创建时间

http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=2&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=2&sSortDir_0=asc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"CREATETIME","orderType":"ASC"}&_=1616747386222


http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=3&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=2&sSortDir_0=desc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"CREATETIME","orderType":"DESC"}&_=1616747386223

###4.创建时间

http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=3&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=2&sSortDir_0=desc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"PAYTIME","orderType":"DESC"}&_=1616747386223

###5.状态

http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=87&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=4&sSortDir_0=asc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"ORDERSTATUS","orderType":"ASC"}&_=1616825395279

###6.金额

http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=66&iColumns=7&sColumns=,,,,,,&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=5&sSortDir_0=desc&iSortingCols=1&orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"TOTALPRICE","orderType":"DESC"}&_=1616825395258

###7.删除orderid

http://192.168.13.117/api/web/mycontent/cloud/orders/deleted.json


online_timelicenseorder:
INSERT INTO `online_timelicenseorder` VALUES (133, '02-2019080509301930190000', '9003004', '592659', 'ONE_YEAR', 'FILE', 1, 1, 37779, 0, NULL, NULL, NULL, 0, NULL, NULL, NULL);

INSERT INTO `online_timelicenseorder` VALUES (247, '00000000000000000000000000', '9003004', '1', 'ONE_YEAR', 'FILE', 1, 1, 37779, 0, NULL, NULL, NULL, 0, NULL, NULL, NULL);

ordercommoninfo:	
INSERT INTO `ordercommoninfo` VALUES ('02-2019080509301930190000', '1', 'TIME_LICENSE', 'NOT_PAID', 'ONE_YEAR', 37779.00, '2019-08-05 09:30:20', '1970-01-01 08:00:00', 'INSERT_SUCCESS', NULL);

00000000000000000000000000', '1', 'TIME_LICENSE', 'NOT_PAID', 'ONE_YEAR', 1111111.00, '2021-04-01 13:36:01', '2018-08-08 18:06:17', 'INSERT_SUCCESS', NULL);
INSERT INTO `ordercommoninfo` VALUES ('00000000000000000000000000000', '1', 'TIME_LICENSE', 'NOT_PAID', 'ONE_YEAR', 1111111.00, '2011-11-11 01:00:00', '2021-04-01 13:55:46', 'INSERT_SUCCESS', NULL);

online_timelicenseorderrecord
INSERT INTO `online_timelicenseorderrecord` VALUES (298, '02-2019080509301930190000', '9303009');

##三、分页组件

###1.portal用的普通分页

html
 <a-table
                :dataSource="keyinfos"
                :pagination="{current: pagination.currentPage, defaultPageSize: pagination.pageSize, total: pagination.total}"
                @change="changePage"

          
 直接在表头添加 :pagination和@change事件
          1.pagination的属性是固定的 current,defaultPageSize,total,这些数据由上层组件传入,通过props引入
          
          2.//page是固定参数:获取:pagination对象
            changePage(page,pageSize){
                this.params.currentPage = page.current;
                this.initOrderList(this.params);
            },

###2.其他分页组件

            <a-table
                :dataSource="keyinfos"
                :pagination="paginations"
                @change="changePage"
                :row-selection="rowSelection"
            >

属性值单独去设值
            changePage(page,pageSize){
                // this.paginations = page;
                //插件赋值
                this.paginations.current =  page.current,
                this.paginations.defaultPageSize = page.pageSize,
                this.paginations.pageSize = page.pageSize,
                this.paginations.total = page.total,
                //调用接口赋值
                this.params.currentPage = page.current;
                this.params.pageSize = page.pageSize;
                this.params.total = page.total;

                // this.params.pageSize = 5;
                this.initOrderList(this.params);
            },

2.下一页

:pagination="{current: pagination.currentPage, defaultPageSize: pagination.pageSize, total: pagination.total}"
http://192.168.13.117/api/web/mycontent/cloud/orders?orderSearchParameter=%7B%22currentPage%22%3A1%2C%22pageSize%22%3A10%2C%22orderBy%22%3A%22CREATETIME%22%2C%22orderType%22%3A%22DESC%22%7D

http://192.168.13.117/api/web/mycontent/cloud/orders?orderSearchParameter={"currentPage":1,"pageSize":10,"orderBy":"CREATETIME","orderType":"DESC"}

http://192.168.13.117/api/web/mycontent/cloud/orders.json?currentPage=2&pageSize=9


http://192.168.13.117/api/web/mycontent/cloud/orders?sEcho=4&iColumns=7&sColumns=,,,,,,&iDisplayStart=10&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&mDataProp_1=0&sSearch_1=&bRegex_1=false&bSearchable_1=true&bSortable_1=true&mDataProp_2=0&sSearch_2=&bRegex_2=false&bSearchable_2=true&bSortable_2=true&mDataProp_3=0&sSearch_3=&bRegex_3=false&bSearchable_3=true&bSortable_3=true&mDataProp_4=0&sSearch_4=&bRegex_4=false&bSearchable_4=true&bSortable_4=true&mDataProp_5=0&sSearch_5=&bRegex_5=false&bSearchable_5=true&bSortable_5=true&mDataProp_6=0&sSearch_6=&bRegex_6=false&bSearchable_6=true&bSortable_6=false&sSearch=&bRegex=false&iSortCol_0=2&sSortDir_0=desc&iSortingCols=1&orderSearchParameter={"currentPage":2,"pageSize":10,"orderBy":"CREATETIME","orderType":"DESC"}&_=1616747386224

##四、详情页

<!-- 订单详情内容 -->
<#include "templ/hostedServerOrderTempl${lang}.html"><!-- 云主机 -->
<#include "templ/hostedDataOrderTempl${lang}.html"><!-- 数据服务 (云存储) -->
<#include "templ/cloudStorageEnterpriseOrderTempl${lang}.html"><!-- 企业云存储 (云存储) -->
<#include "templ/timeLicenseOrderTempl${lang}.html"><!-- 限时许可 -->
<#include "templ/prepaidCardOrderTempl${lang}.html"><!-- 储蓄卡 -->
<#include "templ/invoiceDetailTempl${lang}.html"><!-- 发票 -->

<!-- 订单详情内容 -->
	<!-- 订单信息 -->
		<#include "templ/hostedDataOrderTempl${lang}.html"><!-- 数据服务 (云存储) -->
							or
		<#include "templ/timeLicenseOrderTempl${lang}.html"><!-- 限时许可 -->
	<!-- 订单信息结束 -->
	
	<!-- 发票信息 -->
	<!-- 发票信息结束 -->
<!-- 订单详情内容结束 -->

云主机(x)
数据服务(x)
卡片(x)
云存储
	--个人
    --企业(x)
	
限时许可
	--限时文件许可 上传下载(x)
	--限时云许可
发票
	--普通发票
	--专用发票
	
支付状态(7种)
	--待支付(跳转到订单支付页面)

订单信息
	--数据交互(从固定js拿数据)
	--模块(从固定js拿数据)

国际化处理
移动端处理

###1.跳转

1. 点击事件 
orderlist:
<template slot-scope="text,record">
  <a class="orderid-font" @click="getOrderinfo(record)"><span class="">{{text}}</span></a>
</template>

//点击事件的方法来自父组件
props:{
            getOrderInfo:Function
        },

###2.父组件

1.<!-- 订单列表 -->
                    <key-list v-if="keyinfos !== null"
                              v-bind:get-order-info="getOrderInfo"
                    ></key-list>
                    
2.method:
// 订单页详情
            getOrderInfo(orderinfo){
                //子组件传入
                this.orderinfo = orderinfo;
                //详情页面跳转判断
                this.orderInfoPage = true;
            },
            
 3.data:
 orderInfoPage:false, // 跳转详情页判断
 
 
4.路由(引入详情页组件)
import OrderInfoPage from './OrderInfoPage';

components: {
            KeyList,
            OrderInfoPage//详情页
        },

5.在订单列表新增判断	
<!-- 订单列表 -->
                    <key-list v-if="keyinfos !== null && !orderInfoPage"
                              v-bind:pagination="pagination"
                              v-bind:keyinfos="keyinfos"
                              v-bind:init-order-list="initOrderList"
                              v-bind:get-order-info="getOrderInfo"
                    ></key-list>

6.初始化时设置为false
created(){
            //页面加载初始化
            this.orderInfoPage = false;//初始化时详情页设置为false
            this.initOrderList();
 },

###3.限时许可

####1.订单id的url

限时云许可 
限时许可文件 FILE

5/7
限时许可文件 普通版  1/2
限时许可文件 需下载  1/7
限时许可文件 需上传  1/8
限时许可文件 带发票  3/5

限时云许可 普通版  2/4      CLOUD模块太长,样式不对
限时云许可 带发票  3/9  
限时云许可 未付款  12/4  	02-2018010414112611260000

最终用户 8/9

模块还有问题,会显示基础模块    主站主号 3/6 202101071604504500000
无扩展  主站主号 3/5

https://www.supermapol.com/api/web/mycontent/cloud/orders/02-201712271558055850000.json
建议联系平台核查原因

{
    "orderCommonInfo":{
        "createTime":1514361485000,
        "leaseTerm":"ONE_WEEK",
        "orderId":"02-201712271558055850000",
        "orderStatus":"COMPLETED",
        "orderType":"TIME_LICENSE",
        "payTime":1514361635000,
        "totalPrice":1169,
        "userName":"361143"
    },
    "orderDetail":{
        "amount":"1",
        "area":"安徽",
        "concurrency":1,
        "finalUser":"test",
        "id":0,
        "industry":"政府其他",
        "licID":0,
        "licenseTerm":"ONE_WEEK",
        "licenseType":"CLOUD",
        "moduleIds":[
            "9302006",
            "9302007"
        ],
        "moduleList":[
            {
                "discount":1,
                "halfYear":"2869",
                "moduleId":9302006,
                "moduleType":0,
                "month":"709",
                "season":"1669",
                "smID":"10506",
                "status":0,
                "threeYears":"12919",
                "twoYears":"8609",
                "type":1,
                "week":"209",
                "year":"4779"
            },
            {
                "discount":1,
                "halfYear":"2869",
                "moduleId":9302007,
                "moduleType":0,
                "month":"709",
                "season":"1669",
                "smID":"10507",
                "status":0,
                "threeYears":"12919",
                "twoYears":"8609",
                "type":1,
                "week":"209",
                "year":"4779"
            }
        ],
        "orderId":"02-201712271558055850000",
        "orderPrice":1169,
        "productId":"9002003",
        "status":1,
        "userName":"361143"
    },
    "paymentDetails":{

    }
}


————————————————————————————————————————————————————————--
{
	"orderCommonInfo": {
		"createTime": 1576220883000,
		"leaseTerm": "ONE_MONTH",
		"orderId": "02-20191213150803830000",
		"orderStatus": "COMPLETED",
		"orderType": "TIME_LICENSE",
		"payTime": 1576220933000,
		"totalPrice": 1129.00,
		"userName": "361143"
	},
	"paymentDetails": {
		"OFFLINE": 1129.00
	}
}

####2.新增resource.js

/**
 * @function getAccount
 * @description 获取当前订单详情信息。
 * @returns {*}
 */
 export function getOrderInfo(orderId) {
    return axios({
        url: `/api/web/mycontent/cloud/orders/${orderId}.json`,
        method: 'get',
    });
}

####3.多种限时许可详情页

02-202102201709139130000  待付款-跳转订单支付
02-2018122411535653560000  文件许可 5
02-2018121709205720570000  有扩展模块
02-201810251800550550000	只有订单
02-201807241901241240000   什么都没有
02-2018030909534853480000 02-2018030810595059500000	下载许可   8
02-201803081107117110000   订单信息-处理失败 8
02-2017102608415041500000  请联系我们为您生成正式许可: 10

限时云许可
限时许可文件
	--上传(移到许可里)交易完成  https://itest.supermapol.com/web/mycontent/cloud/orders/02-2017091810204120410000
	--下载(移到许可里) 交易完成 https://itest.supermapol.com/web/mycontent/cloud/orders/02-2017081014381538150000
	--激活失败 交易完成  https://itest.supermapol.com/web/mycontent/cloud/orders/02-2019071113555755570000

没有订单信息
有订单信息


支付状态:
	已付款
	待付款(点击跳转到“支付订单”页)
	交易完成
	处理失败
	
	

1.限时许可文件-下载
https://itest.supermapol.com/web/mycontent/cloud/orders/02-2017081014381538150000

###4.发票

云储存
普通发票 https://itest.supermapol.com/web/mycontent/cloud/orders/00-201806261149024920000 5/1	
专用发票 https://itest.supermapol.com/web/mycontent/cloud/orders/00-201807020925072570000 5/5

普通发票

http://localhost:8080/web-ui/my-account/order

[
    {
        "addressee":"echo echo",
        "bank":"",
        "bankAccount":"",
        "companyName":"无",
        "completeTime":0,
        "createTime":1610006698356,
        "invoiceId":272,
        "orderId":"02-202101071604504500000",
        "registeredAddress":"",
        "registeredPhone":"",
        "remarks":"",
        "status":0,
        "taxID":"I",
        "telephone":"01023905786",
        "type":"ORDINARY",
        "userAddress":"无",
        "userId":"361143"
    }
]

专用发票

[
    {
        "addressee":"test",
        "bank":"test",
        "bankAccount":"123",
        "companyName":"test",
        "completeTime":0,
        "createTime":1514361518435,
        "invoiceId":23,
        "orderId":"02-201712271558055850000",
        "registeredAddress":"test",
        "registeredPhone":"123",
        "remarks":"",
        "status":0,
        "taxID":"123",
        "telephone":"123",
        "type":"SPECIAL",
        "userAddress":"test",
        "userId":"361143"
    }
]
为什么是数组呢, 有很多发票?
状态除了未开,还有什么

###5.数据服务(个人版云存储)

个人版 
企业版 
类型都是HOSTED_DATA

区别: packageId=0300  0开头是个人版 , 1开头是企业版


https://itest.supermapol.com/api/web/mycontent/cloud/orders/00-201807020925072570000.json
{
    "orderCommonInfo":{
        "createTime":1530494707000,
        "leaseTerm":"ONE_MONTH",
        "orderId":"00-201807020925072570000",
        "orderStatus":"COMPLETED",
        "orderType":"HOSTED_DATA",
        "payTime":1530494882000,
        "totalPrice":0.01,
        "userName":"324366"
    },
    "orderDetail":{
        "packageId":"0300"
    },
    "paymentDetails":{

    }
}

https://itest.supermapol.com/api/web/pricing/hosteddata/general.json?packageId=0300
{
    "generalPackageType":"SENIOR",
    "generalQuota":{
        "maxBaseServiceAccessCount":10000,
        "maxCacheAccessCount":0,
        "maxCacheAmount":0,
        "maxCacheCapacity":0,
        "maxCacheCapacityByMB":0,
        "maxDataCapacity":5368709120,
        "maxDataCapacityByMB":5120,
        "maxKeySum":20,
        "maxMyServiceAccessCount":100000
    },
    "id":"0300",
    "monthlyPayment":499,
    "yearlyPayment":4999
}


https://itest.supermapol.com/api/web/pricing/hosteddata/general/enterprise.json?packageId=1200
{
    "generalPackageType":"PROFESSIONAL",
    "generalQuota":{
        "maxBaseServiceAccessCount":0,
        "maxCacheAccessCount":60000000,
        "maxCacheAmount":100000000,
        "maxCacheCapacity":2147483648000,
        "maxCacheCapacityByMB":2048000,
        "maxDataCapacity":107374182400,
        "maxDataCapacityByMB":102400,
        "maxKeySum":20,
        "maxMyServiceAccessCount":3000000
    },
    "halfYearPayment":90000,
    "id":"1200",
    "monthlyPayment":20000,
    "yearlyPayment":168000
}


1. 16-17页 企业版(发票) https://itest.supermapol.com/web/mycontent/cloud/orders/00-2018062611131413140000
2. 5页 个人版(发票) https://itest.supermapol.com/web/mycontent/cloud/orders/00-201807020925072570000
数据服务:    
    免费版
    标准版 https://itest.supermapol.com/web/mycontent/cloud/orders/00-20160516170306360000  1/1
    专业版 https://itest.supermapol.com/web/mycontent/cloud/orders/00-20160517100401410000  1/2
    高级版 https://itest.supermapol.com/web/mycontent/cloud/orders/00-201605172054015410000 2/10
    自选版
    
    钱有,:15/10
    企业版的:5/1    17/1
    带发票信息的:5/5
    
    standard STANDARD
    professional PROFESSIONAL 
    senior SENIOR
存储空间 
    标准版	1 GB
    专业版 2 GB
    高级版 5 GB
 用户数据服务
 	标准版	1 GB 20,000 次/天 
    专业版 2 GB  50,000 次/天
    高级版 5 GB  100,000 次/天
状态
	 // order status
        status: "状态",
        payment: "付款",
        paid: "已付款",
        cancel: "取消",
        not_paid: "待付款",
        processing_error: "处理失败",
        refunded: "已退款",
        paidOff: "已支付",
        completed: "交易完成",
        trade_off: "交易关闭",
        needConfirm: "待确认",

##五、国际化

###1.省略前缀

`${order}.orderId`

	MyAccount
	
Create time
Created time

##问题

1.	支付状态究竟有多少种
2.	支付时间(未付款或处理失败也不显示)  x
3.	发票状态除了 未开,还有什么,需要国际化不?
4.	限时许可:基础平台,核模块显示