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

拼搏现实的明天。 2022-10-11 01:00 201阅读 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][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[934d7c2f0b792839ab229a2eda968451.png]: /images/20221005/1480113076b04596b2218327da30df8e.png
[9f4284eaf8b65a4fda40f756bc6694e2.png]: /images/20221005/aff2b033632c4dd6b2f09dc8befd6e17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/8e4a737b331f49d3ad3b15a1fb14bf33.png