小程序根据返回值的int类型渲染不同的状态

布满荆棘的人生 2022-10-08 15:20 275阅读 0赞

需求：返回值里面有  
0,1,2,3,4 分别代表面试，开会，拜访顾客，项目实施，其他这5中类型，需要将获取到的0,1,2,3,4渲染到页面上，分别显示所对应的类型状态面试，开会，拜访顾客，项目实施，其他。

json数据  
将准备的json数据放在服务器上，可以方便调用  
如果没有 自己的服务器，就准备掉后端的接口，或者直接存在本地的json文件里面，备用。

{
        "msg": "查询成功",
        "total": 25,
        "code": 1,
        "rows": [{
    
            "visitCause": 0
    
        }, {
    
            "visitCause": 1
    
        }, {
    
            "visitCause": 2
    
        }, {
    
            "visitCause": 3
    
        }, {
    
            "visitCause": 4
    
        }, {
    
            "visitCause": 2
    
        }, {
    
            "visitCause": 4
    
        }]
    }

![934d7c2f0b792839ab229a2eda968451.png][]

Page({
        data: {
            list: [],
        },
        onLoad: function(options) {
            wx.request({
                url: "http://xxx.com/test.json",
                data: {             
                },
                method: 'GET',
                header: {
                    'content-type': 'application/json'
                },
                success: res => {
                    this.setData({
                        //第一个data为固定用法，第二个data是json中的data
                        //list: res.data.rows
                        list: (res.data.rows || []).map(a => {
                            a.visitCause = a.visitCause === 0 ? '面试' : a.visitCause === 1 ? '开会' : a.visitCause === 2 ? '拜访顾客' : a.visitCause ===
                                3 ? '项目实施' : '其他'
                            return a
                        })
                    })
                }
            })
        },
    })

wxml

<view class="cu-item" wx:for="{
        {list}}" wx:key="index" catchtap="bindViewDetails" data-id="{
        {item.id}}">
                         <span>来访理由：{
        {item.visitCause}}</span> 
                </view>

显示

![9f4284eaf8b65a4fda40f756bc6694e2.png][]

[934d7c2f0b792839ab229a2eda968451.png]: /images/20221005/403c1d8615a94504ae768404280b9cfa.png
[9f4284eaf8b65a4fda40f756bc6694e2.png]: /images/20221005/07cf2672576c460aa891e4b34614fb13.png