动态数据渲染订单查询实现

.tabs{
    .tabs_title{
        display: flex;
        .title_item{
            display: flex;
            justify-content: center;
            align-items: center;
            flex:1;
            padding: 15rpx 0;
        }
        .active{
            columns: var(--themeColor);
            border-bottom: 5rpx solid currentColor;
        }
    }
    .tabs_content{
         .order_main{
             .order_item{
                 padding: 20rpx;
                 border-bottom: 1rpx solid #ccc;
                 color: #666;
                 .order_no_row{
                     display: flex;
                     justify-content: space-between;
                     padding: 10rpx 0;
                     .order_no_text{

                     }
                     .order_no_value{

                     }
                 }

                 .order_price_row{
                    display: flex;
                    justify-content: space-between;
                    padding: 10rpx 0;
                     .order_price_text{

                     }
                     .order_price_value{
                        color: var(--themeColor);
                        font-size: 32rpx;
                     }
                 }

                 .order_time_row{
                    display: flex;
                    justify-content: space-between;
                    padding: 10rpx 0;
                     .order_time_text{

                     }
                     .order_time_value{

                     }
                 }
             }
         }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<view class="tabs">
    <view class="tabs_title">
        <view 
          bindtap="handleItemTap"
          data-index="{{index}}"
          wx:for="{{tabs}}"
          wx:key="id"
        class="title_item {{item.isActive?'active':''}}">
            {{item.value}}
        </view>
    </view>
    <view class="tabs_content">
        <view class="order_main">
            <view 
                wx:for="{{orders}}"
                wx:key="id"
             class="order_item">
                <view class="order_no_row">
                    <view class="order_no_text">
                    订单编号
                    </view>
                    <view class="order_no_value">{{item.orderNo}}</view>
                </view>

                <view class="order_price_row">
                    <view class="order_price_text">
                    订单价格
                    </view>
                    <view class="order_price_value">￥{{item.totalPrice}}</view>
                </view>

                <view class="order_time_row">
                    <view class="order_time_text">
                    订单日期
                    </view>
                    <view class="order_time_value">{{item.createDate}}</view>
                </view>
            </view>
        </view>
    </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

//定义请求根路径baseUrl
const baseUrl="http://localhost:8080";

//同时并发请求的次数
let ajaxTimes=0;
/**
 * 返回请求根路径baseUrl
 * 
 */
export const getBaseUrl=()=>{
    return baseUrl;
}

/**
 * wx login封装
 * 
 */
export const getWxLogin=()=>{
    return new Promise((resolve,reject)=>{
        wx.login({
            timeout:5000,
          success: (res) => {
            resolve(res)
          },
          fail:(err)=>{
              reject(err)
          }
        })
    });
}



/**
 * wx getUserProfile封装
 * 
 */
export const getUserProfile=()=>{
    return new Promise((resolve,reject)=>{
        wx.getUserProfile({
            desc:'获取用户信息',
            success: (res) => {
                resolve(res)
              },
              fail:(err)=>{
                  reject(err)
              }
        })
    });
}

/**
 * promise 形式的 小程序微信支付
 * 
 * @param {*} params 
 */

 export const requestPay=(pay)=>{
     return new Promise((resolve,reject)=>{
         wx.requestPayment({
             ...pay,
             success:(res)=>{
                 resolve(res)
             },
             fail:(err)=>{
                 reject(err)
             }
         })
     }); 
 }

/**
 * 
 * @param {后端请求工具类} params 
 */
export const requestUtil=(params)=>{

    //判断url中是否带有 /my/ 请求的是私有的路径 带上header token
    let header={...params.header};
    if(params.url.includes("/my/")){
        //拼接header 带上token
        header["token"]=wx.getStorageSync('token') 
    }

    var start=new Date().getTime();
    console.log(start)
    
    ajaxTimes++;
    wx.showLoading({
      title: '加载中...',
      mask:true
    })

    //模拟网络延迟加载...
    while(true){
        if(new Date().getTime()-start>1*1000)break;
    }

    return new Promise((resolve,reject)=>{
        wx.request({
            ...params,
            header,
            url:baseUrl+params.url, 
            success:(result)=>{
                resolve(result.data)
            },
            fail:(err)=>{
                reject(err)
            },
            complete:()=>{
                ajaxTimes--;
                if(ajaxTimes==0){
                    wx.hideLoading();   //关闭加载图标
                }
            }`在这里插入代码片`
        })
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

注意token有效时间

package com.java1234.constant;

/**
 * 系统级静态变量
 * @author java1234_小锋
 * @site www.java1234.com
 * @company Java知识分享网
 * @create 2019-08-13 上午 9:51
 */
public class SystemConstant {

    /**
     * token
     */
    public static final int JWT_ERRCODE_NULL = 4000;			//Token不存在
    public static final int JWT_ERRCODE_EXPIRE = 4001;			//Token过期
    public static final int JWT_ERRCODE_FAIL = 4002;			//验证不通过

    /**
     * JWT
     */
    public static final String JWT_SECERT = "8677df7fc3a34e26a61c034d5ec8245d";			//密匙
    public static final long JWT_TTL = 1000000;									//token有效时间
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25